@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

*{
    font-family: "Poppins", sans-serif !important;
}

:root {
    --black: #191A19;
    --dark-green: #125C13;
    --green: #15A362;
    --blue: #03a9f4;
    --light-green: #D8E9A8;
    --transparent: rgba(21,163,98,0.4);
    --transparent-green: #44B581;
    --christmas: #002e4e;
  }

.bg-theme{
    background-color: var(--christmas);
}

.ssi{
    opacity:.97 !important;
}

.fs-sm{
    font-size:.8em;
}

/* Employees */
#employeeTablesDiv{
    padding:10px;
}
.modal-nav:hover{
    cursor: pointer;
}

/* Override */
.app-card-account{
    height:auto !important;
}

.bg-signup{
    background-image: url('/names/src/assets/images/background/background-1.jpg'); 
    background-size:cover;
    background-repeat: repeat-y;
}

.app-sidepanel, .app-branding, .app-nav-main, .nav-item, .app-header{
    background-color: var(--christmas) !important;
    /* background: rgb(20,115,38);
    background: linear-gradient(90deg, rgba(20,115,38,1) 0%, rgba(21,163,98,1) 34%, rgba(68,181,129,1) 100%); */
}

.app-sidepanel .sidepanel-inner{
    background-color: var(--christmas) !important;
    /* background: rgb(20,115,38);
    background: linear-gradient(90deg, rgba(20,115,38,1) 0%, rgba(21,163,98,1) 34%, rgba(68,181,129,1) 100%); */
}

.nav-link, .logo-text, .app-utility-item>a:hover{
    color: white !important;
}

.nav-link:hover{
    color: var(--light-green) !important;
}



.content{
    /* border: 20px solid var(--transparent) !important; */
    background:rgba(20,20,20,0.13);
    box-shadow: 0 5px 45px rgba(0,0,0,0.15) !important;
    padding:15px;
    border-radius: 15px;
}

/* Employee Modal */
.modal-nav{
    color:black !important;
}

/* Nav-2 */
.nav-2{
    color:black !important;
}

input.disabled, textarea.disabled, select.disabled{
    background-color: white !important;
    padding:0px;
    border:none;
}

.app-nav .submenu-link{
    color:#ddd !important;
}
.app-nav .submenu-link:hover{
    color: #999 !important;
}

.app-nav-tabs .nav-link.active:hover{
    color: #999 !important;
}

.app-nav-tabs .nav-link:hover{
    color: #999 !important;
}

.intro{
    font-size:.8em;
}

.bg-theme{
    background-color:  var(--christmas);
    color:white !important;
    border:none;
}

.color-theme{
    color: #eebf41;
}

.cs-shadow{
    box-shadow: 0 5px 45px rgba(0,0,0,0.15) !important;
}


.app-content, body, body.app{
    /* background-color: var(--light-green); */
    background-image: url("/names/src/assets/images/ricefield.jpg");
    background-size:cover;
    background-attachment: fixed;
    /* background-color: #020202;
   */
}
.hvr-backward{
    display:inline-block;
    vertical-align:middle;
    -webkit-transform:perspective(1px) translateZ(0);transform:perspective(1px) translateZ(0);
    box-shadow:0 0 1px rgba(0,0,0,0);
    -webkit-transition-duration:.3s;
    transition-duration:.3s;
    -webkit-transition-property:transform;
    transition-property:transform;
}
.hvr-backward:active,.hvr-backward:focus,.hvr-backward:hover{
    -webkit-transform:translateX(-8px);
    transform:translateX(-8px);
}

.page-link{
    cursor:pointer;
}

.app-nav .nav-link.active{
    background-color: rgba(0,0,0,0.2);
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
    border:none;
    color:white !important;
}

.app-nav .nav-link:hover{
    color:rgba(255,255,255,0.8) !important;
}

.app-nav .submenu-link.sub_active{
    color:white !important;
    border:none;
    background-color: rgba(0,0,0,0.2);
}
.app-nav .submenu-link:hover{
    color:white !important;
}

#systemLogsDiv, #systemAnalyticsDiv, #systemRolesDiv{
    padding:10px;
}

.list-group-item{
    cursor:pointer;
}

.access-card{
    border: 15px solid rgba(0,0,0,0.10);
}

#directoryTable:hover{
    cursor:pointer;
}

.profilePic{
    border-radius:50%;
    border: 2px solid #70BA03;
}



@media (max-width: 991px){
    .content{
        /* border: 20px solid var(--transparent) !important; */
        box-shadow: 0 5px 5px rgba(0,0,0,0.15) !important;
        padding:0px;
    }

    .container, .container-fluid, .container-xxl, .container-xl, .container-lg, .container-md, .container-sm{
        --bs-gutter-x:1rem;
    }
    
    a#sidepanel-toggler.sidepanel-toggler.d-inline-block.d-xl-none{
        color: white;
    }
}