/* body{
    text-transform: capitalize;
} */

[dir=ltr] .sa-nav--sidebar .sa-nav__arrow {
    
    transform: rotate(180deg);
}
.btn:disabled {
    background-color: #777474;
    border-color: #71706c;
    color: #ffffff;
}
.pl_50{
    padding-left:50px;
}
.ps_disable{
color:#bdc1c6;
font-size: 20px;
}
.ps_disable:hover{
    color:#bdc1c6;

}
.br-text{
        border: 1px solid #cccccc;
}
.w-30{
    width:30%;
}
.w_0{
    width:0px;
}
.w_100{
    width:100px;
}
.ft_24{
    font-size:24px;
}
.bg-yellow{
    background-color: #FFF59A;
}
.bg-red{
background-color: #ff5252a3;
}
.text_align_center{
    text-align: center;
}
.p_5{
    padding-left:5px;
    padding-right:5px;
}
.mt_22{
    margin-top:22px;
}
.mt-16{
    margin-top: 16px !important;
}
.mt_5{
    margin-top: 15px;
}
.h-35{
    height:35px
}
.form-control:disabled, .form-control[readonly] {
    background-color: #f5f7f8;
    opacity: 1;
}
.mt-30{
    margin-top: 30px;
}
.mt_20{
margin-top: 20px;
}
.mt_18{
    margin-top: 18px;
}
.pb_10{
    padding-bottom: 5px;
}
.p_20{
    padding:20px;
}
.pr-10{
    padding-right: 10px;
}
.pl-5{
padding-left: 5px;
}
.pr-100{
    padding-right: 200px !important;
}
.pb-10-20{
    padding: 10px 20px;
}

.p-10{
    padding:10px;
}
.pt-10{
    padding-top: 0px;
}
.pl-10 {
    padding-left: 356px;
}
.plr-5{
    padding:0px 5px;
}
.z-99{
    z-index:99;
}
.cl-red{
    color: red;
}

.font-16{
    font-size: 15px;
}
.w-185{
    width: 185px !important;
}
.lw{
   text-transform: lowercase;
}
.h-50{
    height:50px !important;
}

.btn-info {
    --sa-button--normal-bg-color:  #d71b3b;
    --sa-button--normal-font-color: #fff;
    --sa-arrow-opacity: 0.5;
    --sa-button--hover-bg-color:#d71e3d !important;
}
.btn-primary {
    /* --sa-button--normal-bg-color: #ffd333; */
    --sa-button--normal-font-color: #212529;
    --sa-arrow-opacity: 0.4;
    --sa-button--hover-bg-color: #d71b3b !important;
}
.breadcrumb-sa-simple .breadcrumb-item.active, .breadcrumb-sa-simple a {
    color: #d71b3b;
    letter-spacing: 0.5px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
}
.form-check-input:checked[type=checkbox] {
    background-image: url(../img/icons/basic-tick.png);
}

.dropdown-item.active, .dropdown-item:active {
    color: #3d464d;
    text-decoration: none;
    background-color: rgb(68 138 255 / 14%);
}

/* badges  */
.badge-sa-warning {
    background: #f0f2f5;
    color: #86919b;
}
.badge_cl{
    color: #f4cd09;
}
 /* dashboard  */
/* --------------------------------- */
.p_size{
    font-size: 17px;

}
.p_size_name{
font-size: 20px;
font-weight: 800;
}
.pesco_birthday img{
    width:40px;
}
.pl_130{
    padding-left: 130px;
    }

    .profile_flex{
        display: flex;
    }
@media screen and (min-width:315px)and (max-width:426px){
    .pl_130{
        padding-left: unset;
    }
    .profile_flex{
        display: unset;
    }
}
.wh-200{
    width: 200px;
    height: 200px;
}
.birthday_list_grid{
display: inline-flex;
    justify-content: space-between;
    width: 100%;
    padding-left: 25px;
}
/* fieldset  */
/* ----------------------- */

fieldset {
    padding: 1em;
    font: 80%/1 sans-serif;
    border: 1px solid #d4d9df;
}

legend {
    padding: 6px 5px;
    border: 1px solid #d4d9df;
    color: #2c3033;
    font-size: 16px;
    width: 50px;
    margin-top: -27px;
    background: #e9ecef;
}


/* notification  */

.sa-toolbar__button-indicator {
    background: #ec0a0a;
    border-radius: 0.40625rem;
    color: #ffffff;
}
.nt_txt{
    width: 100%;
    
}
.nt_i{
       position: absolute;
       right: 20px;
}

.sa-notifications__item-title--nowrap {
   
    white-space: unset;
}

/* login form  */
/* ---------------------- */

.login_btn{
    background-color: #d71e3d;
    border: 1px solid #d71e3d;
color: #fff;
}
.login_btn:hover{
    background-color: #d71e3d !important;
    border: 1px solid #d71e3d !important;
    color: #fff;
    }
.login_logo{
    padding-bottom: 50px;
}

.login-forgot{
    text-align: center;
    padding-top: 7px;
    font-size: 15px;
    font-weight: 400;
}


/* admin permission  */
/* -------------------- */
.permission_accodin{
background-color: fff;
}
.permission-accordion{
    padding: 25px;
}
.permission-accordion .accordion-item{

background-color: #fff;
border: 1px solid rgba(0,0,0,.125);
}
.permission-accordion .accordion-item .accordion-button {
    background-color: #f4f6fa;
}
.accordion-button::after {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    margin-left: auto;
    content: "";
    background-repeat: no-repeat;
    background-size: 1.25rem;
    transition: transform .2s ease-in-out;
}


.live_accordion_btn::after {

content: unset;
}
.per_ml_210{
    margin-left: 210px ;
}
.per_ml_480{
    margin-left: 480px;
}
.per_ml_421{
    margin-left: 421px;
}
.per_mt_4{
    margin-top: 4px;
}
.per_ml_8{
    margin-left: 8px;
}
.per_ml_370{
    margin-left: 370px;
}
.per_ml_130{
    margin-left: 130px;
}

.mobile_per{
    display: block;
    margin-left: 100px;
    margin-bottom: 10px;
}

.per_btn_p{
    padding: 15px 5px;
}

.per_hd_mg{
    margin-top: 20px;
    margin-bottom: unset;
}

.per_img_wd img{
    width: 30px;
}

.per_mg_40{
    margin-left: 40px;
}
/* .per_edit_line::after{
    border-right: 1px solid black;
    position: absolute;
} */

@media screen and (min-width:315px)and (max-width:1025px){
    .per_ml_210{
        margin-left:unset ;
    }
    .per_ml_480{
        margin-left: unset;
    }
    .per_ml_421{
        margin-left: unset;
    }
    .per_mg_40{
        margin-left: unset;
    }
    .per_mb_mt_8{
        margin-top: 8px;
    }
    .ad_per_edit{
        margin-right: unset !important;
        }
}

.ad_per_edit{
float: right;
margin-right: 50px;
}

/* adminstration btn  */
/* ------------------------ */
.ad-btn-sv a{
    background: #d71b3b;
    color: white;
    border: 1px solid;
    border-radius: 5px;
    padding: 8px 24px;

}       
.ad-btn-sv a span{
    padding-right: 10px;
}
.ad-btn-sv a:hover{
    background: #f35454 !important;
    color: white;
    border: 1px solid;
    border-radius: 5px;
}     

.ad-btn-sv button,.ad-btn-sv button:active,.ad-btn-sv button:focus{
    background:  #d71b3b;
    color: white;
    border: 1px solid;
    border-radius: 5px;
    padding: 8px 24px;

}       
.ad-btn-sv button span{
    padding-right: 10px;
}
.ad-btn-sv button:hover{
    /* background:  #448aff; */
    background: #c80e39;
    color: white;
    border: 1px solid;
    border-radius: 5px;
}     


/* leave request form  */
/* -------------------------- */

.leave_table{    
    border-color: rgba(101,109,119,.16);
}

.leave_input_date {
    border: unset;
    padding: 5px;
}


.leave_select_option {
    border: unset;
}
.leave_input{
    border: unset;
}

.leave_delete {
    color: red;
}
.leave_add{
    color: #434547;
}

.page-item.active .page-link {
    z-index: 3;
    color: #fff;
    background-color:#d71b3b;
    border-color: #d71b3b;;
}
.leave_sv_btn{
float: right;
    margin-top: 22px;
}

.data_space{
    margin: 50px 0px;
}
/* menu style  */

/* --------------------- */
.sa-sidebar {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    background-color: #ffffff;
    color: #425c70;
}
.sa-sidebar__header {
    background-color: #ffffff;
}
.sa-sidebar-logo__caption {
    background-color: #ffffff;
    font-size: 32px;
    /* font-weight: bold; */
    color: #448aff;
    letter-spacing: 1px;
}
.sa-nav--sidebar .sa-nav__title {
    flex-grow: 1;
    margin-bottom: -1px;
    padding-top: 1px;    font-size: 15px;
    letter-spacing: 0.5px;
    background-color:#d81b3b;
    color: white;
}


.sa-nav--sidebar .sa-nav__link:hover {
    /* background-color: #f1f1f1; */
    background-color:#d81b3b;
}

/* .menu_a_pl{
    padding-left: 60px !important;
} */



/* approval process  */

/* ----------------------- */

.col_ap_drop{
    display: inline-flex;
}
.col_ap_drop label{

padding-top: 6px;
    font-size: 20px;
    padding-right: 18px;
    width: 200px;
}
.app_i_tick a{
    color: #4d8dbf;
    float: right;
}

.btn-check:active+.btn, .btn-check:checked+.btn, .btn.active, .btn:active, .show>.btn.dropdown-toggle {
    background-color:#4d8dbf;
    border-color: #4d8dbf;
    color: #fff;
}

/* authorization */
/* --------------------- */
.permssion_a,.permssion_a:hover{
/* color:  #448aff; */
color: #db3737;
font-size: 20px;
}


/* live tracking  */
/* --------------------- */
.live_tracking_i{
font-size: 26px;
color: #232429;
}


.documnet_i{
font-size: 20px;
    color: #10cc30;
}


/* information box  */
/* -------------------------------- */
.information_span_check{
    display: inline-flex;
}
.information_span_check input{
margin-left: 10px;
}

.form-check-input:checked {
    background-color:#1174e6;
    border-color: rgb(88 153 193);
    /* color: #fff; */
}

.inform_chat{
    padding-left: 20px !important;
}

.d_flex{
    display: inline-flex;
}
.col_in_drop{
    display: inline-flex;
}
.info_mt{
margin-top: 4px;
font-size: 17px;
color: #5e6678;
}

.col_in_drop .info_label_user{
width: 100px;
    font-size: 17px;
    padding-top: 10px;
    color: #5e6678;
}

.flie_img_field{
    border: unset;
}
@media screen and (min-width:315px)and (max-width:425px){
    .d_flex{
        display: block;
    }
    .col_in_drop{
        display: block;
    }
    /* .information_span_check{
        display:unset;
    } */
}
/* .btn-check:active+.btn, .btn-check:checked+.btn, .btn.active, .btn:active, .show>.btn.dropdown-toggle {
    background-color: #448aff;
    border-color: #448aff ;
    color: #ffffff;
} */




/* 
.attach_btn {
    background-color: unset !important; 
     border-color: unset !important; 
    color: unset;
} */
/* employee attandance  */
/* -------------------------------- */
.emp_filter_btn{
background: #db3737;
border: 1px solid #db3737;
border-radius: 5px;
}

.emp_attdance_btn a {

border: 1px solid;
border-radius: 5px;
padding: 8px 24px;
}
.emp_attdance_btn .emo_blue{
    background: #448aff;
    color: white;
}

.emo_red:hover{
    background-color: #db3737;
}

.emo_ot:hover{
    background-color: #f5c000;
}
.emo_ot{
    color: #fff;
    background-color: #dcb116;
}
/* .change_model{
    width: 70%;
} */
.attend_start_img{
    border: unset;
    text-decoration: none;
}
.attend_start_img:hover{

    text-decoration: none;
}
.attend_start_txt{
    text-align: center;
    display: block;
    padding-top: 12px;
    font-size: 24px;
    color: #29af51;
    font-weight: 800;

}
.text_center{
    text-align:center;
}
.attend_p{
    margin-bottom: 0px;
    font-weight: 500;
    font-size: 16px;
    text-align: initial;
}
.txt_low{
        text-transform: lowercase;
}
.attend_stop_txt{
    text-align: center;
    display: block;
    padding-top: 12px;
    font-size: 24px;
    color: #f80d38;
    font-weight: 800;
    text-decoration: none;
}
.attend_start_img img{
    width: 100px;
}
.change_btn{
    display: inline-flex;
}

.change_btn_save{
    margin-right: 20px;
    color: #ffffff;
    border: 1px solid #db3737;
    background:#db3737;
    border-radius: 5px;
    padding: 6px 26px;
}
.change_btn_save:hover{
background: #921010;
}
.change_btn_save:hover{
    border: 1px solid #db3737;

    color: #ffffff;
    background: #db3737;

}
.change_btn_cancel{
    border-radius: 5px;
    background: #448aff;
    border-color:#448aff;
}


@font-face {
    font-family: myfont;
    src: url(../font/palatino-linotype/palab.ttf);
    /* src: url(../font/palatino-linotype/pala.ttf); */

  }

  .logo_font{
      font-family: myfont;
  }


  /* table  */
  table#newRow {
    display: none
  }
  
  div.addRow {
      line-height: 45px;
      background-color: #fff;
      padding-left: 10px;
      border-bottom: 1px solid;
      border-top: 1px solid #e5e5e5;
  }

  /* request form  */
  .job_remark input{
  width: 100%;
    border: unset;
    height: 41px;
    border-bottom: 1px solid #e6e8e9;
  }
  .job_remark{
      padding: 20px;
  }
  
  
  
   /* travel  */
  .travel_fieldset{
  padding: 1em;
    font: 80%/1 sans-serif;
    border: 1px solid #d4d9df;
    width: 200px;
    width: 49% !important;
    /* display: inline-flex; */
    margin-top: 37px !important;
  }

  .travel_fieldset legend {
    width: 130px;
  }
  .ps_d_flex{
      display: flex;
      margin-top: 10px;
  }
 
  .wt_270{
      width: 270px !important;
  }
  .mr_19{
      margin-right: 19px;
  }
  .mt_15{
      margin-top: 15px;
  }

  /* job Resumption  */

  .reporting_fieldset{
  padding: 1em;
    font: 80%/1 sans-serif;
    border: 1px solid #d4d9df;
    width: 200px;
    width: 779px !important;
    /* display: inline-flex; */
    margin-top: 37px !important;
}
.reporting_fieldset legend {
    width: 130px;
}

.passport_fieldset{
    padding: 1em;
      font: 80%/1 sans-serif;
      border: 1px solid #d4d9df;
      width: 200px;
      width: 779px !important;
      /* display: inline-flex; */
      margin-top: 37px !important;
  }
  .passport_fieldset legend {
      width: 190px;
  }
  
  
  
/* map css  */
#map{
    /*height: 400px;*/
    width: 100%;
}


.map_btn_bg{
    border: none;
    background: none;
}

.close_attendance{
    background: #ff1919;
    
}
.acive_attendance{
    background: #39ff39;
}

.email_lower{
    text-transform: lowercase;
}
.sv_btn{
    background: #db3737;
    color: white;
    border: 1px solid;
    border-radius: 5px;
    padding: 8px 24px;
    
}
.sv_btn span {
    padding-right: 10px;
}

/*employee attendence */


#attend_logout_div{
    display:none;
}

#attend_close_div{
    display:none; 
}
.audit-filter {
     border-bottom: none; 

}
.p_10{
    padding-left:10px;
    padding-right:10px;
}

.mb_15{
    margin-bottom:15px;
}
.leave_delete:hover{
    color:#ce0101;
}
.attend_start{
    text-decoration:none !important;
}

.attend_stop{
    text-decoration:none !important;
}
.attend_start_img{
    text-decoration:none !important;
}

.h_550{
    height:550px;
}


/*student form */

:root {
    --primary-color: rgb(11, 78, 179)
}

*,
*::before,
*::after {
    box-sizing: border-box
}

/* body {
    font-family: Montserrat, "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    display: grid;
    place-items: center;
    min-height: 100vh;
    background-color: #0b4eb3
} */

label {
    display: block;
    margin-bottom: 0.5rem
}

/*input {*/
/*    display: block;*/
/*    width: 100%;*/
/*    padding: 0.75rem;*/
/*    border: 1px solid #ccc;*/
/*    border-radius: 0.25rem;*/
/*    height: 35px*/
/*}*/
.no-height-input input{
    height: 35px;
    border: 1px solid #a79b9b;

}
.width-50 {
    width: 50%
}

.ml-auto {
    margin-left: auto
}

.text-center {
    text-align: center
}

.progressbar {
    position: relative;
    display: flex;
    justify-content: space-between;
    counter-reset: step;
    margin: 2rem 0 4rem
}

.progressbar::before,
.progress {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 4px;
    width: 100%;
    background-color: #dcdcdc;
    z-index: 1
}

.progress {
    background-color: rgb(0 128 0);
    width: 0%;
    transition: 0.3s
}

.progress-step {
    width: 2.1875rem;
    height: 2.1875rem;
    background-color: #dcdcdc;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1
}

.progress-step::before {
    counter-increment: step;
    content: counter(step)
}

.progress-step::after {
    content: attr(data-title);
    position: absolute;
    top: calc(100% + 0.5rem);
    font-size: 0.85rem;
    color: #666
}

.progress-step-active {
    background-color: #db3737;
    color: #f3f3f3
}

.form {
    width: clamp(320px, 30%, 430px);
    margin: 0 auto;
    border: none;
    border-radius: 10px !important;
    overflow: hidden;
    padding: 1.5rem;
    background-color: #fff;
    padding: 20px 30px
}

.step-forms {
    display: none;
    transform-origin: top;
    animation: animate 1s
}

.step-forms-active {
    display: block
}
.step-formss {
    display: none;
    transform-origin: top;
    animation: animate 1s
}

.step-formss-active {
    display: block
}

/* .group-inputs {
    margin: 15px 0px;
} */
.group-inputs {
    margin: 7px 0px;
}

@keyframes animate {
    from {
        transform: scale(1, 0);
        opacity: 0
    }

    to {
        transform: scale(1, 1);
        opacity: 1
    }
}

.btns-group {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem
}

.s_btn,.s_btn:hover,.s_btn:active,.s_btn:focus {
    padding: 0.75rem;
    display: block;
    text-decoration: none;
    background-color: #db3737;
    color: #f3f3f3;
    text-align: center;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: 0.3s;
    border:1px solid;
}

/*.btn:hover {*/
/*    box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--primary-color)*/
/*}*/

.progress-step-check {
    position: relative;
    background-color: green !important;
    transition: all 0.8s
}

.progress-step-check::before {
    position: absolute;
    content: '\2713';
    width: 100%;
    height: 100%;
    top: 8px;
    left: 13px;
    font-size: 12px
}

.group-inputs {
    position: relative
}

.group-inputs label {
    
        font-size: 15px;
        position: absolute;
        height: 19px;
        padding: 6px 7px;
        top: -19px;
        left: -3px;
        font-weight: 500;
    
   
}

.welcome {
    height: 450px;
    width: 350px;
    background-color: #fff;
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center
}

.welcome .content {
    display: flex;
    align-items: center;
    flex-direction: column
}

.checkmark__circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 2;
    stroke-miterlimit: 10;
    stroke: #7ac142;
    fill: none;
    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards
}

.checkmark {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: block;
    stroke-width: 2;
    stroke: #fff;
    stroke-miterlimit: 10;
    margin: 10% auto;
    box-shadow: inset 0px 0px 0px #7ac142;
    animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both
}

.checkmark__check {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards
}

@keyframes stroke {
    100% {
        stroke-dashoffset: 0
    }
}

@keyframes scale {

    0%,
    100% {
        transform: none
    }

    50% {
        transform: scale3d(1.1, 1.1, 1)
    }
}

@keyframes fill {
    100% {
        box-shadow: inset 0px 0px 0px 30px #7ac142
    }
}

/* .form-select+.select2-container--default .select2-selection {
    min-height: calc(38px + var(--sa-input-padding-y)*2);
} */

.text_wd_h{
    width: 100%;
    height: 100px;
}

[dir=ltr] .sel-form+.select2-container--default .select2-selection--single .select2-selection__rendered {
    background-position: right var(--sa-input-padding-x) center;
    padding-right: calc(var(--sa-input-padding-x)*2 + 5px);
    /* padding-top: 8px !important;
    padding-bottom: 8px !important; */

}
.img_single_btn{
background: transparent;
    border: none;
}
.img_single_btn:hover{
    background: transparent;
        border: none;
    }
.img_single_btn:focus{
    background: transparent;
        border: none;
        box-shadow: none;
    }
    .img_single_btn:active{
        background: transparent;
            border: none;
        }
.pt-8{
    padding-top: 8px;

}
.pb-8{
    padding-bottom: 8px;
}
.h-40{
    height: 40px;
}

table.table-padding.dataTable td {
    border-bottom-width: 1px;
    padding-top: 5px;
    padding-bottom: 5px;
}

.h-200 {
    height: 200px;
    
}
.text-success.disabled {
    color: #cbcaca ! important;
}

.form-text-error{
    color: red;
    font-size: 13px;
}
.fees_delete_btn{
background: none;
border: none;
color: red;
}
.fees_delete_btn:hover{
    background: none;
    border: none;
    color: red;
    }