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

:root {
    --color-back: #FFFFFF;
    --color-high: #01949A;
    --color-fore: rgba(0, 67, 105, 1);
    --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(40, 40, 40, 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;
    --squaremargin: 1px;

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

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

    --bglevel1: #99a93d33;
    --bglevel2: #a9b94d33;
    --bglevel3: #f0ca2733;
    --bglevel4: #c8850133;
    --bglevel5: #bf370133;

    /* Some Wonderful colors */
    --terracota: #E07A5F;
    --antiquewhite: #F4F1DE;
    --deepslateblue: #3D405B;
    --teal: #A6D6D6;
    --purple: #8E7DBE;
    --brown: #735557;
    --creme: #d8b26c;
    --mutedsagegreen: #81B29A;
    --darkmaroon: #6E001B;
    --lback: rgba(250, 250, 255, 0.85);

    --q-background: #fcfcfc;
    --q-background2: #d8d8d8;
    --q-foreground: #444444;
    --q-tab-background: #494a57;
    /*#d0d0d0;*/
    --q-tab-foreground: #f0f0f0;
    --q-tab-hover: #00A8F0;
    --qeido: #00A8F0;
    --q-gray: #dddddd;
    --q-gray-focus: #666666;
    --q-hover: rgba(162, 162, 162, 0.5);
    --q-form-background: #e8e8e8;
    --q-disabled: #999999;
    /* #eaeaea;*/

    --warning-brd: #f0ca27;
    /* --warning-bkg: #f0ca27e0; */
    --warning-bkg: #fff3cd;

    --inputheight: 2.5rem;
    --filter-labels-background: #f0f0f0;
}

html * {
    font-family: 'QEIDO';
    font-size: var(--fontsize);
    user-select: none;
    scrollbar-width: thin;
    scrollbar-color: var(--color-fore) var(--color-back);
}

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

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: initial;
}

body {
    background-color: #333;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

pre {
    color: white;
    background-color: black;
}

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

[light] {
    color: var(--color-back);
}

[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;
}

/* JOP Remove Google Maps Logo (API v3) */
/* HTML OBJECTS */
input:not([type="radio"]):not([type="checkbox"]):not(.select2-search__field) {
    font-size: var(--fontsize) !important;
    padding: 0 0.5rem;
    border-radius: 5px;
    box-sizing: border-box;
    height: var(--inputheight);
    line-height: var(--inputheight);
    background-color: rgba(255, 255, 255, 0.75);
    color: var(--color-fore);
}

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


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: 64px;
    line-height: 64px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-right: 48px !important;
    background-color: #f0f0f0;
    z-index: 10;
}

#topbar .export_status,
#topbar .conf-stats {
    color: white;
}

#topbar .topbar_buttons {
    display: flex;
    flex-direction: row;
    align-items: center;
    /* margin-left: auto; */
    margin-right: 64px;
}

#topbar .btn span {
    color: white;
}

.topbarlastbutton {
    margin-right: 16px;
}

#toplogo {
    position: absolute;
    top: 16px;
    left: 20px;
    padding: 6px 0;
    margin: 0;
    width: 120px;
    height: 64px;
    line-height: 64px;
    text-align: center;
    background-image: url('/resources/gfx/qeidologor.svg');
    background-repeat: no-repeat;
    background-size: 120px auto;
    background-position: auto;
    z-index: 20;
    cursor: pointer;
}

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

.topmenuoption:hover {
    color: var(--color-high);
    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: 64px;
    width: 100%;
}

#sme {
    position: relative;
    z-index: 998;
    width: 260px;
    background: var(--color-menu2);
    /* height: calc(100vh - 64px); */
    font-size: var(--fontsize);
    /* border-right: 1px solid var(--color-crystal-border); */
    transition: width 0.25s ease;
    
    height: calc(100vh - 64px - 64px);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
}

#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; */
    position: fixed;

    left: 0;
    bottom: 0;

    /* width: 100%; */
    width: 260px;

    height: 64px;
    line-height: 64px;
    text-align: center;
    vertical-align: middle;
    margin: 0;
    padding: 0;
    transition: 0.3s;
    color: white !important;
    background-color: #484a57;
    user-select: none;
}

#sme.opened #sms {
    width: 260px;
}

#sme.closed #sms {
    width: 64px;
}

#smsicon {
    color: white !important;
}

#sms:hover {
    background-color: var(--color-crystal-almostnone);
    color: var(--color-bkg) !important;
    cursor: pointer;
}

#sms:hover * {
    color: var(--color-back) !important;
}

[tmi] {
    position: relative;
    float: right;
    width: auto;
    height: 64px;
    line-height: 64px;
    font-size: var(--fontsize);
    font-family: 'QEIDO';
    color: var(--color-fore);
    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';
    margin-right: auto;
}

[smo] {
    float: right;
    width: calc(100%);
    height: 64px;
    line-height: 64px;
}

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

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

[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(--color-back);
}

[parent] * {
    color: white;
}

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


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

[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_div {
    position: absolute;
    bottom: 16px;
    right: 32px;
    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;
}

.toast_div .toast_body {
    display: flex;
    align-items: center;
    text-wrap: wrap;
}

.toast_alert {
    color: var(--red);
    border: solid 1px var(--red);
}

.toast_info {
    color: var(--color-fore);
    border: solid 1px var(--color-fore);
}

.toast_ok {
    background-color: var(--mutedsagegreen) !important;
    color: white;
}

[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;
}

#interval_preloader {
    position: absolute;
    width: 40px;
    height: 40px;
    right: 60px;
    bottom: 52px;
    z-index: 999;
}

#app-preloader {
    position: absolute;
    right: 12px;
    top: 16px;
    z-index: 999;
}

#app-preloader:after {
    content: '';
    display: inline-block;
    width: 32px;
    height: 32px;
    background: url(/resources/gfx/favicon.svg);
    background-size: 32px 32px;
    background-repeat: no-repeat;
    animation: coin-flip 2.4s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    opacity: 0.5;
}

@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% - 260px);
    height: calc(100vh - 64px);
    padding: 0px;
    font-size: var(--fontsize);
    font-weight: 200 !important;
    box-sizing: border-box;
    margin: 0;
    transition: width 0.25s ease;
}

.form {
    position: relative;
    background-color: var(--q-form-background);
    width: 100%;
    height: 100%;
    border-radius: 2px;
    color: #444;
    font-size: var(--fontsize);
    font-weight: 200 !important;
    padding: 16px;
    margin: 0;
    font-family: 'Barlow' !important;
    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;
    font-size: 1.5rem;
    font-weight: normal;
}

.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(--q-gray) !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(--qeido);
}

.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.full>.form-field.small {
    width: 20%;
}

.innerform .form-field.searchable {
    position: relative;
}

.innerform fieldset .form-field .interval {
    display: flex;
    align-items: center;
    position: relative;
}

.innerform fieldset .form-field .interval span.center {
    margin: 0.5rem;
}

.innerform fieldset .form-field .interval span.left {
    position: absolute;
    bottom: 0.1rem;
    right: calc(50% + 0.8rem);
    font-size: 0.6rem;
    color: #ccc;
}

.innerform fieldset .form-field .interval span.right {
    position: absolute;
    bottom: 0.1rem;
    right: 0.2rem;
    font-size: 0.6rem;
    color: #ccc;
}

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

.innerform fieldset .flex-field .w-25 {
    width: 25%;
}

.innerform fieldset .flex-field .w-75 {
    width: 75%;
}

.innerform fieldset .flex-field .wd-3 {
    width: calc(33% - 1rem);
}

.innerform fieldset .flex-field .wd-6 {
    width: calc(66% - 1rem);
}

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

.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;
    padding-bottom: 1rem;
}

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

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

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

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

.innerform .formfields .staff_persons {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.innerform .formfields .staff_persons input {
    margin-bottom: 1rem;
}

.innerform .formfields .staff_persons .person {
    width: calc(100% - 2rem);
    cursor: pointer;
    padding: 0.5rem 1rem;
    border: 1px solid var(--q-gray);
    border-radius: 0.25rem;
    color: var(--q-foreground);
    margin-bottom: 0.25rem;
}

.innerform .formfields .staff_persons .person:hover {
    background-color: var(--q-gray);
}

.innerform .formfields .staff_persons .person.active {
    background-color: var(--qeido);
    color: white;
}

.innerform .formfields .staff_persons .person.active:hover {
    background-color: var(--qeido);
}

.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(--qeido);
    stroke: var(--qeido);
    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 .formfields.person .alerts,
.agent_flex .col_body .alerts {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-height: 50vh;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--color-fore) white;

    .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;
    }

    .item:hover {
        background-color: white;
    }

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

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

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

    .item .item-body .item-text {
        font-size: 1rem;
        color: var(--q-foreground);
        width: fit-content;
        padding-right: 0.5rem;
    }

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

    .item .item-body .item-resolution {
        display: flex;
        flex-direction: column;
        cursor: default;
    }

    .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;
    }

    .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;

    }

    .item .item-body .item-resolution .res .res_col {
        display: flex;
        flex-direction: column;
        padding-left: 0.25rem;
        padding-right: 0.25rem;
    }

    .item .item-body .item-resolution .res .res_col.right {
        margin-left: auto;
        align-items: center;
        justify-content: center;
        margin-right: 0.5rem;
    }

    .item .item-body .item-resolution .res .res_col span {
        font-size: 0.75rem;
        color: var(--q-foreground);
    }

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

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

    .item .item-body .item-resolution .flex-buttons .add_resolution,
    .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;
    }


    .item .item-body .item-resolution .res_input {
        display: flex;
        flex-direction: column;
        width: calc(100% - 1.5rem);
        margin-left: 1.5rem;
        padding-left: 0;
        margin-bottom: 0.5rem;
    }

    .item .item-body .item-resolution .res_input select {
        width: 100% !important;
    }

    .item .item-body .item-resolution .res_input input {
        height: 2rem;
        line-height: 2rem;
        margin-top: 0.5rem;
        font-size: 0.75rem;
        width: 100%;
        border: 1px solid var(--color-a);
        border-radius: 0.25rem;
        color: var(--q-foreground);
    }

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

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

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

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

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

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

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

.form-create-zones .zone_types {
    max-height: 40vh;
    overflow-y: auto;
    margin-bottom: 1rem;
}


.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;
}

.tabfill,
.tab button,
.tab button.active {
    border: none;
    border-left: 1px solid #ccc;
}

.tab {
    float: left;
    width: 240px;
    height: calc(100% - 64px);
    border-radius: var(--borderR) 0 0 var(--borderR);
    display: flex;
    flex-direction: column;
    background-color: var(--q-tab-background);
    overflow-x: hidden;
    overflow-y: auto;
}

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

/* 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) !important;
    border-left: 1px solid #ccc;

}

.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(--q-tab-hover) !important;
    color: white;
}

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

/* Style the tab content */
.tabcontent {
    width: 100%;
    height: calc(100% - 64px);
    padding: 0px 12px;
    border: none;
    /* JOP border-radius: var(--borderR); */
    font-weight: 200 !important;
    box-sizing: border-box;
    background-color: var(--q-background);
    color: white;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--color-fore) var(--color-back);
    scrollbar-gutter: stable;
}

.tabcontent.full {
    width: 100% !important;
}

.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(--color-fore-drk);
}

.form .tabcontent {
    float: right;
    width: calc(100% - 240px);
    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;
    display: flex;
    align-items: center;
}

.title * {
    color: #444 !important;
    font-size: calc(1.3 * var(--fontsize));
}

.title span.material-symbols-outlined {
    font-size: calc(2 * var(--fontsize));
}

.form>.title>span {
    white-space: pre;
}

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

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

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

.btn {
    height: 2rem;
    line-height: 2rem;
    float: right;
    margin-left: 1rem;
    text-decoration: none;
    border-radius: 5px;
    padding: 4px 14px 4px 12px;
    font-weight: normal;
    cursor: pointer;
    opacity: 0.85;
    transition: all 0.25s ease-out;
    text-wrap: nowrap;
}

.btn:hover {
    opacity: 1;
}

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

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

.btn:hover,
.btn.btn-success:hover,
.btn.btn-cancel:hover,
.btn.btn-delete:hover,
.btn.btn-primary:hover,
.form-buttons {
    opacity: 1;
}

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


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

.btn.btn-cancel,
.btn.btn-back {
    background-color: var(--qeido);
    color: white;
}

.btn.btn-delete {
    background-color: var(--red);
    color: white;
}

.btn.btn-primary {
    background-color: var(--color-high);
    color: white !important;
}

.btn.btn-qeido {
    background-color: var(--qeido);
    color: white !important;
}

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

[formlabel] {
    color: var(--qeido);
    font-weight: normal;
    user-select: none;
    line-height: 32px !important;
    height: 32px !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: white;
    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: white !important;
    color: var(--q-foreground);
    transition: all ease-in-out .2s;
    border: 1px solid var(--q-gray) !important;
}

input[forminput]:not([type="radio"]):not([type="checkbox"]):focus,
textarea[forminput]:focus,
div[id$=tabla_filter] input[type="search"]:focus {
    border: 1px solid var(--qeido) !important;
}

[forminput]:not([type="radio"]):not([type="checkbox"])[disabled],
[forminput]:not([type="radio"]):not([type="checkbox"])[readonly] {
    background-color: var(--color-input-disabled) !important;
    color: var(--color-text-disabled) !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.dt-container div.dt-scroll-body table {
    background-color: transparent !important;
}

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

div.dt-container .dt-scroll-body tbody tr,
div.dt-container .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(--color-crystal-blue) !important;
}

table.dataTable>tbody>tr:hover *:not([type=checkbox]) {
    background-color: var(--qeido);
    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.dt-container tbody tr td {
    color: var(--q-gray-focus) !important;
    font-weight: normal;
    user-select: none;
    padding-left: 10px !important;
    cursor: pointer;
    text-wrap: nowrap;
}

div.dt-container tbody tr td .btn {
    float: left;
}

div.dt-container 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%;
}

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;
}

a.action-delete {
    margin-left: 0.5rem;
}

a.action-delete span {
    color: var(--red);
}

.dt-buttons .dt-button {
    background: var(--qeido) !important;
    color: white !important;
    text-decoration: none !important;
    border-color: transparent !important;
    border-radius: 5px !important;
    opacity: 0.7 !important;
    transition: all 0.25s ease-out !important;
}

.dt-buttons .dt-button span {
    color: white;
}

.dt-buttons .dt-button:hover {
    opacity: 1 !important;
}

div.dt-container .dt-paging .dt-paging-button {
    border: none !important;
    border-radius: 0.25rem;
}

div.dt-container .dt-paging .dt-paging-button.current,
div.dt-container .dt-paging .dt-paging-button.current:hover,
div.dt-container .dt-paging .dt-paging-button:not(.disabled):hover {
    color: white !important;
    background: var(--qeido) !important;
    border: none !important;
}

div.dt-processing>div:last-child>div {
    background: var(--qeido);
}

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

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

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

.text-warning {
    color: var(--creme) !important;
}

.rotate {
    animation: rotation 1s linear infinite;
}

[readonly] {
    cursor: default;
}

select {
    background-color: var(--color-back) !important;
    color: var(--color-fore) !important;
    outline: none;
}

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

select optgroup {
    background-color: var(--color-back) !important;
    color: var(--color-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 !important;
}

div.bulk_parent {
    display: inline !important;
    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_div 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;
}

.bulk_gp .form-checkbox {
    display: flex;
    align-items: center;
}

.bulk_gp .form-checkbox label[formlabel] {
    margin-right: 0.5rem;
    text-wrap: nowrap;
}

/* 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;
    scrollbar-width: thin;
    scrollbar-color: var(--color-fore) var(--color-back);
}

.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 .select2-results__options,
.bulk-select-dropdown .select2-results .select2-results__options {
    scrollbar-width: thin;
    scrollbar-color: var(--color-fore) var(--color-back);
}

.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(--qeido);
}

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

/* FORM SELECT */
.form-select {
    border: 1px solid var(--q-gray);
    background-color: white !important;
    color: var(--q-foreground);
}

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

.form-select:not(.select2-selection--multiple) .select2-selection__rendered,
.form-select .select2-selection__arrow {
    color: var(--q-foreground) !important;
    height: var(--inputheight) !important;
    line-height: var(--inputheight) !important;
    font-weight: 400;
}

.form-select.select2-selection--multiple .select2-selection__choice {
    height: calc(0.75 * var(--inputheight)) !important;
    line-height: calc(0.75 * 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,
.form-select-small .select2-selection__arrow {
    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-dropdown {
    background-color: var(--q-background) !important;
    color: var(--q-foreground) !important;
    border: 1px solid var(--q-gray) !important;
    z-index: 9999;
}

.form-select-dropdown .select2-results .select2-results__options {
    scrollbar-width: thin;
    scrollbar-color: var(--color-fore) var(--color-back);
}

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

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

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

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

/* END SELECT2 */

/* 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;
    padding: 1rem 0;
}

.loader {
    width: 48px;
    height: 48px;
    border: 5px solid var(--color-fore-drk);
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* END LOADER */

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

.tabcontent.notabs .innerform {
    background-color: white;
    height: calc(100% - 50px - 0.25rem);
    border-radius: 0;
}

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

.tabcontent.notabs .filters,
.stats-container .filters,
.stats .stat_title .filter-group {
    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;
    }
}

.stats .stat_title .filter-group {
    /* margin-left: 1rem; */
}

.stats .stat_title>.btn {
    margin-left: 0;
}

.tabcontent.notabs .filters {
    /* overflow-x: auto;
    overflow-y: hidden; */
}

.tabcontent.notabs .filters h2,
.stats-container h2 {
    margin-left: 0.5rem;
    margin-right: 1rem;
    line-height: 1.8rem;
    color: var(--q-foreground);
    text-wrap: nowrap;
}

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

.tabcontent.notabs .filters a.right {
    margin-left: auto;
}

.tabcontent.notabs .filters .filter-group,
.stats-container .filter-group,
.stats_chart .stat_title .filter-group,
.dt-container .input-group {
    display: flex;
    min-width: 16%;
    background-color: transparent;
    border-radius: 0.5rem;
    border: 1px solid var(--qeido);
    align-items: center;
    overflow: hidden;
    margin-right: 1rem;
    height: calc(var(--filterheight) + 2px);
    line-height: calc(var(--filterheight) + 2px);
}

.filter-group.date {
    min-width: 18% !important;
}

.tabcontent.notabs .filters .filter-group.searchable,
.dt-container .input-group.searchable {
    position: relative !important;
    overflow: initial !important;
}

.tabcontent.notabs .filters .filter-group.searchable .label,
.dt-container .input-group.searchable .label {
    border-top-left-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem;
}

.tabcontent.notabs .filters .filter-group.searchable input,
.dt-container .input-group.searchable input {
    border-top-right-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
}

.stats-container .filter-group {
    width: 25%;
}

.aioms-session-container .filter-group {
    width: 35%;
}

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

.tabcontent.notabs .filters .filter-group span.label,
.dt-container .input-group span.label,
.stats-container .filter-group span.label,
.stats .stat_title .filter-group span.label {
    color: var(--color-fore);
    padding: 0;
    height: var(--inputheight);
    line-height: var(--inputheight);
    border-right: 1px solid var(--q-gray);
    font-weight: normal;
    min-width: 30%;
    text-align: center;
    background-color: var(--filter-labels-background) !important;
}

.tabcontent.notabs .filters .filter-group input,
.dt-container .input-group input,
.stats-container .filter-group input,
.tabcontent.notabs .filters .filter-group select,
.stats .stat_title .filter-group select {
    margin-bottom: 0;
    height: auto;
    line-height: normal;
    width: 100% !important;
}

.tabcontent.notabs .filters .filter-group input[type='search'],
.dt-container .input-group input[type='search'] {
    height: var(--inputheight);
    line-height: var(--inputheight);
}

/* clears the ‘X’ from Internet Explorer */
input[type=search]::-ms-clear {
    display: none;
    width: 0;
    height: 0;
}

input[type=search]::-ms-reveal {
    display: none;
    width: 0;
    height: 0;
}

/* clears the ‘X’ from Chrome */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    display: none;
}

.tabcontent.notabs .filters .chart_percent {
    position: relative;
    margin-left: 2rem;
    display: flex;
    flex-direction: column;
    height: 1.8rem;
    width: 14rem;
    background-color: white;
    border-radius: 4px;
}

.tabcontent.notabs .filters .chart_percent.first {
    margin-left: auto;
}

.tabcontent.notabs .filters .chart_percent .chart_title {
    display: flex;
    width: 100%;
    position: absolute;
    top: -0.92rem;
    left: 0;
    text-wrap: nowrap;
    font-size: 0.7rem;
}

.tabcontent.notabs .filters .chart_percent .chart_title span.data {
    margin-left: auto;
    font-size: 0.7rem;
}

.tabcontent.notabs .filters .chart_percent .progress {
    height: 100%;
    background-color: var(--qeido);
    width: 0;
    border-radius: 4px 0 0 4px;
    transition: width 0.4s ease;
}

.progress-fullwidth {
    border-radius: 4px !important;
}

.tabcontent.notabs .filters .chart_percent .progress-txt {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
}

/* 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 .stats_chart {
    width: calc(40% - 3rem);
    padding: 1rem;
    margin-bottom: 1rem;
    border: none;
    border-radius: 0.5rem;
    background-color: rgba(250, 250, 255, 0.65);
    display: flex;
    flex-direction: column;
}

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

.stats .stats_chart.w-full {
    width: calc(100% - 2rem) !important;
    margin-left: 0.5rem !important;
}

.stats .stats_chart.w-stats {
    width: auto !important;
    height: 368px !important;
    aspect-ratio: 2.229357798165138 !important;
}

.stats .stats_chart.h-full {
    height: calc(100% - 2rem) !important;
}

.stats .stats_chart.grid {
    overflow-y: auto;
}

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

.stats .stats_chart.half_w {
    width: calc(50% - 2.5rem) !important;
}

.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: black;
    font-weight: normal;
    font-size: var(--fontsize);
    user-select: none;
}

.stats .stats_chart .stat_title>span.label {
    margin-right: 1rem;
}

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

.stats .stats_chart .stat_title span.material-symbols-outlined {
    color: black;
    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;
    max-width: 60%;
    overflow-x: auto;
}

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

.stats .stats_chart .stat_title .legend .element,
.expanded_chart .legend .element {
    margin-right: 0.1rem;
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 8px 16px;
    border-radius: 4px;
}

.stats .stats_chart .stat_title .legend .element:hover,
.expanded_chart .legend .element:hover {
    background-color: var(--q-hover);
}

.stats .stats_chart .stat_title .legend .element.selected,
.expanded_chart .legend .element.selected {
    background-color: var(--qeido);
    color: white;
}

.square_grid {
    display: flex;
    flex-wrap: wrap;
    align-content: baseline;
}

.square_grid .empty {
    margin: 0;
}

.stats .stats_chart .square_grid {
    height: 100%;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--color-fore) var(--color-back);
    scrollbar-gutter: stable;
    padding-left: 0.5rem;
}

.square_grid .square {
    margin-bottom: var(--squaremargin);
    transition-duration: 0.25s;
    border: 1px solid transparent;
}

.square_grid .square:hover {
    z-index: 2;
    border: 1px solid white;
}

.square_grid,
.stats .stats_chart .stat_title .legend .element,
.stats .stats_chart .hub_list .hub_item,
.expanded_chart .legend .element {
    .square {
        width: 0.75rem !important;
        min-width: 0.75rem;
        height: 0.75rem;
        border-radius: 0.1rem;
        margin-right: var(--squaremargin);
        background-color: rgba(250, 250, 255, 0.65);
        cursor: pointer;
        z-index: 1;
    }

    .square.success {
        background-color: var(--mutedsagegreen);
    }

    .square.danger {
        background-color: var(--terracota);
    }

    .square.warning {
        background-color: var(--creme);
    }

    .square.disabled {
        background-color: var(--q-gray-focus);
    }

    .square.muted {
        background-color: var(--q-gray);
    }
}

[s-success] {
    background-color: var(--mutedsagegreen);
}

[s-danger] {
    background-color: var(--terracota);
}

[s-warning] {
    background-color: var(--creme);
}

[s-disabled] {
    background-color: var(--q-gray-focus);
}

[s-muted] {
    background-color: var(--q-gray);
}

.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);
    line-height: var(--fontsize);
    margin-left: 0.5rem;
}

.stats .stats_chart .stat_title .legend .element.selected span,
.expanded_chart .legend .element.selected span {
    color: white;
}

.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)
}

.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 .stats_chart .chart {
    height: 100%;
    font-size: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
}

.expanded_chart {
    font-size: 3rem;
}

.stats .stats_chart .hub_list,
.stats .stats_chart .canvas_cnt {
    height: 100%;
    overflow-y: auto;
    scrollbar-gutter: stable;
}

.stats .stats_chart .hub_list {
    display: flex;
    flex-direction: column;
    width: 100%;
    position: relative;
}

.stats .stats_chart .hub_list .hub_item {
    display: flex;
    flex-direction: row;
    width: calc(100% - 2rem);
    padding: 0.5rem 1rem;
    align-items: center;
    border-bottom: 2px solid white;
}

.stats .stats_chart .hub_list .hub_item:not(.header) {
    cursor: pointer;
}

.stats .stats_chart .hub_list .hub_item>* {
    width: 100%;
    text-align: left;
}

.stats .stats_chart .hub_list .hub_item.header {
    z-index: 2;
    background-color: #f5f5f8;
    position: sticky;
    top: 0;
    border-bottom: 2px solid var(--qeido);
}

.stats .stats_chart .hub_list .hub_item.header>* {
    font-weight: bold;
}

.stats .stats_chart .hub_list .hub_item .square {
    margin-right: 0.5rem !important;
}

.stats .stats_chart .hub_list .hub_item.header .square {
    background-color: white;
}

.stats .stats_chart .canvas_cnt canvas {
    cursor: pointer;
    width: 100%;
}

.canvas_tooltip {
    position: absolute;
    background-color: var(--qeido);
    color: white;
    padding: 8px 14px;
    border-radius: 4px;
    transform: translate(-50%, -100%);
    font-size: 0.85rem;
    line-height: 0.85rem;
    cursor: pointer;
    z-index: 999;
}

.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;
    align-content: baseline;
    width: 100%;
    overflow-y: auto;
    max-height: calc(100% - 50px - 0.25rem);
    scrollbar-width: thin;
    scrollbar-gutter: stable;
}

.stats.monitor .info-msg,
.stats.deployment .info-msg {
    width: calc(100% - 3rem);
    height: calc(100% - 3rem);
    margin: 0 0.5rem;
    margin-top: 1rem;
    padding: 1rem;
    border: none;
    border-radius: 0.5rem;
    background-color: rgba(250, 250, 255, 0.85);
    position: relative;
}

.stats.monitor .info-msg .text,
.stats.deployment .info-msg .text {
    position: absolute;
    top: 20%;
    left: 5%;
    width: 22%;
    text-align: left;
    display: flex;
    color: var(--q-gray-focus);
    flex-direction: column;
}

.stats.monitor .info-msg .text span,
.stats.deployment .info-msg .text span {
    font-size: 1.2rem;
    color: var(--q-foreground);
}

.stats.monitor .info-msg .text span.main,
.stats.deployment .info-msg .text span.main {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.stats.monitor .info-msg img,
.stats.deployment .info-msg img {
    position: absolute;
    max-width: 65%;
    max-height: 80%;
    top: 50%;
    right: 5%;
    transform: translateY(-50%);
}

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

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

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

.stats.deployment .stats_chart.w-1 {
    width: calc(20% - 3rem);
}

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

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

.stats.deployment .stats_chart.w-4 {
    width: calc(80% - 3rem);
}

.stats.deployment .stats_chart.w-5 {
    width: calc(100% - 3rem);
}

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

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

@media (max-width: 1200px) {
    .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 div.alert {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: auto;
    margin-bottom: auto;
}

.stats.deployment .stats_chart div.alert .material-symbols-outlined {
    font-size: 200%;
    margin-right: 0.5rem;
}

.stats_conf {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: start;
    width: 100%;
    max-height: 60vh;
    overflow-y: auto;
}

.stats_conf .item {
    width: calc(20% - 3rem);
    margin-bottom: 1rem;
    aspect-ratio: 1.4;
    background-color: var(--q-background2);
    border-radius: 0.5rem;
    margin-right: 1rem;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
}

.stats_conf .item.active {
    background-color: var(--qeido);
}

.stats_conf .item .chart_title {
    margin-top: auto;
    font-weight: bold;
    color: var(--q-foreground);
    font-size: 1rem;
    height: 1rem;
    line-height: 1rem;
}

.stats_conf .item.active .chart_title {
    color: white;
}

.stats_conf .item img {
    width: 100%;
}

/* END STATS CHART */

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

.highcharts-tooltip hr {
    color: var(--q-gray) !important;
}

/* 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;
    z-index: 999 !important;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #191919;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 999;
    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-html-container a {
    text-decoration: none;
    color: var(--color-fore-drk);
}

.swal2-html-container .flex-buttons {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    width: 100%;
}

.swal2-html-container .flex-buttons .btn {
    margin: 0;
}

/* 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;
    margin-top: 0;
    margin-bottom: 0;
}

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(--mutedsagegreen);
}

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(--q-gray);
    border-radius: 1.5em;
    padding: 2px;
    transition: all 0.4s ease;
    border: 1px solid var(--q-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(--qeido);
}

/* 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 */

.innerform .form-warning {
    padding: 0.5rem 1rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    border: 1px solid var(--warning-brd);
    background-color: var(--warning-bkg);
    border-radius: 0.5rem;
    width: fit-content;
    margin: 0 auto;
}

.innerform .form-warning span {
    color: var(--q-gray-focus);
}

.innerform .form-warning .material-symbols-outlined {
    font-size: 2.5rem;
    margin-right: 1rem;
    color: var(--warning-brd);
}

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

.card-map {
    position: absolute;
    top: 6rem;
    right: 1rem;
    background-color: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(10px);
    width: 20rem;
    height: 400px;
    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: bold;
    font-size: 1.2rem;
    color: var(--deepslateblue);
}

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

.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;
}

.card-map>.card-body>.card-line>.edit_home {
    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;
}

.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-chart {
    width: 20rem;
    height: 20rem;
    margin-bottom: 1rem;
}

.card-map>.card-body>.card-info>.item>.item-title {
    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;
    scrollbar-width: thin;
    scrollbar-color: var(--color-fore) var(--color-back);
}

.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);
}

.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);
}

.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-wrap: nowrap;
}

@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 .elements {
    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.scaip .info_div {
    margin-left: 0.5rem;
}

.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.scaip .edit_div {
    width: 40%;
}

.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: 45%;
}

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

.tabcontent>.zone_layout {
    width: 100%;
    height: calc(100% - 1rem);
    padding-top: 1rem;
}

.layout_container {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: start;
}

.layout_container.edit {
    height: calc(100vh - 11rem) !important;
}

.layout_container.show {
    height: calc(100% - 1rem) !important;
}

.layout_container.stats {
    height: calc(100vh - 19rem) !important;
}

.layout_container.stats.h-auto {
    height: auto !important;
}

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

.layout_container .layout_flex {
    display: flex;
    height: 100%;
}

.layout_container .layout_flex .layout.edit {
    height: 100%;
    border: none;
    border-radius: 0;
}

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

.layout_container .layout_flex .layout_elements .element_list {
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--color-fore) var(--color-back);
    margin-bottom: 1rem;
    text-align: left;
    /* max-height: 33%; */
}

.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;
}

.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;
    position: absolute;
}

.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);
    height: calc(100% - 4px);
    padding: 2px;
    position: relative;
}

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

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

.layout_container .layout svg foreignObject>div .icons span:nth-of-type(3) {
    bottom: 2px;
}

/* 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;
    margin-bottom: 0.5rem;
}

.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;
}

.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(--qeido);
}

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

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

.layout_container .floor_tabs .tab_item.active span {
    color: white;
}


/* 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 */

/* SHIFT CALENDAR */
#shift_calendar {
    height: calc(100% - 2rem);
    margin-top: 1rem;
}

#shift_calendar .ec-timeline .ec-sidebar .ec-resource span {
    padding-top: 10px;
}

#shift_calendar .ec-expander {
    margin-right: 0.5rem;
    padding-top: 6px !important;
}

#shift_calendar .ec-event {
    background-color: var(--qeido);
    cursor: pointer;
}

#shift_calendar .ec-event-time,
#shift_calendar .ec-event-title {
    color: white;
    font-size: var(--fontsize);
}

.shift-configuration {
    position: absolute;
    z-index: 999;
    display: flex;
    flex-direction: column;
    width: 22rem;
    padding: 1rem;
    background-color: white;
    border: 1px solid var(--qeido);
    border-radius: 0.5rem;
}

.shift-configuration .shift-field {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 1rem;
}

.shift-configuration .shift-field.buttons {
    margin-bottom: 0;
}

.shift-configuration .shift-field .icon {
    font-size: 1.4rem;
    margin-right: 0.5rem;
}

.shift-configuration input:not(:disabled) {
    width: 100% !important;
    height: 1.5rem !important;
    line-height: 1.5rem !important;
    border-bottom: 1px solid var(--qeido) !important;
    border-radius: 0 !important;
}

.shift-configuration .shift-field>.select2-container {
    margin-left: 0.25rem;
    margin-right: 0.25rem;
}

.shift-configuration .shift-repetitivity {
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
    padding-left: 2.15rem;
}

.shift-configuration .shift-repetitivity .days {
    display: flex;
    flex-direction: row;
    margin-bottom: 0.5rem;
}

.shift-configuration .shift-repetitivity .days span.day {
    background-color: var(--q-gray);
    padding: 2px 4px;
    margin-right: 0.25rem;
    cursor: pointer;
    border-radius: 0.25rem;
}

.shift-configuration .shift-repetitivity .days span.day.active {
    background-color: var(--qeido);
    color: white;
}

.shift-configuration .shift-repetitivity .end {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.shift-configuration .save-btn {
    cursor: pointer;
    margin-left: auto;
    color: white;
    background-color: var(--qeido);
    padding: 0.4rem 0.8rem;
    border-radius: 0.5rem;
}

.shift-configuration .delete-btn {
    cursor: pointer;
    color: white;
    background-color: var(--red);
    padding: 0.4rem 0.8rem;
    border-radius: 0.5rem;
}

.shift-configuration .close-btn {
    cursor: pointer;
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    font-size: 1.2rem;
}

.shift-configuration .select2-container {
    width: 100% !important;
}

.shift-configuration .select2-container--disabled .select2-selection {
    border: none !important;
    opacity: 1 !important;
    background-color: white !important;
}

.shift-configuration .select2-container--disabled .select2-selection__arrow {
    display: none !important;
}

/* END SHIFT CALENDAR */

/* HOME MEASURES */
.tabcontent .measures {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
}

.tabcontent .measures .loading_screen {
    width: calc(100% + 1.2rem);
    height: 100%;
    z-index: 999;
    position: absolute;
    top: -0.5rem;
    left: -0.5rem;
    background-color: black;
    opacity: 0.1;
    border-radius: 0.5rem;
    overflow: hidden;
    cursor: progress;
}

.tabcontent .measures .sensor {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: calc(100% - 4rem);
    border: 1px solid var(--q-gray) !important;
    border-radius: 0.5rem;
    padding: 1rem 2rem;
    margin-bottom: 1rem;
}

.tabcontent .measures .sensor legend {
    padding: 0 10px;
    font-weight: normal;
    font-size: 110%;
    color: var(--qeido);
}

.tabcontent .measures .sensor .measure-div {
    width: calc(25% - 2rem);
    padding: 1rem;
    border: none;
    border-radius: 0.5rem;
}

/* END HOME MEASURES */

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

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

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

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

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

.hint--bottom:before {
    border-bottom-color: var(--qeido);
    z-index: 9999 !important;
}

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

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

/* 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-width: thin;
    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;
}

#events_tabla a.action-detail {
    position: relative;
}

#t3 .event_msg {
    font-family: "Lucida Console", "Courier New", monospace;
    position: absolute;
    text-align: left;
    padding: 0.5rem;
    border-radius: 0.5rem;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 5;
    background-color: white;
    text-wrap: wrap;
    overflow: none;
}

.tab_title {
    display: flex;
    flex-direction: row;
    width: 100%;
    align-items: center;
}

.tab_title h3 {
    margin-right: 1rem;
}

.tab_title .filters .filter-group,
.filter-group {
    display: flex;
    width: fit-content;
    background-color: transparent;
    border-radius: var(--borderR);
    border: 1px solid var(--qeido);
    align-items: center;
    overflow: hidden;
    margin-right: 1rem;
    height: var(--filterheight);
    line-height: var(--filterheight);

}

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

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

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

/* CLASSIFICATION RADIO */
ul.alarm_radio {
    list-style: none;
    user-select: none;
    padding-left: 0;
    margin: 0;
}

ul.alarm_radio li {
    display: inline;
}

ul.alarm_radio li label {
    display: inline-block;
    background-color: var(--color-back);
    color: var(--q-gray-focus) !important;
    border: 1px solid;
    border-radius: 6px;
    white-space: nowrap;
    user-select: none;
    padding: 0.2rem 0.4rem;
    font-weight: normal;
    font-size: var(--fontsize);
    line-height: var(--fontsize);
    cursor: pointer;
    margin-right: 0.5rem;
}

ul.alarm_radio li label::before {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    font-size: 0.7rem;
    line-height: normal;
    padding: 2px 6px 2px 2px;
    content: "\23FA";
}

ul.alarm_radio li input[type="radio"]:checked+label::before {
    color: white;
}

ul.alarm_radio li input[type="radio"]:checked+label {
    color: white !important;
}

ul.alarm_radio li input[type="radio"] {
    position: absolute;
    opacity: 0;
}

/* Informative */
ul.alarm_radio li.alarm_1 input[type="radio"]+label {
    border-color: var(--color-fore) !important;
}

ul.alarm_radio li.alarm_1 label::before {
    color: var(--color-fore);
}

ul.alarm_radio li.alarm_1 input[type="radio"]:checked+label {
    background-color: var(--color-fore) !important;
}

/* Minor */
ul.alarm_radio li.alarm_2 input[type="radio"]+label {
    border-color: var(--level3) !important;
}

ul.alarm_radio li.alarm_2 label::before {
    color: var(--level3);
}

ul.alarm_radio li.alarm_2 input[type="radio"]:checked+label {
    background-color: var(--level3) !important;
}

/* Major */
ul.alarm_radio li.alarm_3 input[type="radio"]+label {
    border-color: var(--level4) !important;
}

ul.alarm_radio li.alarm_3 label::before {
    color: var(--level4);
}

ul.alarm_radio li.alarm_3 input[type="radio"]:checked+label {
    background-color: var(--level4) !important;
}

/* Critical */
ul.alarm_radio li.alarm_4 input[type="radio"]+label {
    border-color: var(--level5) !important;
}

ul.alarm_radio li.alarm_4 label::before {
    color: var(--level5);
}

ul.alarm_radio li.alarm_4 input[type="radio"]:checked+label {
    background-color: var(--level5) !important;
}

/* Ignore */
ul.alarm_radio li.alarm_5 input[type="radio"]+label {
    border-color: var(--q-gray-focus) !important;
}

ul.alarm_radio li.alarm_5 label::before {
    color: var(--q-gray-focus);
}

ul.alarm_radio li.alarm_5 input[type="radio"]:checked+label {
    background-color: var(--q-gray-focus) !important;
}

/* END CLASSIFICATION RADIO */

[minidata] {
    font-size: var(--fontsize) !important;
}

.hub_details {
    width: 100%;
    margin-bottom: 10px;
}

.hub_details .miniinfo {
    width: 100%;
}

.monitor_container span {
    font-size: 0.75rem;
}

.sensors {
    width: 100%;
    height: calc(100% - 10rem)
}

.sensors .list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    overflow-y: auto;
    scrollbar-gutter: stable;
    justify-content: space-between;
    align-content: baseline;
    height: calc(100% - 3.6rem);
}

.sensors .sensor_details_term {
    position: relative;
    width: calc(50% - 16px - 5px);
    border: 1px solid #f0f0f0;
    margin-bottom: 5px;
    border-radius: var(--borderR);
    padding: 8px;
    font-size: 0.75rem !important;
    transition: all 0.25s;
    overflow: hidden;
    line-height: 1;
}

.sensors .sensor_details_term .miniinfo {
    line-height: 1.1rem;
}

.sensors .sensor_details_term .miniinfo .material-symbols-outlined {
    margin-right: 8px;
    font-size: 0.95rem;
}

.sensors .sensor_details_term:hover {
    cursor: pointer;
    background-color: #f0f0f0;
}

.monitor_container {
    position: fixed;
    background-color: rgba(255, 255, 255, 0.85);
    border-radius: var(--borderR);
    backdrop-filter: blur(5px);
    z-index: 999;
    padding: 1rem;
    border: 1px solid #eaeaea;
}

.monitor_container#termContainer {
    width: 24rem;
    height: calc(100vh - 23.75rem);
    top: 15rem;
    right: 4.5rem;
}

.monitor_container .infoheader {
    width: 100%;
    height: fit-content;
    font-size: 0.75rem !important;
    border-bottom: 1px solid var(--qeido);
    margin-bottom: 1rem;
    line-height: 1.2rem;
    padding-bottom: 0.5rem;
}

.monitor_container .infoheader .header_flex {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.monitor_container .infoheader .header_flex .btn {
    text-wrap: nowrap;
}

.monitor_container .container_close {
    position: absolute;
    right: 10px;
    top: 10px;
    width: 24px;
    height: 24px;
}

.monitor_container .container_close span {
    font-size: 24px;
}

.monitor_container .container_close:hover {
    cursor: pointer;
    color: var(--red);
}

.monitor_container#evContainer {
    width: 20rem;
    height: calc(100vh - 23.75rem);
    top: 15rem;
    right: 31.5rem;
}

.monitor_container#chartContainer {
    width: 40rem;
    height: calc(100vh - 23.75rem);
    top: 15rem;
    right: 31.5rem;
}

.monitor_container#chartContainer#activity_hour_zone {
    height: calc(100vh - 25rem);
}

.monitor_container .events {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: calc(100% - 3.5rem);

}

.monitor_container .events .header {
    display: flex;
    flex-direction: row;
    width: calc(100% - 12px);
    border-bottom: 1px solid var(--qeido);
    padding-bottom: 0.5rem;
    margin-bottom: 0.25rem;
}

.monitor_container .events .header span {
    width: 100%;
    font-size: 0.8rem;
}

.monitor_container .events .rows {
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow-y: auto;
    scrollbar-gutter: stable;
}

.monitor_container .events .rows .ev_row {
    display: flex;
    flex-direction: row;
    width: calc(100% - 0.8rem);
    padding: 0.4rem;
    line-height: 1.2rem;
}

.monitor_container .events .rows .ev_row:hover {
    background-color: var(--qeido);
    color: white;
    cursor: pointer;
    border-radius: 5px;
}


.monitor_container .events .rows .ev_row span {
    width: 100%;
}

[hubinfo-label] {
    display: inline-block;
    width: 10rem;
    min-width: 10rem;
    color: var(--qeido);
    margin-right: 12px;
}

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

[color-green] {
    color: var(--green);
}

[color-red] {
    color: var(--color-error);
}

[color-gray] {
    color: var(--q-gray-focus) !important;
}

.flag-icon {
    margin-right: 0.5rem;
}

.filters .filter_results,
.input-group .filter_results,
.innerform .filter_results {
    position: absolute;
    width: calc(80% - 2rem);
    left: calc(20% + 2rem);
    top: 100%;
    display: flex;
    flex-direction: column;
    max-height: 20rem;
    overflow-y: auto;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}

.innerform .filter_results {
    width: 100%;
    left: 0;
}

.filters .filter_results span,
.input-group .filter_results span,
.innerform .filter_results span {
    background-color: white;
    color: var(--color-fore);
    padding: 0 0.5rem;
    z-index: 9;
    font-size: 90%;
}

.innerform .filter_results span {
    padding: 0.5rem;
}

.filters .filter_results span:hover,
.input-group .filter_results span:hover,
.innerform .filter_results span:hover {
    background-color: var(--q-gray);
    cursor: pointer;
}

/*  
    Panel de Exportacion
    Init
*/
.export_container {
    position: fixed;
    background-color: #f0f0f0;
    /*rgba(255, 255, 255, 0.82);*/
    border-radius: 0 0 0 var(--borderR);
    backdrop-filter: blur(10px);
    z-index: 999;
    padding: 1rem;
    top: 64px;
    right: 0;
    display: none;
    width: fit-content;
    height: fit-content;
    z-index: 99999999999;
    -webkit-box-shadow: -7px 8px 5px -2px rgba(0, 0, 0, 0.11);
    -moz-box-shadow: -7px 8px 5px -2px rgba(0, 0, 0, 0.11);
    box-shadow: -7px 8px 5px -2px rgba(0, 0, 0, 0.11);
}

.export_button,
.export_gear {
    position: relative;
    width: 10rem;
    height: 10rem;
    padding: 32px;
    text-align: center;
    border-radius: var(--borderR);
    float: left;
}

.export_gear {
    display: none;
}

.export_button :first {
    position: relative;
    border-radius: var(--borderR) 0 0 var(--borderR);
    width: 12rem;
    height: 12rem;
    padding: 32px;
    float: left;
}

.export_button:hover {
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
}

.export_button img {
    width: 5rem;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1rem;
    display: block;

}

.export_button span,
.export_gear span {
    font-size: 0.7rem;
    color: #666;
    line-height: 1rem;
}

/*  
    Panel de Exportacion
    End
*/

/* Spinner Init */
.export_spinner {
    width: 5rem;
    height: 5rem;
    border: 6px solid #e0e0e0;
    border-top: 6px solid #bdbdbd;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 1rem;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Spinner End */

.date_div {
    justify-content: space-around;
    width: 100% !important;
    height: 100% !important;
    position: relative;
    border-radius: 0 !important;
}

.date_div input {
    height: 100% !important;
    z-index: 999;
    background-color: white;
    cursor: pointer;
}

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

.date_div .material-symbols-outlined {
    color: var(--q-foreground);
    cursor: pointer;
}

/* IA Layers */
.ai_studies {
    padding: 5px;
}

.study {
    display: block;
    width: 100%;
    height: 17rem;
    border-radius: var(--borderR);
    background-color: white;
    border: 1px solid #ccc;
    margin-bottom: 10px;
    overflow: hidden;
}

.study_title {
    font-size: 1.0rem !important;
    font-weight: bold !important;
    color: var(--qeido) !important;
    margin-bottom: 0.5rem !important;
}

.study .study_header {
    position: relative;
    padding: 1rem;
    width: 16rem;
    height: 100%;
    background-color: var(--color-menu1);
    color: white !important;
    line-height: 1.2rem;
    float: left;
    border-radius: var(--borderR) 0 0 var(--borderR);
    box-sizing: border-box;
    font-size: 0.75rem;
}

.study .study_header * {
    color: white;
}

.study .study_header span {
    display: block;
    color: #a0a0a0;
    font-size: 0.7rem;
    margin-bottom: 4px;
}

.study .study_header span.stitle {
    display: block;
    color: white;
    font-size: 0.8rem;
    margin-bottom: 0px !important;
}

.study .study_header span.sdata {
    overflow: hidden;
    text-wrap: nowrap;
    text-overflow: ellipsis;
}

.study .ai_chart {
    display: flex;
    flex-direction: column;
    position: relative;
    float: right;
    width: calc(100% - (16rem + 10px));
    height: 100%;
    border-radius: 0 var(--borderR) var(--borderR) 0;
}

.study .ai_chart .chart {
    height: 100%;
}


.study .edit_study {
    position: absolute;
    right: 10px;
    top: 14px;
    width: 24px;
    height: 24px;
    border-radius: 8px;
    color: #c0c0c0;
    font-size: 1rem;
    line-height: 32px;
    text-align: center;
    padding: 0;
}

.study .edit_study span {
    font-size: 24px !important;
}

.study .edit_study:hover,
.study .edit_study span:hover {
    color: white;
    cursor: pointer;
}

[ia] {
    color: var(--qeido) !important;
    font-size: 100%;
}

.bigicon {
    font-size: 2rem !important;
}

iframe.server_status {
    width: calc(100% - 1rem);
    height: calc(100% - 5rem);
    border: none;
    border-radius: var(--borderR);
}

table td.capitalize {
    text-transform: capitalize;
}

table td.uppercase {
    text-transform: uppercase;
}

.resize_helper {
    border: 1px dashed var(--qeido);
    border-radius: 4px;
}

.tab_buttons {
    align-items: end;
    display: flex;
    border-bottom: 1px solid var(--qeido);
    margin-top: 1rem;
}

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

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



/************* QEIDO AIOMS *************/
/* Contenedor principal */
.aioms-online-container,
.aioms-online-container * {
    box-sizing: border-box;
}

.aioms-online-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    height: 100%;
}

.qa-session {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}

.qa-session img {
    height: 30%;
    transform: rotate(20deg);
    margin-top: 10rem;
    margin-bottom: 1rem;
}

.qa-session span {
    font-size: 1rem;
}

/* Parte superior: tarjetas + llamada */
.qa-top-section {
    display: flex;
    gap: 10px;
    height: 60%;
}

/* Columna izquierda con las tarjetas */
.qa-sidebar {
    /*display: flex;
    flex-direction: row;*/
    gap: 10px;
    width: 40%;
    height: 100%;
}

/* Cada tarjeta */
.qa-card {
    background-color: #f9f9f9;
    border-radius: 12px;
    padding: 1rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    position: relative;
    float: left;
    width: 30%;
    min-height: 200px;
    margin: 0px 0px 16px 10px;
    /* margin: 0 auto; */
    /* aspect-ratio: 1; */
    /*display: flex;
    flex-direction: row;*/
    /* height: calc(33.33% - 15px); */

}

[bal] {
    position: absolute;
    bottom: 10px;
    left: 50%;
    width: 60% !important;
    transform: translateX(-50%);

}

/* Título de cada tarjeta */
.qa-title {
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 12px;
    text-align: center;
}

/* Contenido común */
.qa-measure {
    font-size: 24px;
    display: flex;
    /* flex-direction: column; */
    align-items: end;
    justify-content: center;
    flex: 1;
}

.qa-data {
    font-size: 1.75rem;
    line-height: 1.75rem;
}

.qa-unit {
    font-size: 14px;
    margin-left: 4px;
    color: #999999;
}

.qa-unit sub {
    color: #999999;
}

/* Botón de acción */
.qa-action {
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    background-color: #00a8f0;
    /* position: absolute;
    right: 0;
    bottom: 0;
    transform: translate(50%, 50%);
    border-radius: 50%; */
    width: 100%;
    border-radius: 5px;
    margin-top: 0.5rem;
}

.qa-action.disabled {
    background-color: var(--q-disabled);
    cursor: initial;
}

.qa-action.action-active {
    background-color: var(--color-error);
}

.qa-action span {
    color: #fff;
    font-size: 2rem;
}

.qa-action:hover {
    color: #007bff;
}

.qa-icon {
    font-size: 2rem;
    line-height: 2.25rem;
    flex: 1;
    text-align: center;
}

/* Colores por ícono */
.qa-icon.green {
    color: #3cb371;
}

.qa-icon.red {
    color: var(--color-error);
}

.qa-icon.blue {
    color: #3498db;
}

/* Estilos específicos */
.qa-bloodpressure,
.qa-heartrate,
.qa-temperature {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    flex: 1;
    gap: 5px;
}

.qa-sys,
.qa-dia,
.qa-spo2,
.qa-hr {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
}

.qa-sys-label,
.qa-dia-label {
    font-size: 1.25rem;
    line-height: 1.75rem;
    color: #666699;
    flex: 1;
    text-align: center;
}

.qa-temp-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
}

/* Contenedor de videollamada */
.qa-call-container {
    flex: 1;
    display: flex;
    justify-content: center;
    height: 100%;
}

.qa-video-box {
    position: relative;
    overflow: hidden;
    border-radius: 0.5rem;
    height: 100%;
    aspect-ratio: 16/9;
    border: 1px solid #e5e7eb;
    background: url(/resources/gfx/qeido-doctor.svg) no-repeat center center;
    background-size: auto 70%;
}

.qa-init-call {
    position: absolute;
    z-index: 2;
    bottom: 16px;
    right: 16px;
    color: white;
    font-size: 1rem !important;
    border: none;
    border-radius: 0.5rem;
    padding: 8px;
    cursor: pointer;
    width: 250px;
}

.qa-init-call:hover {
    color: white !important;
}

.qa-end-call {
    background-color: var(--color-error);
    border: none;
    border-radius: 50%;
    padding: 12px;
    cursor: pointer;
}

.qa-end-call span {
    color: white;
}

.qa-no-video,
.qa-no-audio {
    border: none;
    border-radius: 50%;
    padding: 12px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}



.qa-no-video:not(.qa-media-inactive):hover,
.qa-no-audio:not(.qa-media-inactive):hover {
    background-color: rgba(90, 90, 90);
}

.qa-no-video:not(.qa-media-inactive):hover span,
.qa-no-audio:not(.qa-media-inactive):hover span {
    color: white;
}

.qa-media-inactive {
    background-color: var(--color-error);
    /* Rojo para desactivado */
}

.qa-media-inactive span {
    color: white;
}

.qa-patient-video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    /* height: 100%; */
    object-fit: cover;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    /* Safari and Chrome */
    -moz-transform: translate(-50%, -50%);
    /* Firefox */
}

.qa-consultant-video {
    position: absolute;
    right: 0.25rem;
    bottom: 0.25rem;
    width: 25%;
    height: auto;
    border-radius: 0.5rem;
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    /* Safari and Chrome */
    -moz-transform: rotateY(180deg);
    /* Firefox */
}

.qa-call-commands {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
}

.qa-hidden {
    display: none !important;
}

/* ECG */
.qa-ecg-container {
    height: 40%;
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    padding: 16px;
    margin-top: 10px;
    position: relative;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.qa-ecg-title {
    font-weight: bold;
    margin-bottom: 10px;
}

.qa-ecg-chart {
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 8px;
    height: 100%;
}

.qa-leadsoff {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.75);
}

.qa-leadsoff span {
    color: var(--color-error);
    font-size: 1.25rem;
    line-height: 1.75rem;
}

.qa-ecg-container .qa-action {
    /* bottom: 0.25rem;
    right: 0.25rem;
    transform: translate(0, 0); */
    max-width: 220px;
    z-index: 3;
}

/* AIOMS Notes */
.qa-notes {
    position: absolute;
    max-height: 35%;
    width: 40rem;
    bottom: 1.5rem;
    right: 7rem;
    background-color: white;
    backdrop-filter: blur(5px);
    padding: 1rem 2rem 1rem 1rem;
    border: 1px solid #eaeaea;
    border-radius: 0.5rem;
    display: flex;
    flex-direction: column;
}

.qa-notes .qa-close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    cursor: pointer;
}

.qa-notes .note-title {
    font-size: 1rem;
    margin-bottom: 1rem;
}

.qa-notes .list {
    max-height: 100%;
    overflow-y: auto;
    margin-bottom: auto;
}

.qa-notes .note-item {
    display: flex;
    flex-direction: column;
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    margin-bottom: 0.5rem;
}

.qa-notes .note-item:hover {
    background-color: #eaeaea;
}

.qa-notes .note-item .ts {
    font-weight: bold;
}

.qa-notes .btn {
    padding: 0 0.5rem !important;
    width: fit-content !important;
    margin-left: 0;
}

.qa-notes .qa-item-save {
    margin-bottom: 0.5rem;
    border: 1px solid var(--q-gray);
    border-radius: 0.25rem;
}

/* Layout */

.aioms-device-label {
    margin-top: 2rem;
    display: inline-block;
    padding: 1rem;
    border: 2px solid var(--qeido);
    /* verde azulado */
    color: var(--qeido);
    border-radius: 8px;
    font-weight: bold;
}

.aioms-stats-container,
.aioms-session-container {
    width: calc(100% - 2rem);
    height: calc(100% - 2rem);
    padding: 1rem;
    display: flex;
    flex-direction: column;
}

.aioms-session-container * {
    box-sizing: border-box;
}

.aioms-charts {
    flex: 1;
    margin-top: 1.5rem;
    overflow-y: auto;
    overflow-x: hidden;
}

.aioms-row {
    display: flex;
    margin-bottom: 1.5rem;
    gap: 1rem;
}

.aioms-col {
    padding: 0.25rem;
    display: flex;
    flex: 1;
    align-items: center;
}


@media (min-width: 768px) {
    .aioms-col-1-5 {
        width: 20%;
    }

    .aioms-col-2-5 {
        width: 40%;
    }

    .aioms-col-3-6 {
        width: 50%;
    }
}

.aioms-chart-box {
    width: 100%;
}

/* Botones de fecha */
.aioms-btn-group {
    display: inline-flex;
    border: 1px solid #e5e7eb;
    /* border-gray-200 */
    border-radius: 0.5rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    /* shadow-sm */
}

.aioms-btn {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    color: #2563eb;
    /* text-blue-qeido */
    background-color: white;
    border: 1px solid #e5e7eb;
    cursor: pointer;
}

.aioms-btn:hover {
    background-color: #f3f4f6;
    /* hover:bg-gray-100 */
    color: #374151;
    /* hover:text-gray-700 */
}

.aioms-btn:focus {
    position: relative;
    z-index: 10;
    outline: none;
}

.aioms-btn:first-child {
    border-radius: 0.5rem 0 0 0.5rem;
}

.aioms-btn:last-child {
    border-radius: 0 0.5rem 0.5rem 0;
    border-left: none;
}

.aioms-btn:not(:first-child):not(:last-child) {
    border-left: none;
}

.aioms-input-col {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Labels */
.aioms-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 400;
    color: #374151;
    /* text-gray-700 */
    margin-right: 0.5rem;
    white-space: nowrap;
}

/* Inputs */
.aioms-input {
    text-align: center;
    appearance: none;
    width: 100%;
    color: #374151;
    /* text-gray-700 */
    border: 1px solid var(--q-gray) !important;
    border-radius: 0.375rem;
    padding: 0.5rem;
    line-height: 1.25rem;
}

.aioms-input:focus {
    background-color: white;
    border-color: #6b7280;
    box-shadow: none;
    outline: none;
}

/* Select */
.aioms-select {
    appearance: none;
    width: 100%;
    color: #374151;
    border: 1px solid #e5e7eb;
    padding: 0.5rem 2rem 0.5rem 0.5rem;
    border-radius: 0.375rem;
}

.aioms-select:focus {
    background-color: white;
    border-color: #6b7280;
    box-shadow: none;
    outline: none;
}

/* Chart Containers */
.aioms-chart {
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    padding: 0.25rem;
}

/* Floating Action Button */
.aioms-fab {
    position: absolute;
    bottom: 1.5rem;
    right: 1.5rem;
    display: flex;
    flex-direction: column;
}

.aioms-fab .aioms-fab-link {
    border-radius: 9999px;
    background-color: var(--qeido);
    transition: box-shadow 0.3s;
    margin-top: 1rem;
}

.aioms-fab .aioms-fab-link:hover {
    box-shadow: 0 0 0 0.5rem #d1d5db;
    /* ring-gray-300 */
}

.aioms-fab a {
    display: flex;
    height: 5rem;
    width: 5rem;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    cursor: pointer;
}

.aioms-fab img {
    display: block;
    width: 3rem;
    height: auto;
    margin: 1.25rem;
    box-sizing: border-box;
}

.aioms-fab span {
    color: white;
    font-size: 2.5rem;
    text-align: center;
}

.session-info,
.session-notes,
.session-measures {
    background-color: white;
    width: 100%;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    padding: 1rem;
}

.session-info {
    width: 30%;
    justify-content: space-around;
}

.session-info div {
    display: flex;
    flex-direction: column;
}

.session-info div span.session-title {
    font-weight: bold;
}

.session-measures {
    width: 70%;
    overflow-y: auto;
}

.session-measures .measure-header,
.session-measures .measure-item {
    padding: 0.5rem;
    border-radius: 0.5rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.session-measures .measure-header {
    position: sticky;
    top: -1rem;
    background-color: white;
}

.session-measures .measure-item:hover {
    background-color: #eaeaea;
}

.session-measures .measure-header span,
.session-measures .measure-item span {
    width: 100%;
}

.session-notes {
    max-height: 100%;
    overflow-y: auto;
}

.session-notes .note-item {
    display: flex;
    flex-direction: column;
    margin-bottom: 0.5rem;
    border-radius: 0.25rem;
    padding: 0.5rem;
}

.session-notes .note-item:hover {
    background-color: #eaeaea;
}

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

.agent_flex .col {
    width: calc(40% - 2.5rem);
    height: calc(100% - 2rem);
    padding: 1rem;
    margin-bottom: 1rem;
    border: none;
    border-radius: 0.5rem;
    background-color: rgba(250, 250, 255, 0.65);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.agent_flex .col.col2 {
    width: calc(30% - 2.5rem);
}

.agent_flex .col.col3 {
    width: calc(30% - 2.5rem);
}

.agent_flex .col .col_title {
    margin-bottom: 1rem;
}

.agent_flex .col .col_title .label {
    color: black;
}

.agent_flex .col .col_body {
    height: 100%;
}

.agent_flex .col_body fieldset {
    border: 1px solid var(--q-gray) !important;
    border-radius: var(--borderR);
    padding: 1rem 2rem;
    margin-bottom: 1.5rem;
    width: calc(100% - 4rem);
    min-width: 1px;
}

.agent_flex .col3 .col_body fieldset {
    padding: 1rem 0.5rem;
    width: calc(100% - 1rem);
}

.agent_flex .col_body fieldset legend {
    padding: 0 10px;
    font-weight: normal;
    font-size: 110%;
    color: var(--qeido);
}

.agent_flex .col3 .col_body fieldset legend {
    margin-left: 1.5rem;
}

.agent_flex .col_body .data {
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
    width: 100%;
}

.agent_flex .col_body .data .label {
    margin-bottom: 0.5rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--q-gray);
}

.agent_flex .col_body .data .info {
    text-wrap: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.agent_flex .col_body fieldset .flex {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 1rem;
}

/* END AGENT */

/* SOME PRELOADERS */
/* HTML: <div class="loader"></div> */
.horloader {
    margin-left: 16px;
    height: 2px;
    width: 32px;
    --c: no-repeat linear-gradient(var(--qeido) 0 0);
    background: var(--c), var(--c), transparent;
    background-size: 60% 100%;
    animation: l16 2s infinite;
}

@keyframes l16 {
    0% {
        background-position: -150% 0, -150% 0
    }

    66% {
        background-position: 250% 0, -150% 0
    }

    100% {
        background-position: 250% 0, 250% 0
    }
}

/* HTML: <div class="loader"></div> */
.horloader2 {
    margin-left: 16px;
    width: 32px;
    height: 6px;
    display: grid;
    color: var(--qeido);
}

.horloader2:before,
.horloader2:after {
    content: "";
    grid-area: 1/1;
    --c: #0000 calc(100%/3), var(--qeido) 0 calc(2*100%/3), #0000 0;
    --c1: linear-gradient(90deg, var(--c));
    --c2: linear-gradient(0deg, var(--c));
    background: var(--c1), var(--c2), var(--c1), var(--c2);
    background-size: 300% 1px, 1px 300%;
    background-repeat: no-repeat;
    animation: l15 1.5s infinite;
}

.horloader2:after {
    animation-delay: -.75s;
}

@keyframes l15 {
    0% {
        background-position: 50% 0, 100% 100%, 0 100%, 0 0
    }

    25% {
        background-position: 0 0, 100% 50%, 0 100%, 0 0
    }

    50% {
        background-position: 0 0, 100% 0, 50% 100%, 0 0
    }

    75% {
        background-position: 0 0, 100% 0, 100% 100%, 0 50%
    }

    75.01% {
        background-position: 100% 0, 100% 0, 100% 100%, 0 50%
    }

    100% {
        background-position: 50% 0, 100% 0, 100% 100%, 0 100%
    }
}

/* SOME PRELOADERS END */

/* GIS */
.gis_popup {
    position: absolute;
    z-index: 9999;
    height: fit-content;
    display: none;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    padding: 8px;
    backdrop-filter: blur(5px);
}

.gis_popup h3,
.gis_popup h5,
.gis_popup h6 {
    margin: 0 0.5rem;
    text-align: center;
    font-size: 0.875rem;
}

.gis_popup h6 {
    font-size: 0.8rem;
}

.gis_popup .flex {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.gis_popup .flex .col {
    width: 100%;
}


.gis_layer {
    position: absolute;
    margin-right: 16px;
    margin-bottom: 16px;
    z-index: 9999;
    width: 300px;
    min-height: 400px;
    display: block;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    padding: 8px;
    backdrop-filter: blur(5px);
}

.gis_weather {
    position: absolute;
    width: calc(100% - 2rem);
    margin-left: 1rem;
    margin-right: 1rem;
    margin-bottom: 1rem;
    display: flex;
    flex-direction: row;
    overflow-y: auto;
}

.gis_weather .weather_date {
    display: flex;
    flex-direction: column;
    width: calc(300px - 1rem);
    background-color: #00A8F099;
    margin-right: 1rem;
    border-radius: 0.5rem;
    padding: 0.5rem;
    justify-content: space-around;
}

.gis_weather .weather_date .weather_list {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.gis_weather .weather_date .weather_title {
    text-align: center;
    color: white;
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}

.gis_weather .weather_date .weather_list .weather_item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    color: white;
}

.gis_weather .weather_item img {
    height: 40px;
}

.gis_weather .weather_item span {
    text-wrap: nowrap;
}

.gis_flex {
    display: flex;
    flex-direction: column;
    width: calc(100% - 1rem);
    row-gap: 0.5rem;
    overflow-y: auto;
    max-height: 80vh;
    padding: 0.5rem;
}

.gis_flex .gis_title {
    text-align: center;
    font-weight: bold;
    font-size: 110%;
    padding-bottom: 5px
}

.gis_flex .divider {
    border-bottom: 2px solid black;
    margin-bottom: 4px;
    padding-bottom: 0.5rem;
}

.gis_flex .divider:not(.gis_title) {
    margin-top: 0.5rem;
}

.gis_flex .gis_row {
    display: flex;
    flex-direction: row;
    align-items: center;
    column-gap: 0.25rem;
}

.gis_flex .gis_row .right {
    margin-left: auto;
}

.gis_flex .gis_box {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 3px;
}

.gis_flex .gis_box.qeido {
    background-color: var(--qeido);
}

.gis_flex .gis_box.green {
    background-color: #81B29A
}

.gis_flex .gis_box.red {
    background-color: #E87A5F;
}

.gis_flex .gis_box.gray {
    background-color: #666666;
}

.gis_flex .gis_box.transparent {
    background-color: transparent;
}

/* END GIS */

/* FILTER CONFIGURATION */
.monitor_filters {
    display: flex;
    flex-direction: row;
}

.monitor_filters .filter_list,
.automation .filter_list {
    display: flex;
    flex-direction: column;
    width: 90%;
}

.filter_list .filter_item {
    display: flex;
    flex-direction: row;
    padding: 0.5rem 1rem;
    height: calc(2rem - 2px);
    width: calc(100% - 2rem);
    align-items: center;
    background-color: white;
    border-radius: 0.25rem;
    border: 1px solid var(--qeido);
    cursor: pointer;
}

.filter_list .filter_item.or {
    margin-bottom: 1rem;
}

.filter_list .filter_item.active {
    background-color: var(--qeido);
}

.filter_list .filter_item.active .filter_title {
    color: white;
}

.filter_list .filter_item .delete {
    margin-left: auto;
    color: var(--red);
    align-self: center !important;
}

.filter_list .filter_item.active .delete {
    color: white;
}

.filter_list .add_button {
    width: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    margin-top: 0.5rem;
    border-radius: 0.25rem;
}

.filter_list .add_button:hover {
    background-color: white !important;
}

.filter_list .add_button span.material-symbols-outlined {
    z-index: 2;
    background-color: var(--q-background);
    color: var(--qeido);
}

.filter_list .add_button:hover span.material-symbols-outlined {
    background-color: white;
}

.filter_list .add_button .line {
    background-color: var(--qeido);
    height: 1px;
    position: absolute;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}

.monitor_filters .cond_list,
.automation .cond_list {
    display: flex;
    flex-direction: column;
    width: 10%;
}

.cond_list .cond_item {
    height: 3rem;
    transform: translateY(1.5rem);
    position: relative;
}

.cond_list .cond_item.or {
    height: 4rem;
}

.cond_list .cond_item .connector {
    position: absolute;
    left: 60%;
    top: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid var(--qeido);
    border-radius: 0.25rem;
    background-color: var(--q-background);
    width: 2rem;
    font-size: 0.8rem;
    text-align: center;
}

.cond_list .cond_item svg {
    fill: var(--q-background);
    stroke: var(--qeido);
    stroke-width: 2;
    float: right;
    height: 100%;
    width: 100%;
}

.conf_filter a.btn {
    margin-top: auto;
}

.daterangepicker:not(.auto-apply) .drp-buttons {
    display: flex !important;
    flex-direction: row-reverse !important;
    align-items: center !important;
    justify-content: start;
}

.daterangepicker:not(.auto-apply) .drp-buttons button {
    border: none !important;
    line-height: initial !important;
    font-weight: normal !important;
}

/* END FILTER CONFIGURATION */

/* AUTOMATION */
.tabcontent .automation {
    display: flex;
    flex-direction: row;
    width: calc(100% - 2rem);
    height: calc(100% - 2rem);
    padding: 1rem;
}

.tabcontent .automation .list {
    width: calc(25% - 0.5rem);
    padding-right: 0.5rem;
    border-right: 1px solid var(--qeido);
    display: flex;
    flex-direction: column;
}

.tabcontent .automation .list .automation_title {
    font-size: 1rem;
    color: var(--qeido);
    margin-bottom: 1rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.tabcontent .automation .list .rule {
    width: calc(100% - 1rem);
    padding: 0.5rem;
    border-radius: 0.5rem;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.tabcontent .automation .list .rule:hover {
    background-color: var(--qeido);
}

.tabcontent .automation .list .rule span.name {
    color: var(--q-gray-focus);
    margin-right: auto;
}

.tabcontent .automation .list .rule:hover span {
    color: white !important;
}

.tabcontent .automation .list .rule .material-symbols-outlined {
    margin-left: 0.5rem;
    font-size: 1.5rem;
}

.tabcontent .automation .list .rule .material-symbols-outlined.delete_rule {
    color: var(--red);
}

.tabcontent .automation .configuration {
    width: calc(75% - 0.5rem);
    margin-left: 0.5rem;
    display: flex;
    flex-direction: column;
}

.tabcontent .automation .configuration .rule_form {
    display: flex;
    flex-direction: row;
    width: 100%;
}

.tabcontent .automation .configuration .rule_form .conditions {
    display: flex;
    flex-direction: row;
    width: 30%;
    padding-top: 1rem;
}

.tabcontent .automation .configuration .rule_form .cond_form {
    display: flex;
    flex-direction: row;
    width: calc(70% - 1rem);
    margin-left: 1rem;
    flex-wrap: wrap;
    align-content: baseline;
    column-gap: 1rem;
}

.tabcontent .automation .configuration fieldset>label {
    color: var(--qeido);
    font-size: 1rem;
}

.tabcontent .automation .action_form {
    justify-content: space-between;
    column-gap: 1rem;
}

.tabcontent .automation .flex-field .wd-full {
    width: 100% !important;
}

.tabcontent .automation .flex-field .wd-6 {
    width: calc(66% - 1rem) !important;
}

.tabcontent .automation .flex-field .wd-3 {
    width: calc(33% - 1rem) !important;
}

.tabcontent .automation .flex-field> :not(:first-child) {
    margin-left: 0 !important;
}

.tabcontent .automation .cond_list .cond_item .connector {
    width: 1.5rem;
    left: 50%;
}

/* END AUTOMATION */