@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500&display=swap');

img{
    max-width: 100%;
}
.list-unstyled{
    padding-left: 0;
}

.main-header nav .navbar-nav li{
  color: #042E5C;
  font-size: .95rem;
  color: #042E5C;
  white-space: nowrap;
  font-weight: 600;}
.active{ font-weight: 600;    color: #042E5C;text-decoration: underline;}
.main-header nav .navbar-nav li a{ color: #454545;}
.main-header nav .navbar-nav li a:hover,.main-header nav .navbar-nav li.active a { color: #006FB7; border-bottom: 2px solid #29469d;transition: ease-in-out 0.2s;}
@media all and (min-width: 992px) {
	.navbar .dropdown-menu-end{ right:0; left: auto;  }
	.navbar .nav-item .dropdown-menu{  display:block; opacity: 0;  visibility: hidden; transition:.3s; margin-top:50px;width: 17rem; padding: 10px 0;border: none;  }

	.navbar .dropdown-menu.fade-down{ top:80%; transform: rotateX(-75deg); transform-origin: 0% 0%; }
	.navbar .dropdown-menu.fade-up{ top:180%;  }
	.navbar .nav-item:hover .dropdown-menu{ transition: .3s; opacity:1; visibility:visible; top:115%; transform: rotateX(0deg);border-radius: 10px; }
}
.main-header .profile-icons{color: #042E5C;}
.blue-btn{color: #fff;background-color: #006FB7;padding: .5rem 1rem;border-radius: 5px;border: none;    font-weight: 600;
    font-size: 1.3rem;}
.blue-btn:hover{color: #fff;text-decoration: none;border: none!important;}
.blue-btn i{    background: #fff;
    color: #042e5c;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    line-height: 16px;}
.dashboard-section .level{display: flex;flex-flow: column;}
.dashboard-section .level-inner {display: flex;flex-flow: row;justify-content: space-between;}
.dashboard-section .level-inner p{background: #fff;display: flex;justify-content: space-between;flex: auto;padding: 15px;border-radius: 5px;font-weight: 600;    margin: 5px;}
.dashboard-section  .level-inner button{    background: #006FB7;
        color: #fff;
        margin: 5px;
        border: none;
        border-radius: 5px;
    }
.dashboard-section  .level-inner .icon {    background: #042e5c;
        color: #fff;
        padding: 2px 10px;
        border-radius: 5px;
        text-align: center;
      }
.wrapper{background-color: #fff;}
.dashboard-section .form-section {
    display: flex;
    padding: 15px 15px;
    margin: 0;
    overflow-y: auto;
    /* height: 560px; */
    overflow-x: hidden;
}
.dashboard-section.form-section form .form-group {
    margin-bottom: 2rem;
}
/* .dashboard-section .form-section form label {
    font-weight: 600;
    font-size: 1.3rem!important;
} */
/* .dashboard-section .form-section form .form-control {
    height: calc(2.3em + 1.5em + 2px);
   min-height: 42px;
    font-weight: 600;
    background:#F2F4F9;
   border:none;
} */
.dashboard-section .form-bg{    background: #F2F4F9;}

.input-group .input-group-text:hover{
        transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.6);
}
.input-group .input-group-text{        width: 100px;
  /* background: linear-gradient(93.7deg, #D92A68 -0.1%, #A30F43 99.89%); */
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
  border-radius: 14px;
  color: #fff;
  position: absolute;
  right: 0;
  min-height: 46px;
  text-align: center;
    color: #fff;}
    .dashboard-section .box{
        background: #042e5c;
        color: #fff;
        text-align: center;
        height: 150px;
        padding: 10px;
        border-radius: 5px;
    }
    .dashboard-section .progress {
        display: -ms-flexbox;
        display: flex;
        height: 2.2rem;
        overflow: hidden;
        line-height: 0;
        font-size: .75rem;
        background-color: #D9D9D9;
        border-radius: 0.25rem;
    }
    .pro{
        background-color: #E10101;
        color: #fff;
        font-weight: 600;
        padding: 5px;

    }
    .chart{
        width: 600px;
        height: 300px;
        display: block;
    }
    .numbers{
        color: #fff;
        margin: 0;
        padding:0;
        width:50px;
        height: 100%;
        color: black;
        display: inline-block;
        float: left;
    }
    .numbers li{
        list-style: none;
        height: 120px;
        position: relative;
        bottom:10px;
    }
    .numbers span{
        font-size: 12px;
        font-weight: 600;
        position:absolute;
        bottom: 0;
        right: 10px;
    }
  .bars{
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    background: #fff;
    margin: 0;
    padding: 0;
    display: inline-block;
    width: 500px;
    height: 180px;
    box-shadow: 0 0 10px 0 #e5e5e5;
  }
  .bars li{
      display: table-cell;
      width: 100px;
      height: 180px;
      position:relative;

  }
  .bars span{
      width:100%;
      position: absolute;
      bottom:-30px;
      text-align: center;
  }
  .bars .bar{
    display: block;
    background: #E10101;
    width: 20px;
    border-radius: 8px 8px 0px 0px;
    position: absolute;
    bottom: 0;
    margin-left: 20px;
    text-align: center;
  }
  .bars .bar::before{
      color: #fff;
      content:attr(data-percentage)'%';
      position: relative;
      bottom:20px;
  }
  .bar-heading{color: #042e5c;}
  .bar-heading span{color: #042e5c;font-size: 12px;font-weight: 600;}
  .dashboard-section .tarinee h5{color: #042e5c;
    font-weight: 600;}
    .dashboard-section .tarinee h5 span{    color: #246ab7;}
    .dashboard-section .tarinee h6{color: #042e5c;}
    .dashboard-section .tarinee h6 i{color: red}
    .circular{
        height: 100px;
        width: 100px;
        position: relative;
      }
      .circular .inner, .circular .outer, .circular .circle{
        position: absolute;
        z-index: 6;
        height: 100%;
        width: 100%;
        border-radius: 100%;
        box-shadow: inset 0 1px 0 rgba(0,0,0,0.2);
      }
      .circular .inner{
        top: 50%;
        left: 50%;
        height: 80px;
        width: 80px;
        margin: -40px 0 0 -40px;
        background-color: white;
        border-radius: 100%;
        box-shadow: 0 1px 0 rgba(0,0,0,0.2);
      }
      .circular .circle{
        z-index: 1;
        box-shadow: none;
      }
      .circular .numb{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 10;
        font-size: 18px;
        font-weight: 500;
        color:  white;
        background-color:#042F5C;
        border-radius: 70%;
      }
      .circular .bar{
        position: absolute;
        height: 100%;
        width: 100%;
        background: #fff;
        -webkit-border-radius: 100%;
        clip: rect(0px, 100px, 100px, 50px);
      }
      .circle .bar .progress{
        position: absolute;
        height: 100%;
        width: 100%;
        -webkit-border-radius: 100%;
        clip: rect(0px, 50px, 100px, 0px);
      }
      .circle .bar .progress, .dot span{
        background:  #E10101;
      }
      .circle .left .progress{
        z-index: 1;
        animation: left 4s linear both;
      }
      @keyframes left {
        100%{
          transform: rotate(180deg);
        }
      }
      .circle .right{
        z-index: 3;
        transform: rotate(180deg);
      }
      .circle .right .progress{
        animation: right 4s linear both;
        animation-delay: 4s;
      }
      @keyframes right {
        100%{
          transform: rotate(180deg);
        }
      }
      .circle .dot{
        z-index: 2;
        position: absolute;
        left: 50%;
        top: 50%;
        width: 50%;
        height: 10px;
        margin-top: -5px;
        animation: dot 8s linear both;
        transform-origin: 0% 50%;
      }
      .circle .dot span {
        position: absolute;
        right: 0;
        width: 10px;
        height: 10px;
        border-radius: 100%;
      }
      @keyframes dot{
        0% {
          transform: rotate(-90deg);
        }
        50% {
          transform: rotate(90deg);
          z-index: 4;
        }
        100% {
          transform: rotate(270deg);
          z-index: 4;
        }
      }
      ::-webkit-inner-spin-button {
        display:none;
      }
      ::-webkit-calendar-picker-indicator { background-color:white}
      input[type=date]{
        font-size: 15px;
    border: 1px solid #006fb7;
    border-radius: 10px;
      }
      ::-webkit-datetime-edit-text { color:#555555}
      ::-webkit-datetime-edit-month-field { color:#555555 }
      ::-webkit-datetime-edit-day-field { color: #555555; }
      ::-webkit-datetime-edit-year-field { color:#555555; }
      ::-webkit-calendar-picker-indicator{
        background-image: url(../img/Calendar-icon.png);
            background-position:center;
             background-size:20px 20px;
             background-repeat:no-repeat;
            color:rgba(204,204,204,0);
      }
      .blue-border-btn{color: #006FB7;padding: .5rem 2rem;border-radius: 5px; border: 1px solid #006FB7;text-align: center;
      }
      .dashboard-section  .table td, .table th {
        padding: 0.75rem;
        vertical-align: middle;

   /*  border-top: 8px solid #ededed; */

        color: #000;

    }
    .dashboard-section .table td .icon{
      background: #042e5c;
      border-radius: 5px;
    }
    .dashboard-section .table td .icon i{
      color: #fff!important;
    }
    .dashboard-section .table a{color: #fff!important;}
    .dashboard-section .table thead th{    color: #042E5C;}
    .dashboard-section .table thead th {
      vertical-align: middle;
      border-bottom: 2px solid #dee2e6;
  }
  /* .dashboard-section h4{    color: #042e5c;
    text-decoration: underline;} */
    .dashboard-section .form-section form  .select{

    width: 270px;

    }

/* .main-header .navbar-nav{  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; min-width: 300px;} */
.main-header .navbar-nav a{ color: #042E5C;}
.main-header .navbar-nav a.active{ font-weight: 700;}

 .dashboard-section  .filter{ background-color: #fff; padding: 0 5px; cursor: pointer;}
 .dashboard-section  .filter i{display: inline; line-height: 38px;}
 .dashboard-section .search-bar{ position: relative; }
 .dashboard-section .search-bar i{ position: absolute; left:0; top: 3px;}
 .dashboard-section .search-bar .form-control{ padding-left: 30px;}
 .post-login-display figure figcaption{
  position: absolute;
  bottom: 0;
  padding: 0px;
  background: rgb(5 0 0 / 60%);
  color: #fff;
  display: block;
  left: 0;
  width: 100%;
  backdrop-filter: blur(14.0421px);
}
.post-login-display figure{
      position: relative;
  padding: 0;
  margin: 0;
  box-shadow: 0px 0px 6px 0px rgb(0 0 0 / 5%);
}
.post-login-display figure{
      display: block;
      max-width: 100%;
}
.post-login-display figure figcaption i{
      background: #fff;
      color: #454545;
      padding: 8px;
      border-radius: 50%;
      margin: 2px 3px;
}
.post-login-display figure figcaption button{
  border-radius: 35px;
font-size: 12px;
margin: 2px 3px;
color: #fff;
}
/* .post-login-display .form-group label figure::after{
  content: ' ';
  background-color: #f0f0f0;
  height: 30px;
  width: 30px;
  z-index: 999;
  border-radius: 35px;
  top: 2%;
  position: absolute;
  left: 1%;
  line-height: 30px;
}
*/
/* .post-login-display .form-group input:checked + label figure::after{  content: '\f00c';font-family: "Font Awesome 6 Free"; font-weight: 900;text-align: center;color: #28a745;} */
.post-login-display .form-group input{display: none;}
  .post-login-display figure figcaption .btn-pending{
  border-radius: 35px;
font-size: 12px;
margin: 2px 3px;
color: #fff;
border-color: #ADE300;background: #ADE300;
}
.post-login-display figure figcaption p{
  font-size: 18px;
  margin: 0;
}
.post-login-display figure figcaption h5 {
margin-left: 20px;
}
.post-login-display figure figcaption h6 {
  margin-left: 20px;
  }

.post-login-display .circle {
  position: absolute;
  top: 2%;
  left: 50%;
  padding: 3px;
  border-radius: 35px;
  line-height: 25px;
  color: #006FB7;
  margin: 0;
  width: 100%;
  transform: translateX(-50%);

}
.post-login-display .circle  .btn.btn-primary{ padding: 5px 10px; font-size: 14px; border-radius: 8px;}
.post-login-display .circle span   {    font-size: 12px;
  font-weight: 600;
  text-align: center;
  color: #D92A68;
}
.profile-css .edit{ color: #067AC6;font-size: 12px;}
.profile-css button {    background: #067AC6;}
.profile-css button i{  color: #FFD700;}
.profile-css a i{    color: #111;}

.footer{

}
.close-btn{
  position: absolute;
    top: 0;
    left: 0;
}
.sidebar ul li{
  line-height: 36px;
    font-weight: 500;
}
.tbl-scroll.xl {
  max-height: 600px;
}
@media(min-width: 1200px){
  .post-login-display .circle  .btn.btn-primary{ padding: 5px 10px; font-size: 10px; border-radius: 8px;}
}
@media(min-width: 1600px){
  .post-login-display .circle  .btn.btn-primary{ padding: 5px 10px; font-size: 14px; border-radius: 8px;}
  }