/* SET GLOBAL VARS */

/* base colors */
:root {
    --bg-color:#64748b;
    --link-color: #0ea5e9;
    --hover-link-color: #0284c7;
    --disabled-color: hsla(199, 89%, 48%, 0.5);

    --warning: #FFBE0B;
    --alert: #fb923c; /* #FB5607; */
    --error: #FF006E;/*#FF006E;*/
    --success:#6da717;

    --on-color:#f59e0b;
    --off-color:#9ca3af;
    --warn-color:#dc2626;
}

/* for tailwind */
[x-cloak] { display: none; }

/* global */
html {height:100%;}
body {color:#111;background:var(--bg-color);font-family: 'Nunito Sans', arial, 'sans-serif', verdana;font-size:1rem}

h1 {font-size:2rem !important;font-weight:700 !important;line-height:2.3rem;font-family:Arsenal}
h2 {font-size:1.6rem !important;line-height:2rem !important;font-weight:400;margin:1.5em 0 0.5em !important;}
h3 {font-size:1.2rem !important;font-weight:800 !important;line-height:1.7rem;margin:1.5em 0 0.5em !important;}
h4 {font-size:1.1rem !important;font-weight:700 !important;line-height:1.4rem;margin:1em 0 0.5em !important;}
h5 {font-size:1em !important;line-height:1.2em !important;}
h6 {font-size:0.9em !important;line-height:1em !important;}

h1 + h2 {font-size:2em;line-height:1.3em;font-weight:300;margin:.3em 0;font-style:italic;}
h2 + h3 {font-weight:300;}

h1 + p, h2 + p, h3 + p, p + p, ul + p, ol + p {margin-top:1em;}
p + h3, ul + h3, p + h4, ul + h4 {margin-top:2em !important;}
p > b, p > strong {font-weight:700;}

.mpt0 {margin-top:0 !important;margin-bottom:0 !important;padding-top:0 !important;}

article + h2, article + h3 {margin-top:0.5em !important}

a {cursor:pointer;text-decoration:none;}
a.light {color:#e2e8f0 !important}
a.light:hover {color:#f1f5f9 !important}

ul {margin:1em 0;list-style:disc !important;list-style-position:outside !important;margin-left:1.2em !important;}
ol {margin:.5em 0;list-style:decimal !important;list-style-position:outside !important;margin-left:1.2em !important;}
ol.none {list-style:none !important;}
li {margin:.3em 0}

blockquote {padding:1em;border-left:2px solid #d1d5db;}
/* form */
label {cursor:pointer;display:block;font-size:0.9em;line-height:1em;margin:1em 0 .3em 0;}
label.inline {display:inline !important}
label span {font-weight:normal;color:#666;}
label.error {font-weight:700;color:var(--link-color) !important}
.suggestion {display:block;font-size: 0.75rem;line-height: 1rem;margin-top:.3em}

input:not([type="image"]), select, textarea {width: 100%;font-size:100%;vertical-align:baseline;vertical-align:middle;padding:.5em .5em !important;margin:0;border-radius:0.125rem;color:#444 !important;border:1px solid #ccc;--moz-border-sizing:border-box;box-sizing:border-box;}
select {padding:.5em .6em !important;}
select:not([multiple]) {max-height: calc(1.2em + 22) !important;height: calc(1.2em + 22px) !important;}
input:focus, textarea:focus, select:focus {outline: 2px solid transparent;outline-offset: 2px;border:.1em solid var(--link-color) !important;}
textarea {width:100%;overflow:auto;display:inline-block;vertical-align:top;resize:vertical;height:6em;margin-bottom:.2em}

input[disabled], textarea[disabled], select[disabled] {background:#ddd;}
input[readonly], select[readonly], textarea[readonly] {background:#f8fafc;}
input[type="checkbox"], input[type="radio"] {box-sizing:border-box;width:1.5em;height:1.5em;padding:.75em;border:none;margin:.2em .5em .5em 0;}
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
/*input[type='password'] {font-family: sans-serif !important;letter-spacing: 0.1em;}*/

.checkbox {margin-top:.5em !important}
.checkbox label {margin:0;}
.checkbox label input[type="checkbox"] {margin:0 .5em 0 0}

input[type=range] {
	width: 100%;
	margin: 3px 0;
	background-color: transparent;
	-webkit-appearance: none;
	border:none !important;
  }
input[type=range]:focus {
	outline: none;
  }
input[type=range]::-webkit-slider-runnable-track {
	background: #cccccc;
	border: none;
	border: 0;
	border-radius: 1.3px;
	width: 100%;
	height: 18px;
	cursor: pointer;
  }
  input[type=range]::-webkit-slider-thumb {
	margin-top: -3px;
	width: 24px;
	height: 24px;
	background: var(--link-color);
	border: none;
	border-radius: 1px;
	cursor: pointer;
	-webkit-appearance: none;
  }
  input[type=range]:focus::-webkit-slider-runnable-track {
	background: #d9d9d9;
  }
  input[type=range]::-moz-range-track {
	background: #cccccc;
	border: none;
	border: 0;
	border-radius: 1.3px;
	width: 100%;
	height: 18px;
	cursor: pointer;
  }
  input[type=range]::-moz-range-thumb {
	width: 24px;
	height: 24px;
	background: var(--link-color);
	border: none;
	border-radius: 1px;
	cursor: pointer;
  }


.suggestion {display:block;font-size: 0.75rem;line-height: 1rem;margin-top:.3em}
.suggestion_inline {font-size: 0.75rem;line-height:0.9rem !important}

input[type="checkbox"] {
    appearance: none;
    position: relative;
    display: inline-block;
    background: lightgrey;
    height: 1.65rem;
    width: 2.75rem;
    vertical-align: middle;
    border-radius: 2rem;
    box-shadow: 0px 1px 3px #0003 inset;
    transition: 0.25s linear background;
}
input[type="checkbox"]::before {
    content: "";
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    background: #fff;
    border-radius: 1.2rem;
    position: absolute;
    top: 0.2rem;
    left: 0.2rem;
    box-shadow: 0px 1px 3px #0003;
    transition: 0.25s linear transform;
    transform: translateX(0rem);
}
input[type="checkbox"]:checked {
    background: var(--link-color);
}
input[type="checkbox"]:checked::before {
    transform: translateX(1rem);
}

input:focus {
    outline:none !important;
    outline-style:none !important;
}

input:focus-visible {
    outline-style:none !important;
}


/* BUTTONS */

.buttons, .buttons_warn {padding:1em;margin-top:1em;display:flex;justify-content: center;gap:1rem;}

.buttons button, .buttons_warn button, button.btn, a.btn {border-radius: 0.125rem;--tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    font-weight:600;line-height: 1.25rem;padding:0.5rem 1.5rem 0.5rem;transition: 0.4s;
}
.buttons button[type="submit"], .buttons button[type="button"], button.btn.link, a.btn.link {background-color:var(--link-color) !important;color:#fff !important;}
.buttons button[type="submit"]:hover, .buttons button[type="button"]:hover, button.btn.link:hover, a.btn.link:hover {background-color:var(--hover-link-color) !important;}
.buttons button[type="reset"], button.btn.gray, a.btn.gray {background-color:#d1d5db;color:#374151}

.buttons_warn button[type="submit"], .buttons_warn button[type="button"] {background-color:var(--warn-color) !important;color:#fff !important;}

button.btn.blink, a.btn.blink {border:1px solid var(--link-color);color:var(--link-color);}
button.btn.blink:hover, a.btn.blink:hover {background-color:var(--hover-link-color) !important;color:#fff !important;}

button.small {line-height:1rem;padding:0.7rem 0.7rem 0.5rem !important;}
a.link {color:var(--link-color) !important}

a.abtn {cursor:pointer;display:block;text-transform:uppercase;font-weight:bold;text-align:center;border-width:2px;border-radius: 1.5rem;padding:0.5rem 1.25rem;transition: 0.4s;}
/*a.abtn:hover {filter: grayscale(80%);}*/

button.btn {transition: 0.4s;}

.buttons button[disabled], input[disabled], button.btn.link[disabled]  {cursor: default;background-color:var(--disabled-color) !important;}


.success {color:var(--success)}
.alert {color:var(--error)}

.on {color:var(--on-color) !important}
.off {color:var(--off-color) !important}
.warn {color:var(--warn-color) !important}
.main_color {color:var(--link-color)}
.main_bg {background:var(--link-color);color:white !important}
.bg2 {background-color:var(--bg-color);color:#fff}
.ok {background-color:var(--success) !important;color:#fff}
.failed {background-color:var(--alert) !important;color:#fff}
.warning {background-color:var(--warn-color) !important;color:#fff}

td.black {color:black}
td.white {color:white}
/* TABLES */

table {border-collapse:collapse;border-spacing:0;width:100%;font-size:inherit;font-size:0.95em;margin:1em 0;}

tr {border-bottom:1px solid #d1d5db;}
tr.no_border {border:none;}

tr.first, thead tr:first-child {border-bottom:1px solid #d1d5db;}
tr:not(.no_hover):hover td {background:#64748b;color:#fff;}
tr:not(.no_hover):hover td a {color:#7dd3fc !important;}
th {text-align:center;background:#cbd5e1;line-height:2.2em;}
th:first-child {border-top-left-radius: 0.125rem;}
th:last-child {border-top-right-radius: 0.125rem;}
td {vertical-align:top;line-height:2em;padding:.3em 1em .1em;}
tr:not(.no_border) td:not(:first-child) {border-left:1px solid #d1d5db;}

tr:not(.no_border):nth-child(even) {background-color: #e2e8f0;}
td.marked, div.marked {background-color:var(--bg-color);color:#fff}

div.marked.softwarn, .softwarn {background-color:var(--warning) !important;color:#fff}

/* transparent backgrounds */
.overlay1 {background:rgba(0, 0, 0, .1)}
.overlay2 {background:rgba(0, 0, 0, .2)}
.overlay3 {background:rgba(0, 0, 0, .3)}

/* containers */
.container {max-width: 1200px;}
.small_container {max-width: 1024px;}
.tiny_container {max-width: 800px;}


/* SPINNER */
#working {position:absolute;top:0;left:0;right:0;margin-left:auto;margin-right:auto;width:6em;z-index:100}


#navbar {background-color:#fff;color:#404040;font-family:"Nunito Sans";font-weight:700;border-bottom:1px solid #e2e8f0;padding-bottom:0.5em}
#navbar .menu_item {
    border-width: 0;
    border-bottom-width: 1px;
    border-color: #fff;
    text-transform: capitalize;
    color: #444;
}

#navbar .menu_item:hover, #navbar .menu_item.active {
    color: var(--link-color) !important;
}

#navbar .mobile button, #navbar .mobile button:hover {font-size:1.6em;color:var(--link-color) !important;}
#navbar .screen button {background-color:var(--link-color) !important;color:#fff !important;border-radius:1.5rem;padding:0.5rem 0.75rem;}
#navbar .screen button:hover {color:var(--link-color) !important;background-color:#cbd5e1 !important;}
#navbar .sub {padding: 0.5rem;background-color:#fff;}

#logo {font-family:"Arsenal";font-weight:700;font-size:1.5em;}
#logo img {display:inline-flex;}

/* TABS */
.tabs {margin-top:1em;background:#f3f4f6;padding: 0.5rem 0.5rem 0 0.5rem;border-bottom:1px solid var(--link-color);border-top-left-radius: 0.3rem;border-top-right-radius: 0.3rem;}
button.tab {border-top-left-radius: 0.125rem;border-top-right-radius: 0.125rem;line-height: 1.25rem;padding:0.5rem 1.5rem;background-color:#d1d5db;color:#374151;}
button.tab.link {background-color:var(--link-color) !important;color:#fff !important}

#breadcrumb {padding:4.5em 1em 3em;}
#topic {background:#fff;color:#444;padding:0 0 3em;}
#topic section {position:relative;padding:2em 0;}
#topic section.bold_intro {padding-top:8rem;padding-bottom:8rem;margin-top:-6rem;}

#topic section.short {padding-top:0}
#topic section a {color:var(--link-color);font-weight:bold}
#topic section button.btn_as_link {color:var(--link-color) !important;font-weight:normal}

#sidebar a > span {display: inline-flex;}
.sidebar {background-color:#f9fafb;padding:1rem 0.75rem;box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);}

footer, #menu {color:white}
#menu .menu_col {font-size:1rem}
#menu .menu_item {padding-bottom:0.5rem;}


/* fix min-width */
#navbar, #breadcrumb, #topic, footer, .xmodal, #working {min-width:320px !important;}


/* modal */
#modal .modal_head h3, .modal_head h3 {font-weight:bold;letter-spacing: -0.025em;line-height:1rem;margin:0.5rem 0 !important}
#modal .modal_head h2 {font-weight:bold;margin:0.25em 0 !important}

.xmodal {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    max-height:100%
}

.modal_buttons {text-align:center;margin:2rem 0 1.5rem;}
.modal_buttons > button + button {margin: 0.5rem 0 0 0.5rem;}

.btn_shadow {box-shadow: 0px 5px 12px rgba(0, 0, 0, 0.4), 6px 5px 20px rgba(0, 0, 0, 0.5);}
.txt_shadow {text-shadow: 1px 1px 3px #333;}

/* youtube ratio */
.video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; }
.video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* iframe */
iframe, iframe[style] {
    display: block;
    background: #fff;
    border: none;
    height: 100vh;
    width: 100%;
}

/* fix vertical align*/
.va0 {vertical-align:middle !important}

/* scrollbars */
* {scrollbar-width: thin;scrollbar-color: #6b7280 white;}

/* Works on Chrome, Edge, and Safari */
::-webkit-scrollbar {width: 4px;}
::-webkit-scrollbar-track {background-color: white;}
::-webkit-scrollbar-thumb {background-color: #6b7280;border-radius: 4px;}

/* plugins */

/* x4get_by_key */
.gbkey_box {padding: 2rem;--tw-border-opacity: 1;border-color: rgb(229 229 229 / var(--tw-border-opacity));border-width: 2px;border-radius: 1rem;}
.gbkey_tags {--tw-border-opacity: 1;border-color: rgb(229 229 229 / var(--tw-border-opacity));border-top-width: 1px;}

@media (min-width: 320px) {
    .sidebar {border-radius:none;border-top-right-radius: 1rem;border-bottom-right-radius: 1rem;}
}

@media (max-width: 640px) {
    label {margin:0.5em 0 0;}
}

@media (min-width: 700px) {
    .sidebar {border-radius: 1rem;}
}

@media (max-width: 768px) {

    #navbar .menu_item:hover, #navbar .menu_item.active {border:none;}
}
@media (max-width: 820px) {
    .btn_info {display: none;}
}
@media (max-width: 1280px) {
    #topic .section {padding:2em 0 1.5em;}
}

@media (min-width: 1024px) {
    .sidebar {background-color:#fff !important;border-radius: none;padding:1rem 0;box-shadow: 0 0 #0000;}
}

@media (max-width: 1024px) {
    #navbar a.menu_item > span {display:none}
    #topic {padding-left:0.8em;padding-right:0.8em}
    #topic section.bold_intro {margin:-5rem -0.8rem}
    #banner_top {margin-top:1em;}
    h1 {font-size:1.5rem !important;}
    #sidebar a > span {display:none}
}