:root{
    --red-light: #ff00002e;
    --red: red;
    --common-color: #0f8d5b61;
    --common-color-dark: #0f8d5bc2;
    --common-box-shadow:  0 0 10px 0 #212d111a;
}

* {
    transition: background-color 300ms ease, color 300ms ease;
}
*:focus {
    background-color: rgba(221, 72, 20, .2);
    outline: none;
}
html, body {
    color: rgba(33, 37, 41, 1);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    font-size: 16px;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    box-sizing: border-box;
}
/*root class*/

.form-group .input-placeholder{
    position: relative;
}
.form-group .placeholder{
    position: absolute;
    top: 50%;
    right: 5px;
    height: 25px;
    transform: translate(0%,-50%);
    width: 25px;
    line-height: 25px;
    font-size: 15px;
    text-align: center;
    cursor: pointer;
}

.form-group .form-control{
    border:  2px solid var(--common-color)!important;
    padding: 20px 14px!important;
}
.form-group .required-alert{
    display: none;
    color: var(--red);
}
.form-group .required-alert-active{
    display: block;
    color: var(--red);
}
.form-group .form-control:focus{
   outline: none;
   box-shadow: 0 0 10px 0 var(--common-color);
   background: var(--common-color)!important;
}
.form-group .form-control-active{
  border:  2px solid var(--red-light)!important;
}
.form-group .form-control-active:focus{
   outline: none;
   box-shadow: 0 0 10px 0 var(--red-light);
   background: var(--red-light)!important;
}

.form-group .login-btn,
.form-group .refresh-btn{
   width: 100%;
   padding: 15px 12px;
   border: none;
   outline: none;
   background: linear-gradient(45deg, #f0191e38, #cfd80b69)!important;
   box-shadow: none;
   color: #000;
   transition: all .3s;
}
.form-group .login-btn:hover,
.form-group .login-btn:focus,
.form-group .login-btn:active{
    outline: none;
    border: none;
    box-shadow: none;
    background: linear-gradient(45deg, #f0191e9e, #cfd80bad)!important;
    color: black!important;

   transition: all .3s;
}

/*login dashboard*/


#login_dashboard{
    width: 100%;
    min-height: 100vh;
    background: #fff;
    position: relative;
}
#login_dashboard .box-group{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 9999;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
}
#login_dashboard .navbar{
    display:grid;
    grid-template-columns: max-content;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
}
#login_dashboard .navbar img{
    width: 500px;
}
#login_dashboard .form-outer{
    display: grid;
    grid-template-columns: 500px;
    align-self: center;
    justify-self: center;
    gap: 40px;
    padding: 40px 50px;
    background: #fffffff5;
    border-radius: 10px;
}
@media(max-width: 676px){
  #login_dashboard .form-outer{
    grid-template-columns: 450px;
}
}
@media(max-width: 576px){
  #login_dashboard .form-outer{
    grid-template-columns: 400px;

}
#login_dashboard .navbar img{
    width: 400px;
}
}

@media(max-width: 500px){
  #login_dashboard .form-outer{
    grid-template-columns: 380px;
    padding: 30px 20px!important;
}
}

@media(max-width: 430px){
  #login_dashboard .form-outer{
    grid-template-columns: 350px;
    padding: 30px 20px!important;
}
#login_dashboard .navbar img{
    width: 350px;
}
}
@media(max-width: 370px){
  #login_dashboard .form-outer{
    grid-template-columns: 320px;
    padding: 20px 10px!important;
}
#login_dashboard .navbar img{
    width: 320px;
}
}
@media(max-width: 340px){

#login_dashboard .navbar img{
    width: 250px;
}
}
#login_dashboard .form-switch-group{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  position: relative;
}
#login_dashboard .form-switch-group button{
    border: none;
    outline: none;
    background: transparent;
     padding: 10px 0;
     z-index: 1;
}
#login_dashboard .user-form-switch::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: linear-gradient(45deg, #f0191e38, #cfd80b69);
    width: calc(100% / 3);
    z-index: -0;
    border-radius: 6px;
    transition: all .3s;
}

#login_dashboard .audit-form-switch::before {
    content: "";
    position: absolute;
    top: 0;
    left: calc(100% / 3);
    height: 100%;
    background: linear-gradient(45deg, #f0191e38, #cfd80b69);
    width: calc(100% / 3);
    z-index: -0;
    border-radius: 6px;
    transition: all .3s;
}
#login_dashboard .admin-form-switch::before {
    content: "";
    position: absolute;
    top: 0;
    left: 66.6%;
    height: 100%;
    background: linear-gradient(45deg, #f0191e38, #cfd80b69);
    width: calc(100% / 3);
    z-index: -0;
    border-radius: 6px;
    transition: all .3s;
}

#login_dashboard .form-toggle{}
#login_dashboard .all-form{
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}

/*effect*/
#login_dashboard .corner-img{
    position: absolute;
    left: 0;
    bottom: 0;
}
#login_dashboard .corner-img-right{
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 2;
}

#login_dashboard .corner-img img{
   width: 450px;
   height: 450px;
}
@media(max-width: 576px){
#login_dashboard .corner-img{
display: none;
}
}
#login_dashboard .corner-img-right img{
   width: 350px;
   height: 350px;
}
#login_dashboard::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 200px;
    width: 200px;
    background: linear-gradient(45deg, #f0191e38, #cfd80b69);
    border-radius: 0 0 100% 0;
}
#login_dashboard::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    height: 300px;
    width: 300px;
    background: linear-gradient(45deg, #f0191e38, #cfd80b69);
    border-radius: 100% 0 0 0;
}

#audit-login-form-outer,
#admin-login-form-outer{
    display: none;
}

/*circle loading*/


#circle-loading circle:nth-child(2),
#circle-loading circle:nth-child(2){
    stroke: rgba(0, 0, 0, 0.09);
}
#circle-loading circle:nth-child(1),
#circle-loading circle:nth-child(1){
    stroke-dasharray: 242.6;
    animation: loading-animation-circle 1s cubic-bezier(1, 1, 1, 1) 0s infinite;
}
@keyframes loading-animation-circle {
    0% {
        stroke-dasharray: 40 242.6;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 141.3;
        stroke-dashoffset: -141.3;
    }
    100% {
        stroke-dasharray: 40 242.6;
        stroke-dashoffset: -282.6;

    }
}



/*user dashboard*/
#user-dashboard{
    width: 100%;
}
#user-dashboard .box-group{
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
}
@media(max-width: 576px){
    #user-dashboard .box-group{
        padding: 0 10px;
    }
}
#user-dashboard .logo-box{
    width: 100%;
    display: grid;
    grid-template-columns:  repeat(2,max-content);
    align-items: center;
    justify-content: space-between;
}
  
#user-dashboard   .logo-box img{
  width: 200px;
}
#user-dashboard .card-group{
  display: grid;
  gap: 30px;
  grid-template-columns: 350px 300px;
  align-items: center;
}
@media(max-width: 720px){
    #user-dashboard{
        height: 100vh!important;
        overflow-y: scroll;
    }
    #user-dashboard .card-group{
        display: grid;
        gap: 30px;
        grid-template-columns: 350px;
        align-items: center;
    }
}
#user-dashboard .details-box{
  box-shadow: var(--common-box-shadow);
/*  height: fit-content;*/
  padding: 30px 35px;
  border-radius: 20px;
}
#user-dashboard .details-box .box-header{
  display: grid;
  grid-template-columns: 40px max-content;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
}
#user-dashboard .details-box .avatar{
  height: 40px;
  background: linear-gradient(45deg, #f0191e38, #cfd80b69);
  line-height: 37px;
  font-size: 1.5em;
  text-align: center;
  text-transform: uppercase;
  border-radius: 50px;
  user-select: none;
}
#user-dashboard .details-box .box-header h3{
    font-size: 1.4em;
    color: #333;
}
#user-dashboard .details-box .box-body{

}
#user-dashboard .details-box .key-value{
  display: grid;
  grid-template-columns:  max-content max-content;
  gap: 10px;
}
#user-dashboard .details-box .key{
  color: #333;
}
#user-dashboard .details-box .value{
  color: #00000066;
}
#user-dashboard .details-box .box-footer{
  padding: 10px 0;
}
.logout-btn{
    border: none!important;
    outline: none!important;
    box-shadow: none!important;
    padding: 5px 14px 10px 14px;
    border-radius: 6px;
    background: #d72e2e40;
    display: grid;
    grid-template-columns: max-content max-content;
    align-items: center;
    gap: 10px;
    transition: all .3s;
}
.logout-btn:active{
    background: #d72e2e63;
    transition: all .3s;
}
#user-dashboard .score-box{
  box-shadow: 0 0 10px 0 #212d111a;
/*  height: fit-content;*/
  padding: 15px 35px;
  border-radius: 20px;
  display: flex;
  justify-content: center;
  flex-flow: column;
  align-items: center;
}
#user-dashboard  .score-box .box-header{
  width: 150px;
  height: 150px;
}

#user-dashboard  .score-box  .circle {
        fill: none;
        stroke: #aadb34;
        stroke-width: 10;
        stroke-linecap: round;
        transform: rotate(-90deg);
        transform-origin: center;
        user-select: none;
        transition: all .7s ease-in-out;
}
#user-dashboard  .score-box  .back-circle {
        fill: none;
        stroke: rgba(0, 0, 0,0.05);
        stroke-width: 10;
        stroke-linecap: round;
        transform: rotate(-90deg);
        transform-origin: center;
        user-select: none;
}
 #user-dashboard .score-box   .score {
        text-anchor: middle;
        font-size: 24px;
        fill: #101a09a6;
        user-select: none;
}
#user-dashboard .score-box   h3 {
        font-size: 1.4em;
        color: #333;
        user-select: none;
}

/*===================audit dashboard============================*/

#audit-dashboard {

}
#audit-dashboard  .navbar{
    display: grid;
    grid-template-columns: 200px max-content;
    justify-content: space-between;
}
#audit-dashboard  .logo img{
   width: 100%;
}
#audit-dashboard .navbar .nav-items{
    display: grid;
    grid-template-columns:  repeat(3,max-content);
    align-items: center;
    gap: 10px;
}
#audit-dashboard .navbar .nav-items a{
    color: grey;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    padding: 5px 3px;
    cursor: pointer;
    background: transparent!important;
}
#audit-dashboard .navbar .nav-items .active{
    color: black;
    border-color:  black;
}
#audit-dashboard .navbar .menu-btn {
    display: none;
}  
@media(max-width: 576px){
     #audit-dashboard  .navbar{
         padding-left: 0!important;
         padding-right: 0!important;
    }    
     #audit-dashboard  .mobile-position-relative{
         position: relative;
    }
    #audit-dashboard .navbar .nav-items-outer{
        display: none;
        position: absolute;
        right: 0;
        top: 100%;
        width: 200px;
        height: fit-content;
        box-shadow: var(--common-box-shadow);
        z-index: 9;
        background: #fff;
        padding: 20px;

    }
    #audit-dashboard .navbar .nav-items {
         grid-template-columns:  1fr;
    }  
     #audit-dashboard .navbar .menu-btn {
        display: block;
        border-radius: 5px;
        border: none;
        outline: none;
        background: #53c88630;
        padding: 7px 16px;
        color: #04110c;
    } 
}

#audit-dashboard .form-outer{
    width: 100%;
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 20px;
}
@media(max-width: 1000px){
    #audit-dashboard .form-outer{
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}
}
#audit-dashboard .form-outer .form-title{

}
#audit-dashboard .form-outer .form-title{
    padding: 10px 0;
    text-align: center;
}
#audit-dashboard .form-outer .form-title h3{
    font-size: 1.8em;
    color: #080a52;
    text-shadow: 10px 3px 8px #2f319280;
}

#audit-dashboard .form-one,
#audit-dashboard .form-two{
    box-shadow: var(--common-box-shadow);
    height: fit-content;
    padding: 30px 35px;
    border-radius: 20px;
}
#audit-dashboard .form-one  .toggle-btn-outer{
    display: grid;
    grid-template-columns: 1fr;
}
#audit-dashboard .form-one  .toggle-btn-outer .toggle-btn{
    display: grid;
    grid-template-columns: 1fr max-content;
    align-items: center;
    justify-content: space-between;
    align-content: center;
}
#audit-dashboard .form-one  .toggle-btn-outer .toggle-btn span{
    margin-top: -6px;
    color: #333;
    font-weight: 500;
}#audit-dashboard .form-one  .toggle-btn-outer .toggle-active,
#audit-dashboard .form-one  .toggle-btn-outer .toggle{
     width: 50px;
     height: 25px;
     border-radius: 50px;
     background: #02020129;
     box-shadow: var(--common-box-shadow);
     position: relative;
     cursor: pointer;
}
#audit-dashboard .form-one  .toggle-btn-outer .toggle-active::before,
#audit-dashboard .form-one  .toggle-btn-outer .toggle:before{
     content: "";
     position: absolute;
     top: 50%;
     left: 7%;
     transform: translate(0%,-50%);
     width: 20px;
     height: 20px;
     border-radius: 50px;
     background: #8d8a8acc;
}

#audit-dashboard .form-one  .toggle-btn-outer .toggle-active{
     background: #020202a3;
}
#audit-dashboard .form-one  .toggle-btn-outer .toggle-active:before{
     left: auto;
     right: 7%!important;
     transform: translate(0%,-50%);
     background: #ffffffed;
}

#audit-dashboard .form-header{
    padding: 10px 0;
}
#audit-dashboard .form-header h3{
    font-size: 1.5em;
}
#audit-dashboard .form-body{

}
#audit-dashboard .form-header span{
    color: midnightblue;
}
#audit-dashboard .form-group{

}
#audit-dashboard .form-group .login-btn{
   border-radius: 10px;
}
#audit-dashboard .form-group label{
    color: midnightblue;
}
#audit-dashboard .input-group{
    width: 100%;
    justify-content: space-between;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}
@media(max-width: 576px){
    #audit-dashboard .input-group{
    grid-template-columns:  1fr;
    gap: 0;
}
}
.shadow-input{
    border: none!important;
    outline: none!important;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 0 6px 0 #33333354;
    padding: 7px 13px;
    width: 100%;
}
.to_upper_case{
    text-transform: uppercase;
}
#audit-dashboard #summary,
#audit-dashboard #feedback
{
  height: 130px;
 resize: none;
}

.shadow-input::placeholder{
    color: #bfbfbf;
}
.shadow-input:read-only{
    background-color: #d6d0d02e;
    color: dimgray!important;
}

#audit-dashboard .find-btn{
    padding: 8px 13px;
    width: 100%;
    border: none!important;
    outline: none!important;
    border-radius: 6px;
   background: linear-gradient(45deg, #f0191e38, #cfd80b69)!important;
   box-shadow: none;
   color: #000;
   transition: all .3s;
}
#audit-dashboard .find-btn:hover,
#audit-dashboard .find-btn:focus,
#audit-dashboard .find-btn:active{
    outline: none;
    border: none;
    box-shadow: none;
    background: linear-gradient(45deg, #f0191e9e, #cfd80bad)!important;
    color: black!important;
   transition: all .3s;
}

 .report-table{
    width: 100%;
 display: grid;
 grid-template-columns: 1fr;
 gap: 20px;
}
 .report-table .header{
    display: grid;
    grid-template-columns: max-content max-content;
    justify-content: space-between;
}
 .report-table .header .header-box-group{
    display: grid;
    grid-template-columns: repeat(2,max-content);
    gap: 10px;
}
 .report-table .header .header-box-group .export-btn{
    background: #3dac5942;
    color: #14702cb5;
    outline: none;
    border: none;
    border-radius: 6px;
    box-shadow: var(--common-box-shadow);
    padding: 0 12px 3px 12px;
}
 .report-table .header .header-box-group .export-btn:active {
   filter: blur(1px);
}

 .report-table .count-sub{
  display: grid;
  grid-template-columns: max-content max-content;
  gap: 7px;
  align-items: center;
  box-shadow: var(--common-box-shadow);
  padding: 6px 12px 0 12px;
}
 .report-table .count-sub h3{
  font-size: 15px;
  color: gray;
}
 .report-table .header .tabs{
    display: grid;
    grid-template-columns: max-content max-content;
    gap: 10px;
}
 .report-table .header .tabs .tab{
  box-shadow: var(--common-box-shadow);
  padding: 3px 14px 6px 14px;
  background: white;
  border: none;
  border-bottom: 2px solid transparent;
  outline: none;
}
 .report-table .header .tabs .tab-active{
  border-bottom: 2px solid grey;
}

 .report-table .body{
 border-radius: 5px;
 box-shadow: var(--common-box-shadow);
 padding: 10px;
}
 .report-table .body-table{
    width: 100%;

}
 .report-table .body-table td,
 .report-table .body-table th{
  border: none!important;
}
 .report-table .body-table .status{
   position: relative;
} 
.report-table .body-table .status .inbound{
   position: absolute;
   bottom: 0;
   left: 50%;
   transform: translate(-50%,0);
   font-size: 10px;
   background: #ff3f6129;
   user-select: none;
   cursor: pointer;
   color: #de4598;
   border-radius: 10px;
   padding: 1px 7px 2px 7px;
}

 .report-table .body-table th{
    padding-bottom: 7px;
    font-weight: 400;
    color: gray;
    text-align: center;
}
 .report-table .body-table td{
    color: #33333399;
    vertical-align: middle;
    padding: 8px 0;
    text-align: center;
}
 .report-table .body-table thead{
  border-bottom: 1px solid #33333321;
  padding: 5px 0;
}
 .report-table .body-table .view-btn{
    border: none;
    outline: none;
    border-radius: 4px;
    padding: 5px 10px;
    background: #00ff901a;
    color: #13a5a3;
}
 .report-table .body-table .view-btn:active{
 filter: blur(1px);
}
@media(max-width: 1200px){
     .report-table .body-table thead th:nth-child(9),
     .report-table .body-table tbody td:nth-child(9),
     .report-table .body-table thead th:nth-child(10),
     .report-table .body-table tbody td:nth-child(10){
        display: none;
   }
}
@media(max-width: 1000px){
     .report-table .body-table thead th:nth-child(6),
     .report-table .body-table tbody td:nth-child(6),
     .report-table .body-table thead th:nth-child(7),
     .report-table .body-table tbody td:nth-child(7){
        display: none;
   }
}
@media(max-width: 800px){
     .report-table .body-table thead th:nth-child(5),
     .report-table .body-table tbody td:nth-child(5),
     .report-table .body-table thead th:nth-child(8),
     .report-table .body-table tbody td:nth-child(8){
        display: none;
   }
}
@media(max-width: 576px){
     .report-table .body-table thead th:nth-child(1),
     .report-table .body-table tbody td:nth-child(1),
     .report-table .body-table thead th:nth-child(1),
     .report-table .body-table tbody td:nth-child(1){
        display: none;
   }
}
/*cpanel*/

#cpanel{
    width: 100%;
    min-height: auto;
    position: relative;
}
#cpanel .box-group{
    width: 100%;
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 40px;
    padding: 40px;
}
#cpanel .side-bar{
    padding: 20px 20px;
    display: grid;
    grid-template-columns: 1fr;
    box-shadow: var(--common-box-shadow);
    border-radius: 15px;
    height: fit-content;
}
/*@media(max-width: 1400px){
   #cpanel .side-bar{
     width: 360px;
     position: fixed;
     left: 0;
     top: 0;
     z-index: 9999;
     background: #fff;
    }
    #cpanel .box-group{
    grid-template-columns: 1fr;}
}*/
#cpanel .side-bar .header{
    padding: 20px;
    background: linear-gradient(197deg, #e8ed1329, #fe95aa36);
    display: grid;
    grid-template-columns: 200px;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
}
#cpanel .side-bar .header img{
   width: 100%;
}
#cpanel .side-bar .body{
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 20px 0;
    position: relative;
}
#cpanel .side-bar .body:before{
    content: "";
    position: absolute;
    top: 20px;
    right: -20px;
    width: 10px;
    height: 44px;
    background: #fe00466b;
    border-radius: 4px 0 0 4px;
    transition: all .5s linear;
}

#cpanel .side-bar .before-1:before{
    top: 20px;
}
#cpanel .side-bar .before-2:before{
    top: 18%!important;
}
#cpanel .side-bar .before-3:before{
    top: 31%!important;
}
#cpanel .side-bar .before-4:before{
    top: 44.5%!important;
}
#cpanel .side-bar .before-5:before{
    top: 58%!important;
}
#cpanel .side-bar .before-6:before{
    top: 71%!important;
}
#cpanel .side-bar .before-7:before{
    top: 84%!important;
}

#cpanel .side-bar .link{
    padding: 10px 15px;
    display: grid;
    grid-template-columns: 35px max-content;
    box-shadow: 0 0 3px 0 #feb3aa4d;
    cursor: pointer;
    border-radius: 5px;
    text-decoration: none;
    color: #35272a87;
    user-select: none;
    transition: all .3s;
}
#cpanel .side-bar .link:active{
     color: #333;
    background: #fe95aa00;
    box-shadow: 0 0 3px 0 #feb3aa4d;
    transition: all .3s;
}
#cpanel .side-bar .link:hover{
    color: #222;
    background: #fe95aa12;
    box-shadow: 0 0 3px 0 #feb3aa4d;
    transition: all .3s;
}
#cpanel .side-bar .link-active{
    background: #fe95aa3b;
    box-shadow: 0 0 3px 0 #feb3aa4d;
    transition: all .3s;
    color: deeppink;
}
#cpanel .side-bar .logout-btn{
    width: 100%;
    text-align: center;
    display: grid;
    grid-template-columns: max-content max-content;
    gap: 10px;
    justify-content: center;
    padding: 11px 16px;
}
/*dashboard*/
#cpanel  .dashboard{
    box-shadow: var(--common-box-shadow);
    height: fit-content;
}
#cpanel  .dashboard .navbar{
    width: 100%;
    display: grid;
    grid-template-columns: max-content max-content;
    justify-content: space-between;
    padding: 20px 15px;
}
#cpanel  .dashboard .navbar .profile-box{
    display: grid;
    grid-template-columns: 40px max-content;
    align-items: center;
    align-content: center;
    gap: 10px;
}
#cpanel  .dashboard .navbar .avtar{
   height: 40px;
  background: #fe375f45;
  line-height: 37px;
  font-size: 1.3em;
  text-transform: uppercase;
  text-align: center;
  border-radius: 50px;
  user-select: none;
}
#cpanel  .dashboard .navbar h3{
    font-size: 1.3em;
    color: #2821218c;
    margin-top: 5px;
}
#cpanel  .dashboard .navbar .btn-box{
    display: none;
}
#cpanel  .dashboard .navbar .btn-box .menu-btn{
    padding: 8px 16px;
    border: none;
    outline: none;
    color: #2821218c;
    border-radius: 5px;
}

#cpanel .dashboard .box-outer{
   display: grid;
   grid-template-columns: 1fr;
}
#cpanel .dashboard .box-outer .main-header{
  border-bottom: 2px solid #33333329;
  display: grid;
  grid-template-columns: repeat(2,max-content);
  justify-content: space-between;
  align-content: center;
  align-items: center;
  padding: 5px 15px;
}
#cpanel .dashboard .box-outer .main-header h3{
    font-size: 1.2em;
    color: #898585;

}
#cpanel .dashboard .box-outer .main-header .add-new-btn{
     display: none;
     border: none;
     outline: none;
     box-shadow: none;
     border-radius: 4px;
     padding: 7px 14px;
     color: #fe2e53;
     background: #fe2e5336;
}
#cpanel .dashboard .box-outer .main-header .add-new-btn:active{
     color: #fe2e53a6;
     background: #fe2e531f;
}
#cpanel .dashboard .box-outer .box-group{
  padding: 20px 15px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}

#cpanel .dashboard  .box-group .box{
    box-shadow: var(--common-box-shadow);
    position: relative;
}
#cpanel .dashboard  .box-group .box .header{
    padding: 10px 15px;
}
#cpanel .dashboard  .box-group .box .header h3{
    font-size: 1.2em;
    color: #898585;

}
#cpanel .dashboard  .box-group .box .body{
    padding: 10px 20px;
    display: grid;
    grid-template-columns: calc(1fr / 2);
    justify-content: flex-end;
    align-items: flex-end;
    color: #79baa2db;
}
#cpanel .dashboard  .box-group .box .placeholder-img{
    position: absolute;
    bottom: 5px;
    left: 5px;
    width: 80px;
    height: 80px;
}
#cpanel .dashboard  .box-group .box .placeholder-img img{
    width: 100%;
}

#cpanel .dashboard  .box-group .box .placeholder-img img{
    width: 100%;
}
/*table*/
#cpanel .dashboard .table-group{
    display: grid;
    grid-template-columns: 1fr;
}
#cpanel .dashboard .table-group .table-main{
 display: none;
}
#cpanel .dashboard .table-group .table{
    display: grid;
    grid-template-columns: 1fr;
}
#cpanel .dashboard .table-group .header{
  display: grid;
  grid-template-columns: max-content max-content;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
}
#cpanel .dashboard .table-group .header h3{
    font-size: 16px;
}
#cpanel .dashboard .table-group .select-all-box{
    display: grid;
    grid-template-columns: 15px max-content max-content max-content;
    gap: 15px;
    align-items: center;
    align-content: center;
    box-shadow: var(--common-box-shadow);
    padding: 0 10px;
    position: relative;
}
#cpanel .dashboard .check-btn{
    cursor: pointer;
    width: 30px;
    height: 30px;
    line-height: 30px;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 5px;
    transition: all .3s;
    text-align: center;
    margin-top: 5px;
}
#cpanel .dashboard .check-btn:hover{
    background: rgba(0, 0, 0, 0.2);
    transition: all .3s;
}
#cpanel .dashboard .check-btn:active {
    background: rgba(0, 0, 0, 0.04);
    transition: all .3s;
}
#cpanel .dashboard .table-group .count-sub-box,
#cpanel .dashboard .table-group .count-box{
    display: grid;
    grid-template-columns: repeat(2, max-content);
    align-items: center;
}
#cpanel .dashboard .table-group .count-box{
    gap: 15px;
}
#cpanel .dashboard .table-group .count-sub-box{
   gap: 10px;
   box-shadow: var(--common-box-shadow);
   grid-template-rows: 40px;
   align-items: center;
   align-content: center;
   padding: 0 8px;
   position: relative;

}
#cpanel .dashboard .table-group .count-box h3,
#cpanel .dashboard .table-group .count-box label,
#cpanel .dashboard .table-group .count-box span{
    margin-top: 3px;
}
#cpanel .dashboard .table-group .short-btn{
     width: 32px;
     height: 30px;
    font-size: 13px;
    background: rgba(0, 0, 0, 0.07);
    border: none;
    outline: none;
    border-radius: 5px;
}
#cpanel .dashboard .table-group .short-btn:hover{
    background: rgba(0, 0, 0, 0.05);
}
#cpanel .dashboard .table-group .short-btn:active{
    background: rgba(0, 0, 0, 0.01);
}
/*dropdown*/
#cpanel .dashboard .table-group .this-dropdown-outer,
#cpanel .dashboard .table-group .this-dropdown-outer-active-left,
#cpanel .dashboard .table-group .this-dropdown-outer-active{
  display: none;
  position: absolute;
  top: 120%;
  right: 0;
  min-width: 250px;
  height: fit-content;
  box-shadow: var(--common-box-shadow);
  background: #fff;
  border-radius: 6px;
}
 #cpanel .dashboard .table-group .this-dropdown-outer-active,
#cpanel .dashboard .table-group .this-dropdown-outer-active-left{
   display: block;
   animation: thisDropDownAnim .3s linear forwards;
 }
@keyframes thisDropDownAnim{
    0%{
        top: 130%;
        opacity: 0;
    }100%{
        top: 120%;
        opacity: 1;
    }
}
#cpanel .dashboard .table-group .this-dropdown-outer-active-left{
    left: 0;
}

#cpanel .dashboard .table-group .this-dropdown-item{
 display: grid;
 grid-template-columns: 1fr 20px;
 padding: 7px 14px;
 transition: all .2s;
}
#cpanel .dashboard .table-group .this-dropdown-item:nth-child(1){
    border-radius: 6px 6px 0 0;
}
#cpanel .dashboard .table-group .this-dropdown-item:nth-last-child(1){
    border-radius:  0 0 6px 6px;
}
#cpanel .dashboard .table-group .this-dropdown-item:hover{
    background: #53565829;
    transition: all .2s;
}
#cpanel .dashboard .table-group .this-dropdown-item label{
    font-size: 14px;
    color: #333333a6;
}
#cpanel .dashboard .table-group .this-checkbox{
   height: 20px;
   background: #33333324;
   border-radius: 50px;
   cursor: pointer;
   position: relative;
}
#cpanel .dashboard .table-group .this-dropdown-item-active .this-checkbox::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 10px;
    height: 10px;
    background: #333;
    border-radius: 50px;
    transition: all .3s ease-in-out;
}
/*table*/


#cpanel .dashboard .table-group .body{
    padding: 5px 20px;

}
#cpanel .dashboard .table-group .body-table{
    width: 100%;

}
#cpanel .dashboard .table-group .body-table td,
#cpanel .dashboard .table-group .body-table th{
  border: none!important;
}
#cpanel .dashboard .table-group .body-table td{
    color: #33333399;
    vertical-align: middle;
}
#cpanel .dashboard .table-group .body-table thead{
  border-bottom: 1px solid #33333321;
}

#cpanel .dashboard .table-group .body-table .delete-btn,
#cpanel .dashboard .table-group .body-table .edit-btn,
#cpanel .dashboard .table-group .body-table .view-btn{
    border: none;
    outline: none;
    border-radius: 4px;
    padding: 5px 10px;
}
#cpanel .dashboard .table-group .body-table .delete-btn{
    background: #ff000012;
    color: red;
}
#cpanel .dashboard .table-group .body-table .edit-btn{
    background: #0070ff17;
    color: #0005d6;
}
#cpanel .dashboard .table-group .body-table .view-btn{
   background: #00ff901a;
    color: #13a5a3;
}
#cpanel .dashboard .table-group .body-table .delete-btn:active,
#cpanel .dashboard .table-group .body-table .edit-btn:active,
#cpanel .dashboard .table-group .body-table .view-btn:active{
 filter: blur(1px);
}

#cpanel .dashboard .table-group .body-table  .status{
   position: relative;
} 
#cpanel .dashboard .table-group .body-table  .status .inbound{
   position: absolute;
   bottom: 0;
   left: auto;
   transform: translate(-50%,0);
   font-size: 10px;
   background: #ff3f6129;
   user-select: none;
   cursor: pointer;
   color: #de4598;
   border-radius: 10px;
   padding: 1px 7px 2px 7px;
}
/*saveX-model*/

.saveX-model{
    display: none;
    width: 100%;
    height: 100vh;
    overflow-y: scroll;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    background: #fff;
}
/*.saveX-model::-webkit-scrollbar,
.saveX-model::-webkit-scrollbar-thumb{
    width: 10px;
    background: red;
}*/
.saveX-model .box{
    display: grid;
    grid-template-columns: 1fr;
}
.saveX-model .table{}

.saveX-model .table .yellow{
    background: #c7c12f52;
}

.saveX-model .table .yellow-red{
    background: #c7c12f73;
    color: red;
}
.saveX-model .table .blue{
    background: #7a83df57;
    color: #413bd4;
}
/*.saveX-model .table  tbody{
    border: 1px solid grey;
}*/
.saveX-model .table  tbody tr td,
.saveX-model .table  thead tr td{
  vertical-align: middle;
  text-align: center;
  font-size: 10px;
}
.saveX-model .table  thead{
   background: purple;
   color: #fff;
}
.saveX-model .inbound-table thead,
.saveX-model .table  .head{
   background: #3f406a;
   color: #fff;
}
.saveX-model .table  thead td{
   font-size: 12px!important;
}
.saveX-model .table  tbody tr:nth-child(2)  .yellow:nth-child(1),
.saveX-model .table  tbody tr:nth-child(7)  .yellow:nth-child(1){
       background: #7a83df57;
       color: #413bd4;
}

.saveX-model .table  tbody tr:nth-child(1),
.saveX-model .table  tbody tr:nth-child(6),
.saveX-model .table  tbody tr:nth-child(13),
.saveX-model .table  tbody tr:nth-child(16){
      border-bottom: 2px solid #231f1f61;
}

.saveX-model .table  .fatal-red:nth-child(3){
   color: red;
   background: #ff000012;
}
.saveX-model .table  .non-fatal-dim:nth-child(3){
     background: #33333314;
    color: #3f406a;
}
.saveX-model .table  .non-fatal-green:nth-child(3){
     background: #15b04d1c;
    color: #0d9d28;
}

.saveX-model .btn-group{
    display: block;
    margin: auto;
}
.saveX-model .submit-btn,
.saveX-model .close-btn{
      border: none;
      outline: none;
      box-shadow: none;
}


/*shadow model*/

.shadow-model{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    overflow-y: scroll;
    background: #20202dd9;
    transition: all .3s ease-in-out;
}
.shadow-model .box-outer{
   width: 350px;
   height: fit-content;
   margin: auto;
   padding: 10px 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 2;

}
.shadow-model .box{
   display: grid;
   grid-template-columns: 1fr;
   border-radius: 10px;
   box-shadow: var(--common-box-shadow);
  padding: 20px 25px;
   background: #fff;
}
.shadow-model .box-header{
    display: grid;
    grid-template-columns: 35px max-content;
    align-items: center;
    align-content: center;
    gap: 20px;
    padding: 10px 0;
}
.shadow-model .box-header h3{
    color: #333;
    font-size: 18px;
    letter-spacing: calc(1px / 2);
    padding: 10px 0;
}
.shadow-model .close-btn{
    height: 35px;
    border: none;
    outline: none;
    background: #ecb0b038;
    color: #ff000052;
    border-radius: 50px;
    transition: all .3s;
}
.shadow-model .close-btn:active{
    background: #ecb0b052;
    color: #ff0000e0;
    transition: all .3s;
}
.shadow-form{}
.shadow-form .edit-form-btn,
.shadow-form .add-form-btn{
    width: 100%;
    height: 45px;
    padding: 0 10px;
    border-radius: 6px;
    border: none;
    outline: none;
    background: #77a24775;
    color: #333;
}
.shadow-form .edit-form-btn{
    background: #338ee638;
}
#delete-model{
   display: none;
}
#delete-model .box{
    background: #fff;
    width: 300px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 2;
 }
#delete-model .delete-btn{
    border: none;
    outline: none;
    border-radius: 4px;
    padding: 5px 10px;
}
#delete-model .delete-btn{
    background: #ff000012;
    color: red;
}
#delete-model .close-btn{
    border-radius: 5px;
}
#delete-model .delete-btn:active{
 filter: blur(1px);
}
#delete-model .img-pup-box{
    width: 60px;
    height: 60px;
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 1;

}
#delete-model .img-pup-box img{
    width: 100%;
    height: 100%;
    border-radius: 50%;
}
/*user single view*/
#user-single-view-model{
    padding: 30px 0;
}
#user-single-view-model .box-group-outer{
    display: block!important;
     width: 750px;
     margin: auto;
}
#user-single-view-model .box-group{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}
#user-single-view-model .score-box{
  background: #fff;
  box-shadow: 0 0 10px 0 #212d111a;
  height: fit-content;
  padding: 30px 35px;
  border-radius: 20px;
  display: flex;
  justify-content: center;
  flex-flow: column;
  align-items: center;
}
#user-single-view-model  .score-box .score-box-header{
  width: 170px;
  height: 170px;
}

#user-single-view-model  .score-box  .circle {
        fill: none;
        stroke: #aadb34;
        stroke-width: 10;
        stroke-linecap: round;
        transform: rotate(-90deg);
        transform-origin: center;
        user-select: none;
        transition: all .7s ease-in-out;
}
#user-single-view-model  .score-box  .back-circle {
        fill: none;
        stroke: rgba(0, 0, 0,0.05);
        stroke-width: 10;
        stroke-linecap: round;
        transform: rotate(-90deg);
        transform-origin: center;
        user-select: none;
}
 #user-single-view-model .score-box   .score {
        text-anchor: middle;
        font-size: 24px;
        fill: #101a09a6;
        user-select: none;
}
#user-single-view-model .score-box   h3 {
        font-size: 1.4em;
        color: #333;
        user-select: none;
}
#user-single-view-model .box{
    background: #fff;
}
#user-single-view-model .box .box-header{
    padding: 20px 20px 0 20px;
}

.list-group-outer{
   display: grid;
   grid-template-columns: 1fr;
   gap: 20px;
   padding: 15px;
}
.list-group{
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}
.list-group .list-title{
   padding: 10px 0;
}
.list-group .list-title h3{
   font-size: 20px;
}
.list-group .list-item{
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
}
.list-group .item{
    display: grid;
    grid-template-columns: max-content 35px;
    grid-template-rows: 35px;
    justify-content: space-between;
    align-items: center;
    align-content: center;
    padding: 7px 7px;
    border-radius: 6px;
    border: 1px solid #e7e7e77d;
    background: #e6e9e747;
}
.list-group .item span{
    color: #827e7e;
}
.list-group .list-item h6{
    color: #827e7e;
}
.list-group .item button{
    color: #d111c0;
    background: #7c00ff12;
    width: 35px;
    height: 100%;
    line-height: 30px;
    border-radius: 4px;
    border: none;
    outline: none;
    transition: all .3s;
    position: relative;
}
.list-group .item button:active {
    color: #d111c0;
    background: #b400ff2b;
    transition: all .3s;
}
.list-group .item button span,
.list-group .item button .active-span{
    display: none;
    color: #000!important;
    background: #d7d7d6!important;
    width: fit-content!important;
    position: absolute;
    top: 105%;
    height: auto;
    padding: 0 8px;
    font-size: 12px!important;
    right: 0;
    border-radius: 5px;
}

.list-group .item button:hover .active-span,
.list-group .item button:hover span{
    display: block;
    transition: all .3s ease-in-out;
}
.list-group .item button:hover .active-span{
    display: grid!important;
    grid-template-columns: max-content max-content;
    gap: 5px;
    align-items: center;
    align-content: center;
}
.list-group .item button .active-span{
    background: #d9efe8!important;
    color: green!important;
}


#edit-model-user-data{
    padding: 20px 0;
}
#edit-model-user-data .box-outer{
    position: unset!important;
    transform: unset!important;
    top: unset;
    left: unset;
     margin: auto;
}
.edit-of-show{
    background: #cf804633;
    color: #cf8046;
    border-radius: 50px;
    padding: 3px 12px 6px 12px
}
#target-setting-dashboard,
#target-export-dashboard{
   padding: 30px 0;
}
#target-setting-dashboard .shadow-form,
#target-export-dashboard .shadow-form{
    width: 350px;
    margin: auto;
}


#target-export-dashboard .shadow-form .p-relative{
    position: relative;
}
#target-export-dashboard .shadow-form .this-dropdown-outer{
    width: 100%!important;
}
#target-export-dashboard .shadow-form input{
    user-select: none!important;
    cursor: pointer;
}
#target-export-dashboard .shadow-form .export-btn{
    padding: 9px 20px;
    border: none;
    outline: none;
    background: #ffe6eb;
    color: red;
    border-radius: 6px;
    width: 100%;
}
#target-export-dashboard .export-output-box-outer{
    display: none;
}
#target-export-dashboard .this-dropdown-outer{
    z-index: 9;
}
#target-export-dashboard .export-output-box{
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}
#target-export-dashboard .export-output-box-header{
   background: #0080001c;
   border-radius: 6px;
   padding: 20px;
}
#target-export-dashboard .icon-outer{
    width: 150px;
    height: 150px;
    background: #00800029;
    border-radius: 50%;
    font-size: 90px;
    margin: auto;
    text-align: center;
    vertical-align: middle;
    line-height: 154px;
    color: green;
}
#target-export-dashboard .export-output-box-body{
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}
#target-export-dashboard .export-output-box-body h3{
       font-size: 1.3em;
       color: green;
       text-align: center;
}
#target-export-dashboard .download-btn{
   padding: 9px 20px;
    border: none;
    outline: none;
    background: #136a4e5e;
    color: #0f5849;
    border-radius: 6px;
    width: 100%;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
}

#report-single-view-model  .box-group-outer{
    display: block!important;
     width: 750px;
     margin: auto;
     padding: 20px;
}
#report-single-view-model  .box-group{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

#report-single-view-model .box{
    padding: 20px 10px!important;
    height: fit-content;
}
#report-single-view-model .box-header{
    padding: 10px 20px!important;
}

/*from-audit-report-single-view-model*/
#from-audit-report-single-view-model{
/*    display: block;*/
}
#from-agent-report-single-view-model .box-group-outer,
#from-audit-report-single-view-model .box-group-outer{
     display: grid;
     grid-template-columns: 400px;
     height: 100%;
     justify-content: center;
     align-items: center;
     padding: 20px 0;
}

/*export-data-download-model*/
#export-data-download-model .export-output-box{
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}
#export-data-download-model .export-output-box-header{
   background: #0080001c;
   border-radius: 6px;
   padding: 20px;
}
#export-data-download-model .icon-outer{
    width: 150px;
    height: 150px;
    background: #00800029;
    border-radius: 50%;
    font-size: 90px;
    margin: auto;
    text-align: center;
    vertical-align: middle;
    line-height: 154px;
    color: green;
}
#export-data-download-model .export-output-box-body{
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}
#export-data-download-model .export-output-box-body h3{
       font-size: 1.3em;
       color: green;
       text-align: center;
}
#export-data-download-model .download-btn{
   padding: 9px 20px;
    border: none;
    outline: none;
    background: #136a4e5e;
    color: #0f5849;
    border-radius: 6px;
    width: 100%;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
}