/* --------------------------------------------------------------- */
/* ROOT CSS FIXES */

:root{
    /* 16px - default font size */
    font-size: 15px;
    /* font-size: max(13px, 1.333vmin);  */
    font-size: max(9px, 1.4vmin);
    /* font-size: max(0.75vw, 12px); old sizing  */
}

html, body{
    margin: 0px;
    padding: 0px;
    min-width: 300px;
}

button, input[type="submit"]:not(.btn-primary){
    color: inherit;
    font-weight: inherit;
    border: none;
    outline: none;
    background: none;
}

a:not(.link):not(.oee-btn),
a:focus:not(.link):not(.oee-btn),
a:hover:not(.link):not(.oee-btn),
a:link:not(.link):not(.oee-btn),
a:active:not(.link):not(.oee-btn),
a:hover:not(.link):not(.oee-btn),
a:focus:not(.link):not(.oee-btn),
a:visited:not(.link):not(.oee-btn){
    text-decoration: inherit;
    color: inherit;
}

wbr:after { content: "\00200B"; }

ul{
    list-style-type: none;
    padding: 0px;
}

ul.colored > li:nth-child(odd){ background: #e4edec; }
ul.colored > li:nth-child(even){ background: #f0f7f6; }

::-webkit-scrollbar { width: 0.9em; height: 0.9em; }
::-webkit-scrollbar-track { background: var(--bs-gray-300);  }
::-webkit-scrollbar-thumb { background: rgba(var(--bs-dark-rgb), 0.4) }
::-webkit-scrollbar-thumb:hover { background: rgba(var(--bs-dark-rgb), 0.6)  }

@media print {
    body {
        /* https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-print-color-adjust */
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* ::backdrop {
    opacity: 0.5;
    background: #000;
} */

dialog > .modal{
    background: rgba(0,0,0, 50%);
}

dialog{
    padding: 0px;
    border: none;
}

/* --------------------------------------------------------------- */
/* HELPER CLASSES */
/*
    0.0625rem = 1px
    0.125rem = 2px
    0.1875rem = 3px
    0.25rem = 4px
*/

:root{
    --oee-green-0: #64ca66;
    --oee-green-1: #019764;
    --oee-yellow-0: #f8d111;
    --oee-yellow-1: #fd9932;
    --oee-red-0: #ee3333;
    --oee-red-1: #ac3333; /* #923333 */
    --oee-grey-0: #bfbfbf;
    --oee-grey-1: #767676;
    --oee-blue-0: #3399ff;
    --oee-blue-1: #0066CC;

    --oee-grad-x-primary: linear-gradient(to right, var(--bs-primary)   , var(--bs-secondary) );
    --oee-grad-x-green:   linear-gradient(to right, var(--oee-green-0)  , var(--oee-green-1)  );
    --oee-grad-x-yellow:  linear-gradient(to right, var(--oee-yellow-0) , var(--oee-yellow-1) );
    --oee-grad-x-red:     linear-gradient(to right, var(--oee-red-0)    , var(--oee-red-1)    );
    --oee-grad-x-grey:    linear-gradient(to right, var(--oee-grey-0)   , var(--oee-grey-1)   );

    --oee-grad-y-primary: linear-gradient( var(--bs-secondary) , var(--bs-primary)   );
    --oee-grad-y-green:   linear-gradient( var(--oee-green-1)  , var(--oee-green-0)  );
    --oee-grad-y-yellow:  linear-gradient( var(--oee-yellow-1) , var(--oee-yellow-0) );
    --oee-grad-y-red:     linear-gradient( var(--oee-red-1)    , var(--oee-red-0)    );
    --oee-grad-y-grey:    linear-gradient( var(--oee-grey-1)   , var(--oee-grey-0)   );

    --animation-speed: 75ms;
}

.oee-grad-y-primary{ background: var(--oee-grad-y-primary);}
.oee-grad-y-green{ background: var(--oee-grad-y-green);}
.oee-grad-y-yellow{ background: var(--oee-grad-y-yellow);}
.oee-grad-y-red{ background: var(--oee-grad-y-red);}
.oee-grad-y-grey{ background: var(--oee-grad-y-grey);}

.oee-grad-x-primary{ background: var(--oee-grad-x-primary);}
.oee-grad-x-green{ background: var(--oee-grad-x-green);}
.oee-grad-x-yellow{ background: var(--oee-grad-x-yellow);}
.oee-grad-x-red{ background: var(--oee-grad-x-red);}
.oee-grad-x-grey{ background: var(--oee-grad-x-grey);}

.oee-green-0{ background: var(--oee-green-0);}
.oee-green-1{ background: var(--oee-green-1);}
.oee-yellow-0{ background: var(--oee-yellow-0);}
.oee-yellow-1{ background: var(--oee-yellow-1);}
.oee-red-0{ background: var(--oee-red-0);}
.oee-red-1{ background: var(--oee-red-1);}
.oee-grey-0{ background: var(--oee-grey-0);}
.oee-grey-1{ background: var(--oee-grey-1);}

.text-red{ color: var(--oee-red-1); }
.text-yellow{ color: var(--oee-yellow-1); }
.text-green{ color: var(--oee-green-1); }
.text-grey{ color: var(--oee-grey-1); }

/* https://google-webfonts-helper.herokuapp.com/fonts */
.oee-font-montserrat, .oee-font-montserrat > * { font-family: 'Montserrat', sans-serif; font-weight: 600; }
.oee-font-open-sans, .oee-font-open-sans > * { font-family: 'Open Sans'; font-weight: 400; }
.oee-font-varela, .oee-font-varela > * { font-family: 'Varela Round', sans-serif; font-weight: 400; }
.oee-font-roboto, .oee-font-roboto > * { font-family: 'Roboto'; font-weight: 400; }
.oee-font-roman, .oee-font-roman > * { font-family: 'Times New Roman'; font-weight: 400; } /* default Chrome font */
.oee-font-helvetica, .oee-font-helvetica > * { font-family: 'Helvetica Neue', Helvetica, sans-serif; font-weight: 400; } /* old OEE font */

/* ----- */
.shade{ box-shadow: 0.0625rem 0.0625rem 0.1875rem #222; }
.numeric{ font-variant-numeric: tabular-nums; }
.isolate{ isolation: isolate; }

.bg-blue { background: var(--bs-blue); }
.bg-indigo { background: var(--bs-indigo); }
.bg-purple { background: var(--bs-purple); }
.bg-pink { background: var(--bs-pink); }
.bg-red { background: var(--bs-red); }
.bg-orange { background: var(--bs-orange); }
.bg-yellow { background: var(--bs-yellow); }
.bg-green { background: #77ca29; }
.bg-teal { background: var(--bs-teal); }
.bg-cyan { background: var(--bs-cyan); }

.opacity-0{ opacity: 0.0; }
.opacity-1{ opacity: 0.1; }
.opacity-2{ opacity: 0.2; }
.opacity-3{ opacity: 0.3; }
.opacity-4{ opacity: 0.4; }
.opacity-5{ opacity: 0.5; }
.opacity-6{ opacity: 0.6; }
.opacity-7{ opacity: 0.7; }
.opacity-8{ opacity: 0.8; }
.opacity-9{ opacity: 0.9; }
.opacity-10{opacity: 1.0; }

.z-n1{ z-index: -1; }
.z-0{ z-index: 0; }
.z-1{ z-index: 1; }
.z-2{ z-index: 2; }
.z-3{ z-index: 3; }
.z-4{ z-index: 4; }
.z-5{ z-index: 5; }
.z-6{ z-index: 6; }
.z-7{ z-index: 7; }
.z-8{ z-index: 8; }
.z-9{ z-index: 9; }

.h-0-em  { height: 0.0em !important; }
.h-10-em { height: 1.0em !important; }
.h-15-em { height: 1.5em !important; }
.h-20-em { height: 2.0em !important; }
.h-25-em { height: 2.5em !important; }
.h-30-em { height: 3.0em !important; }
.h-40-em { height: 4.0em !important; }
.h-50-em { height: 5.0em !important; }

.w-0-em  { width: 0.0em !important; }
.w-10-em { width: 1.0em !important; }
.w-15-em { width: 1.5em !important; }
.w-20-em { width: 2.0em !important; }
.w-25-em { width: 2.5em !important; }
.w-30-em { width: 3.0em !important; }
.w-40-em { width: 4.0em !important; }
.w-50-em { width: 5.0em !important; }

.h-10-rem { height: 1.0rem !important; }
.h-15-rem { height: 1.5rem !important; }
.h-20-rem { height: 2.0rem !important; }
.h-25-rem { height: 2.5rem !important; }
.h-30-rem { height: 3.0rem !important; }
.h-40-rem { height: 4.0rem !important; }
.h-50-rem { height: 5.0rem !important; }

.w-10-rem { width: 1.0rem !important; }
.w-15-rem { width: 1.5rem !important; }
.w-20-rem { width: 2.0rem !important; }
.w-25-rem { width: 2.5rem !important; }
.w-30-rem { width: 3.0rem !important; }
.w-40-rem { width: 4.0rem !important; }
.w-50-rem { width: 5.0rem !important; }

.fs-6{ font-size: 1.00rem; }
.fs-7{ font-size: 0.75rem; }
.fs-8{ font-size: 0.60rem; }
.fs-9{ font-size: 0.50rem; }

.fw-100 { font-weight: 100; }
.fw-200 { font-weight: 200; }
.fw-300 { font-weight: 300; }
.fw-400 { font-weight: 400; }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.fw-800 { font-weight: 800; }
.fw-900 { font-weight: 900; }

.cursor-pointer{
    cursor: pointer;
}
.center{
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
            align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
            justify-content: center;
}
.center-y{
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
            align-items: center;
}
.center-x{
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
            justify-content: center;
}

.invert{ -webkit-filter: invert(100%); filter: invert(100%); }
.pointer{ cursor: pointer; }
.border-none{ border: none !important; }

.ms-0{
    min-width: 0px;
    min-height: 0px;
}

.ms-100{
    max-width: 100%;
    max-height: 100%;
}

.no-select {
    -webkit-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

.text-cut {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.grid-col{ grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.grid-row{ grid-auto-flow: row; }

.td-shrink{
    width:1% !important;
    white-space: nowrap !important;
}

.fa-icon-hex::after{
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-style: normal;
    content: var(--icon);
}

/* --------------------------------------------------------------- */
/* grid */
.tree-icon::after{
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-style: normal;
    content: var(--icon);
}

.treegrid-expander{
    display: inline-grid;
    justify-items: center;
    align-items: center;
    padding-left: 8px;
}
.treegrid-expander::after{
    display: none !important;
}
.treegrid-expander::before{
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-style: normal;
    line-height: 1em;
    padding-bottom: 0.25em;
    color: var(--bs-gray-700);
}

.treegrid-expander.treegrid-expander-expanded::before{
    content: '\f0d7';
}
.treegrid-expander.treegrid-expander-collapsed::before{
    content: '\f0da';
}

/* --------------------------------------------------------------- */
/* BOOTSTRAP ADDITIONS/FIXES */

.nav-link{
    color: black !important;
}

label.form-label{
    margin-bottom: 1px;
}

.modal-fullscreen{
    width: 100% !important;
}

/* --------------------------------------------------------------- */
/* table */
table.table{
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    border-spacing: 0px;
    border-collapse: separate;
}

table.table tr,
table.table td,
table.table th
{
    border: 1px solid white;
}

.table.table-striped tbody{
    --bs-table-striped-bg: rgba(0, 0, 0, 0.03);
    background: #f6f6f6;
}



.table th{
    font-family: 'Open Sans';
    font-weight: 700;
    font-size: 1.05em;
}

.table * {
    vertical-align: middle;
}

.table.table-tree th{ padding: 0.50em !important; }
.table.table-tree td{ padding: 0.25em 0.5em !important; }
.table.table-tree thead tr{
    background: rgba(var(--bs-secondary-rgb), 0.3);
    box-shadow: inset 0em 0em 0em 10em rgba(var(--bs-primary-rgb), 0.3);
}
.table.table-tree > *{
    border: 2px solid white;
    background: #f6f6f6;
}

/* .table.table-striped td:not(:first-of-type){ border-left: 1px solid hsl(210, 14%, 78%); }
.table.table-striped th:not(:first-of-type){ border-left: 1px solid hsl(210, 14%, 52%); }
.table.table-striped tr{ border-bottom: 1px solid hsl(210, 14%, 78%); }
.table.table-striped th{ padding: 0.6em 0.5em !important; }
.table th, table tr, table td{ vertical-align: middle; }
.table{ font-family: 'Calibri'; font-size: 1.2em; border-collapse: collapse !important; --bs-table-striped-bg: rgba(0, 0, 0, 0.03);}
.table thead th{ text-transform: uppercase; color: var(--bs-light-emphasis-color); font-weight: bold !important; }
.table-bordered tr, .table-bordered td, .table-bordered th{ border: 1px solid #5d5d5d !important; }
.table-bordered tr { --bs-bg-opacity: 1; }
.table-sm td{ padding: 0.1em 0.333em !important; } */

/* --------------------------------------------------------------- */
/* modal */
.fade{
    transition: opacity var(--animation-speed) linear;
}

.modal.fade .modal-dialog{
    transition: opacity var(--animation-speed) linear;
    opacity: 0;
    transform: none;
}

dialog > .modal{
    display: block !important;
}

.modal.fade.show .modal-dialog{
    opacity: 1;
}

.modal .modal-footer{
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 0.5rem;
}

/* switch */

.form-switch > .form-check-input{
    border-radius: 1em;
}

.form-switch > .form-check-input::after{
    content: '\f00d';
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: black;
    transition-property: left;
    transition-duration: inherit;
    transition-timing-function: inherit;
    position: relative;
    font-size: 0.5em;
    display: grid;
    justify-content: center;
    align-content: center;
    width: 1em;
    height: 100%;
    padding: 0.9375em;
    left: 0px;
}

.form-switch > .form-check-input:checked::after{
    content: '\f00c';
    left: 2em;
}

/* Popover */

.popover .popover-header{
    font-size: 1.4em;
    padding: 0.5em;
}

.popover .popover-body{
    font-size: 1.2em;
    padding: 0.5em;
}

/* --------------------------------------------------------------- */
/* BOOTSTRAP THEMES */

/* [data-bs-theme="dark"]{
    --bs-primary: #c83c3c !important;
    --bs-primary-rgb: 200, 60, 60 !important;
} */

[data-bs-theme="dark"] .dropdown-menu{
    --bs-dropdown-link-active-bg: var(--bs-primary) !important;
}

[data-bs-theme="dark"] .bg-gray-100 { background-color: var(--bs-gray-900); }
[data-bs-theme="dark"] .bg-gray-200 { background-color: var(--bs-gray-800); }
[data-bs-theme="dark"] .bg-gray-300 { background-color: var(--bs-gray-700); }
[data-bs-theme="dark"] .bg-gray-400 { background-color: var(--bs-gray-600); }
[data-bs-theme="dark"] .bg-gray-500 { background-color: var(--bs-gray-500); }
[data-bs-theme="dark"] .bg-gray-600 { background-color: var(--bs-gray-400); }
[data-bs-theme="dark"] .bg-gray-700 { background-color: var(--bs-gray-300); }
[data-bs-theme="dark"] .bg-gray-800 { background-color: var(--bs-gray-200); }
[data-bs-theme="dark"] .bg-gray-900 { background-color: var(--bs-gray-100); }

[data-bs-theme="light"] .bg-gray-100 { background-color: var(--bs-gray-100); }
[data-bs-theme="light"] .bg-gray-200 { background-color: var(--bs-gray-200); }
[data-bs-theme="light"] .bg-gray-300 { background-color: var(--bs-gray-300); }
[data-bs-theme="light"] .bg-gray-400 { background-color: var(--bs-gray-400); }
[data-bs-theme="light"] .bg-gray-500 { background-color: var(--bs-gray-500); }
[data-bs-theme="light"] .bg-gray-600 { background-color: var(--bs-gray-600); }
[data-bs-theme="light"] .bg-gray-700 { background-color: var(--bs-gray-700); }
[data-bs-theme="light"] .bg-gray-800 { background-color: var(--bs-gray-800); }
[data-bs-theme="light"] .bg-gray-900 { background-color: var(--bs-gray-900); }

/* --------------------------------------------------------------- */
/* VUE */

[v-cloak], [x-cloak] { display: none !important; }

/* --------------------------------------------------------------- */
/* PAPER */

.paper{
    border: 0px;
    outline: 1px solid var(--bs-primary);
    position: relative;
    background: white;
    z-index: 100;
}

.paper::before{
    content: '';
    font-size: 0px;
    border-bottom: 17px solid var(--bs-primary);
    border-left: 17px solid transparent;
    position: absolute;
    top: -18px;
    right: -1px;
}

.paper::after{
    content: '';
    font-size: 0px;
    border-bottom: 16px solid var(--bs-dropdown-bg);
    border-left: 16px solid transparent;
    position: absolute;
    top: -14px;
    right: 0px;
}

/* --------------------------------------------------------------- */
/* LINE LOADER */

.loader-line {
    width: 100%;
    height: 100%;
    max-height: 1em;
    position: relative;
    overflow: hidden;
    background-color: var(--bs-gray-300);
}

.loader-line:before {
    content: "";
    position: absolute;
    left: -50%;
    height: inherit;
    width: 40%;
    background-color: var(--bs-primary);
    animation: lineAnim 1.5s linear infinite;
}

@keyframes lineAnim {
    0% {
        left: -40%;
    }
    50% {
        left: 40%;
        width: 50%;
    }
    100% {
        left: 100%;
        width: 100%;
    }
}

/* --------------------------------------------------------------- */
/* OEE BUTTON */

.oee-btn{
    color: rgb(var(--bs-dark-rgb));
    transition: box-shadow 200ms ease-out;
    box-shadow: inset 0em 0em 0em 10em rgba(0, 0, 0, 0);
    border-radius: 0.16rem;
    padding: 0.5rem 1rem;
    position: relative;
    text-align: center;
    align-items: center;
    text-decoration: none;
    /* flex: 1; */
}

.oee-btn.active:not([disabled]),
.oee-btn:hover:not([disabled]){
    box-shadow: inset 0em 0em 0em 10em rgba(0, 0, 0, 0.15) /*, 0px 0px 0.2rem #222*/;
}

.oee-btn:hover, .oee-btn:focus{
    outline: inherit;
}

.oee-btn[disabled]{
    opacity: 0.5;
    pointer-events: none;
    user-select: none;
}

.oee-btn:not([disabled]){ cursor: pointer; }

.oee-btn[loading],
.htmx-request{
    color: transparent !important;
    pointer-events: none;
    user-select: none;
}
.oee-btn[loading]:before,
.htmx-request:before{
    content: '';
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.5em;
    height: 1.5em;
    margin-top: -0.75em;
    margin-left: -0.75em;
    border-radius: 50%;
    border: 3px solid #000A;
    border-top-color: transparent;
    animation: spinner .6s linear infinite;
}

input[type="checkbox"].htmx-request:before {
    content: none;
}

@keyframes spinner {
    to {transform: rotate(360deg);}
}
@media screen and (max-width: 768px) {
    .oee-btn{
        color: rgb(var(--bs-dark-rgb));
        transition: box-shadow 200ms ease-out;
        box-shadow: inset 0em 0em 0em 10em rgba(0, 0, 0, 0);
        border-radius: 0.16rem;
        padding: 0.25rem 0.5rem;
        position: relative;
        text-align: center;
        align-items: center;
        text-decoration: none;
    }
}

/* --------------------------------------------------------------- */