@import url('https://fonts.googleapis.com/css2?family=PT+Serif:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@200;300;400;600&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');

@font-face {
    font-family: SRS;
    src: url('/resources/fonts/Frutiger Neue LT W1G Regular.ttf');
}

:root {

    --srsbands: #0F1616;
    --srs: #902020;
    --srslight: #e84040;
    --srsgray: #333;
    --srsfore: #666;

    /* TABS */
    --q-tab-background: #333;
    --q-tab-foreground: #666;
    --q-tab-hover: #902020;
    --q-form-foreground: #ccc;
    --tabWidth: 200px;

    /* Inputs */
    --input-back: rgba(255, 255, 255, 0.1);
    --input-border: #666;
    --input-fore: white;

    /* MENU */
    --menu-back: #303232;
    --menu-child-back: #252626;
    --menu-back-hover: #202121;
    --menu-border-color: #272828;
    --menu-fore: white;
    --menu-child-border-color: #282929;

    /* TOASTS */
    --toast-alert-fore: #fff;
    --toast-ok-fore: #fff;
    --toast-info-fore: #fff;

    /* --color-back:  #151111; */
    --color-back: #202121;
    /* --color-high: #01949A; */
    --color-high: #8fe3e3;
    /* --color-fore: rgba(0, 67, 105, 1); */
    --color-fore: #3bcece;
    --color-fore-lgt: rgba(0, 67, 105, 0.5);
    --color-fore-drk: #00324e;
    --color-error: #DB1F48;
    --color-crystal: rgba(229, 221, 200, 0.2);
    --color-crystal-almostnone: rgba(229, 221, 200, 0.1);
    --color-input: rgba(17, 13, 13, 0.2);
    --color-input-disabled: #f8f8f8;
    --color-text-disabled: #666;
    --color-select-dropdown: #4f5057;
    --color-input-border: rgba(255, 255, 255, 0.2);
    --color-crystal-blur: rgba(229, 221, 200, 0.75);
    --color-crystal-border: rgba(229, 221, 200, 0.4);
    --color-crystal-blue: rgba(0, 67, 105, 0.4);
    --color-menu: rgba(0, 67, 105, 1);
    --color-a: rgba(229, 221, 200, 0.6);
    --borderR: 1rem;
    --color-bkg: #0A102A;
    --toast-alert: rgba(255, 0, 0, 0.5);
    --color-menu1: #494a57;
    --color-menu2: #20253b;
    --red: #6E001B;
    --green: #81B29A;
    --alarm: #fff766;
    --fontsize: 0.85rem;

    --filterheight: 2.2rem;
    --fieldsetcolor: #c0c0c0;

    /* Some standard colors */
    --level1: #99a93d;
    --level2: #a9b94d;
    --level3: #f0ca27;
    --level4: #c88501;
    --level5: #bf3701;

    --q-background: #fcfcfc;
    --q-background2: #e5e5e5;
    --q-foreground: #444444;

    --srs: #902020;
    --srs-green: #208080;
    --srs-bright: #e0e0e0;
    --srs-gray: #666;
    --srs-secondary: #c48f8a;

    --q-gray: #dddddd;
    --q-gray-focus: #666666;
    --q-form-background: #f0f0f0;

    --inputheight: 1.8rem;
}

html * {
    font-family: "Fira Sans", sans-serif;
    font-size: var(--fontsize);
    font-weight: 300;
    user-select: none;
    outline: none !important;
    scrollbar-width: thin;
    scrollbar-color: var(--color-fore) var(--color-back);
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

span b {
    font-size: inherit !important;
    font-weight: bold;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: initial;
    color: var(--lback);
}

body {
    background-color: var(--color-back);
    padding: 0;
    margin: 0;
    overflow: hidden;
}

pre {
    color: white !important;
}

[serif] {
    font-family: 'PT Serif', serif !important;
}

[light] {
    color: var(--srs-bright) !important;
}

[bots] {
    margin-left: 16px;
}

[big] {
    font-size: 150%;
}

[medium] {
    font-size: 110%;
}

[middle] {
    vertical-align: middle;
}

[center] {
    text-align: center;
}

[cc] {
    position: absolute;
    left: -4px;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto !important;
}

[butt] {
    line-height: 32px;
    height: 32px;
    padding: 0;
    margin: 0;
}

[crystal] {
    color: var(--color-crystal) !important;
}


.hide {
    display: none !important;
}

[hidden] {
    display: none !important;
}

.pointer {
    cursor: pointer;
}

.no-shadow {
    box-shadow: none;
}

.position-sticky {
    top: 75px;
}

.login-brand {
    height: 30px;
}

#login>span:first-child {
    display: inline-block;
}

/* JOP Remove Google Maps Logo (API v3) */
.gm-style-cc {
    display: none !important;
}

.gm-style a[href^="https://maps.google.com/maps"] {
    display: none !important;
}

div.mdl-layout__drawer>nav.mdl-navigation>a.mdl-navigation__link {
    display: inline-flex !important;
    vertical-align: middle !important;
}

.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    padding: 0;
    margin: 0;
    vertical-align: middle;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

.material-symbols-label {
    font-weight: normal;
    font-style: normal;
    line-height: 1.2rem;
    height: 1.2rem;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    color: white;
    padding: 0;
    margin: 0;
    -webkit-font-smoothing: antialiased;
    margin-left: 0.5rem;
}

/* HTML OBJECTS */
input:not([type="radio"]):not([type="checkbox"]):not(.select2-search__field) {
    font-size: var(--fontsize) !important;
    padding: 0 0.5rem;
    box-sizing: border-box;
    height: var(--inputheight);
    line-height: var(--inputheight);
    color: var(--input-fore);
    background-color: transparent;
}

input:not([type="radio"]):not([type="checkbox"]):not(.select2-search__field, .dt-input) {
    border: none;
    outline: none;
    width: 80%;
}

.dt-input {
    background-color: var(--input-back) !important;
    border-color: var(--input-border) !important;
    color: var(--input-fore) !important;
}

.dt-left {
    text-align: left !important;
}

.dt-center {
    text-align: center !important;
}

textarea {
    font-size: var(--fontsize) !important;
    padding: 16px;
    resize: none;
    border: none;
    outline: none;
    box-sizing: border-box;
    line-height: normal;
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 0.75);
    color: var(--color-fore);
}


#topbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 80px;
    margin: 0;
    display: block;
    border-bottom: 2px solid var(--srs);
    background: url(/resources/gfx/dottedbkg.jpg) repeat;
    z-index: 2;
}

#toplogo {
    position: absolute;
    left: 16px;
    top: 0px;
    width: 180px;
    height: 80px;
    background-image: url('/resources/gfx/logo.svg');
    background-position: 32px center;
    background-size: 120px auto;
    background-repeat: no-repeat;
    opacity: 0.75;
    z-index: 3;
    cursor: pointer;
}

.topmenuoption {
    position: relative;
    float: right;
    line-height: 64px;
    text-align: center;
    padding: 0 2rem;
    transition: 0.3s;
    color: #dedede;
}

.topmenuoption:hover {
    color: var(--srslight);
    cursor: pointer;
}

.topmenuoption.dropdown span.material-symbols-outlined {
    margin-right: 0.5rem;
    color: var(--color-fore);
}

.topmenuoption.dropdown>span.material-symbols-outlined {
    font-size: 2rem;
    height: 2rem;
    line-height: 2rem;
}

/* Dropdown content (hidden by default) */
.dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content .dropdown-item {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
    line-height: normal;
    white-space: nowrap;
}

/* Add a grey background color to dropdown links on hover */
.dropdown-content .dropdown-item:hover {
    background-color: #ddd;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

.tbs {
    position: absolute;
    top: 58px;
    left: 0;
    width: 100vw;
    background: #E5DDC8;
    height: 6px;
}

.tbs::after {
    content: '';
    position: absolute;
    right: 0;
    left: -0%;
    top: 100%;
    z-index: 10;
    display: block;
    height: 6px;
    background-size: 6px 100%;
    background-image: linear-gradient(135deg, #E5DDC8 25%, transparent 25%), linear-gradient(225deg, #E5DDC8 25%, transparent 25%);
    background-position: 0 0;
}

.wrapper {
    display: flex;
    position: absolute;
    top: 82px;
    width: 100%;
}

#sme {
    position: relative;
    z-index: 998;
    width: 64px;
    height: calc(100vh - 82px);
    font-size: var(--fontsize);
    border: none;
    background-color: var(--menu-back);
    color: white;
    border-right: 1px solid var(--menu-back);
}

#sms2 {
    position: absolute;
    right: 0;
    top: 0;
    width: 16px;
    height: 100%;
    text-align: center;
    vertical-align: middle;
    margin: 0;
    padding: 0;
    transition: 0.3s;
}

#sms {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 64px;
    line-height: 64px;
    text-align: center;
    vertical-align: middle;
    margin: 0;
    padding: 0;
    transition: 0.3s;
    color: #e0e0e0;
    background-color: var(--color-back);
    user-select: none;
}

#smsicon {
    color: white !important;
}

#sms:hover {
    background-color: var(--menu-back-hover);
    color: white;
    cursor: pointer;
}

#sms:hover * {
    color: white;
}

[tmi] {
    position: relative;
    float: right;
    width: auto;
    height: 64px;
    line-height: 64px;
    font-size: var(--fontsize);
    font-family: "Fira Sans", sans-serif;
    color: white;
    padding: 0 16px 0 16px;
    transition: 0.3s;
}

[tmi]:hover {
    color: var(--color-high);
    cursor: pointer;
}

.app_title {
    margin-left: 140px;
    color: var(--color-fore);
    font-family: 'Barlow' !important;
    font-size: var(--fontsize) !important;
    cursor: pointer;
    content: 'Home';
}

[smo] {
    float: right;
    width: calc(100%);
    height: 64px;
    line-height: 64px;
    background-color: var(--menu-child-back);
}

[smo]:hover {
    cursor: pointer;
    background-color: var(--menu-back-hover);
}

[smi] {
    float: right;
    width: calc(100% - 16px - 60px);
    height: 64px;
    line-height: 64px;
    font-weight: 200;
    color: var(--menu-fore);
    display: none;
}

[smii] {
    float: right;
    width: 48px;
    height: 64px;
    line-height: 64px;
    text-align: center;
    vertical-align: center;
    padding: 0;
    margin: 0 10px 0 0;
    color: var(--color-back);
}

[smii] * {
    color: var(--menu-fore);
}

[parent] * {
    color: var(--menu-fore);
}

[parent] {
    background-color: var(--menu-back);
    border-bottom: 1px solid var(--menu-border-color);
}

[child] {
    background-color: var(--menu-child-back);
    color: var(--menu-fore);
    border-bottom: 1px solid var(--menu-child-border-color);
}

[parent][disabled] {
    cursor: default;
    opacity: 0.5;
}

[child][disabled] {
    cursor: default;
    background-color: var(--menu-child-back);
}

[child][disabled] [smi],
[child][disabled] [smii] {
    opacity: 0.2;
}

[noselect] {
    -webkit-touch-callout: none;
    /* iOS Safari */
    -webkit-user-select: none;
    /* Safari */
    -khtml-user-select: none;
    /* Konqueror HTML */
    -moz-user-select: none;
    /* Old versions of Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
    user-select: none;
    /* Non-prefixed version, currently
        supported by Chrome, Edge, Opera and Firefox */
}

.toast_container {
    width: 100%;
    height: 100vh;
    overflow-y: auto;
    max-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: end;
    /* justify-content: end; */
    padding-right: 0.5rem;
    padding-bottom: 1rem;
    scrollbar-gutter: stable;
}

.toast_div {
    width: 398px;
    height: fit-content;
    border-radius: 5px;
    padding-top: 20px;
    padding-bottom: 20px;
    text-wrap: nowrap;
    margin-top: 16px;
    padding-left: 32px;
    backdrop-filter: blur(5px);
    z-index: 99999;
    display: flex;
    flex-direction: row;
    color: var(--srs-bright);
}

.toast_div:first-child {
    margin-top: auto;
}

.toast_div .toast_body {
    display: flex;
    justify-content: center;
    text-wrap: wrap;
    flex-direction: column;
}

.toast_body .toast_title {
    font-weight: bold;
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}

.toast_div .toast_close {
    margin: auto 1rem auto auto;
    cursor: pointer;
}

.toast_alert {
    background-color: var(--srs);
}

.toast_info {
    background-color: var(--srsfore) !important;
}

.toast_ok {
    background-color: var(--srs-green) !important;
}

.toast_l1 {
    background-color: var(--level1) !important;
    color: var(--menu-back) !important;
}

.toast_l2 {
    background-color: var(--level2) !important;
    color: var(--menu-back) !important;
}

.toast_l3 {
    background-color: var(--level3) !important;
    color: var(--menu-back) !important;
}

.toast_l4 {
    background-color: var(--level4) !important;
    color: var(--menu-back) !important;
}

.toast_l5 {
    background-color: var(--level5) !important;
    color: var(--srs-bright) !important;
}

[toasticon] {
    margin-right: 20px !important;
    font-size: 48px !important;
}



#preloader {
    display: block;
    position: absolute;
    right: 8px;
    top: 8px;
    transform: translateZ(1px);
    z-index: 999;
}

#preloader:after {
    content: '';
    display: inline-block;
    width: 32px;
    height: 32px;
    margin: 8px;
    border-radius: 50%;
    background: var(--color-crystal-blue);
    animation: coin-flip 2.4s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

@keyframes coin-flip {

    0%,
    100% {
        animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5);
    }

    0% {
        transform: rotateY(0deg);
    }

    50% {
        transform: rotateY(1800deg);
        animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1);
    }

    100% {
        transform: rotateY(3600deg);
    }
}

.relative {
    position: relative;
}

/* FORMS */
#workarea {
    width: calc(100% - 64px);
    height: calc(100vh - 80px);
    font-size: var(--fontsize);
    font-weight: 200 !important;
    margin: 0;
    box-sizing: border-box;
}

.form {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 2px;
    color: #444;
    font-size: var(--fontsize);
    font-weight: 200 !important;
    padding: 1rem;
    margin: 0;
    box-sizing: border-box;
}

.innerform {
    text-align: left;
    position: relative;
    width: 100%;
    height: 100%;
    color: #e0e0e0;
    font-size: var(--fontsize);
    font-weight: 200 !important;
    padding: 16px;
    margin: 0;
    font-family: 'Barlow' !important;
    box-sizing: border-box;
}

.swal2-title {
    /* color: #333 !important; */
}

.swal2-title.form-title {
    color: var(--q-foreground) !important;
    font-size: calc(2*var(--fontsize)) !important;
}

.swal2-cancel.delete_button {
    margin-left: 2rem;
}

.tabcontent .alert-msg {
    height: 100%;
    display: flex;
    align-items: center;
}

.tabcontent .alert-msg span {
    font-size: 2rem;
    margin: 0 auto;
}

.innerform fieldset {
    border: 1px solid var(--srsfore) !important;
    border-radius: var(--borderR);
    padding: 1rem 2rem;
    margin-bottom: 1.5rem;
}

.innerform legend {
    padding: 0 10px;
    font-weight: normal;
    font-size: 110%;
    color: var(--srs-bright);
}

.innerform fieldset .form-field {
    margin-bottom: 0.5rem;
    display: flex;
    flex-direction: column;
}

.innerform fieldset .form-field .show-info {
    margin-left: 0.5rem;
    cursor: pointer;
}

.innerform fieldset .form-field .form-info {
    display: flex;
    flex-direction: column;
    margin-left: 0.5rem;
}

.innerform fieldset .form-field .form-info span {
    font-size: calc(0.9 * var(--fontsize));
    color: var(--color-text-disabled);
    margin-top: 0.25rem;
}

.innerform fieldset .form-field .form-info span span.info-name {
    color: black;
}

.innerform fieldset .flex-field {
    display: flex;
    flex-direction: row;
    margin-bottom: 0.5rem;
}

.innerform fieldset .flex-field .half {
    width: 50%;
}

.innerform fieldset .flex-field span.material-symbols-outlined {
    align-self: end;
}

.innerform fieldset .flex-field>.form-field {
    width: 50%;
    margin-bottom: 0;
}

.innerform fieldset .flex-field.almost>.form-field:nth-of-type(2) {
    width: 45%;
}

.innerform fieldset .flex-field.full>.form-field {
    width: 95%;
}

.innerform fieldset .flex-field>*:not(:first-child) {
    margin-left: 1rem;
}

.innerform fieldset .innerbutton {
    width: fit-content;
    margin-left: 0;
    float: left;
}

.innerform fieldset .flex-buttons {
    display: flex;
    flex-direction: row;
    width: 100%;
}

.innerform fieldset .flex-field .flex-buttons {
    width: 50%;
}

.innerform fieldset .flex-buttons>*:not(:first-child) {
    margin-left: 1rem;
}


.innerform .formfields {
    width: 100%;
    display: flex;
    column-gap: 1rem;
}

.innerform .formfields>* {
    width: 50%;
}

.innerform .formfields.full>* {
    width: initial;
}

.innerform .formfields.full>*:first-child {
    width: 100%;
}

.innerform .formfields fieldset.full {
    width: 100%;
}

.innerform .location,
.innerform .search_address {
    cursor: pointer;
    height: 2rem;
    font-size: calc(1.5 * var(--fontsize));
    color: var(--q-foreground);
}

.innerform label[required]::after {
    content: '*';
    color: red;
    font-size: var(--fontsize);
    font-weight: normal;
    margin-left: 0.25rem;
}

.innerform svg.sensor_icon {
    fill: var(--srs);
    stroke: var(--srs);
    stroke-width: 2;
    width: 10rem;
}

.innerform #geo_lookout {
    cursor: pointer;
    margin: 0;
    margin-left: 0.5rem;
    padding: 0 0 5px 0;
    vertical-align: top;
    font-size: 2.2rem !important;
}

.innerform.form-person .alerts {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-height: 50vh;
    overflow-y: auto;
}

.innerform.form-person .alerts .item {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0.5rem;
    margin-bottom: 0.5rem;
    border-radius: 0.5rem;
    cursor: pointer;
    position: relative;
    color: black;
}

.innerform.form-person .alerts .item:hover {
    background-color: var(--q-tab-hover);
}

.innerform.form-person .alerts .item .item-icon {
    font-size: 2rem;
    position: absolute;
    top: 0.75rem;
}

.innerform.form-person .alerts .item .item-body {
    display: flex;
    flex-direction: column;
    width: calc(100% - 5rem);
    margin-left: 2.5rem;
}

.innerform.form-person .alerts .item.finished .item-body {
    width: calc(100% - 5rem);
}

.innerform.form-person .alerts .item .item-body .item-text {
    font-size: 1rem;
    color: var(--q-foreground);
    width: fit-content;
}

.innerform.form-person .alerts .item .item-body .item-time {
    font-size: 0.75rem;
    color: var(--q-foreground);
    border-top: 1px solid #bbb;
}

.innerform.form-person .alerts .item .item-body .item-resolution {
    display: flex;
    flex-direction: column;
    cursor: default;
}

.innerform.form-person .alerts .item .item-body .item-resolution>span.big {
    margin-left: 0;
    font-size: 0.875rem;
    margin-top: 0.5rem;
    color: var(--q-foreground);
    padding-bottom: 0.25rem;
}

.innerform.form-person .alerts .item .item-body .item-resolution .res {
    margin-left: 1.5rem;
    margin-bottom: 0.5rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid #ddd;
    display: flex;
    flex-direction: row;

}

.innerform.form-person .alerts .item .item-body .item-resolution .res .col {
    display: flex;
    flex-direction: column;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}

.innerform.form-person .alerts .item .item-body .item-resolution .res .col.right {
    margin-left: auto;
    align-items: center;
    justify-content: center;
    margin-right: 0.5rem;
}

.innerform.form-person .alerts .item .item-body .item-resolution .res .col span {
    font-size: 0.75rem;
    color: var(--q-foreground);
}

.innerform.form-person .alerts .item .item-body .item-resolution .res .col.right span {
    color: var(--red);
    font-size: 1.5rem;
    cursor: pointer;
    line-height: 1.5rem;
}

.innerform.form-person .alerts .item .item-body .item-resolution .flex-buttons {
    width: calc(100% - 1.5rem);
    display: flex;
    flex-direction: row;
    margin-left: 1.5rem;
}

.innerform.form-person .alerts .item .item-body .item-resolution .flex-buttons .add_resolution,
.innerform.form-person .alerts .item .item-body .item-resolution .flex-buttons .cancel_resolution {
    width: fit-content;
    padding: 2px 8px;
    height: 1.5rem;
    line-height: 1.5rem;
    font-size: 0.75rem;
    margin-left: 0;
    margin-right: 0.5rem;
    cursor: pointer;
}


.innerform.form-person .alerts .item .item-body .item-resolution .res_input {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-left: 1.5rem;
    padding-left: 0;
    margin-bottom: 0.5rem;
}

.innerform.form-person .alerts .item .item-body .item-resolution .res_input select {
    width: 40% !important;
}

.innerform.form-person .alerts .item .item-body .item-resolution .res_input input {
    height: 1.5rem;
    line-height: 1.5rem;
    font-size: 0.75rem;
    margin-left: 0.5rem;
    color: var(--q-foreground);
}

.innerform.form-person .alerts .item.info .item-body .item-text {
    border-bottom: 2px solid var(--color-fore);
}

.innerform.form-person .alerts .item.info .item-icon {
    color: var(--color-fore);
}

.innerform.form-person .alerts .item.warning .item-body .item-text {
    border-bottom: 2px solid var(--level3);
}

.innerform.form-person .alerts .item.warning .item-icon {
    color: var(--level3);
}

.innerform.form-person .alerts .item.danger .item-body .item-text {
    border-bottom: 2px solid var(--red);
}

.innerform.form-person .alerts .item.danger .item-icon {
    color: var(--red);
}

.innerform.form-person .alerts .item.finished .item-icon.green {
    color: var(--level1);
    margin-left: 0.5rem;
    right: 0.5rem;
}

.innerform.conf .formfields {
    flex-wrap: wrap;
}

.innerform.conf .formfields>* {
    width: calc(50% - 1rem);
    display: flex;
    flex-direction: column;
}

.innerform.conf fieldset {
    border: 1px solid var(--srsfore) !important;
    border-radius: var(--borderR);
    padding: 1rem;
    margin-bottom: 1rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

.innerform.conf .formfields .col2 fieldset {
    height: 100%;
}

.innerform.conf legend {
    padding: 0 1rem;
    font-weight: normal;
    color: var(--srs-bright);
}

.innerform.conf .rs-handle {
    background-color: transparent;
    border: 6px solid transparent;
    border-right-color: white;
    margin: -6px 0 0 6px !important;
}

.innerform.conf .rs-handle:before {
    display: block;
    content: " ";
    position: absolute;
    height: 6px;
    width: 6px;
    background: white;
    right: -3px;
    bottom: -3px;
    border-radius: 100%;
}

.innerform.conf .rs-handle:after {
    display: block;
    content: " ";
    width: 28px;
    position: absolute;
    top: -1px;
    right: 0px;
    border-top: 2px dotted white;
}

.innerform.conf .rs-range-color {
    background-color: var(--color-fore);
}

.innerform.conf .rs-path-color {
    background-color: var(--color-high);
}

.innerform.conf .rs-bg-color {
    background-color: var(--color-back);
}

.innerform.conf .rs-border {
    border: 0;
}

.innerform.conf .ui-slider {
    width: 100%;
    background-color: var(--color-high);
    border: none;
    margin-bottom: 1rem;
}

.innerform.conf .ui-slider .ui-slider-range {
    background-color: var(--color-fore);
}

.innerform.conf .ui-slider .ui-slider-handle {
    top: -0.2em;
    margin-left: -.15em;
    border: none;
    background: var(--srsfore);
    width: 0.3em;
    border-radius: 1px;
}

.innerform.conf .card-input {
    width: calc(50% - 1rem);
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 0.5rem;
}

.innerform.conf .input-text {
    width: calc(50% - 1rem);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.innerform.conf .input-text.w-100 {
    width: 100%;
}

.innerform.conf .apply_conf {
    margin-right: auto;
    margin-top: 1rem;
    margin-left: 0.5rem;
}

.innerform.conf #device_map {
    width: 100%;
    height: 100%;
}

.innerform.conf .warning {
    font-size: 1rem;
    margin: auto;
}

.errval {
    display: inline-block;
    background-color: var(--color-error) !important;
    color: white !important;
    font-size: 0.875rem;
    line-height: normal;
    font-weight: normal;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    margin-top: 0.5rem;
    width: fit-content;
}

.errval:empty {
    padding: 0;
}

h1 {
    color: var(--color-a) !important;
    font-size: 110%;
    margin: 0px 0px 8px 0px;
    font-weight: bold;
}

.tab {
    float: left;
    width: var(--tabWidth);
    height: calc(100% - 64px);
    border-radius: var(--borderR) 0 0 var(--borderR);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    /* Add this line */
}

.tabfill {
    float: left;
    width: var(--tabWidth);
    flex-grow: 1;
    background-color: var(--q-tab-background);
    border-radius: 0 0 0 var(--borderR);
}

/* Style the buttons that are used to open the tab content */
.tab button {
    display: block;
    color: var(--q-tab-foreground);
    padding: 22px 16px;
    width: 100%;
    border: none;
    outline: none;
    text-align: left;
    cursor: pointer;
    transition: 0.3s;
    box-sizing: border-box;
    background-color: var(--q-tab-background);
}

.tab button:first-of-type {
    border-radius: var(--borderR) 0 0 0;
}

/* Change background color of buttons on hover */
.tab button:hover {
    background-color: var(--srs) !important;
    color: white !important;
}

/* Create an active/current "tab button" class */
.tab button.active {
    background-color: var(--srs) !important;
    color: white !important;
}

/* Style the tab content */
.tabcontent {
    float: right;
    /* width: calc(100% - (var(--tabWidth) + 4)); */
    width: 100%;
    height: calc(100% - 66px);
    padding: 0px 12px;
    border: none;
    border-radius: var(--borderR);
    font-weight: 200 !important;
    box-sizing: border-box;
    background-color: var(--menu-back-hover);
    color: white;
    overflow-y: auto;
}

.tabcontent.noscroll {
    overflow-y: hidden;
}

.tabcontent.search {
    display: flex;
    flex-direction: column;
}

.tabcontent::-webkit-scrollbar {
    height: 10px;
    width: 10px;
    background: var(--color-back);
}

.tabcontent::-webkit-scrollbar-thumb {
    background: var(--color-fore);
}

.tabcontent * {
    color: var(--q-form-foreground);
}

.form .tabcontent {
    float: right;
    width: calc(100% - var(--tabWidth));
    border-radius: 0px var(--borderR) var(--borderR) 0px;
}

.title {
    position: relative;
    width: 50%;
    height: 48px;
    line-height: 48px;
    padding: 0;
    margin: 0 0 16px 0;
    float: left;
}

.title * {
    color: white !important;
    font-size: 1rem !important;
}

.title span.material-symbols-outlined {
    font-size: 1.2rem !important;
    padding: 0 0 3px 0;
    margin: 0;
}

.form-buttons {
    position: relative;
    width: 50%;
    height: 48px;
    line-height: 48px;
    padding: 0;
    margin: 0 0 16px 0;
    float: right;
}

.form-buttons *,
.innerbutton {
    opacity: 0.7 !important;
    transition: all 0.25s ease-out;
}

.form-buttons *:hover,
.innerbutton:hover {
    opacity: 1 !important;
}

.btn {
    line-height: 2rem;
    float: right;
    margin-left: 1rem;
    text-decoration: none;
    border-radius: 5px;
    padding: 4px 16px 4px 12px;
    font-weight: normal;
    cursor: pointer;
}

.btn.btn-title {
    float: initial;
    display: inline-block;
}

.btn.btn-left {
    float: left;
    margin-left: 0;
    margin-right: 1rem;
}

.btn.btn-right {
    margin-left: auto;
}

.btn:hover,
.form-buttons {
    opacity: 1;
}

.btn.btn-success:hover {
    background-color: var(--green);
}

.btn.btn-cancel:hover {
    background-color: var(--srsgray);
}

.btn.btn-delete:hover {
    background-color: var(--srs);
}

.btn.btn-primary:hover {
    background-color: var(--color-fore);
}


.btn span.material-symbols-outlined {
    margin-right: 0.5rem;
    color: white;
    font-size: calc(1.5 * var(--fontsize));
}


.btn.btn-success {
    border: 2px solid var(--green);
    color: white;
}

.btn.btn-cancel,
.btn.btn-back {
    border: 2px solid var(--srsgray);
    color: white;
}

.btn.btn-delete {
    border: 2px solid var(--srs);
    color: white;
}

.btn.btn-primary {
    border: 2px solid var(--color-high);
    color: white;
}

.btn.disabled,
.btn.disabled:hover {
    opacity: 0.4 !important;
    cursor: default !important;
}

[formlabel] {
    color: var(--color-fore);
    font-weight: normal;
    user-select: none;
    margin-top: 4px;
    line-height: 24px !important;
}

input[forminput]:not([type="radio"]):not([type="checkbox"]),
textarea[forminput] {
    width: 100% !important;
}

div[id$=tabla_filter] input[type="search"] {
    color: var(--color-fore);
    background-color: var(--lback);
    margin-top: 1rem;
}

textarea[forminput] {
    color: var(--q-foreground) !important;
    background-color: var(--q-background);
    border: 1px solid var(--q-gray);
}

input[forminput]:not([type="radio"]):not([type="checkbox"]),
div[id$=tabla_filter] input[type="search"] {
    /* height: var(--inputheight) !important; */
    line-height: var(--inputheight) !important;
    background-color: transparent;
    color: var(--input-fore);
    transition: all ease-in-out .3s;
    border-bottom: 1px solid var(--input-border) !important;
}

input[forminput]:not([type="radio"]):not([type="checkbox"]):focus,
textarea[forminput]:focus,
div[id$=tabla_filter] input[type="search"]:focus {
    border-bottom: 1px solid white !important;
    background: rgb(255, 255, 255);
    background: linear-gradient(0deg, rgba(55, 55, 55, 0.59) 0%, rgba(45, 45, 45, 0.51) 8%, rgba(0, 0, 0, 0) 40%);
}

[forminput]:not([type="radio"]):not([type="checkbox"])[disabled],
[forminput]:not([type="radio"]):not([type="checkbox"])[readonly] {
    background-color: transparent;
    color: var(--input-fore) !important;
}

[forminput]:not([type="radio"]):not([type="checkbox"])[disabled]:focus,
[forminput]:not([type="radio"]):not([type="checkbox"])[readonly]:focus {
    cursor: not-allowed;
    border-bottom: none;
}

/* DATATABLES */

div.dt-scroll {
    background-color: transparent;
    border-radius: var(--borderR) !important;
}

div.DTS div.dt-scroll-body table {
    background-color: transparent !important;
}

div.dts div.dt-scroll-body {
    background: none !important;
    border-left: 0 !important;
}

div.DTS .dt-scroll-body tbody tr,
div.DTS .dt-scroll-head thead th {
    height: 2.5rem !important;
    color: var(--color-fore-drk) !important;
    font-weight: bold;
    user-select: none;
}

table.dataTable>thead>tr>th {
    border-bottom: 1px solid var(--srs) !important;
}

table.dataTable>tbody>tr:hover *:not([type=checkbox]) {
    background-color: var(--srs);
    color: var(--q-background) !important;
}

table.dataTable>tbody>tr:hover td:first-child {
    border-radius: 4px 0 0 4px;
}

table.dataTable>tbody>tr:hover td:last-child {
    border-radius: 0 4px 4px 0;
}

div.DTS tbody tr td {
    color: #a0a0a0 !important;
    font-weight: normal;
    user-select: none;
    padding-left: 10px !important;
    cursor: pointer;
}

div.DTS tbody tr td .btn {
    float: left;
}

div.DTS tbody tr td .material-symbols-outlined.icon {
    font-size: calc(2 * var(--fontsize));
    text-align: center;
}

.dataTables_filter {
    float: right;
    color: var(--q-foreground);
}

div[id$=tabla_wrapper]>.row {
    border-radius: var(--borderR) !important;
}

div[id$=tabla_wrapper]>.row:first-child {
    display: flex;
}

div[id$=tabla_wrapper]>.row:first-child .col-md-6 {
    width: 100%;
}

div.DTS td.upper {
    text-transform: uppercase;
}

h4.table_title {
    font-weight: normal;
    color: var(--q-foreground);
    margin-left: 1rem;
}

h4.table_title span.material-symbols-outlined {
    margin-left: 0.5rem;
    cursor: pointer;
    color: var(--q-foreground);
}

h4.table_title a.btn span.material-symbols-outlined {
    color: inherit;
}

td.dataTables_empty {
    vertical-align: middle;
}

.table td,
.table th {
    padding: 8px;
    vertical-align: middle;
}

.table th {
    font-weight: bold;
    border-bottom: 1px solid var(--table-border);
}

.table tbody tr:hover {
    background-color: var(--q-foreground) !important;
}

.table tbody td {
    border-bottom: 1px solid var(--table-bottom-border);
}

table.dataTable>thead .sorting::before,
table.dataTable>thead .sorting::after,
table.dataTable>thead .sorting_asc::before,
table.dataTable>thead .sorting_asc::after,
table.dataTable>thead .sorting_desc::before,
table.dataTable>thead .sorting_desc::after,
table.dataTable>thead .sorting_asc_disabled::before,
table.dataTable>thead .sorting_asc_disabled::after,
table.dataTable>thead .sorting_desc_disabled::before,
table.dataTable>thead .sorting_desc_disabled::after {
    bottom: 0.2em;
}

.dataTables_info {
    color: var(--q-foreground) !important;
}

.dataTables_filter label {
    color: var(--q-foreground) !important;
}

.dt-container img.table_icon {
    height: 18px;
}

/* SH2 */
i.my-icon {
    width: 0;
    height: 0;
}

.text-danger {
    color: #dc3545 !important;
}

.text-success {
    color: #28a745 !important;
}

[readonly] {
    cursor: default;
}

select {
    background-color: transparent !important;
    color: var(--input-fore) !important;
    outline: none;
    border: 0;
    padding-left: 0.5rem;
}

select option {
    background-color: transparent !important;
    color: var(--input-fore) !important;
}

select optgroup {
    background-color: transparent !important;
    color: var(--input-fore) !important;
    font-weight: bold;
}

select option:checked,
select option[selected] {
    background-color: var(--color-crystal-blur) !important;
    color: var(--color-fore) !important;
}

select option:hover,
select option:focus,
select option:active {
    background-color: var(--color-fore) !important;
    color: var(--color-back) !important;
}

/* BULK ACTIONS */
div.bulk_gp {
    display: flex;
}

div.bulk_parent {
    display: inline;
    width: 100%;
}

div.bulk_div {
    float: right;
    margin: 0 1rem;
}

.bulk_div .errval {
    float: right;
    margin-top: 0.5rem;
    position: absolute;
    right: 0;
    margin-right: 1rem;
}

div#bulk_container {
    display: flex;
}

#bulk_container select {
    margin-right: 0.25rem;
    width: auto;
}

#bulk_container button {
    background-color: var(--color-high);
    color: white;
    font-weight: normal;
    border: none;
    border-radius: 5px;
    padding: 4px 8px;
    height: var(--inputheight);
    line-height: normal;
    margin-left: 0.5rem;
}

#bulk_container .select2-container {
    margin-right: 0.25rem;
    width: auto !important;
}

/* END BULK ACTIONS */

/* SELECT2 */
.select2-container .select2-selection[aria-disabled=true] {
    opacity: 0.6;
}

.select2-results .select2-disabled,
.select2-results__option[aria-disabled=true] {
    display: none;
}

.select-container,
.bulk-select {
    background-color: white !important;
}

.bulk-select {
    height: var(--inputheight) !important;
    line-height: var(--inputheight) !important;
}

.bulk-select .select2-selection__rendered,
.bulk-select .select2-selection__arrow {
    height: var(--inputheight) !important;
    line-height: var(--inputheight) !important;
}

.select-container .select2-selection__rendered,
.select-container .select2-selection__arrow,
.bulk-select .select2-selection__rendered,
.bulk-select .select2-selection__arrow {
    font-size: var(--fontsize) !important;
    font-weight: normal !important;
    color: var(--color-fore) !important;
}

.select-dropdown .select2-results__option[aria-selected="false"]:not(.select2-results__option--highlighted),
.bulk-select-dropdown .select2-results__option[aria-selected="false"]:not(.select2-results__option--highlighted) {
    color: var(--color-fore);
    background-color: white
}

.select-dropdown .select2-results__option[aria-selected="true"]:not(.select2-results__option--highlighted),
.bulk-select-dropdown .select2-results__option[aria-selected="true"]:not(.select2-results__option--highlighted) {
    color: white;
    background-color: var(--srs);
}

.select-dropdown .select2-results__option--highlighted[aria-selected],
.bulk-select-dropdown .select2-results__option--highlighted[aria-selected] {
    color: white;
    background-color: var(--srs);
}

/* FORM SELECT */
.select2-container--default .form-select {
    height: 100%;
    background-color: transparent !important;
    border: none !important;
    border-bottom: 1px solid var(--input-border) !important;
    border-radius: 0 !important;
}

.form-select .select2-selection__rendered,
.form-select .select2-selection__arrow {
    color: var(--input-fore) !important;
    font-weight: 400;
}

.form-select .select2-selection__rendered {
    height: var(--inputheight) !important;
    line-height: var(--inputheight) !important;
}

.form-select-small {
    height: calc(0.75 * var(--inputheight)) !important;
    line-height: calc(0.75 * var(--inputheight)) !important;
}

.form-select-small .select2-selection__rendered {
    height: calc(0.75 * var(--inputheight)) !important;
    line-height: calc(0.75 * var(--inputheight)) !important;
}

.form-select.select2-selection[aria-disabled="true"] {
    opacity: 1;
    background-color: var(--color-input-disabled) !important;
}

.form-select.select2-selection[aria-disabled="true"] .select2-selection__rendered {
    color: var(--color-text-disabled) !important;
}

.form-select.select2-selection--multiple .select2-selection__rendered {
    height: 100% !important;
}

.form-select.select2-selection--multiple .select2-selection__rendered li {
    background-color: var(--color-fore) !important;
    border-color: var(--color-high) !important;
    color: var(--color-back) !important;
    height: var(--inputheight) !important;
    line-height: var(--inputheight) !important;
}

.form-select.select2-selection--multiple .select2-selection__clear {
    color: transparent;
}

.form-select.select2-selection--multiple .select2-selection__rendered .select2-search {
    background-color: var(--color-back) !important;
}

.form-select.select2-selection--multiple .select2-selection__choice__remove {
    color: var(--color-back);
    margin-right: 4px;
}

.form-select-dropdown {
    background-color: var(--color-back) !important;
    color: var(--input-fore) !important;
    border: 1px solid var(--input-border) !important;
    z-index: 9999;
}

.form-select-dropdown .select2-search__field {
    background-color: var(--color-back);
    color: var(--input-fore);
}

.form-select-dropdown .select2-results__option[aria-selected="false"]:not(.select2-results__option--highlighted) {
    color: var(--input-fore);
    background-color: var(--color-back) !important;
}

.form-select-dropdown .select2-results__option[aria-selected="true"]:not(.select2-results__option--highlighted) {
    color: var(--color-back) !important;
    background-color: var(--color-fore);
}

.form-select-dropdown .select2-results__option--highlighted[aria-selected] {
    color: var(--color-back) !important;
    background-color: var(--color-high);
    font-weight: 400;
}

/* .innerform .select2-container {
    width: 100% !important;
} */

/* END SELECT2 */

/* RADIO AND CHECKBOX */
ul.radioList,
ul.checkboxList {
    list-style: none;
    user-select: none;
    padding-left: 0;
}

ul.radioList li,
ul.checkboxList li {
    display: inline;
}

ul.radioList li label,
ul.checkboxList li label {
    display: inline-block;
    background-color: var(--color-back);
    border: 2px solid var(--color-back);
    color: var(--color-fore) !important;
    border-radius: 0.75rem;
    white-space: nowrap;
    user-select: none;
    padding: 0.35rem 0.6rem;
    font-weight: normal;
    line-height: normal;
    cursor: pointer;
}

ul.radioList li label::before,
ul.checkboxList li label::before {
    display: inline-block;
    font-family: "Material Symbols Outlined";
    font-style: normal;
    font-variant: normal;
    font-size: var(--fontsize);
    line-height: normal;
    padding: 2px 6px 2px 2px;
    width: 20px;
    height: 17px;
    content: "\e5cd";
}

ul.radioList li input[type="radio"]:checked+label::before,
ul.checkboxList li input[type="checkbox"]:checked+label::before {
    content: "\e876";
    width: 20px;
    height: 17px;
}

ul.radioList li input[type="radio"]:checked+label,
ul.checkboxList li input[type="checkbox"]:checked+label {
    border: 2px solid var(--color-fore) !important;
    background-color: var(--color-fore) !important;
    color: var(--color-back) !important;
}

ul.radioList li input[type="radio"],
ul.checkboxList li input[type="checkbox"] {
    position: absolute;
    opacity: 0;
}

ul.radioList li input[type="radio"]:hover:not([disabled])+label,
ul.checkboxList li input[type="checkbox"]:hover:not([disabled])+label {
    border: 2px solid var(--color-fore) !important;
}

/* END RADIO AND CHECKBOX */

/* SEARCHBAR */
.searchbar_div {
    display: flex;
    background-color: white;
    border-radius: 2rem;
    align-items: center;
    width: 70%;
    margin: 1rem auto;
    position: relative;
}

.searchbar_div>span {
    color: var(--color-fore);
    padding: 0 1rem;
    user-select: none;
}

.searchbar_div input[type="search"] {
    width: 90% !important;
    margin-bottom: 0;
}

.searchbar_div .filters {
    position: absolute;
    width: 80%;
    border-radius: 5px;
    right: 0;
    top: 3.5rem;
    background-color: white;
    padding: 1.5rem;
}

.searchbar_div .filters .filter-group {
    display: flex;
    width: 100%;
    background-color: white;
    border-radius: 10px;
    border: 1px solid var(--color-fore);
    align-items: center;
    overflow: hidden;
    margin-bottom: 1rem;
}

.searchbar_div .filters .filter-group:last-child {
    margin-bottom: 0.5rem;
}

.searchbar_div .filters .filter-group span.label {
    color: var(--color-fore);
    padding: 0 1rem;
    height: var(--filterheight);
    line-height: var(--filterheight);
    border-right: 1px solid var(--q-gray);
    font-weight: normal;
    width: 15%;
    text-align: center;
    background-color: var(--filter-labels-background) !important;
}

.searchbar_div .filters .filter-group input,
.searchbar_div .filters .filter-group select {
    margin-bottom: 0;
    width: 100% !important;
}

.filters {
    color: var(--q-foreground);
}

.searchbar_div {
    .select2-container .select2-selection {
        height: var(--inputheight);
        border: none;
        border-radius: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .select2-container .select2-selection .select2-selection__arrow {
        position: static;
    }

    .select2-container .select2-selection .select2-selection__arrow b {
        left: initial;
    }
}

/* END SEARCHBAR */

/* LOADER */
.loader_div {
    width: 100%;
    text-align: center;
}

.loader {
    width: 8px;
    height: 48px;
    display: block;
    position: relative;
    border-radius: 4px;
    color: #FFF;
    box-sizing: border-box;
    animation: animloader 0.6s linear infinite;
    margin: 2rem auto;
}

@keyframes animloader {
    0% {
        box-shadow: 20px -10px, 40px 10px, 60px 0px;
    }

    25% {
        box-shadow: 20px 0px, 40px 0px, 60px 10px;
    }

    50% {
        box-shadow: 20px 10px, 40px -10px, 60px 0px;
    }

    75% {
        box-shadow: 20px 0px, 40px 0px, 60px -10px;
    }

    100% {
        box-shadow: 20px -10px, 40px 10px, 60px 0px;
    }
}

/* END LOADER */

/* DASHBOARD */
.tabcontent.notabs {
    height: 100%;
    padding: 0.5rem;
    display: flex;
    flex-wrap: wrap;
    align-content: baseline;
}

.tabcontent.notabs .body {
    background-color: var(--q-tab-background) !important;
    color: var(--q-foreground) !important;
    border: none;
    border-radius: var(--borderR);
    padding: 1rem;
    width: 100%;
    height: 100%;
}

.tabcontent.notabs .filters {
    display: flex;
    align-items: center;
    margin-bottom: 0.25rem;
    height: 50px;

    .select2-container .select2-selection {
        height: 2.5rem;
        border: none;
        border-radius: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .select2-container .select2-selection .select2-selection__arrow {
        position: static;
    }

    .select2-container .select2-selection .select2-selection__arrow b {
        left: initial;
    }
}

.tabcontent.notabs .filters h2 {
    margin-left: 0.5rem;
    margin-right: 1rem;
    line-height: 1.8rem;
    color: white !important;
    text-wrap: nowrap;
}

.tabcontent.notabs .filters h2 span {
    color: white !important;
}

h2 * {
    color: var(--q-foreground) !important;
}

.tabcontent.notabs .filters .filter-group {
    display: flex;
    width: 23%;
    background-color: transparent;
    border-radius: 10px;
    border: 1px solid var(--srs);
    align-items: center;
    overflow: hidden;
    margin-right: 1rem;
    height: var(--filterheight);
    line-height: var(--filterheight);
}

.tabcontent.notabs .filters .filter-group:last-of-type {
    margin-right: 0;
}

.tabcontent.notabs .filters .filter-group span.label {
    color: var(--color-fore);
    padding: 0;
    height: var(--filterheight);
    line-height: var(--filterheight);
    border-right: 1px solid var(--srs);
    font-weight: normal;
    width: 25%;
    text-align: center;
    background-color: var(--filter-labels-background) !important;
}

.tabcontent.notabs .filters .filter-group input,
.tabcontent.notabs .filters .filter-group select {
    margin-bottom: 0;
    height: auto;
    line-height: normal;
}

.tabcontent.notabs .filters .filter-group .date_div {
    display: flex;
    justify-content: space-around;
    width: 75%;
    height: 100%;
    position: relative;
}

.tabcontent.notabs .filters .filter-group .date_div input {
    width: 100%;
    height: 100%;
    z-index: 999;
    cursor: pointer;
}

.tabcontent.notabs .filters .filter-group .date_div .date_icon {
    position: absolute;
    right: 0.25rem;
    top: 50%;
    transform: translateY(-50%);
}


.tabcontent.notabs .filters .filter-group .date_div .material-symbols-outlined {
    color: var(--input-fore);
    cursor: pointer;
}

.tabcontent.notabs .filters .btn {
    height: var(--filterheight);
    line-height: var(--filterheight);
    padding: 0 1rem;
}

/* END DASHBOARD */


/* CALENDAR HEATMAP */
.calendar-buttons {
    display: flex;
}

.calendar-buttons .btn {
    height: 2rem;
    line-height: 2rem;
    float: right;
    margin: 0 0.5rem;
    text-decoration: none;
    border-radius: 5px;
    padding: 4px 8px;
    font-weight: normal;
    background-color: var(--color-back);
    color: var(--color-fore);
}

.calendar-buttons .btn .material-symbols-outlined {
    color: var(--color-fore);
}

#ch-tooltip {
    z-index: 999;
}

#ch-tooltip-body {
    color: var(--color-back);
}

/* END CALENDAR HEATMAP */

/* STATS CHART */
.stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    height: calc(100% - 50px - 0.25rem);
}

.stats.dashboard {
    flex-direction: column;
    justify-content: normal;
    width: 100%;
}

.stats .stats_chart {
    width: calc(40% - 1rem);
    padding: 1rem;
    margin-bottom: 1rem;
    border: none;
    border-radius: 0.5rem;
    background-color: var(--color-back);
    display: flex;
    flex-direction: column;
}

.stats.dashboard .stats_chart {
    height: calc(50% - 1rem);
}

.stats.dashboard .stats_chart .chart {
    height: 100%;
}

.stats.dashboard .stats_chart.map {
    width: 60%;
    height: 100%;
    margin-left: auto;
}

.stats .stats_chart * {
    /* color: #333; */
}

.stats .stats_chart.full {
    width: 100% !important;
}

.stats .stats_chart.half {
    width: calc(50% - 2.5rem) !important;
    height: calc(100% - 2rem);
}

.stats .stats_chart.first {
    width: calc(20% - 3rem) !important;
}

.stats .stats_chart.panel3 {
    width: calc(33% - 2.5rem) !important;
    height: calc(100% - 2rem);
}

.stats .stats_chart text {
    color: var(--color-a);
    font-weight: normal;
}

.stats .stats_chart span.label {
    color: white;
    font-weight: normal;
    font-size: var(--fontsize);
    user-select: none;
}

.stats .stats_chart .stat_title {
    display: flex;
    margin-bottom: 1rem;
}

.stats .stats_chart .stat_title span.material-symbols-outlined {
    color: white;
    cursor: pointer;
    font-size: calc(1.8 * var(--fontsize));
    line-height: 1.2rem;
}

.stats .stats_chart .stat_title .help {
    text-align: center;
    margin-right: 0.5rem;
}

.stats .stats_chart .stat_title .expand {
    margin-left: auto;
}

.stats .stats_chart .stat_title .legend,
.expanded_chart .legend {
    display: flex;
    margin-left: auto;
}

.expanded_chart .legend {
    justify-content: center;
    margin-bottom: 1rem;
}

.stats .stats_chart .stat_title .legend .element,
.expanded_chart .legend .element {
    margin-right: 1rem;
    display: inline-flex;
}

.stats .stats_chart .stat_title .legend .element .square,
.expanded_chart .legend .element .square {
    width: 1rem;
    height: 1rem;
    margin-bottom: 0.25rem;
    margin-right: 0.25rem;
    border-radius: 4px;
    background-color: rgba(250, 250, 255, 0.65);
    /*var(--color-a);*/
}

.stats .stats_chart .stat_title .legend .element .square.active,
.expanded_chart .legend .element .square.active,
.stats .stats_chart .stat_title .legend .element .square.ok,
.expanded_chart .legend .element .square.ok {
    background-color: var(--mutedsagegreen);
}

.stats .stats_chart .stat_title .legend .element .square.inactive,
.expanded_chart .legend .element .square.inactive,
.stats .stats_chart .stat_title .legend .element .square.alarm,
.expanded_chart .legend .element .square.alarm {
    background-color: var(--terracota);
}

.expanded_chart .legend .element .square.aqi1 {
    background-color: var(--level1);
}

.expanded_chart .legend .element .square.aqi2 {
    background-color: var(--level2);
}

.expanded_chart .legend .element .square.aqi3 {
    background-color: var(--level3);
}

.expanded_chart .legend .element .square.aqi4 {
    background-color: var(--level4);
}

.expanded_chart .legend .element .square.aqi5 {
    background-color: var(--level5);
}

.expanded_chart .legend .element .square.aqi6 {
    background-color: black;
}

.stats .stats_chart .stat_title .legend .element span,
.expanded_chart .legend .element span {
    color: black;
    font-weight: normal;
    font-size: var(--fontsize);
}

.swal2-container.swal2-backdrop-show,
.swal2-container.swal2-noanimation {
    backdrop-filter: blur(3px);
}

.stats .stats_chart .info {
    display: flex;
    flex-direction: column;
}

.stats .stats_chart .info * {
    color: black;
    font-size: var(--fontsize);
    font-weight: normal;
}

.stats .stats_chart .info .material-symbols-outlined {
    font-size: 200%;
}

.stats .stats_chart .info p {
    margin-left: 1.5rem;
    font-size: var(--fontsize)
}

.square_grid {
    display: flex;
    flex-wrap: wrap;
}

.square_grid .square {
    width: 1rem;
    height: 1rem;
    margin-bottom: 0.25rem;
    margin-right: 0.25rem;
    border-radius: 4px;
    background-color: var(--level5);
    cursor: pointer;
}

.square_grid .square.alarm {
    background-color: var(--terracota) !important;
}

.square_grid .square.ok {
    background-color: var(--mutedsagegreen) !important;
}

.stats .stats_chart span.material-symbols-outlined.icon {
    text-align: center;
}

.stats .stats_chart .person_alerts {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.stats .stats_chart .person_alerts .item {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: calc(100% - 1rem);
    margin-bottom: 1rem;
    border-radius: 0.5rem;
    padding: 0.5rem;
    cursor: pointer;
}

.stats .stats_chart .person_alerts .item:hover {
    background-color: var(--q-tab-hover);
}

.stats .stats_chart .person_alerts .item .item-icon {
    font-size: 2.5rem;
    margin-right: 0.5rem;
}

.stats .stats_chart .person_alerts .item .item-icon.info {
    color: var(--color-fore);
}

.stats .stats_chart .person_alerts .item .item-icon.warning {
    color: var(--level3);
}

.stats .stats_chart .person_alerts .item .item-icon.danger {
    color: var(--red);
}

.stats .stats_chart .person_alerts .item .item-body {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.stats .stats_chart .person_alerts .item .item-body .item-title {
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.stats .stats_chart .person_alerts .item .item-body .item-title span.person {
    font-size: 1rem;
    font-weight: bold;
}

.stats .stats_chart .person_alerts .item .item-body .item-title span.time {
    font-size: 0.875rem;
}

.stats .stats_chart .person_alerts .item .item-body .item-text {
    font-size: 0.875rem;
}

.stats_flex {
    display: flex;
    width: 100%;
}

.stats_flex>*:first-child {
    width: calc(60%) !important;
}

.stats_flex>*:last-child {
    width: calc(40% - 1rem) !important;
    margin-left: 1rem;
}

.stats.deployment {
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    width: 100%;

    overflow-y: auto;
    max-height: calc(100% - 50px - 0.25rem);
}

.stats.deployment .stats_chart {
    width: calc(20% - 3rem);
    margin: 0 0.5rem;
    padding: 1rem;
    border: none;
    border-radius: 0.5rem;
    background-color: rgba(250, 250, 255, 0.85);
    /*var(--color-crystal);*/
    display: flex;
    flex-direction: column;
}

.stats_flex .stats.deployment .stats_chart {
    width: calc(33% - 3rem);
}

.stats.deployment .stats_chart.large {
    width: calc(40% - 3rem);
}

.stats.sensor .stats_chart {
    width: 70%;
}

@media (max-width: 1300px) {
    .stats.deployment .stats_chart {
        width: calc(25% - 3rem);
    }
}

@media (max-width: 1050px) {
    .stats.deployment .stats_chart {
        width: calc(33% - 3rem);
    }
}

@media (max-width: 750px) {
    .stats.deployment .stats_chart {
        width: calc(50% - 3rem);
    }
}

@media (max-width: 600px) {
    .stats.deployment .stats_chart {
        width: calc(100% - 1rem);
    }
}


.stats.deployment .stats_chart span.label {
    font-size: var(--fontsize);
}

.stats.deployment .stats_chart:not(.full) {
    margin-top: 1rem;
}

.stats.deployment .stats_chart:not(.full):first-child {
    margin-left: 0;
}

.stats.deployment .stats_chart:not(.full):last-child {
    margin-right: 0;
}

.stats .image-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    gap: 0.5rem;
    align-content: baseline;
}

.stats .image-grid .img-cnt {
    max-width: 200px;
    transition: max-width 0.1s ease-in-out;
    cursor: pointer;
}

.stats .image-grid .img-cnt img {
    width: 100%;
    overflow: hidden;
}

.stats .image-grid .img-cnt:hover {
    max-width: calc(200px + 0.5rem);
}

.stats .image-grid .img-cnt img:hover {
    border: 2px solid var(--srs);
}


/* END STATS CHART */

.highcharts-container * {
    font-size: inherit;
    color: inherit;
}

/* SEARCH RESULTS */
.search_results {
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
    margin-left: 0 !important;
    width: 95%;
    top: 100%;
}

.search_results .item {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
    line-height: normal;
    cursor: pointer;
}

.search_results .item span {
    color: black;
    font-size: var(--fontsize);
    line-height: normal;
}

.search_results .item:hover {
    background-color: #ddd;
}

/* END SEARCH RESULTS */

/* TOOLTIP */
.tooltip {
    position: relative;
    display: inline-block;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #191919;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 150%;
    left: 50%;
    margin-left: -60px;
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #191919 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}

/* END TOOLTIP */


/* SWEETALERTS */
.swal2-popup .swal2-close:focus {
    box-shadow: none;
}

.swal2-popup .full-image {
    height: calc(100% - 4px);
}

.swal2-popup .full-image img {
    max-width: 100%;
    max-height: 100%;
}

/* END SWEETALERTS */


/* CHECKBOXES BY CHATGPT */
input[type="checkbox"].table-cbx {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 24px;
    height: 16px;
    background: #ccc;
    border-radius: 13px;
    position: relative;
    outline: none;
    cursor: pointer;
    -webkit-transition: background-color .4s;
    transition: background-color .4s;
}

input[type="checkbox"].table-cbx::before {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    top: 2px;
    left: 3px;
    background-color: white;
    border-radius: 50%;
    -webkit-transition: transform .2s;
    transition: transform .2s;
}

input[type="checkbox"].table-cbx:checked {
    background-color: var(--srs-green);
}

input[type="checkbox"].table-cbx:checked::before {
    -webkit-transform: translateX(7px);
    -ms-transform: translateX(7px);
    transform: translateX(7px);
}


/* CHECKBOX */
.form-checkbox .tgl {
    display: none;
}

.form-checkbox .tgl,
.form-checkbox .tgl:after,
.form-checkbox .tgl:before,
.form-checkbox .tgl *,
.form-checkbox .tgl *:after,
.form-checkbox .tgl *:before,
.form-checkbox .tgl+.tgl-btn {
    box-sizing: border-box;
}

.form-checkbox .tgl::-moz-selection,
.form-checkbox .tgl:after::-moz-selection,
.form-checkbox .tgl:before::-moz-selection,
.form-checkbox .tgl *::-moz-selection,
.form-checkbox .tgl *:after::-moz-selection,
.form-checkbox .tgl *:before::-moz-selection,
.form-checkbox .tgl+.tgl-btn::-moz-selection,
.form-checkbox .tgl::selection,
.form-checkbox .tgl:after::selection,
.form-checkbox .tgl:before::selection,
.form-checkbox .tgl *::selection,
.form-checkbox .tgl *:after::selection,
.form-checkbox .tgl *:before::selection,
.form-checkbox .tgl+.tgl-btn::selection {
    background: none;
}

.form-checkbox .tgl+.tgl-btn {
    outline: 0;
    display: block;
    width: 3em;
    height: 1.5em;
    position: relative;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.form-checkbox .tgl+.tgl-btn:after,
.form-checkbox .tgl+.tgl-btn:before {
    position: absolute;
    top: 0;
    display: block;
    content: "";
    width: 50%;
    height: 100%;
}

.form-checkbox .tgl+.tgl-btn:after {
    left: 0;
}

.form-checkbox .tgl+.tgl-btn:before {
    display: none;
}

.form-checkbox .tgl:checked+.tgl-btn:after {
    left: 50%;
}

.form-checkbox .tgl-light+.tgl-btn {
    background: var(--srs-gray);
    border-radius: 1.5em;
    padding: 2px;
    transition: all 0.4s ease;
    border: 1px solid var(--srs-gray);
}

.form-checkbox .tgl-light+.tgl-btn:after {
    border-radius: 50%;
    background: #fff;
    transition: all 0.2s ease;
}

.form-checkbox .tgl-light:checked+.tgl-btn {
    background: var(--srs-green);
}

/* END CHECKBOX */

/* UL TREE */
.innerform .tree_list {
    display: flex;
    flex-direction: column;
    padding-left: 0.5rem;
}

.innerform .tree_list .item {
    display: flex;
}

.innerform .tree_list .form-checkbox .tgl+.tgl-btn {
    width: 2.5em;
    height: 1.25em;
}

.innerform .tree_list label[formlabel] {
    margin-left: 0.5rem;
    line-height: normal !important;
    cursor: pointer;
}

.innerform .tree_list .item.parent {
    margin-left: 0;
}

.innerform .tree_list .item.child {
    margin-left: 2rem;
}

/* END UL TREE */

/* MAP */
#map {
    height: calc(100% + 5px) !important;
    margin-top: -5px !important;
}

.card-map {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background-color: var(--color-back);
    width: 22%;
    height: calc(100% - 4rem);
    padding: 1rem;
    border-radius: 0.5rem;
}

.card-map.sidebar-shown {
    right: calc(1rem + 250px);
}

.card-map>.header {
    display: flex;
    margin-left: -1rem;
    margin-right: -1rem;
    border-bottom: 1px solid var(--color-a);
    padding: 0 1rem 0.75rem 1rem;
    color: var(--color-fore);
}

.card-map>.header>.card-title {
    font-weight: normal;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.card-map>.header>.card-close {
    margin-left: auto;
    cursor: pointer;
}

.card-map>.header>.change_position {
    background-color: var(--srs);
    color: white;
    border-radius: 0.25rem;
    margin-left: 1rem;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
    font-size: 90%;
}

.card-map>.header>.change_position .material-symbols-outlined {
    font-size: 1rem;
    margin-right: 0.25rem;
}

.card-map>.card-body {
    padding-top: 1rem;
    width: 100%;
    height: calc(100% - 1rem - 40px);
}

.card-map>.card-body>.card-line {
    display: flex;
    color: var(--color-fore);
    font-weight: 600;
    margin-bottom: 0.5rem;
    align-items: center;
}

.card-map>.card-body>.card-line>.edit_device {
    cursor: pointer;
    line-height: var(--fontsize);
    margin-left: 0.5rem;
}

.card-map>.card-body>.card-info {
    display: flex;
    flex-wrap: wrap;
    border-radius: 0.25rem;
    padding: 1rem;
    box-shadow: 0px 0px 5px var(--color-crystal-blue);
    margin-bottom: 1rem;
}

.card-map>.card-body>.card-info>.item {
    width: calc(33% - 0.33rem);
    margin-right: 0.5rem;
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
}

@media (max-width: 1600px) {
    .card-map>.card-body>.card-info>.item {
        width: calc(50% - 0.5rem);
    }
}

.card-map>.card-body>.card-info>.item.full {
    width: 100%;
    margin-right: 0;
    margin-bottom: 0;
}

.card-map>.card-body>.card-info>.item:nth-child(3n) {
    margin-right: 0;
}

.card-map>.card-body>.card-info>.item span {
    color: white;
}

.card-map>.card-body>.card-info>.item>.item-title {
    margin-bottom: 0.5rem;
    font-weight: normal;
    color: var(--color-fore);
}

.card-map>.card-body .card-list {
    display: flex;
    flex-direction: column;
    padding: 0.25rem;
    max-height: calc(100% - 11.25rem - 4.5rem);
    overflow-y: auto;
}

@media (max-width: 1600px) {
    .card-map>.card-body .card-list {
        max-height: calc(100% - 13.25rem - 4.5rem);
    }
}

.card-map>.card-body .card-list>.item {
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
    border-radius: 0.5rem;
    padding: 0.5rem;
    box-shadow: 0px 0px 5px var(--color-crystal-blue);
    color: white;
    cursor: pointer;
}

.card-map>.card-body .card-list>.item:hover {
    background-color: var(--srsfore);
}

.card-map>.card-body .card-list>.item:last-child {
    margin-bottom: 0;
}

.card-map>.card-body .card-list>.item .material-symbols-outlined {
    font-size: calc(2*var(--fontsize));
    line-height: calc(2*var(--fontsize));
    margin-right: 0.5rem;
}

.card-map>.card-body .card-list>.item>.item-title {
    display: flex;
    border-bottom: 1px solid var(--color-a);
    margin: 0 -0.5rem 0.5rem -0.5rem;
    padding: 0 0.5rem;
    color: var(--color-fore);
    align-items: center;
}

.card-map>.card-body .card-list>.item>.item-title::before {
    content: "";
    width: 1rem;
    height: 1rem;
    border-radius: 0.5rem;
    margin-right: 0.5rem;
    margin-bottom: 0.25rem;
}

.card-map>.card-body .card-list>.item>.item-title.severity-1::before {
    background-color: var(--level1);
}

.card-map>.card-body .card-list>.item>.item-title.severity-2::before {
    background-color: var(--level2);
}

.card-map>.card-body .card-list>.item>.item-title.severity-3::before {
    background-color: var(--level3);
}

.card-map>.card-body .card-list>.item>.item-title.severity-4::before {
    background-color: var(--level4);
}

.card-map>.card-body .card-list>.item>.item-title.severity-5::before {
    background-color: var(--level5);
}

.card-map>.card-body .card-list>.item>.item-title .show_image {
    margin-left: auto;
    cursor: pointer;
    margin-right: 0;
}

.card-map>.card-body .card-list>.item>.item-title .edit_hub {
    margin-left: auto;
    cursor: pointer;
    margin-right: 0;
}

.card-map>.card-body .card-list>.item .card-flex {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
}

.card-map>.card-body .card-list>.item .card-flex .card-element {
    display: flex;
    flex-direction: column;
    align-items: center;
}

@media (max-width: 1350px) {
    .card-map>.card-body .card-list>.item .card-flex {
        flex-wrap: wrap;
    }
}

.card-map>.card-body .card-list>.item .card-info {
    width: 100%;
    margin-bottom: 0;
}

.card-map>.card-body .card-list>.item .show_sensors {
    cursor: pointer;
    border-top: 1px solid var(--color-a);
    margin: 0.5rem -0.5rem;
    padding: 0.5rem 0.5rem 0 0.5rem;
    color: var(--color-fore);
    user-select: none;
}

.card-map>.card-body .card-list>.item .sensors_list {
    /* position: relative; */
}

.card-map>.card-body .card-list>.item .sensors_list .elements {
    /* position: absolute; */
    border-top: 1px solid var(--color-a);
    padding-top: 0.5rem;
    background-color: var(--color-back);
    width: 100%;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 5px 5px var(--color-crystal-blue);
    z-index: 999;
}

.card-map>.card-body .card-list>.item .sensors_list .elements .sensor {
    display: flex;
    border-bottom: 1px solid var(--color-a);
    padding: 0.5rem 0.5rem 0.25rem 0.5rem;
    justify-content: space-between;
}

.card-map>.card-body .card-list>.item .sensors_list .elements .sensor .icon_div {
    width: 10%;
    display: flex;
    align-items: center;
}

@media (max-width: 1350px) {
    .card-map>.card-body .card-list>.item .sensors_list .elements .sensor .icon_div {
        width: 15%;
    }
}

.card-map>.card-body .card-list>.item .sensors_list .elements .sensor .icon_div svg.sensor_type {
    fill: var(--color-fore);
    stroke: var(--color-fore);
    stroke-width: 5;
    margin-right: 0.5rem;
}

.card-map>.card-body .card-list>.item .sensors_list .elements .sensor .info_div {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    margin-left: 2rem;
}

.card-map>.card-body .card-list>.item .sensors_list .elements .sensor .edit_div {
    display: flex;
    align-items: center;
    justify-content: end;
    margin-left: auto;
}

.card-map>.card-body .card-list>.item .sensors_list .elements .sensor .edit_div .edit_sensor {
    cursor: pointer;
}

.sidebar {
    position: absolute;
    width: 250px;
    height: 100%;
    top: 0;
    right: 0;
    background-color: gray;
    display: flex;
}

.map_homes {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 250px;
}

.map_homes select {
    width: 100% !important;
}

/* END MAP */

/* LAYOUT */
.zone_flex {
    display: flex;
}

.zone_flex .tabla_container {
    width: 50%;
}

.zone_flex .zone_layout {
    width: calc(50% - 1rem);
    margin-left: 1rem;
}

.layout_container {
    display: flex;
    flex-direction: column;
    /* height: calc( 100vh - 4rem) !important; */
}

.layout_container .layout {
    width: 100%;
    position: relative;
    top: 0;
    border: 1px solid var(--srs);
    border-radius: 10px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    background-color: var(--color-back);
}

.layout_container .layout_flex {
    display: flex;
}

.layout_container .layout_flex .layout.edit {
    width: 80%;
    border: none;
    border-radius: 0;
}

/* LAYOUT ELEMENT LIST */
.layout_container .layout_flex .layout_elements {
    width: calc(20% - 1rem);
    margin-left: 1rem;
    display: flex;
    flex-direction: column;
}

.layout_container .layout_flex .layout_elements .element_list {
    overflow-y: auto;
    margin-bottom: 1rem;
    text-align: left;
}

.layout_container .layout_flex .layout_elements .element_list .element_title {
    font-size: 120%;
    font-weight: 400;
    margin-bottom: 0.5rem;
}

.layout_container .layout_flex .layout_elements .element_list .item {
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    margin-bottom: 0.25rem;
    display: flex;
    /* justify-content: space-between; */
}

.layout_container .layout_flex .layout_elements .element_list .item span {
    line-height: calc(2*var(--fontsize));
    align-self: center;
}

.layout_container .layout_flex .layout_elements .element_list .item span.material-symbols-outlined {
    font-size: calc(2*var(--fontsize));
}

.layout_container.show.modal .layout_flex .layout_elements .element_list .item span.permanence {
    margin-left: auto;
    text-wrap: nowrap;
}

.layout_container .layout_flex .layout_elements .element_list .item:hover {
    background-color: var(--q-gray);
}

.layout_container .layout_flex .layout_elements .element_list .sensor_item {
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    margin-bottom: 0.25rem;
    display: flex;
    flex-direction: row;
}

.layout_container .layout_flex .layout_elements .element_list .sensor_item span.icon {
    font-size: calc(2*var(--fontsize));
    align-self: center;
    margin-right: 0.5rem;
}

.layout_container .layout_flex .layout_elements .element_list .sensor_item div.data {
    display: flex;
    flex-direction: column;
}

.layout_container .layout_flex .layout_elements .element_list .sensor_item div.data span.id {
    line-height: calc(2*var(--fontsize));
}

.layout_container .layout_flex .layout_elements .element_list .sensor_item div.data span.type {
    font-size: 85%;
    color: var(--color-text-disabled);
}

.layout_container .layout_flex .layout_elements .element_list .sensor_item:hover {
    background-color: var(--q-gray);
}

.layout_container .layout.edit svg foreignObject {
    cursor: pointer;
}

.layout_container .layout svg foreignObject>div {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.layout_container .layout svg foreignObject>div span {
    width: 80%;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
}

.layout_container .layout.edit svg foreignObject>div span.element {
    color: var(--color-back);
    font-size: 1.25rem;
}

.layout_container .layout.edit svg foreignObject.active>div span {
    color: var(--color-back);
}

.layout_container .layout:not(.edit) svg foreignObject>div span {
    color: var(--q-foreground);
}

.layout_container .layout.stats svg foreignObject>div span {
    color: var(--q-foreground);
}

/* LAYOUT ELEMENT ICONS */
.layout_container .layout svg foreignObject>div .icons {
    width: calc(100% - 4px);
    padding: 2px;
    position: absolute;
    top: 2px;
    display: flex;
}

.layout_container .layout svg foreignObject>div .icons span {
    width: auto;
    font-size: 1rem;
    background-color: var(--srs);
    padding: 1px;
    color: white;
    border-radius: 50%;
}

.layout_container .layout svg foreignObject>div .icons span:nth-of-type(2) {
    margin-left: auto;
}

/* LAYOUT TOOLTIP */
.layout_container .layout .tooltip-draw2d {
    position: absolute;
    background: #383838;
    color: white;
    border: 6px solid transparent;
    border-radius: 4px;
}

.layout_container .layout .tooltip-draw2d:after {
    top: 100%;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border: 6px solid transparent;
    border-top-color: #383838;
    left: 50%;
    margin-left: -11px;
    transform: translateY(6px);
}

.layout_container.edit .layout_options {
    display: flex;
    flex-direction: row;
    text-align: left;
    align-items: end;
}

.layout_container.edit .layout_options .form-field {
    margin-right: 1rem;
    width: 80px;
}

.layout_container.edit .layout_options>span.material-symbols-outlined {
    font-size: 250%;
    height: var(--inputheight);
}

.layout_container.edit .layout_options a.btn:first-of-type {
    margin-left: auto;
}

.layout_container.edit .layout_options a.btn:last-of-type {
    margin-right: 20%;
}

/* LAYOUT POSITION INFORMATION */
.layout_container .layout.edit .position-draw2d {
    position: absolute;
    background: #383838;
    color: white;
    border: 6px solid transparent;
    border-radius: 4px;
    white-space: nowrap;
}

.layout_container.edit .layout_flex {
    position: relative;
}

.layout_container .elements-draw2d {
    position: absolute;
    background: #383838;
    color: white;
    border: 6px solid transparent;
    border-radius: 4px;
    white-space: nowrap;
    display: flex;
    flex-direction: column;
}

.layout_container .elements-draw2d .element {
    color: white;
    white-space: nowrap;
    display: flex;
    flex-direction: row;
    margin-top: 0.5rem;
}

.layout_container .elements-draw2d .element:first-of-type {
    margin-top: 0;
}

.layout_container .elements-draw2d .element span {
    color: white;
    margin-right: 0.25rem;
    line-height: calc(2*var(--fontsize));
}

.layout_container .elements-draw2d .element span.material-symbols-outlined {
    font-size: calc(2*var(--fontsize));
    line-height: calc(2*var(--fontsize));
    height: calc(2*var(--fontsize));
    align-self: center;
}

.layout_container .elements-draw2d .element span.remove_element {
    color: var(--color-error);
    margin-left: auto;
    cursor: pointer;
}

.layout_container .elements-draw2d .element .info {
    display: flex;
    flex-direction: column;
}

.layout_container .elements-draw2d .element .info span.small {
    color: var(--q-gray);
    font-size: 85%;
    line-height: calc(2*0.85*var(--fontsize));
}

/* LAYOUT FLOOR TABS */
.layout_container .floor_tabs {
    display: flex;
    flex-direction: row;
    margin-top: 0.5rem;
}

.layout_container .floor_tabs .tab_item {
    border: 1px solid transparent;
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem;
    cursor: pointer;
    padding: 6px 10px;
    user-select: none;
}

.layout_container .floor_tabs .tab_item span {
    color: var(--q-tab-foreground);
}

.layout_container .floor_tabs .tab_item:not(.active):hover {
    border-color: var(--srs) var(--srs) var(--srs) !important;
}

.layout_container .floor_tabs .tab_item.active {
    background-color: var(--srs);
}

.layout_container .floor_tabs .tab_item.active span {
    color: var(--q-tab-hover);
}


/* LAYOUT HEATMAP GRADIENT */
.layout_container .gradient-draw2d {
    border-radius: 4px;
    padding: 0.3rem 1rem;
    width: 15%;
    height: 0.75rem;
    position: absolute;
    top: 8px;
    right: 8px;
    /* background: #fff linear-gradient(to right, #7efa6e, #b0d500, #d5a900, #f07300, #ff0000); */
    /* background: #fff linear-gradient(to right, #341b51, #23c3e4, #6dfe62, #fbb637, #850702); */
    /* background: #fff linear-gradient(to right, #021893, #388B7B, #6dfe62, #838243, #990623); */
    /* background: #fff linear-gradient(to right, #0033FF, #4033BF, #803380, #BF3340, #FF3300); */
    /* background: #fff linear-gradient(to right, #021893, #3537ae, #740699, #b70b0b, #990623); */
    /* #E2CCD1", "#EE9E92", "#FA7052", "#B13830", "#67000D */
    background: #fff linear-gradient(to right, #E2CCD1, #fcae92, #FA7052, #cb1d1e, #67000D);
}

.layout_container .gradient-draw2d.large {
    width: 25%;
}

.layout_container .gradient-draw2d span {
    line-height: 0.875rem;
    font-size: 0.875rem;
}

.layout_container .gradient-draw2d span:first-child {
    float: left;
    color: white;
}

.layout_container .gradient-draw2d span:last-child {
    float: right;
    color: white;
}

/* END LAYOUT */

/* HINT */
.hint--top-left:before {
    border-top-color: var(--srs);
}

.hint--top-right:before {
    border-top-color: var(--srs);
}

.hint--top:before {
    border-top-color: var(--srs);
}

.hint--bottom-left:before {
    border-bottom-color: var(--srs);
}

.hint--bottom-right:before {
    border-bottom-color: var(--srs);
}

.hint--bottom:before {
    border-bottom-color: var(--srs);
}

.hint--left:before {
    border-left-color: var(--srs);
}

.hint--right:before {
    border-right-color: var(--srs);
}

/* END HINT */
#tabla_docs {
    /* display: table; */
    border-collapse: collapse;
    border: 1px solid #ddd;
}

#tabla_docs th,
#tabla_docs td {
    padding: 1rem 2rem;
    border: 1px solid #ddd;
}

#sensor_events {
    height: 70vh;
    padding: 1rem;
    background-color: black;
    border-radius: 8px;
    border: 1px solid #20C20E;
    display: flex;
    flex-direction: column-reverse;
    text-align: left;
    overflow-y: auto;
    scrollbar-color: #20C20E transparent;
}

#sensor_events .item {
    margin-top: 1rem;
    padding-top: 0.5rem;
    border-top: 1px solid #20C20E;
    display: flex;
    flex-direction: column;
}

#sensor_events .item span {
    font-family: "Lucida Console", "Courier New", monospace;
    color: #20C20E;
}

.gmaps_tooltip {
    position: absolute;
    width: 512px;
    height: 400px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-radius: var(--borderR);
    background-color: black;
    border: 6px solid var(--srsfore);
    z-index: 999999;
}

.gmaps_tooltip::after {
    content: "";
    position: absolute;
    top: 16px;
    right: -32px;
    margin-left: -10px;
    border-width: 10px;
    border-style: solid;
    border-color: transparent transparent transparent var(--srs-green);
}

.gmaps_tooltip .title {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 40px;
    background-color: var(--srs);
    opacity: 0.75;
    z-index: 10;
}

/* TABS */
.tab_buttons {
    align-items: end;
    display: flex;
    border-bottom: 1px solid var(--srs);
    margin-bottom: 0.5rem;
}

.tab_buttons .button {
    margin-bottom: -1px;
    border: 1px solid transparent;
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem;
    padding: 10px;
    color: white !important;
    text-decoration: none;
    user-select: none;
    cursor: pointer;
}

.tab_buttons .button.active {
    background-color: var(--srs);
    color: white !important;
    border-color: var(--srs) var(--srs) transparent var(--srs) !important;
}

.tabs {
    height: calc(100% - 3rem);
}

.tabs .tab_div {
    height: 100%;
}

/* END TABS */