@import url('https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300&display=swap');
@import "tablestyle.css";

body {
    display: block;
    font-family: 'Poppins', sans-serif !important;
}

:root {
    --main-color-one: #2cc185;
    --main-color-one-hover: #0e9c62;
    --blue-color-theme: #217bff;
    --blue-color-theme-hover: #0060ad;
    --green-color-theme: #2cc185;
    --green-color-theme-hover: #0e9c62;
}

::-moz-selection {
    /* Code for Firefox */
    background: var(--main-color-one);
    color: #fff;
}


::selection {
    background: var(--blue-color-theme);
    color: #fff;
}

.width-30 {
    flex: 0 0 30%;
    max-width: 30%;
}

.width-70 {
    flex: 0 0 70%;
    max-width: 70%;
}

.width-22 {
    flex: 0 0 22%;
    max-width: 22%;
}

.width-78 {
    flex: 0 0 78%;
    max-width: 78%;
}

.width-90px {
    width: 110px;
    max-width: 110px;
}

.width-150px {
    width: 150px;
}

.inline-block {
    display: inline-block;
}

.float-right-btn {
    text-align: right;
}

    .float-right-btn .btn.btn-icon,
    .float-right-btn .small-btn-group .file-upload {
        float: none;
    }



span.mandatory-symbol {
    color: red;
}


/* Reveal */
.more-alert {
    background-color: #f64e60;
    padding: 20px;
    height: 152px;
    border-radius: 4px;
}

    .more-alert h4 {
        color: #fff;
        font-size: 16px;
        font-weight: 500;
    }

    .more-alert div.alert-list {
        color: #fff;
        font-size: 12px;
        font-weight: 400;
    }



/* ====================================================
                   COLOR THEME START
======================================================== */
/*.btn.add-profile i,
.minus-mt-50 h4,
.employee-outer-detils h4,
.personal-details-left .ulList > li.active {
    color: var(--blue-color-theme);
}

.btn.add-profile:hover i {
    color: var(--blue-color-theme-hover);
}


.tab-content {
    border-color: var(--blue-color-theme);
}

.btn.btn-default-outline{
    border-color    : var(--blue-color-theme-hover) !important;
    background-color: #fff;
}*/
/* .btn.btn-default-outline:hover{
    color           : #fff;
} */
/* COLOR THME START */

/*.aside,
.aside-menu,
.choices__list--multiple .choices__item.is-highlighted,
.aside-menu .menu-nav>.menu-item {
    background-color: var(--blue-color-theme-hover) !important;
}

    .select-pure__selected-label,
    .choices__list--multiple .choices__item,
    .profile-header,
    .menu-link.menu-toggle:hover,
    .aside-menu .menu-nav > .menu-item.menu-item-open > .menu-heading,
    .aside-menu .menu-nav > .menu-item.menu-item-open > .menu-link,
    .table-dark,
    .table-dark > th,
    .table-dark > td,
    .ulList > li.active {
        background-color: var(--blue-color-theme);
    }*/
/*.ulList > li.active {
    background-color: #2ba659;
}*/

/*

.login-overflow,
.aside-menu .menu-nav>.menu-item .menu-submenu:hover,
.aside-menu .menu-nav>.menu-item .menu-submenu a:hover {
    background-color: transparent !important;
    
}


.table-dark th,
.table-dark td,
.table-dark thead th {
    border: 1px solid var(--blue-color-theme-hover) !important;
}*/

.btn.btn-default,
.btn.btn-icon.btn-arrow-left,
.btn.btn-icon.btn-arrow-right,
.btn.add-profile,
.btn.btn-upload,
.successor-profile-img .view-profile {
    background-color: var(--blue-color-theme)!important;
    border-color: var(--blue-color-theme);
    color: #fff;
}

    .btn.btn-default:hover,
    .btn.btn-default:focus,
    .btn.btn-icon.btn-default:hover,
    .btn.btn-icon.btn-arrow-left:hover,
    .btn.btn-icon.btn-arrow-right:hover,
    .btn.add-profile:hover,
    .btn.btn-upload:hover {
        background-color: var(--blue-color-theme-hover) !important;
        border-color: var(--blue-color-theme-hover) !important;
    }

/*.ihits-table.odd-even table tbody tr:nth-child(even),
.ihits-table.hover-color table tbody tr:hover {
    background-color: #e7f4ff;
}*/

.ihits-table table {
    table-layout:fixed;
    width: 100%;
    /*    margin-bottom:85px;*/
}

.ihits-table {
    padding-bottom: 0px;
}
/* ====================================================
                   COLOR THEME END
======================================================== */



.header-menu-wrapper .main-title {
    font-size: 16px;
    line-height: 18px;
    margin: 10px 30px 0px 0px;
    padding: 0px 0px 0px 0px;
}

.alert-info {
    color: #055160 !important;
    background-color: #cff4fc !important;
    border-color: #b6effb !important;
    font-size: 16px;
    border-radius: 0px;
    margin-bottom: 5px;
    padding: 7px 10px;
}

.width-100 {
    width: 100%;
}

textarea.form-control {
    height: 55px;
}
/* ====================================================
                   LOGIN STYLE END
======================================================== */
.login-main-outer {
    position: relative;
    top: 0px;
    z-index: 9;
    height: 100%;
    width: 100%;
    justify-content: center;
    align-items: center;
    display: flex;
}

.login-outer {
    width: 450px;
    background: rgb(255,255,255);
   /* background: linear-gradient(35deg, rgba(255,255,255,1) 0%, rgba(235,244,255,1) 100%);*/
    padding: 20px;
    height: 100%;
    justify-content: center;
    align-items: center;
    display: flex;
    position: relative;
    z-index: 2;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
}

.login-bg {
    flex-grow: 1;
    background: url(../images/login-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
    height: 100%;
}

.login-main-outer.login1 .login-bg {
    background: none;
}

.login-main-outer.login1 {
    background: url(../images/login-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
}

    .login-main-outer.login1 .login-outer {
        margin-right: 100px;
        height: auto;
        border-radius: 20px;
        width: 350px;
        padding: 25px;
        background: #0f417a;
        background: -moz-linear-gradient(-45deg, #0f417a 0%, #0f417a 48%, #f7f7f7 48%, #f7f7f7 100%);
        background: -webkit-linear-gradient(-45deg, #0f417a 0%, #0f417a 48%, #f7f7f7 48%, #f7f7f7 100%);
        background: linear-gradient(135deg, #0f417a 0%, #0f417a 48%, #f7f7f7 48%, #f7f7f7 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0f417a', endColorstr='#f7f7f7', GradientType=1);
        -webkit-box-shadow: 0px 0px 13px -1px rgba(0, 0, 0, 0.6);
        -moz-box-shadow: 0px 0px 13px -1px rgba(0, 0, 0, 0.6);
        box-shadow: 0px 0px 13px -1px rgba(0, 0, 0, 0.6);
        position: relative;
        overflow: hidden;
        border: solid 10px #fff;
    }

    .login-main-outer.login1 .top-design-style {
        background-color: #fff;
        width: 80%;
        height: 30px;
        border-radius: 30px;
        position: absolute;
        top: -12px;
    }

    .login-main-outer.login1 .login-outer .login-form {
        width: 100%;
        max-width: 400 px;
        border-radius: 6 px;
        background-color: transparent;
        padding: 0px !important;
    }

        .login-main-outer.login1 .login-outer .login-form form.form {
            background: #fff;
            padding: 25px;
            border-radius: 10px;
            position: relative;
        }

        .login-main-outer.login1 .login-outer .login-form h3,
        .login-main-outer.login1 .login-outer .login-form p {
            color: #fff;
        }



        .login-main-outer.login1 .login-outer .login-form p {
            color: #fff;
            opacity: 10 !important;
            font-size: 12px;
        }



.login-main-outer .form-control:active,
.login-main-outer .form-control.active,
.login-main-outer .form-control:focus,
.login-main-outer .form-control.focus {
    box-shadow: 0 0 0 0.2rem rgb(134 183 254 / 100%) !important;
}

.login-main-outer .form-control {
    background: #eeeff0;
}

.login-main-outer.login1 input.form-control {
    border: none;
    background: none;
    border-radius: 0px !important;
    border-bottom: 1px solid #eeeff0 !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
    margin-bottom: 0px !important;
}

.login-main-outer.login1 .form-group {
    margin-bottom: 0px !important;
}

.login-form h3 {
    font-size: 30px;
}

.login-form p.sub_head {
    font-size: 18px;
}

.login-outer .login-header {
    text-align: center;
}

.login-overflow {
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0px;
    top: 0px;
    z-index: 1;
    opacity: 0.5;
}

.copy-right {
    position: absolute;
    bottom: 24px;
    bottom: 70px;
    font-size: 12px;
}

.login-main-outer.login1 .copy-right {
    z-index: 99990;
    color: #fff;
}

.update-icon::before {
    color: green !important;
}
/* ====================================================
                   LOGIN STYLE START
======================================================== */
/* Default Style Start */
.container {
    width: 100%;
    max-width: 100%;
}

.info-box {
    padding: 10px 20px;
    background-color: #f1eaff;
    border: solid 1px #e8e2f6;
}

    .info-box p {
        padding: 0px 0px 5px 0px;
        margin: 0px;
    }

    .info-box span.text-bold {
        font-weight: 700;
    }


.header {
    height: 50px;
}

.header {
    background-color: #fff;
}

.symbol.symbol-lg-35 .symbol-label {
    width: 30px;
    height: 30px;
}
.header.header-fixed {
    height: 50px !important;
    align-items:center;
}


.topbar .btn.btn-icon:active,
.topbar .btn.btn-icon.active,
.topbar .btn.btn-icon:hover,
.topbar .btn.btn-icon:focus,
.topbar .show .btn.btn-icon.btn-dropdown {
    background-color: #fff !important;
}

.aside-menu .menu-icon {
    color: #7C8DA7 !important;
}

.aside-menu .menu-nav > .menu-item .menu-submenu .menu-item > .menu-heading .menu-arrow,
.aside-menu .menu-nav > .menu-item .menu-submenu .menu-item > .menu-link .menu-arrow {
    color: #7C8DA7 !important;
}

.aside-menu .menu-nav > .menu-item > .menu-heading .menu-arrow,
.aside-menu .menu-nav > .menu-item > .menu-link .menu-arrow {
    color: #7C8DA7 !important;
}

.aside-menu .menu-nav > .menu-item .menu-submenu .menu-item > .menu-heading .menu-bullet.menu-bullet-dot > span,
.aside-menu .menu-nav > .menu-item .menu-submenu .menu-item > .menu-link .menu-bullet.menu-bullet-dot > span {
    background-color: #7C8DA7;
}

.aside-menu .menu-nav > .menu-item .menu-submenu .menu-item:not(.menu-item-parent):not(.menu-item-open):not(.menu-item-here):not(.menu-item-active):hover > .menu-heading .menu-bullet.menu-bullet-dot > span,
.aside-menu .menu-nav > .menu-item .menu-submenu .menu-item:not(.menu-item-parent):not(.menu-item-open):not(.menu-item-here):not(.menu-item-active):hover > .menu-link .menu-bullet.menu-bullet-dot > span {
    background-color: #7C8DA7;
}

.aside-menu .menu-item.menu-item-submenu .menu-icon:before,
.aside-menu .menu-item.menu-item-submenu a .menu-icon:before {
    color: #7C8DA7;
    opacity: 0.7;
}

.aside-menu .menu-item.menu-item-submenu:hover .menu-icon:before,
.aside-menu .menu-item.menu-item-submenu a:hover .menu-icon:before {
    color: #7C8DA7;
    opacity: 0.7;
}

.aside-menu .menu-nav > .menu-item > .menu-heading .menu-text,
.aside-menu .menu-nav > .menu-item > .menu-link .menu-text {
    color: #7C8DA7;
}

.aside-menu .menu-nav > .menu-item .menu-submenu .menu-item > .menu-heading .menu-text,
.aside-menu .menu-nav > .menu-item .menu-submenu .menu-item > .menu-link .menu-text {
    color: #000;
    opacity: 0.9;
}

    .aside-menu .menu-nav > .menu-item .menu-submenu .menu-item > .menu-heading .menu-text:hover,
    .aside-menu .menu-nav > .menu-item .menu-submenu .menu-item > .menu-link .menu-text:hover {
        color: #7C8DA7;
        opacity: 10;
    }

.aside-menu .menu-nav > .menu-item > .menu-link {
    padding: 5px 15px;
}

.aside-menu .menu-nav > .menu-item > .menu-heading,
.aside-menu .menu-nav > .menu-item > .menu-link {
    min-height: 35px;
}

.aside-menu .menu-nav > .menu-item .menu-submenu .menu-item > .menu-heading,
.aside-menu .menu-nav > .menu-item .menu-submenu .menu-item > .menu-link {
    cursor: pointer;
    min-height: 30px;
}

.container.full-width {
    max-width: 100%;
    width: 100%;
    height: 100%;
}
.aside-menu {
    padding: 25px 0px;
}
.card-header {
    padding: 10px;
}

.card.card-custom > .card-body {
    padding: 10px;
}

.card.card-custom > .card-header .card-title,
.card.card-custom > .card-header .card-title .card-label,
.card.card-custom > .card-header .card-toolbar {
    margin: 0;
}


/* Default Style Start */
.login.login-3 .login-form {
    width: 100%;
    max-width: 400px;
    border-radius: 6px;
    background-color: #fff;
}


/* Form  */

.form-group {
    margin-bottom: 5px;
}

label {
    margin-bottom: 0px;
}

.form-group label {
    font-size: 12px;
    color: #000;
}

.form-control {
    color: #000;
  /*  border: 1px solid #EBEBFD;*/
    padding: 0px 5px;
    line-height: 18px;
   /* height: 26px;*/
    font-size: 13px;
    border-radius: 6px;
}

/*
.essp-captcha {
    color: #000;
    border:none!important;
      border: 1px solid #EBEBFD !important;
    padding: 0px 5px;
    line-height: 18px;
     height: 26px;
    font-size: 13px;
    border-radius: 6px;
}*/




.ihits-table > .form-control {
    color: #595b66;
    border: 1px solid #EBEBFD;
    padding: 0px 5px;
    line-height: 18px;
    height: 22px;
    font-size: 12px;
    border-radius: 3px;
}
    .profile-header .form-control, .profile-header .btn.dropdown-toggle {
    height: 26px;
}

.form-control::placeholder {
    color: #d2d3d4;
}

.grid-Checkbox {
    height: 19px !important;
}

.form-control:focus {
    border-color: #add3fd;
    box-shadow: 0 0 0 0.2rem rgba(134, 183, 254, 0.25);
}

.checkbox-inline .checkbox span {
    margin-right: 5px;
}

.ihits-table .form-control {
   /* border-color: #cccccc;*/
    background-color: #fff;
}

.ihits-table .form-group {
    margin-bottom: 0px;
}

.slider-inner-style {
    text-align: left;
}

    .ihits-table .slider-inner-style .form-control,
    .slider-inner-style .form-control {
        color: #595b66 !important;
        border: 1px solid #EBEBFD;
        background-color: #fff !important;
    }

.was-validated .form-control:invalid,
.form-control.is-invalid {
    border-color: #F64E60 !important;
}

table .slider-inner-style .input-group-text,
.slider-inner-style .input-group-text {
    border: 1px solid #999999 !important;
}

.ihits-table.pd-2 .form-control {
    height: 24px;
}

.slider-inner-style h6 {
    font-size: 13px;
    font-weight: 600;
    margin: 5px 0px 5px 0px;
    padding: 0px;
    text-transform: uppercase;
}
.btn-multi-selection {
    color: #595b66 !important;
    border: 1px solid #EBEBFD !important;
    background-color: #fff !important;
    text-align: left;
}
.btn.dropdown-toggle {
    line-height: 10px;
    height: 32px;
    background-color: #999999;
    border-color: #999999;
    color: #fff;
}



/* ====================================================
                   FILE UPLOAD START
======================================================== */
.file-upload.upload-icon input {
    display: none;
}

.file-upload.upload-icon label::before {
    color: #9494a8;
}

.file-upload.upload-icon label:hover::before,
.file-download i:hover::before {
    color: #000;
}

.file-upload label {
    display: block;
    cursor: pointer;
}

.file-download {
    cursor: pointer;
    display: inline-block;
}

.file-upload-wrap .file-upload-outer {
    width: 100% !important;
    height: 100% !important;
}

    .file-upload-wrap .file-upload-outer input[type="file"] {
        width: 100% !important;
        height: 100% !important;
        position: absolute;
        left: 0px;
        cursor: pointer;
    }

.file-upload-wrap .file-remove-btn {
    display: none !important;
}

.file-upload-wrap .image-input-changed .file-remove-btn {
    display: block !important;
    z-index: 99;
}

.file-upload-wrap .file-remove-btn {
    background-color: #f3f6f9;
}

.file-upload-form-group ::-webkit-file-upload-button {
    background-color: #DDD;
    color: #333;
    border: none;
    height: 35px;
}

.file-upload-form-group input[type="file"] {
    padding-left: 0px;
    padding-right: 15px;
    border: 1px solid #EBEBFD;
    width: 100%;
    border-radius: 50px;
    height:35px;
}

.file-upload-form {
    position: relative;
}

    .file-upload-form .small-btn-group {
        position: absolute;
        right: 0px;
    }

        .file-upload-form .small-btn-group button {
            width: auto;
            min-width: auto;
            margin-right: 0px;
            height: 34px;
            width: 25px;
            border-top-left-radius: 0px;
            border-bottom-left-radius: 0px;
        }

.Mandatory {
    font-size: 14px;
    color: #cb0804;
}
/* ====================================================
                   FILE UPLOAD END
======================================================== */
/* ====================================================
                   BUTTON STYLE START
======================================================== */

.btn.btn-download,
.btn.btn-download-small {
    background-color: #44aa00;
    color: #fff;
}
/*
.btn.btn-excel {
    background-color: #0f9d58;
    color: #fff;
}

    .btn.btn-excel i {
        color: #fff;
    }*/

.btn.btn-normal {
    background-color: #f8f8f9;
    border: solid 1px #efeff4;
    color: #000;
    margin-top: 6px;
    margin-left: 6px;
    padding: 2px 7px;
}

    .btn.btn-normal.active {
        background-color: var(--blue-color-theme);
        border: solid 1px var(--blue-color-theme);
        ;
    }

    .btn.btn-normal i {
        color: #000;
        padding-right: 0px;
    }

    .btn.btn-normal.active i {
        color: #fff;
    }

    .btn.btn-normal i::before {
        font-size: 14px !important;
    }

.btn.btn-download::after {
    content: "\f019";
    color: #fff;
    font-size: 12px;
    margin-left: 10px;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-style: normal;
}

.btn.btn-download:hover,
.btn.btn-download-small:hover {
    background-color: #0a8700;
}

.btn.btn-upload::after {
    content: "";
    color: #fff;
    font-size: 12px;
    margin-left: 10px;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-style: normal;
}

.btn.btn-icon.btn-lg,
.btn-group-lg > .btn.btn-icon {
    height: 30px;
}


.btn.dropdown-toggle {
    line-height: 10px;
    height: 32px;
    background-color: #999999;
    border-color: #999999;
    color: #fff;
}

.btn.btn-icon,
.small-btn-group .file-upload {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    padding-right: inherit !important;
    padding-left: inherit !important;
    float: left;
    margin-right: 5px;
}

    .btn.btn-icon.big-btn,
    .small-btn-group .file-upload.big-btn {
        width: 30px;
        height: 30px;
    }

    .small-btn-group .file-upload label {
        padding-top: 3px;
        font-size: 13px !important;
    }

        .small-btn-group .file-upload label:before {
            color: #fff !important;
        }

.fa-angle-double-right:before {
    content: "\f101";
    color: #fff;
}

.btn i {
    padding-right: 10px;
}

    .btn i::before {
        font-size: 16px !important;
    }

.btn.add-profile i::before {
    font-size: 12px !important;
}

.topbar-item .btn.btn-icon i::before {
    font-size: 14px !important;
    color: #000 !important;
}

.btn {
    padding: 4px 22px;
}
.btn-danger
{
    border-radius:20px;
}
.btn.btn-small {
    padding: 3px 7px;
    font-size: 12px;
}

        .btn.btn-small i {
            font-size: 12px !important;
            padding: 0px;
            padding-right: 4px;
        }

            .btn.btn-small i::before {
                font-size: 14px !important;
            }

    .btn.btn-icon i::before {
        font-size: 12px !important;
        color: #FFFFFF ;
    }

.cancel-btn::before {
    font-size: 12px !important;
    color: red !important;
}

.btn.btn-icon i.black::before {
    color: #000 !important;
}

.btn.btn-icon i.fa-times::before,
.btn.btn-icon i.fa-check::before {
    font-size: 10px !important;
}

.btn.btn-default,
.btn.btn-cancel,
.btn.btn-default-outline,
.btn.btn-secondary {
    min-width: 100px;
}

.btn.btn-default {
    color: #ffffff;
    padding-left: 15px;
    padding-right: 15px;
}

.btn.btn-cancel {
    background-color: #e4e6ef;
    color: #000;
    padding-left: 20px;
    padding-right: 20px;
}

.btn.btn-default i {
    color: #fff !important;
}

.btn.btn-default:hover,
.btn.btn-default:focus {
    color: #ffffff !important;
}

/* Small Button With Icon Statr */
.btn.btn-view,
.btn.btn-icon.btn-eye,
.btn.btn-icon.btn-plus,
.small-btn-group .file-upload {
    background-color: #3699FF;
    border-color: #3699FF;
}

.btn.btn-icon.btn-edit {
    background-color: #efeff4;
    border-color: #efeff4;
}

.btn.btn-view:hover,
.btn.btn-icon.btn-eye:hover,
.btn.btn-icon.btn-plus:hover,
.small-btn-group .file-upload:hover,
.successor-profile-img .view-profile:hover {
    background-color: #0064ca;
    border-color: #0064ca;
}

.btn.btn-icon.btn-default.icon-only i:before,
.btn.btn-icon.btn-edit.icon-only i:before,
.btn.btn-icon.btn-eye.icon-only i:before,
.btn.btn-icon.btn-plus.icon-only i:before,
.small-btn-group .file-upload.icon-only i:before {
    color: #3699FF !important;
    font-size: 12px !important;
}

.btn.btn-icon.btn-default.icon-only i:before {
    color: #444 !important;
}

.btn.add-profile {
    border-radius: 50px;
    height: 33px;
    padding-top: 6px;
    color: #fff;
}

    .btn.add-profile span {
        background-color: #fff;
        display: inline-block;
        width: 24px;
        height: 24px;
        border-radius: 50px;
        position: relative;
        top: -3px;
        left: -6px;
        text-align: center;
    }

    .btn.add-profile i {
        padding-right: 0px;
        padding-top: 4px;
    }

.btn-success {
    color: #fff;
    background-color: #198754 !important;
    border-color: #198754 !important;
}


.btn.btn-icon.btn-delete {
    background-color: #d10000;
    border-color: #d10000;
}

    .btn.btn-icon.btn-delete.border-only {
        background-color: transparent;
        color: #d10000 !important;
        border: solid 1px #d10000;
    }



    .btn.btn-icon.btn-delete:hover {
        background-color: #8d0000;
        border-color: #8d0000;
    }

.btn.btn-icon.btn-close i::before {
    color: #d10000 !important;
    font-size: 11px !important;
}

.btn.btn-icon.btn-tick i::before {
    color: #00890c !important;
    font-size: 11px !important;
}

.btn.btn-icon.border-radius {
    border-radius: 100px;
}

.btn.btn-icon.btn-default.icon-only,
.btn.btn-icon.btn-edit.icon-only,
.btn.btn-icon.btn-eye.icon-only,
.btn.btn-icon.btn-plus.icon-only,
.small-btn-group .file-upload.icon-only,
.btn.btn-icon.btn-delete.icon-only,
.btn.btn-icon.btn-view.icon-only {
    background-color: #f8f8f9;
    border: solid 1px #efeff4;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    padding-right: 0px !important;
    padding-left: 0px !important;
    float: left;
    margin-right: 3px;
    margin-left: 3px;
}


.btn.btn-icon.icon-only:hover {
    background-color: #efeff4 !important;
    border: solid 1px #efeff4 !important;
}

.btn.btn-icon.btn-delete.icon-only i::before {
    color: #fc0000 !important;
    font-size: 11px !important;
    line-height: 14px;
}

.btn.btn-icon.btn-edit.icon-only i::before {
    color: #fa9403 !important;
    font-size: 11px !important;
    line-height: 14px;
}

.btn.btn-icon.btn-view.icon-only i::before {
    color: #0060ad !important;
    font-size: 11px !important;
    line-height: 14px;
}

.btn.btn-icon.btn-tick.icon-only i::before {
    color: #00890c !important;
    font-size: 14px !important;
}

.btn.btn-view {
    font-size: 10px;
    color: #fff;
    padding: 1px 7px;
}

    .btn.btn-view i::before {
        font-size: 12px !important;
        color: #fff;
    }

/* ====================================================
                   BUTTON STYLE END
======================================================== */
/* ====================================================
                   TABLE SECTION START
======================================================== */
.ihits-table table .btn.btn-default,
.ihits-table table .btn.btn-cancel,
.ihits-table table .btn.btn-default-outline {
    min-width: auto;
}

.ihits-table table tr td h5 {
    margin: 0px;
}

.ihits-table table .input-group-text {
    border: none;
}

.ihits-table .table th,
.ihits-table .table td {
    padding: 5px 10px !important;
}

.ihits-table table a,
a:not([href]):not([class]) {
    color: #187DE4;
    cursor: pointer;
}

.ihits-table table tr.table-dark a {
    color: #fff;
}

.ihits-table table a:hover {
    color: #004286;
}

.ihits-table table tbody tr td,
.table tbody tr th {
    font-weight: normal !important;
}

.ihits-table table tr.table-success th,
.ihits-table table tr.table-success td {
    padding: 8px 10px !important;
    border: solid 1px #bee4e2 !important;
    background-color: #def8f7 !important;
}

.ihits-table .table-success,
.ihits-table .table-success > th,
.ihits-table .table-success > td {
    padding: 5px 10px;
    border-top: solid 1px #85cecb;
}

.ihits-table.table-bordered tr.table-success {
    border: 1px solid #88e1dd !important;
}

.ihits-table.table-border > table {
    /*border: 1px solid #EBEDF3;*/
    width: 100%;
    color: #3F4254;
    table-layout:fixed;
}

.ihits-table.table-border table thead tr th {
    padding: 12px 13px;
    font-weight: 500;
}

.ihits-table.table-border.table-head-small table thead tr th {
    padding: 7px 10px;
}

.ihits-table.table-border table tbody tr td {
    padding: 4px 7px;
    font-size: 12px;
    color: #0c1a2e;
}

.ihits-table.table-border table thead tr th,
.ihits-table.table-border table tbody tr td {
  /*  border: 1px solid #EBEDF3;*/
    border-bottom: none;
    line-height: 15px;
}

.ihits-table.table-border table thead tr.table-danger th,
.ihits-table.table-border table tbody tr.table-danger td {
    border: 1px solid #ecbabf;
    border-bottom: none;
    line-height: 15px;
}

.ihits-table.table-border table thead tr:last-child.table-danger th,
.ihits-table.table-border table tbody tr:last-child.table-danger td {
    border-bottom: 1px solid #ecbabf !important;
}

.ihits-table.pd-2.table-border table thead tr th,
.ihits-table.pd-2.table-border table tbody tr td {
    padding: 5px 2px !important;
    font-size: 11px;
}

.ihits-table.odd-even table .ihits-table tbody tr,
.ihits-table.odd-even table .ihits-table tbody tr:nth-child(even) {
    background-color: #fff;
}

.ihits-table .ihits-table tbody tr.table-gray:hover {
    background-color: #EBEDF3 !important;
}

/* Table Scroll Style Start */

.ihits-table.horizontl-scroll {
    overflow-x: scroll;
}

.vertical-scroll-90-per {
    position: relative;
    width: 100%;
    z-index: 1;
    margin: auto;
    overflow: auto;
    height: 80%;
}

.vertical-scroll-80-per {
    height: 50%;
}

.vertical-scroll-90-per tfoot,
.vertical-scroll-90-per tfoot th,
.vertical-scroll-90-per tfoot td {
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
    background: #666;
    color: #fff;
    z-index: 4;
}

.vertical-scroll-450px thead th {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

.vertical-scroll-450px {
    position: relative;
    width: 100%;
    z-index: 1;
    margin: auto;
    overflow: auto;
    height: 450px;
}

    .vertical-scroll-90-per tfoot,
    .vertical-scroll-90-per tfoot th,
    .vertical-scroll-90-per tfoot td,
    .vertical-scroll-450px tfoot,
    .vertical-scroll-450px tfoot th,
    .vertical-scroll-450px tfoot td {
        position: -webkit-sticky;
        position: sticky;
        bottom: 0;
        background: #666;
        color: #fff;
        z-index: 4;
    }

.vertical-scroll-90-per thead th {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

.ihits-table.vertical-scroll-80 tbody,
.ihits-table .ihits-table.vertical-scroll-80 tbody,
.ihits-table.vertical-scroll-90 tbody,
.ihits-table .ihits-table.vertical-scroll-90 tbody,
.ihits-table.vertical-scroll-100 tbody,
.ihits-table .ihits-table.vertical-scroll-100 tbody,
.ihits-table.vertical-scroll-150 tbody,
.ihits-table.vertical-scroll-200 tbody,
.ihits-table .ihits-table.vertical-scroll-200 tbody,
.ihits-table.vertical-scroll-250 tbody,
.ihits-table.vertical-scroll-300 tbody,
.ihits-table.vertical-scroll-325 tbody,
.ihits-table.vertical-scroll-350 tbody,
.ihits-table.vertical-scroll-375 tbody,
.ihits-table.vertical-scroll-400 tbody,
.ihits-table.vertical-scroll-450 tbody,
.ihits-table.vertical-scroll-500 tbody {
    display: block;
    height: 96px;
    overflow-y: scroll;
}

.ihits-table.vertical-scroll-80 tbody {
    height: 80px;
}

.ihits-table.vertical-scroll-90 tbody {
    height: 90px;
}

.ihits-table.vertical-scroll-100 tbody {
    height: 100px;
}

.ihits-table .ihits-table.vertical-scroll-100 tbody {
    height: 100px;
}

.ihits-table.vertical-scroll-150 tbody {
    height: 150px;
}

.ihits-table.vertical-scroll-200 tbody {
    height: 210px;
}

.ihits-table.vertical-scroll-250 tbody {
    height: 250px;
}

.ihits-table.vertical-scroll-300 tbody {
    height: 300px;
}

.ihits-table.vertical-scroll-325 tbody {
    height: 325px;
}

.ihits-table.vertical-scroll-350 tbody {
    height: 350px;
}

.ihits-table.vertical-scroll-375 tbody {
    height: 375px;
}

.ihits-table.vertical-scroll-400 tbody {
    height: 400px;
}

.ihits-table.vertical-scroll-450 tbody {
    height: 450px;
}

.ihits-table.vertical-scroll-500 tbody {
    height: 500px;
}

    .ihits-table.vertical-scroll-80 tbody tr,
    .ihits-table.vertical-scroll-80 thead,
    .ihits-table.vertical-scroll-90 thead,
    .ihits-table.vertical-scroll-90 tbody tr,
    .ihits-table.vertical-scroll-100 thead,
    .ihits-table.vertical-scroll-100 tbody tr,
    .ihits-table.vertical-scroll-150 thead,
    .ihits-table.vertical-scroll-150 tbody tr,
    .ihits-table.vertical-scroll-200 thead,
    .ihits-table.vertical-scroll-200 tbody tr,
    .ihits-table.vertical-scroll-250 thead,
    .ihits-table.vertical-scroll-250 tbody tr,
    .ihits-table.vertical-scroll-300 thead,
    .ihits-table.vertical-scroll-300 tbody tr,
    .ihits-table.vertical-scroll-325 thead,
    .ihits-table.vertical-scroll-325 tbody tr,
    .ihits-table.vertical-scroll-350 thead,
    .ihits-table.vertical-scroll-350 tbody tr,
    .ihits-table.vertical-scroll-375 thead,
    .ihits-table.vertical-scroll-375 tbody tr,
    .ihits-table.vertical-scroll-400 thead,
    .ihits-table.vertical-scroll-400 tbody tr,
    .ihits-table.vertical-scroll-450 thead,
    .ihits-table.vertical-scroll-450 tbody tr,
    .ihits-table.vertical-scroll-500 thead,
    .ihits-table.vertical-scroll-500 tbody tr {
        display: table;
        width: 100%;
        /* table-layout: fixed; */
    }

.ihits-table.vertical-scroll-80 thead,
.ihits-table.vertical-scroll-90 thead,
.ihits-table.vertical-scroll-100 thead,
.ihits-table.vertical-scroll-200 thead,
.ihits-table.vertical-scroll-250 thead,
.ihits-table.vertical-scroll-300 thead,
.ihits-table.vertical-scroll-325 thead,
.ihits-table.vertical-scroll-350 thead,
.ihits-table.vertical-scroll-375 thead,
.ihits-table.vertical-scroll-400 thead,
.ihits-table.vertical-scroll-450 thead,
.ihits-table.vertical-scroll-500 thead {
    width: calc(100% - .8em)
}

.ihits-table ::-webkit-scrollbar {
    width: 4px;
}

.ihits-table ::-webkit-scrollbar-track {
    background: #E9E9E9;
}
/*
.ihits-table ::-webkit-scrollbar-thumb {
    background: #E9E9E9;
}

    .ihits-table ::-webkit-scrollbar-thumb:hover {
        background: #E9E9E9;
    }*/
/* Table Scroll Style End */
.ihits-table.table-border table tbody tr td {
    padding: 4px 7px;
    font-size: 11px;
}

.table-gray {
    background-color: #EBEDF3;
}

    .table-gray:hover {
        background-color: #EBEDF3 !important;
    }
/* ====================================================
                   TABLE SECTION END
======================================================== */

.status-completed {
    width: 16px;
    height: 16px;
    border-radius: 20px;
    background-color: #29e30b;
    border: 3px solid #70ff59;
    animation-name: blinkingGreen;
    animation-duration: 1s;
    animation-iteration-count: 100;
}

@keyframes blinkingGreen {
    50% {
        border-color: #d8ffd2;
    }
}

.status-pending {
    width: 16px;
    height: 16px;
    border-radius: 20px;
    background-color: red;
    border: 4px solid #ffb8b8;
    animation-name: blinking;
    animation-duration: 1s;
    animation-iteration-count: 100;
}

@keyframes blinking {
    50% {
        border-color: #fff6f6;
    }
}

.image-input .image-input-wrapper {
    width: 65px;
    height: 65px;
}

.card-body .image-input .image-input-wrapper {
    width: 65px;
    height: 65px;
}

    .image-input .image-input-wrapper img,
    .card-body .image-input .image-input-wrapper img {
        max-width: 100%;
        width: 100%;
        height: auto;
        border-radius:50%;
    }

/* ====================================================
                   PROFILE HEADER START
======================================================== */

.profile-header {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
    padding: 8px 20px !important;
    /*position: fixed;*/
    top: 40px;
    width: 100%;
    z-index: 4;
 
    background-color: #fff;
}
    /*form.display-flex .profile-header{
    padding-left: 86px !important;
}
*/
    .profile-header.box-shadow-none {
        box-shadow: none;
    }

    .profile-header.position-relative {
        position: relative;
        top: 5px !important;
        margin-bottom: 10px;
    }

    .profile-header.padding-big {
        padding-top: 45px !important;
        padding-bottom: 45px !important;
    }

.tooltip-hover .profile-header {
    top: auto;
    width: auto;
    box-shadow: none;
    margin-bottom: 10px;
    position: relative;
}

.d-flex.text-right.flex-column.flex-grow-1.flex-fill.float-right {
    position: relative;
    top: -13px;
}

.profile-header-overflow {
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0px;
    top: 0px;
    z-index: -1;
    opacity: 10;
}

.profile-header .form-control::placeholder {
    color: #717171;
}

.profile-header .form-control {
    border: 1px solid #f3f3f3;
}

.profile-header .btn.dropdown-toggle {
    background-color: #f3f3f3;
    border-color: #f3f3f3;
    color: #000;
}

.profile-header select.form-control,
.profile-header .form-control {
    font-size: 13px;
    font-weight: 100;
}

.profile-header .col-md-2,
.profile-header .col-md-3,
.profile-header .col-md-4 {
    padding-right: 0px;
}

.profile-header .btn.btn-icon i::before {
    font-size: 8px !important;
    color: #7d7d7d !important;
}

.profile-header .btn.btn-icon {
    width: 18px;
    height: 18px;
}

.profile-header .header-profile-name {
    font-size: 20px;
    font-weight: 500;
    color: #FFF;
    line-height: 26px;
    margin-bottom: 2px;
}

    .profile-header .header-profile-name a {
        color: #3D3D3D;
    }

    .profile-header .header-profile-name span {
        font-size: 14px;
        font-weight: 300;
        line-height: 26px;
        margin-left: 5px;
        display: inline-block;
    }

.profile-header .header-profile-email,
.profile-header .header-profile-label {
    font-size: 12px;
    /*    font-weight: 500;
*/
    color: /*#707070*/ #353333;
}

.profile-header label.label-date {
    background-color: #f4f2f2;
    padding: 4px 20px 2px 10px;
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;
    color: #000;
}

.profile-header .fas {
    color: #2574A4;
}

.profile-header .input-group-text {
    border: none;
}

.profile-header .btn.btn-default {
    color: #ffffff;
    background-color: var(--blue-color-theme-hover);
    border-color: var(--blue-color-theme-hover);
}

    .profile-header .btn.btn-default:hover {
        color: #ffffff;
        background-color: #000 !important;
        border-color: #000 !important;
    }

.image-input.image-input-changed .image-input-wrapper {
    z-index: 1;
    position: relative;
}

/* ====================================================
                   PROFILE HEADER END
======================================================== */
.minus-mt-50 {
    position: relative;
    margin-top: -46px;
}

.text-muted {
    color: #a1a1ae !important;
}

.align-right {
    text-align: right;
}


.input-group-text {
    color: #999999;
    background-color: #f4f2f2;
    border: 1px solid #999999;
    border-radius: 4px;
}

.la.la-calendar:before {
    color: #999999;
}

/* ====================================================
                   TAB AND ACCORDION START
======================================================== */
.tab-outer {
    margin-bottom: 3px;
    /*padding-right: 2px;*/
}

    .tab-outer::-webkit-scrollbar {
        width: 2px;
    }

    .tab-outer::-webkit-scrollbar-thumb {
        background-color: #eef0f8;
    }

    .tab-outer ul {
        margin: 0px;
        padding: 0px;
    }

.ulList {
    width: 100%;
    display: inline-block;
    position: relative;
}

    .ulList > li {
        padding: 5px 15px;
        margin: 0px 5px 0px 0px;
        float: left;
        display: inline-block;
        /*background-color: #eeeeee;*/
        line-height: 20px;
        cursor: pointer;
        font-size: 13px;
        font-weight: 500;
    }

.accordion-only .ulList > li {
    border-radius: 4px;
    margin: 0px 0px 2px 0px;
}

.accordion-only li i {
    color: #fff;
}

.ulList > li.completed {
    background-color: #2ba659;
    color: #fff;
}

    .ulList > li.completed::before {
        color: #fff !important;
    }

/*.ulList > li.active {
    background-color: #2ba659;
}*/

.tab-content {
    background-color: #fff;
    /*  border          : solid 1px #2ba659;*/
    width: 100%;
    padding: 10px;
    display: none;
    position: absolute;
    top: 30px;
}

    .tab-content.active {
        display: block;
    }

.accordion-only .ulList > li {
    float: none;
    width: 100%;
}

.tab-content {
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

.accordion-only .tab-content {
    position: relative;
    top: -6px;
    width: 100%;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    padding:10px;
}

.accordion-only .ulList > li::before {
    content: "\f067";
    color: #000;
    font-size: 12px;
    margin-right: 10px;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-style: normal;
}

.accordion-only .ulList > li.active::before {
    content: "";
    color: #fff;
    font-size: 12px;
    margin-right: 10px;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-style: normal;
    position: relative;
    top: 1px;
}

.ulList > li.active {
    color: #fff;
    padding-top: 5px;
    padding-bottom: 6px;
    background-color: #264f94;
}

/* ====================================================
                   TAB AND ACCORDION END
======================================================== */

/* ====================================================
                   AUTO COMPLETE FIELD START
======================================================== */
.select-pure__select {
    color: #595b66;
    border: 1px solid #999999;
    padding: 0px 5px;
    line-height: 18px;
    height: 32px;
    font-size: 13px;
    border-radius: 4px;
    position: relative;
}

.select-pure__options {
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
    box-sizing: border-box;
    color: #363b3e;
    display: none;
    left: 0;
    max-height: 221px;
    overflow-y: scroll;
    position: absolute;
    top: 30px !important;
    width: 100%;
    z-index: 5;
}

.select-pure__select--opened .select-pure__options {
    display: block;
}

.select-pure__option {
    background: #fff;
    border-bottom: 1px solid #e4e4e4;
    box-sizing: border-box;
    height: 30px;
    line-height: 25px;
    padding: 3px 10px;
}

.select-pure__option--selected {
    color: #e4e4e4;
    cursor: initial;
    pointer-events: none;
}

.select-pure__option--hidden {
    display: none;
}

.select-pure__selected-label {
    border-radius: 4px;
    color: #fff;
    cursor: initial;
    display: inline-block;
    margin: 4px 10px 5px 0;
    padding: 2px 7px;
    font-size: 12px;
}

    .select-pure__selected-label:last-of-type {
        margin-right: 0;
    }

    .select-pure__selected-label i {
        cursor: pointer;
        display: inline-block;
        margin-left: 7px;
        font-size: 12px;
        color: #fff;
    }

        .select-pure__selected-label i:hover {
            color: #fff;
        }

.select-pure__autocomplete {
    background: #f9f9f8;
    border-bottom: 1px solid #e4e4e4;
    border-left: none;
    border-right: none;
    border-top: none;
    box-sizing: border-box;
    font-size: 16px;
    outline: none;
    padding: 7px 10px;
    width: 100%;
}

.awards-select-field-mobile-view {
    display: none;
}

/* ====================================================
                   AUTO COMPLETE FIELD END
======================================================== */
/* ====================================================
                   DATE PICKER START
======================================================== */
.datepicker-boder-bottom-only .form-control {
    border: none;
    border-bottom: 1px solid #e7e8ee;
    border-radius: 0px;
}

    .datepicker-boder-bottom-only .form-control:focus {
        border: none;
    }

.datepicker-boder-bottom-only .input-group-text {
    color: #333;
    background-color: #fff;
    border: none;
    border-radius: 0px;
    border-bottom: 1px solid #e7e8ee;
    padding-left: 0px;
    padding-right: 0px;
}
.datepicker{
width:218px !important;
}
    .datepicker .sevenday th, td {
        padding: 4px 4px !important;
    }
    .datepicker tbody tr > td {
        height: 30px !important;
    }
    .datepicker table tr td span {
        display: block;
        width: 23%;
        height: 75px !important;
        line-height: 75px !important;
        float: left;
        margin: 1%;
        cursor: pointer;
        border-radius: 4px;
    }
/* ====================================================
                   DATE PICKER END
======================================================== */
.aside-menu.my-4 {
    margin: 0px !important;
}

#kt_header_mobile_toggle {
    display: none;
}

.two {
    display: none;
}

.footer .nav .nav-link {
    padding: 6px;
}

.brand {
    height: 50px;
}

.aside-menu .menu-nav {
    padding: 0px 0;
}



.gray-bg {
    background-color: #f2f2f2;
    display: block;
    border-radius: 4px;
    padding: 7px;
    color: #000;
}
/* ====================================================
                   BREAD CRUMB START
======================================================== */
.breadcrumb {
    font-size: 11px;
    font-weight: 400;
    color: #3F4254;
}

    .breadcrumb a,
    .breadcrumb i {
        color: #333;
    }

    .breadcrumb.breadcrumb-dot .breadcrumb-item:after {
        padding-left: 0.5rem;
        content: "\f054";
        color: #333;
        font-size: 10px;
        margin-right: 10px;
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        font-style: normal;
        line-height: 18px;
    }

.breadcrumb-item + .breadcrumb-item {
    padding-left: 0px;
    color: #a1a1ae;
    font-weight: 100;
}

    .breadcrumb-item + .breadcrumb-item a {
        color: #333;
        font-weight: 500;
        font-size: 11px;
    }

        .breadcrumb-item + .breadcrumb-item a:hover {
            color: #000 !important;
        }

.breadcrumb .breadcrumb-item:hover i {
    color: #333 !important;
}
/* ====================================================
                   BREAD CRUMB END
======================================================== */


.search-field {
    position: relative;
    width: 210px;
}

    .search-field button {
        background-color: #fff;
        border: none;
        position: absolute;
        top: 3px;
        right: 3px;
    }

/*.btn {
    border-radius: 20px;
}*/

.btn i.fa-filter::before {
    font-size: 11px !important;
}

.border-y {
    border-top: 1px solid #EBEDF3;
    border-bottom: 1px solid #EBEDF3;
}

.border-t {
    border-top: 1px solid #EBEDF3;
}

.border-b {
    border-bottom: 1px solid #EBEDF3;
}

.checkbox > input:disabled ~ span {
    background-color: #dddddd;
}

.full-width {
    display: inline-block;
    width: 100%;
}

.light-color {
    color: #999;
}



.image-input.image-input-circle [data-action="change"] {
    right: -8px;
    top: -3px;
    z-index: 9;
}

.image-input.image-input-circle [data-action="cancel"],
.image-input.image-input-circle [data-action="remove"] {
    right: -6px;
    bottom: -7px;
    z-index: 9;
    display: none;
}

.image-input.image-input-circle.image-input-changed [data-action="cancel"],
.image-input.image-input-circle.image-input-changed [data-action="remove"] {
    display: block;
}

.content {
    padding: 0px 0;
    top: 30px;
    position: relative;
}

.document-card-outer {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 10px;
    margin-bottom: 15px;
    padding: 5px;
}

    .document-card-outer div.document-cards {
        position: relative;
        overflow: hidden;
        background-color: #fff;
        border-bottom: 10px solid #787c97;
    }
.aadhar-card {
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
    border-radius: 10px;
    padding: 20px 20px 5px;
}
.document-icon {
    font-size: 25px;
    color: #7e8299 !important;
}
.aadhar-details-outer {
    padding: 13px 0 0;
    display: flex;
}
.aadhar-details span.aadhar-number {
    font-size: 17px;
    font-weight: 500;
    color: #000;
    display: inline-block;
    width: 100%;
}
.aadhar-details span.aadhar-name {
    font-size: 12px;
    font-weight: 500;
    color: #707070;
    display: inline-block;
    width: 100%;
    margin-bottom: 2px;
}
.ahar-text {
    padding-left: 10px;
    font-size: 21px;
    padding-top: 1px;
}
    .document-card-outer div.document-cards h3 {
        font-size: 20px;
        color: #fff;
        font-weight: 500;
        line-height: 26px;
        padding: 0px;
        margin: 0px 0px 2px;
    }

    .document-card-outer div.document-cards span.data-items {
        font-size: 13px;
        color: #fff;
        font-weight: 400;
        line-height: 14px;
        display: inline-block;
        width: 100%;
        margin-bottom: 3px;
    }

    .document-card-outer div.document-cards {
        position: relative;
        overflow: hidden;
    }



        .document-card-outer div.document-cards .btn-section .small-btn-group {
            display: flex;
            flex-flow: row-reverse;
        }

            .document-card-outer div.document-cards .btn-section .small-btn-group .btn.btn-icon,
            .document-card-outer div.document-cards .btn-section .small-btn-group .file-upload {
                float: none;
                display: inline-block;
                background-color: #f8f8f9;
                border: solid 1px #efeff4;
            }

                .document-card-outer div.document-cards .btn-section .small-btn-group .btn.btn-icon i::before,
                .document-card-outer div.document-cards .btn-section .small-btn-group .file-upload label::before {
                    color: #000 !important;
                }

                .document-card-outer div.document-cards .btn-section .small-btn-group .btn.btn-icon.btn-view {
                    background-color: #3895d3;
                    border-color: #3895d3;
                    width: 26px;
                    height: 27px;
                    text-align: center;
                    padding: 0px !important;
                }

                .document-card-outer div.document-cards .btn-section .small-btn-group .btn.btn-icon.btn-delete {
                    background-color: #d10000;
                    border-color: #d10000;
                    width: 26px;
                    height: 27px;
                    text-align: center;
                    padding: 0px !important;
                }

.btn.btn-icon.btn-big {
    width: 26px;
    height: 27px;
    text-align: center;
    padding: 0px !important;
}

.document-card-outer div.document-cards .btn-section .small-btn-group .btn.btn-icon.btn-delete i::before,
.document-card-outer div.document-cards .btn-section .small-btn-group .btn.btn-icon.btn-view i::before,
.btn.btn-icon.text-color-white i::before {
    color: #fff !important;
}

.aadhar-card {
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
    border-radius: 10px;
    padding: 20px 20px 5px;
}

.aadhar-card-top {
    padding: 0px;
    margin-bottom: 10px;
}

.aadhar-details-outer {
    padding: 13px 0 0;
    display: flex;
}
    .aadhar-details-outer .aadhar-img {
        padding: 0px 0px 0px 0px;
        border: solid 1px #333;
    }

.aadhar-details {
    padding: 0px 0px 0px 10px;
}

.slider-inner-style .profile-header {
    box-shadow: none;
    border-radius: 10px;
    background-color: var(--blue-color-theme) !important;
}

    .slider-inner-style .profile-header .header-profile-email, .profile-header .header-profile-label
    .aadhar-details span.aadhar-name {
        font-size: 13px;
      
        color: #fff!important;
     
    }
    .slider-inner-style .profile-header .fas {
        color: #fff !important;
    }

    .aadhar-details span.aadhar-number {
        font-size: 15px;
        font-weight: 600;
        color: #000;
        display: inline-block;
        width: 100%;
    }

    .aadhar-details span.date {
        font-size: 12px;
        font-weight: 500;
        color: #000;
        display: inline-block;
        width: 100%;
    }

.aadhar-details-outer .aadhar-qr-code {
    padding-top: 30px;
}

.document-card-outer div.document-cards.aadhar-card .btn-section {
/*    background: url(../images/aadhar-bottom.jpg) center 10px no-repeat;
*/    border-top: 2px solid #e33e0c;
    padding: 10px 0px 0px 0px;
    margin-top: 10px;
}

.lable-left {
    display: inline-block;
    float: left;
    font-size: 12px;
    color: #333;
    padding-top: 10px;
    padding-right: 5px;
}

.pan-card-details 

{
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
    border-radius: 10px;
    padding: 20px 20px 5px;
    /* background: url(../images/pan-card-bg.jpg) center top no-repeat; */
    /* background-size: cover; */
}
    /*background: url(../images/pan-card-bg.jpg) center top no-repeat;
    background-size: cover;*/
}

    .pan-card-details span.pan-name {
        font-size: 13px;
        font-weight: 500;
        color: #000;
        display: inline-block;
        width: 100%;
        margin-bottom: 2px;
    }

    .pan-card-details span.pan-number {
        font-size: 15px;
        font-weight: 600;
        color: #000;
        display: inline-block;
        width: 100%;
        margin-top: 10px;
    }

    .pan-card-details span.date {
        font-size: 12px;
        font-weight: 500;
        color: #000;
        display: inline-block;
        width: 100%;
    }

.pan-card-details .btn-section {
    margin-top: 13px;
}

.driving-license-details {
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
    border-radius: 10px;
    padding: 20px 20px 5px;
    /* background: url(../images/driving-license-img.jpg) center top no-repeat; */
    /* background-size: cover; */
}

    .driving-license-details span.license-name {
        font-size: 13px;
        font-weight: 500;
        color: #000;
        display: inline-block;
        width: 100%;
        margin-bottom: 10px;
    }

    .driving-license-details span.license-number {
        font-size: 15px;
        font-weight: 600;
        color: #000;
        display: inline-block;
        width: 100%;
        margin-top: 10px;
    }

    .driving-license-details span.date {
        font-size: 12px;
        font-weight: 500;
        color: #000;
        display: block;
        width: 40%;
        float: left;
    }

    .driving-license-details .btn-section {
        margin-top: 30px;
    }

.passport-details {
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
    border-radius: 10px;
    padding: 20px 20px 5px;
    /* background: url(../images/passport-img.jpg) center top no-repeat; */
    /* background-size: cover; */
}

    .passport-details span.passport-name {
        font-size: 13px;
        font-weight: 500;
        color: #000;
        display: inline-block;
        width: 100%;
        margin-bottom: 5px;
    }

    .passport-details span.passport-number {
        font-size: 15px;
        font-weight: 600;
        color: #000;
        display: inline-block;
        width: 100%;
        margin-top: 5px;
    }

    .passport-details span.date {
        font-size: 12px;
        font-weight: 500;
        color: #000;
        display: block;
        width: 50%;
        float: left;
    }

    .passport-details .btn-section {
        margin-top: 50px;
    }
.round-icon {
    width: 40px;
    height: 40px;
    background-color: #219993f7;
    border-radius: 50%;
    float: right;
}
.new-plus {
    font-size: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    color: #fff;
}
.new-doctype {
    padding-top: 2px;
    margin-top: 10px;
}
/* ====================================================
                   SLIDER START
======================================================== */
.slider-open.p-10 {
    padding: 10px 30px 20px !important;
}

.slider-open .main-title {
    margin: 0px 0px 8px 0px !important;
}

.slider-open input {
    height: 30px;
    padding: 5px 10px;
}

.slider-open .form-group {
    margin-bottom: 10px;
}

.slider-open .file-upload-wrap .btn.btn-upload {
    background-color: #e4e9ee;
    border: #e4e9ee;
    color: #000;
}

    .slider-open .file-upload-wrap .btn.btn-upload::before {
        color: #000;
    }

.slider-open .file-upload-wrap .image-input,
.slider-open .file-upload-wrap .image-input .image-input-wrapper {
    width: 100%;
    height: 120px;
    border: none;
    box-shadow: none;
    border-radius: 0px;
}

.slider-open .file-upload-wrap .image-input {
    border: dotted 2px #abb2b9;
    background-color: #f3f6f9;
}


    .slider-open .file-upload-wrap .image-input [data-action="change"] {
        cursor: pointer;
        position: absolute;
        right: 0px;
        top: 0px;
        text-align: center;
    }

    .slider-open .file-upload-wrap .image-input i.fa-cloud-upload-alt {
        padding-top: 36px;
        font-size: 50px !important;
    }



.slider-open .file-upload-wrap .btn.btn-icon i::before {
    color: #000 !important;
    font-size: 8px !important;
}

.close-outer {
    display: inline-block;
    width: 100%;
    text-align: right;
    position: relative;
    top: -8px;
}

.btn-slider-close {
    background-color: #f3f6f9;
    width: 24px;
    height: 24px;
    padding: 1px 6px;
    text-align: center;
    float: right;
}


.slider-open .file-remove-btn {
    z-index: 3;
}

.slider-open .profile-header {
    padding: 10px 0px !important;
}

    .slider-open .profile-header .header-profile-name {
        font-size: 15px;
    }

        .slider-open .profile-header .header-profile-name span {
            font-size: 11px;
        }

.slider-open .image-input .image-input-wrapper {
    width: 55px;
    height: 55px;
}

.border-btm-line {
    border-bottom: 1px solid #EBEDF3;
    padding: 5px 0px;
}

.slider-open {
    position: fixed;
    height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
}

    .slider-open::-webkit-scrollbar {
        width: 2px;
    }

    .slider-open::-webkit-scrollbar-track {
        background: #f1f1f1;
    }

    .slider-open::-webkit-scrollbar-thumb {
        background: #dddddd;
    }

        .slider-open::-webkit-scrollbar-thumb:hover {
            background: #c0c0c0;
        }


.btn-slider-close i.ki:before {
    font-family: "Ki";
    font-style: normal !important;
    font-weight: normal !important;
    font-variant: normal !important;
    font-size: 10px !important;
    color: #9c9ea8 !important;
}
/* ====================================================
                   SLIDER END
======================================================== */
.card-header.flex-wrap {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    flex-wrap: wrap;
    background-color: transparent;
}

    .card-header.flex-wrap .card-toolbar {
        display: flex;
        align-items: center;
        margin: 0.5rem 0;
        flex-wrap: wrap;
    }

    .card-header.flex-wrap .card-title {
        margin-bottom: 0px;
    }

        .card-header.flex-wrap .card-title .card-label {
            padding-bottom: 0px;
            margin-bottom: 0px;
            margin-top: 10px;
        }

.input-group-merge select {
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    background-color: #f3f3f3;
    border: none !important;
}

/* ====================================================
                   MULTI SELECTION START
======================================================== */

.choices {
    position: relative;
    margin-bottom: 24px;
    font-size: 16px
}

    .choices:focus {
        outline: none
    }

    .choices:last-child {
        margin-bottom: 0
    }

    .choices.is-disabled .choices__inner,
    .choices.is-disabled .choices__input {
        background-color: #eaeaea;
        cursor: not-allowed;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none
    }

    .choices.is-disabled .choices__item {
        cursor: not-allowed
    }

    .choices[data-type*=select-one] {
        cursor: pointer
    }

        .choices[data-type*=select-one] .choices__inner {
            padding-bottom: 7.5px
        }

        .choices[data-type*=select-one] .choices__input {
            display: block;
            width: 100%;
            padding: 10px;
            border-bottom: 1px solid #ddd;
            background-color: #fff;
            margin: 0
        }

        .choices[data-type*=select-one] .choices__button {
            background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==);
            padding: 0;
            background-size: 8px;
            position: absolute;
            top: 50%;
            right: 0;
            margin-top: -10px;
            margin-right: 25px;
            height: 20px;
            width: 20px;
            border-radius: 10em;
            opacity: .5
        }

            .choices[data-type*=select-one] .choices__button:focus,
            .choices[data-type*=select-one] .choices__button:hover {
                opacity: 1
            }

            .choices[data-type*=select-one] .choices__button:focus {
                box-shadow: 0 0 0 2px #00bcd4
            }

        .choices[data-type*=select-one]:after {
            content: "";
            height: 0;
            width: 0;
            border-style: solid;
            border-color: #333 transparent transparent transparent;
            border-width: 5px;
            position: absolute;
            right: 11.5px;
            top: 50%;
            margin-top: -2.5px;
            pointer-events: none
        }

        .choices[data-type*=select-one].is-open:after {
            border-color: transparent transparent #333 transparent;
            margin-top: -7.5px
        }

        .choices[data-type*=select-one][dir=rtl]:after {
            left: 11.5px;
            right: auto
        }

        .choices[data-type*=select-one][dir=rtl] .choices__button {
            right: auto;
            left: 0;
            margin-left: 25px;
            margin-right: 0
        }

    .choices[data-type*=select-multiple] .choices__inner,
    .choices[data-type*=text] .choices__inner {
        cursor: text
    }

    .choices[data-type*=select-multiple] .choices__button,
    .choices[data-type*=text] .choices__button {
        position: relative;
        display: inline-block;
        padding: 0px 2px 0px 8px;
    }


.choices__button:before {
    content: "\f130";
    color: #fff;
    position: relative;
    font-size: 7px;
    top: -1px;
    font-family: "Ki";
    font-weight: 300;
    font-style: normal;
}

.choices[data-type*=select-multiple] .choices__button:focus,
.choices[data-type*=select-multiple] .choices__button:hover,
.choices[data-type*=text] .choices__button:focus,
.choices[data-type*=text] .choices__button:hover {
    opacity: 1
}

.choices__inner {
    display: inline-block;
    vertical-align: top;
    width: 100%;
    background-color: #fff;
    overflow: hidden;
    color: #595b66;
    border: 1px solid #999999;
    padding: 0px 5px;
    line-height: 18px;
    min-height: 24px;
    font-size: 13px;
    border-radius: 4px;
}

.is-focused .choices__inner,
.is-open .choices__inner {
    border-color: #b7b7b7
}

.is-open .choices__inner {
    border-radius: 2.5px 2.5px 0 0
}

.is-flipped.is-open .choices__inner {
    border-radius: 0 0 2.5px 2.5px
}

.choices__list {
    margin: 0;
    padding-left: 0;
    list-style: none
}

.choices__list--single {
    display: inline-block;
    padding: 4px 16px 4px 4px;
    width: 100%
}

[dir=rtl] .choices__list--single {
    padding-right: 4px;
    padding-left: 16px
}

.choices__list--single .choices__item {
    width: 100%
}

.choices__list--multiple {
    display: inline
}

    .choices__list--multiple .choices__item {
        display: inline-block;
        vertical-align: middle;
        border-radius: 4px;
        padding: 2px 10px;
        font-size: 12px;
        font-weight: 500;
        margin-right: 2px;
        margin-bottom: 2px;
        margin-top: 2px;
        color: #fff;
        word-break: break-all;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        -ms-border-radius: 4px;
        -o-border-radius: 4px;
    }

        .choices__list--multiple .choices__item[data-deletable] {
            padding-right: 5px
        }

[dir=rtl] .choices__list--multiple .choices__item {
    margin-right: 0;
    margin-left: 3.75px
}



.is-disabled .choices__list--multiple .choices__item {
    background-color: #aaa;
    border: 1px solid #919191
}

.choices__list--dropdown {
    display: none;
    z-index: 1;
    position: absolute;
    width: 100%;
    background-color: #fff;
    border: 1px solid #ddd;
    top: 100%;
    margin-top: -1px;
    border-bottom-left-radius: 2.5px;
    border-bottom-right-radius: 2.5px;
    overflow: hidden;
    word-break: break-all
}

    .choices__list--dropdown.is-active {
        display: block
    }

.is-open .choices__list--dropdown {
    border-color: #b7b7b7
}

.is-flipped .choices__list--dropdown {
    top: auto;
    bottom: 100%;
    margin-top: 0;
    margin-bottom: -1px;
    border-radius: .25rem .25rem 0 0
}

.choices__list--dropdown .choices__list {
    position: relative;
    max-height: 300px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    will-change: scroll-position
}

.choices__list--dropdown .choices__item {
    position: relative;
    padding: 5px;
    font-size: 12px
}

[dir=rtl] .choices__list--dropdown .choices__item {
    text-align: right
}

@media (min-width:640px) {
    .choices__list--dropdown .choices__item--selectable {
        padding-right: 100px
    }

        .choices__list--dropdown .choices__item--selectable:after {
            content: attr(data-select-text);
            font-size: 12px;
            opacity: 0;
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%)
        }

    [dir=rtl] .choices__list--dropdown .choices__item--selectable {
        text-align: right;
        padding-left: 100px;
        padding-right: 10px
    }

        [dir=rtl] .choices__list--dropdown .choices__item--selectable:after {
            right: auto;
            left: 10px
        }
}

.choices__list--dropdown .choices__item--selectable.is-highlighted {
    background-color: #f2f2f2
}

    .choices__list--dropdown .choices__item--selectable.is-highlighted:after {
        opacity: .5
    }

.choices__item {
    cursor: default
}

.choices__item--selectable {
    cursor: pointer
}

.choices__item--disabled {
    cursor: not-allowed;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    opacity: .5
}



.choices__button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 0;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer
}

    .choices__button:focus {
        outline: none
    }

.choices__input {
    display: inline-block;
    vertical-align: baseline;
    font-size: 14px;
    margin-bottom: 0px;
    border: 0;
    border-radius: 0;
    max-width: 100%;
    padding: 4px 0 4px 2px
}

    .choices__input:focus {
        outline: 0
    }

[dir=rtl] .choices__input {
    padding-right: 2px;
    padding-left: 0
}

.choices__placeholder {
    opacity: .5
}

.choices[data-type*=select-multiple] .choices__input.is-hidden,
.choices[data-type*=select-one] .choices__input.is-hidden,
.choices__input.is-hidden {
    display: none
}

/* ====================================================
                   MULTI SELECTION END
======================================================== */

.rptMgr .dropup .dropdown-menu {
    max-height: 175px !important;
    transform: translate3d(0px, 21px, 0px) !important;
}

.tooltip-outer {
    position: relative;
}

.tooltip.show {
    opacity: 1;
}
/*.tooltip {
    z-index: 9999999 !important;
}*/
.tooltip {
    z-index: 1012 !important;
 
}

.tooltip-hover {
    display: none;
    background: #ffffff;
    box-shadow: 0px 1px 9px -3px rgb(0 0 0 / 25%);
    padding: 10px;
    position: absolute;
    width: 400px;
}

.tooltip-icons .i-close {
    color: red;
    padding-left: 10px;
    padding-top: 2px;
}

.tooltip-icons .i-tick {
    color: green;
    padding-left: 10px;
    padding-top: 2px;
}

.card-body .tooltip-hover .image-input .image-input-wrapper {
    width: 50px;
    height: 50px;
}

.fields-box {
    background-color: #eaeaea;
    -webkit-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    padding: 20px 20px 30px;
    display: none;
}

.add-btn {
    background-color: #3ecd64;
    border: none;
    padding: 5px 20px;
    border-radius: 4px;
    color: #fff;
    font-size: 12px;
    text-transform: uppercase;
}



.remove-btn {
    background-color: #cd3838;
    border: none;
    padding: 5px 20px;
    border-radius: 4px;
    color: #fff;
    font-size: 12px;
    text-transform: uppercase;
    margin-left: 5px;
}

    .add-btn:hover,
    .remove-btn:hover {
        filter: brightness(85%);
    }

.form-control .btn.dropdown-toggle {
    height: auto;
}

.bootstrap-select.form-control {
    border: 1px solid #999999;
}

.event-file-upload .file-upload-wrap {
    height: 280px;
    width: 90%;
    margin: 15px auto;
    box-shadow: 0 0.5rem 1.5rem 0.5rem rgb(0 0 0 / 8%)
}

    .event-file-upload .file-upload-wrap .image-input,
    .event-file-upload .file-upload-wrap .image-input .image-input-wrapper {
        width: 100%;
        height: 100%;
        border: none;
        box-shadow: none;
        text-align: center;
        position: relative;
    }

    .event-file-upload .file-upload-wrap i {
        margin-top: 40px;
        width: 80px;
        height: 80px;
        border: solid 3px var(--blue-color-theme);
        border-radius: 100%;
    }

        .event-file-upload .file-upload-wrap i:before {
            padding-top: 15px;
            font-size: 40px;
            color: var(--blue-color-theme);
            display: block;
        }

.event-file-upload .file-upload-button {
    position: absolute;
    bottom: 30px;
    left: 0px;
    width: 100%;
}

    .event-file-upload .file-upload-button span {
        padding: 12px 25px;
        font-size: 16px;
        font-weight: 400;
        -webkit-box-shadow: 0px 10px 10px -5px rgba(0,0,0,0.17);
        -moz-box-shadow: 0px 10px 10px -5px rgba(0,0,0,0.17);
        box-shadow: 0px 10px 10px -5px rgba(0,0,0,0.17);
    }

.event-file-upload .image-input-changed i {
    display: none;
}

.event-file-upload .image-input-changed .file-remove-btn {
    top: -15px !important;
    z-index: 9;
    width: 30px;
    height: 30px;
}

    .event-file-upload .image-input-changed .file-remove-btn i {
        display: block;
        margin-top: 0px !important;
        width: 30px;
        height: 30px;
        border: none;
        border-radius: 100%;
        color: #fff;
    }

        .event-file-upload .image-input-changed .file-remove-btn i:before {
            padding-top: 10px !important;
            color: #000 !important;
        }

.event-file-upload .image-input-changed .file-remove-btn {
    top: -10px !important;
}

/*.employee-details-left {
    position: relative;
}
*/
.pro-head {
    padding: 25px 50px;
}
.employee-detail-image {
    position: absolute;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    overflow: hidden;
    left: 50%;
    margin-left: -50px;
    margin-top: -100px;
}

    .employee-detail-image img {
        width: 100%;
        height: 100%;
        object-fit:cover;
    }

.employee-outer-detils {
    /*border-bottom: 1px solid #eef0f8;*/
    border-bottom: 2px dotted #a7a7a7;
    padding: 7px 0px;
}

    .employee-outer-detils.border-none,
    .backgrount-light-gray .employee-outer-detils.border-none {
        border: none !important;
    }

    .employee-outer-detils:after {
        clear: both;
        display: block;
        content: '';
    }

    .employee-outer-detils h4 {
        display: inline-block;
        width: 100%;
        margin-bottom: 5px;
        font-size: 13px;
    }

    .employee-outer-detils span {
        display: inline-block;
        width: 100%;
        margin-bottom: 6px;
        font-size: 14px;
        line-height: 24px;
        color: #000;
    }

        .employee-outer-detils span i {
            width: 20px;
            margin-right: 5px;
            font-size: 14px;
            text-align: center;
        
        }

form.display-flex {
    display: contents;
    height: 100%;
}

.display-flex {
    display: flex;
    justify-content: flex-end;
}

.display-block {
    display: block;
}

.display-inline-block {
    display: inline-block;
}

.employee-outer-detils.display-flex {
    display: flex;
}

.radio-inline a {
    color: #333;
}

.employee-manager-img {
    width: 40px;
    height: 40px;
    float: left;
    border-radius: 50%;
    object-fit: cover;
    margin-top: 3px;
   
    overflow: hidden;
}

    .employee-manager-img img {
        width: 100%;
        height: 100%;
        border-radius: 100%;
        object-fit: cover;
    }

.employee-manager-detils-content {
    padding: 0px 0px 0px 5px;
    float: left;
}

    .employee-manager-detils-content span {
        display: inline-block;
        width: 100%;
        margin-bottom: 2px;
    }

.personal-details-left {
    /* margin-top: -11px; */
    margin-top: -60px;
}

    .personal-details-left .ulList > li {
        padding: 6px 12px;
        background-color: transparent;
        color: #fff;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
        margin: 0px !important;
        font-size: 12px;
    }

    .personal-details-left .tab-content {
        top: 36px;
        border: none;
    }

    .personal-details-left .ulList > li.active {
        background-color: #fff !important;
        color: #000;
    }

.header.header-fixed {
    z-index: 0 !important;
    /*z-index: 5 !important;*/
}

/* SLIDER STYLE START */
.form-slider-outer {
    position: relative;
}

.slider-forms {
    position: fixed;
    right: -550px;
    width: 550px;
    /* height: 100%; */
   /* margin: 28px;*/
    top: 0px;
    bottom: 0px;
    z-index: 9991;
    /*    z-index: 1010;*/
    z-index: 1011;
    padding: 0px 0px 0px 40px;
}

.slider-inner-style {
    background: #ffffff;
    box-shadow: 0px 1px 9px -3px rgb(0 0 0 / 25%);
    transition: 0.3s;
    overflow-x: hidden;
    overflow-y: scroll;
    height: 100%;
    top: 0px;
    bottom: 0px;
    padding: 20px 20px 40px;
}

.slider-forms.slider-forms-open {
    right: 0px;
    transition: 0.4s;
}

.slider-form-close {
    background-color: #F5F4F7;
    width: 25px;
    height: 25px;
    padding: 5px 6px 0px;
    text-align: center;
    position: absolute;
    /* left: 0px; */
    z-index: 10101;
    right: 40px;
    display: flex;
    top: 20px;
    border-radius: 5px;
    cursor: pointer;
    line-height: 18px;
}

    .slider-form-close i::before {
        color: #000000;
        font-size: 12px;
    }

.slider-inner-style::-webkit-scrollbar {
    width: 7px;
}

.slider-inner-style::-webkit-scrollbar-track {
    background: #dddddd;
}

.slider-inner-style::-webkit-scrollbar-thumb {
    background: #888;
}

    .slider-inner-style::-webkit-scrollbar-thumb:hover {
        background: #000;
    }

.slider-forms.slider-forms-open .file-upload-wrap .btn.btn-upload {
    background-color: #e4e9ee;
    border: #e4e9ee;
    color: #000;
}

    .slider-forms.slider-forms-open .file-upload-wrap .btn.btn-upload::before {
        color: #000;
    }

.slider-forms.slider-forms-open .file-upload-wrap .image-input,
.slider-forms.slider-forms-open .file-upload-wrap .image-input .image-input-wrapper {
    width: 100%;
    height: 120px;
    border: none;
    box-shadow: none;
    border-radius: 0px;
}

.slider-inner-style .two-col-outer {
    display: flex;
    margin-bottom: 10px;
}

    .slider-inner-style .two-col-outer .row-ithems {
        width: 50%;
    }

.slider-forms.slider-forms-open .file-upload-wrap .image-input {
    border: dotted 2px #abb2b9;
    background-color: #f3f6f9;
}

.slider-forms.slider-forms-open .file-upload-wrap .file-upload-outer {
    width: 100% !important;
    height: 100% !important;
}

    .slider-forms.slider-forms-open .file-upload-wrap .file-upload-outer input[type="file"] {
        width: 100% !important;
        height: 100% !important;
        position: absolute;
        left: 0px;
        cursor: pointer;
    }

.slider-forms.slider-forms-open .file-upload-wrap .image-input [data-action="change"] {
    cursor: pointer;
    position: absolute;
    right: 0px;
    top: 0px;
    text-align: center;
}

.slider-forms.slider-forms-open .file-upload-wrap .image-input i.fa-cloud-upload-alt {
    padding-top: 36px;
    font-size: 50px !important;
}

.slider-forms.slider-forms-open .file-upload-wrap .file-remove-btn {
    background-color: #f3f6f9;
}

.slider-forms.slider-forms-open .file-upload-wrap .btn.btn-icon i::before {
    color: #000 !important;
    font-size: 8px !important;
}

.form-overlay {
    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0px;
    right: 0px;
    bottom: 0px;
    top: 0px;
    z-index: 1009;
    /*z-index: 1010;*/
    animation: animation-offcanvas-fade-in .6s ease 1;
}

.slider-forms-open h3 {
    color: #3F4254 !important;
    font-size: 20px !important;
    line-height: 24px !important;
    margin: 0px 0px 10px !important;
    padding: 0px;
}

.slider-inner-style .row-outer {
    margin-bottom: 20px;
}

.slider-inner-style .card-footer-bottom-fixed {
    background-color: #fff;
    /*  border-top: 1px solid #c6c6cc; */
    border-top: 1px solid #e0e0e3;
    position: absolute;
    left: 52px;
    right: 0px;
    width: 91%;
    bottom: 0px;
    padding: 10px 0px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

.slider-inner-style .profile-header {
    box-shadow: none;
}

.slider-inner-style .checkbox-inline .checkbox {
    margin-bottom: 0px;
}
/* SLIDER STYLE END */

.tooltip-inner {
    background-color: #000 !important;
    color: #fff;
}

.bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^="top"] .arrow::before {
    border-top-color: #000 !important;
}

.bs-tooltip-right .arrow::before, .bs-tooltip-auto[x-placement^="right"] .arrow::before {
    border-right-color: #000 !important;
}


.bs-tooltip-bottom .arrow::before, .bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
    border-bottom-color: #000 !important;
}


.bs-tooltip-left .arrow::before, .bs-tooltip-auto[x-placement^="left"] .arrow::before {
    border-left-color: #000 !important;
}


.flex-root {
    height: 100%;
}

.card.card-custom.height-100per,
.row.height-100per,
.height-100per {
    height: 100%;
    position: relative;
}

    .card.card-custom.height-100per.position-relative,
    .row.height-100per.position-relative {
        position: relative;
    }

        .card.card-custom.height-100per.position-relative.z-index-1,
        .row.height-100per.position-relative.z-index-1 {
            z-index: 4;
        }

    .row.height-100per .personal-details-left {
        height: 100%;
    }

        .row.height-100per .personal-details-left .accodiaton-only,
        .row.height-100per .personal-details-left .accodiaton-only .ulList,
        .row.height-100per .personal-details-left .accodiaton-only .ulList .tab-content {
            height: 98%;
        }

            .row.height-100per .personal-details-left .accodiaton-only .ulList .tab-content {
                border-bottom-left-radius: 6px;
                border-bottom-right-radius: 6px;
                padding-top: 25px;
            }

.title-with-icon {
    font-size: 18px;
    border-bottom: 1px solid #ededed;
    margin-bottom: 5px;
    padding-bottom: 10px;
}

.personal-details-left h5 {
    font-size: 16px;
    margin-bottom: 10px;
    margin-top: 10px;
    text-transform: uppercase;
    color: #000;
}

.personal-details-left h4 {
    font-size: 15px;
    margin-bottom: 10px;
    margin-top: 0px;
    color: #000;
}

.two-col {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-gap: 10px;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eef0f8;
}

.three-col {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-gap: 10px;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eef0f8;
}

.four-col {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-gap: 10px;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eef0f8;
}

.five-col {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    grid-gap: 10px;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eef0f8;
}

.six-col {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    grid-gap: 10px;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eef0f8;
}

    .two-col.border-none,
    .three-col.border-none,
    .four-col.border-none,
    .five-col.border-none,
    .six-col.border-none {
        border: none;
    }

.two-col .col-100per {
    padding: 0px;
    margin: 0px;
}

    .two-col .col-100per .row-outer {
        margin-bottom: 15px;
    }

label.view-title {
    font-size: 11px;
    color: #b8b8b8;
    line-height: 16px;
    margin-bottom: 2px;
    font-weight: 300;
}

    label.view-title span {
        font-size: 14px;
        color: #cb0804;
        line-height: 16px;
        margin-bottom: 5px;
        font-weight: 500;
    }

.view-details {
    font-size: 14px;
    color: #000;
    line-height: 16px;
    margin-bottom: 5px;
}



.card.card-custom.height-100per,
.row.height-100per,
.height-100per {
    /*  height: calc(98vh - 96px);*/
    /*height: calc(123vh - 96px);*/
    /* height:100%;*/
    height: calc(98vh - 35px);
    box-sizing: border-box;
    position: relative;
}


    .view-details label.view-title {
        display: block;
    }

.tab-content-scroller {
    height: 390px;
    overflow-y: scroll;
    overflow-x: hidden;
}

    .tab-content-scroller::-webkit-scrollbar {
        width: 7px;
        border-radius: 4px;
    }

    .tab-content-scroller::-webkit-scrollbar-track {
        background: #f1f1f1;
    }

    .tab-content-scroller::-webkit-scrollbar-thumb {
        background: #7d7e7f;
    }

        .tab-content-scroller::-webkit-scrollbar-thumb:hover {
            background: #000;
        }

.personal-details-left .table-dark,
.personal-details-left .table-dark > th,
.personal-details-left .table-dark > td {
    background-color: #EBEDF3;
    color: #000;
    border-color: #EBEDF3 !important;
}

.table-light,
.table-light > th,
.table-light > td {
    /*    background-color: #264f94;
    color: #fff;
    border-color: #EBEDF3 !important;*/
    background-color: #EBEDF3;
    color: #14171c;
    border-color: #EBEDF3 !important;
}

.ulList .ihits-table {
    margin-bottom: 20px;
}



.card-details-view {
    border: 1px solid #ebedf3;
    border-radius: 4px;
    position: relative;
    padding-bottom: 30px;
    height: 100%;
}

    .card-details-view::after {
        clear: both;
        display: block;
        content: '';
    }

    .card-details-view .card-content {
        padding: 0px 10px 10px;
        font-size: 12px;
    }

    .card-details-view h3 {
        background-color: #ebedf3;
        color: #000;
        font-size: 14px;
        padding: 5px;
    }

    .card-details-view .card-content span {
        display: inline-block;
        width: 100%;
    }

    .card-details-view .card-content .btn-section {
        position: absolute;
        bottom: 10px;
    }

        .card-details-view .card-content .btn-section i::before {
            color: #000 !important;
        }

.backgrount-white {
    background: #fff;
}

.backgrount-light-gray {
    background: #EEF0F8;
}

    .backgrount-light-gray span {
        color: #000;
    }

    .backgrount-light-gray .employee-outer-detils {
        border-bottom: 1px solid #fff;
    }

.right-10 {
    right: 10px;
}

.event-profile-outer {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.event-profile-list {
    flex-basis: 19%;
    background-color: #fff;
    border-radius: 6px;
    padding: 10px 20px 25px;
    border: solid 1px #eaecf5;
    box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.05);
    position: relative;
    overflow: hidden;
    z-index: 1;
    margin: 0px .5% 10px;
}

    .event-profile-list .half-circle-shape {
        width: 100%;
        height: 240px;
        border-radius: 100%;
        background-color: rebeccapurple;
        position: absolute;
        top: -140px;
        left: 0px;
        overflow: hidden;
    }

    .event-profile-list:nth-child(1) .half-circle-shape {
        background-color: #05ae99;
    }

    .event-profile-list:nth-child(2) .half-circle-shape {
        background-color: #ef0d8b;
    }

    .event-profile-list:nth-child(3) .half-circle-shape {
        background-color: #0060ad;
    }

    .event-profile-list:nth-child(4) .half-circle-shape {
        background-color: #f88b0a;
    }

    .event-profile-list:nth-child(5) .half-circle-shape {
        background-color: #05ae99;
    }

    .event-profile-list:nth-child(6) .half-circle-shape {
        background-color: #ef0d8b;
    }

    .event-profile-list:nth-child(7) .half-circle-shape {
        background-color: #0060ad;
    }

    .event-profile-list:nth-child(8) .half-circle-shape {
        background-color: #f88b0a;
    }

    .event-profile-list .half-circle-shape span:nth-child(1) {
        width: 140px;
        height: 140px;
        border-radius: 10px;
        background-color: rgba(255,255,255,0.2);
        display: block;
        bottom: -20px;
        position: absolute;
        right: -80px;
        transform: rotate(45deg);
    }

    .event-profile-list .half-circle-shape span:nth-child(2) {
        width: 140px;
        height: 140px;
        border-radius: 10px;
        background-color: rgba(255,255,255,0.2);
        display: block;
        bottom: 0px;
        position: absolute;
        left: -50px;
        transform: rotate(45deg);
    }

    .event-profile-list .half-circle-shape span:nth-child(3) {
        width: 140px;
        height: 140px;
        border-radius: 10px;
        background-color: rgba(255,255,255,0.2);
        display: block;
        bottom: 0px;
        position: absolute;
        left: -30px;
        transform: rotate(45deg);
    }

    .event-profile-list .half-circle-shape span:nth-child(4) {
        width: 100px;
        height: 100px;
        border-radius: 10px;
        background-color: rgba(255,255,255,0.2);
        display: block;
        bottom: 40px;
        position: absolute;
        left: 50px;
        transform: rotate(45deg);
    }

    .event-profile-list .event-profile-content {
        position: relative;
        z-index: 2;
        width: 100%;
        text-align: center;
    }

        .event-profile-list .event-profile-content h2 {
            font-size: 13px;
            font-weight: 600;
            color: #fff;
        }

        .event-profile-list .event-profile-content .event-profile-img {
            width: 100%;
            height: 90px;
            overflow: hidden;
            border-radius: 8px;
            box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.07);
            border: solid 4px #fff;
            margin-bottom: 5px;
        }

            .event-profile-list .event-profile-content .event-profile-img img {
                width: 100%;
                height: auto;
                overflow: hidden;
            }

            .event-profile-list .event-profile-content .event-profile-img.img-circle {
                width: 86px;
                height: 86px;
                overflow: hidden;
                border-radius: 100%;
                margin: auto;
                margin-bottom: 5px;
            }

        .event-profile-list .event-profile-content .event-profile-title {
            color: #333;
            font-size: 14px;
            line-height: 16px;
            font-weight: 600;
            display: inline-block;
            width: 100%;
        }

        .event-profile-list .event-profile-content .event-profile-designation {
            color: #8f8f8f;
            font-size: 12px;
            font-weight: 400;
            display: inline-block;
            width: 100%;
        }

        .event-profile-list .event-profile-content p {
            color: #444242;
            font-size: 11px;
            font-weight: 400;
            line-height: 14px;
        }

.event-date-time {
    position: absolute;
    bottom: 5px;
    width: 100%;
    left: 0px;
    display: flex;
    padding: 5px 10px;
}

    .event-date-time i {
        margin-right: 5px;
    }

    .event-date-time .event-date {
        color: #8f8f8f;
        font-size: 11px;
        font-weight: 400;
        line-height: 14px;
    }

    .event-date-time .event-time {
        margin-left: auto;
        color: #8f8f8f;
        font-size: 11px;
        font-weight: 400;
        line-height: 14px;
        margin-right: 20px;
    }

        .event-date-time .event-time i {
            position: relative;
        }

        .event-date-time .event-time .event-chart-notification {
            width: 20px;
            height: 12px;
            border-radius: 4px;
            background-color: red;
            position: absolute;
            font-size: 10px;
            color: #fff;
            text-align: center;
            left: 10px;
            top: -6px;
        }

.event-calenar .fc-content {
    padding: 5px 26px !important;
    line-height: 12px !important;
}

.event-calenar .fc-unthemed .fc-event .fc-content:before,
.event-calenar .fc-unthemed .fc-event-dot .fc-content:before {
    top: 6px !important;
}

.dashboard-section-two {
    display: flex;
    justify-content: space-between;
}

.dashboard-left-side {
    width: 24%;
}

.dashboard-center-side {
    width: 54%;
}

.dashboard-right-side {
    width: 20%;
}


.dashboard-calendar .fc-dayGrid-view .fc-body .fc-row {
    min-height: 4em;
    height: 25px !important;
    min-height: 25px !important;
}

.dashboard-calendar .fc-scroller {
    height: 125px !important;
}

.dashboard-calendar .fc-right,
.dashboard-calendar .fc-left {
    display: none;
}

.dashboard-calendar .fc-widget-header table thead tr th span {
    font-size: 11px;
    padding: 0px;
}

.dashboard-calendar .fc-widget-header table thead tr th {
    padding: 0px;
}

.dashboard-calendar .fc-dayGrid-view .fc-day-number {
    line-height: 10px;
    font-size: 11px;
}

.dashboard-calendar .fc-unthemed .fc-day-grid td:not(.fc-axis) {
    padding: 2px 2px 0px 0px;
}

.fc-row.fc-week.fc-widget-content.fc-rigid:last-child {
    display: block;
}

.employee-profile-search {
    background-color: #0060ad;
    padding: 20px;
    border-radius: 6px;
    position: relative;
    overflow: hidden;
}

    .employee-profile-search h2 {
        font-size: 18px;
        font-weight: 400;
        line-height: 20px;
        color: #fff;
        padding: 0px;
        margin: 0px 0px 8px;
    }

    .employee-profile-search p {
        font-size: 11px;
        font-weight: 400;
        line-height: 14px;
        color: #fff;
        padding: 0px;
        margin: 0px 0px 10px;
    }

    .employee-profile-search input {
        border: none;
        padding: 4px 5px;
        height: 35px;
    }

.employee-pProfile-search-result {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #fff;
    left: 0px;
    top: 0px;
    display: none;
}

.search-close {
    position: absolute;
    width: 15px;
    height: 15px;
    right: 5px;
    top: 5px;
    background-color: #000;
    color: #fff;
    border-radius: 100%;
    text-align: center;
    line-height: 11px;
    cursor: pointer;
}

    .search-close i::before {
        color: #fff;
        padding: 0px;
        font-size: 6px;
    }

.thought-the-day {
    background-color: #0060ad;
    padding: 10px 20px 20px;
    border-radius: 6px;
    position: relative;
    overflow: hidden;
}

    .thought-the-day blockquote {
        font-size: 14px;
        font-style: italic;
        font-weight: 300;
        line-height: 22px;
        color: #fff;
    }

        .thought-the-day blockquote::before {
            content: '\201C';
            color: #fff;
            font-size: 100px;
            font-weight: 500;
            font-family: Arial, Helvetica, sans-serif;
            position: relative;
            top: 50px;
            margin-right: 16px;
        }

    .thought-the-day figcaption {
        color: #000;
        padding: 0px;
        font-size: 13px;
        text-align: right;
    }

    .thought-the-day cite {
        display: inline-block;
        width: 100%;
    }

#line-chart {
    display: none;
}

.data-chart-one {
    text-align: center;
}

    .data-chart-one img {
        max-width: 100%;
        height: auto;
    }

.user-profile-login-image {
    width: 40px;
    height: 40px;
    border-radius: 100%;
    margin-right: 10px;
}

    .user-profile-login-image img {
        width: 100%;
        height: auto;
        border-radius: 100%;
        border: solid 3px #e7e7e7;
    }

.dash-board-top-buttons {
    display: flex;
    border-radius: 6px;
    margin-bottom: 10px;
}

.image-button,
.image-button-two,
.image-button-three,
.image-button-four,
.image-button-five {
    /* border-radius: 6px; */
    /* background-color: #02bcd5; */
    padding: 15px;
    width: 25%;
    margin: 0px 0px 0px 0px;
    /* border-right: 1px solid #333; */
}

.image-button-five {
    margin-right: 0px;
}

.icon-image-box {
    width: 70px;
    height: 70px;
    border-radius: 100%;
    text-align: center;
    margin-right: 10px;
    padding-top: 13px;
    background-color: #ffcf25;
    float: left;
    position: relative;
}

.image-button-two .icon-image-box {
    background-color: #ff5353;
}

.image-button-three .icon-image-box {
    background-color: #8950fc;
}

.image-button-four .icon-image-box {
    background-color: #01bfa5;
}

.image-button-five .icon-image-box {
    background-color: #663259;
}

.image-button h2,
.image-button-two h2,
.image-button-three h2,
.image-button-four h2,
.image-button-five h2 {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    margin-top: 15px;
    color: #333;
}

.image-button img,
.image-button-two img,
.image-button-three img,
.image-button-four img,
.image-button-five img {
    width: 30px;
}

.notification-icon {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    display: block;
    background-color: #fff;
    top: 0px;
    right: 0px;
    font-size: 11px;
    font-weight: 500;
    padding-top: 1px;
}

.today-event img {
    max-width: 100%;
    height: auto;
}


.aside-menu .menu-nav > .menu-item .menu-submenu .menu-item > .menu-heading .menu-text, .aside-menu .menu-nav > .menu-item .menu-submenu .menu-item > .menu-link .menu-text {
    font-weight: 200;
    font-size: 12px;
    text-transform: initial;
}

.aside-menu .menu-nav > .menu-item > .menu-heading .menu-icon, .aside-menu .menu-nav > .menu-item > .menu-link .menu-icon {
    flex: 0 0 30px;
    font-size: 1.3rem;
}

.aside-menu .menu-nav > .menu-item .menu-submenu .menu-item > .menu-heading .menu-bullet, .aside-menu .menu-nav > .menu-item .menu-submenu .menu-item > .menu-link .menu-bullet {
    vertical-align: middle;
    text-align: left;
    flex: 0 0 12px;
}

.header-fix-blue {
    background-color: var(--blue-color-theme);
    position: fixed;
    z-index: 0;
    width: 100%;
    margin-top: 100px;
    height: 29px;
}

.header-fix-blue-two {
    background-color: var(--blue-color-theme);
    position: fixed;
    z-index: 0;
    width: 100%;
    margin-top: 90px;
    height: 29px;
}

.footer-fix {
    background-color: #fff;
    position: fixed;
    width: 91%;
    height: 50px;
    bottom: 25px;
    z-index: 999;
    padding-bottom: 70px;
}

.footer-fixed .footer {
    z-index: 1;
}

.aside-menu .menu-nav > .menu-item > .menu-submenu .menu-subnav > .menu-item > .menu-link {
    padding: 0 25px;
    padding-left: 50px;
}

    .aside-menu .menu-nav > .menu-item > .menu-submenu .menu-subnav > .menu-item > .menu-link .menu-submenu ul li a {
        padding-left: 60px;
    }

.aside-menu .menu-nav > .menu-item > .menu-submenu .menu-subnav > .menu-item > .menu-submenu .menu-subnav > .menu-item > .menu-link {
    padding-left: 65px;
    min-height: 26px;
}

@media (min-width: 992px) {
    .header-fixed.aside-minimize .header,
    .aside-fixed.header-fixed.aside-minimize.aside-minimize-hover .header {
        left: 60px;
    }

    .aside-minimize:not(.aside-minimize-hover) .aside {
        width: 80px;
        transition: width 0.2s;
    }

    .aside {
        width: 280px;
    }
        .aside:hover {
            box-shadow: rgba(0, 0, 0, 0.15) 2.4px 2.4px 3.2px;
        }
    .aside-fixed.aside-minimize.aside-minimize-hover .aside {
        width: 280px;
        transition: width 0.2s;
        transition-duration: 1s;
    }

    .aside-fixed.aside-minimize.aside-minimize-hover .wrapper,
    .aside-fixed.aside-minimize:not(.aside-minimize-hover) .wrapper {
        padding-left: 60px;
    }

    .menu-subnav::before {
        background-color: #7C8DA7;
        content: '';
        width: 1px;
        height: 100%;
        position: absolute;
        left: 21px;
    }

    .aside-menu .menu-nav .menu-subnav {
        position: relative;
    }

    .aside-menu .menu-nav > .menu-item > .menu-submenu .menu-subnav > .menu-item > .menu-link .menu-submenu {
        position: relative;
    }

        .aside-menu .menu-nav > .menu-item > .menu-submenu .menu-subnav > .menu-item > .menu-link .menu-submenu ul:before {
            background-color: #7C8DA7;
            content: '';
            width: 1px;
            height: 100%;
            position: absolute;
            left: 41px;
        }

    .menu-nav li ul li.menu-item-open {
        position: relative;
    }

        .menu-nav li ul li.menu-item-open::before {
            background-color: #7C8DA7;
            content: '';
            width: 1px;
            height: 100%;
            position: absolute;
            left: 51px;
            top: 13px;
        }
}

.card.card-custom.height-100per.footer-row-fixed,
.row.height-100per.footer-row-fixed,
.slider-inner-style.footer-row-fixed {
    padding-bottom: 50px;
}

.card-footer-bottom-fixed {
    background-color: #fff;
    /*  border-top: 1px solid #c6c6cc; */
    /*border-top: 1px solid #e0e0e3;*/
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 0px;
    padding: 10px 85px;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

.card.card-custom > .card-header .card-title,
.card.card-custom > .card-header .card-title .card-label {
    font-size: 14px;
}

.asset-allocation-button-view {
    display: none;
}

.tab-button-wrap {
   /* background-color: #fbfbfb;
    border: solid 1px #f1f3f4;*/
    display: flex;
    width: 100%;
    border-radius: 4px;
    margin-left: 12px;
    margin-right: 12px;
    margin-bottom: 10px;
}

    .tab-button-wrap .tab-items {
        padding: 0px;
        margin: 0px;
        position: relative;
        padding: 0px 15px 0px 5px;
        /* border-right: 1px solid #ededf4; */
    }

        .tab-button-wrap .tab-items::after {
            content: '';
            width: 1px;
            height: 70%;
            background-color: #f0f0f4;
            position: absolute;
            right: 0px;
            display: block;
            top: 15%;
        }

        .tab-button-wrap .tab-items .btn-title {
            display: block;
            margin: 5px 0px 0px;
            padding: 0px 10px 0px;
            position: relative;
            font-size: 13px;
            color: #000;
            line-height: 30px;
            font-weight: 400;
            cursor: pointer;
        }

            .tab-button-wrap .tab-items .btn-title:after {
                content: '';
                display: block;
                width: 0;
                height: 3px;
                transition: width .3s;
                background-color: #135fd4;
            }

            .tab-button-wrap .tab-items .btn-title:hover::after,
            .tab-button-wrap .tab-items .btn-title.active::after {
                width: 100%;
            }

            .tab-button-wrap .tab-items .btn-title .btn-notification {
                padding: 2px 4px;
                border-radius: 50px;
                background-color: #135fd4;
                font-size: 9px;
                line-height: 10px;
                font-weight: 600;
                color: #fff;
                position: relative;
                top: -8px;
                right: 2px;
            }
        /* .tab-button-wrap .tab-items.low .btn-title{
color: #fa0303;
}
.tab-button-wrap .tab-items.medium .btn-title{
    color: #fa9403;
    }
.tab-button-wrap .tab-items.high .btn-title{
   color: #00ba04;
     } */
      /*  .tab-button-wrap .tab-items.low .btn-title .btn-notification,
        .tab-button-wrap .tab-items.low .btn-title:after {
            background-color: #fa0303;
        }

        .tab-button-wrap .tab-items.medium .btn-title .btn-notification,
        .tab-button-wrap .tab-items.medium .btn-title:after {
            background-color: #fa9403;
        }

        .tab-button-wrap .tab-items.high .btn-title .btn-notification,
        .tab-button-wrap .tab-items.high .btn-title:after {
            background-color: #00ba04;
        }*/

.text-color-low {
    color: #fa0303;
}

.text-color-medium {
    color: #fa9403;
}

.text-color-high {
    color: #00ba04;
}

.tab-button-wrap .tab-items.select-option {
    margin-left: auto;
    padding-right: 10px;
}

.tab-button-wrap .tab-items.align-left {
    margin-left: auto;
    padding-right: 10px;
}

.tab-button-wrap .tab-items .form-group {
    margin-top: 6px;
}

.tab-button-wrap .tab-items.align-left:after {
    display: none;
}

.tab-button-wrap .tab-items:last-child {
    padding-right: 10px;
}

    .tab-button-wrap .tab-items:last-child:after {
        display: none;
    }

.tab-button-wrap .tab-items.select-option select,
.tab-button-wrap .tab-items .select-option select {
    background-color: #fff;
}

.radio-inline .radio span {
    margin-right: 5px;
}

.radio.radio-outline > span {
    height: 15px;
    width: 15px;
}

    .radio.radio-outline > span:after {
        width: 5px;
        height: 5px;
    }

.profile-completion-percentage {
    font-size: 11px;
    line-height: 11px;
}

.tab-button-wrap .profile-completion-percentage {
    position: relative;
    top: 4px;
}

.profile-completion-percentage.low:after,
.profile-completion-percentage.medium:after,
.profile-completion-percentage.high:after {
    content: '';
    height: 10px;
    display: inline-block;
}

.profile-matching-line .progress-bar .low,
.tab-style-button .progress-bar .low {
    width: 30%;
    background-color: #fa0303;
    text-align: left;
    padding-left: 3px;
}


.profile-matching-line .progress-bar .medium,
.tab-style-button .progress-bar .medium {
    background-color: #fa9403;
    width: 60%;
    text-align: left;
    padding-left: 3px;
}

.profile-matching-line .progress-bar .high,
.tab-style-button .progress-bar .high {
    background-color: #00ba04;
    width: 80%;
    text-align: left;
    padding-left: 3px;
}

.profile-matching-line .progress-value,
.tab-style-button .progress-value {
    font-size: 8px;
    position: relative;
    line-height: 8px;
    top: -3px;
    font-weight: 600;
    color: #fff;
}

.tab-style-button .progress-value {
    top: 0px;
}

.profile-matching-line .progress-bar,
.tab-style-button .progress-bar {
    width: 100%;
    height: 12px;
    border-radius: 10px;
    background-color: #dddfe9;
}

    .profile-matching-line .progress-bar .medium,
    .profile-matching-line .progress-bar .low,
    .profile-matching-line .progress-bar .high,
    .tab-style-button .progress-bar .medium,
    .tab-style-button .progress-bar .low,
    .tab-style-button .progress-bar .high {
        height: 12px;
        border-radius: 10px;
    }

.form-control.width-auto {
    width: auto;
    display: inline-block;
}

.btn.btn-icon i {
    padding: 2px;
}

.width-auto {
    width: auto;
}

.select-option .form-group {
    float: left;
}

    .select-option .form-group.filter-combobox {
        width: 200px;
    }

.select-option .slider-inner-style .form-group {
    width: 100%;
}

.select-option .sraech-slider {
    width: 26px;
    height: 26px;
    /*background-color: #f1f1f7;*/
    float: left;
    margin-top: 6px;
    margin-left: 5px;
    border-radius: 3px;
    position: relative;
}

    .select-option .sraech-slider i,
    .select-option .filter-button i {
        color: #999;
        font-size: 15px;
    }

.select-option .filter-button i {
    font-size: 13px;
}

.select-option .sraech-slider .search-slider-inner {
    width: 26px;
    height: 24px;
    /*background-color: #f1f1f7;*/
    border-radius: 3px;
    text-align: center;
    padding: 5px;
    position: relative;
    z-index: 3;
    cursor: pointer;
    margin-top: 1px;
}

.select-option .sraech-slider input.form-control {
    position: absolute;
    right: -1px;
    top: 0px;
    z-index: 2;
    width: 0;
    transition: 0.8s;
    background-color: #f1f1f7;
    border: none;
    border-radius: 4px;
}

    .select-option .sraech-slider input.form-control.field-width-big {
        width: 231px;
        transition: 0.3s;
        border: solid 1px #c8c8c8;
    }

.select-option .filter-button {
    width: 26px;
    height: 26px;
    background-color: #f1f1f7;
    float: left;
    margin-top: 6px;
    border-radius: 3px;
    text-align: center;
    padding: 5px;
    margin-left: 5px;
    cursor: pointer;
}


.tab-style-button .button-group {
    margin-top: 6px;
    margin-left: 6px;
    margin-bottom: 6px;
}

.float-right {
    float: right;
}

.float-left {
    float: left;
}

.float-none {
    float: none;
}

.slider-search-field {
    position: relative;
    margin-top: 10px;
}

.search-profile-details {
    padding: 15px;
    width: 100%;
    height: auto;
    background-color: #f3f6f9;
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
}

    .search-profile-details .text-muted {
        width: 100px;
    }

h
.slider-search-field input {
    height: 40px;
    border: solid 1px #b0b0b0;
    padding: 10px;
    font-size: 13px;
    border-radius: 3px;
    line-height: 18px;
    color: #595b66;
    width: 100%;
}

.slider-search-field img {
    width: 70px;
    height: auto;
    margin-right: 15px;
    border-radius: 4px;
}

.search-profile-img-outer {
    display: flex;
    margin-bottom: 10px;
}

    .search-profile-img-outer .search-frofile-content .search-profile-title {
        font-size: 15px;
        font-weight: 500;
        color: #333;
        line-height: 20px;
        margin-bottom: 2px;
        display: inline-block;
        width: 100%;
    }

    .search-profile-img-outer .search-frofile-content .search-profile-designation {
        font-size: 12px;
        font-weight: 400;
        color: #333;
        line-height: 16px;
        margin-bottom: 2px;
        display: inline-block;
        width: 100%;
    }

.search-profile-details button,
.search-profile-details a.btn {
    height: 35px;
    line-height: 24px;
}

.ihits-table .table-success h5 {
    font-size: 13px;
    color: #000;
}

.hide {
    display: none;
}

.selectFieldValuShow .ihits-table {
    display: none;
}

#one {
    display: block;
}

.succession-planning-header {
    background-color: #f0f0f0;
    padding: 35px;
    border-radius: 4px;
    display: flex;
    margin-bottom: 20px;
}

.successor-profile-img {
    border-radius: 4px;
    width: 150px;
    height: auto;
    overflow: hidden;
    margin-right: 40px;
}

    .successor-profile-img img {
        width: 100%;
        height: auto;
    }

    .successor-profile-img .view-profile {
        display: block;
        padding: 10px;
        color: #fff;
        font-size: 13px;
        text-transform: uppercase;
        text-align: center;
        position: relative;
        height: 40px;
        margin-top: -5px;
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
    }

.successor-profile-content {
    width: 100%;
}

.profile-title-row {
    display: flex;
    margin-bottom: 15px;
}

.profile-matching-line {
    margin-left: auto;
}

.other-content-row {
    display: flex;
    margin-bottom: 20px;
}

    .other-content-row .row-ithems {
        margin-right: 50px;
    }


.attendance-absent {
    color: #fa0303;
    display: inline-block;
    width: 100%;
}

.attendance-present {
    color: #00ba04;
    display: inline-block;
    width: 100%;
}

.attendance-loos-of-pay {
    color: #fa9403;
}

.attendance-table-footer {
    background-color: #d0d5d9;
    color: #000;
}


.card-body h5 {
    font-size: 14px;
}

.tab-items.border-none.tab-items::after {
    display: none;
}

/*.btn.btn-excel {
    background-color: #02723b;
    font-size: 11px;
}*/

.tab-style-button .btn.btn-excel {
    margin-top: 6px;
    margin-left: 6px;
    padding: 3px 7px;
}

.btn.btn-excel i {
    padding-right: 0px;
}

/*.btn.btn-excel:hover {
    background-color: #01572d;
}*/

.btn.btn-outline-excel {
    background-color: transparent;
    border: solid 1px #02723b;
    color: #02723b;
    font-size: 11px;
}

.tab-style-button .btn.btn-outline-excel {
    margin-top: 6px;
    margin-left: 6px;
    padding: 3px 7px;
}

.btn.btn-outline-excel i {
    color: #02723b;
    padding-right: 0px;
}

.btn.btn-outline-excel:hover {
    background-color: #02723b;
    color: #fff;
}

    .btn.btn-outline-excel:hover i {
        color: #fff;
    }

.hr-planning-entry-left-side {
    padding: 30px;
    background-color: #f3f6f9;
}

.border-none {
    border: none !important;
}

.industry-benchmark-salary-slider-list table .form-control {
    color: #595b66;
    border: 1px solid #999999;
    background-color: #fff;
    padding: 0px 5px;
    line-height: 18px;
    height: 26px;
    font-size: 13px;
    border-radius: 3px;
}

.switch input:empty ~ span:after {
    height: 14px;
    width: 14px;
}

.switch input:empty ~ span {
    height: 20px;
    width: 40px;
    margin: 2px 7px;
}

    .switch input:empty ~ span:before {
        width: 37px;
        border-radius: 15px;
    }

.switch input:checked ~ span:after {
    margin-left: 18px;
}

.switch input:checked ~ span:before {
    background-color: #3699FF;
}

.switch input:checked ~ span:after {
    background-color: #fff;
}





/* .name-with-img {
    display        : flex;
    align-items    : center;
    justify-content: left;
}

.name-with-img a {
    cursor: pointer;
}

.profile-img {
    width        : 30px;
    height       : 30px;
    float        : left;
    margin-right : 10px;
    border-radius: 100px;
    overflow     : hidden;
}

.profile-img img {
    width    : 100%;
    max-width: 100%;
    height   : auto;
} */
.bg-info {
    background-color: #fff !important;
    border: var(--blue-color-theme) solid 1px;
}

    .bg-info .card-text {
        font-size: 30px;
        color: var(--blue-color-theme);
        margin: 0px;
    }

    .bg-info p {
        color: #000;
    }

.modal-confirm {
    color: #636363;
    width: 400px;
}

    .modal-confirm .modal-content {
        padding: 20px;
        border-radius: 5px;
        border: none;
        text-align: center;
        font-size: 14px;
    }

    .modal-confirm .modal-header {
        border-bottom: none;
        position: relative;
    }

    .modal-confirm h4 {
        text-align: center;
        font-size: 26px;
        margin: 10px 0 -10px;
    }

    .modal-confirm .close {
        position: absolute;
        top: -5px;
        right: -2px;
    }

    .modal-confirm .modal-body {
        color: #999;
    }

    .modal-confirm .modal-footer {
        border: none;
        text-align: center;
        border-radius: 5px;
        font-size: 13px;
        padding: 10px 15px;
    }

        .modal-confirm .modal-footer a {
            color: #999;
        }

    .modal-confirm .icon-box {
        width: 70px;
        height: 70px;
        margin: 0 auto;
        border-radius: 50%;
        z-index: 9;
        text-align: center;
        border: 3px solid #f15e5e;
    }

        .modal-confirm .icon-box i {
            color: #f15e5e;
            font-size: 46px;
            display: inline-block;
            margin-top: 13px;
        }

    .modal-confirm .btn, .modal-confirm .btn:active {
        color: #fff;
        border-radius: 4px;
        background: #60c7c1;
        text-decoration: none;
        transition: all 0.4s;
        line-height: normal;
        min-width: 120px;
        border: none;
        min-height: 40px;
        border-radius: 3px;
        margin: 0 5px;
    }

    .modal-confirm .btn-secondary {
        background: #c1c1c1;
    }

        .modal-confirm .btn-secondary:hover, .modal-confirm .btn-secondary:focus {
            background: #a8a8a8;
        }

    .modal-confirm .btn-danger {
        background: #f15e5e;
    }

        .modal-confirm .btn-danger:hover, .modal-confirm .btn-danger:focus {
            background: #ee3535;
        }

.trigger-btn {
    display: inline-block;
    margin: 100px auto;
}


.checkbox-inline.align-center {
    justify-content: center;
}

/* ====================================================
                   DATA TABLE START
======================================================== */
/*.dataTables_info {
    position: absolute;
    bottom:50px;
    z-index: 5;
    background-color: #fff;
    right: 20px;
    width: 40%;
    padding: 15px 10px 8px;
    text-align: right;
}

.dataTables_paginate.paging_simple_numbers {
    position: absolute;
    z-index: 99;
    bottom: 50px;
    display: flex;
    justify-content: left;
    width: 50%;
    background-color: #fff;
    padding: 5px;
}

.paginate_button.previous {
    background-color: #c7ced6;
}

.paginate_button.current {
    background-color: #3699ff;
    color: #fff;
}

.paginate_button {
    text-align: center;
    height: 24px;
    width: 24px;
    font-size: 12px;
    line-height: 18px;
    margin-right: 2px;
    color: #fff;
    font-weight: 500;
    border-radius: 6px;
    border: 0;
    color: #222c36;
    display: inline-block;
    cursor: pointer;
    border: solid 1px #dfe3e6;
    padding: 2px;
}

    .paginate_button.next {
        background-color: #fff;
        border: solid 1px #dfe3e6;
    }

        .paginate_button.next:after {
            padding-left: 0.5rem;
            content: "\f054";
            color: #333;
            font-size: 10px;
            margin-right: 10px;
            font-family: "Font Awesome 5 Free";
            font-weight: 900;
            font-style: normal;
            line-height: 18px;
        }

    .paginate_button.previous:after {
        padding-left: 0.5rem;
        content: "";
        color: #333;
        font-size: 10px;
        margin-right: 10px;
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        font-style: normal;
        line-height: 18px;
    }

#OnboardingList_length {
    position: absolute;
    bottom: 52px;
    right: 237px;
    left: auto;
    z-index: 99;
}

.dataTables_length {*/
/*width: 100%;*/
/*position: absolute;
    bottom: 50px;
    right: 10px;
    z-index: 5;
}

    .dataTables_length select {
        border: none;
        background: #fff;
        border-radius: 4px;
        width: 50px;
        border: solid 1px #dfe3e6;
    }

.dataTables_paginate.paging_full_numbers {
    float: left;
    width: 60%;
    position: absolute;
    bottom: 10px;
}

.paginate_button.last,
.paginate_button.first {
    width: 50px;
    padding: 2px 10px;
}*/

#magenta-theme .table-dark th, #magenta-theme .table-dark td, #magenta-theme .table-dark thead th {
    border: none !important;
}

#OnboardingList_length select {
    border: solid 1px #f3f6f9;
}

.DataSearchField {
    width: 0;
    transition: 0.3s;
    background-color: #f1f1f7;
    border: none;
    border-radius: 4px;
}

.dataTables_filter {
    position: absolute;
    /*right: 83px;
    top: 17px;*/
    right: 20px;
    top: 17px;
    z-index: 2;
    background-color: #f1f1f7;
}

.DataSearchField.field-width-big {
    width: 200px;
    transition: 0.3s;
    border: solid 1px #c8c8c8;
    background-color: #fff !important;
    opacity: 10;
}
/* ====================================================
                   DATA TABLE END
======================================================== */

.reward-section {
    margin-bottom: 15px;
    border-bottom: 1px solid #eef0f8;
}

    .reward-section h5 {
        font-size: 16px;
        margin-bottom: 10px !important;
        margin-top: 10px !important;
        text-transform: uppercase;
        color: #000;
    }

.error-message {
    background-color: #ffe1e0;
    color: #cb0804;
    font-size: 11px;
    font-weight: normal;
    line-height: 16px;
    border-radius: 4px;
    padding: 2px 7px;
    position: absolute;
    z-index: 1;
    right: 0px;
}

    .error-message::before {
        content: "";
        position: absolute;
        top: -7px;
        right: 18px;
        border-style: solid;
        border-width: 0px 7px 7px;
        border-color: #ffe1e0 transparent;
        display: block;
        width: 0;
        z-index: 0;
    }

.form-group {
    position: relative;
}

.was-validated .form-control:invalid,
.form-control.is-invalid {
    background-position: right calc(0.550em + 0.550rem) center;
}



.color-theme-selector {
    width: 30px;
    height: 30px;
    margin-top: 5px;
    margin-right: 10px;
    padding: 5px;
    border-radius: 4px;
    cursor: pointer;
    position: absolute;
    z-index: 998;
    right: 40px;
}

    .color-theme-selector:hover {
        background-color: #f6f8f9;
    }

    .color-theme-selector .color-theme-icon {
        width: 8px;
        height: 8px;
        border-radius: 2px;
        display: block;
        margin: 1px;
        float: left;
    }

    .color-theme-selector .color-theme-picker {
        width: 0;
        overflow: hidden;
        opacity: 0;
    }

        .color-theme-selector .color-theme-picker.picker-slide {
            position: absolute;
            width: 300px;
            height: 30px;
            right: 25px;
            padding: 7px;
            top: 0px;
            transition: 0.4s;
            background-color: #f6f8f9;
            opacity: 10;
            border-radius: 4px;
        }

.color-item {
    width: 25px;
    height: 25px;
    border-radius: 4px;
    margin-left: 5px;
    float: left;
}

.bootstrap-select .dropdown-menu.inner > li > a {
    padding: 4px 10px;
}

.dropdown .dropdown-menu {
    padding: 0px;
}

.font-awesome .fa {
    font-family: "Font Awesome 5 Free", Open Sans;
    font-weight: 501;
}

.ihits-table .checkbox-inline .checkbox {
    margin-bottom: 0px;
}

.tab-top-right {
    position: absolute;
    right: 0px;
}

.applicable-menus-popup .close {
    position: absolute;
    right: -13px;
    width: 26px;
    height: 26px;
    background-color: #000;
    opacity: 10;
    border-radius: 100px;
    top: -13px;
}

    .applicable-menus-popup .close i::before {
        color: #fff !important;
        font-size: 10px;
        line-height: 27px;
    }

.showCheckBox {
    display: none
}

    .showCheckBox.display-block {
        display: block
    }

.hrCkeckBoxView {
    display: none;
}

.howBox {
    display: block;
}

.input-group .btn {
    padding: 4px 10px 1px;
    line-height: 15px;
}


/*.tooltip {
    z-index: 9999999 !important;
}*/


/* RESUME DATABANK START */
.step-outer {
    display: flex;
    justify-content: space-between;
}

    .step-outer .step-item {
        text-align: center;
        width: 100%;
        position: relative;
        font-size: 11px;
    }

        .step-outer .step-item::after,
        .step-outer .step-item.active::after {
            content: '';
            width: 100%;
            height: 2px;
            background-color: #999;
            display: block;
            position: absolute;
            right: 50%;
            top: 24px;
            z-index: 1;
        }

        .step-outer .step-item.active::after {
            background-color: green;
        }

.step-circle {
    width: 16px;
    height: 16px;
    background-color: #999;
    display: block;
    border-radius: 100px;
    float: none;
    margin: auto;
    margin-top: 0px;
    position: relative;
    z-index: 2;
}

    .step-circle:after {
        content: '';
        width: 6px;
        height: 6px;
        background-color: #fff;
        border-radius: 100px;
        display: inline-block;
        top: -1px;
        position: relative;
    }

.step-outer .step-item.active .step-circle {
    background-color: green;
}

.step-circle.focused {
    background-color: #015401 !important;
}

.step-outer .step-item:first-child::after {
    display: none;
}

.step-progress-outer {
    display: flex;
}

.step-progress-outer {
    display: flex;
    margin-top: 20px;
    padding: 0px 40px;
}

    .step-progress-outer .step-left {
        width: 60%;
        background-color: #fafafa;
        border: 2px solid #ececec;
        padding: 20px;
    }

        .step-progress-outer .step-left h2 {
            font-size: 20px;
            font-weight: 500;
            line-height: 24px;
            color: #3F4254;
        }

.step-outer .step-item.active {
    color: green;
}

.step-progress-outer .step-demo {
    width: 40%;
    text-align: right;
}

.card-body .step-progress-outer .image-input .image-input-wrapper {
    width: 120px;
    height: 120px;
}

.step-progress-outer .btn.btn-white.btn-shadow {
    background-color: #ededed;
}

.step-progress-outer .btn.btn-icon i::before {
    font-size: 10px !important;
    color: #3F4254 !important;
}
/* RESUME DATABANK END */

/* JOB TRANSITION START */

.job-transition-outer {
    width: 100%;
    background-color: #fafafa;
    border: 2px solid #ececec;
    padding: 20px;
    margin-top: 10px;
}

.file-upload-form-group .font-size-xs {
    font-size: 9px;
}

.resignation-acceptance-outer {
    display: flex;
}

    .resignation-acceptance-outer .row-ithems {
        width: 13%;
    }

        .resignation-acceptance-outer .row-ithems:nth-child(1) {
            width: 18%;
        }

        .resignation-acceptance-outer .row-ithems:nth-child(2) {
            width: 15%;
        }

        .resignation-acceptance-outer .row-ithems:nth-child(5) {
            width: 7%;
        }

        .resignation-acceptance-outer .row-ithems:nth-child(7) {
            width: 21%;
        }

.arrow-outer {
    padding: 0px;
    margin-top: 80px;
}

    .arrow-outer .arrow-next,
    .arrow-outer .arrow-previous {
        width: 40px;
        height: 40px;
        background-color: #E4E6EF;
        border-color: #E4E6EF;
        border-radius: 4px;
        padding-top: 8px;
        text-align: center;
        display: block;
    }

    .arrow-outer .arrow-previous {
        margin-top: 20px;
    }

        .arrow-outer .arrow-next i::before,
        .arrow-outer .arrow-previous i::before {
            color: #000;
            font-size: 20px;
        }





/* MULTISELECTION DROPDOWNMENU START */
span.multiselect-native-select {
    position: relative
}

    span.multiselect-native-select select {
        border: 0 !important;
        clip: rect(0 0 0 0) !important;
        height: 1px !important;
        margin: -1px -1px -1px -3px !important;
        overflow: hidden !important;
        padding: 0 !important;
        position: absolute !important;
        width: 1px !important;
        left: 50%;
        top: 30px;
    }

.multiselect-container {
    position: absolute;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

    .multiselect-container .input-group {
        margin: 5px;
    }

    .multiselect-container .multiselect-reset .input-group {
        width: 93%;
    }

    .multiselect-container > li {
        padding: 0;
    }

        .multiselect-container > li > a.multiselect-all label {
            font-weight: 700;
        }

        .multiselect-container > li.multiselect-group label {
            margin: 0;
            padding: 3px 20px;
            height: 100%;
            font-weight: 700;
        }

        .multiselect-container > li.multiselect-group-clickable label {
            cursor: pointer;
        }

        .multiselect-container > li > a {
            padding: 0;
        }

            .multiselect-container > li > a > label {
                margin: 0;
                height: 100%;
                cursor: pointer;
                font-weight: 400;
                padding: 3px 20px 3px 40px;
            }

                .multiselect-container > li > a > label.checkbox,
                .multiselect-container > li > a > label.radio {
                    margin: 0;
                }

                .multiselect-container > li > a > label > input[type=checkbox] {
                    margin-bottom: 0px;
                }

.btn-group > .btn-group:nth-child(2) > .multiselect.btn {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.form-inline .multiselect-container label.checkbox,
.form-inline .multiselect-container label.radio {
    padding: 3px 20px 3px 40px;
}

.form-inline .multiselect-container li a label.checkbox input[type=checkbox],
.form-inline .multiselect-container li a label.radio input[type=radio] {
    margin-left: -20px;
    margin-right: 0;
}

.multiselect-item .checkbox > input,
.multiselect-container .checkbox > input {
    position: relative;
    z-index: 0;
    opacity: 10;
    margin-right: 5px;
}

.multiselect-container > li > a > label {
    padding: 3px 10px;
    color: #595b66 !important;
    font-size: 12px;
}

.btn-multi-selection {
    color: #595b66 !important;
    border: 1px solid #EBEBFD !important;
    background-color: #fff !important;
    text-align: left;
}
.multiselect-container {
    height: 150px;
    width: 100%;
    overflow-y: scroll;
}

.multiselect-native-select .btn-group {
    width: 100%;
    text-align: left;
}

.btn.btn-multi-selection::after {
    right: 10px;
    top: 9px;
    position: absolute;
}

/*.multiselect-native-select .btn.dropdown-toggle {
    height: 26px;
    border-radius: 4px;
}*/
/* MULTISELECTION DROPDOWNMENU START */

.pro_hd {
    padding: 5px;
    background-color: #fff;
    margin-top: 11px;
    border-radius: 10px;
}
.pro_ph {
    padding: 15px 5px !important;
    border-radius: 10px;
}
.pro_reg {
    padding: 19px 5px !important;
    border-radius: 10px;
}
.onboarding-view {
    padding: 10px 10px;
}

    .onboarding-view h5 {
        font-size: 16px;
        margin-bottom: 10px;
        margin-top: 10px;
        text-transform: uppercase;
        color: #000;
    }

.form-control .red {
    background-color: red;
    width: 10px;
    height: 10px;
    content: '';
    display: inline-block;
}

.form-control .green {
    background-color: green;
    width: 10px;
    height: 10px;
    content: '';
    display: inline-block;
}

.filter-slider-item-box {
    border: solid 1px #d8d8d8;
    padding: 15px 15px;
    border-radius: 6px;
    position: relative;
    margin-top: 35px;
}

    .filter-slider-item-box h4 {
        position: absolute;
        margin-top: -26px;
        background-color: #fff;
        display: inline-block;
        font-size: 16px;
        font-weight: 500;
        line-height: 20px;
        color: #222;
    }

    .filter-slider-item-box .form-group {
        margin-top: 0px !important;
    }

    .filter-slider-item-box .radio-inline-label {
        font-weight: 500;
    }

.ihits-table .colorpicker .bootstrap-select > .dropdown-toggle {
    padding: 4px;
}

.colorpicker .bootstrap-select > .dropdown-toggle {
    padding: 6px;
    border: none;
}

.colorpicker .form-control .redcolor,
.colorpicker .form-control .greencolor,
.colorpicker .form-control .bluecolor,
.colorpicker .form-control .blackcolor,
.colorpicker .form-control .yellowcolor,
.colorpicker .form-control .orangecolor,
.colorpicker .form-control .graycolor,
.colorpicker .form-control .purplecolor,
.colorpicker .form-control .magentacolor,
.colorpicker .form-control .marooncolor,
.colorpicker .form-control .cyancolor {
    background-color: #FF0000;
    width: 8px;
    height: 8px;
    content: '';
    display: inline-block;
}

.colorpicker .form-control .greencolor {
    background-color: #008000;
}

.colorpicker .form-control .bluecolor {
    background-color: #0000FF;
}

.colorpicker .form-control .blackcolor {
    background-color: #000;
}

.colorpicker .form-control .yellowcolor {
    background-color: #FFFF00;
}

.colorpicker .form-control .orangecolor {
    background-color: #FFA500;
}

.colorpicker .form-control .graycolor {
    background-color: #808080;
}

.colorpicker .form-control .purplecolor {
    background-color: #800080;
}

.colorpicker .form-control .magentacolor {
    background-color: #FF00FF;
}

.colorpicker .form-control .marooncolor {
    background-color: #800000;
}

.colorpicker .form-control .cyancolor {
    background-color: #00FFFF;
}


.backgrouncolors .dropdown-menu {
    transform: translate3d(0px, 25px, 0px) !important;
}

    .backgrouncolors .dropdown-menu .inner {
        margin-top: -25px;
        height: 155px;
    }

.daily-attendance-entry-list .table-dark a {
    display: inline-block;
    width: 100%;
}

/*.ihits-table.table-border table thead tr.table-dark th,
.ihits-table.table-border table tbody tr.table-dark td {
    border: 1px solid #0060ad;
}
*/
.colorpicker .form-control .btn.dropdown-toggle {
    height: 24px;
}
/* ====================================================
                   Star Rating Start
======================================================== */

.star-rating {
    display: flex;
    align-items: left;
    flex-direction: row-reverse;
    justify-content: left;
    position: relative;
}
    /* hide the inputs */
    .star-rating > input {
        display: none;
    }
    /* set properties of all labels */
    .star-rating > label {
        width: 26px;
        height: 26px;
        font-family: Arial;
        font-size: 26px;
        transition: 0.2s ease;
        color: orange;
        cursor: pointer;
    }
        /* give label a hover state */
        .star-rating > label:hover {
            color: orange;
            transition: 0.2s ease;
        }

        .star-rating > label:active::before {
            transform: scale(1.1);
        }

        /* set shape of unselected label */
        .star-rating > label::before {
            content: '\2606';
            position: absolute;
            top: 0px;
            line-height: 26px;
        }
    /* set full star shape for checked label and those that come after it */
    .star-rating > input:checked ~ label:before {
        content: '\2605';
    }

@-moz-document url-prefix() {
    .star-rating > input:checked ~ label:before {
        font-size: 36px;
        line-height: 21px;
    }
}

/* ====================================================
                   Star Rating End
======================================================== */
.form-group.is-invalid {
    position: relative;
}

    .form-group.is-invalid .dropdown.bootstrap-select.form-control.form-control-sm {
        border-color: #F64E60;
    }

        .form-group.is-invalid .dropdown.bootstrap-select.form-control.form-control-sm:after {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23F64E60' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23F64E60' stroke='none'/%3e%3c/svg%3e");
            background-repeat: no-repeat;
            background-size: calc(0.75em + 0.65rem) calc(0.75em + 0.65rem);
            content: '';
            position: absolute;
            position: absolute;
            z-index: 9999;
            right: 20px;
            display: inline-block;
            width: 20px;
            height: 20px;
            top: 4px;
        }
/* ====================================================
                   Time Office
======================================================== */
.time-off thead th {
    padding: 10px;
}

.time-off thead tbody th td {
    padding: 10px;
}

.time-backcolor {
    background: white;
    border-start-start-radius: 10px;
    border-start-end-radius: 10px;
    padding: 10px 15px;
}

    .time-backcolor:nth-child(1) {
        margin-right: 15px;
        border-bottom: 3px solid #FFB31A;
    }

    .time-backcolor:nth-child(2) {
        border-bottom: 3px solid #FF5D3B;
        margin-right: 15px;
    }

    .time-backcolor:nth-child(3) {
        margin-right: 15px;
        border-bottom: 3px solid #58FFDD;
    }

    .time-backcolor:nth-child(4) {
        border-bottom: 3px solid #E52E2E;
    }

.icon-time {
    background: #FBF8EC;
}

.newicons {
    width: 60px;
    height: 60px;
}

    .newicons img {
        width: 25px;
    }

.icon-time-two {
    background: #FFEEEE !important;
}

.icon-time-three {
    background: #F0FFF9 !important;
}

.icon-time-four {
    background: #FFF4F0 !important;
}

.time-backcolor h3 {
    font-size: 26px;
    font-weight: 700;
    line-height: 20px;
    margin-top: 15px;
    color: #333;
}

.timeoffice-left-side {
    width: 69%;
}

.timeoffice-center-side {
    width: 30%;
}

.time-profile {
    background: white;
    padding: 8px 10px;
}

.time-profile {
    background: white;
}

    .time-profile ul {
        list-style: none;
    }

    .time-profile li {
        border-top: 1px solid #c4b8b842;
        padding: 5px 11px;
    }

    .time-profile h3 {
        border-bottom: 1px solid #c4b8b842;
        font-size: 15px;
        font-weight: 700;
    }

    .time-profile input {
        border: 1px solid #999999;
    }

        .time-profile input::placeholder {
            color: black;
        }

.hd-color {
    width: 14px;
    height: 14px;
    background-color: #F7A419;
}

.hd-color {
    width: 14px;
    height: 14px;
    background-color: #F7A419;
}

.hd-lc {
    background-color: #AE4E75;
}

.hd-pr {
    background-color: #AE4E75;
}

.hd-leave {
    background-color: #F76A43;
}

.hd span {
    font-size: 12px;
    font-weight: 500;
}

.timeoff-card {
    width: 35%;
}

.tab-timeset {
    width: 64%;
}

    .tab-timeset h3 {
        font-size: 15px;
        font-weight: 700;
    }

.fa-caret-right {
    color: #18ADD4;
}

.tab-padding {
    padding: 10px;
}

.spl {
    border: 1px solid #18ADD4;
    width: 9px;
    height: 13px;
}

.sub-timeoffice {
    padding-left: 50px;
}

.time-btn {
    height: 30px;
    text-align: start;
    justify-content: space-between;
    width: 185px;
    background-color: #FFFFFF;
    border: 1px solid #C7C7C7;
    display: flex;
    font-size: 12px;
    align-items: center;
    background-color: #FFFFFF;
    border: 1px solid #C7C7C7;
    transition: all 0.3s;
}

    .time-btn:hover {
        background-color: var(--blue-color-theme-hover) !important;
        color: white;
    }

.badge-light {
    width: 20px;
    height: 20px;
    border-radius: 50px;
    background-color: #FF885B;
    font-size: 11px;
    font-weight: 700;
    color: white;
}

.pending-task {
    width: 7px;
    height: 7px;
    padding: 0;
    background-color: #EE455C;
}

.chart {
    height: 250px;
    margin: auto;
}

.pieTip {
    position: absolute;
    float: left;
    min-width: 30px;
    max-width: 300px;
    padding: 5px 18px 6px;
    border-radius: 2px;
    background: rgba(255,255,255,.97);
    color: #444;
    font-size: 19px;
    text-shadow: 0 1px 0 #fff;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.3;
    letter-spacing: .06em;
    box-shadow: 0 0 3px rgba(0,0,0,0.2), 0 1px 2px rgba(0,0,0,0.5);
    -webkit-transform: all .3s;
    -moz-transform: all .3s;
    -ms-transform: all .3s;
    -o-transform: all .3s;
    transform: all .3s;
    pointer-events: none;
}

    .pieTip:after {
        position: absolute;
        left: 50%;
        bottom: -6px;
        content: "";
        height: 0;
        margin: 0 0 0 -6px;
        border-right: 5px solid transparent;
        border-left: 5px solid transparent;
        border-top: 6px solid rgba(255,255,255,.95);
        line-height: 0;
    }

.chart path {
    cursor: pointer;
}

/* ====================================================
                   Hr 
======================================================== */
.hr-left {
    width: 24%;
}

.joining {
    padding: 5px 10px !important;
}

.topdash {
    border-color: #c4b8b842;
}

.hr-top {
    margin-bottom: 6px;
}

.employee-hr {
    padding: 8px 12px !important;
}

.bar-emp {
    margin: 8px 0 !important;
    height: 140px !important;
}

.hr-center {
    width: 75%;
}

.hrbtn {
    width: 70px;
    background-color: #FCFCFC;
    height: 100%;
}

.headhr h2 {
    font-size: 15px;
    font-weight: 700;
}

.headhr {
    border-bottom: 1px solid #c4b8b842;
}

.round-hr {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 100%;
}

    .round-hr svg {
        width: 100%;
        height: auto;
        border-radius: 100%;
    }

.new-join h2 {
    font-size: 14px;
    color: #0060AD;
    font-weight: 700;
}

.new-join p {
    font-size: 10px;
}

.graph-head {
    width: 145px;
    padding: 2px 9px;
}

.bar-chart {
    width: 755px;
    height: 140px;
    border-bottom: 1px solid #DBDBDB;
    display: flex;
    color: #fff;
    margin-bottom: 26px;
}

.skill {
    position: relative;
    flex: 1;
    text-align: center;
    display: flex;
    justify-content: center;
}

.graph {
    position: absolute;
    width: 40px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

    .graph:before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        top: 2px;
        left: 2px;
        right: 2px;
        background: linear-gradient(0deg, #003ba5, #009ffe);
    }

    .graph:after {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 50%;
        background: rgba(255,255,255,.1);
    }

.name {
    position: absolute;
    bottom: -30px;
    text-align: center;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    border-radius: 3px;
    color: #1F1F20;
}

.percentage {
    position: absolute;
    top: -20px;
    text-align: center;
    left: 0;
    right: 0;
    font-size: 15px;
    font-weight: 700;
}

.icon-time-hr {
    background-color: #F4F0FF;
}

.newicons svg {
    border-radius: 0;
}

.graph-first::before {
    background: linear-gradient(#9D7FF1, #049BB9);
}

.graph-sec::before {
    background: linear-gradient(#E1EBF5, #D7CEDC);
}

.icon-hr {
    background: #FBECEC;
}

.icon-hr-two {
    background: #EEFEE4 !important;
}

.icon-hr-three {
    background: #F4F0FF !important;
}

.icon-hr-four {
    background: #FFEFF2 !important;
}

.hr-backcolor:nth-child(1) {
    border-bottom: 3px solid #F62929;
}

.hr-backcolor:nth-child(2) {
    border-bottom: 3px solid #2CF9B3;
}

.hr-backcolor:nth-child(3) {
    border-bottom: 3px solid #8458FF;
}

.hr-backcolor:nth-child(4) {
    border-bottom: 3px solid #FF5BA2;
}

.hr-thought {
    padding: 5px 11px 0px;
}

.hr-search {
    padding: 5px 12px;
}

    .hr-search h2 {
        margin: 0px 0px 2px;
        font-size: 15px;
    }

    .hr-search p {
        margin: 0px 0px 2px;
        font-size: 10px;
    }

    .hr-search input {
        height: 25px;
    }

.hr-man {
    background-color: #41BFB7;
}

.hr-wom {
    background-color: #6A70C1;
    font-size: 11px !important;
}

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

.left-event {
    width: 100%;
    height: 240px;
    object-fit: cover;
}

.approve-alert {
    padding: 8px 25px;
}

.sb1 {
    top: 23px;
}

.sb2 {
    top: 45px;
}

.sb3 {
    top: 4px;
}

.sb5 {
    top: 79px;
}

.sb6 {
    top: 84px;
}

.sb7 {
    top: 3px;
}

.sb8 {
    top: 33px;
}

.box {
    width: 35px;
    position: absolute;
    background: #FF6665;
    padding: 5px;
    text-align: center;
    font-weight: 900;
    color: #fff;
    font-size: 10px;
    border-radius: 5px;
}

.sb4:before {
    content: "";
    width: 0px;
    height: 0px;
    position: absolute;
    border-right: 10px solid #FF6665;
    border-bottom: 13px solid transparent;
    right: 14px;
    bottom: -11px;
}

.barchart-Wrapper {
    display: table;
    position: relative;
    margin: 20px 0;
    height: 150px;
}

.barChart-Container {
    display: table-cell;
    width: 100%;
    height: 100%;
    padding-left: 24px;
}

.barchart {
    display: table;
    table-layout: fixed;
    height: 100%;
    width: 100%;
    border-bottom: 1px solid #DBDBDB;
    border-left: 1px solid #DBDBDB;
}

.barchart-Col {
    position: relative;
    vertical-align: bottom;
    display: table-cell;
    height: 100%;
}

    .barchart-Col + .barchart-Col {
        border-left: 4px solid transparent;
    }

.barchart-Bar {
    position: relative;
    height: 0;
    transition: height 0.5s 2s;
    width: 25px;
    margin: auto;
}

    .barchart-Bar:after {
        content: attr(attr-height);
        color: white;
        position: absolute;
        text-align: center;
        width: 100%;
    }

.barchart-BarFooter {
    position: absolute;
    text-align: end;
    height: 10%;
    width: 100%;
}

    .barchart-BarFooter h3 {
        color: #1F1F20;
        font-size: 12px;
    }

.barchart-TimeCol {
    position: absolute;
    top: 0;
    height: 100%;
}

.barchart-Time {
    height: 15%;
    vertical-align: middle;
    position: relative;
}

    .barchart-Time:after {
        border-bottom: 3px solid black;
        content: "";
        position: absolute;
        width: 100%;
        left: 0;
        top: 0em;
    }

.barchart-TimeText {
    position: absolute;
    top: -8px;
    z-index: 1;
    background: white;
    padding-right: 5px;
    color: #4d4d4d;
    font-size: 15px;
    font-family: 'Avenir Medium';
}

.css-bar {
    background-color: #41BFB7;
}

.css-bars {
    background-color: #6A70C1;
}

/* ====================================================
                   Alert 
======================================================== */

.alertcolor:nth-child(1) {
    border-bottom: 3px solid #741ADB;
}

.alertcolor:nth-child(2) {
    border-bottom: 3px solid #52BFEF;
}

.alertcolor:nth-child(3) {
    border-bottom: 3px solid #FF8C58;
}

.alertcolor:nth-child(4) {
    border-bottom: 3px solid #FF5BA2;
}

.icon-alert {
    background: #F2ECFB;
}

.icon-alert-two {
    background: #EEF9FF !important;
}

.icon-alert-three {
    background: #FFF4F0 !important;
}

.icon-alert-four {
    background: #FFEFF2 !important;
}

.alert-left-side {
    width: 29%;
}

.alert-center-side {
    width: 40%;
}

.alert-right-side {
    width: 29%;
}

.alertcard {
    padding: 0px !important;
}

.alerts {
    padding: 8px 12px;
}

.alert-profile h2 {
    color: #0060AD;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    margin: 0px;
}

.alertchart svg {
    height: 185px;
}

.alertchart {
    height: 180px;
}

.events h3 {
    border: none !important;
}

.events {
    padding: 0px;
}

.owl-next {
    position: absolute;
    top: 25%;
    right: 0;
    font-size: 40px !important;
}

.owl-prev {
    position: absolute;
    top: 25%;
    left: 0;
    font-size: 40px !important;
}

.owl-dots {
    display: none;
}

.owl-theme .owl-nav [class*=owl-]:hover {
    background: none !important;
    color: black !important;
}

.alert-profile {
    padding: 8px 10px 0px 10px;
}

.card.card-custom > .alert-card {
    padding: 2px;
}


/* ====================================================
                   Essp_manager 
======================================================== */

.essp-head {btn.btn-primary 
    border-bottom: 1px solid #c4b8b842;
}

    .essp-head h3, .info h3 {
        border: none;
    }

    .essp-head .spl {
        border-color: #c4b8b842;
    }

.essp-sub {
    padding-left: 15px;
}

.info .spl {
    border-color: #c4b8b842;
}

.tabset > input[type="radio"] {
    position: absolute;
    left: -200vw;
}

.tabset .tab-panel {
    display: none;
}

.tabset > input:first-child:checked ~ .tab-panels > .tab-panel:first-child,
.tabset > input:nth-child(3):checked ~ .tab-panels > .tab-panel:nth-child(2),
.tabset > input:nth-child(5):checked ~ .tab-panels > .tab-panel:nth-child(3),
.tabset > input:nth-child(7):checked ~ .tab-panels > .tab-panel:nth-child(4),
.tabset > input:nth-child(9):checked ~ .tab-panels > .tab-panel:nth-child(5),
.tabset > input:nth-child(11):checked ~ .tab-panels > .tab-panel:nth-child(6) {
    display: block;
}

.tabset > label {
    position: relative;
    display: inline-block;
    padding: 7px 20px 7px;
    border: 1px solid transparent;
    border-bottom: 0;
    background-color: #F5F5F5;
    cursor: pointer;
    font-weight: 600;
}

    .tabset > label::after {
        content: "";
        left: 15px;
        bottom: 10px;
        width: 22px;
        height: 4px;
        background: #8d8d8d;
    }

    .tabset > label:hover,
    .tabset > input:focus + label {
        color: black;
    }

        .tabset > label:hover::after,
        .tabset > input:focus + label::after,
        .tabset > input:checked + label::after {
            background: #E9E9E9;
        }

.tabset > input:checked + label {
    background-color: #E9E9E9;
    margin-bottom: -1px;
}

.tab-panels {
    background-color: white;
}

.tab-panel {
    color: aqua;
}

    .tab-panel p {
        color: black;
    }

    .tab-panel h2 {
        color: black;
    }
/*
   Demo purposes only
  */

.tabset {
    max-width: 65em;
    background-color: #F5F5F5;
    width: 446px;
}

.pendingapprove {
    padding: 0px !important;
}

.absent-round {
    width: 10px;
    height: 10px;
    border-radius: 50px;
    background-color: #FF0D3E;
}

.abst span {
    font-size: 12px;
    color: #FF0D3E;
}

.new {
    padding: 10px 25px;
    border-top: 1px solid #c4b8b842;
}

.alloffice {
    background-color: #05DE71;
}

.all-off span {
    color: #05DE71;
}

.new:nth-child(1) {
    border: none;
}

.abst {
    width: 70px;
}

.onduty {
    background-color: #FF7E0D;
}

.all-duty span {
    color: #FF7E0D;
}

.leave {
    background-color: #0060AD;
}

.all-leave span {
    color: #0060AD;
}

.team-name {
    width: 130px;
}

    .team-name p {
        font-size: 11px;
        color: #504D56;
    }

.approve-head h2 {
    font-size: 25px;
    color: #6A70C1;
    font-weight: 700;
}

.approve-head p {
    font-size: 11px;
    color: #504D56;
}

.approve-head {
    border-right: 1px solid #c4b8b842
}

.last-approve {
    border: none;
}

.team-time h2 {
    font-size: 25px;
    color: white;
    font-weight: 700;
}

.team-time p {
    font-size: 11px;
    color: white;
}

.team-time {
    background-color: #FF0D3E;
    padding: 10px 6px;
    border-radius: 10px;
}

.time-leave {
    background-color: #009FC8;
}

.time-holiday {
    background-color: #FF7E0D;
}

.late-count {
    border-color: #FFA200;
}

.total-count {
    border-color: #9B55BE;
}

.days-count {
    border-color: #1FD17E !important;
}

.early {
    border-color: #BB6A1A;
}

.late-head {
    border: none;
}

    .late-head h2 {
        font-size: 17px;
    }

    .late-head p {
        text-align: left;
    }

.row-out {
    border-bottom: 1px solid #c4b8b842;
}

.days-approve {
    border-color: white;
}

.approve-set {
    background-color: #0EE2A1 !important;
    border-color: #0EE2A1 !important;
}

.pending-set {
    background-color: #FF9E0D !important;
    border-color: #FF9E0D !important;
}

.Reject-set {
    background-color: #FF0D3E !important;
    border-color: #FF0D3E !important;
}

.common-btn {
    width: 105px;
    height: 25px;
}

.common-row {
    padding: 10px 12px;
}

.piychart {
    height: 187px;
}

    .piychart svg {
        height: 190px;
    }

.mission h2 {
    font-size: 14px;
    color: #504D56;
    font-weight: 600;
}

.mission p {
    font-size: 11px;
    color: #504D56;
}

.scrollbar {
    height: 308px;
    overflow-y: scroll;
    overflow-x: hidden;
}
/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 3px;
    height:7px;
}

::-webkit-scrollbar-track {
    background-color: #ebebeb;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: #D1D1D1;
}

.manager-round {
    width: 48px;
    height: 48px;
    object-fit: cover;
}

/* ====================================================
                   Essp_User 
======================================================== */

.esspuser {
    padding: 10px 4px;
}

.img-user {
    width: 50px;
    height: 50px;
    border-radius: 50px;
    object-fit: cover;
}

    .img-user svg, .img-user img {
        width: 100%;
        height: 100%;
        border-radius: 50px;
    }

.jan h4 {
    font-size: 12px;
    color: white;
    font-weight: 700;
}

.jan span {
    font-size: 12px;
    color: white;
    font-weight: 700;
}

.jan {
    background-color: #BB20A1;
    padding: 5px 15px;
    border-radius: 8px;
}

.feb {
    background-color: #2054BB;
}

.mar {
    background-color: #70C818;
}

.march {
    background-color: #EE0030;
}

.apr {
    background-color: #FF9914;
}

.reminder {
    background-color: #0060AD;
}

.lastreminder {
    background-color: #4F1B84;
}

.userbtn {
    background-color: #F5F5F5 !important;
    border-color: #F5F5F5 !important;
    color: #414141 !important;
}

.user-color {
    border-color: #FF6665;
}

.user-reject {
    border-color: #6A70C1;
}

.round {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 100%;
}

.team-size {
    padding: 20px 6px !important;
}

.table-active tr th {
    padding: 7px 7px;
}

.sevenday th, td {
  /*  padding: 12px 14px !important;*/
    font-size: 12px;
}

.life-img {
    width: auto !important;
    height: auto;
    margin: auto;
    border-radius: 0px;
}

.manager-img {
    width: 48px;
    height: 48px;
    object-fit: cover;
}

.essp-alert {
    padding: 8px 25px 5px 25px;
}


/* ====================================================
                   Payroll
======================================================== */
.payroll-left-side {
    width: 49%;
}

.payroll-center-side {
    width: 50%;
}

.payroll-bar h3 {
    border-bottom: 0px;
}

.barchart-label {
    text-align: center;
}

.bar-payroll {
    height: 157px !important;
    margin: 26px 0px !important;
}

.payrolltwo-left-side {
    width: 69%;
}

.payrolltwo-center-side {
    width: 30%;
}

.font-rate {
    font-size: 12px;
}

.css-payroll {
    background-color: #6A70C1;
    width: 18px;
}

.payroll-sign {
    border-color: #C7C7C7;
}



.slider-color-pick {
    width: 150px;
    height: 20px;
    background-color: grey;
}

.slider-color-box {
    border: 1px solid #999999;
    padding: 10px;
    height: 100px;
    display: none;
}

.slider-color-list {
    width: 20px;
    height: 20px;
    float: left;
    margin-right: 5px;
    border: none;
    cursor: pointer;
    border-radius: 50px;
}

    .slider-color-list.red {
        background-color: red;
    }

    .slider-color-list.green {
        background-color: green;
    }

.open-color-box {
    display: block;
}
/*
.dataTables_filter_trn {
    right: 83px;
    top: 17px;
}*/

.dataTables_filter_search {
    right: 120px !important;
    top: 17px !important;
}

.dataTables_filter_onboard {
    right: 25px;
    top: 17px;
    height: 24px;
}
/*.bootstrap-select .dropdown-menu.show {
    top: 45px !important;
}*/
.tab-outer .ihits-table {
    min-height: auto;
    height: auto;
}

    .tab-outer .ihits-table table {
        margin-bottom: 0px;
    }

.select-option .filter-button .fa-check {
    display: none;
}

.select-option .filter-button.filter-apply .fa-check {
    display: block;
}

.select-option .filter-button.filter-apply {
    position: relative;
}

    .select-option .filter-button.filter-apply i.fas.fa-check {
        position: absolute;
        top: 2px;
        left: 15px;
        width: 10px;
        height: 10px;
        background-color: #00ba04;
        border-radius: 100px;
    }

    .select-option .filter-button.filter-apply i.fa-check:before {
        font-size: 7px;
        color: #fff;
        position: relative;
        top: -3px;
    }

/*---Color PICKER added by anju*/

.slider-color-pick,
.slider-color-pick-two {
    width: 100% !important;
    padding: 3px 5px;
    line-height: 18px;
    height: 26px;
    font-size: 13px;
    border-radius: 3px;
    color: #595b66 !important;
    border: 1px solid #999999;
    background-color: #fff !important;
}

.slider-color-box,
.slider-color-box-two {
    border: 1px solid #999999;
    padding: 4px;
    height: 65px;
    display: none;
    position: absolute;
    background-color: #fff;
    z-index: 99999999;
}

.color-selecter-outer {
    /*  width: 22px;
    height: 22px;
    border-radius: 50px;
    float: left;
    padding: 2px;
    margin: 2px;
    margin-bottom: 3px;
    cursor: pointer;*/
    border: none !important;
    width: 22px;
    height: 22px;
    border-radius: 50px;
    float: left;
    padding: 0px;
    margin: 2px;
    margin-bottom: 3px;
    cursor: pointer;
}

    .color-selecter-outer:hover {
        border: solid 1px lightgray !important;
        cursor: pointer;
        background-color: #f4f4f4;
    }

.slider-color-pick:after,
.slider-color-pick-two:after {
    content: '';
    border: solid black;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 3px;
    float: right;
    margin-top: 3px;
    margin-right: 2px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

.slider-color-list-two {
    width: 20px;
    height: 20px;
    float: left;
    margin-right: 5px;
    border: none;
    cursor: pointer;
    border-radius: 50px;
}

.color-code {
    width: 11px;
    height: 11px;
    float: left;
    margin-right: 5px;
    margin-top: 3px;
}



    /* --duty BACK--*/
    .slider-color-list.Pale-Pink,
    .color-code.Pale-Pink {
        background-color: #F8DAD5;
    }


    .slider-color-list.Egg-Shell,
    .color-code.Egg-Shell {
        background-color: #D8EDE8;
    }

    .slider-color-list.Lilac,
    .color-code.Lilac {
        background-color: #C8A2C8;
    }

    .slider-color-list.Pastel-Orange,
    .color-code.Pastel-Orange {
        background-color: #F8B88B;
    }

    .slider-color-list.Coral-Blue,
    .color-code.Coral-Blue {
        background-color: #AFDCEC;
    }

    .slider-color-list.Silver,
    .color-code.Silver {
        background-color: #C0C0C0;
    }

    .slider-color-list.Blue-Gray,
    .color-code.Blue-Gray {
        background-color: #98AFC7;
    }

    .slider-color-list.Acid-Green,
    .color-code.Acid-Green {
        background-color: #B0BF1A;
    }

    .slider-color-list.Olive-Green,
    .color-code.Olive-Green {
        background-color: #BAB86C;
    }

    .slider-color-list.Pastel-Yellow,
    .color-code.Pastel-Yellow {
        background-color: #fdfd96;
    }

    .slider-color-list.Caramel,
    .color-code.Caramel {
        background-color: #FDD39B;
    }

    .slider-color-list.Pearl-White,
    .color-code.Pearl-White {
        background-color: #F8F6F0;
    }



    .slider-color-list.Tea-Green,
    .color-code.Tea-Green {
        background-color: #CCFB5D;
    }


    .slider-color-list.Organic-Brown,
    .color-code.Organic-Brown {
        background-color: #E3F9A6;
    }


    .slider-color-list.Light-Azure,
    .color-code.Light-Azure {
        background-color: #74bbfb;
    }

    .slider-color-list.Creamy-Mint,
    .color-code.Creamy-Mint {
        background-color: #c8f3cd;
    }

    .slider-color-list.Aquamarine,
    .color-code.Aquamarine {
        background-color: #7FFFD4;
    }


    /*    --Duty FONT COLOR STARTS--*/


    .slider-color-list-two.Red,
    .color-code.Red {
        background-color: #FF0000;
    }


    .slider-color-list-two.Green,
    .color-code.Green {
        background-color: #008000;
    }


    .slider-color-list-two.Blue,
    .color-code.Blue {
        background-color: #0000FF;
    }


    .slider-color-list-two.Yellow,
    .color-code.Yellow {
        background-color: #FFFF00;
    }


    .slider-color-list-two.Black,
    .color-code.Black {
        background-color: #000;
    }


    .slider-color-list-two.Orange,
    .color-code.Orange {
        background-color: #FFA500;
    }


    .slider-color-list-two.Gray,
    .color-code.Gray {
        background-color: #808080;
    }


    .slider-color-list-two.Purple,
    .color-code.Purple {
        background-color: #800080;
    }


    .slider-color-list-two.Magenta,
    .color-code.Magenta {
        background-color: #FF00FF;
    }


    .slider-color-list-two.Maroom,
    .color-code.Maroom {
        background-color: #800000;
    }


    .slider-color-list-two.Cyan,
    .color-code.Cyan {
        background-color: #00FFFF;
    }

    .slider-color-list-two.Chocolate,
    .color-code.Chocolate {
        background-color: #EDE6D6;
    }

    .slider-color-list-two.Coffee,
    .color-code.Coffee {
        background-color: #6F4E37;
    }

    .slider-color-list-two.Bronze,
    .color-code.Bronze {
        background-color: #CD7F32;
    }

    .slider-color-list-two.Raspberry,
    .color-code.Raspberry {
        background-color: #E30B5D;
    }

    .slider-color-list-two.Deep-Teal,
    .color-code.Deep-Teal {
        background-color: #033E3E;
    }

    .slider-color-list-two.Medium-Teal,
    .color-code.Medium-Teal {
        background-color: #045F5F;
    }

    .slider-color-list-two.Blue-Whale,
    .color-code.Blue-Whale {
        background-color: #342D7E;
    }

    .slider-color-list-two.Deep-Purple,
    .color-code.Dee-Purple {
        background-color: #36013F;
    }


    .slider-color-list-two.Eggplant,
    .color-code.Eggplant {
        background-color: #614051;
    }

    .slider-color-list-two.Black-Bean,
    .color-code.Black-Bean {
        background-color: #3D0C02;
    }

    .slider-color-list-two.Midnight,
    .color-code.Midnight {
        background-color: #2B1B17;
    }

    .slider-color-list-two.Ferrari-Red,
    .color-code.Ferrari-Red {
        background-color: #F70D1A;
    }

/*
    ---DUTY FONT COLOR END--*/
.open-color-box {
    display: block;
}

.my_profile_btn_edite {
    width: 18px;
    height: 18px;
    background: url(../images/icons/edite.png);
    background-size: contain;
    color: white;
    display: inline-block;
    background-repeat: no-repeat;
    padding: 12px;
}

/* ====================================================
                   leave application css - subin
======================================================== */
.bg-info {
    background-color: #fff !important;
    border: var(--blue-color-theme) solid 1px;
}

    .bg-info .card-body {
        padding: 5px !important;
    }

    .bg-info .card-text {
        font-size: 30px;
        color: var(--blue-color-theme);
        margin: 0px;
    }

    .bg-info p {
        color: #000;
    }

.badge-1 {
    display: inline-block;
    width: 30% !important;
    font-size: 22px;
    font-weight: bold;
    color: #ffffff !important;
    background-color: var(--blue-color-theme) !important;
    padding: 2px 0px 0px 2px;
    border-radius: 125px;
    position: relative;
    height: 30% !important;
    text-align: center;
    top: 40px;
    left: 40px;
}

.badge-2 {
    display: inline-block;
    width: 30% !important;
    font-size: 22px;
    font-weight: bold;
    color: #ffffff !important;
    background-color: var(--blue-color-theme) !important;
    padding: 2px 0px 0px 2px;
    border-radius: 125px;
    position: relative;
    height: 30% !important;
    text-align: center;
    top: 40px;
    left: 40px;
}

.scroll {
    position: relative;
    width: 100%;
    z-index: 1;
    margin: auto;
    overflow: auto;
    height: 700px !important;
}

.no-footer {
    padding-bottom: 0px !important;
}

.right-leave-section {
    background-color: white;
    border-radius: 0.42rem;
    height: 100%;
}
.hover_clss:hover{
    background-color:#7e05051a;
    cursor:pointer;
}
/* ====================================================
                   leave application css - subin
======================================================== */
/* ====================================================
                   Stepper css start here
======================================================== */
.step {
    padding: 10px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    background-color: cream;
}

.v-stepper {
    position: relative;
    /*   visibility: visible; */
}


/* regular step */
.step .circle {
    background-color: white;
    border: 3px solid #d3d3d3;
    border-radius: 100%;
    width: 20px; /* +6 for border */
    height: 20px;
    display: inline-block;
}

.step .line {
    top: 20px;
    left: 8px;
    /*   height: 120px; */
    height: 100%;
    position: absolute;
    border-left: 3px solid lightgrey;
}

.step.completed .circle {
    visibility: visible;
}

.step.completed .line {
    border-left: 3px solid rgb(36 217 3)
}

.step.active .circle {
    visibility: visible;
    border-color: rgb(36 217 3)
}

.step.empty .circle {
    visibility: hidden;
}

.step.empty .line {
    /*     visibility: hidden; */
    /*   height: 150%; */
    top: 0;
    height: 150%;
}


.step:last-child .line {
    border-left: 3px solid white;
    z-index: -1; /* behind the circle to completely hide */
}

.stepper-content {
    margin-left: 20px;
    display: inline-block;
}

.step.completed .fa-check {
    color: #24d903;
    font-size: 10px;
    text-align: center;
    font-weight: 600;
    padding: 3px;
    display:flex;
}

.fa-check {
    color: #fff;
    font-size: 5px;
}

.step.completed .circle {
    border: 3px solid #3edd21;
}


.title {
    padding-left: 13px;
}

 .rejected .icon-xl {
    color: #f64e60;
    font-size: 10px !important;
    text-align: center;
    font-weight: 600;
    padding: 3px;
    display: flex;
    justify-content:center;
}
.step.rejected .line {
    border-color: #f64e60;
}


.step.rejected .circle {
    border: 3px solid #f64e60;
}
/* ====================================================
                   Stepper css end here
======================================================== */

.popup {
    margin: 15% auto;
    padding: 10px;
}

.modal-body .ihits-table table {
    margin-bottom: 0px !important;
}

.bootstrap-select .dropdown-menu.show {
    top: 0px !important;
    transform: translate3d(0px, 27px, 0px) !important;
}
/*}
    
/*.slider-search-field .bootstrap-select .dropdown-menu.show {
    top: 45px !important;
}*/
.dropdown-menu.show .inner.show {
    transform: translate3d(0px, 0px, 0px) !important;
}


.c-off-dashboard {
    margin: 0 auto;
    width: 75%;
    text-align: center;
    margin-bottom: 20px;
}

.content .bootstrap-select .dropdown-menu {
    max-height: 130px;
    overflow: auto;
}

.form-control-dropdown {
    display: block;
    width: 100%;
    font-weight: 400;
    background-color: #ffffff;
    background-clip: padding-box;
    border: 1px solid #E4E6EF;
    border-radius: 0.42rem;
    box-shadow: none;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    color: #595b66;
    border: 1px solid #999999;
    padding: 0px 5px;
    line-height: 18px;
    height: 26px;
    font-size: 13px;
    border-radius: 3px;
}
/*Attendance Regulrizn Buttons starts*/
.view_btn {
    width: 18px;
    height: 18px;
    background: url(../images/icons/view.svg);
    background-size: contain;
    color: white;
    display: inline-block;
    background-repeat: no-repeat;
    margin: 2px;
}

.btn_approve {
    width: 18px;
    height: 18px;
    background: url(../images/icons/Approve.svg);
    background-size: contain;
    display: inline-block;
    background-repeat: no-repeat;
    margin: 2px;
}

.btn_reject {
    width: 18px;
    height: 18px;
    background: url(../images/icons/cancel.svg);
    background-size: contain;
    color: white;
    display: inline-block;
    background-repeat: no-repeat;
    margin: 2px;
}
/*Attendance Regulrizn Buttons Ends*/
.my_profile_btn_edite {
    width: 18px;
    height: 18px;
    background: url(../images/icons/edite.png);
    background-size: contain;
    color: white;
    display: inline-block;
    background-repeat: no-repeat;
    padding: 12px;
}

.two-small-input {
    flex: 0 0 12.66667%;
    max-width: 12.66667%;
}

    .two-small-input input {
        width: 60px;
        float: left;
        margin-right: 5px;
    }

.dataTables_paginate.paging_full {
    position: absolute;
    bottom: 50px;
    background-color: #fff;
    width: 60%;
    padding-top: 10px;
}


.login-wrap {
  /*  background-color: #f5f5f7;*/
    border-radius: 8px;
    overflow: hidden;
   /* -webkit-box-shadow: 0px 0px 50px 0px rgb(82 63 105 / 35%);
    box-shadow: 0px 0px 50px 0px rgb(82 63 105 / 35%);*/
   padding-bottom:20px;
}

.login-profile-top {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    position: relative;
}

   /* .login-profile-top::before {
        background-color: #fff;
        content: '';
        width: 100%;
        height: 130px;
        position: absolute;
        left: 0px;
        top: -60px;
        border-bottom-left-radius: 200px;
        border-bottom-right-radius: 200px;
        z-index: 1;
    }
*/
.login-profile-image {
    width: 60px;
    height: 60px;
    border-radius: 100px;
    background-color: #fff;
    margin-bottom: 10px;
    overflow: hidden;
    position: relative;
    z-index: 1;
    margin-top: 25px;
}

    .login-profile-image img {
        border-radius: 100px;
        width: 60px;
        height: auto;
    }

.login-profile-more-details {
    position: relative;
    z-index: 1;
}

    .login-profile-more-details span.username {
        font-size: 14px;
        font-weight: 500;
        line-height: 14px;
        color: #333;
        width: 100%;
        display: inline-block;
    }

    .login-profile-more-details span.other-details {
        font-size: 12px;
        font-weight: 400;
        line-height: 14px;
        color: #333;
        width: 100%;
        display: inline-block;
    }

.login-button-outer {
    display: inline-block;
    width: 100%;
}

.view-profile {
    background-color: #dcdcdc;
    padding: 5px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 400;
    text-align: center;
    width: 100px;
    margin-left: 15px;
    margin-bottom: 15px;
    float: left;
    color: #000;
    cursor: pointer;
}

    .view-profile:hover {
        background-color: #b4b4b4;
        color: #fff;
    }

.sign-out {
    background-color: #0068ff;
    padding: 5px;
    border-radius: 25px;
    font-size: 12px;
    font-weight: 400;
    text-align: center;
    width: 100%;
    margin-right: 15px;
    margin-bottom: 5px;
    color: #fff;
    cursor: pointer;
}

    .sign-out:hover {
        background-color: var(--blue-color-theme-hover);
    }

.top-3 {
    top: 3px !important;
}

.employee-profile-img {
    width: 35px;
    height: 35px;
    border-radius: 100%;
    overflow: hidden;
    margin-top: 7px;
    cursor: pointer;
}

    .employee-profile-img img {
        width: 35px;
        height: auto;
        border-radius: 100%;
    }

.logOutMenu {
    position: absolute;
    z-index: 99;
    right: 10px;
}
.post_img {
    height: 100px;
    width: 100%;
    object-fit: cover;
}

    .post_img img {
        height: 100%;
        width: 100px;
        object-fit: cover;
    }


@media (min-width: 380px) {
    .dropdown-menu.dropdown-menu-lg {
        width: 240px;
    }
}

.othermember_leave {
    margin-bottom: 6px;
    padding: 11px;
    border: 1px solid #e5e5e5;
}



.symbol.symbol-xxl-100 .symbol-label {
    width: 80px !important;
    height: 80px !important;
}

.highs {
    margin-left: auto !important;
    margin-right: 30px !important;
}

.lows {
    margin-left: 0px !important;
}


/* <reports> */
.img-report {
    width: 40px;
    height: 40px;
    overflow: hidden;
    object-fit: cover;
}

    .img-report img {
        width: 100%;
        height: 100%;
        border-radius: 100%;
        overflow: hidden;
        border-radius: 100%;
        object-fit: cover;
    }

.name-post {
    padding: 8px;
}


.viewscroll {
    margin: auto;
    height: 445px;
    overflow-x: scroll;
    overflow-y: scroll;
}

.newwrapper {
    width: 1302px;
}

.sticky-col {
    position: -webkit-sticky;
    position: sticky;
}

.groupsummary-col {
    width: 170px;
    min-width: 170px;
    max-width: 170px;
    left: 0px;
    background-color: white;
}

.total-col {
    width: 70px;
    min-width: 70px;
    max-width: 70px;
    left: 165px;
    background-color: white;
}

.percent-col {
    width: 70px;
    min-width: 60px;
    max-width: 60px;
    left: 232px;
    background-color: white;
}

.route-col {
    width: 70px;
    min-width: 90px;
    max-width: 90px;
    left: 290px;
    background-color: white;
}

.first-col {
    width: 100px;
    min-width: 55px;
    max-width: 55px;
    left: 0px;
    background-color: white;
}

.second-col {
    width: 170px;
    min-width: 170px;
    max-width: 170px;
    left: 52px;
    background-color: white;
}

.Thrid-col {
    width: 170px;
    min-width: 170px;
    max-width: 170px;
    left: 225px;
    background-color: white;
}

.designation-col {
    width: 170px;
    min-width: 170px;
    max-width: 170px;
    left: 220px;
    background-color: white;
}

.department-col {
    width: 170px;
    min-width: 170px;
    max-width: 170px;
    left: 385px;
    background-color: white;
}

.location-col {
    width: 115px;
    min-width: 115px;
    max-width: 115px;
    left: 550px;
    background-color: white;
}

.Category-col {
    width: 115px;
    min-width: 115px;
    max-width: 115px;
    left: 660px;
    background-color: white;
}

.DOJ-col {
    width: 90px;
    min-width: 90px;
    max-width: 90px;
    left: 770px;
    background-color: white;
}

.LID-col {
    width: 90px;
    min-width: 90px;
    max-width: 90px;
    left: 855px;
    background-color: white;
}

.LWD-col {
    width: 90px;
    min-width: 90px;
    max-width: 90px;
    left: 938px;
    background-color: white;
}

.basic-col {
    width: 90px;
    min-width: 90px;
    max-width: 90px;
}

.anno_btnz{
    color:white!important;
}

/*<testing piont>*/
.slider-search-field .bootstrap-select .dropdown-menu {
    max-height: 520px !important;
    refer_customer
}

.content .bootstrap-select .dropdown-menu .selected {
    display: none;
}
.compensation-style table thead tr th {
   /* background-color: #264F94 !important;*/
    color: #fff !important;
}

.table-fixed {
    background-color: #F3F7FD !important;
}

    .table-fixed td {
        color: #135FD4 !important;
    }

.table-pay {
    background-color: #E8E8E8 !important;
}

    .table-pay td {
        color: #000000 !important;
    }

.table-new {
    background-color: #F3F7FD !important;
}

    .table-new td {
        color: #7C8DA7 !important;
    }
.table-gross {
    background-color: #E8E8E8 !important;
}
 /*   .table-gross td {
        background-color: #000000 !important;
    }*/



/*********************************** New UI Theme Start  **********************************************************/



/******* Loading spinner  *******/
.spinner-outer {
    position: absolute;
    width: 100%;
    height: 100vh;
    background: black;
    opacity: 0.7;
    z-index:10101;
   /* z-index: 123;*/
}
.spinner {
    background-image: url('../images/Loader_img1 (7).gif');
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;
    position: fixed;
    left: 45%;
    top: 40%;
}
    .spinner:before {
        left: 10px;
        display: none;
    }
/*.spinner {
    width: 40px;
    height: 40px;
    position: relative;
    left: 50%;
    top: 50%;
}


    .spinner:before {
        left: 10px;
    }

.double-bounce1, .double-bounce2 {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #c5d3ff;
    opacity: 0.6;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
    animation: sk-bounce 2.0s infinite ease-in-out;
}

.double-bounce2 {
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
}*/

@-webkit-keyframes sk-bounce {
    0%, 100% {
        -webkit-transform: scale(0.0)
    }

    50% {
        -webkit-transform: scale(1.0)
    }
}

@keyframes sk-bounce {
    0%, 100% {
        transform: scale(0.0);
        -webkit-transform: scale(0.0);
    }

    50% {
        transform: scale(1.0);
        -webkit-transform: scale(1.0);
    }
}

/******* Loading spinner  *******/





/**New theme*/
.main-outer-div {
    /* padding: 28px;
    background-color: #264F94;*/
    /*position: relative;*/
    /* height: 100%;
    overflow: hidden;*/
    overflow: hidden;
    height: 100%;
}

    .main-outer-div:before {
       /* content: '';
        width: 821px;
        height: 300px;
       
        background-image: url(../images/Group6.png);
        position: absolute;
        left: 36%;
        margin-left: -150px;
        top: -165px;*/
    }


   /* .main-outer-div:after {
        content: '';
        width: 520px;
        height: 354px;
        
        background-image: url(../images/Image13.png);
        position: absolute;
        left: -24px;
        bottom: -3px;
    }*/

.main-outer-div-inner {
   /* border-radius: 30px;*/
    overflow: hidden;
    height: 100%;
/*    z-index: 1;*/
   /* background-color: #F3F7FD;*/
    position: relative;
}

.content {
    padding: 0px 0;
    top: 0px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.full-width {
    padding: 0px !important;
}

.card.card-custom > .card-body {
    padding: 25px 50px;
    background-color: #F3F7FD;
    height: 100%;
/*    height: 93.5vh;*/
    overflow: auto;
}
/*@media (min-width: 992px){
    .header-fixed.aside-minimize .header,
    .aside-fixed.header-fixed.aside-minimize.aside-minimize-hover .header {
        left: 0px;
    }
    .aside-fixed .aside {
        position: relative !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 0px !important;
        z-index: 98 !important;
    }
}*/
.card {
    border-radius: 0rem;
}

    .card.card-custom.height-100per {
        /*  height: 505px;*/
        position: relative;
        padding-left: 50px;
    }

    .card.card-custom > .card-body {
        /* padding: 20px;*/
        padding: 18px 30px 25px 60px;
        /*background-color: #F3F7FD;*/
        background-color: #F6F8FC;
        overflow: auto;
    }

@media (min-width: 992px) {
    .header.header-fixed {
        position: relative;
    }
}

@media (min-width: 992px) {
    .aside-fixed.aside-minimize.aside-minimize-hover .wrapper,
    .aside-fixed.aside-minimize:not(.aside-minimize-hover) .wrapper {
        padding-left: 0px;
    }
}

@media (min-width: 992px) {
    .aside-fixed .aside {
        position: absolute;
    }
}

@media (min-width: 992px) {
    .header.header-fixed {
        padding-left: 50px;
    }
}


/*<new>*/
.btn.btn-default {
    border-radius: 20px;
}
.ihits-table tbody {
    background-color: white;
}

.ihits-table.table-border table thead tr.table-dark th,
.ihits-table.table-border table tbody tr.table-dark td {
    background-color: #264f94;
    /* border: 1px solid #EBEBFD !important;*/
    color: #fff;
}

.modal-backdrop {
    z-index:1010!important;
}

k

.dataTables_wrapper .dataTables_length select {
    border: 1px solid #EBEBFD !important;
    background-color: white !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover, .dataTables_wrapper .dataTables_paginate .paginate_button {
    border: 1px solid #EBEBFD !important;
    border-radius: 6px !important;
    background-color: white !important;
    font-size: 12px;
    color: #7C8DA7 !important;
}


.dataTables_info {
    font-size: 10px !important;
    color: #7C8DA7 !important;
}

.dataTables_wrapper {
    background-color: white !important;
}

    .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
        background-color: white !important;
        background: none !important;
        color: #7C8DA7 !important;
    }


    .dataTables_wrapper .dataTables_paginate .paginate_button {
        color: #7C8DA7 !important;
    }


        .dataTables_wrapper .dataTables_paginate .paginate_button.current {
            background: none !important;
            border: 1px solid #9dbef1 !important;
        }

.dataTables_scrollBody {
    border: none !important;
}


.odd, .even {
    border-bottom: 1px solid #EBEBFD;
}


.tab-button-wrap .tab-items .btn-title .btn-notification {

}

.tab-button-wrap .tab-items .btn-title .btn-notification {
    /*display: none;*/
}

.btn.btn-default {
    border-radius: 20px;
}

.select-option .filter-button .fa-filter::before {
    content: '';
    display: block;
    width: 20px;
    background: url(../images/icons/filter_icon.svg);
    border: none;
    height: 20px;
    background-repeat: no-repeat;
}


.select-option .fa-file-excel::before {
    content: '';
    display: block;
    width: 20px;
    background: url(../images/icons/Download_excel.svg);
    border: none;
    height: 20px;
    background-repeat: no-repeat;
}



.select-option .fa-search::before {
    content: '';
    display: block;
    width: 20px;
    background: url(../images/icons/Search_icon.svg);
    border: none;
    height: 20px;
    background-repeat: no-repeat;
}

.ihits-table table tbody tr {
    border-bottom: 1px solid #F6F7F9;
}


/*   <anjali>*/

.company-pro {
    background-color: white;
    padding: 5px 40px 30px;
}

.inner-pro {
    box-shadow: 0px 0px 5px 5px #F6F7F9;
    padding: 10px;
    border-radius: 15px;
}

.company-list .table-border table {
    border: none !important;
}

.company-list table {
    border: none !important;
}

    .company-list table tbody tr {
        border-bottom: 1px solid #F6F7F9;
    }

.notice-period {
    border: none !important;
}

.ihits-table.table-border .notice-period thead tr th, .ihits-table.table-border .notice-period tbody tr td {
    border: none !important;
}

.ihits-table.table-border .notice-period thead tr th {
    color: #20427D !important;
    padding: 4px 7px;
    font-size: 14px;
}

.ihits-table.table-border .notice-period tbody tr td {
    padding: 3px 7px !important;
    color: #8998B0;
}

.resignation-accept {
    background: #fff;
    padding: 35px 28px 15px;
    border-radius: 15px;
    margin-top: 20px;
}

.design-form {
    /*  border:none !important;*/
    /*    padding-left:0px;*/
}

.was-validated .form-control:invalid, {
    display: none;
}

.ihits-table table tbody tr {
    border-bottom: 1px solid #c6cbd8;
}

.period table tbody tr {
    border: none !important;
}

.reject {
    border: none !important;
    background-color: #7C8DA7 !important;
    padding: 4px 10px;
    min-width: 100px;
    border-radius: 50px;
}

.accept {
    background-color: #135FD4 !important;
    border: none !important;
}

    .accept:hover {
        background-color: #135FD4 !important;
        border: none !important;
    }

.file-color {
    color: #135FD4;
}

::-webkit-file-upload-button {
    background: #E9E9E9 !important;
    color: #7C8DA7 !important;
    /*   padding: 1em;*/
    font-size: 9px;
}


.compensation-style table thead tr th {
    background-color: var(--blue-color-theme);
  
    color: #fff !important;
}

.table-fixed {
    background-color: #F3F7FD !important;
}

    .table-fixed td {
        color: #135FD4 !important;
    }

.table-pay {
    background-color: #E8E8E8 !important;
}

    .table-pay td {
        color: #000000 !important;
    }

.table-new {
    background-color: #F3F7FD !important;
}

    .table-new td {
        color: #7C8DA7 !important;
    }



/*.checkbox {
    opacity: 0;
    position: absolute;
}
*/
.label {
    width: 50px;
    height: 26px;
    background-color: #111;
    display: flex;
    border-radius: 50px;
    align-items: center;
    justify-content: space-between;
    padding: 5px;
    position: relative;
    transform: scale(1.5);
}

.ball {
    width: 20px;
    height: 20px;
    background-color: white;
    position: absolute;
    top: 2px;
    left: 2px;
    border-radius: 50%;
    transition: transform 0.2s linear;
}

/*  target the elemenent after the label*/
/*.checkbox:checked + .label .ball {
    transform: translateX(24px);
}*/

.fa-moon {
    color: pink;
}

.fa-sun {
    color: yellow;
}

/***Dark theme start here ***/

.dark_mode {
    display: inline-block;
   /* width: 30%;
    margin: 26px;*/
}
    .dark_mode .checkbox{
        margin:5px !important;
        width:20px;
        height:20px;
        background-color:black;
    }

    body.black-theme .main-outer-div {
        background-color: #1B2531 !important;
    }

 /*   body.black-theme .main-outer-div .card.card-custom > .card-body {
        background-color: #1B2531 !important;
    }*/


  /*  body.black-theme .main-outer-div #blue-theme .aside, #blue-theme .aside-menu, #blue-theme .choices__list--multiple .choices__item.is-highlighted, #blue-theme .aside-menu .menu-nav > .menu-item {
        background-color: #273143 !important;
    }
*/


    body.black-theme .main-outer-div .card-footer-bottom-fixed {
        background-color: #273143 !important;
    }

    body.black-theme .main-outer-div .header {
        background-color: #273143 !important;
    }

    body.black-theme .main-outer-div .header-menu-wrapper .main-title, .breadcrumb a, .breadcrumb i {
        color: #75849B !important;
    }

    body.black-theme .main-outer-div .select-option .sraech-slider input.form-control {
        background-color: #273143 !important;
    }

    body.black-theme .main-outer-div .ihits-table table tbody tr {
        border-bottom: 1px solid #314768 !important;
    }


    body.black-theme .main-outer-div .ihits-table tbody {
        background-color: #273143 !important;
    }

    body.black-theme .main-outer-div .table-dark {
        background-color: #273143 !important;
    }

    body.black-theme .main-outer-div .ihits-table.table-border table thead tr.table-dark th, .ihits-table.table-border table tbody tr.table-dark td {
        background-color: #273143 !important;
    }
.profile_header_cls {
    background-color: #102548 ;
}

/***Dark theme start here ***/
.history-btn {
    width: 30px;
    height: 30px;
    object-fit: cover;
}
.history-btn img{
    width:100%;
    height:100%;
    object-fit:cover;
}
.application-icon h3 {
    font-size: 13px;
    color: #00040a;
}
.date-application {
    font-size: 14px;
    color: #000000;
    font-weight:400;
}
.userclass {
    font-size: 15px;
    /*font-weight: 400;*/
    color: #264F94;
}
.left-sidecoff {
    padding: 20px;
    background-color: #FFFFFF;
    border-radius:10px;
}





.add-padding {
    padding: 0px 30px 40px;
}
.new-inner-style {
    padding: 0 !important;
}
.location-slider {
    padding: 40px 30px 10px;
    background-color: white;
    position: sticky;
    top: 0;
    z-index: 1010;
}

.newpro-head {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
    padding: 8px 20px !important;
    /* position: fixed; */
    top: 40px;
    width: 100%;
    border-radius:10px;
    z-index: 4;
    background-color:#fff ;
    box-shadow: none !important;
}
    .newpro-head .header-profile-name a {
        color: #3D3D3D ;
    }
    .newpro-head .header-profile-email, .profile-header .header-profile-label {
        color: #707070 ;
    }
    .newpro-head .fas {
        color: #2574A4 ;
    }


/*<13-9-2022>*/
.aside-menu .menu-nav .menu-item > .menu-heading, .aside-menu .menu-nav .menu-item > .menu-link {
    justify-content: center !important;
}

.aside-menu .menu-nav > .menu-item > .menu-heading .menu-text, .aside-menu .menu-nav > .menu-item > .menu-link .menu-text {
    color: #000 !important;
    padding-left: 15px;
}




.esspicon::before {
    content: '';
    display: block;
    width: 40px;
    background: url('../images/Icon awesome-home.png');
    border: none;
    height: 35px;
    background-repeat: no-repeat;
}
/*
.settings::before {
    content: '';
    display: block;
    width: 25px;
    background: url('../images/menu-grid-o.png');
    border: none;
    height: 35px;
    background-repeat: no-repeat;
}

.timeoffice::before {
    content: '';
    display: block;
    width: 30px;
    background: url('../images/user-profile.jpg');
    border: none;
    height: 35px;
    background-repeat: no-repeat;
}

.payroll::before {
    content: '';
    display: block;
    width: 30px;
    background: url('../images/ios-settings.jpg');
    border: none;
    height: 35px;
    background-repeat: no-repeat;
}*/

.header-menu-wrapper {
    padding-left: 35px;
}

.newoffday {
    display: flex;
    align-items: center;
    justify-content: center;
}

.newfa {
    font-size: 12px;
    padding-right: 4px;
}

.newday {
    display: flex;
    align-items: center;
}

.firstday {
    padding-left: 15px;
}


.headname {
    font-size: 13px;
}
.aside {
    background-color: #fff !important;
    width: 280px !important;
}
.heading-menu i span {
    cursor: auto !important;
}

.common-table {
    width: 100% !important;
}

div.dataTables_scrollBody thead {
    /*display: none;*/
    visibility: collapse;
}

.dataTables_scrollHeadInner {
    padding-right: 0px !important;
    width: 100% !important;
}

.paginate_button next {
}



.my-wrapper {
    /*width: 100%;
    margin: 0 auto;*/
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    background-color: white;
    padding: 6px;
}

.my-inner1 {
    margin: 0 20px;
    display: block;
    float: right;
}

.my-inner2 {
    display: block;
    border-radius: 10px;
    border: 1px solid #EBEBFD !important;
    float: right;
    font-size: 10px
}

.my-inner3 {
    margin: 0 20px;
    display: block;
    float: right;
}



.exittab {
    /* justify-content: space-around; */
    /* background-color: var(--blue-color-theme); */
    border: none !important;
}

.nav-tabs .exit-link.active, .nav-tabs .nav-item.show .exit-link {
    border: none !important;
    /* background: #d0d5e4   !important; */
    border-radius: 0px !important;
    background-color: #d0d5e4;
    border-bottom: 4px solid #6b6476 !important;
    color: #000 !important;
}

/*.exit-link {
    color: #000 ;
    padding: 10px 60px !important;
}*/

.nav-tabs .nav-link {
    border: none !important;
    color:#000;

}



.nav-tabs .nav-link:hover {
   
    color: #000;
}





.exititem {
    /* width: 49%;
    margin: 0px 0px 0px 8px ; */

    background-color: #d0d5e4;
}

.newgroup h5 {
    font-size: 16px;
    margin-bottom: 10px;
    margin-top: 10px;
    text-transform: uppercase;
    color: #000;
}

.exitcontent {
    height: 400px;
    overflow-y: scroll;
    overflow-x: hidden;
    padding-bottom: 20px;
}

.filter-forms {
    height: 445px;
    overflow-y: scroll;
    display: block;
    /* padding-bottom: 40px; */
    padding: 10px 13px 40px 10px;
}

/* .fingerprint{
    width: 35px;
    height: 33px;
    object-fit: cover;
    
} */
/* .fingerprint img{
    width: 100%;
    height: 100%;
  

} */
.fingericon {
    font-size: 20px;
    padding-right: 5px;
}

.grade-first {
    width: 100px;
    min-width: 100px;
    max-width: 100px;
    left: 0px;
    z-index: 1010;
}

.basic-salary {
    width: 140px;
    min-width: 200px;
    max-width: 200px;
}

tfoot tr td {
    font-weight: 700;
}


.dntCaptcha {
    display: flex;
    flex-direction: row-reverse;
    width: 95%;
}

    .dntCaptcha img {
        height: 32px;
        margin-left: 10px;
        border-radius: 5px;
        margin-top: 9px;
        filter: grayscale(1);
    }

    .dntCaptcha a {
        position: absolute;
        right: -10px;
        margin-top: 12px;
    }
.dataTables_wrapper .dataTables_scroll{
    margin:0px !important
}

.page_white {
    background-color: white;
    padding: 20px 23px 10px;
    margin-bottom: 30px;
    border-radius:10px;
}


/* refer a cadidate css start */

.suiticon {
    font-size: 22px;
    color: black;
    padding: 6px 10px;
}

.tackfont {
    font-size: 10px;
}

.locationz {
    color: black;
   /* padding-left: 20px;
    padding-right: 10px;
    padding-top: 3px;*/
    font-size: 15px;
}

.job_protal {
    background-color: #fff;
    align-items: center;
    border-radius: 10px;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 15px;
    padding-right: 15px;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    cursor: pointer;
}

.fullbtn {
    background-color: #EFEFEF;
    text-align: center;
    padding: 2px 15px;
    color: #000;
    border-radius: 30px;
}

.full_time {
   
}


/*.job_protal {
    margin-top: 40px;
}*/



.job-salary {
    margin-top: 8px;
}

.stackfont {
    font-size: 16px;
   
    margin-bottom:0px;
}

.jobdate {
    color: black;
    font-size:11px;
    /*padding-top:5px;*/
    margin-bottom:0px;
}
.job-salary p{
    margin-bottom:0px;
}
.fullstack {
    color: black;
}

#textcolo {
    color: black;
    font-size: 11px;
    display:flex;
}
.emp-port {
    font-size: 13px;
    color:#C2C2C2;
    padding-left:10px;
}
.refer_icon{
    padding-left:40px;
    padding-top:9px;
}
.locate_icon{
    font-size:13px;
    font-weight:500;
    margin-bottom:0px;
}
.locate-ihits {
    font-size: 11px;
    font-weight: 400;
    color:#4E4E4E;
}
.job_list {
    font-size: 15px;
    color: #0d6efd;
}
.job-found h4 {
    font-size: 22px;
    font-weight: 500;
    color: #2E1717;
}
.white-border{
    border-radius:10px;
    padding-bottom:30px;
}

/*<JOB DESCRIPTION>*//**/
.search_container {
    position: relative;
    /* top: 81px; */
    width: 100%;
    background-color: white;
    box-shadow: rgb(0 0 0 / 30%) 0px 2px 15px 0px;
    border-radius: 20px;
    padding: 25px 30px;
}
.newadd {
    padding: 10px 50px 10px 50px;

}
.fa-pen {
    color: rgb(63, 66, 84) !important;
}
.walk_img {
    width: 90px !important;
    height: 90px !important;
    box-shadow: 0 0.5rem 1.5rem 0.5rem rgb(0 12 32 / 21%) !important;
}
.btn.btn-icon i::before {
    font-size: 9px !important;
    /* color: #fa9403 !important; */
    color: #3F4254;
}


.login-btn {
    background-color: #217bff !important;
    border: none;
    color: white;
    font-size: 14px;
    border-radius: 30px;
    margin-bottom: 19px;
}

.profile_view .header-profile-name a {
    color: white !important;
}
.profile_view .header-profile-email, .profile-header .header-profile-label {
    color: white !important;
}
.profile_view .fas {
    color: white !important;
}


/*<newpopup>*/
.new-authority {
    padding: 6px 20px !important;
    border-radius: 5px;
    /*box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 29%);*/
    /*background-color: #dadded;*/

    border: 2px dotted #aab2dd;
    margin-top: 10px;
}
.new-inputwrapper {
    width: 60px !important;
    height: 60px !important;
}
.authorityone {
    padding: 1px 10px;
    background-color: #264f94;
    border-radius: 5px;
}
    .authorityone span {
        color: white;
        font-size: 12px;
    }

.new-input-image{
    background-image:url(../images/blank.png);
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
}
.whitecolor {
    color: #970606;
    font-weight: 500;

}
.popup-id {
    color: #000000;
    font-weight: 500;
}
.authority-section {
    height: 270px;
    overflow-y: scroll;
    padding: 0 10px;
}
.btn.btn-primary:hover:not(.btn-text):not(:disabled):not(.disabled),
.btn.btn-primary:focus:not(.btn-text),
.btn.btn-primary.focus:not(.btn-text) {
    color: #FFFFFF;
    background-color: #264f94 !important;
    border-color: #264f94 !important;
}
.page_white {
    background-color: white;
    padding: 20px 23px 10px;
    margin-bottom: 30px;
    border-radius: 10px;
}
.select-option .sraech-slider input.form-control{
    padding:0!important;
}
.btn.btn-primary {
   
    border-radius: 20px;
    color: #FFFFFF;
    background-color: #264f94;
    border-color: #264f94;
}

.tble-clr-chng {
    background-color: #ebedf0 !important;
    color: #000 !important;
}





.main_search {
    position: absolute;
    right: 94px;
    z-index: 100;
    padding-top: 3px;
    width: 18%;
}



.container_search {
    max-width: 500px;
}

    .container_search .searchInput {
       
        width: 100%;
        position: relative;
    }

.searchInput input {
    height: 35px;
    width: 100%;
    margin-top: 5px;
    outline: none;
    border: 1px solid #c2c2c2;
    border-radius: 35px;
    padding: 0 60px 0 20px;
    font-size: 12px;
}
.resultBox li:hover {
    background: #efefef;
}
.searchInput.active input {
    border-radius: 5px 5px 0 0;
    border-radius: 35px;
}

.searchInput .resultBox {
    padding: 0;
    opacity: 0;
    pointer-events: none;
    max-height: 280px;
    overflow-y: auto;
    
}

.searchInput.active .resultBox {
    padding: 10px 8px;
    opacity: 1;
    pointer-events: auto;
    background-color: white;
}

.resultBox li {
    list-style: none;
    padding: 8px 12px;
    display: none;
    width: 100%;
    cursor: default;
    border-radius: 3px;
}

.searchInput.active .resultBox li {
    display: block;
}

.resultBox li:hover {
    background: #efefef;
}

.searchInput .icon {
    position: absolute;
    right: 0px;
    top: -5px;
    height: 55px;
    width: 55px;
    text-align: center;
    line-height: 55px;
    font-size: 20px;
    color: #644bff;
    cursor: pointer;
}

.highlight {
    background-color: #cee9ff;
}


.new-tab .ulList > li.active {
    color: #000;
    padding-top: 5px;
    padding-bottom: 6px;
   background-color: #a0afe8;
}
.exit-padding{
    margin:0 28px;
}


.hrpolicy {
    padding: 20px;
}

.folder-icon {
    font-size: 110px;
    color: #F8D775;
}

.hrpolicy-icon {
    text-align: center;
}

    .hrpolicy-icon h4 {
        font-size: 13px;
    }

.fa-file {
    font-size: 110px;
    color: red;
    margin-bottom: 4px;
}




.sticky-head {
    position: -webkit-sticky;
    position: sticky;
}

.groupsummary-head {
    width: 195px;
    min-width: 195px;
    max-width: 195px;
}
.groupsummary-id {
    width: 120px;
    min-width: 120px;
    max-width: 120px;
    
}





/****** payslip css *********/

.s_slip_container {
    display: flex;
    width: 100%;
    border-bottom: 1px solid #c2c2c2;
    margin: 20px 0px 20px 0px;
    padding-bottom: 12px;
    color: #0A1323;
    font-weight: 500;
    font-family: roboto;
}


.box_months {
    width: 80px;
    text-align: center;
    cursor: pointer;
}

    .box_months:after {
        content: "";
        background-color: #D8D8D8;
        margin: 0 auto;
        display: block;
        width: 2px;
        height: 12px;
    }

    .box_months.active:after {
        background-color: #4472CC;
    }



    .box_months p {
        margin: 0px;
        padding: 0px;
    }

    .box_months span {
        margin: 0px;
        padding: 0px;
    }

    .box_months.active {
        font-weight: bold;
        color: #4472CC !important;
    }



.payslip_container {
    background-color: white;
    padding: 20px;
    border-radius: 10px;
}

    .payslip_container .title {
        display: flex;
    }



.box_months:nth-child(0) {
    margin-left: 0px;
    background-color: red;
}


.salaryslip_graph {
    text-align: center;
    border-bottom: dashed 1px #c2c2c2;
    padding-bottom: 27px;
}


.salary_details {
    margin-top: 10px;
}

    .salary_details div {
       /* width: 25%;
        width: 33%;*/
        margin: 10px 10px 0px 0px;
    }

.gross_pay {
    width: 100% !important;
    background-color: #EEEEEE;
    height: 63px;
    padding: 10px;
    border-radius: 9px;
}


    .gross_pay span {
        display: block;
    }



.deduction {
    width: 100% !important;
    background-color: #FF6979;
    height: 63px;
    padding: 10px;
    border-radius: 9px;
}


.Net_pay {
    width: 100% !important;
    background-color: #47D9A0;
    height: 63px;
    padding: 10px;
    border-radius: 9px;
}

    .Net_pay span {
        display: block;
    }


.deduction span {
    display: block;
}


.monthselection {
    margin-left: auto;
    width: 160px;
}

.day-number {
    position: relative;
}

.day-count {
    position: absolute;
}


/*payslip css*/


.i-tag-hover-change {
    background-color: #efeff4 !important;
    border: solid 1px #efeff4 !important;
}

.new-tble-pad-tp {
    padding-top: 5px !important;
}




/******  Top menu subin *********/


.top_menu {
    position: absolute;
    left: 24px;
        z-index: 1000;
       /* z-index: 1010;*/
    top: 14px;
}


@media (max-width:992px) {

    .top_menu {display:none;}


}
@media only screen and (max-width: 992px) {
    .aside-on {
        display: block !important;
    }


}







.card.card-custom.height-100per {
    padding-left: 0px !important;
    position: relative;
}


.card.card-custom > .card-body {
    padding: 18px 30px 25px 20px !important;
    overflow: auto;
}




.my-wrapper {
    /*width: 100%;
    margin: 0 auto;*/
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    background-color: white;
    padding: 6px;
}

.my-inner1 {
    display: block;
    float: right;
}

.my-inner2 {
    display: block;
    border-radius: 10px;
    border: 1px solid #EBEBFD !important;
    float: right;
    font-size: 10px
}

.my-inner3 {
    display: block;
    float: right;
}



/*<Abin-login page essp>*/
/*.new-essp-login-page-upd {
    background-image: url('../images/ESSP Login page 11 – 11.png') !important;
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 10px;
}*/
/*.usernameinput {*/
    /* border: 1px solid #bec7d5 !important; */
    /* box-shadow: rgb(0 0 0 / 20%) 0px 0px 15px !important; */
    /*border-bottom: 1px solid #7EACDE !important;*/
    /* box-shadow: rgb(0 0 0 / 20%) 0px 0px 15px !important; */
    /*border-radius: 0px;
    height: 43px !important;
    padding-left: 30px !important;
    background-color: transparent !important;*/
   
}
.input-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 9999s ease-in-out 0s !important;
}
.nreborder {
    background-color: transparent;
    font-weight: 900;
    font-size: 16px;
}




/*<pms>*/
.appr-name {
    background-color: #264f94;
    color: #fff;
    border-radius: 5px;
    padding: 5px 10px;
}
    .appr-name h4 {
        margin-bottom: 0;
    }
.profile_pms{
    padding-bottom:3px;
}
.pms_header {
    background-color:#d2dff1 !important;
    margin-bottom:10px;

}
.pms_textarea{
    height:38px !important;
}

.list-style {
    list-style: none;
    position: relative;
}

.list-styleicon::before {
    content: "";
    /*background: url('../images/check-mark.png');*/
    background: url('../images/check-mark (1).png');
    display: block;
    position: absolute;
    left: -22px;
    width: 20px;
    height: 20px;
    background-size: cover;
    background-repeat: no-repeat;
}

.pass li {
    padding: 0 10px 10px;
}

.newpasscode {
    padding: 0 0 10px;
}

.list-cancelicon::before {
    content: "";
    /*background: url('../images/check-mark.png');*/
    background: url('../images/cancel.png');
    display: block;
    position: absolute;
    left: -22px;
    width: 20px;
    height: 20px;
    background-size: cover;
    background-repeat: no-repeat;
}






/*<Abin-new-updated-login page essp>*/

.login_img {
    text-align: center;
}

.ihits_logo {
    width: 250px;
    height: 120px;
    margin-left: 50px;
    /* margin-top: -10px; */
    position: absolute;
    top: 15px;
}


    .ihits_logo img {
        max-width: 100%;
        height: 100%;
    }

.login_left {
    background-color: #F9FBFE;
    /* display: flex; */
    height: 100%;
    align-items: end;
    /* padding: 10px; */
    padding: 40px 10px 0px 40px;
    width: 400px;
    height: 400px;
    width: 100%;
    height: 100%;
    /* margin: 20px; */
    /* shape-outside: circle(102% at 54%); */
    clip-path: circle(102% at 9% 10% );
    background: lightblue;
    clip-path: polygon(0% 0%, 88% 0%, 100% 23%, 90% 100%, 0% 100%);
    /* border-top: 145px solid transparent; */
    /* border-left: 89px solid #000; */
    /* border-bottom: 293px solid transparent; */
    /* transform: skew(0deg); */
    background: #F6F8FC;
}
.login_img img {
    max-width: 100%;
}

.login-signin h3::before {
    content: url(../images/icons/login_lap.png);
    position: absolute;
    /* border-color: #009933; */
    top: -25px;
    left: 240px;
    /* margin-top: -1em; */
    /* transform: rotate(45deg); */
    width: 100%;
}

.hr_cls {
    color: #217BFF;
}

.user-svg img {
    position: absolute;
    z-index: 10;
    top: 15px;
    left: 8px;
    width: 15px;
    height: 15px;
}

.usernameinput {
    /* border-bottom: 1px solid #7EACDE !important; */
    /* box-shadow: rgb(0 0 0 / 20%) 0px 0px 15px !important; */
    border-radius: 0px;
    height: 43px !important;
    padding-left: 30px !important;
    background-color: transparent !important;
    border: none;
    border: 1px solid #8c8888;
    /* padding: 12px; */
    border-radius: 6px;
}

.usernameinput:focus{
    box-shadow:none;
}


.version {
 text-align:center;
    z-index: 100;
    padding-top: 15px;
    width: 100%;
}





.leave_appli_img {
    background-color: var(--blue-color-theme);
    mask: url(../images/icons/);
    -webkit-mask-image: url('../images/icons/Appli_history.svg');
    width: 50px;
    height: 50px;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 50%;
    -webkit-mask-position: center;
}
.histroy_img {
    background-color: var(--blue-color-theme);
    mask: url('../images/icons/Alert_cancel.svg');
    -webkit-mask-image: url('../images/icons/Approval Authorities.svg');
    width: 50px;
    height: 50px;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 50%;
    -webkit-mask-position: center;
}
.coff_balance {
    background-color: var(--blue-color-theme);
    mask: url('../images/icons/Coff_balance.svg');
    -webkit-mask-image: url('../images/icons/Coff_balance.svg');
    width: 50px;
    height: 50px;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 50%;
    -webkit-mask-position: center;
}
.social_text h3 {
    font-size: 15px;
    color: #1C1C1C;
    margin-bottom: 0px;
    font-weight: 500;
    padding-left: 12px;
}

.social_text div {
    font-size: 12px;
    color: #AFAFAF;
    padding-left: 12px;

}
    .essp-btn-post{
    color: #ffffff;
    padding-left: 15px;
    padding-right: 15px;
    min-width: 70px;
    font-size: 11px;
    padding: 2px;
    background-color: #0d6efd;
    border: none;
    border-radius: 5px;
}



.twk-notification {
    position: relative;
    font-size: 1em;
}

.twk-notification__bell {
    position: relative;
}

.twk-notification__count {
    position: absolute;
    left:14px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25em;
    height: 1.25em;
    font-size: 0.8em;
    font-weight: 600;
    color: #fff;
    text-align: center;
    background: #f00;
    border-radius: 50%;
}

.twk-notification__menu {
    position: absolute;
    z-index: 1050;
    padding: 13px;
    margin: 0.25em 0 0 0;
    overflow: hidden;
    white-space: nowrap;
    list-style-type: none;
    background: #fff;
    border: 1px solid rgb(137 106 106 / 15%);
    border-radius: 0.25em;
 /*   opacity: 0;*/
    font-family: 'Poppins';
    width: 270px;
    top: 36px;
    text-align: left;
    box-shadow: 0px 0px 13px -1px rgba(0, 0, 0, 0.2);
    font-size: 12px;
}

    .twk-notification__menu.active {
        opacity: 1;
    }

.twk-notification__header {
    padding: 0.5em;
    font-size: 1.2em;
    font-weight: 600;
    text-align: left;
    font-family: 'Poppins';
    letter-spacing: 0.0625em;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

.twk-notification__item {
    position: relative;
}

.twk-notification__item-count {
    position: absolute;
    top: 50%;
    left: 0.625em;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2em;
    height: 2em;
    font-size: 0.625em;
    font-weight: bold;
    color: #fff;
    background: #f00;
    border-radius: 50%;
    transform: translate(0, -50%);
}

.twk-notification__link {
    display: block;
    padding: 0.5em 2em;
    color: #909090; font-family:Poppins;
   font-size:12px;
    text-decoration: none;
}

   

.twk-notification__right .twk-notification__menu {
    right: 0;
}

.notification_main {
    position: absolute;
    right: 57px;
    z-index: 1000;
    top: 11px;
    cursor: pointer;
}

.fa-bell:before {
    color: #75849b !important; 
}




.product_details {
    background-color: var(--blue-color-theme);
    mask: url('../images/icons/product_details.svg');
    -webkit-mask-image: url('../images/icons/product_details.svg');
    width: 50px;
    height: 50px;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 65%;
    -webkit-mask-position: center;
}
.refer_customer {
    background-color: var(--blue-color-theme);
    mask: url('../images/icons/refer.svg');
    -webkit-mask-image: url('../images/icons/refer.svg');
    width: 50px;
    height: 50px;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 70%;
    -webkit-mask-position: center;
}

.passwordeye {
    position: absolute;
    top: 30%;
    right: 10px;
}


.captcha {
    width: 14px;
    height: 16px;
    object-fit: cover;
}

    .captcha img {
        width: 100%;
        height: 100%;
    }
.new_duty_footer {
    position: sticky;
    bottom: 0px;
    z-index: 10;
}
.ihits-table.table-border table thead tr.table-dark th, .ihits-table.table-border table tbody tr.table-dark td {
    background-color: #264f94;
    background-color: var(--main-color-one);
    /* border: 1px solid #EBEBFD !important; */
    color: #ffffff;
}
.fa-sync-alt::before {
    color: #00890c !important;
    font-size: 11px !important;
    line-height: 14px;
}
.btn.btn-icon.icon-only {
    background-color: #efeff4 !important;
    border: solid 1px #efeff4 !important;
}
.cancel-btn::before {
    font-size: 12px !important;
    color: red !important;
}
.ihits-table.table-border table tbody tr td {
    padding: 10px 12px !important; 
    /*padding: 10px 18px !important;*/
}

.new-dataaa-found {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.add-btn-icon {
    width: 30px;
    height: 30px;
    border-radius: 50px;
    padding: 0px 7px  !important;
    min-width: 0px !important;
    cursor:pointer;
}
.icon-nm{
   /* display:flex !important;*/
    justify-content:center;
}
.add-btn-icon {
    margin-right: 15px;
}

.emp_name_dataz{
    font-weight:800;
}

.line_heig{
    line-height:3;
    color:black;
}

.employee_name_data {
    padding: 20px 22px;
}

.calculation_new_cls{
    padding-left:45px;
}

.Regime_sele{
    color:black;
    font-weight:700;
}


.total_colo{
color:black;
}



.new_pdf_download {
    background-color: #93959d;
    mask: url(../images/icons/);
    -webkit-mask-image: url('../images/download (1new).svg');
    width: 50px;
    height: 50px;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 50%;
    -webkit-mask-position: center;
}

/*.wave_one::before {
    content: "";
    background-image: url('../images/orangewave1.svg');
    display: block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    height: 100%
}
*/

/* abin dashboard */

/**/
/*@media only screen and (min-width: 1200px) {
   
}

@media only screen and (max-width: 1600px) {
    .wave_one {
        width: 100%;
        height: 100%;
        background-color: red;
        border-radius: 10px;
    }
}

@media only screen and (min-width: 1600px) {
    .wave_one {
        width: 100%;
        height: 100%;
        background-color: blueviolet;
        border-radius: 10px;
    }
}
*/
.wave_one {
    width: 100%;
    height: 100%;
    background-color: #FF7A00;
    border-radius: 10px;
}
.wave_card {
    /* background-color: orange; */
    height: 200px;
    background-color: #FF7A00;
    border-radius: 15px;
    overflow: auto;
}

.wave_one::before {
    content: "";
    position: absolute;
    background-image: url(../images/orangewave1.svg);
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: auto;
    /* display: flex; */
    align-items: end;
    bottom: 0;
    height: 100%;
    left: 0;
    width: 100%;
}

.wave_one .fa-bell:before {
    color: #fff !important;
    font-size: 3rem !important;
    text-align: center;
}



.wave_two {
    width: 100%;
    height: 100%;
    border-radius: 10px;
}

.wave_card_two {
    /* background-color: orange; */
    height: 200px;
    background-color: #B21CF9;
    border-radius: 15px;
    overflow: auto;
}

.wave_two::before {
    content: "";
    position: absolute;
    background-image: url(../images/wave-2.svg);
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: auto;
    /* display: flex; */
    align-items: end;
    bottom: 0;
    height: 100%;
    left: 0;
    width: 100%;
}

.icon_img_doc {
    width: 100px ;
    height: 50px ;
}


.wave_three {
    width: 100%;
    height: 100%;
    border-radius: 10px;
}

.wave_card_three {
    /* background-color: orange; */
    height: 200px;
    background-color: #33C1EE;
    border-radius: 15px;
    overflow: auto;
}

.wave_three::before {
    content: "";
    position: absolute;
    background-image: url(../images/blue-wave.svg);
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: auto;
    /* display: flex; */
    align-items: end;
    bottom: 0;
    height: 100%;
    left: 0;
    width: 100%;
}

.indez_for_date{
    z-index:5;
    position:relative;
}


.owl-prev span{
    color:transparent!important;
}

.owl-next {
    display: none;
}

/*.cele_one {
    background-image: url(/images/onam-celebration-background-for-happy-vector-47955974.jpg);
    height: 113px;
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 6px;
    background-color: aquamarine;
    box-shadow: inset 0 0 0 2000px rgba(255, 0, 150, 0.3);
}
*/

.cele_new_list {
    background-color: #fff;
    padding: 20px;
    border-radius: 6px;
}



.bg_background_evnt_one {
    background-image: url(/images/merry-christmas-happy-new-year-text-with-snow-falling-red-background.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}


.bg_background_evnt_two {
    background-image: url(/images/onam-celebration-background-for-happy-vector-47955974.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.image-overlayy {
    
    /* height: 100px; */
    display: flex;
    align-items: center;
    padding: 10px;
    border-radius: 6px;
    position: relative;
    border-radius: 10px;
}


    .image-overlayy:after {
        content: '';
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        position: absolute;
        border-radius: 10px;
        background: #000000ad;
        opacity: 0.85;
    }


.calender_btn {
    width: 50px;
    height: 75px;
    background-color: white;
    border-radius: 12px;
    text-align: center;
}


.calender_month {
    color: black;
    font-size: 18px;
    font-weight: 600;
    /* background-color: #0068FF; */
    border-radius: 10px 10px 0px 0px;
}

.month_datez {
    color: black;
    font-weight: 600;
    font-size: 19px;
    padding: 2px 0px 0px;
}

.event_upcoming_evntz h2 {
    margin-left: 10px;
    font-size: 20px;
    color: black;
    font-weight: 600;
}

.pad-redu {
    padding: 15px 15px 0px 15px !important;
}

.img_size{
    height:200px;
    width:100%;

}

.new_common_up {
    height: 870px;
    overflow-y: scroll;
    display: block;
    padding:10px 0px 0px 40px;
   
}


.img_size img {
    width: 100%;
    object-fit: cover;
    height: 100% !important;
}

    .event_upcoming_evntz {
        align-items: baseline;
        padding: 0px 0px 15px;
    }

.tab-content-das {
   
     display:block !important; 
     position: relative !important; 
  
}


/*.employe_profile_new_pic {
    background-color: white;
    width: 85px;
    height: 85px;
    display: flex;
    display: flex;
    margin: 6px;
    border-radius: 40px;
    box-shadow: rgba(99, 94, 102, 0.2) 0px -1px 15px 0px;
    justify-content: center;
    align-items: center;
}*/

.employe_name_piczz {
    width: 78px;
    height: 78px;
    border-radius: 100%;
    box-shadow: rgba(99, 94, 102, 0.2) 0px -1px 15px 0px;
    cursor: pointer;
    background-color: white;
    padding:5px;
}

.employe_pic_size{
    width:100%;
    height:100%;
}
.carousel_se_03_carousel  .item img{
    height:100%;
    object-fit:cover;
border-radius:50px;
}

.nam-brithz{
    font-size:15px;
}

.employee_birth_date{
    font-size:15px;
}

.pad_cele_tap{
  /*  margin-top:20px;*/
    background-color:white;
    padding-top:20px;
    border-radius:6px;
}
/*
.Birthday_btn{
    padding:10px 30px!important;
}*/

.non_active_clss{
border-radius:6px;
color:black;

}

.Board_btn {
    padding: 10px 25px !important;
}

.coment_boxxxz {
    border-radius: 10px;
    background-color: white;
    padding: 15px 0px 15px;
    padding-left: 40px;
    /* margin-left: 0px; */
}

.comment_pad{
    margin-right:25px;
}

.calendar_wit{
    width:25px!important;
    height:25px!important;
}

.center_div{

}

.alig_padd {
    padding: 10px 16px !important;
}

.text_sizee_chg {
   font-size:13px;
}
    .text_sizee_chg a {
        font-weight: 500;
        font-size: 12px;
    }

    .indez_for_date h2 {
        font-size: 14px;
        font-weight: 400;
    }
.discription_announcement {
    font-size: 14px !important;
    font-weight: 400 !important;
}
.announcements_head {
    font-size: 16px !important;
    font-weight: 600 !important;
}
/* demo css */
.fa-spin-fast {
    -webkit-animation: fa-spin-fast 0.2s infinite linear;
    animation: fa-spin-fast 0.2s infinite linear;
}

@-webkit-keyframes fa-spin-fast {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}

@keyframes fa-spin-fast {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}

.material-card {
    position: relative;
    height: 0;
    /* padding-bottom: calc(100% - 16px); */
    margin-bottom: 0px;
    padding-bottom: 245px;
    /* bottom: 0; */
}

    .material-card h2 {
        position: absolute;
        top: calc(100% - 16px);
        left: 0;
        width: 100%;
        padding: 10px 16px;
        color: #000;
        font-size: 1.4em;
        line-height: 1.6em;
        margin: 0;
        z-index: 10;
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        -ms-transition: all 0.3s;
        -o-transition: all 0.3s;
        transition: all 0.3s;
    }

       /* .material-card h2 span {
            display: block;
        }*/

        .material-card h2 strong {
            font-weight: 400;
            display: block;
            font-size: .8em;
        }

      /*  .material-card h2:before,*/
       /* .material-card h2:after {
            content: ' ';
            position: absolute;
            left: 0;
            top: -16px;
            width: 0;
            border: 8px solid;
            -webkit-transition: all 0.3s;
            -moz-transition: all 0.3s;
            -ms-transition: all 0.3s;
            -o-transition: all 0.3s;
            transition: all 0.3s;
        }*/

        .material-card h2:after {
            top: auto;
            bottom: 0;
        }

@media screen and (max-width: 767px) {
    .material-card.mc-active {
        padding-bottom: 0;
        height: auto;
    }
}

.material-card.mc-active h2 {
    top: 0;
    padding: 16px 16px 30px 90px;
}

    .material-card.mc-active h2:before {
        top: 0;
    }

    .material-card.mc-active h2:after {
        bottom: -16px;
    }

.material-card .mc-content {
    position: absolute;
    right: 0;
    top: 10px;
    bottom: 16px;
    left: 0px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.material-card .mc-btn-action {
    position: absolute;
    right: 16px;
    top: 16px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    border: 5px solid;
    width: 54px;
    height: 54px;
    line-height: 44px;
    text-align: center;
    color: #fff;
    cursor: pointer;
    z-index: 20;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.material-card.mc-active .mc-btn-action {
    top: 65px;
}

.material-card .mc-description {
    position: absolute;
    top: 100%;
    right: 30px;
    left: 30px;
    bottom: 54px;
/*    height: 177px;*/
    overflow-y: scroll;
    /* overflow: hidden; */
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transition: all 1.2s;
    -moz-transition: all 1.2s;
    -ms-transition: all 1.2s;
    -o-transition: all 1.2s;
    transition: all 1.2s;
}

.material-card .mc-footer {
    height: 0;
    overflow: hidden;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

    .material-card .mc-footer h4 {
        position: absolute;
        top: 200px;
        left: 30px;
        padding: 0;
        margin: 0;
        font-size: 16px;
        font-weight: 700;
        -webkit-transition: all 1.4s;
        -moz-transition: all 1.4s;
        -ms-transition: all 1.4s;
        -o-transition: all 1.4s;
        transition: all 1.4s;
    }

    .material-card .mc-footer a {
        display: block;
        float: left;
        position: relative;
        width: 52px;
        height: 52px;
        margin-left: 5px;
        margin-bottom: 15px;
        font-size: 28px;
        color: #fff;
        line-height: 52px;
        text-decoration: none;
        top: 200px;
    }

        .material-card .mc-footer a:nth-child(1) {
            -webkit-transition: all 0.5s;
            -moz-transition: all 0.5s;
            -ms-transition: all 0.5s;
            -o-transition: all 0.5s;
            transition: all 0.5s;
        }

        .material-card .mc-footer a:nth-child(2) {
            -webkit-transition: all 0.6s;
            -moz-transition: all 0.6s;
            -ms-transition: all 0.6s;
            -o-transition: all 0.6s;
            transition: all 0.6s;
        }

        .material-card .mc-footer a:nth-child(3) {
            -webkit-transition: all 0.7s;
            -moz-transition: all 0.7s;
            -ms-transition: all 0.7s;
            -o-transition: all 0.7s;
            transition: all 0.7s;
        }

        .material-card .mc-footer a:nth-child(4) {
            -webkit-transition: all 0.8s;
            -moz-transition: all 0.8s;
            -ms-transition: all 0.8s;
            -o-transition: all 0.8s;
            transition: all 0.8s;
        }

        .material-card .mc-footer a:nth-child(5) {
            -webkit-transition: all 0.9s;
            -moz-transition: all 0.9s;
            -ms-transition: all 0.9s;
            -o-transition: all 0.9s;
            transition: all 0.9s;
        }

.material-card .img-container {
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;

    z-index: 3;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.material-card.mc-active .img-container {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    left: 10px;
    top: -2px;
    width: 60px;
    height: 60px;
    z-index: 20;
}

.material-card.mc-active .mc-content {
    padding-top: 5.6em;
}

@media screen and (max-width: 767px) {
    .material-card.mc-active .mc-content {
        position: relative;
        margin-right: 16px;
    }
}

.material-card.mc-active .mc-description {
    top: 33px;
    padding-top: 6.6em;
    opacity: 1;
    filter: alpha(opacity=100);
}

@media screen and (max-width: 767px) {
    .material-card.mc-active .mc-description {
        position: relative;
        top: auto;
        right: auto;
        left: auto;
        padding: 50px 30px 70px 30px;
        bottom: 0;
    }
}

.material-card.mc-active .mc-footer {
    overflow: visible;
    position: absolute;
    top: calc(100% - 16px);
    left: 16px;
    right: 0;
    height: 82px;
    padding-top: 15px;
    padding-left: 25px;
}

    .material-card.mc-active .mc-footer a {
        top: 0;
    }

    .material-card.mc-active .mc-footer h4 {
        top: -32px;
    }

.material-card.Red h2 {
    background-color: #dde6ed;
}

    .material-card.Red h2:after {
        border-top-color: #f44336;
        border-right-color: #f44336;
        border-bottom-color: transparent;
        border-left-color: transparent;
    }

 /*   .material-card.Red h2:before {
        border-top-color: transparent;
        border-right-color: #b71c1c;
        border-bottom-color: #b71c1c;
        border-left-color: transparent;
    }
*/
/*.material-card.Red.mc-active h2:before {
    border-top-color: transparent;
    border-right-color: #f44336;
    border-bottom-color: #f44336;
    border-left-color: transparent;
}
*/
.material-card.Red.mc-active h2:after {
    border-top-color: #b71c1c;
    border-right-color: #b71c1c;
    border-bottom-color: transparent;
    border-left-color: transparent;
}

.material-card.Red .mc-btn-action {
    background-color: #7e8299;
}

    .material-card.Red .mc-btn-action:hover {
        background-color: #7e8299;
    }

.material-card.Red .mc-footer h4 {
    color: #b71c1c;
}

.material-card.Red .mc-footer a {
    background-color: #b71c1c;
}

.material-card.Red.mc-active .mc-content {
    background-color: #FFF;
}

.material-card.Red.mc-active .mc-footer {
    background-color: #ffcdd2;
}

.material-card.Red.mc-active .mc-btn-action {
    border-color: #ffebee;
}

.material-card.Blue-Grey h2 {
    background-color: #607d8b;
}

    .material-card.Blue-Grey h2:after {
        border-top-color: #607d8b;
        border-right-color: #607d8b;
        border-bottom-color: transparent;
        border-left-color: transparent;
    }

    .material-card.Blue-Grey h2:before {
        border-top-color: transparent;
        border-right-color: #263238;
        border-bottom-color: #263238;
        border-left-color: transparent;
    }

.material-card.Blue-Grey.mc-active h2:before {
    border-top-color: transparent;
    border-right-color: #607d8b;
    border-bottom-color: #607d8b;
    border-left-color: transparent;
}

.material-card.Blue-Grey.mc-active h2:after {
    border-top-color: #263238;
    border-right-color: #263238;
    border-bottom-color: transparent;
    border-left-color: transparent;
}

.material-card.Blue-Grey .mc-btn-action {
    background-color: #607d8b;
}

    .material-card.Blue-Grey .mc-btn-action:hover {
        background-color: #263238;
    }

.material-card.Blue-Grey .mc-footer h4 {
    color: #263238;
}

.material-card.Blue-Grey .mc-footer a {
    background-color: #263238;
}

.material-card.Blue-Grey.mc-active .mc-content {
    background-color: #eceff1;
}

.material-card.Blue-Grey.mc-active .mc-footer {
    background-color: #cfd8dc;
}

.material-card.Blue-Grey.mc-active .mc-btn-action {
    border-color: #eceff1;
}

.material-card.Pink h2 {
    background-color: #e91e63;
}

    .material-card.Pink h2:after {
        border-top-color: #e91e63;
        border-right-color: #e91e63;
        border-bottom-color: transparent;
        border-left-color: transparent;
    }

    .material-card.Pink h2:before {
        border-top-color: transparent;
        border-right-color: #880e4f;
        border-bottom-color: #880e4f;
        border-left-color: transparent;
    }

.material-card.Pink.mc-active h2:before {
    border-top-color: transparent;
    border-right-color: #e91e63;
    border-bottom-color: #e91e63;
    border-left-color: transparent;
}

.material-card.Pink.mc-active h2:after {
    border-top-color: #880e4f;
    border-right-color: #880e4f;
    border-bottom-color: transparent;
    border-left-color: transparent;
}

.material-card.Pink .mc-btn-action {
    background-color: #e91e63;
}

    .material-card.Pink .mc-btn-action:hover {
        background-color: #880e4f;
    }

.material-card.Pink .mc-footer h4 {
    color: #880e4f;
}

.material-card.Pink .mc-footer a {
    background-color: #880e4f;
}

.material-card.Pink.mc-active .mc-content {
    background-color: #fce4ec;
}

.material-card.Pink.mc-active .mc-footer {
    background-color: #f8bbd0;
}

.material-card.Pink.mc-active .mc-btn-action {
    border-color: #fce4ec;
}

.material-card.Purple h2 {
    background-color: #9c27b0;
}

    .material-card.Purple h2:after {
        border-top-color: #9c27b0;
        border-right-color: #9c27b0;
        border-bottom-color: transparent;
        border-left-color: transparent;
    }

    .material-card.Purple h2:before {
        border-top-color: transparent;
        border-right-color: #4a148c;
        border-bottom-color: #4a148c;
        border-left-color: transparent;
    }

.material-card.Purple.mc-active h2:before {
    border-top-color: transparent;
    border-right-color: #9c27b0;
    border-bottom-color: #9c27b0;
    border-left-color: transparent;
}

.material-card.Purple.mc-active h2:after {
    border-top-color: #4a148c;
    border-right-color: #4a148c;
    border-bottom-color: transparent;
    border-left-color: transparent;
}

.material-card.Purple .mc-btn-action {
    background-color: #9c27b0;
}

    .material-card.Purple .mc-btn-action:hover {
        background-color: #4a148c;
    }

.material-card.Purple .mc-footer h4 {
    color: #4a148c;
}

.material-card.Purple .mc-footer a {
    background-color: #4a148c;
}

.material-card.Purple.mc-active .mc-content {
    background-color: #f3e5f5;
}

.material-card.Purple.mc-active .mc-footer {
    background-color: #e1bee7;
}

.material-card.Purple.mc-active .mc-btn-action {
    border-color: #f3e5f5;
}

.material-card.Deep-Purple h2 {
    background-color: #673ab7;
}

    .material-card.Deep-Purple h2:after {
        border-top-color: #673ab7;
        border-right-color: #673ab7;
        border-bottom-color: transparent;
        border-left-color: transparent;
    }

    .material-card.Deep-Purple h2:before {
        border-top-color: transparent;
        border-right-color: #311b92;
        border-bottom-color: #311b92;
        border-left-color: transparent;
    }

.material-card.Deep-Purple.mc-active h2:before {
    border-top-color: transparent;
    border-right-color: #673ab7;
    border-bottom-color: #673ab7;
    border-left-color: transparent;
}

.material-card.Deep-Purple.mc-active h2:after {
    border-top-color: #311b92;
    border-right-color: #311b92;
    border-bottom-color: transparent;
    border-left-color: transparent;
}

.material-card.Deep-Purple .mc-btn-action {
    background-color: #673ab7;
}

    .material-card.Deep-Purple .mc-btn-action:hover {
        background-color: #311b92;
    }

.material-card.Deep-Purple .mc-footer h4 {
    color: #311b92;
}

.material-card.Deep-Purple .mc-footer a {
    background-color: #311b92;
}

.material-card.Deep-Purple.mc-active .mc-content {
    background-color: #ede7f6;
}

.material-card.Deep-Purple.mc-active .mc-footer {
    background-color: #d1c4e9;
}

.material-card.Deep-Purple.mc-active .mc-btn-action {
    border-color: #ede7f6;
}

.material-card.Indigo h2 {
    background-color: #3f51b5;
}

    .material-card.Indigo h2:after {
        border-top-color: #3f51b5;
        border-right-color: #3f51b5;
        border-bottom-color: transparent;
        border-left-color: transparent;
    }

    .material-card.Indigo h2:before {
        border-top-color: transparent;
        border-right-color: #1a237e;
        border-bottom-color: #1a237e;
        border-left-color: transparent;
    }

.material-card.Indigo.mc-active h2:before {
    border-top-color: transparent;
    border-right-color: #3f51b5;
    border-bottom-color: #3f51b5;
    border-left-color: transparent;
}

.material-card.Indigo.mc-active h2:after {
    border-top-color: #1a237e;
    border-right-color: #1a237e;
    border-bottom-color: transparent;
    border-left-color: transparent;
}

.material-card.Indigo .mc-btn-action {
    background-color: #3f51b5;
}

    .material-card.Indigo .mc-btn-action:hover {
        background-color: #1a237e;
    }

.material-card.Indigo .mc-footer h4 {
    color: #1a237e;
}

.material-card.Indigo .mc-footer a {
    background-color: #1a237e;
}

.material-card.Indigo.mc-active .mc-content {
    background-color: #e8eaf6;
}

.material-card.Indigo.mc-active .mc-footer {
    background-color: #c5cae9;
}

.material-card.Indigo.mc-active .mc-btn-action {
    border-color: #e8eaf6;
}

.material-card.Blue h2 {
    background-color: #2196f3;
}

    .material-card.Blue h2:after {
        border-top-color: #2196f3;
        border-right-color: #2196f3;
        border-bottom-color: transparent;
        border-left-color: transparent;
    }

    .material-card.Blue h2:before {
        border-top-color: transparent;
        border-right-color: #0d47a1;
        border-bottom-color: #0d47a1;
        border-left-color: transparent;
    }

.material-card.Blue.mc-active h2:before {
    border-top-color: transparent;
    border-right-color: #2196f3;
    border-bottom-color: #2196f3;
    border-left-color: transparent;
}

.material-card.Blue.mc-active h2:after {
    border-top-color: #0d47a1;
    border-right-color: #0d47a1;
    border-bottom-color: transparent;
    border-left-color: transparent;
}

.material-card.Blue .mc-btn-action {
    background-color: #2196f3;
}

    .material-card.Blue .mc-btn-action:hover {
        background-color: #0d47a1;
    }

.material-card.Blue .mc-footer h4 {
    color: #0d47a1;
}

.material-card.Blue .mc-footer a {
    background-color: #0d47a1;
}

.material-card.Blue.mc-active .mc-content {
    background-color: #e3f2fd;
}

.material-card.Blue.mc-active .mc-footer {
    background-color: #bbdefb;
}

.material-card.Blue.mc-active .mc-btn-action {
    border-color: #e3f2fd;
}

.material-card.Light-Blue h2 {
    background-color: #03a9f4;
}

    .material-card.Light-Blue h2:after {
        border-top-color: #03a9f4;
        border-right-color: #03a9f4;
        border-bottom-color: transparent;
        border-left-color: transparent;
    }

    .material-card.Light-Blue h2:before {
        border-top-color: transparent;
        border-right-color: #01579b;
        border-bottom-color: #01579b;
        border-left-color: transparent;
    }

.material-card.Light-Blue.mc-active h2:before {
    border-top-color: transparent;
    border-right-color: #03a9f4;
    border-bottom-color: #03a9f4;
    border-left-color: transparent;
}

.material-card.Light-Blue.mc-active h2:after {
    border-top-color: #01579b;
    border-right-color: #01579b;
    border-bottom-color: transparent;
    border-left-color: transparent;
}

.material-card.Light-Blue .mc-btn-action {
    background-color: #03a9f4;
}

    .material-card.Light-Blue .mc-btn-action:hover {
        background-color: #01579b;
    }

.material-card.Light-Blue .mc-footer h4 {
    color: #01579b;
}

.material-card.Light-Blue .mc-footer a {
    background-color: #01579b;
}

.material-card.Light-Blue.mc-active .mc-content {
    background-color: #e1f5fe;
}

.material-card.Light-Blue.mc-active .mc-footer {
    background-color: #b3e5fc;
}

.material-card.Light-Blue.mc-active .mc-btn-action {
    border-color: #e1f5fe;
}

.material-card.Cyan h2 {
    background-color: #00bcd4;
}

    .material-card.Cyan h2:after {
        border-top-color: #00bcd4;
        border-right-color: #00bcd4;
        border-bottom-color: transparent;
        border-left-color: transparent;
    }

    .material-card.Cyan h2:before {
        border-top-color: transparent;
        border-right-color: #006064;
        border-bottom-color: #006064;
        border-left-color: transparent;
    }

.material-card.Cyan.mc-active h2:before {
    border-top-color: transparent;
    border-right-color: #00bcd4;
    border-bottom-color: #00bcd4;
    border-left-color: transparent;
}

.material-card.Cyan.mc-active h2:after {
    border-top-color: #006064;
    border-right-color: #006064;
    border-bottom-color: transparent;
    border-left-color: transparent;
}

.material-card.Cyan .mc-btn-action {
    background-color: #00bcd4;
}

    .material-card.Cyan .mc-btn-action:hover {
        background-color: #006064;
    }

.material-card.Cyan .mc-footer h4 {
    color: #006064;
}

.material-card.Cyan .mc-footer a {
    background-color: #006064;
}

.material-card.Cyan.mc-active .mc-content {
    background-color: #e0f7fa;
}

.material-card.Cyan.mc-active .mc-footer {
    background-color: #b2ebf2;
}

.material-card.Cyan.mc-active .mc-btn-action {
    border-color: #e0f7fa;
}

.material-card.Teal h2 {
    background-color: #009688;
}

    .material-card.Teal h2:after {
        border-top-color: #009688;
        border-right-color: #009688;
        border-bottom-color: transparent;
        border-left-color: transparent;
    }

    .material-card.Teal h2:before {
        border-top-color: transparent;
        border-right-color: #004d40;
        border-bottom-color: #004d40;
        border-left-color: transparent;
    }

.material-card.Teal.mc-active h2:before {
    border-top-color: transparent;
    border-right-color: #009688;
    border-bottom-color: #009688;
    border-left-color: transparent;
}

.material-card.Teal.mc-active h2:after {
    border-top-color: #004d40;
    border-right-color: #004d40;
    border-bottom-color: transparent;
    border-left-color: transparent;
}

.material-card.Teal .mc-btn-action {
    background-color: #009688;
}

    .material-card.Teal .mc-btn-action:hover {
        background-color: #004d40;
    }

.material-card.Teal .mc-footer h4 {
    color: #004d40;
}

.material-card.Teal .mc-footer a {
    background-color: #004d40;
}

.material-card.Teal.mc-active .mc-content {
    background-color: #e0f2f1;
}

.material-card.Teal.mc-active .mc-footer {
    background-color: #b2dfdb;
}

.material-card.Teal.mc-active .mc-btn-action {
    border-color: #e0f2f1;
}

.material-card.Green h2 {
    background-color: #4caf50;
}

    .material-card.Green h2:after {
        border-top-color: #4caf50;
        border-right-color: #4caf50;
        border-bottom-color: transparent;
        border-left-color: transparent;
    }

    .material-card.Green h2:before {
        border-top-color: transparent;
        border-right-color: #1b5e20;
        border-bottom-color: #1b5e20;
        border-left-color: transparent;
    }

.material-card.Green.mc-active h2:before {
    border-top-color: transparent;
    border-right-color: #4caf50;
    border-bottom-color: #4caf50;
    border-left-color: transparent;
}

.material-card.Green.mc-active h2:after {
    border-top-color: #1b5e20;
    border-right-color: #1b5e20;
    border-bottom-color: transparent;
    border-left-color: transparent;
}

.material-card.Green .mc-btn-action {
    background-color: #4caf50;
}

    .material-card.Green .mc-btn-action:hover {
        background-color: #1b5e20;
    }

.material-card.Green .mc-footer h4 {
    color: #1b5e20;
}

.material-card.Green .mc-footer a {
    background-color: #1b5e20;
}

.material-card.Green.mc-active .mc-content {
    background-color: #e8f5e9;
}

.material-card.Green.mc-active .mc-footer {
    background-color: #c8e6c9;
}

.material-card.Green.mc-active .mc-btn-action {
    border-color: #e8f5e9;
}

.material-card.Light-Green h2 {
    background-color: #8bc34a;
}

    .material-card.Light-Green h2:after {
        border-top-color: #8bc34a;
        border-right-color: #8bc34a;
        border-bottom-color: transparent;
        border-left-color: transparent;
    }

    .material-card.Light-Green h2:before {
        border-top-color: transparent;
        border-right-color: #33691e;
        border-bottom-color: #33691e;
        border-left-color: transparent;
    }

.material-card.Light-Green.mc-active h2:before {
    border-top-color: transparent;
    border-right-color: #8bc34a;
    border-bottom-color: #8bc34a;
    border-left-color: transparent;
}

.material-card.Light-Green.mc-active h2:after {
    border-top-color: #33691e;
    border-right-color: #33691e;
    border-bottom-color: transparent;
    border-left-color: transparent;
}

.material-card.Light-Green .mc-btn-action {
    background-color: #8bc34a;
}

    .material-card.Light-Green .mc-btn-action:hover {
        background-color: #33691e;
    }

.material-card.Light-Green .mc-footer h4 {
    color: #33691e;
}

.material-card.Light-Green .mc-footer a {
    background-color: #33691e;
}

.material-card.Light-Green.mc-active .mc-content {
    background-color: #f1f8e9;
}

.material-card.Light-Green.mc-active .mc-footer {
    background-color: #dcedc8;
}

.material-card.Light-Green.mc-active .mc-btn-action {
    border-color: #f1f8e9;
}

.material-card.Lime h2 {
    background-color: #cddc39;
}

    .material-card.Lime h2:after {
        border-top-color: #cddc39;
        border-right-color: #cddc39;
        border-bottom-color: transparent;
        border-left-color: transparent;
    }

    .material-card.Lime h2:before {
        border-top-color: transparent;
        border-right-color: #827717;
        border-bottom-color: #827717;
        border-left-color: transparent;
    }

.material-card.Lime.mc-active h2:before {
    border-top-color: transparent;
    border-right-color: #cddc39;
    border-bottom-color: #cddc39;
    border-left-color: transparent;
}

.material-card.Lime.mc-active h2:after {
    border-top-color: #827717;
    border-right-color: #827717;
    border-bottom-color: transparent;
    border-left-color: transparent;
}

.material-card.Lime .mc-btn-action {
    background-color: #cddc39;
}

    .material-card.Lime .mc-btn-action:hover {
        background-color: #827717;
    }

.material-card.Lime .mc-footer h4 {
    color: #827717;
}

.material-card.Lime .mc-footer a {
    background-color: #827717;
}

.material-card.Lime.mc-active .mc-content {
    background-color: #f9fbe7;
}

.material-card.Lime.mc-active .mc-footer {
    background-color: #f0f4c3;
}

.material-card.Lime.mc-active .mc-btn-action {
    border-color: #f9fbe7;
}

.material-card.Yellow h2 {
    background-color: #ffeb3b;
}

    .material-card.Yellow h2:after {
        border-top-color: #ffeb3b;
        border-right-color: #ffeb3b;
        border-bottom-color: transparent;
        border-left-color: transparent;
    }

    .material-card.Yellow h2:before {
        border-top-color: transparent;
        border-right-color: #f57f17;
        border-bottom-color: #f57f17;
        border-left-color: transparent;
    }

.material-card.Yellow.mc-active h2:before {
    border-top-color: transparent;
    border-right-color: #ffeb3b;
    border-bottom-color: #ffeb3b;
    border-left-color: transparent;
}

.material-card.Yellow.mc-active h2:after {
    border-top-color: #f57f17;
    border-right-color: #f57f17;
    border-bottom-color: transparent;
    border-left-color: transparent;
}

.material-card.Yellow .mc-btn-action {
    background-color: #ffeb3b;
}

    .material-card.Yellow .mc-btn-action:hover {
        background-color: #f57f17;
    }

.material-card.Yellow .mc-footer h4 {
    color: #f57f17;
}

.material-card.Yellow .mc-footer a {
    background-color: #f57f17;
}

.material-card.Yellow.mc-active .mc-content {
    background-color: #fffde7;
}

.material-card.Yellow.mc-active .mc-footer {
    background-color: #fff9c4;
}

.material-card.Yellow.mc-active .mc-btn-action {
    border-color: #fffde7;
}

.material-card.Amber h2 {
    background-color: #ffc107;
}

    .material-card.Amber h2:after {
        border-top-color: #ffc107;
        border-right-color: #ffc107;
        border-bottom-color: transparent;
        border-left-color: transparent;
    }

    .material-card.Amber h2:before {
        border-top-color: transparent;
        border-right-color: #ff6f00;
        border-bottom-color: #ff6f00;
        border-left-color: transparent;
    }

.material-card.Amber.mc-active h2:before {
    border-top-color: transparent;
    border-right-color: #ffc107;
    border-bottom-color: #ffc107;
    border-left-color: transparent;
}

.material-card.Amber.mc-active h2:after {
    border-top-color: #ff6f00;
    border-right-color: #ff6f00;
    border-bottom-color: transparent;
    border-left-color: transparent;
}

.material-card.Amber .mc-btn-action {
    background-color: #ffc107;
}

    .material-card.Amber .mc-btn-action:hover {
        background-color: #ff6f00;
    }

.material-card.Amber .mc-footer h4 {
    color: #ff6f00;
}

.material-card.Amber .mc-footer a {
    background-color: #ff6f00;
}

.material-card.Amber.mc-active .mc-content {
    background-color: #fff8e1;
}

.material-card.Amber.mc-active .mc-footer {
    background-color: #ffecb3;
}

.material-card.Amber.mc-active .mc-btn-action {
    border-color: #fff8e1;
}

.material-card.Orange h2 {
    background-color: #ff9800;
}

    .material-card.Orange h2:after {
        border-top-color: #ff9800;
        border-right-color: #ff9800;
        border-bottom-color: transparent;
        border-left-color: transparent;
    }

    .material-card.Orange h2:before {
        border-top-color: transparent;
        border-right-color: #e65100;
        border-bottom-color: #e65100;
        border-left-color: transparent;
    }

.material-card.Orange.mc-active h2:before {
    border-top-color: transparent;
    border-right-color: #ff9800;
    border-bottom-color: #ff9800;
    border-left-color: transparent;
}

.material-card.Orange.mc-active h2:after {
    border-top-color: #e65100;
    border-right-color: #e65100;
    border-bottom-color: transparent;
    border-left-color: transparent;
}

.material-card.Orange .mc-btn-action {
    background-color: #ff9800;
}

    .material-card.Orange .mc-btn-action:hover {
        background-color: #e65100;
    }

.material-card.Orange .mc-footer h4 {
    color: #e65100;
}

.material-card.Orange .mc-footer a {
    background-color: #e65100;
}

.material-card.Orange.mc-active .mc-content {
    background-color: #fff3e0;
}

.material-card.Orange.mc-active .mc-footer {
    background-color: #ffe0b2;
}

.material-card.Orange.mc-active .mc-btn-action {
    border-color: #fff3e0;
}

.material-card.Deep-Orange h2 {
    background-color: #ff5722;
}

    .material-card.Deep-Orange h2:after {
        border-top-color: #ff5722;
        border-right-color: #ff5722;
        border-bottom-color: transparent;
        border-left-color: transparent;
    }

    .material-card.Deep-Orange h2:before {
        border-top-color: transparent;
        border-right-color: #bf360c;
        border-bottom-color: #bf360c;
        border-left-color: transparent;
    }

.material-card.Deep-Orange.mc-active h2:before {
    border-top-color: transparent;
    border-right-color: #ff5722;
    border-bottom-color: #ff5722;
    border-left-color: transparent;
}

.material-card.Deep-Orange.mc-active h2:after {
    border-top-color: #bf360c;
    border-right-color: #bf360c;
    border-bottom-color: transparent;
    border-left-color: transparent;
}

.material-card.Deep-Orange .mc-btn-action {
    background-color: #ff5722;
}

    .material-card.Deep-Orange .mc-btn-action:hover {
        background-color: #bf360c;
    }

.material-card.Deep-Orange .mc-footer h4 {
    color: #bf360c;
}

.material-card.Deep-Orange .mc-footer a {
    background-color: #bf360c;
}

.material-card.Deep-Orange.mc-active .mc-content {
    background-color: #fbe9e7;
}

.material-card.Deep-Orange.mc-active .mc-footer {
    background-color: #ffccbc;
}

.material-card.Deep-Orange.mc-active .mc-btn-action {
    border-color: #fbe9e7;
}

.material-card.Brown h2 {
    background-color: #795548;
}

    .material-card.Brown h2:after {
        border-top-color: #795548;
        border-right-color: #795548;
        border-bottom-color: transparent;
        border-left-color: transparent;
    }

    .material-card.Brown h2:before {
        border-top-color: transparent;
        border-right-color: #3e2723;
        border-bottom-color: #3e2723;
        border-left-color: transparent;
    }

.material-card.Brown.mc-active h2:before {
    border-top-color: transparent;
    border-right-color: #795548;
    border-bottom-color: #795548;
    border-left-color: transparent;
}

.material-card.Brown.mc-active h2:after {
    border-top-color: #3e2723;
    border-right-color: #3e2723;
    border-bottom-color: transparent;
    border-left-color: transparent;
}

.material-card.Brown .mc-btn-action {
    background-color: #795548;
}

    .material-card.Brown .mc-btn-action:hover {
        background-color: #3e2723;
    }

.material-card.Brown .mc-footer h4 {
    color: #3e2723;
}

.material-card.Brown .mc-footer a {
    background-color: #3e2723;
}

.material-card.Brown.mc-active .mc-content {
    background-color: #efebe9;
}

.material-card.Brown.mc-active .mc-footer {
    background-color: #d7ccc8;
}

.material-card.Brown.mc-active .mc-btn-action {
    border-color: #efebe9;
}

.material-card.Grey h2 {
    background-color: #9e9e9e;
}

    .material-card.Grey h2:after {
        border-top-color: #9e9e9e;
        border-right-color: #9e9e9e;
        border-bottom-color: transparent;
        border-left-color: transparent;
    }

    .material-card.Grey h2:before {
        border-top-color: transparent;
        border-right-color: #212121;
        border-bottom-color: #212121;
        border-left-color: transparent;
    }

.material-card.Grey.mc-active h2:before {
    border-top-color: transparent;
    border-right-color: #9e9e9e;
    border-bottom-color: #9e9e9e;
    border-left-color: transparent;
}

.material-card.Grey.mc-active h2:after {
    border-top-color: #212121;
    border-right-color: #212121;
    border-bottom-color: transparent;
    border-left-color: transparent;
}

.material-card.Grey .mc-btn-action {
    background-color: #9e9e9e;
}

    .material-card.Grey .mc-btn-action:hover {
        background-color: #212121;
    }

.material-card.Grey .mc-footer h4 {
    color: #212121;
}

.material-card.Grey .mc-footer a {
    background-color: #212121;
}

.material-card.Grey.mc-active .mc-content {
    background-color: #fafafa;
}

.material-card.Grey.mc-active .mc-footer {
    background-color: #f5f5f5;
}

.material-card.Grey.mc-active .mc-btn-action {
    border-color: #fafafa;
}

.material-card.Blue-Grey h2 {
    background-color: #607d8b;
}

    .material-card.Blue-Grey h2:after {
        border-top-color: #607d8b;
        border-right-color: #607d8b;
        border-bottom-color: transparent;
        border-left-color: transparent;
    }

    .material-card.Blue-Grey h2:before {
        border-top-color: transparent;
        border-right-color: #263238;
        border-bottom-color: #263238;
        border-left-color: transparent;
    }

.material-card.Blue-Grey.mc-active h2:before {
    border-top-color: transparent;
    border-right-color: #607d8b;
    border-bottom-color: #607d8b;
    border-left-color: transparent;
}

.material-card.Blue-Grey.mc-active h2:after {
    border-top-color: #263238;
    border-right-color: #263238;
    border-bottom-color: transparent;
    border-left-color: transparent;
}

.material-card.Blue-Grey .mc-btn-action {
    background-color: #607d8b;
}

    .material-card.Blue-Grey .mc-btn-action:hover {
        background-color: #263238;
    }

.material-card.Blue-Grey .mc-footer h4 {
    color: #263238;
}

.material-card.Blue-Grey .mc-footer a {
    background-color: #263238;
}

.material-card.Blue-Grey.mc-active .mc-content {
    background-color: #eceff1;
}

.material-card.Blue-Grey.mc-active .mc-footer {
    background-color: #cfd8dc;
}

.material-card.Blue-Grey.mc-active .mc-btn-action {
    border-color: #eceff1;
}


.new_announcements {
    width: 100%;
    height: 235px;


}

    .new_announcements img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.announcements{
    height:300px;
}

.announcements  img{
    height: 100% !important;
}


.view_all_btn {
    text-align: end;
    display: flex;
    justify-content: end;
  
    margin-right: 5px;
}


.accoding-new-color-change {
    padding: 4px 15px;
    color: #009688;
    /* width: 400px; */
    height: 26px;
    /* border-radius: 4px; */
    margin-bottom: 6px;
    font-size: 16px;
    font-weight: 600;
}






@media only screen and (min-width: 1200px) and (max-width:1399px) {



    .note_cls {
        display: block;
        height: 720px;
        overflow-y: scroll;
        overflow-x: hidden;
    }




    .coment_boxxxz {
      
        padding-left: 18px;
        
    }

    .calender_title p {
        
        padding: 2px 0px 0px 0px;
    }
        .commentbox {
        width: 260px;
      
    }
    .icon_img_doc {
        width: 49px !important;
        height: 50px !important;
    }

    .pad_cele_tap {
        padding-top: 0px;
    }

   /* .Birthday_btn {
        padding: 7px 10px !important;
    }*/

    .cele_new_list {
        padding: 0px 10px;
        margin-top: 0px !important;
    }

    .wave_card, .wave_card_two, .wave_card_three {
        height: 150px !important;
    }


    .img_size {
        height: 100px;
    }

    .indez_for_date h2 {
        font-size: 16px;
    }

    .event_upcoming_evntz {
        padding: 0px 0px 0px;
    }

    .tab-content {
        padding: 0px 0px;
    }

    .k-calendar-monthview .k-calendar-td, .k-month-calendar .k-calendar-td {
        width: 30px !important;
        font-size: 12px !important;
        height: 30px !important;
        inline-size: var(--INTERNAL--kendo-calendar-cell-size, 30px) !important;
        block-size: var(--INTERNAL--kendo-calendar-cell-size, 30px) !important;
    }

    .k-calendar-view {
        min-height: 200px !important;
    }

    .present_box1 {
       /* height: 25px;*/
        padding: 5px 12px;
    }

    .calender_title p {
        color: #000000;
        font-size: 10px;
    }

    .border_calender {
        height: 50px !important;
    }

    .punching_details {
        display: none;
    }

    .new_common_up {
        height: 600px;
    }

    .new_announcements {
        height: 130px;
    }








    .material-card {
        padding-bottom: 155px;
    }


        .material-card.mc-active .mc-description {
            top: 25px;
            bottom: -67px;
        }

    .k-footer {
        display: none !important;
    }

    .personal-details-left h4 {
        font-size: 8px;
    }

    .announcements {
        height: 250px;
    }

    .event_upcoming_evntz h2 {
        font-size: 15px;
    }

    .group_img {
        height: 100%;
    }

    .carousel_se_02_carousel .owl-item {
        padding: 0px 10px;
    }

    .material-card h2 {
        padding: 0px 16px;
    }

    .k-calendar .k-header {
        background-color: #e5e5e5 !important;
        border-radius: 30px 30px 0px 0px;
    }
}

@media only screen and (min-width: 1400px) and (max-width:1699px) {
    .commentbox {
      
        width: 320px!important;
        
    }



    .nam-brith-empz {
        padding-top: 12px;
    }
    .employe_name_piczz {
        width: 60px !important;
        height: 60px !important;
    }
    .fc-unthemed .fc-event .fc-title {
        font-size: 9px !important;
        font-weight: 600 !important;
    }


    .nam-brithz {
        font-size: 12px!important;
    }

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

    .non_img_employee {
        width: 50px !important;
        height: 50px !important;
      
    }

    .responsive_clzz{
        padding-left:0px!important;
    }


    .icon_img_doc {
        width: 49px !important;
        height: 50px !important;
    }

    .pad_cele_tap {
        padding-top: 13px;
    }

    .Birthday_btn {
        padding: 7px 10px !important;
    }

    .cele_new_list {
        padding: 0px 10px;
        margin-top: 10px !important;
    }

    .wave_card, .wave_card_two, .wave_card_three {
        height: 150px !important;
    }


    .img_size {
        height: 100px;
    }

    .indez_for_date h2 {
        font-size: 16px;
    }

    .event_upcoming_evntz {
        padding: 10px 0px 0px;
    }

    .tab-content {
        padding: 1px 0px;
    }

    .k-calendar-monthview .k-calendar-td, .k-month-calendar .k-calendar-td {
        width: 30px !important;
        font-size: 12px !important;
        height: 30px !important;
        inline-size: var(--INTERNAL--kendo-calendar-cell-size, 30px) !important;
        block-size: var(--INTERNAL--kendo-calendar-cell-size, 30px) !important;
    }

    .k-calendar-view {
        min-height: 200px !important;
    }

    .present_box1 {
        height: 75px !important;
        padding: 4px 10px !important;
        font-size: 18px !important;
        padding: 14px 5px !important;
        font-weight: 800;
    }

    .calender_title p {
        color: #fff;
        font-size: 12px;
    }

    .border_calender {
        height: 50px !important;
    }

    .punching_details {
        display: none;
    }

    .new_common_up {
        height: 695px;
    }

    .new_announcements {
        height: 180px;
    }


    .material-card {
        padding-bottom: 190px;
    }


        .material-card.mc-active .mc-description {
            top: 25px;
            bottom: 0px;
        }

    .k-footer {
        display: none !important;
    }

    .personal-details-left h4 {
        font-size: 9px;
    }

    .announcements {
        height: 250px;
    }

    .event_upcoming_evntz h2 {
        font-size: 15px;
    }

    .group_img {
        height: 100%;
    }

    .carousel_se_02_carousel .owl-item {
        padding: 0px 10px;
    }

    .material-card h2 {
        padding: 0px 16px;
    }

    .k-calendar .k-header {
        background-color: #e5e5e5 !important;
        border-radius: 30px 30px 0px 0px;
    }
}

.neglects_details {
    font-size: 15px !important;
    color: #ef0707 !important;
    font-family: 'Poppins', sans-serif !important;
}




@-webkit-keyframes blink {
    0%, 100% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }
}

@-moz-keyframes blink {
    0%, 100% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }
}

@-o-keyframes blink {
    0%, 100% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }
}

@keyframes blink {
    0%, 100% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }
}

.hoverbell {
    -webkit-animation: blink 2s infinite;
    -moz-animation: blink 2s infinite;
    -o-animation: blink 2s infinite;
    animation: blink 2s infinite;
}

@media only screen and (min-width: 1200px) and (max-width:1399px) {



    .fc-unthemed .fc-toolbar {
        margin-bottom: 5px !important;
    }


        .fc-unthemed .fc-toolbar .fc-button {
            height: 20px !important;
        }


        .fc-unthemed .fc-toolbar h2 {
            font-size: 10px !important;
            margin-top: 0px !important;
        }

    .card.card-custom > .card-body {
        padding: 5px 30px 5px 20px !important;
        
    }
    .fc-unthemed th.fc-day-header {
        padding: 4px 5px !important;
    }

    .fc-scroller {
        height: 240px !important;
    }


    .fc-rigid {
        height: 40px !important;
    }

    .material-card h2{
        font-size:14px;
    }












    .personal-details-left .nav-link {
        font-size: 11px !important;
    }

    .text_sizee_chg {
        overflow-y: scroll;
        height: 50px;
    }
    .responsive_clzz {
        padding-top: 10px;
    }
    .fc-unthemed .fc-event .fc-title, .fc-unthemed .fc-event-dot .fc-title {
        font-size: 10px !important;
        font-weight: 600 !important;
    }

    .employee-profile-img {
       
        width: 35px !important;
        height: 35px !important;
     
    }
    .nam-brithz {
        font-size: 10px !important;
    }
    .employee_birth_date {
        font-size: 9px !important;
    }
    .datepicker .sevenday th, td {
        padding: 4px 0px !important;
    }
    .employe_name_piczz {
        width: 50px !important;
        height: 50px !important;
    }
        .fc-unthemed th.fc-day-header {

        font-size:10px !important;
    }
    .fc-unthemed .fc-toolbar {
        margin-bottom: 0px !important;
    }
    .note_cls .card-body {
        padding: 5px 20px 0px 20px !important;
    }
        .magin-tagg {
        margin: 15px 86px 55px 85px !important;
    }

    .ihits_logo {
        width: 150px;
        height: 150px;
        margin-left: 50px;
        /* margin-top: -10px; */
        position: absolute;
        top: -20px;
    }
}


/* abin calender */
.fc-unthemed .fc-event.fc-start .fc-content:before {
    background-color: transparent;
}

.fc-day-grid-event span {
    color: inherit !important;
}



.fc-unthemed .fc-event .fc-content, .fc-unthemed .fc-event-dot .fc-content {
    /* padding: 0.55rem 0.55rem 0.55rem 2rem; */
    padding: 0px 3px !important;
    text-align: center;
}

.fc-rigid {
    height: 50px !important;
}

tr:first-child > td > .fc-day-grid-event {
    margin-top: -6px !important;
}

.fc-scroller {
    height: 300px !important;
}

.fc-day-number {
    color: #5c5d5e;
    text-decoration: none;
    background-color: transparent;
    font-weight: 500;
}

.fc-unthemed .fc-event .fc-title, .fc-unthemed .fc-event-dot .fc-title {
    font-size: 0.9rem;
    font-weight: 600 !important;
}


    .fc-unthemed .fc-toolbar {
         margin-bottom: 1rem; 
    }

.card.card-custom > .card-body {
    padding: 18px 30px 6px 20px ;
    overflow: auto;
}

/*    .fc-event .fc-content {
        position: relative;
        z-index: 2;
        left: -14px;
    }*/


/* abin calender */


.description_anno {
    display: block;
    overflow-y: scroll;
    height: 250px;
    text-align: justify;
    padding: 10px;
    font-weight: 500;
    color: #201e1e;
}

.evnt_new_hedd {
    font-weight: bold;
    padding: 5px 10px 0px;
    font-size:20px;
    color:black;
}



/* for deepak system */
@media only screen and (min-width: 900px) and (max-width:1300px) {
    .note_cls {
        display: block;
        height:720px;
        overflow-y: scroll;
        overflow-x: hidden;
    }


    .driving-license-details span.date {
        font-size: 10px;
    }

}
@media only screen and (min-width: 1200px) and (max-width:1399px) {
    .magin-tagg {
        margin: 55px 86px 55px 85px !important;
    }

    .login-signin .mb-5 {
        margin-bottom: 0rem !important;
    }

    .logo-new-section {
        width: 300px;
        height: 130px;
        object-fit: cover;
    }


}


@media only screen and (min-width: 1400px) and (max-width:1699px) {
    .magin-tagg {
        margin: 65px 86px 55px 85px !important;
    }
}

.scroll_comments_po-up {
    display: block;
    height: 350px;
    overflow-y: scroll;
    overflow-x: hidden;
}

.View_popup_btn h6{
    font-size:12px;
}
.notchlabel {
    position: absolute;
    top: 7px;
    left: 70px;
}