/* Import Styles */
@import url('reset.css');
@import url('base.css');
@import url('typography.css');
@import url('color.css');
@import url('component.css');

/* Variable */
:root{

    /* Sidebar */
    --sidebar-width:37rem;

}
@media(width < 1200px){
    :root{

        /* Sidebar */
        --sidebar-width:30rem;
    
    }
}

/* Body */
body{overflow: hidden;}

/* Wrapper */
.wrapper{background-color: var(--color1); display: grid; grid-template-columns: auto 1fr;}
@media(width < 992px){
    .wrapper{grid-template-columns: 1fr;}   
}

/* Sidebar */
aside{width: var(--sidebar-width); background-color: var(--color2); height: 100dvh; transition: var(--transition); position: relative; z-index: 99;}
aside .sidebar-block{padding: var(--gutter) 0; padding-left: var(--gutter); padding-right: var(--gutter);}
aside .sidebar-block:not(:last-child){border-bottom: .1rem solid var(--border-color);}
.sidebar-row{padding: var(--gutter) 0;}
.sidebar-row:first-child{padding-top: 0;}
.sidebar-row:last-child{padding-bottom: 0;}
.sidebar-row:not(:last-child){border-bottom: .1rem solid var(--border-color);}
aside .sidebar-toggle{position: absolute; left: 100%; top: 0;}
@media(width > 991px){
    .sidebar-backdrop.active{display: none !important;}
    aside{position: relative;}
    aside{margin-left: calc(var(--sidebar-width) * -1); transform: translateX(0);}
    aside.sidebar-active{margin-left: 0;}
}
@media(width < 992px){
    aside{transform: translateX(-100%); position: fixed; left: 0; top: 0; z-index: 99999;}
    aside.sidebar-active{transform: translateX(0);}
}

/* Main */
main{height: 100dvh; padding: calc(var(--gutter) + 1.5rem) 0;}

/* Container */
.container, .container-fluid{padding-left: var(--gutter); padding-right: var(--gutter);}
.container{width: 100%; max-width: 95rem;}

/* Overlay */
.backdrop{position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,80%); transition: var(--transition); z-index: 9999; opacity: 0; visibility: hidden; pointer-events: none;}
.backdrop.active{opacity: 1; visibility: visible; pointer-events: auto;}

/* Logo */
.logo img{max-width: 20rem;}
@media(width < 1200px){
    .logo img{max-width: 14rem;}
}

/* Forms */
.form-box{border: .1rem solid var(--border-color); padding: var(--gutter-half); border-radius: var(--border-radius); background-color: var(--color4);}
.form-label:not(:last-child), .form-control:not(:last-child){margin-bottom: .5rem;}
.form-info{font-size: 1rem;}
.form-item:not(:last-child){margin-bottom: var(--gutter-half);}

main .sidebar-toggle{position: absolute; left: 0; top: 0; z-index: 100000;}



.mt-10{margin-top: 10px;}

.btn:hover {
    border: 1px solid #0a58ca !important;
}

select:hover{
    border: 1px solid #0a58ca !important;
}

input:hover{
    border: 1px solid #0a58ca !important;
}

.fs-lg{
    font-size: 1.6rem;
}

#homeload {
    width: 100%;
    height: 100%;
    position: absolute;
    text-align: center;
    z-index: 9999;
    background: url(/static/assets/images/loading.svg) no-repeat center center rgba(0, 0, 0, 0.25);
}