/*
    Layout
*/

.pb-10{
    padding-bottom:10px;
}
.pb-15 {
    padding-bottom: 15px;
}
.pb-20 {
    padding-bottom: 20px;
}



/*
    Body
*/
.wrapper {
    display: flex;
    background-color: rgb(248 249 250);
    
}

.body {
    width: calc(100% - 300px);
    margin-left: 30px;
    padding: 15px;
    background-color: rgb(248 249 250);
    display: flex;
    flex-wrap: wrap;
    min-height:60vh;
}


.boxcontainer {
    display: flex;
    border-radius: 20px;
    box-shadow: 0 0 20px -10px #0000007a;
    background-color: white;
    overflow: hidden;
}
/*
    Navigation
*/

.sidenav ul{
    padding-left:0;
}
.sidenav {
    padding: 10px;
    width: 100%;
    max-width: 250px;
    background-color: rgb(248 249 250);
}

.sidenav .logo img{
    width:100%;
    border-radius:5px;
}

.sidenav .flex{
    display:flex;
}
    .sidenav .justify-center {
        justify-content:center;
    }

    .sidenav .logo-divider{
        margin-top:10px;
        background-color:rgba(0,0,0,0.1);
        height:2px;
        width:100%;
        margin-bottom:20px;
    }

a, a:link, a:visited {
    text-decoration: none !important;
}
*, ::before, ::after {
    margin: 0px;
    padding: 0px;
}
*, ::before, ::after {
    box-sizing: inherit;
}
a:-webkit-any-link {
    color: -webkit-link;
    cursor: pointer;
    text-decoration: underline;
}

ul {
    list-style-type: none;
}

.nav-link{
    display:block;
    width:100%;
    border-radius:5px;
    padding:10px;
    margin-bottom:5px;
}

    .nav-link:hover {
        background-color: #005F8A;
        
    }
.nav-link:hover .text{
    color:white !important;
}
        .nav-link:hover .icon {
            color: white !important;
            background-color: #018AC8;
        }

.nav-link .nav-item:marker{
    display:none;
}

.nav-link .nav-item{
    display:flex;
    height:40px;
    align-items:center;
}


    .nav-link .nav-item .icon {
        box-shadow: rgb(20 20 20 / 12%) 0rem 0.25rem 0.375rem -0.0625rem, rgb(20 20 20 / 7%) 0rem 0.125rem 0.25rem -0.0625rem;
        width: 35px;
        height: 35px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 6px;
        margin-right: 5px;
        color: black;
    }
.nav-link .nav-item .icon i{

}

.nav-link .nav-item .text{
    display:inline-block;
    text-decoration:none;
    color:black;
}

.sidenav .active {
    box-shadow: 0 0 20px #00000026;
}
    .sidenav .active .icon {
        background-color: #005F8A;
        color:white;
    }
.sidenav .active:hover .icon {
        color: white !important;
        background-color: #018AC8;
    }


/*
    Notifications Client
*/

.notificationbar {
    width: 100%;
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 3px;
}

    .notificationbar.important {
        background-color: red;
        color: white;
    }

    .notificationbar.information {
        background-color: #018AC8;
        color: white;
    }


/*
infobox with image
*/

.infoboximage {
    width: calc(60% - 40px);
    margin: 20px;
    height: 250px;
}
.infoboximage .textcol{
    width:70%;
    padding:20px;
    position:relative;
}
    .infoboximage .imagecol {
        width: 30%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: 60px;
        padding-bottom: 60px;
        padding-left: 60px;
        padding-right: 20px;
    }
.infoboximage .imagecol img{
    border-radius:20px;
}

.infoboximage .readmore{
    position:absolute;
    bottom:10px;
    left:20px;
    color:black;
    text-decoration:none;
}

.infoboximage .readmore:hover {
    color: #018AC8;
}

/*
infobox with background image
*/


.infoboxback {
    width: calc(40% - 40px);
    margin: 20px;
    height: 250px;
    border-radius: 20px;
    box-shadow: 0 0 20px -10px #0000007a;
    background-color: white;
    overflow: hidden;
    position: relative;
}
    .infoboxback .holder {
        padding: 15px;
        border-radius: 20px;
        height: calc(250px - 60px);
    }
.infoboxback .content {
    padding: 15px;
    border-radius: 20px;
    height:100%;
}
.infoboxback .readmore {
    position: absolute;
    top: 197px;
    left: 30px;
    text-decoration: none;
    height:100%;
}

.infoboxback .readmore:hover {
    color: #018AC8;
}

.infoboxback.white .readmore{
    color:white;
}
.infoboxback.white .readmore:hover {
    color: rgb(235,235,235);
}

.infoboxback.black .readmore {
    color: black;
}

.infoboxback.black .readmore:hover {
    color: rgb(30,30,30);
}

.white * {
    color: white;
}

.black * {
    color: black;
}


/*
    Table
*/

.infotable{
    width:100%;
    margin:20px;
    min-height:150px;
    padding:20px;
    display:block;
}

.infotable .table-head{
    width:100%;
    margin-bottom:30px;
}

.infotable .table-row-head .table-col {
    color: grey !important;
}

.infotable .table-row-head  {
    padding-bottom:15px;
}
.infotable .table-content {
    width: 100%;
}

.infotable .table-content .table-row {
    display: flex;
    width: 100%;
    justify-content: space-between;
    border-top:1px solid rgba(0,0,0,0.1);
    min-height:50px;
}
    .infotable .table-content .table-row-head {
        display: flex;
        width: 100%;
        justify-content: space-between;
    }

.infotable .table-content .table-row .table-col{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
}

/*
    statbox
*/

.statbox{
    width: calc(24% - 30px);
    padding: 20px;
}

.statbox .statcontainer {
    border-radius: 20px;
    background-color: white;
    padding: 10px;
    display: flex;
    width: 100%;
    height: 60px;
}

.statbox .statcontainer .stat-text{
    width:85%;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
}

.statbox .statcontainer .stat-text h6{
    width:100%;
}
.statbox .statcontainer .stat-text h5 {
    width:100%;
    font-weight:bold;
}
    .statbox .statcontainer .stat-text h5 span {
        color: #018ac8;
        padding-left:5px;
        font-size:15px;
    }

    .statbox .statcontainer .stat-icon {
        width: 15%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .statbox .statcontainer .stat-icon .icon {
        background: rgb(1,138,200);
        background: linear-gradient(142deg, rgba(1,138,200,1) 0%, rgba(0,95,138,1) 100%);
        border-radius: 10px;
        width: 40px;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        color:white;
    }


.btn-blue {
    display: block;
    border: none;
    background-color: #018AC8;
    color: white !important;
    max-width: 200px;
    width: 100%;
    height: 30px;
    text-align: center;
    text-decoration: none;
    line-height: 30px;
    transition: 0.5s;
    border-radius:3px;
}

.btn-blue {
    background-color: #005F8A;
}

    .btn-blue:hover {
        color: rgb(245,245,245) !important;
        background-color: #00354c;
        border-radius: 7px;
    }