/********** jQuery validation **************/
    @font-face {
        font-family: druk-web;
        src: url(../fonts/drukwide/DrukWide-Medium.woff2) format("woff2"), url(../fonts/drukwide/DrukWide-Medium.woff) format("woff");
        font-style: normal;
        font-weight: 400;
    }

    body {
        /*    background: url(../images/bg.jpg);*/
        margin-top: 0px;
        /* background-repeat: no-repeat;
        background-size: cover; */
        background: #f0f3fa;
        color:#333333;
    }

    label.error {
        position: absolute;
        bottom: -28px;
        color: #FF0000;
    }

    .form-group {
        position: relative;
    }

    label.searcherror {
        color: #FF0000;
    }

    ul.existing_details {
        list-style-type: none;
    }

    ul.recent_details {
        list-style-type: none;
    }

    .text-red {
        color: red;
    }

    span.field_icon.mdi.toggle-password,
    span.field_icon.mdi.toggleold-password {
        padding: 4%;
        border: .5px solid #68686C;
        border-left: none;
        color: #b3b2b2;
        font-size: 24px;
    }

    span.mdi.field_icon.toggleconf-password {
        padding: 4%;
        border: .5px solid #68686C;
        border-left: none;
        color: #b3b2b2;
        font-size: 24px;
    }

    strong.ffeb {
        color: #FFEB3B;
    }

    .navbar-menu-wrapperd-flex {
        font-weight: bold;
        font-size: 22px;
    }

    .card.card-design {
        box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.4);
        border-radius: 12px;
        padding-bottom: 15px;
    }

    div.card-header.mytodolist {
        background: #2aa5d7;
    }

    div#collapseTwo {
        overflow-y: scroll !important;
        max-height: 240px !important;
    }

    .input-group-append .input-group-text,
    .input-group-prepend .input-group-text {
        border-color: #686868;
    }

    .form-group .form-control {
        background: transparent;
        border-color: #686868;
    }

    span.mdi.field_icon.change-password-field {
        padding: 3%;
        border: 1px solid #68686C;
        border-left: none;
        color: #b3b2b2;
        font-size: 24px;
        padding: 10px 10px 10px 10px;
        height: 40px;
        border-right: .5px solid #dd9f38;
        border-top: .5px solid #dd9f38;
        border-bottom: .5px solid #dd9f38;
        font-size: 16px;
        background: #dd9f38;
        color: #fff;
    }

    div#logo-reward {
        color: #fff;
        position: absolute;
        top: 135px;
        right: 0px;
        /* height: 42px; */
        /* background: linear-gradient(45deg, rgba(0, 165, 215, 1) 0%, rgba(0, 125, 163, 1) 100%); */
        padding: 10px;
        /* border-radius: 50%; */
        /* -webkit-transform: skewY(-5deg); */
        -moz-transform: skewY(-5deg);
        -ms-transform: skewY(-5deg);
        -o-transform: skewY(-5deg);
        /* transform: skewY(-18deg); */
    }

    div#logo-reward a {
        color: #fff;
    }

    .color-red {
        font-size: 90% !important;
        color: #f90a0a !important;
        top: -.3em !important;
    }

    p.left-float {
        position: absolute;
        left: 35px;
        top: 16px;
        color: #fff;
        font-weight: 500;
        font-size: 1.16rem;
    }

    p.right-float {
        position: absolute;
        right: 35px;
        top: 16px;
        color: #fff;
        font-weight: 500;
        font-size: 1.16rem;
    }

    p.left-float-p {
        position: absolute;
        left: 35px;
        color: #000;
    }

    p.right-float-p {
        position: absolute;
        color: #000;
        right: 35px;
        bottom: 0;
    }

    div.feedback-card-header {
        background-color: #286090;
        border-bottom: 1px solid rgba(0, 0, 0, .125);
    }

    /* 
    label.users-select {
        position: absolute;
        bottom: 6px;
    } */

    select.feedback_user_id {
        /* position: absolute; */
        /* margin-left: 27%; */
    }

    /* .card {
            padding-bottom: 4px;
        } */

    textarea#feedback {
        resize: vertical;
    }

    p.feedback {
        white-space: pre-line;
        /* white-space: pre-wrap; */
    }

    .page-container-wrapper {
        /* min-height: 100vh; */
        padding-left: 0;
        padding-right: 0;
        /* padding-top: 30px; */
        /* margin-top: 70px; */
    }

    .copy-right {
        padding: 15px 15px;
        color: #333;
    }

    .Designed-developed-by {
        padding-top: 0px;
        color: #333;
    }

    .page-body-wrapper {
        /* min-height: 100vh; */
        padding-left: 0;
        padding-right: 0;
        padding-top: -16px;
        padding-top: 0;
    }

    .navbar .navbar-brand-wrapper .navbar-brand-inner-wrapper .navbar-brand img {
        width: auto;
        max-width: 100%;
        margin: auto;
        vertical-align: middle;
    }

    img.Calender-logo {
        width: 45px;
        height: 45px;
    }

    .page-footer-wrapper {
        margin: 0px;
        background: none;
        bottom: 0px;
        font-size: 13px;
        color: rgba(0, 165, 215, 1);
        padding: 0;
        border-top: 1px solid #e7e7e7;
        background: #f8f6f6;
        position: relative;
        width: 100%;
        z-index: 999;
    }

    img.invincix-logo {
        vertical-align: middle;
        height: 47px;
        padding-bottom: 15px;
        padding-left: 10px;
    }

    #hackathon-table table {
        border-collapse: collapse;
    }

    #hackathon-table table,
    #hackathon-table td,
    #hackathon-table th {
        border: 1px solid black;
        padding: 5px;
    }

    .dashboard-sum {
        background: #fff;
        padding: 5px;
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 15px;
    }

    .geninvinci {
        /* padding: 61px;  */
        /* display: flex; */
        /* flex-wrap: wrap; */
        margin-bottom: 20px;
        /* border: 2px solid rgb(238, 238, 238); */
        /* margin-top: 14px; */
        height: 154px;
        position: relative;
        background: #fff;
        border-radius: 5px;
        box-shadow: 0 6px 10px -4px rgba(0, 0, 0, .15);
        text-align: center;
        border-radius: 10px;
        background: linear-gradient(145deg, #cacaca, #f0f0f0);
        box-shadow: 9px 20px 20px #bebebe, -6px 20px 20px #ffffff;
    }

    .geninvinci h5 {
        color: #000 !important;
    }

    .geninvinci a {
        width: 100%;
        top: 50%;
        transform: translatey(-50%);
        position: relative;
        display: block;
    }

    .geninvinci-titel-img {
        height: 80px;
        width: 80px;
        margin: 0 auto;
        display: table;
        position: relative;
    }

    .geninvinci .card-title {
        margin-top: 15px;
    }

    img.geninvinci-ngo {
        width: 100%;
    }

    img.geninvinci-ngo-card {
        width: 70%;
    }

    .card .card-title {
        color: #000;
        margin-bottom: 1em;
        font-size: 1rem;
        border-bottom: 1px solid #f3f3f3;
        padding-bottom: 15px;
    }

    .margin-30 {
        margin: -30px;
    }

    .content-wrapper {
        background: none;
        padding: 0rem 0rem;
    }

    #social {
        margin: 0px -0 0 0px;
        height: auto;
    }

    .profile {
        margin: 0px;
        height: auto;
        width: 85%;
        border-radius: 0px 10px 10px 0px;
    }

    .profile-box {
        padding: 0px;
        margin-bottom: 30px;
        /*        border: 1px solid #d0d3d459;
            box-shadow: 0px 10px 15px 0px rgba(0, 0, 0, 0.07);*/
    }

    #social li {
        margin: 0px auto;
        margin-bottom: 5px;
        height: auto;
        font-size: 0;
        padding: 15px 0px;
    }

    #info {
        margin-top: 235px !important;
        width: 100%;
        /* border-top: 1px solid #ccc; */
        padding: 15px 0 0 0;
        margin: 0px auto;
    }

    /* ============================ */

    .form-group .form-control {
        background: transparent;
        border-color: #686868;
        border: 1px solid #e3e3e3;
        border-radius: 4px;
        color: #565656;
        padding: 8px 12px;
        height: 40px !important;
        background-color: #fff;
        box-shadow: none;
        outline: 0px;
    }
    table#assetTable thead td {
        color: #dd9f38 !important;
    }
    .assetdashboard .text-muted {
        color: #dd9f38 !important;
    }
    input.form-control {
        height: 40px !important;
    }

    .top-icon {
        color: #dd9f38;
        background-color: #fff;
        box-shadow: 0px 10px 15px 0px rgba(0, 0, 0, 0.07);
        width: 40px;
        height: 40px;
        line-height: 30px;
        border: 1px solid transparent;
        font-size: .8125rem;
        border-radius: 50%;
    }

    /*textarea {
            height: auto !important;
        }*/

    .top-icon:hover {
        color: #fff;
        text-decoration: none;
        background: #dd9f38;
    }

    .reward-point-box-container {
        position: relative;
        width: 100%;
    }

    .reward-point-box {
        position: absolute;
        left: 0;
        top: 36px;
        width: 100%;
        text-align: center;
    }

    .reward-point-box-text {
        font-size: 10px;
        line-height: 10px;
        margin: 0 auto;
        text-transform: uppercase;
        text-align: center;
        padding-right: 15px;
        padding-left: 16px;
    }

    .reward-point-box-point {
        font-weight: bold;
        font-size: 15px;
        padding-top: 5px;
    }

    /* ============================= */

    .table th,
    .table td {
        vertical-align: middle;
    }

    .table th,
    .table td {
        font-size: 14px;
        font-weight: 400 !important;
    }

    .dataTables_wrapper {
        padding: 30px;
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 6px 10px -4px rgba(0, 0, 0, .15);
    }

    .dataTables_wrapper .dataTable tbody tr td {
        border: 0px solid rgba(151, 151, 151, 0.18);
        color: #08113b;
        white-space: nowrap;
        padding: 15px 15px !important;
        vertical-align: middle;
        border-top: 1px solid #dee2e6;
    }

    /* .table td {
        padding: 12px 7px !important;
    } */

    .table td,
    .table th {
        padding: .75rem;
        border-top: 1px solid #dee2e6;
    }

    thead {
        vertical-align: bottom;
        border-bottom: 2px solid #dee2e6;
    }

    .dataTables_wrapper .dataTable thead th {
        border: 0px solid rgba(151, 151, 151, 0.18);
    }

    table {
        border-top: 1px solid whitesmoke;
    }

    .dataTables_wrapper .dataTable thead th {
        padding: 1rem 0.9375rem;
    }

    .table td,
    .table th {
        border-top: 1px solid #dee2e6;
    }

    .view-request {
        padding: 0;
        background: transparent;
        color: #000;
        border-radius: 25px;
        border: 0;
        box-shadow: none;
        margin-right: 15px !important;
    }

    .view-request:hover {
        color: #2196F3;
    }

    .view-request i {
        font-size: 16px;
    }

    /* +=============================== */

    .profile-catagory {
        display: block;
        font-size: 25px;
        color: #009ece;
    }

    .nav-tabs .nav-item .nav-link {
        font-size: 10px;
        letter-spacing: 1px;
        font-weight: 600;
    }

    #staticEmail {
        background: transparent;
        border-color: #686868;
        border: 1px solid #e3e3e3;
        border-radius: 4px;
        color: #565656;
        padding: 8px 12px;
        height: 40px;
        background-color: #fff;
        box-shadow: none;
        outline: 0px;
    }

    .dataTables_wrapper .dataTable thead th {
        padding: 15px 15px;
        font-weight: 600 !important;
        font-size: 14px;
        color: #dd9f38;
    }

    .dataTables_wrapper .dataTable .btn {
        padding: 0rem 0rem;
    }

    td a {
        font-weight: bold;
        color: #444;
    }

    .chosen-container-multi .chosen-choices {
        height: 40px !important;
        background: transparent;
        border-color: #686868;
        border: 1px solid #e3e3e3;
        border-radius: 4px;
        color: #565656;
        padding: 6px 12px;
        height: 40px;
        background-color: #fff;
        box-shadow: none;
        outline: 0px;
    }

    .btn-add-skill {
        width: 100%;
        text-align: left;
        background: #f4f3ef;
        margin-top: 0;
    }

    button.btn.btn-add-skill i {
        font-size: 14px;
        margin-left: 15px;
    }

    /* ===================================== */

    .login-img img {
        width: 100%;
    }

    .geninvincy-box-service {
        position: relative;
        text-align: center;
        font-weight: 400;
        color: #fff;
        font-size: 20px;
        line-height: 1.8em;
        background-color: #c01d2e;
        /* background-image: url(data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%231aa1d4' fill-opacity='0.17' fill-rule='evenodd'%3E%3Cpath d='M0 40L40 0H20L0 20M40 40V20L20 40'/%3E%3C/g%3E%3C/svg%3E); */
        background-size: cover;
        padding-top: 20px !important;
        padding-right: 20px !important;
        padding-bottom: 20px !important;
        padding-left: 20px !important;
        margin-bottom: 15px;
        min-height: 235px;
    }

    .geninvincy-overlay {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100%;
        width: 100%;
        opacity: 0;
        transition: .3s ease;
        background-color: #c01d2ee0;
    }

    .geninvincy-box-service:hover .geninvincy-overlay {
        opacity: 1;
    }

    .geninvincy-box-left h3 {
        font-weight: 600;
        font-size: 1.5rem;
        line-height: 1.5em;
        white-space: normal;
        padding-bottom: 15px;
        padding-top: 20px;
        font-family: 'Playfair Display', serif;
    }

    .overlay-text {
        font-size: 14px;
        font-weight: 500;
        line-height: 1.8em;
        margin-top: 0.2em;
        margin-left: 1.2em;
        color: #ffffff;
        text-align: left;
        font-family: "Open Sans", Arial, sans-serif;
        list-style: square;
        padding: 10px;
    }

    .progress-svg {
        height: 150px;
        width: 150px;
        padding: 15px;
    }

    .input-group-append,
    .input-group-prepend {
        height: 40px;
    }

    .input-group-append .input-group-text,
    .input-group-prepend .input-group-text {
        border-color: #e3e3e3;
    }

    span.field_icon.mdi.toggle-password,
    span.field_icon.mdi.toggleold-password {
        padding: 10px 10px 10px 10px;
        height: 40px;
        border-right: .5px solid #dd9f38;
        border-top: .5px solid #dd9f38;
        border-bottom: .5px solid #dd9f38;
        font-size: 16px;
        background: #dd9f38;
        color: #fff;
    }

    .input-group-text {
        background-color: #dd9f38 !important;
        /* border: 1px solid #c01d2e; */
    }

    .input-group-append .input-group-text,
    .input-group-prepend .input-group-text {
        border-color: #009dcd;
    }

    .red-border {
        border: 1px solid red !important;
    }

    .login-btn-img img {
        width: 60px;
    }

    button#btnAdd,
    button#btnDelete,
    button#btnDownload {
        float: none !important;
    }

    .form-box-container {
        height: 100vh;
        position: relative;
    }

    .form-box {
        top: 50%;
        transform: translatey(-50%);
        position: relative;
        background: #ffffff;
        padding: 30px;
        border-radius: 10px;
        box-shadow: 0px 0px 20px 0 hsla(0, 0%, 58.8%, .44);
    }

    .form-box-container {
        height: 100vh;
        position: relative;
        padding: 10px 164px;
    }

    .login-page-body-wrapper.login-full-page-wrapper {
        overflow: hidden;
        height: 100vh;
    }

    .login-img {
        /*top: 50%;
            transform: translatey(-50%);
            position: relative;*/
        width: 100%;
        height: 100%;
    }

    .login-img {
        background: url(../../public/images/PastedGraphic-4.jpg);
    }

    .logo-img img {
        width: 100%;
    }

    .login-section {
        /*background: url(../images/bg.jpg);*/
        background-size: cover;
    }

    .btn-login-page {
        color: #fff;
        background-color: #009dcd;
        border-color: #009dcd;
        line-height: 0.5 !important;
        font-weight: 700 !important;
        padding: 0px 36px !important;
        height: 40px !important;
    }

    .btn-login-page:hover {
        color: #e7f7fc;
    }

    .logo-img {
        padding-bottom: 30px;
    }

    .animate-right {
        position: relative;
        animation: animateright 0.4s
    }

    @keyframes animateright {
        from {
            right: -300px;
            opacity: 0
        }

        to {
            right: 0;
            opacity: 1
        }
    }

    .right-card,
    .right-card-2 {
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    }

    .right-sidebar {
        height: 100vh;
        width: 30%;
        background-color: #fff;
        position: fixed !important;
        z-index: 1111;
        overflow: auto;
        top: 0;
        -webkit-transition: all .3s ease-in-out;
        transition: all .3s ease-in-out;
        right: 0;
    }

    .right-bar-block .w3-bar-item {
        width: 100%;
        display: block;
        padding: 8px 16px;
        text-align: left;
        border: none;
        white-space: normal;
        float: none;
        outline: 0;
    }

    .right-large {
        font-size: 18px !important;
    }

    .right-btn,
    .right-button {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    .right-btn,
    .right-button {
        border: none;
        display: inline-block;
        padding: 8px 16px;
        vertical-align: middle;
        overflow: hidden;
        text-decoration: none;
        color: inherit;
        background-color: inherit;
        text-align: center;
        cursor: pointer;
        white-space: nowrap;
    }

    .right-bar-block .right-bar-item {
        position: fixed;
        right: 30%;
        display: block;
        padding: 8px 16px;
        text-align: left;
        border: none;
        white-space: normal;
        float: none;
        outline: 0;
        z-index: 55;
        background: #c32838;
        color: #fff;
    }

    .right-btn,
    .right-button {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    .right-btn,
    .right-button {
        border: none;
        display: inline-block;
        padding: 8px 16px;
        vertical-align: middle;
        overflow: hidden;
        text-decoration: none;
        color: inherit;
        background-color: inherit;
        text-align: center;
        cursor: pointer;
        white-space: nowrap;
    }

    .right-button:hover {
        color: #fff !important;
        background-color: #ef4136 !important;
    }

    .wrap {
        display: flex;
        background: white;
        padding: 1rem 1rem 1rem 1rem;
        border-radius: 0.5rem;
        box-shadow: 0 1px 12px 0 rgba(172, 172, 172, 0.23);
        margin-bottom: 1rem;
    }

    /* .wrap:hover {
            background: linear-gradient(135deg, #6394ff 0%, #0a193b 100%);
            color: white;
        } */

    .ico-wrap {
        margin: auto;
        border-right: 1px solid #e1e1e1;
        margin-right: 15px;
        width: 20%;
    }

    .display-6 {
        margin-bottom: 0;
    }

    .mbr-iconfont {
        font-size: 4.5rem !important;
        color: #313131;
        margin: 1rem;
        padding-right: 1rem;
    }

    .vcenter {
        margin: auto;
        width: 80%;
    }

    .mbr-section-title3 {
        text-align: left;
    }

    .sidebar-box {
        padding: 15px;
    }

    .add-todoList {
        background: rgb(255, 255, 255);
        color: #2ba5d7 !important;
        border-radius: 25px;
        padding: 4px 15px;
        float: right;
    }

    .sidebar-title {
        padding-top: 19px;
        padding-left: 20px;
        position: relative;
    }

    .sidebar-title.m-0:before {
        position: absolute;
        content: "";
        background: #009bca;
        height: 4px;
        left: 0;
        bottom: 7px;
        width: 15px;
    }

    .add-todoList button {
        background: #009bcb;
    }

    .add-todoList i {
        color: #ffffff;
    }

    .display-tablecell {
        display: table-cell;
    }

    .task-add {
        border: 1px solid #b5b5b5;
        border-radius: 25px;
        width: 20px;
        height: 20px;
        font-size: 10px;
    }

    .task-add i {
        font-size: 17px;
        cursor: pointer;
    }

    #loaderImage {
        background-size: 50px;
    }

    #overlayDiv {
        background-color: rgba(255, 255, 255, 0.6) !important;
    }

    ::-webkit-scrollbar {
        width: 5px;
    }

    /* Track */

    ::-webkit-scrollbar-track {
        background: #f1f1f1;
    }

    /* Handle */

    ::-webkit-scrollbar-thumb {
        background: #888;
    }

    /* Handle on hover */

    ::-webkit-scrollbar-thumb:hover {
        background: #555;
    }

    #profileDropdown img {
        width: 30px;
        height: 30px;
        border-radius: 50%;
    }

    nav {
        width: 100%;
    }

    .navbar {
        box-shadow: none;
    }

    .topheader {
        box-shadow: -2px 1px 3px 0px rgba(0, 0, 0, 0.07);
    }

    .right-menu li img {
        height: 35px;
        width: 35px;
    }

    .date-time {
        margin-top: 10px;
        margin-right: 22px;
        color: #333;
    }

    span.digital-clock {
        color: #000 !important;
        font-weight: bold;
    }

    .dataTables_wrapper .dataTable th,
    td {
        white-space: normal !important;
    }

    .dataTables_wrapper .dataTable thead .sorting:before,
    .dataTables_wrapper .dataTable thead .sorting_asc:before,
    .dataTables_wrapper .dataTable thead .sorting_desc:before,
    .dataTables_wrapper .dataTable thead .sorting_asc_disabled:before,
    .dataTables_wrapper .dataTable thead .sorting_desc_disabled:before {
        bottom: .6rem;
        ;
    }

    .dataTables_wrapper .dataTable thead .sorting:after,
    .dataTables_wrapper .dataTable thead .sorting_asc:after,
    .dataTables_wrapper .dataTable thead .sorting_desc:after,
    .dataTables_wrapper .dataTable thead .sorting_asc_disabled:after,
    .dataTables_wrapper .dataTable thead .sorting_desc_disabled:after {
        bottom: .6rem;
        ;
    }

    table.dataTable {
        clear: both;
        margin-top: 6px !important;
        margin-bottom: 6px !important;
        max-width: none !important;
        border-collapse: separate !important;
    }

    select.custom-select {
        background: #fff !important;
    }

    div#filladdress-input {
        margin-bottom: 1.2%;
    }

    /* ===================== */

    .password-box-container {
        position: relative;
        height: calc(100vh - 118px);
    }

    #overlaySidebar {
        position: fixed;
    }

    #overlaySidebar {
        background-color: rgba(255, 255, 255, 0.4);
    }

    #overlaySidebar {
        background-color: rgb(255, 255, 255) !important;
    }

    .password-section {
        /*background: url(../images/bg.jpg);*/
        background-size: cover;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

    .pbw-b {
        padding-bottom: 50px;
    }

    .dactivate-user-box {
        position: relative;
        background: #ffffff;
        padding: 30px;
        border-radius: 10px;
        box-shadow: 0px 0px 20px 0 hsla(0, 0%, 58.8%, .44);
    }

    /*=================================================*/
    .bg-gradient-red {
        background: linear-gradient(87deg, #f5365c 0, #f56036 100%) !important;
    }

    .bg-gradient-orange {
        background: linear-gradient(87deg, #fb6340 0, #fbb140 100%) !important;
    }

    .bg-gradient-green {
        background: linear-gradient(87deg, #2dce89 0, #2dcecc 100%) !important;
    }

    .bg-gradient-info {
        background: linear-gradient(87deg, #11cdef 0, #1171ef 100%) !important;
    }

    .icon-shape {
        display: inline-flex;
        padding: 12px;
        text-align: center;
        border-radius: 50%;
        align-items: center;
        justify-content: center;
    }

    .icon {
        width: 3rem;
        height: 3rem;

    }

    .icon-shape i,
    .icon-shape svg {
        font-size: 1.25rem;
    }

    .leave-icon {
        width: 80px;
        height: 80px;
        padding: 0px;
    }

    .leave-icon img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        margin-left: 5em;
    }

    .assets-card-stats h5 {
        font-size: 14px !important;
        letter-spacing: 1px;
        border-bottom: 0 !important;
        padding-bottom: 5px !important;
    }

    .assets-card-stats.leave-title h2 {
        font-size: 12px !important;
        letter-spacing: 1px;
        border-bottom: 0 !important;
        padding-bottom: 5px !important;
    }

    .font-weight-bold {
        font-weight: 600 !important;
        font-size: 20px !important;
    }

    .mb-0,
    .my-0 {
        margin-bottom: 0 !important;
    }

    .assetdashboard {
        margin: 0px 0px 30px 0px;
    }

    .card.assets-card-stats {
        padding-bottom: 0 !important;
        border-radius: 5px;
        box-shadow: 0 6px 10px -4px rgba(0, 0, 0, .15);
    }

    .grid-margin h2 {
        text-transform: uppercase !important;
        font-family: druk-web;
        font-size: 20px;
        text-shadow: 1px 2px rgba(0, 0, 0, 0.17);
    }

    .center {
        text-align: center;
    }

    @media screen and (max-width: 768px) {
        .form-box-container {
            height: auto;
            padding: 15px;
        }

        .form-box {
            top: 0;
            transform: translatey(0%);
        }

        .login-img {
            top: 0;
            transform: translatey(0%);
            margin-bottom: 150px;
        }

        .copy-right {
            display: none !important;
        }

        .text-uat {
            display: none;
        }
    }

    /*==================================*/

    #balloon-container {
        z-index: 9990 !important;
    }

    .single-select a.chosen-single {
        background: #fff !important;
        border-color: #686868 !important;
        border: 1px solid #e3e3e3 !important;
        border-radius: 4px;
        color: #565656 !important;
        padding: 8px 12px;
        height: 40px !important;
        box-shadow: none;
        outline: 0px;
    }

    .single-select .chosen-container-active.chosen-with-drop .chosen-single div b {
        background-position: -18px 8px !important;
    }

    .single-select .chosen-container-single .chosen-single div b {
        background-position: 0px 8px !important;
    }

    .leavedashboard {
        margin: 0px 0px 30px 0px;
    }

    #interviewer_chosen {
        width: 100% !important;
    }

    #employee-list {
        margin-left: -10px;
    }


    .card {
        word-wrap: break-word;
        background-clip: border-box;
        background-color: #fff;
        border: 0;
        border-radius: 13px;
        box-shadow: 0 0.15rem 1.75rem 0 rgb(196 205 224 / 20%);
        display: flex;
        flex-direction: column;
        margin-bottom: 1.5rem;
        min-width: 0;
        position: relative;
        width: 100%;
    }

    .card-header:first-child {
        border-radius: 2px 2px 0 0;
    }

    .card-header:first-child {
        border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0;
    }

    .border-bottom-0 {
        border-bottom: 0 !important;
    }

    .card-header,
    .card-header .card-title {
        margin-bottom: 0;
    }

    .card-header {
        align-items: center;
        background: transparent;
        border-bottom: 1px solid #e9ebfa;
        display: flex;
        padding: 0.5rem 1.5rem 0.5rem;
    }

    .card-header,
    .card-header .card-title {
        margin-bottom: 0;
    }

    .card-title {
        font-size: 1.1rem;
        font-weight: 500;
        letter-spacing: .01rem;
        line-height: 1.2;
        margin-bottom: 1.5rem;
        text-transform: capitalize;
        border-bottom: 0px solid #f3f3f3 !important;
    }

    table {
        border-top: 0px solid whitesmoke !important;
    }

    .card .card-header .card-title:before {
        background: #d19a39;
        content: "";
        height: 25px;
        left: 0;
        padding: 2px;
        position: absolute;
    }

    .card-options {
        align-self: center;
        color: #9aa0ac;
        display: flex;
        margin-left: auto;
        margin-right: -0.5rem;
        order: 100;
    }

    .btn-outline-light {
        background-color: transparent;
        background-image: none;
        border-color: #eceef7;
        box-shadow: 0 0 10px -5px #e8ebf2;
        color: #263871;
    }

    .card-body {
        flex: 1 1 auto;
        margin: 0;
        padding: 1.5rem;
        position: relative;
    }

    .border-bottom-0 {
        border-bottom: 0 !important;
    }

    .table td {
        border-top: 0;
        padding: 0.75rem;
        vertical-align: middle;
    }

    .form-check-input {
        position: relative;
    }

    .checklist-item {
        position: relative;
        padding-left: 15px;
    }

    .checklist-item:before {
        position: absolute;
        top: 0;
        left: 0;
        width: 3px;
        height: 100%;
        content: '';
        border-radius: 8px;
    }

    .checklist-item-cool:before {
        background-color: #5e72e4;
    }

    .checklist-item-danger:before {
        background-color: #fb6340;
    }

    .checklist-item-success:before {
        background-color: #2dce89;
    }

    .checklist-item-inprogress:before {
        background-color: #ff9800;
    }

    .w-8 {
        width: 3rem !important;
    }

    .h-8 {
        height: 3rem !important;
    }

    .comming_holidays.calendar-icon .date_time {
        display: block;
        height: 53px;
        width: 53px;
    }

    .table td img {
        border-radius: 25%;
    }

    .calendar-icon .date_time {
        border-radius: 8px;
        display: block;
        font-size: 13px;
        height: 45px;
        text-align: center;
        width: 45px;
    }

    .calendar-icon span {
        display: block;
        font-weight: 500;
    }

    .bg-success-transparent {
        background: rgba(13, 205, 148, .1);
        color: #0dcd94;
    }

    .comming_holidays.calendar-icon .date {
        line-height: 1.9;
    }

    .calendar-icon .date {
        line-height: 2.3;
    }

    .calendar-icon span {
        display: block;
        font-weight: 500;
    }

    .fs-20 {
        font-size: 20px;
    }

    .calendar-icon .month {
        line-height: 0;
    }

    .calendar-icon span {
        display: block;
        font-weight: 500;
    }

    .fs-13 {
        font-size: 13px;
    }

    .fs-13 {
        font-size: 13px;
    }

    .bg-purple-transparent {
        background: rgba(170, 76, 242, .1);
        color: #aa4cf2;
    }

    .bg-orange-transparent {
        background: rgba(243, 73, 50, .1);
        color: #f34932;
    }

    .bg-warning-transparent {
        background: rgba(251, 197, 24, .1);
        color: #fbc518;
    }

    .bg-pink-transparent {
        background: rgba(239, 78, 184, .1);
        color: #ef4eb8;
    }

    input[type="radio"],
    input[type="checkbox"] {
        box-sizing: border-box;
        padding: 0;
        height: 18px !important;
        width: 18px;
        border: 1px solid #fff !IMPORTANT;
    }

    .table td {
        padding: 0.75rem 0rem;
        padding: 8px 10px !important;
    }

    td p {
        margin-bottom: 0;
    }


    .profile_box_img img {
        height: 132px;
        width: 132px;
        margin: 0 auto;
        border-radius: 50%;
        margin-bottom: -28px;
        margin-top: 20px;
        margin-left: 20px;
    }

    .profile_box {
        padding: 0px;
    }


    .profile_box_img {
        background: url(../../public/images/profile_bg.jpg);
        background-size: cover;
        margin-bottom: 50px;
        border-radius: 13px 13px 0px 0px;
    }

    .profile_box_content {
        padding: 0px 20px;
    }

    .bg-orange-transparent {
        background: rgba(243, 73, 50, .1);
        color: #f34932;
    }

    .table_img,
    .table_img img {
        vertical-align: middle;
    }

    .table_img {
        align-items: center;
        font-size: 1.25rem;
        height: 50px;
        justify-content: center;
        padding: 10px;
        width: 50px;
    }

    .brround {
        border-radius: 50%;
    }

    .table_img img {
        width: 100% !important;
        height: auto !important;
    }

    .h_350 {
        height: 350px;
    }

    .custom_bg_dark {
        background: #18191b !important;
    }

    .sidebar .nav:not(.sub-menu)>.nav-item {
        border-bottom: 0px solid #f3f3f3;
        margin-top: 0;
    }

    .sidebar .nav .nav-item .nav-link {
        color: #aab3cc;
        cursor: pointer !important;
    }

    main {
        margin-left: 0px;
        width: 100%;
    }

    @media screen and (min-width: 768px) {
        main {
            margin-left: 257px;
        }
    }

    /* @media screen and (min-width: 768px) {
        .brand-logo {
            display: none;
        }
    }

    .brand-logo {
        display: none;
    } */

    @media screen and (min-width: 768px) {
        .brand-logo {
            display: block;
        }
    }

    @media screen and (min-width: 768px) {
        .sticky_header {
            margin-left: 257px;
        }
    }

    #sidebar.active {
        width: 257px;
    }

    @media screen and (min-width: 768px) {
        #sidebar.active {
            width: 70px;
        }
    }

    main.active {
        width: 100% !important;
        margin-left: 0px !IMPORTANT;
    }

    @media screen and (min-width: 769px) {
        main.active {

            margin-left: 70px !IMPORTANT;
        }
    }

    .sticky_header {
        left: 257px;
    }

    main.active .sticky_header {
        padding-left: 0px;
    }

    @media screen and (min-width: 768px) {
        main.active .sticky_header {
            padding-left: 70px;
        }
    }

    .brand-logo img {
        width: 30%;
    height: 65px;
    }

    .chart--container {
        width: 100%;
        height: 100%;
    }

    .zc-ref {
        display: none;
    }

    #sidebar.active .date_select {
        padding: 5px !important;
    }

    #sidebar.active .date_select .brand-logo {
        margin-right: 0px !important;
    }

    #sidebar.active .nav-item a span {
        display: unset;
    }

    @media screen and (min-width: 768px) {
        #sidebar.active .nav-item a span {
            display: none;
        }
    }



    /* +++++++++++++++++++++++++++++ */
    /* Color Swicher CSS */

    .bg_dark {
        background: #0a080e;
        color: #fff;
    }

    .changer {
        z-index: 99999;
        position: fixed;
        right: -270px;
        font-weight: 400 !important;
        height: 100%;
    }


    .changer .setting-icon {
        cursor: pointer;
        text-align: center;
        padding: 2px;
        float: left;
        height: 40px;
        line-height: 38px;
        width: 40px;
        border-radius: 5px 0 0 5px !important;
        top: 17rem;
        position: relative;
    }

    @media (max-width: 992px) {
        .changer .form_holder {
            height: 100vh;
        }
    }

    @media (min-width: 992px) {
        .changer .form_holder {
            height: 100vh;
        }
    }



    @import url('https://fonts.googleapis.com/css2?family=Kalam&display=swap');

    /* Some positioning and ratios */
    .sticky-container {
        max-width: 100%;
        position: relative;
    }

    .sticky-outer {
        display: flex;
        padding-top: 92.5925926%;
        position: relative;

        width: 100%;
    }

    .sticky {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

    /* Shadow behind the sticky note */
    .sticky:before {
        box-shadow: -2px 2px 15px 0 rgba(0, 0, 0, 0.5);
        background-color: rgba(0, 0, 0, 0.25);
        content: '';
        width: 90%;
        left: 5px;
        height: 75%;
        position: absolute;
        top: 30%;
    }

    /* The sticky note itself */
    .sticky-content {
        background: linear-gradient(180deg,
                rgba(187, 235, 255, 1) 0%,
                rgba(187, 235, 255, 1) 12%,
                rgba(170, 220, 241, 1) 75%,
                rgba(195, 229, 244, 1) 100%);
        width: 100%;
        height: 100%;

        display: flex;
        justify-content: center;
        align-items: center;
        font-family: 'Kalam', cursive;
        font-size: 1.25rem;

        clip-path: url(#stickyClip);
    }


    /* Position the sticky nicely, so it looks better */

    .container-inner {
        width: 100%;
    }



    @media screen and (min-width: 1024px) {
        .sticky-content {
            font-size: 1.875rem;
        }
    }


    .changer .form_holder {
        background: #fff;
        border-radius: 0;
        cursor: pointer;
        float: right;
        font-size: 12px;
        padding: 0 7px;
        width: 270px;
        box-shadow: 0px 8px 14.72px 1.28px rgba(130, 130, 134, 0.2);
        border-left: 1px solid #e9ebfa;
    }

    .changer .form_holder p {
        font-size: 12px;
    }

    .check_in a {
        background: #d19a39;
        padding: 9px 15px;
        text-align: center;
        font-size: 16px;
        color: #fff !important;
    }

    .check_in:hover a {
        color: #fff;
    }

    .check_out a {
        background: #f7921a !important;
        border-color: #f7921a !important;
    }

    .holiday_button button {
        background: #ffffff;
        margin-left: 1rem;
        padding: 6px 8px;
        text-align: center;
        border: 1px solid #d8dbee !important;
    }

    .h-3 {
        height: 0.75em;
    }

    .w-3 {
        width: 0.75em;
    }

    .todo_box {
        position: relative;
        height: 184px;
        width: 100%;
        padding: 16px;
        border-radius: 10px;
        margin-bottom: 0px;
        padding-top: 0px;
    }

    .list__items {
        margin: 20px 0;
        height: 90%;
        width: 100%;
        margin-top: 0px;

    }

    .list__items::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        border-radius: 10px;
        background-color: #F5F5F5;
    }

    .list__items::-webkit-scrollbar {
        width: 5px;
        background-color: #F5F5F5;
    }

    .list__items::-webkit-scrollbar-thumb {
        border-radius: 50px;
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
        background-color: #B6B6B6;
    }

    .list__items ul li {
        position: relative;
        margin: 10px 0;
        margin-right: 15px;
    }

    .list__details {
        display: flex;
        align-items: center;
        cursor: pointer;
    }

    .list__items ul li label {
        display: flex;
        align-items: center;
        justify-content: space-between;
        line-height: 1;
    }

    .list__items ul li i {
        position: absolute;
        right: 0;
        top: 0;
        color: #FF4016;
        opacity: 0;
        transition: 0.5s;
    }

    .list__items UL {
        list-style: none;
        padding: 0;
    }

    .check__box {
        position: relative;
        height: 15px;
        width: 15px;
        margin-right: 10px;
        border-radius: 50%;
        border: 2px solid #AFA8A8;

    }

    .check__box_checked {
        position: relative;
        height: 15px;
        width: 15px;
        background: #4d83ff;
        margin-right: 10px;
        border-radius: 50%;
        border: 2px solid #AFA8A8;
    }

    .cat__type {
        display: block;
        height: 15px;
        width: 15px;
        margin-left: 10px;
        border-radius: 5px;
        opacity: 1;
        cursor: pointer;
        transition: 0.5s;
    }

    input[type="checkbox"]:checked+label .check__box {
        border: 2px solid #3E53F3;
    }

    input[type="checkbox"]:checked+label .check__box::after {
        content: '';
        position: absolute;
        height: 60%;
        width: 60%;
        background: #3E53F3;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 50%;
    }

    input[type="checkbox"]:checked+label p {
        position: relative;
        color: #A4A4A4;
        animation: bounce__text 1s both;
    }

    input[type="checkbox"]:checked+label p::after {
        position: absolute;
        content: '';
        height: 1px;
        width: 100%;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        background: #A4A4A4;
        animation: bounce__check 1.1s both;
    }

    .list__items ul li:hover label .cat__type {
        opacity: 0;
        pointer-events: none;
    }

    .list__items ul li:hover i {
        opacity: 1;
        cursor: pointer;
        pointer-events: all;
    }

    .list__details p {
        margin-bottom: 0;
    }

    .input__box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px;
        padding-top: 0px;
    }

    .input__box input[type="text"] {
        height: 40px;
        width: 100%;
        padding: 0 15px;
        border-radius: 3px;
        border: none;
        outline: none;
        box-shadow: none;
        background: #f7f7f7;
        border: 1px solid #efefef;
        padding-left: 35px;
        font-weight: 300;
    }

    .input__box .add__btn {
        height: 30px;
        width: 30px;
        border-radius: 50%;
        border: none;
        text-align: center;
        line-height: 30px;
        color: #8a8a8a;
        background: none;
        font-size: 14px;
        cursor: pointer;
        opacity: 1;
        position: absolute;
        left: 20px;
    }

    @keyframes bounce__check {
        0% {
            transform: translateX(-68px);
            animation-timing-function: ease-in;
            opacity: 0;
        }

        38% {
            transform: translateX(0);
            animation-timing-function: ease-out;
            opacity: 1;
        }

        55% {
            transform: translateX(-18px);
            animation-timing-function: ease-in;
        }

        72% {
            transform: translateX(0);
            animation-timing-function: ease-out;
        }

        81% {
            transform: translateX(-8px);
            animation-timing-function: ease-in;
        }

        90% {
            transform: translateX(0);
            animation-timing-function: ease-out;
        }

        95% {
            transform: translateX(-8px);
            animation-timing-function: ease-in;
        }

        100% {
            transform: translateX(0);
            animation-timing-function: ease-out;
        }
    }

    @keyframes bounce__text {
        0% {
            transform: translateX(-8px);
            animation-timing-function: ease-in;
        }

        33% {
            transform: translateX(0);
            animation-timing-function: ease-out;
        }

        66% {
            transform: translateX(-8px);
            animation-timing-function: ease-in;
        }

        100% {
            transform: translateX(0);
            animation-timing-function: ease-out;
        }
    }

    .cat__details {
        padding: 15px 5px 5px 5px;
        position: absolute;
        bottom: -80px;
        left: 0;
        width: 100%;
        background: #ffff;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        border-radius: 10px;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
        opacity: 0;
        transition: 0.5s;
        z-index: 99;
    }

    .cat__details::after {
        position: absolute;
        content: '';
        height: 4px;
        width: 80px;
        border-radius: 20px;
        background: #C8C8C8;
        top: 5px;
        left: 50%;
        transform: translateX(-50%);
    }

    .cat__details span {
        margin: 5px;
        padding: 2px 5px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-radius: 10px;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
        cursor: pointer;
    }

    .cat__details.show {
        opacity: 1;
    }

    .profile_card {
        height: 100%;
        width: 100%;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
        border-radius: 13px;
        position: relative;
    }

    .profile_card:before {
        content: "";
        height: 100%;
        width: 100%;
        background: #0000005c;
        position: absolute;
        border-radius: 13px;
        background: linear-gradient(185deg, rgb(2 0 36 / 0%) 0%, rgb(0 0 0 / 0%) 20%, rgb(0 0 0 / 25%) 59%, rgb(0 0 0) 100%);

    }

    .profile_card_content a {
        display: block;
        color: #fff;
        margin-top: 5px;
    }

    .profile_card_content {
        position: absolute;
        bottom: 27px;
        width: 86%;
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
    }

    .crown img {
        width: 20px;
        height: 20px;
    }

    .git_id {
        font-size: 12px;
    }

    .employee_code {
        font-size: 14px;
    }

    .star_of_month_bg {
        border: 2px solid #d0d0d0;
    }

    .new_invincian_bg {
        background-color: #fffcf1;
        border: 2px solid #d5caa0;
    }

    .my_feedback_bg {
        border: 2px solid #9c86f2;
        background: #dbd6f0;
    }

    .events_bg {
        border: 2px solid #ffc100;
        background: #fff;
    }

    .leave_box {
        background: #eaf6ff;
        border: 2px solid #96c6ea;
    }

    .balance_box {
        background: #eaf6ff;
        border: 2px solid #96c6ea;
    }

    .balance_table th {
        font-size: 14px !important;
    }

    .balance_table td {
        font-size: 12px !important;
        border-top: 1px solid #dee2e6 !important;
    }

    .border-bottom {
        border-bottom: 1px solid #e0e5ea !important;
    }

    /* border: 2px solid #98dcd4;
    background: #f1fffd; */


    #canvas-container-div {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        height: 100%;
    }

    #canvas {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        height: 100%;
        background: #000000;
    }

    #restart-button-div {
        position: absolute;
        bottom: 25px;
        right: 25px;
        width: 50px;
        height: 50Px;
        background: white;
        opacity: 0.7;
        cursor: pointer;
        border-radius: 100%;
    }

    #restart-icon {
        position: absolute;
        top: 50%;
        left: 47%;
        transform: translate(-50%, -50%);
        width: 35px;
        height: 45px;
    }

    .myDiv {
        display: none;
        text-align: center;
    }

    .myDiv img {
        margin: 0 auto;
    }

    .myDiv span {
        text-align: center;
        background: #ffdede;
        padding: 6px 10px;
        display: block;
        width: 100px;
        border: 1px solid #d47c7c;
        margin: 8px auto;
    }

    #showOne {
        color: red;
        border: 1px solid red;
        padding: 10px;
    }

    #showTwo {
        color: green;
        border: 1px solid green;
        padding: 10px;
    }

    #showThree {
        color: blue;
        border: 1px solid blue;
        padding: 10px;
    }

    .text-light {
        color: #dfdfdf !important;
    }




    .owl-carousel .owl-item .item {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        flex-direction: column;
    }

    .owl-carousel .owl-item img {
        width: 82px;
        height: 209px;
    }

    .reward_box_content {
        background: #fffcf1;
        color: #000;
        border-radius: 0px 5px 5px 0px;
        padding: 5px 15px;
        padding-left: 25px;
        border: 2px solid #d8cfac;
        text-align: right;
        font-weight: 600;
        margin-left: 12px;
    }

    .reward_img {
        width: 46px;
        position: absolute;
        left: 0px;
        top: 4px;
    }


    .header-datepicker .input-group-text {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        padding: 0.375rem 0.75rem;
        margin-bottom: 0;
        font-size: 0.9375rem;
        font-weight: 400;
        line-height: 1.6;
        color: #9ba5ca !important;
        text-align: center;
        white-space: nowrap;
        background-color: #dee5f7 !important;
        border: 1px solid #d8dbee !important;
        border-radius: 3px;
    }

    .header-datepicker .form-control {
        width: 102px !important;
        background: #dee5f7 !important;
        border-radius: 0 7px 7px 0;
        font-size: 13px;
        padding: 0.6rem 0.75rem;
        border-left: 1px solid #d8dbee !important;
        border: 1px solid #dadff2 !important;
    }

    .header-datepicker .feather {
        color: #545b92;
    }

    .header-datepicker input::placeholder {
        color: #545b92;
        opacity: 1;
    }



    .header-timepicker .input-group-text {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        padding: 0.375rem 0.75rem;
        margin-bottom: 0;
        font-size: 0.9375rem;
        font-weight: 400;
        line-height: 1.6;
        color: #9ba5ca !important;
        text-align: center;
        white-space: nowrap;
        background-color: #3b52ff !important;
        border: 1px solid #d8dbee !important;
        border-radius: 3px;
    }

    .header-timepicker .form-control {
        width: 102px !important;
        background: #3b52ff !important;
        border-radius: 0 7px 7px 0;
        font-size: 13px;
        padding: 0.6rem 0.75rem;
        border-left: 1px solid #d8dbee !important;
        border: 1px solid #dadff2 !important;
    }

    .header-timepicker .feather {
        color: #fff;
    }

    .header-timepicker input::placeholder {
        color: #fff;
        opacity: 1;
    }





    .drop-down {
        display: inline-block;
        position: relative;
    }

    .drop-down__button {
        /* background: linear-gradient(to right,#3d6def, #8FADFE); */
        background: #3c53ff;
        display: inline-block;
        line-height: 40px;
        padding: 0 18px;
        text-align: left;
        border-radius: 4px;
        box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.2);
        cursor: pointer;
    }

    .drop-down__name {
        text-transform: uppercase;
        color: #fff;
        letter-spacing: 2px;
    }

    .drop-down__icon {
        width: 18px;
        color: #fff;
        vertical-align: middle;
        margin-left: 14px;
        height: 18px;
        transition: all 0.4s;
        -webkit-transition: all 0.4s;
        -moz-transition: all 0.4s;
        -ms-transition: all 0.4s;
        -o-transition: all 0.4s;

    }



    .drop-down__menu-box {
        position: absolute;
        width: 100%;
        left: 0;
        background-color: #fff;
        border-radius: 4px;
        box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.2);
        transition: all 0.3s;
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        -ms-transition: all 0.3s;
        -o-transition: all 0.3s;
        visibility: hidden;
        opacity: 0;
        margin-top: 5px;
    }

    .drop-down__menu {
        margin: 0;
        padding: 0 13px;
        list-style: none;

    }

    .drop-down__menu-box:before {
        content: '';
        background-color: transparent;
        border-right: 8px solid transparent;
        position: absolute;
        border-left: 8px solid transparent;
        border-bottom: 8px solid #fff;
        border-top: 8px solid transparent;
        top: -15px;
        right: 18px;

    }

    .drop-down__menu-box:after {
        content: '';
        background-color: transparent;
    }

    .drop-down__item {
        font-size: 13px;
        padding: 13px 0;
        text-align: left;
        font-weight: 500;
        color: #909dc2;
        cursor: pointer;
        position: relative;
        border-bottom: 1px solid #e0e2e9;
    }

    .drop-down__item-icon {
        width: 15px;
        height: 15px;
        position: absolute;
        right: 0px;
        fill: #8995b6;

    }

    .drop-down__item:hover .drop-down__item-icon {
        fill: #3d6def;
    }

    .drop-down__item:hover {
        color: #3d6def;
    }



    .drop-down__item:last-of-type {
        border-bottom: 0;
    }


    .drop-down--active .drop-down__menu-box {
        visibility: visible;
        opacity: 1;
        margin-top: 15px;
    }

    .drop-down__item:before {
        content: '';
        position: absolute;
        width: 3px;
        height: 28px;
        background-color: #3d6def;
        left: -13px;
        top: 50%;
        transform: translateY(-50%);
        display: none;
    }

    .drop-down__item:hover:before {
        display: block;
    }

    .loti-file {
        position: absolute;
        right: 0;
        bottom: 0;
        z-index: 0;
    }

    .z-index_2 {
        z-index: 2;
    }

    .star_animetion {
        position: absolute;
        right: 0;
        bottom: 0px;
    }

    .customise_close {
        position: absolute;
        right: 10px;
        top: 10px;
    }

    .my_assets {
        border: 2px solid #f34932;

        /* background: rgba(239, 78, 184, .1); */

    }

    .my_project {
        border: 2px solid #d0d0d0;
    }

    .my_task {
        border: 2px solid #d0d0d0;
    }

    .summary {
        border: 2px solid #d0d0d0;
    }

    .summary_table th {
        font-size: 14px !important;
    }

    .summary_table td {
        font-size: 12px !important;
    }

    /* #sidebar.active .brand-logo img{
    height: auto !important;
} */



    .thumbnail {
        display: inline-block;
        width: 120px;
        height: 160px;
        background-color: #ccc;
        margin: 0 5px;
        cursor: pointer;
    }

    .fullscreen {
        background-color: #333;
    }

    /* .h-100vw {
    height: 100vw !important;
} */
    /* #sidebar.active:before {
    position: fixed;
    content: "";
    background: #00000073;
    height: 100%;
    width: 100%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 0;
} */
    #overley_mobile_bg {
        display: none;
    }

    #overley_mobile_bg.active {
        display: block;
    }

    #overley_mobile_bg {
        position: fixed;
        content: "";
        background: #00000073;
        height: 100%;
        width: 100%;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 1000;
    }

    @media screen and (min-width: 769px) {
        #overley_mobile_bg {
            display: none !important;
        }
    }

    .width100 {
        width: auto;
    }

    @media screen and (min-width: 769px) {
        .width100 {
            width: 100%;
        }
    }

    .event_img {
        height: 200px;
        width: 100%;
    }

    .event_content_box {
        background: #fff;
        color: #000;
        padding: 25px 15px;
        border-radius: 0px 0px 10px 10px;
    }

    .event_box {
        border-radius: 15px;
        display: block;
        margin-bottom: 30px;
    }

    .event_img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 10px 10px 0px 0px;
    }

    .event_content_box .date {
        margin-right: 15px;
    }

    .event_title h5 {
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 1px;
        color: #333;
        line-height: 1.2;
    }

    .event_content_box .date p {
        font-size: 14px;
        letter-spacing: 1px;
        margin-bottom: 10px;
        color: #7859df;
    }

    .event_content_box .date h5 {
        font-size: 18px;
        font-weight: 800;
    }

    .event_content_box .date span {
        margin-left: 10px;
    }


    .upload__box {
        padding: 0px;
    }

    .upload__inputfile {
        width: 0.1px;
        height: 0.1px;
        opacity: 0;
        overflow: hidden;
        position: absolute;
        z-index: -1;
    }

    .upload__btn {
        display: inline-block;
        font-weight: 600;
        color: #fff;
        text-align: center;
        min-width: 116px;
        padding: 6px 18px;
        transition: all 0.3s ease;
        cursor: pointer;
        border: 2px solid;
        background-color: #4045ba;
        border-color: #4045ba;
        border-radius: 3px;
        line-height: 26px;
        font-size: 14px;
        position: relative;
    }

    .upload__btn:hover {
        background-color: unset;
        color: #4045ba;
        transition: all 0.3s ease;
    }

    .upload__btn-box {
        margin-bottom: 10px;
    }

    .upload__img-wrap {
        display: flex;
        flex-wrap: wrap;
        margin: 0 -10px;
    }

    .upload__img-box {
        width: 110px;
        padding: 0 10px;
        margin-bottom: 12px;
    }

    .upload__img-close {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background-color: rgba(0, 0, 0, 0.5);
        position: absolute;
        top: 10px;
        right: 10px;
        text-align: center;
        line-height: 24px;
        z-index: 1;
        cursor: pointer;
    }

    .upload__img-close:after {
        content: "✖";
        font-size: 14px;
        color: white;
    }

    .img-bg {
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        position: relative;
        padding-bottom: 100%;
    }

    .event_box_content .event_edit {
        position: absolute;
        margin-top: 3px;
        right: 15px;
        z-index: 4;
        color: #fff;
        visibility: hidden;
        transition: all 0.1s ease;
    }

    .event_box_content:hover .event_edit {
        visibility: visible;
    }


    .news-content .img {
        width: 136px;
        height: 182px;
        float: left;
        position: relative;
        border-radius: 5px;
        margin-bottom: 9px;
    }

    .news-content .img:before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        border-radius: 5px;
        background: #fff;
        width: 100%;
        height: 100%;
        z-index: 2;
    }

    .news-content .img a:before {
        content: "";
        position: absolute;
        top: 0;
        left: -2px;
        background: url(../../public/images/news/shine-book.svg) no-repeat 50%;
        background-size: contain;
        border-radius: 9px;
        width: 100%;
        height: 100%;
        z-index: 9;
    }

    .news-content .img img {
        max-height: 100%;
        border-radius: 5px;
        z-index: 3;
        position: relative;
        width: 100%;
        height: inherit;
        transform-origin: 0 50%;
        transform: rotateY(0);
        transition: all 0.45s ease;
    }

    /* .news-content:hover .img img {
    transform: rotateY(-25deg);
    box-shadow: 1px 1px 5px 5px rgb(0 0 0 / 20%);
} */
    .news-content .img:after {
        content: "";
        position: absolute;
        bottom: -9px;
        left: 0;
        border-radius: 0 0 5px 0;
        background: url(../../public/images/news/book-bg.png) no-repeat 0 0/100% 100%;
        width: 145px;
        height: 190px;
        z-index: 1;
    }

    .news-content:before {
        content: "";
        position: absolute;
        height: 186px;
        width: 186px;
        bottom: 22px;
        left: 13px;
        background-image: url(../../public/images/news/flower.svg);
        background-size: contain;
        opacity: 0.4;
        z-index: -1;
    }

    .ribbon2 {
        width: 20px;
        padding: 8px 3px;
        position: absolute;
        top: -6px;
        left: 22px;
        text-align: center;
        border-top-left-radius: 3px;
        background: #efb23b;
        z-index: 14;
        color: #fff;
        writing-mode: vertical-rl;
        text-orientation: mixed;
        font-size: 13px;
        letter-spacing: 1px;
    }

    .ribbon2:before,
    .ribbon2:after {
        content: "";
        position: absolute;
    }

    .ribbon2:before {
        height: 0;
        width: 0;
        right: -5.5px;
        top: 0.1px;
        border-bottom: 6px solid #8D5A20;
        border-right: 6px solid transparent;
    }

    .ribbon2:after {
        height: 0;
        width: 0;
        bottom: -9.5px;
        left: 0;
        border-left: 10px solid #efb23b;
        border-right: 10px solid #efb23b;
        border-bottom: 10px solid transparent;
    }

    input.upload__bannerfile {
        width: 0.1px;
        height: 0.1px;
        opacity: 0;
        overflow: hidden;
        position: absolute;
        z-index: -1;
    }

    .upload__btn .upload_pdf {
        font-weight: 100;
    }

    .upload__btn label.error {
        bottom: -35px !important;
        left: 0 !important;
        font-weight: 400;
    }

    .upload__btn:hover .upload_pdf svg path {
        fill: #4045ba;
    }

    .multi_exitingfiles_container {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }