/****** Data bank dashboard UI  ***********/
/*body {
    font-family: 'Roboto Slab', serif !important;
    font-family: 'Roboto', sans-serif;
    background-color:transparent;
}*/

body {
    font-family: 'Roboto Slab' !important;
    font-family: 'Roboto', sans-serif;
    background-color: transparent;
}








.databank_top {
   display:block;
}

    .databank_top .card {
        background-color: white !important;
        box-shadow: 0px 0px 30px 0px rgb(82 63 105 / 5%);
        color: #7C8DA7;
        border-radius: 15px !important;
    }

.approval_tracker {
    color: #7C8DA7;
    font-weight: bold;
    font-size: 16px;
    display: block;
   
}

    .approval_tracker.card.svg-icon.svg-icon-white svg g [fill] {
        color: #3A7CE9 !important;
    }


.approval_count {
    display: block;
    font-size: 24px;
    font-weight: bold;
    color: #302D2D;  position: relative;
    top: -9px;

}


.salary_section {
    background-color: #3A7CE9;
    padding-top: 50px;
}


    .salary_section a {
        color: white;
        font-family: "Poppins";
        font-size: 22px;
        font-weight: 500;
        display: block
    }

    .salary_section a span { font-size:15px; color:white; word-break:break-word;}

.salary_text {
}

.total_salary {
    display: flex;
    font-size: 25px;
    color: white;
    padding: 4px;
    margin: 0px;
    border: 1px dashed #fff;
    border-radius: 25px;
    padding-left: 20px;
}

.border_right {
    border-right: 1px dashed #76a5f3;
    height: 170px;
}

.loan {
    display: block;
    position: relative;
}

.loan_balance {margin-top:10px;}

.loan_balance a {
    font-size: 30px;
    font-weight: normal;
    color: white;
    background-color: #3A7CE9;
    border-radius: 25px; padding:4px 10px;
}

.icon_left {
    float: left;
    margin-right: 10px;
}

.approval_icon {
    float: left;
    margin-right: 12px;
}


.card_arrow {
    position: absolute;
    right: 20px;
    top: 75px;
}

.font-size-h3 {
    font-size: 1.2rem !important;
}

.active_employee {}

    .active_employee a {
        font-size: 1.2rem !important;
        color: #3F4254 !important;
     
    }


.active_employee_icon {
    float: left;
    margin-right: 12px;
}

.bottom_border {
    border-bottom: 1px dotted #c2c2c2;
    padding-bottom: 10px;
    margin-bottom: 10px;
}


.events_dashboard {}

    .events_dashboard.card {
        border-radius: 15px !important;
        padding: 10px;
    }


.events_databank {
    padding: 10px 50px 27px 30px;
}


.event_1 {
    border-right: 1px solid #dfdfdf;
}


    .event_1 img {margin-bottom:10px;}


.event_2 {
  text-align:right;
}


    .event_2 img {
        margin-bottom: 10px;
    }




    .middile_section {
    }





.middile_section .card {
    background-color: white !important;
    box-shadow: 0px 0px 30px 0px rgb(82 63 105 / 5%);
    color: #7C8DA7;
    border-radius: 15px !important;
}



.gutter-b {
    border-radius: 15px !important;
    box-shadow: 0 10px 16px 0 rgb(0 0 0 / 0%), 0 6px 20px 0 rgb(0 0 0 / 8%) !important;
}


.pie-chart {
    background: radial-gradient( circle closest-side, white 0, white 41.58%, transparent 41.58%, transparent 66%, white 0 ), conic-gradient( #4e79a7 0, #4e79a7 38%, #f28e2c 0, #f28e2c 61%, #e15759 0, #e15759 77%, #76b7b2 0, #76b7b2 87%, #59a14f 0, #59a14f 93%, #edc949 0, #edc949 100% );
    position: relative;
    width: 160px;
    min-height: 158px;
    margin: 0;
}

    .pie-chart h2 {
        position: absolute;
        margin: 1rem;
    }

    .pie-chart cite {
        position: absolute;
        bottom: 0;
        font-size: 80%;
        padding: 1rem;
        color: gray;
    }

    .pie-chart figcaption {
        position: absolute;
        bottom: 2em;
        right: -15em;
        font-size: smaller;
        text-align: right;
        font-size: 12px;
        font-family: 'Poppins';
    }

    .pie-chart span:after {
        display: inline-block;
        content: "";
        width: 0.8em;
        height: 0.8em;
        margin-left: 0.4em;
        height: 0.8em;
        border-radius: 0.2em;
        background: currentColor;
    }




.pf_applicablity {margin:0px; padding:0px;}

.pf_count {display:flex;}

.pf_no {
    display: flex;
    font-size: 31px;
    color: #04040c;
    font-weight: 500;
}
    .pf_no span {
        margin-left: 20px;
        color: #3a7ce9;
        font-weight: bold;
    }



 /********  ESSP Dashboard CSS  *********************/


.events_essp {margin-bottom:40px;}


.events_essp a img { width:100%;
}


.events_content {
    background-color: white;
    padding: 10px; width:100%;
}



.top_search_container {margin:0px 0px 10px 0px;}

.search_essp {
    width: 50%;
    margin: 10px 10px 0px 10px;
}

.search {
    border: none;
    border-radius: 20px;
    height: 50px;
    padding: 10px;
    width: 100%;
    background-color: #fff !important;
    box-shadow: 0 10px 16px 0 rgb(0 0 0 / 0%), 0 6px 20px 0 rgb(0 0 0 / 8%) !important;
}

.photos {
    padding: 17px 10px 0px 10px;
}
.photos span {margin:5px;}


    .photos a {
        font-family: 'Poppins';
        font-weight: 600;
        color: #0E1014;
        font-size: 15px;
    }

.photos a:hover {color:#3A7CE9;}


.feelings {
    padding: 17px 10px 0px 10px;
}

    .feelings span {
        margin: 5px;
    }


    .feelings a {
        font-family: 'Poppins';
        font-weight: 600;
        color: #0E1014;
        font-size: 15px;
    }

        .feelings a:hover {
            color: #3A7CE9;
        }


.post_announcement_container {
    margin: 10px 0px 10px 0px;
    box-shadow: 0 10px 16px 0 rgb(0 0 0 / 0%), 0 6px 20px 0 rgb(0 0 0 / 8%) !important;
}

    .post_announcement_container .card-header, .card-body {
        padding: 0px 25px;
    }

    .post_announcement_container .card-header .card-title {
        margin: 0px !important;
    }

    .post_announcement_container .card-stretch {
        border-radius: 10px;
    }



.social_adds{}



.alert_container {
    padding: 8px;
    display: flex; font-family:Roboto;
}

.alert_date {
    width: 45px;
    background: #E83333;
    height: 45px;
    border-radius: 7px;
    font-family: Roboto;
    color: white;
    text-align: center;
    margin-right: 10px;
    display: block;
    padding: 4px;
}

.alert_Green {
    background-color: #32bea6 !important;
    
}

.alert_pending {
    background-color: #f89618 !important
}


.alert_reject {
    background-color: #e83333 !important
}

.alert_text {
    padding: 0px;
    width: 80%;
    color: #9B9B9B;
}


.alert_status {
    position: relative;
    top: 5px;
}

    .alert_status img {
        width: 19px;
        margin-right: 8px;
    }



    .alert_status .btn {
        width: 90px;
        height: 30px;
        border-radius: 25px;
        color: white
    }



    .done {
        background-color: #47C5AF;
    }
.pending {
    background-color: #E89433;
}



/********  ESSP Dashboard CSS  *********************/




/******** login CSS  *********************/

.company_logo {
    height: 50px;
    background: url(../images/logo.png);
    background-repeat: no-repeat;
    background-position: center;
    width: 150px;
    /* background-color: black; */
    /* z-index: 1000; */
    background-size: cover;
    max-width: 90%;
    float: right;
    position: absolute;
    right: 0;
}



.login-outer {background-color:inherit ;}




    .login-signin p {
        text-transform: uppercase;
        font-size: 19px;
        opacity: 1 !important;
    }


.mb-5 h3 {
    font-size: 48px;
    font-weight: 400;
    color: black;
}

.hr_portal {
    font-size: 23px !important;
    font-weight: normal !important;
    text-transform: uppercase; font-weight:bold;
    color: #1a84d9;
}



.checkbox.checkbox-outline > span {border-radius:5px;}


./*login_right_img {*/
  /*  background-image: url(../images/login_bg.png);*/

    /*background-repeat: no-repeat;
    background-position: bottom;
    background-size: contain;
}*/



/******** login CSS  *********************/


 @media only screen and (max-width:1115px) {

    .login-signin {
        width: 100% !important;
    }

    .login-outer {
        width: 100% !important;
    }

}

@media only screen and (max-width:991px) {

    .mb-5 h3{
        font-size:35px;
    }
    .login-signin p {
     
        font-size: 15px;
     
    }
    .form-control {
        font-size: 12px;
    }
    .login-btn {
        font-size: 13px;
    }
    .copy-right {
       
        font-size: 10px;
    }
    .form-group label {
        font-size: 10px;
    
    }
    .font-weight-bold {
        font-size: 10px;
    }
    .login-width{
        width:100% !important;
    }

    }




/***********************  new Dashboard  *******************************************/

.bg_essp {
    background: url(../images/ESSP_bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top;
    height: 100%;
}





.worklog_container {display:flex; font-family:Roboto; color:white; margin-bottom: 100px; margin-top:80px;}

.work_time {
    font-family: Roboto;
   
}

    .work_time p {
        margin: 0px;
        font-size: 70px;
        font-weight: 500;
    }

.totl_wrk_time {
    color: #4ECE75; font-size:13px;
}

.punching_section {
    padding: 10px;
    border: 2px dotted #c2c2c2;
    height: 80px;
    margin-top: 30px;
    border-radius: 17px;
}


.punching_section p {padding:0px; margin:0px; font-size:19px;}

.question_title {
    background-color: #123587;
    padding: 4px;
    border-radius: 8px 8px 0px 0px;
    color: white;
    width: 100%;
    font-size: 16px;
    padding: 10px;
}

.progress_qust {padding:0px 12px 12px 12px;}

.progress_qust p {margin:0px;}


.progress_qust .progress {margin-bottom:10px;}

.moodmeter {padding:10px;}


    .moodmeter span {
        font-size: 26px;
        color: #185DFE;
        font-weight: bold; cursor:pointer;
    }

    .moodmeter span:active {background-color:blue; border:2px solid red;}

.d_title {
    font-size: 18px;
    font-family: roboto;
}


.punch_in {
    color: #1DEC5C;
    font-weight: 600;
}

.punch_out {
    color: #FC0000;
    font-weight: 600;
}



.celebrations {padding:5px; display:flex;}

  hr {margin:0px !important;}

.celebrations p {
    display: block;
    padding: 0px;
    margin: 0px;
    font-size: 12px;
    padding-top: 8px;
}

.celebrations_text {
    font-family: Poppins;
    font-weight: bold;
  
    margin-left: 10px;
}

.celebrations_destination {
    font-size: 12px;
    font-weight: normal;
}





@media (min-width: 1200px) {

 

    .punching_section p {font-size:14px;}

    .work_time p {
        font-size: 30px;
    }


}

.margin_auto {
    margin: 0 auto;
}


.present_box1 {
   /* width: 50% !important;
    height: 41px;*/
    background-color: #48BF6C;
    color: white;
    font-size: 20px;
    font-family: Poppins;
    text-align: center;
    padding: 5px;
    cursor: pointer;
    margin: auto;
    /* box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.2), 0 6px 7px 0 rgba(0, 0, 0, 0.19); */
    position: relative;
    border-radius: 5px;
    margin-bottom: 0px;
    margin-top: 0px;
}
.absent_clndr {
    background-color: #E63B3B;
}

.leave_clndr {
    background-color: #5F5171;
}
.holiday_clndr {
    background-color: #0090FF;
}

.weeklyoff_clndr {
    background-color: #B7B7B7;
}

.onduty_clndr {
    background-color: #FF8800;
}


.calender_title {
  /*  position: absolute;*/
     color: black;
    font-size: 12px;
    /* margin-top: 7px; */
    text-align: center;
    font-size: 13px;
    font-weight: 300;
    width: 100%;
}


    .calender_title p {
        margin: 0px;
        padding: 6px 0px 0px 0px;
        color: #fff;
        font-family: Roboto;
        font-weight:500;
    }


    .border_calender {
        border-bottom: 3px solid #FF8800;
    }




.date_details {
   /* padding: 30px;*/
    text-align: left;
}


.date_active {color:green;}

    .date_details label {
      font-family:Roboto; font-weight:bold; font-size:14px;
    }


.date_details label i {margin-right:10px;}


.punching_details {
    background-color: #F2F2F2;
    padding: 0px;
    text-align: left;
    display:none;
}



    .punching_details .row {margin:14px;}

    .punching_details label {
        font-size: 13px;
        font-weight: 500;
        color: #000000;
    }

    .punching_details p  {padding:0px; margin:0px; font-size:11px;}

        .punching_details p i {margin-right:8px;}

        .time_border {
            border-bottom: dotted 2px #c2c2c2;
        }



.left-onboarding_scroll  {
    display: block;
    height: 88px;
    overflow-y: scroll;
}
.tab_new_panel {
    padding-right: 8px;
}

#special-days p {
    display: none !important;
}
/*.k-calendar-table {
    margin-right: 0 !important; width:62% !important;
}*/


.k-calendar-monthview .k-calendar-td, .k-month-calendar .k-calendar-td {
    /*width: 5% !important;
    height: 60px !important;*/
    font-size: 14px !important; padding:0px !important;
    font-family: 'Poppins' !important;
}

.para_alert{
    cursor:pointer;
}
.k-calendar .k-calendar-td.k-selected .k-calendar-cell-inner, .k-calendar .k-calendar-td.k-selected .k-link {
    border-color: #ff317e !important;
    color: #fff;
    background-color: #ff317e !important;
    box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.2), 0 6px 7px 0 rgba(0, 0, 0, 0.19) !important;
}

.leave_notification {
    background-color: #E63B3B;
    width: 50px;
    height: 50px;
    border-radius: 25px;
    box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.2), 0 6px 7px 0 rgba(0, 0, 0, 0.19) !important;
}


.date_special {
    background-color: #5CEF89 !important;
    position: absolute;
    z-index: 10;
    top: 40px;
    background-repeat: no-repeat;
    background-position: bottom center;
    background-image: radial-gradient( rgb(92 238 136), rgb(67 157 94)), url('../images/clnder_date_bg.png');
   
    width: 36%;
    height: 286px;
    padding: 12px;
    text-align: center;
    color: white;
}

    .date_special h4 {
        font-size: 90px;
        color: white;
        text-align: center;
       
    }

/*.nav .show > .nav-link, .nav .nav-link:hover:not(.disabled), .nav .nav-link.active {color:white !important;}
*/
.border_bttm {
    border-bottom: 1px solid #47536e;
    margin-bottom: 10px;
    width: 96%;
    margin: 10px;
}

.header_clr {
    background-color: #123587;
    color: white;
}





/*<dashboard>*/



.common_space {
    padding: 40px 0px 0px 40px;
}
.essp_exit {
    padding: 10px 10px !important;
    background-color: transparent !important;
    font-weight: 500;
    font-size: 13px;
    border-bottom:none !important;
}
.tab-content{
    background-color:transparent !important;
}
.document_pend {
    padding: 7px 10px;
    background-color: #FFFFFF;
    border: 1px solid #ACBBD2;
    border-radius: 7px;
    margin-bottom: 10px;
}
.alert_head {
    font-size: 12px;
    margin-bottom: 0px;
}
.alert_head {
    font-size: 11px;
    color: #192940;
    font-weight: 600;
}
.active_head {
    color: #0165F7;
}
.para_alert {
    font-size: 11px;
    color: #8B8B8B;
    margin-bottom: 0px;
    padding-top: 2px;
}

.tab-content{
    padding:0px;
}
.dotted_border {
    border: 1px dotted #ACBBD2;
    background-color:transparent;
}
/*.nav .show > .nav-link, .nav .nav-link:hover:not(.disabled), .nav .nav-link.active {
    color: #0068FF ;
}*/
.right_notification {
    width: 25px;
    height: 25px;
    object-fit: cover;
}

    .right_notification img {
        width: 100%;
        height: 100%;
    }

.note_right {
    font-size: 16px;
    color: #000000;
    padding-left: 15px;
}
.notificatiobn_new {
    padding: 11px 0;
}
.celebrate_name {
    font-size: 14px;
    color: #000000;
    font-weight: 500;
    margin-bottom: 0;
    padding-bottom: 2px;
}
.celebrate_cls {
   

}
.upcoming {
    padding: 5px 12px;
    background-color: #fff;
    border-radius: 10px;
    margin-top: 20px;
}
.celebrate_img {
    width: 84px;
    height: 84px;
    object-fit: cover;
}
    .celebrate_img img {
        width: 100%;
        height: 100%;
        object-fit: cover
    }
.company_pro {
    padding-bottom: 2px;
    color: #545454;
}
.celebrate_date {
    font-size: 12px;
    color: #000B17;
    font-weight: 600;
}
.tab_essp {
    color: #B1B1B1 ;
font-weight:600;
}
.dot_light {
    width: 20px;
    height: 20px;
    border-radius: 50px;
    display: flex;
    border: 1px solid #0068FF;
    justify-content: center;
    align-items: center;
    margin-left: 5px;
    font-size: 9px;
 /*   padding-top: 4px;*/
}
    .dot_light.active {
        background-color: #0068FF ;
        color: #fff;
    }
.upcoming_day {
    width: 100% !important;
    /* background-image: url(../images/party.png);*/
    background-color: #284259;
    background-position: center;
    background-repeat: no-repeat;
    /* background-size: cover;*/
    /*border-radius: 21px;*/
    /* padding: 20px;*/
    height: 213px;
    border-radius: 10px;
  /*  background-color: transparent !important;*/
    box-shadow: none !important;
    display: flex;
    align-items: center;
}
.birthday_card{
    width:100%;
    height:100%;
}
.birthday_day {
    height: 100%;
    display: flex;
    background-color: #0e141a;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    background-image: url('/images/icons/rect_new.png');
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    /*  position: absolute;*/
    background-position: center;
    /*    left: 0;*/
}

.upcoming_name {
    color: #fff;
    font-size: 16px;
    padding-bottom: 10px;
    border-radius:50%;
}
.upcoming_img {
    width: 35px;
    height: 35px;
    object-fit: cover;
    margin-left: -15px;
}

    .upcoming_img img {
        width: 100%;
        height: 100%;
        border-radius:50px;
    }
.birthday_img {
    width: 80px;
   /* height: 80px;*/
    object-fit: cover;
    margin:auto;

}
.birthday_img img{
    width: 100%;
 /*   height: 100%;*/
 
}
.avarage_img{
    width:70px;
    height:70px;
    object-fit:cover;
    margin:auto;
}
.avarage_img img {
    width: 100%;
    height: 100%;
border-radius:50%;
}
.avg_card {
    font-size: 11px;
    color: #fff;
    text-align: center;
    padding-top: 5px;
    margin-bottom:0px;
}

.card_designation {
    font-size: 10px;
    color: #fff;
    text-align:center;
}
.search_id {
    width: 55px;
    height: 55px;
    object-fit: cover;
    border-radius: 50px;
    border: 2px solid #fff;
    object-fit: cover;
}
.search_id img{
    width:100%;
    height:100%;
    border-radius:50px;
}
.top_padding{
    padding-top:30px ;
}
.commentbox {
    height: 45px;
    border-radius: 50px;
    width: 360px;
    margin-left: 15px;
    background-color: #F3F3F3;
}
.gallery_icon {
    width: 24px;
    height: 25px;
    object-fit: cover;
}
.gallery_flex {
    margin-left: 60px;
}
.gallery_icon img {
    width: 100%;
    height: 100%;
}
.photos_font {
    font-size: 13px;
    color: #505050;
    padding-left:5px;
}

/*.overlay_birth {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #00000075;
    margin-left: 12px;
    margin-right: 12px;
}*/

.social_img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    margin-right: 5px;
}

.social_img img  {
    width: 100%;
    height: 100%;
    border-radius:50px;
}
.social_text h3 {
    font-size: 15px;
    color: #1C1C1C;
    margin-bottom: 0px;
    font-weight: 500;
}

.social_text div {
    font-size: 12px;
    color: #AFAFAF;
}
.happy_birth {
    font-size: 11px;
    color: #000000;
    font-weight: 500;
    padding: 10px;
}
.birthday_cake_icon{
    width:12px;
    height:12px;
    object-fit:cover;
}
.birthday_cake_icon img{
    width: 100%;
    height: 100%;
 
}
.group_img{
    height:100%;
    width:100%;
    object-fit:cover;

}
.group_img  img{
    height: 100%;
    width: 100%;
    object-fit:cover;
 
}
.likes {
    font-size: 11px;
    color: #001230;
    padding-right: 20px;
}
.fa-thumbs-up {
    font-size: 17px;
    padding-right: 5px;
}
.fa-comments {
    font-size: 17px;
    padding-right: 5px;
}
.comment_set {
    display: flex;
    align-items: center;
    padding-top: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #ececec;
}
.social_media {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    margin-top: 15px;
    margin-right: 20px;
}
.comments_img{
    width:40px;
    height:40px;
    object-fit:cover;

}
.comments_img img{
    width: 100%;
    height: 100%;
    border-radius:50px;
}
.comment_box h5 {
    font-size: 12px;
    margin-bottom:0px;
    color: #001230;
    font-style:italic;
}
.comment_box p {
   margin-bottom:0;
   font-size:11px;
    
}
.comment_box {
    background-color: #ECECEC;
    padding: 4px 120px 4px 10px;
    border-radius: 7px;
    margin-left: 10px;
}
.comment_padding {
    padding: 11px 9px;
}
.scroll_comments{
    display:block;
    height:130px;
    overflow-y:scroll;
    overflow-x:hidden;
}
.scroll_media {
    height: 680px;
    overflow-y: scroll;
    display: block;
}
::-webkit-scrollbar-track {
    background-color: transparent;
    margin-top: 30px;
}
::-webkit-scrollbar {
    width: 5px;
}
.note_cls {
    background-color: #fff;
    height: 100%;
    position: relative;
    bottom:0;
    border-radius:10px 10px 0 0;
}
 .k-hstack {
    background-color: transparent !important;
    border: none !important;
}
.k-calendar{
    border:none !important;
}
.k-calendar-table{
    width:100%;
}
.k-d-flex-col{
    padding:20px;
}

.card{
    border:none!important;
}



@media screen and (max-width:1400px) {
    .commentbox {
        width: 300px;
        height:40px;
    }

    .group_img {
        height: 220px;
    }

    .common_space {
        padding: 10px 0px 0px 40px;
    }

    .top_padding {
        padding-top: 10px;
        /* padding-left: 40px;*/
    }

    .upcoming_day {
        height: 160px;
    }

    .birthday_img {
        width: 40px;
    }

    .essp_exit {
        font-size: 12px;
    }

    .upcoming_day {
        background-size: cover;
    }

    .main-outer-div {
        padding: 0px;
    }

    .k-d-flex-col {
        padding: 10px 10px 0px 10px;
    }

    .scroll_media {
        height: 490px;
    }

    .alert_head {
        font-size: 11px;
    }

    .para_alert {
        font-size: 10px;
    }

    .left-onboarding_scroll {
        display: block;
        height: 165px;
        overflow-y: scroll;
    }

    .right_notification {
        width: 20px;
        height: 20px;
        object-fit: cover;
    }

    .note_right {
        font-size: 15px;
    }

    .upcoming {
        margin-top: 10px;
    }

    .celebrate_name {
        font-size: 13px;
    }
    .company_pro{
        font-size:10px;
    }
    .celebrate_date{
        font-size:10px;
    }
    .essp_exit {
        font-size: 11px;
    }
    .upcoming_name {
        color: #fff;
        font-size: 12px;
        padding-bottom: 5px;
        border-radius: 50%;
    }
    .avg_card, .card_designation {
        font-size: 9px;
    }
    .punching_details p {
        padding: 0px;
        margin: 0px;
        font-size: 10px;
    }
    .present_box1 {
        font-size:11px;
    }
    .social_img {
        width: 40px;
        height: 40px;
        object-fit: cover;
    }
    .social_text h3 {
        font-size: 12px;
       
    }
    .border_calender {
        height: 120px !important;
    }
    .punching_details label {
        font-size: 11px;
    }
    .gallery_icon {
        width: 17px;
        height: 17px;
        object-fit: cover;
    }
    .comment_box h5 {
        font-size: 13px;

    }
    .comment_box p {
        margin-bottom: 0;
        font-size: 10px;
    }
    .dot_light {
        width: 19px;
        height: 19px;
    }
    .joinees {
        height: 155px !important;
    }

    .new_join {
        font-size: 11px !important;
    }

    .welcome_join {
        font-size: 8px;
        color: #a0b2c3;
        padding-bottom: 5px;
    }

    .new_join_img {
        width: 75px;
        object-fit: cover;
    }

    .joinnew_img {
        width: 80px;
        height: 80px;
    }

    .owl-carousel .owl-item img {
        object-fit: cover;
    }

    .slide_name {
        font-size: 8px !important;
    }

    .new_join_img {
        width: 65px !important;
        object-fit: cover;
    }

    .new_join_work {
        font-size: 9px !important;
    }

    .new_join_wedding {
        width: 65px !important;
    }

    .celebrate_svg {
        width: 30px !important;
        /* height: 50px; */
        object-fit: cover;
    }
    }
@media screen and (max-width: 1300px) {
   .group_img {
    height: 260px;
}
    .scroll_media {
        height: 490px;
        margin-bottom: 15px;
    }
    .commentbox {
        width: 250px;
    }
    .alert_head {
        font-size: 12px;
    }
    .upcoming_day {
        height: 155px;
    }
    .joinees {
        height: 155px !important;
    }
    .new_join {
        font-size: 11px !important;
       
    }
    .welcome_join {
        font-size: 8px;
        color: #a0b2c3;
        padding-bottom: 5px;
    }
    .new_join_img {
        width: 75px;
        object-fit: cover;
    }
    .joinnew_img {
        width: 80px;
        height: 80px;
    }
    .owl-carousel .owl-item img{
        object-fit:cover;
    }
    .slide_name {
        font-size: 9px !important;
      
    }
    .new_join_img {
        width: 65px !important;
        object-fit: cover;
    }
    .new_join_work {
        font-size: 9px !important;
    }
    .new_join_wedding {
        width: 65px !important;
    }
    .celebrate_svg {
        width: 30px !important;
        /* height: 50px; */
        object-fit: cover;
    }
    .calender_title {
       
        font-size: 12px;
        
    }
    }
@media screen and (max-width: 1200px) {
    .top_padding {
        padding-top: 25px;
        padding-left: 40px;
    }
   
  
}



@media screen and (max-width:767px) {
    .common_space {
        padding: 0px 12px 10px 6px;
    }

    .commentbox {
        width: 220px;
    }
    .top_padding {
        padding-left: 20px;
    }
    .note_cls {
        margin: 20px;
    }
}


.profile_text {
    width: 60px !important;
    height: 60px !important;
    margin: auto;

}
.border_calender {
    height: 81px;
}




.joinees {
    padding: 20px;
    background-color: #00203D;
    border-radius: 10px;
    height: 213px;
}
.new_join{
    font-size:13px;
    color:#fff;
}
.welcome_join {
    font-size: 9px;
    color: #a0b2c3;
    padding-bottom: 5px;
}
.new_join_img{
    width:125px;
    object-fit:cover;
}
.new_join_img img {
    width: 100%;
    height:100%;

}
.joinnew_img {
    width: 60px;
    height: 110px;
    object-fit: cover;
    border-radius: 5px;
    border: 1px solid #466E94;
}
    .joinnew_img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 5px;
    }
.joining_name {
    width: 100% !important;
    background-image: url(../images/icons/back.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 10px 0px;
    height: 100%;
 display:flex;
    align-items: center;
    cursor:pointer!important;
}
.slide_name {
    font-size: 9px;
    color: #B7DEF7;
    text-align: justify;
    line-height: 12px;
}


/*<wedding>*/
.wedding_settings {
    background-color: #141737 !important;
}

.wedding_name {
    width: 100% !important;
    background-image: url(../images/icons/over.svg) !important;
   
}
.new_join_work {
    font-size: 12px ;
}
.new_join_wedding {
    width: 95px ;
}
.joinee_wedding {
    width: 55px;
    height: 55px;
}
    .joinee_wedding img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 5px
    }
.celebrate_svg{
    width:50px;
/*    height:50px;*/
    object-fit:cover;
}
.celebrate_svg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.join_develop{
    color:#fff !important;
}
.join_date {
    color: #fff !important;
}
#carousels {
    margin: 0 8px;
}
.mb-5 h3 {
    font-size: 58px;
    /* font-weight: 600; */
    color: black;
    position: relative;
    margin-bottom: 0px;
}
.login_new_padding {
    padding: 130px;
    width: 100%;
}
.login-signin{
    text-align:left;
}
@media screen and (min-width:1700px) {

    .essp_exit {
        padding: 10px 10px !important;
        background-color: transparent !important;
        font-weight: 500;
        font-size: 15px;
        border-bottom: none !important;
    }

    .alert_head {
        font-size: 14px;
    }

    .para_alert {
        font-size: 12px;
       
    }
    .celebrate_name {
        font-size: 16px;
    }
}


.work_roundbox {
    width: 40px !important;
    height: 40px !important;
    margin: auto;
}

.likes-color-chng {
    color: blue;
}
.left-onboarding_scroll {
    display: block;
    height: 105px;
    overflow-y: scroll;
}

.non_img_employee {
    width: 65px !important;
    height: 65px !important;
    box-shadow: rgba(99, 94, 102, 0.2) 0px -1px 15px 0px;
}








/*dashboard essp abin */

.preview-images-zone {
    width: 100%;
    min-height: 180px;
    /* display: flex; */
    padding: 5px 5px 0px 5px;
    position: relative;
    overflow: auto;
}

    .preview-images-zone > .preview-image:first-child {
        height: 185px;
        width: 185px;
        position: relative;
        margin-right: 5px;
    }

    .preview-images-zone > .preview-image {
        height: 90px;
        width: 90px;
        position: relative;
        margin-right: 5px;
        float: left;
        margin-bottom: 5px;
    }

        .preview-images-zone > .preview-image > .image-zone {
            width: 100%;
            height: 100%;
        }

            .preview-images-zone > .preview-image > .image-zone > img {
                width: 100%;
                height: 100%;
            }

        .preview-images-zone > .preview-image > .tools-edit-image {
            position: absolute;
            z-index: 100;
            color: #fff;
            bottom: 0;
            width: 100%;
            text-align: center;
            margin-bottom: 10px;
            display: none;
        }

        .preview-images-zone > .preview-image > .image-cancel {
            font-size: 18px;
            position: absolute;
            top: 0;
            right: 0;
            font-weight: bold;
            margin-right: 10px;
            cursor: pointer;
            display: none;
            z-index: 100;
        }

.preview-image:hover > .image-zone {
    cursor: move;
    opacity: .5;
}

.preview-image:hover > .tools-edit-image,
.preview-image:hover > .image-cancel {
    display: block;
}

.ui-sortable-helper {
    width: 90px !important;
    height: 90px !important;
}

/*dashboard essp abin */