@charset "utf-8";
*{outline:none;}
html{scroll-behavior: smooth;}
body{font-family:'DM Sans', sans-serif !important; font-size:14px; background:url("../img/bg.jpg") no-repeat center top #f4f4f4; background-size: cover}
a{text-decoration:none; transition:300ms}
a:hover{text-decoration:underline;}

input, select{box-shadow:none !important;}

.fs-12{font-size:12px !important;}
.fs-14{font-size:14px !important ;}


.shadow-sm{box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.075) !important;}
.bg{background-image:url(../img/overlay.png); background-repeat:no-repeat; background-blend-mode:overlay;}

.box{display:none;}

.btn{font-size:14px;}
.card{border-radius:12px;}


.container-fluid{padding:0 1rem;}


#topmenu .nav-link,
#topmenu .dropdown-toggle{background:rgba(var(--bs-primary-rgb)) !important; color: #fff; font-weight:700; font-size:18px; text-decoration:none; padding: 0 12px; line-height:40px; border-radius:6px; display:block  }
#topmenu .dropdown-toggle::after{content:unset;}
#topmenu #notifi{background:rgba(var(--bs-primary-rgb)) !important; color:#fff; font-size:12px; font-weight:normal; width:20px; border-radius:20px; line-height:20px; text-align:center; position:absolute; right:-10px; top:-10px;}

.navbar-toggler .icon-bar{background-color:#171717; transform:rotate(0deg) translate(0px, 0px); transition:300ms;}
.navbar-toggler .icon-bar{display:block; width:22px; height:2px; border-radius:1px;}
.navbar-toggler .icon-bar+.icon-bar{margin-top:4px;}
.navbar-toggler .icon-bar:nth-child(2){width:16px; transition:300ms;}
.navbar-toggler:hover>.icon-bar:nth-child(2){width:22px; transition:300ms;}
.navbar-toggler:active>.icon-bar:nth-child(2){width:22px; transition:300ms;}
.navbar-toggler:not(.collapsed) .icon-bar:nth-child(1){transform:rotate(45deg) translate(5px, 4px); transition:300ms;}
.navbar-toggler:not(.collapsed) .icon-bar:nth-child(2){opacity:0; transition:300ms;}
.navbar-toggler:not(.collapsed) .icon-bar:nth-child(3){transform:rotate(-45deg) translate(4px, -4px); transition:300ms;}

#navbarNav .nav.flex-column li a{display:block; padding:8px 10px;}
#navbarNav .nav.flex-column li a.active{background:#fff; color:rgba(var(--bs-primary-rgb)) !important; border-radius:8px;}
#navbarNav .nav .dropdown-menu{position: unset !important; transform: unset !important;}

#navbarNav{background-size:100% 100%}

.bootstrap-select .btn-light{color: var(--bs-body-color); background-color:#fff !important; border: var(--bs-border-width) solid var(--bs-border-color);}

.li-border li{position:relative; }
.li-border li:before{content:''; position:absolute; left: 0; right: 0; top:calc(50% - 1px); height:1px; background:#dee2e6; z-index:1}
.li-border li span{position: relative; z-index:2}

.nav-pills .nav-link{background:var(--bs-light);}


.file-drop-area{position:relative; background: #f4f4f4; display:flex; flex-direction:column; align-items:center; padding:30px 10px; transition:300ms; height: 170px; justify-content: center;}
.file-msg{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.file-input{position:absolute; left:0; top:0; height:100%; width:100%; cursor:pointer; opacity:0;}

:root {
    --progress-degree: 0deg;
}

.progress-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    background: conic-gradient(#0b1a30  var(--progress-degree), #f4f4f4 0deg);
    position: relative;
    transition: background 0.5s linear;
}

.progress-circle::before {
    content: "";
    position: absolute;
    width: 65%;
    height: 65%;
    background: white;
    border-radius: 50%;
}

.progress-icon {
    position: relative;
    z-index: 1;
    font-size: 24px;
}

.profile-pic{color:transparent; transition:300ms;}
.profile-pic img{position:absolute; object-fit:cover; width:165px; height:165px; box-shadow:0 0 10px 0 rgba(23, 23, 23, 0.35); border-radius:100px; z-index:0;}
.profile-pic .-label{cursor:pointer; height:165px; width:165px;}
.profile-pic:hover .-label{display:flex; justify-content:center; align-items:center; background-color:rgba(0, 0, 0, 0.8); z-index:10000; color:#fafafa; transition:background-color 0.2s ease-in-out; border-radius:100px; margin-bottom:0;}
.profile-pic span{display:inline-flex; padding:0.2em; height:2em;}


@media (min-width:1200px) and (max-width:1399px){}
@media (min-width:992px) and (max-width:1199px){}
@media (min-width:768px) and (max-width:991px){}
@media (min-width:576px) and (max-width:767px){}
@media (min-width:0px) and (max-width:575px){
#topmenu .dropdown-toggle{font-size:16px;}
}

@media (min-width:0px) and (max-width:1399px){
#content{height:unset !important}
}
@media (min-width:0px) and (max-height:765px){#signup{height:unset !important}}
@media (min-width:0px) and (max-height:515px){#login{height:unset !important}}