*{
    font-family: arial,sans-serif;
}
:root, .light:root{
    --color-active: #0084ff;
    --color-danger: tomato;
    --color-success: green;
    --color-border: #ddd;
    --background-menu: #ddd;

    --color-text: #000;
    --color-text-inverted: #fff;
    --color-text-muted: #999;
    --background-color: #fff;
    --color-button-disabled: #ccc;

    --color-10-percent: #eee;
    --color-15-percent: #f2f2f2;
    --color-10-percent-opacity: rgba(0,0,0,0.1);
    --background-tooltip: #fff;
    --background-alternate: #f2f2f2;
    --color-link: blue;
    --hover-table-row: #ffff99;

    --background-attention-row-even: #ffdddd;
    --background-attention-row: #ffeeee;
    --background-warning-row-even: #fffbd9;
    --background-warning-row: #ffefbf;

    --background-table-yellow: #fffece; 
    --background-table-yellow-alt: #fffdc0; 
    --background-table-green: #ddffdd; 
    --background-table-green-alt: #ccffcc; 

    --table-tfoot-background: #eee;

    --background-overlay: rgba(200,200,200,0.75);
    
    --color-on: #c0ffc0;
    --color-off: #ffd8d8;
    --color-iddle: #f6f6c6;
}

@media (prefers-color-scheme: dark) {
    :root, .dark:root {
        --color-active: #005fb8;
        --color-danger: #c5290d;
        --color-text: #fff;
        --color-text-inverted: #000;
        --color-text-muted: #999;
        --background-color: #111;
        --color-border: #2d2d2d;
        --background-menu: #333;

        --color-10-percent: #333;
        --color-15-percent: #444;
        --color-10-percent-opacity: rgba(0,0,0,0.1);
        --background-tooltip: #000;
        --background-alternate: #222;
        --color-link: royalblue;
        --hover-table-row: #554500;
        --background-attention-row-even: #4d0000;
        --background-attention-row: #410000;
        --background-warning-row-even: #554500;
        --background-warning-row: #554500;

        --color-button-disabled: #555;

        --background-table-yellow: #64632e; 
        --background-table-yellow-alt: rgb(83, 78, 29); 
        --background-table-green: #375537; 
        --background-table-green-alt: #264126; 

        --background-overlay: rgba(50,50,50,0.75);

        --table-tfoot-background: #222;

        --color-on: #003000;
        --color-off: #3f0000;
        --color-iddle: #3b3700;
    }
}

html, body{
    height: 100%;
    color: var(--color-text);
    background: var(--background-color);
}
body.single{
    display: flex;
    align-items: center;
    justify-content: center;
}
.chart svg{
    width: 250px;
    height: 250px;
}
.chart.chart--inline svg{
    width: 60px;
    height: 60px;
}
.wrap ul, nav ul{
    display: flex;
    padding: 0;
    margin: 20px;

}
.wrap ul li, nav ul li{
    list-style: none;
    margin: 0;
}
.wrap ul li a, nav ul li a{
    font-size: 14px;
}
.wrap ul li a{
    display: block;
}
header{
    display: flex;
    align-items: center;
}
header h1{
    flex: 1 0 auto;
}
header.float{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}
body > header{
    justify-content: space-between;
}
.tabs header{
    padding: 0 10px;
}
.tabs header label{
    padding: 10px 15px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    font-size: 12px;
    border-bottom: 3px solid #eee;
    margin-right: 1px;
}
ul li.active a, .wrap a[href].blue{
    background: var(--color-active);
    color: #fff;
}
a[href].red{
    background: var(--color-danger);
    color: #fff;
}
select{
    padding: 1px 2px;
}
input[id*="tab_"],
[class^="content-tab"]{
    display: none;
}
input#tab_0:checked ~ main .content-tab_0,
input#tab_1:checked ~ main .content-tab_1,
input#tab_2:checked ~ main .content-tab_2,
input#tab_3:checked ~ main .content-tab_3,
input#tab_4:checked ~ main .content-tab_4{
    display: block;
}
input#tab_0:checked ~ header label[for="tab_0"],
input#tab_1:checked ~ header label[for="tab_1"],
input#tab_2:checked ~ header label[for="tab_2"],
input#tab_3:checked ~ header label[for="tab_3"],
input#tab_4:checked ~ header label[for="tab_4"]{
    color: var(--color-text);
    border-color: var(--color-active);
    font-weight: bold;
}
/*
.chart{
    align-self: center;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}
@media screen and ( max-width: 1700px)
{
    .chart{
        flex-direction: row;
    }
} */
table{
    border: 1px solid var(--color-border);
    border-collapse: collapse;
    margin: 10px;
}
td, th{
    padding: 5px;
    border: 1px solid var(--color-border);
    transition: background 0.1s ease;
    cursor: default;
}
th{
    text-transform: uppercase;
    font-weight: bold;
    text-align: left;
    background: var(--color-10-percent);
    font-size: 12px;
}
td table{
    margin: 0;
}
td a{
    font-size: 1em
}
tbody tr:nth-child(even),.irow tbody tr:nth-child(odd){
    background: var(--background-alternate)
}
.irow tbody tr:nth-child(even){
    background: transparent;
}
.selected td{
    background: #ffddaa;
    font-weight: bold;
}
th.yellow, tr:nth-child(even) td.yellow{
    background: var(--background-table-yellow-alt)
}
td.yellow{
    background: var(--background-table-yellow)
}
th.green, tr:nth-child(even) td.green{
    background: var(--background-table-green-alt)
}
td.green{
    background: var(--background-table-green)
}
th.red, tr:nth-child(even) td.red, tr.attention-row:nth-child(even){
    background: var(--background-attention-row-even);
}
td.red, tr.attention-row{
    background: var(--background-attention-row);
}
tr.warning-row:nth-child(even){
    background: var(--background-warning-row-even);
}
tr.warning-row{
    background: var(--background-warning-row);
}
tr.error-row:nth-child(even) td{
    background: var(--background-attention-row-even) !important;
}
tr.error-row td{
    background: var(--background-attention-row) !important;
}
.hvt tr:hover > td{
    background: var(--hover-table-row) !important;
}
tr.warning-row sup.down{
    color: #4f3f00;
    background: #efdfb2;
}
.muted{
    color: #999;
}
.flex{
    display: flex;
}
.justify-center{
    justify-content: center;
}
.text-left{
    text-align: left;
}
.text-center{
    text-align: center;
}
.text-right{
    text-align: right;
}
div.wrap{
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 40px;
}
.wrap.col{
    flex-direction: column;
}
.space-between{
    justify-content: space-between;
}
.align-center{
    align-items: center
}
.contact header{
    display: flex;
    width: 100%;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
    padding-right: 0;
}
.contact header div:first-child{
    flex: 1;
}
.separator{
    position: relative;
}
.separator span{
    position: absolute;
    top: 0;
    left: -1px;
    right: -1px;
    bottom: 0;
    background: #fff;
}
/* .wrap div *,  */
.wrap td, .small{
    font-size: 12px;
}
h1{
    font-size: 20px !important;
    font-weight: normal;
    text-transform: lowercase;
    padding: 0 20px;
    color: #ccc;
    position: relative;
    display: flex;
    align-items: center;
    white-space: break-spaces;
}
h1 span{
    margin-left: 5px;
    cursor: pointer;
    transition: color 0.3s ease;
}
h1 span:hover{
    color: var(--color-text)
}
h1 span::after{
    content: "";
    width: 0;
    height: 0;
    display: inline-block;
    border: 5px solid transparent;
    border-top-color: var(--color-border);
    margin-left: 10px;
}
h1 input{
    visibility: hidden;
    position: absolute;
    left: 70px;
    top: 30px;
}
h1 svg{
    width: 22px;
    height: 22px;
    margin-left: 10px;
}
h2{
    margin: 0;
    margin-bottom: 20px;
}
.c{
    text-align: center;
}
tr.limit td{
    background: var(--background-table-green);
}
tr.limit:nth-child(even) td{
    background: var(--background-table-green);
}
.wrap a, nav a, h1 a{
    text-decoration: none;
    color: var(--color-text);
    cursor: not-allowed;
    margin-right: 1px;
    padding: 5px;
    font-size: 12px;
    vertical-align: 5px;
    background: #f2f2f2;
    white-space: nowrap;
}
nav{
    overflow: auto;
    overflow-y: hidden;
    height: 25px;
    position: relative;
    width: 100%;
    margin: 20px;
}
nav::-webkit-scrollbar{
    opacity: 0;
}
nav ul{
    margin: 0 0 0 auto;
}
nav ul.dragging a, nav ul.dragging{
    pointer-events: none;
    touch-action: none;
    user-select: none;
}
nav div{
    overflow-x: auto;
    overflow-y: hidden;
    position: absolute;
    inset: 0;
    height: 40px;
    margin: 0;
    display: flex;
}
nav a{
    display: block;
}
.home nav, .home nav div{
    height: auto;
    position: relative;
    margin: 0;
}
.home nav ul{
    justify-content: center;
}
header nav label{
    display: none;
    color: var(--color-text);
    background: var(--background-menu);
    width: 26px;
    height: 26px;
    text-align: center;
    line-height: 26px;
    cursor: pointer;
    margin-left: auto;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 10;
    user-select: none;
}
.home nav label{
    display: none;
}

@media screen and (max-width: 600px){
    header nav label{
        display: block;
    }
    header nav ul{
        position: absolute;
        top: 30px;
        left: 0;
        right: 0;
        background: var(--background-menu);
        flex-direction: column;
        align-items: center;
        width: 100%;
        max-width: 200px;
        display: none;
        z-index: 99;
    }
    header nav ul li{
        width: 100%;
    }
    header nav ul li a{
        padding: 10px 20px;
    }
    header nav, header nav div{
        overflow: visible;
    }
    #mmenu:checked ~ div ul{
        display: flex;
    }
}

/* nav ul li:first-child a{
    border-radius: 20px 0 0 20px;
    padding-left: 10px;
}
nav ul li:last-child a{
    border-radius: 0 20px 20px 0;
    padding-right: 10px;
}
.home nav ul li:first-child a, .home nav ul li:last-child a{
    border-radius: 0;
    padding-left: 5px;
    padding-right: 5px;
} */
.wrap a[href], nav a[href], h1 a[href]{
    cursor: pointer;
    background: var(--background-menu);
}
a.normal{
    padding: 0;
    font-size:inherit;
    vertical-align: auto;
    background: transparent !important;
    color: blue;
    text-decoration: underline;
    margin-right: initial;
}
a.normal:visited{
    color: purple;
}
.date-picker{
    display: flex;
    align-items: center;
}
.date-picker input{
    margin: 5px;
    flex: 1 1 auto;
}
.nospace-bottom{
    margin-bottom: 0;
}
thead, tfoot{
    background: var(--table-tfoot-background);
}
.perc{
    float: right;
    display: inline;
    background: var(--color-10-percent-opacity);
    color: var(--color-text);
    border-radius: 10px;
    padding: 0px 5px;
    margin-left: 10px;
}
.perc--left{
    border-radius: 10px 0 0 10px;
}
.perc--right{
    margin-left: 0;
    border-radius: 0 10px 10px 0;
}
.callcenter{
    /* order: 99; */
}
sup{
    color: #0055ff;
    font-size: 12px;
    float: right;
    padding: 0 5px;
    background: #cceeff;
    border-radius: 10px;
    display: flex;
    align-items: center;
    opacity: 0.5;
}
em{
    font-style: normal;
}
.singlesup sup{
    float: none;
    display: inline-flex;
    vertical-align: middle;
}
sup.down{
    color: red;
    background: #ffdddd;
}
sub.icon{
    padding: 0 0 0 5px;
}
sup.up{
    color: var(--color-success);
    background: var(--background-table-green);
}
.totals{
    display: flex;
    width: 100%;
    align-items: stretch;
    margin-top: 5px;
    font-size: 12px;
}
.flex1{
    flex: 1;
}
.totals.flexwrap{
    flex-wrap: wrap;
}
.totals > div{
    margin: 5px 10px;
    background: #eee;
    padding: 5px 20px;
    border-radius: 5px;
    text-transform: uppercase;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    color: #000;
}
.totals > div.split{
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-left: 10px;
}
.totals svg{
    margin-right: 10px;
}
.totals span{
    font-size: 30px;
    display: block;
}
.totals div.red{
    background: #ffdddd;
    color: red;
}
.totals div.green{
    background: #bceabc;
    color: var(--color-success);
}
.totals div.yellow{
    background: #f7f2b3;
    color: #8a6b04;
}
.totals div.gold{
    background: gold
}
.totals div.blue{
    background: #c2e6ff;
    color: #003b69;
}
#discador{
    display: inline;
    margin-right: 5px;
}
#refreshDiscador{
    position: relative;
    top: -3px;
    background: none;
}
.refresh{
    width: 22px;
    height: 22px;
    border: 0;
    padding: 0;
}
.refresh svg{
    margin: 0;
    transform-origin: 47% 50%;
}
.refresh.on svg{
    animation: spin 0.5s linear infinite;
}
@keyframes spin {
    from{ transform: rotateZ(0deg) }
    to{ transform: rotateZ(360deg) }
}
.link, .wrap a.link{
    color: var(--color-link);
    padding: 0;
    margin: 0;
    background: transparent !important;
    text-decoration: underline;
    vertical-align: middle;
}
.link:visited{
    color: purple;
}
.file-list td, .file-list th{
    font-size: 14px;
}
table.center{
    margin: 20px auto
}
.subtable{
    border-left: none;
    border-right: none;
    border-bottom: none;
    margin-top: 5px;
}
.subtable .ellipsis{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}
.chip{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 40px;
    flex: 0 0 auto;
    margin-right: 20px;
    font-weight: bold;
    font-size: 14px;
    color: #999;
}
.chip::before{
    position: absolute;
    content: "";
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border-radius: 2px;
    border: 2px solid #aaa;
    border-bottom-width: 6px;
    transform: translate(-50%, -50%);
    background: linear-gradient(45deg, transparent 90%, #aaa 90%);
    -webkit-mask: linear-gradient(45deg, black 90%, transparent 90%);
}
.red .chip{
    color: var(--color-danger);
}
.red .chip::before{
    border-color: var(--color-danger);
    background: linear-gradient(45deg, transparent 90%, var(--color-danger) 90%);
}
.green .chip{
    color: var(--color-success);
}
.green .chip::before{
    border-color: var(--color-success);
    background: linear-gradient(45deg, transparent 90%, var(--color-success) 90%);
}
.alert{
    background: #fcfca8;
    color: #725c00;
    border-radius: 5px;
    margin: 5px 10px;
    padding: 7px 10px;
    font-size: 12px;
}
.hidden{
    display: none;
}
.data-chart, .data-chart text{
    font-size: 12px;
    fill: var(--color-text);
}
.data-chart line.hr{
    stroke: var(--color-10-percent);
}
.data-chart #ticker{
    stroke: var(--color-text);
}
.data-chart line.vr{
    stroke: var(--color-text);
}
.bar-chart{
    border: 1px solid var(--color-border);
    border-radius: 10px;
    margin: 10px;
    padding: 5px;
    display: inline-block;
}
.bar-chart h6{
    width: 100%;
    text-align: center;
    font-weight: bold;
    display: block;
    padding: 5px;
    margin: 0;
}
.bar-chart-tooltip{
    position: absolute;
    border-radius: 10px;
    pointer-events: none;
    background: #fff;
    padding: 2px 5px;
    font-size: 10px !important;
    transform: translate(-50%, -50%);
    box-shadow: 0 2px 5px rgba(0,0,0,0.25);
    white-space: nowrap;
    color: #000;
}
.bar-chart text.tt{
    fill: var(--color-text);
}
.sticky-header{
    border-collapse: separate;
    border: none;
    border-left: 0.5px solid var(--color-border);
    border-top: 0.5px solid var(--color-border);
}
.sticky-header thead{
    position: sticky;
    top: 0;
    z-index: 1;
}
.sticky-header thead th,
.sticky-header tbody td,
.sticky-header tfoot th{
    border-bottom: 0.5px solid var(--color-border);
    border-right: 0.5px solid var(--color-border);
}
.box{
    border: 1px solid var(--color-border);
    padding: 25px;
    border-radius: 10px;
}
form > table{
    margin: 0
}
.box h2.sub{
    display: flex;
    gap: 10px;
}
.box h2.sub::before,
.box h2.sub::after{
    content: "";
    background: var(--color-10-percent);
    display: block;
    flex: 1;
}
.box h2.sub::before{ 
    width: 10px;
    flex: 0 0 10px;
}
.box iframe{
    display: block;
}
.login{
    display: flex;
    flex-direction: column;
}
input[type="submit"], .submit{
    background: #0055ff;
    color: #fff;
    border: none;
    border-radius: 5px;
    text-transform: uppercase;
    padding: 7px;
    margin-top: 10px;
    font-size: 12px;
}
input[type="submit"]:active{
    background: #004add;
}
.disabled{
    background-color: var(--color-10-percent);
    opacity: 0.5;
}
input[type="submit"]:disabled, .submit:disabled{
    background: var(--color-10-percent);
    cursor: wait;
}
.submit-inline{
    padding: 2px 8px; 
    margin: 0;
}
.login input[type="text"],
.login input[type="password"]{
    padding: 3px 5px;
}
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="tel"],
input[type="date"],
select,
textarea,
.filter-input,
.datatable-input{
    background: var(--background-color);
    border: 1px solid var(--color-border);
    border-radius: 2px;
    color: var(--color-text);
}
.datatable-input,
.filter-input{
    font-size: 14px;
    padding: 2px;
}
.field{
    margin-bottom: 5px;
}
label{
    text-transform: uppercase;
    font-size: 12px;
    display: inline-block;
}
label.regular{
    text-transform: none;
}
.login label{
    width: 100px;
}
.login .field input{
    min-width: 200px;
}
.message, .error{
    background: var(--color-danger);
    color: #fff;
}
.message{
    padding: 5px;
    text-align: center;
    margin-top: 10px;
    font-size: 12px;
}
.success{
    background: #72fc70;
    color: #004400
}
.error{
    border-radius: 10px;
    padding: 20px;
}
.error a{
    color: #fff
}
.error-outline{
    background: transparent;
    color: var(--color-danger);
    border: 2px solid var(--color-danger);
}
.nomargin{
    margin: 0;
}
.nomargin-bottom{
    margin-bottom: 0;
}
.nw{
    white-space: nowrap;
}
form[name="lead"] input:not([type="submit"]),
form[name="lead"] select{
    width: 100%;
    min-width: 200px;
    box-sizing: border-box;
}
button{
    background: var(--background-color);
    border: 1px solid var(--color-border);
    color: var(--color-text)
}
button.wait{
    position: relative;
    overflow: hidden;
    cursor: wait;
}
button.wait::before{
    content: "";
    position: absolute;
    inset: 0;
    /* <svg stroke="#555" fill="none" stroke-width="4" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="200px" width="200px" xmlns="http://www.w3.org/2000/svg"><path d="M21 12a9 9 0 1 1-6.219-8.56"></path></svg> */
    background: #ccc url("data:image/svg+xml;utf8,%3Csvg%20stroke%3D%22%23777%22%20fill%3D%22none%22%20stroke-width%3D%223%22%20viewBox%3D%220%200%2024%2024%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20height%3D%22200px%22%20width%3D%22200px%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M21%2012a9%209%200%201%201-6.219-8.56%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E") no-repeat center center;
    background-size: 20px 20px;
    z-index: 2;
    box-shadow: 0 0 0 50px #ccc;
    animation: rotate 1s linear infinite;
}
.actionButton{
    border: none;
    padding: 0;
    display: block;
    margin: 0 auto;
    background: transparent;
}
.actionButton svg{
    display: block;
}
@keyframes rotate{
    from{ transform: rotate(0deg)}
    to{ transform: rotate(360deg)}
}

.home{
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.home > div{
    max-width: 650px;
    width: 100%;
    margin: auto;
    padding: 20px;
    box-sizing: border-box
}
.home ul{
    display: flex;
    flex-wrap: wrap;
    margin: 20px 0;
    gap: 1px;
}
.home li{
    flex: 0 1 200px;
}
.home li a{
    font-size: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    justify-content: center;
    margin: 0;
    /* padding: 20px; */
    box-sizing: border-box;
    aspect-ratio: 1;
    background: var(--color-10-percent);
    color: var(--color-text);
    height: 200px;
}
.home li a:hover{
    box-shadow: inset 0 0 0 100px rgba(0,0,0,0.05);
}
.home li a svg{
    width: 60px;
    height: 60px;
}
.badge-1{
    font-size: 12px;
    border: 1px solid var(--color-border);
    border-radius: 3px;
    padding: 3px 5px;
    display: inline-block;
    margin: 2px;
}

.etc p{
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
}
.uc{
    text-transform: uppercase;
}
.tag{
    border: 1px solid #ccc;
    border-radius: 20px;
    padding: 3px 10px 3px 5px;
    margin: 2px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.tag.inline{
    padding: 0 5px 0 2px;
}
.tag.uc{
    font-weight: bold;
    letter-spacing: 0.5px;
    font-size: 10px;
}
.tag::before{
    content: "";
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ccc;
    display: inline-block
}
.tag.ok, .tag.success{
    border-color: green;
    color: green;
    background-color: transparent
}
.tag.ok::before, .tag.success::before{
    background: green;
}
.tag.fail{
    border-color: var(--color-danger);
    color: var(--color-danger);
    font-weight: bold;
}
.tag.fail::before{
    background: var(--color-danger);
}
.progress{
    padding-right: 10px !important;
}
.progress span{
    width: 50px;
    background: #fff;
    height: 3px;
    position: relative;
    border-radius: 5px;
    padding: 1px;
    overflow: hidden;
}
.progress em{
    background: #999;
    height: 100%;
    display: block;
    border-radius: 5px;
}
.progress.fail{
    background: var(--color-danger);
    color: #fff;
}
.progress.fail em{
    background: var(--color-danger);
}
.popup{
    position: fixed;
    inset: 0;
    background: var(--background-overlay);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: opacity 0.3s ease
}
.popup > div{
    background: #fff;
    border-radius: 10px;
    box-shadow: 0px 10px 20px rgba(0,0,0,0.2);
    padding: 20px;
}
@keyframes opacity{
    from{ opacity: 0}
    to{ opacity: 1}
}

#theme{
    position: fixed;
    left: 10px;
    bottom: 10px;
    border: none;
    background: var(--background-color);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    padding: 7px;
    z-index: 99;
    color: var(--color-text);
}
#theme svg{
    width: 100%;
    height: 100%;
    view-transition-name: theme;
    display: block;
}
#theme svg .dark-mode, #theme svg .light-mode{
    display: none
}
.dark #theme svg .light-mode, .light #theme svg .dark-mode{
    display: block
}
@keyframes move-down{
    from{ transform: translateY(0); opacity: 1 }
    to{ transform: translateY(100%); opacity: 0 }
}
@keyframes move-up{
    from{ transform: translateY(100%); opacity: 0 }
    to{ transform: translateY(0); opacity: 1 }
}
::view-transition-old(theme)
{
    animation: move-down 0.20s ease-in;
}
::view-transition-new(theme)
{
   animation: move-up 0.20s ease-in;
}

.toggle-check{
    display: none;
}
.toggle{
    text-align: center;
}
.toggle input{
    display: none
}
.toggle em{
    background: var(--color-10-percent);
    border-radius: 50px;
    width: 50px;
    height: 25px;
    display: block;
    margin-bottom: 5px;
    padding: 3px;
    transition: background 0.3s ease;
}
.toggle-small em{
    width: 25px;
    height: 12px;
}
.toggle-check:checked + label em{
    background: royalblue;
}
.toggle-check:checked + label em::before{
    transform: translateX(100%);
    background: #fff;
}
.toggle em::before{
    content: "";
    width: 25px;
    height: 25px;
    display: block;
    border-radius: 50px;
    background: var(--background-color);
    display: block;
    transition: transform 0.3s ease
}
.toggle-small em::before{
    width: 12px;
    height: 12px;
}
.gap5{
    gap: 5px;
}
.gap10{
    gap: 10px;
}
.gap20{
    gap: 20px;
}
.itemscenter{
    align-items: center
}
.center{
    text-align: center;
}
.datatable th button{
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    color: inherit;
    cursor: pointer;
    font-weight: bold;
}
.datatable-search{
    text-align: right;
}
.container__tooltip{
    color: #000;
}
.ident-10{
    padding-left: 10px;
}
.ident-20{
    padding-left: 20px;
}