:root {
    --animation-time: 300ms;
    --topbar-height: 48px;
    --sidebar-width: 200px;
}

:root:has(#dark:checked) {
    --background-color: #02020a;
    --color: #fff;
    --link: #69afe5;
    --table-bg: #11161d;
    --input-border: #3a3a3a;
    --menu-icon: #ff4614;
    --logo-url: url(/images/logo-dark.png);
    --sidebar-bg: #161b22;
    --sidebar-color: #fff;
    --sidebar-hover: #040810;
}

:root:not(:has(#dark:checked)) {
    --background-color: #fff;
    --color: #323232;
    --link: #2982c7;
    --table-bg: #F2F2FF;
    --input-border: #3a3a3a;
    --menu-icon: #ff4614;
    --logo-url: url(/images/logo-lite.png);
    --sidebar-bg: #e8e8f8;
    --sidebar-color: #191919;
    --sidebar-hover: #d2d2f0;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/*---------- Begin Elements -----------------------------*/
body {
    font-family: 'Open Sans', Verdana, sans-serif;
    background-color: var(--background-color);
    color: var(--color);
    margin: 0;
    padding: 0;
}

.hidden-scrollbar::-webkit-scrollbar {
    display: none;
}

h1 {
    margin: 20px 0;
}

a:link,
a:visited {
    color: var(--link);
    text-decoration: none;
}

a:hover {
    color: var(--link);
    text-decoration: underline;
}

img {
    margin: 0 3px;
    border-radius: 3px;
    max-width: 90%;
}

/*---------- End Elements -------------------------------*/

/*---------- Begin Main ---------------------------------*/
.myTable {
    background-color: var(--table-bg);
    border-radius: 10px;
    /* overflow: hidden; */
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    text-align: left;
}

.myTable td, th {
    padding: 10px;
}

.myTable th:first-child {
    border-top-left-radius: 10px;
}

.myTable th:last-child {
    border-top-right-radius: 10px;
}

.myTable tr:last-child td:first-child {
    border-bottom-left-radius: 10px;
}

.myTable tr:last-child td:last-child {
    border-bottom-right-radius: 10px;
}

.myTable thead {
    background-color: var(--sidebar-bg);
    height: 60px;
}

.myTable tbody tr {
    transition: all var(--animation-time);
}

.myTable tbody tr:hover {
    background-color: var(--sidebar-hover);
}

.myTable .available {
    height: 30px;
}

.myTable .not-available {
    height: 30px;
    filter: grayscale(100%);
    cursor: not-allowed;
}

.myTable .copy {
    cursor: pointer;
}

.myTable .expires {
    color: var(--menu-icon);
}

.myTable .ultimo-filtrado td:first-child {
    /*background-color: green;*/
    border-bottom-left-radius: 10px;
}

.myTable .ultimo-filtrado td:last-child {
    /*background-color: green;*/
    border-bottom-right-radius: 10px;
}

.myTable .cerrado {
    display: none;
}

#logo {
    background-image: var(--logo-url);
    background-repeat: no-repeat;
    background-position: 11px;
    height: 60px;
    width: 200px;
    position: fixed;
    bottom: 20px;
}

#login-logo {
    background-image: var(--logo-url);
    background-repeat: no-repeat;
    background-position: 11px;
    height: 60px;
    width: 200px;
}

#goToTop {
    font-size: 24px;
    color: var(--menu-icon);
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 0;
    cursor: pointer;
    border: none;
    background-color: transparent;
    opacity: 0;
    pointer-events: none;
    transition: all var(--animation-time);
    z-index: 10;
}

.fa {
    color: var(--menu-icon);
}

.legend {
    background-color: var(--table-bg);
    border-radius: 10px;
    margin-top: 20px;
    padding: 10px;
}

/*---------- End Main -----------------------------------*/

/*---------- Begin sorttable ----------------------------*/
#sorttable_sortfwdind,
#sorttable_sortrevind {
    color: var(--menu-icon);
}

/*---------- End sorttable ------------------------------*/

/*---------- Begin scheduled ----------------------------*/
.tooltip {
    display: none;
    border: 2px solid var(--color);
    border-radius: 8px;
    padding: 0 24px;
    background-color: var(--background-color);
    position: absolute;
    width: 120px;
    bottom: 26px;
    left: -70px;
    z-index: 10;
    text-align: left;
}

.tooltip::before {
    content: '';
    position: absolute;
    left: 50%;                  /* centra el borde */
    transform: translateX(-50%);
    bottom: -13px;              /* justo debajo del tooltip */
    border-left: 13px solid transparent;
    border-right: 13px solid transparent;
    border-top: 13px solid var(--color); /* borde igual al tooltip */
    z-index: 9;
}

.tooltip::after {
    content: '';
    position: absolute;
    left: 50%;                  /* centra el triángulo */
    transform: translateX(-50%);
    bottom: -10px;
    border-left: 14px solid transparent;
    border-right: 14px solid transparent;
    border-top: 14px solid var(--background-color); /* mismo fondo del tooltip */
    z-index: 10;
}

.tooltipbox {
    position: relative;
}

.tooltipbox:hover .tooltip {
    display: block;
}

/*---------- End scheduled ------------------------------*/

/*---------- Begin Responsive ---------------------------*/
@media only screen and (max-width: 1024px) {

    h1,
    h2 {
        text-align: center;
    }

    #quantity {
        text-align: center;
    }

    .myTable {
        background-color: transparent;
        border-spacing: 0 20px;
        margin-top: -20px;
        margin-bottom: -20px;
        /*  contraresta el spacing */
    }

    .myTable td:first-child {
        border-radius: 10px 10px 0 0;
        background-color: var(--table-bg);
        padding-top: 20px;
    }

    .myTable td:last-child {
        border-radius: 0 0 10px 10px;
        background-color: var(--table-bg);
        padding-bottom: 20px;
    }

    .myTable td:not(:first-child):not(:last-child) {
        background-color: var(--table-bg);
    }

    .myTable tr:hover {
        background-color: var(--background-color) !important;
    }

    .myTable tr:hover td {
        background-color: var(--sidebar-hover) !important;
    }

    .myTable thead {
        display: none;
    }

    .myTable td {
        display: block;
        text-align: center;
    }

    .myTable td[data-cell="name"],
    td[data-cell="company"] {
        font-weight: bold;
    }

    .myTable tr:last-child td:first-child {
        border-bottom-left-radius: initial;
    }

    .myTable .ultimo-filtrado td:first-child {
        border-bottom-left-radius: initial;
    }
}

@media only screen and (max-width: 720px) {
    h1 {
        font-size: 24px;
    }

    h2 {
        font-size: 16px;
    }
    .tooltipbox {
        pointer-events: none;
    }
}

/*---------- End Responsive -----------------------------*/.sample {display:none;}