@charset "UTF-8";
nav{
    position:fixed;
    bottom:-100%;
    transition:bottom 0.3s ease;
    display:grid;
    grid-template-columns:repeat(5, 1fr);
    z-index:var(--zeta-index-3);

    & a{
        height:100%;
        display:flex;
        align-items:center;
        justify-content:center;
        text-decoration:none;
        color:#676B84;

        & span{
            margin-top:.75rem;
            display:inline-block;
            font-size:1.75rem;
        }

        &:nth-child(3){
            background-color:var(--primary-color);
            color:#fff;
        }
    }
}

#sidenav{
    padding:1rem;
    height:100vh;
    width:var(--sidenav);
    background-color:var(--light-color);
    overflow-y:auto;
    position:fixed;
    top:0;
    left:0;
    z-index:var(--zeta-index-1);
    transition:0.3s ease-in-out;

    & #sidenavHidden{
        margin-bottom:.75rem;
        display:none;
    }

    & picture{
        padding:2rem 1rem;
        display:block;

        & img{
            object-fit:contain;
            object-position:center;
        }
    }

    & menu{
        margin:0;
        padding:0;
        display:block;
        list-style-type:none;

        & li{
            & a{
                width:100%;
                height:50px;
                display:flex;
                align-items:center;
                font-weight:400;
                text-decoration:none;
                color:#676B84;
                text-transform:capitalize;
                position:relative;

                & span{
                    display:inline-flex;
                    width:50px;
                    align-items:center;
                    justify-content:center;
                    font-size:1.5rem;
                    color:var(--zeta-theme-color-text);
                }

                /*&::before{
                    content:"\f131";
                    display:inline-flex;
                    width:50px;
                    height:50px;
                    align-items:center;
                    justify-content:center;
                    font-family:uicons-regular-rounded;
                    font-size:1rem;
                    position:absolute;
                    top:0;
                    right:.5rem;
                }*/
            }
        }
    }

    & form{
        & .form-control{
            background-color:#fff;
        }
    }

    & #btnLogout{ margin-top:1rem; }
}

main{
    padding-left:var(--sidenav);
    height:fit-content;
    min-height:100vh;

    & h1{
        margin-bottom:0;
    }
}

table{
    margin-bottom:1rem;
    width:calc(100% - 1px);
    display:table;
    color:var(--dark-color);
    vertical-align:top;
    border:1px solid var(--light-color);
    caption-side:bottom;
    border-collapse:collapse;
    

    & thead{
        vertical-align:bottom;

        & th{
            padding:.75rem;
            font-weight:450;
            text-transform:capitalize;
            vertical-align:top;
        }
    }

    & tbody{
        & td{
            padding:.75rem;
            font-weight:350;
            color:#676B84;
            vertical-align:middle;

            & .button{
                & span{
                    margin-left:0;
                }
            }
        }
    }
}

details{
    padding:0 1.5rem;
    border:1px solid var(--light-color);
    border-bottom:0;
    color:var(--dark-color);
    font-weight:450;

    & summary{
        padding:2rem 0;
        padding-right:2rem;
        position:relative;
        transition:margin 150ms ease-out;

        &::marker{
            content:none;
        }

        &::before{
            content:"\f87e";
            display:block;
            font-family:uicons-regular-rounded;
            font-size:2rem;
            font-weight:500;
            position: absolute;
            top:50%;
            right:0;
            transform:translateY(-50%);
            color:var(--primary-color);
        }
    }

    /*& summary::marker,
    &:is(::-webkit-details-marker){
        content:"\f745";
        display:block;
        font-family:uicons-regular-rounded;
        font-size:1.5rem;
        font-weight:600;
    }*/

    &[open]{
        padding-bottom:2rem;

        & summary{
            margin-bottom:1rem;

            &::before{
                content:"\f879";
            }
        }
    }

    &:first-child{
        border-top-left-radius:8px;
        border-top-right-radius:8px;
    }

    &:last-child{
        border-bottom:1px solid var(--light-color);
        border-bottom-left-radius:8px;
        border-bottom-right-radius:8px;
    }
}

.accord{
    margin:2rem 0;
}

.buttons{
    & > a{
        height:150px;
        display:flex;
        align-items:center;
        justify-content:center;
        border-radius:8px;
        border:1px solid #efefef;
    }
}

/*.multi-pages{
    & > section{
        display:none;

        &.active{
            display:block;
        }
    }
}*/

.breadcrumb{
    margin:.75rem 0;
    padding:1rem;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    background-color:var(--light-color);
    border-radius:8px;
    font-weight:400;
    color:#676B84;

    & > i{
        margin:0 0.5rem;
        display:inline-block;
        line-height:0;
    }

    & > a{
        width:fit-content;
        text-decoration:none;
        color:inherit;
    }

    & span{
        &:last-child{
            font-weight:600;
            color:var(--dark-color);
        }
    }
}

@media(max-width:991px){
    nav{
        bottom:0;
    }

    #sidenav{
        left:-100%;

        & #sidenavHidden{
            display:inline-flex;
        }
    }

    main{
        padding-left:0;
        padding-bottom:var(--navigation-h-1);
    }
}

@media(max-width:767px){
    /*table{
        border:0;

        & thead{
            margin:-1px;
            padding:0;
            width:1px;
            height:1px;
            border:none;
            clip:rect(0 0 0 0);
            overflow:hidden;
            position:absolute;
        }

        & tbody{
            display:grid;
            grid-template-columns:repeat(2, 1fr);
            gap:.75rem;
        }

        & tr{
            display:block;
            border:1px solid var(--light-color);
            border-radius:8px;

            &:last-child{
                margin-bottom:0;
            }

            & td{
                border:0;
                display:block;
                font-size:.85rem;
                text-align:right;

                &::before{
                    content:attr(data-label);
                    color:var(--dark-color);
                    font-weight:450;
                    float:left;
                }

                &:last-child{
                    border-bottom:0;
                }

                &.not-label{
                    text-align:left;
                }
            }
        }
    }*/
}

@media(max-width:575px){
    /*table{
        & tbody{
            grid-template-columns:repeat(1, 1fr);
        }
    }*/
}