@charset "UTF-8";
nav{
    width:var(--nav-width);
    height:100vh;
    position:fixed;
    top:0;
    left:0;
    background-color:var(--gamma-dark-purple);
    z-index:var(--zeta-index-1);
    transition:width 0.1s ease-in-out,left 0.1s ease-in-out;
    overflow-y:auto;
    overflow-x:hidden;
}

nav::-webkit-scrollbar{
    width:2px;
}

nav::-webkit-scrollbar-track{
    background-color:transparent;
}

nav::-webkit-scrollbar-thumb{
    background-color:rgba(0,0,0,0.35);
}

/* nav::-webkit-scrollbar-thumb:hover{} */

nav #navigationLockSize{
    padding:0;
    display:flex;
    width:var(--nav-minified-width);
    height:calc(var(--nav-minified-width) - 1rem);
    align-items:center;
    justify-content:center;
    position:absolute;
    top:0;
    right:0;
    background-color:transparent;
    border:0;
    border-radius:0;
    transform:rotateZ(180deg);
    transition:transform 0.3s ease-in-out, top 0.1s ease-in-out;
}

nav #navigationLockSize::before{
    background-color:transparent;
}

nav #navigationLockSize span{
    line-height:0;
    font-size:1.5rem;
    color:var(--gamma-process-cyan);
}

nav figure{
    margin-top:calc(var(--nav-minified-width) - 1rem);
    transition:all 0.1s ease-in-out;
}

nav figure img{
    display:inline-block;
    transition:all 0.1s ease-in-out;
}

nav ul{
    width:100%;
    margin:1rem 0 0 0;
    padding:0;
    height:auto;
    list-style-type:none;
}

nav ul li{
    display:block;
    height:calc(var(--nav-minified-width) - 1rem);
}

nav ul li a{
    display:flex;
    height:inherit;
    align-items:center;
    color:#fff;
    text-decoration:none;
    transition:background-color 0.3s ease-in-out;
}

nav ul li a:hover,
nav ul li a:focus,
nav ul li a:active{
    background-color:rgba(0,0,0,0.35);
    color:#fff;    
}

nav ul li a b{
    display:inline-block;
    width:auto;
    opacity:1;
    visibility:visible;
    transition:all 0.1s ease-in-out;
}

nav ul li a span{
    display:inline-flex;
    width:var(--nav-minified-width);
    height:inherit;
    align-items:center;
    justify-content:center;
    font-size:1.5rem;
    color:var(--gamma-slate-blue);
    transition:color 0.3s ease-in-out;
}

nav ul li a:hover span,
nav ul li a:focus span,
nav ul li a:active span{
    color:#fff;
}

nav ul li.current a{
    background-color:rgba(0,0,0,0.35);
}

nav ul li.current a span{
    color:var(--gamma-mexican-pink);
}

nav.minified{
    width:var(--nav-minified-width);
}

nav.minified #navigationLockSize{
    transform:rotateZ(0deg);
}

nav.minified figure img{
    margin-left:0.46rem;
    width:160px;
}

nav.minified ul li a b{
    opacity:0;
    visibility:hidden;
    width:0;
}

nav.minified ~ header,
nav.minified ~ main,
nav.minified ~ footer{
    padding-left:var(--nav-minified-width);
}

nav.visible{
    left:0;
}

#btnNavigation{
    width:60px;
    height:60px;
    display:none;
    border-radius:50%;
    position:fixed;
    top:15px;
    right:0.5rem;
    z-index:var(--zeta-index-1);

    & > span{
        margin-top:0.25rem;
        margin-left:0;
        font-size:2rem;
    }

    &::before{
        width:100%;
        top:0;
        left:0;
        transform:scale(0);
        transition:transform 0.3s ease-in-out;
    }

    &:hover::before,
    &:focus::before,
    &:active::before{
        transform:scale(1);
    }
}

header,main,footer{
    padding-left:var(--nav-width);
    transition:padding 0.2s ease-in-out;
}

header{
    display:flex;
    align-items:center;
    height:var(--header-height);
    position:fixed;
    top:0;
    right:0;
    background-color:#fff;
    box-shadow:0px 4px 40px rgba(39, 32, 120, 0.1);
    z-index:var(--zeta-index-0);

    & h2{
        margin-bottom:0;
        font-weight:700;
    }

    & p.breadcrumb{
        margin-bottom:0;
        display:flex;
        align-items:center;

        & span{
            margin-right:0.4rem;
            font-size:1.3rem;
            line-height:0;
            color:var(--gamma-mexican-pink);
        }
    }
}

main{
    margin-top:var(--header-height);
    background-color:#f4f7f9;
    height:auto;
    min-height:calc(100vh - var(--header-height));
    overflow-x:hidden;
}

footer{
    padding-top:1rem;
    padding-bottom:1rem;
    height:auto;
    background-color:#fff;
    box-shadow:0 0 20px rgba(89, 102, 122, 0.1);
}

footer p{
    margin-bottom:0;
    font-weight:600;
    font-size:0.8rem;
}

figure{
    margin:0;
    padding:0;
}

p > a{
    text-decoration:none;
    color:var(--gamma-mexican-pink);
}

table{
    width:100%;
    background-color:#fff;
    /*table-layout:fixed;*/
}

/*table tbody{}*/

table tbody tr{
    --delete-width:0;
    --delete-visibility:hidden;
    --delete-opacity:0;

    border-bottom:1px solid #eee;
    cursor:pointer;
    position:relative;
    z-index:0;
}

table tbody tr::before,
table tbody tr::after{
    height:calc(100% + 1px);
    position:absolute;
    top:0;
}

table tbody tr::before{
    content:"";
    display:block;
    width:100%;
    left:0;
    background-color:#eee;
    z-index:-1;
    transform:scaleX(0);
    transition:transform 0.2s ease-in-out;
}

table tbody tr::after{
    content:"\f952";
    display:flex;
    width:var(--delete-width);
    visibility:var(--delete-visibility);
    opacity:var(--delete-opacity);
    background-color:var(--gamma-mexican-pink);
    right:0;
    font-family:"uicons-regular-rounded";
    font-size:1.8rem;
    color:#fff;
    text-align:center;
    align-items:center;
    justify-content:center;
    z-index:1;
    transition:all 0.2s ease-in-out;
}

table tbody tr:active::before{
    transform:scaleX(1);
}

table tbody tr:last-child{
    border-bottom:0;
}

table thead tr th,
table tbody tr td{
    width:auto;
    height:60px;
    display:table-cell;
    vertical-align:middle;
    word-break: break-word;
    font-weight:600;
    position:relative;
}

table tbody tr td{
    color:var(--zeta-theme-color-text);
}

table tbody tr.disabled td{
    color:var(--gamma-cadet-gray);
}

table tbody tr td .checkbox{
    margin-right:0.5rem;
    display:flex;
    float:right;
}

table tbody tr td figure{
    width:80px;
    height:80px;
}

table tbody tr td figure img{
    object-fit:contain;
    object-position:center;
    width:100%;
    height:100%;
    mix-blend-mode:color-burn;
}

table tbody tr td figure img.cover{
    object-fit:cover;
}

table tbody tr td > span[class^="fi-rr"]{
    margin-top:8px;
    font-size:1.5rem;
    color:var(--gamma-dark-purple);
}

table tbody tr.disabled td > span[class^="fi-rr"]{
    color:var(--gamma-cadet-gray);
}

main section{
    display:none;
}

main section.active{
    display:block;
}

#barMenu{
    margin:0;
    padding:0;
    width:100%;
    height:var(--nav-minified-width);
    list-style-type:none;
    display:flex;
    justify-content:space-between;
    align-items:center;
    background-color:var(--gamma-dark-purple);
    box-shadow:0px 4px 40px rgba(39, 32, 120, 0.1);
    transition:padding 0.2s ease-in-out;
}

#barMenu li{
    display:block;
    height:inherit;
    flex-grow:1;
}

#barMenu li a{
    padding:0 1rem;
    width:100%;
    height:100%;
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:center;
    row-gap:0.25rem;
    background-color:var(--gamma-dark-purple);
    text-decoration:none;
    transition:background-color 0.3s ease-in-out;
}

#barMenu li.active a{
    background-color:var(--gamma-mexican-pink);
}

#barMenu li a:active{
    background-color:rgba(0,0,0,0.25);
}

#barMenu li a p{
    margin-bottom:0;
    width:auto;
    font-weight:600;
    color:#fff;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    text-align:center;
}

#barMenu li a span{
    display:inline-block;
    margin-right:0.5rem;
    font-size:1.5rem;
    line-height:0;
    color:#fff;
}

#barMenu.items-2 li{
    width:calc(100%/2);
}

#barMenu.items-3 li{
    width:calc(100%/3);
}

#barMenu.items-4 li{
    width:calc(100%/4);
}

#barMenu.items-5 li{
    width:calc(100%/5);
}

#chart{
    display:inline-block;
    position:relative;
    width:100%;
}

#scanner{
    & video{
        width:100%;
        height:100vh;
        object-fit:cover;
    }
}

.box{
    padding:1rem;
    width:100%;
    height:auto;
    background-color:#fff;
    border:1px solid #eee;
}

.box.icon span{
    font-size:3rem;
    color:var(--gamma-mexican-pink);
}

.box.icon h2,
.box.icon p{
    margin-bottom:0;
}

.box.icon p{
    font-weight:600;
}

.grid-media fieldset input[type="checkbox"],
.grid-media fieldset input[type="radio"]{
    display:none;
}

.grid-media fieldset figure{
    max-width:100%;
    height:180px;
    overflow:hidden;
    cursor:pointer;
    position:relative;
}

.grid-media fieldset figure::after{
    content:"\f2dc";
    display:none;
    width:30px;
    height:30px;
    border-radius:50%;
    background-color:var(--gamma-slate-blue);
    font-family:'uicons-regular-rounded'!important;
    font-size:1.25rem;
    color:#fff;
    position:absolute;
    bottom:0.5rem;
    right:0.5rem;
}

.grid-media fieldset figure img{
    object-fit:cover;
    object-position:center;
    width:100%;
    height:100%;
    transition:transform 0.5s ease-in;
}

.grid-media fieldset figure img:hover{
    transform:scale(1.15)
}

.grid-media fieldset.active figure::after{
    display:flex;
    align-items:center;
    justify-content:center;
}

.eyedropper{
    margin-top:8px;
    width:30px;
    height:30px;
    display:inline-block;
    border-radius:50%;
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center;
}

.alert{
    height:auto;
    display:flex;
    flex-flow:row wrap;
    align-items:center;

    & figure{
        width:auto;

        & img{
            width:100px;
        }
    }

    & .alert-content{
        margin-left:25px;
        width:calc(100% - 150px);

        & h2{
            margin-bottom:0;
            font-weight:700;
            color:var(--gamma-dark-purple);
        }

        & p{
            margin-bottom:0;
        }
    }
}

#carouselCodes figure{
    height:400px;
    display:flex;
    align-items:center;
    justify-content:center;
}

#carouselCodes figure > img {
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center;
}

.paginator{
    margin-top:.75rem;
    display:flex;
    justify-content:center;
    align-items:center;

    & select{
        width:100px;
        background-color:#fff;
        border-radius:0;
        text-align:center;
    }

    & .button{
        border-radius:0;
    }
}

@media(max-width:1199px){
    footer .right-align{
        text-align:left;
    }
}

@media(max-width:991px){
    nav #navigationLockSize{
        top:-100%;
    }

    nav figure{
        margin-top:1.25rem;
    }
}

@media(max-width:767px){
    #barMenu li a{
        padding:0 0.5rem;
    }

    .alert{
        justify-content:center;

        & .alert-content{
            margin-top:1rem;
            margin-left:0;
            width:100%;
            text-align:center;
        }
    }
}

@media(max-width:575px){
    nav{
        left:-100%;
    }

    #btnNavigation{
        display:flex;
    }

    header,main,footer,
    nav.minified ~ header,
    nav.minified ~ main,
    nav.minified ~ footer{
        padding-left:0;
    }

    nav.visible ~ header,
    nav.visible ~ main,
    nav.visible ~ main > #barMenu,
    nav.visible ~ footer{
        padding-left:var(--nav-minified-width);
    }

    main:has(#barMenu){
        padding-bottom:var(--nav-minified-width);
    }

    #barMenu{
        position:fixed;
        bottom:0;
        left:0;
        z-index:var(--zeta-index-0);
    }

    #barMenu li a{
        padding:0 0.25rem;
        flex-direction:column;
    }

    #barMenu li a p{
        width:100%;
        min-width:0;
        font-size:0.8rem;
    }

    #barMenu li a span{
        margin-top:1rem;
        margin-bottom:0.5rem;
        margin-right:0;
    }
}