/*=================================== Customize CSS =========================================*/

/*=================================== Global-Styles =========================================*/

/*=================================== Variables concept =====================================*/
:root {
    --default-font: 14px;
    --heading-font: 28px;
    --sub-heading-font: 20px;
    --default-black: #333333;
    --dark-blue: #00728a;
    --grey-color: #8d9aa2;
    --light-black: #4f5e65;
    --font-family: "Open Sans", sans-serif;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: var(--default-font);
    color: var(--default-black);
}
a {cursor:pointer;}

/*============================================ Short-Hands ========================================*/
.clr-grey { color: var(--grey-color) !important; } .text-danger { color: #bf3126 !important; } .text-success { color: #165F30 !important; }
.icon-font-22{ font-size: 22px !important; } .link-blue, .link-blue:hover { color: var(--dark-blue) !important;} .font-20{ font-size: var(--sub-heading-font) !important; }
.semibold { font-weight: 600 !important; } .width-95{ width: 95%; } .width-45 { width: 45% !important; } .pointer {cursor: pointer !important;}
.icon-font-14{ font-size: var(--default-font) !important; } .light-black { color: var(--light-black) !important; }

/*=========================================== End Short-Hands CSS ======================================*/
.div-border{ height: 100%; }
.link-primary, .link-primary:hover { color: var(--grey-color) !important; }
.div-user-info label{ color: var(--light-black) !important; font-weight: 400 !important; }
.w-100{ width: 100% !important; }
.div-addedit{ width: 80%; }
.div-login span{ line-height: 29px; }
.div-dashboard{ padding: 30px;width:100%}
.table-user tr:nth-child(even) { background-color:  rgba(199, 208, 214, 0.25); }
.border-bottom { border-bottom: 2px solid #c7d0d6 !important; }
.div-profile label{ color: #fff; }
.width-24{ width: 24% !important; }
.width-74 { width: 74% !important; }
.font-50{ font-size: 50px !important; }

/*=========================================== Login Section ======================================*/
.div-outer-login {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100% !important;
    flex-direction: column;
    align-self: center;
    align-content: center;
    height: 75vh;  
}
.div-login {
    border: 1px solid;
    width: 30%;
    padding: 30px;
    border-color: var(--light-black);
    border-radius: 4px !important;
    box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.35);
    background-color: #fff !important;
}
.div-login :is(input[type=text], input[type=password] ) {
    height: 35px !important;
    border-radius: 4px;
    border: 1px solid #797979;
    padding: 5px;
}
.div-login label {
    color: var(--light-black);
    font-size: var(--sub-heading-font);
    font-weight:600;
}
.div-login input[type=checkbox] {
    height: 30px;
    margin-right: 3px;
}

/*=========================================== Button Section ======================================*/
.btn-primary, .btn-primary:is(:hover, :active:focus, :focus-visible, :focus ) {
    border-radius: 4px;
    padding: 0px 20px;
    width: auto;
    background-color: var(--dark-blue);
    color: #fff;
    height: 30px;
    line-height: 28px;
    text-align: center;
    border: 1px solid var(--dark-blue);
    box-shadow: none;
}
.btn-secondary {
    border-radius: 4px;
    padding: 0px 20px;
    width: auto;
    background-color: #fff;
    color: var(--dark-blue);
    border: 1px solid var(--dark-blue);
    height: 32px;
    line-height: 30px;
    text-align: center;
    box-shadow: none;
}
.btn-secondary:is(:hover, :active:focus, :active:focus :focus-visible, :focus ) {
    background-color: var(--dark-blue);
    color: #fff;
    box-shadow: none;
    border-color: var(--dark-blue);
}
.btn-delete {
    border-radius: 4px;
    padding: 0px 20px 0px 5px;
    width: auto;
    height: 30px;
    border: 1px solid #bf3126;
    background-color: #ffffff;
    color: #bf3126;
    text-align: center;
    line-height: 27px;
}
.btn-delete > .icon-delete { color: #bf3126; font-size: 18px !important; }
.btn-delete:hover { background-color: #bf3126;  color: #fff; }
.btn-delete:hover > .icon-delete{ color: #bf3126; }

/*=========================================== Modal Section ======================================*/
.modal-header {
    color: #fff !important;
    background-color: var(--dark-blue) !important;
    padding: 4px 10px 4px 10px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}
.modal-title {
    color: #fff;
    font-size: 18px !important;
}
.modal-footer { border-top: none; margin-bottom: 5px !important; }
.modal-dialog{ width: 30% !important; }
.modal-content{ border: 1px solid #797979; }

/*=========================================== Common Dashboard Section ======================================*/
.div-dashboard label {
    font-size: 28px;
    font-weight: 600;
    color: var(--light-black);
}
.div-dashboard span {
    font-size: var(--sub-heading-font);   
    color: var(--grey-color);
}
.btn-user, .btn-user:hover {
    background-color: #f2d40f;
    text-decoration: none;
    border-radius: 5px;
    padding: 2px; 
    text-align: center;
    height: 50px;
    line-height: 36px;
    width: 324px;
    height: 40px;
    float: left !important;
    color: var(--light-black);
}
.div-portal, .div-common-dashboard {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100% !important;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: start;
    gap: 70px 127px;
    padding: 30px;
}
.div-common-dashboard {
    flex-wrap: wrap;
    justify-content: space-between !important;
    gap: 70px 0 !important;
}
.btn-projects {
    color: var(--grey-color);
    background-color: transparent;
    font-size: 28px;
    text-decoration: none;
    border-radius: 8px;
    padding: 30px;
    text-align: center;
    line-height: 48px;
    width: 26%;
    height: 196px;
    background-color: #fff;
    box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 324px;
    height: 241px;
}
.icon-share {
    color: var(--light-black) !important;
    font-weight: 300;
}
.btn-projects:hover {
    background-color: #fff;
    color: var(--grey-color);
    opacity: .9;
}
.div-inner-table {
    box-shadow: none;
    border: 1px solid #c7d0d6;
    width: 95%;
    padding: 5px 15px;    
}
.table-user th {
    color: #005467;
    padding: 8px;
    height: 40px;
    border-bottom: 1px solid var(--grey-color);
    cursor: default;
}
.table-user td {    
    padding: 8px;
    height: 40px;
}
.lbl-user, .lbl-clr label {
    color: #005467;
    font-weight: 400;
    font-size: 16px;
}
.lbl-clr label{
    font-weight: 600;
    font-size: var(--default-font);
}
.btn-add-user {
    height: 30px;
    padding: 0px 20px;
    border-radius: 4px;
    text-align: center;
    text-decoration: none;
    line-height: 28px;
    background-color: var(--dark-blue) !important;
    color: #fff !important;
    box-shadow: none !important;
    border-color: var(--dark-blue) !important;    
}
.btn-add-user:is(:hover, :active:focus, :focus-visible, :focus ) {
    background-color: #fff !important;
    color: var(--dark-blue) !important;
    border: 1px solid var(--dark-blue) !important;
 }
.icon-info {
    font-size: var(--default-font) !important;
    vertical-align: middle;
    color: var(--dark-blue) !important;
    line-height: normal !important;
    cursor: default;
}
.table-user td:first-child, .table-user td:nth-child(2), .table-user th:first-child, .table-user th:nth-child(2) { width: 15%; }
.table-user td:nth-child(3) {
    width: 46%;
    word-break: break-word;
}
.tabel-user td:nth-child(3) div {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        text-emphasis: initial;
        display:inline-block;
        width:95%;
 }
.table-user th:nth-child(4), .table-user td:nth-child(4) {
    width: 0%;
    padding: 0px !important;
}
.table-user td, .table-user th { width: 6%; }

/*=========================================== Add Edit User Section ======================================*/
.div-outer-border {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100% !important;
    flex-direction: column;
}
.div-inner-border {
    width: 84%;
    padding: 15px 20px;
    border-radius: 4px;
    border: 1px solid #c7d0d6;
}
.div-inner-border input[type=checkbox]{
    height:30px;
    float: left;
}
.div-inner-border input[type=checkbox] + label{
    line-height: 29px;
    float: left;
}
.div-inner-border input[type=checkbox] + label > i{
    font-size: 12px;
    color: #808385;
}
.div-inner-border input[type=radio]{
    height: 29px;    
    margin-right: 5px !important;   
    float: left;
    accent-color: var(--light-black);
    cursor: pointer;
}
.div-inner-border input[type=radio] + label{
    line-height: 29px;
    font-weight: 500;
    cursor: pointer;
}
.div-user-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 84% ;
    flex-direction: row;
    padding: 10px 20px;    
}
.div-user-info :is(input[type=text] ){
    border-radius: 0px;
    border: none;
    border-bottom: 1px solid var(--grey-color);
    font-size: var(--default-font);
}
.div-primary select {
    height: 30px;
    border: none;
    border-bottom: 1px solid var(--grey-color);
    padding: 0px 4px !important;
}
.lbl-login.lbl-error {
    color: #fff !important;
    background-color: var(--dark-blue) !important;
    width: 100% !important;
    font-size: 18px;
    padding: 8px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}

/*=========================================== Error Section ======================================*/
.icon-error {
    font-size: 55px;
    color: var(--dark-blue);
    margin-bottom: 10px;
}
.div-error {
    display: flex;
    width: 100%;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    box-shadow: none;
}
.lbl-inner-text {        
    color: #1e1e1e !important;
    text-align: left !important;
    line-height: normal !important;
    font-weight: normal !important;
    font-size: var(--default-font) !important;
}

/*=========================================== Header Section ======================================*/
.navbar-brand img{ height: 46px; float: left; }
.navbar-border, .profile-border {
    padding: 5px;
    border-left: 1px solid #c7d0d6;
    height: 46px;
    line-height: 33px;
}
.navbar-border >  div {
    border-radius: 4px;
    padding: 0px 20px;
    background-color: #d7eff5;
    border: 1px solid var(--dark-blue);
    color: var(--dark-blue);
    margin: 3px 4px 0;
    text-align: center;
    cursor: pointer;
    font-size: 18px;
    font-weight: 400 !important;
    height: 32px;
    line-height: 28px;
}
.div-profile {
    width: 35px;
    height: 35px;
    padding: 2px;
    background-color: #c7d0d6;
    border-radius: 20px;
    margin: 0px 8px;
    text-align: center;
    color: #fff !important;
    line-height: 30px;
    cursor: pointer;
}
.div-header {
    width: 170px !important;
    top: 60px;
    left: 88px;
    transform: translate(-50%, 0);
    padding: 10px;
    background-color: #fff;
    font-size: var(--default-font);
    border-radius: 0px;
    position: absolute;
    z-index: 9;
    border: 1px solid #c7d0d6;
    box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.35);
    border-radius: 4px !important;
}
.div-header i::after {
     content: '';
     position: absolute;
     width: 20px;
     height: 18px;
     left: 50%;
     transform: translate(-50%,50%) rotate(45deg);
     background-color: #fff;
     border: 1px solid #c7d0d6;
 }
.div-header i {
     position: absolute;
     bottom: 100%;
     left: 16%;
     margin-left: -12px;
     width: 25px;
     height: 17px;
     overflow: hidden;
 }
.btn-border-clr {
    border-radius: 4px;
    border: 1px solid #c7d0d6;
    padding: 0px 2px;
    text-align: center;
    width: 100%;
    color: var(--grey-color);
    text-decoration: none;
    height: 25px;
    line-height: 21px;
    float: left;
}
.btn-border-clr:hover, .user-projects:hover{
    background-color: #d7eff5;  
    color: var(--dark-blue);
}
.user-projects:hover {
    color: var(--dark-blue) !important;
}
.user-projects {
    color: var(--grey-color) !important;
    border: 1px solid var(--grey-color);
    background-color: transparent;
    font-size: 12px;
    text-decoration: none;
    border-radius: 4px;
    padding: 2px;
    text-align: center;
    height: 40px;
    line-height: 15px;
    width: 47%;
    box-shadow: none;
}
.link-user {
    border: 1px solid var(--dark-blue);
    font-size: var(--default-font);
    text-decoration: none;
    border-radius: 4px;
    padding: 2px;
    text-align: center;
    height: 23px;
    line-height: 20px;
    width: 47%;
    box-shadow: none;
    padding: 0px 20px;
    color: var(--dark-blue);
    background-color: #d7eff5;
}
.link-user:hover {
    background-color: #d7eff5;
    color: var(--dark-blue);
}
.btn-profile-user { left: 170px; width: 345px !important; }

/*=========================================== Loading Panel Section ======================================*/
.loading-slider {
    position: fixed;
    width: 100%;
    height: 4px;
    overflow-x: hidden;
    top: 0;
    left: 0;
    right: 0;
}
.loading-slider .line {
    position: absolute;
    opacity: 0.4;
    background: var(--dark-blue);
    width: 150%;
    height: 4px;
}
.loading-slider .subline {
    position: absolute;
    background: var(--dark-blue);
    height: 4px;
}
.loading-slider .inc { animation: increase 2s infinite; }
.loading-slider .dec { animation: decrease 2s 0.5s infinite; }

@keyframes increase {
from { left: -5%; width: 5%; }
to { left: 130%;  width: 100%; }
}

@keyframes decrease {
from { left: -80%; width: 80%; }
to { left: 110%; width: 10%; }
}

/*=========================================== Success Tex Section ======================================*/
.text-success {
    width: 95%;
    background-color: rgba(191, 49, 38, 0.15);
    border-radius: 4px !important;
}
.text-success .icon-delete{
    background-color: #bf3126;
    color: #fff;
    height: 24px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    font-size: 17px;
    width: 30px !important;
    vertical-align: middle;
    line-height: 24px !important;
    text-align: center;
}
.text-success .icon-close{
    float: right;
    color: #bf3126;
    line-height: 25px !important;
    height: 25px;
    font-size: 20px;
}
.text-green { color: #165F30 !important; }
.table-user tr{ cursor: pointer !important; }
.table-user tr:first-child:hover { background-color: transparent !important;}
.table-user tr:hover { background-color: rgba(0, 114, 138, 0.1) !important; }
.div-date {
    width: auto;
    height: 159px;
    padding: 2px 2px 2px 25px;
    border-radius: 7px;
    background-color: rgb(215, 239, 245);   
    font-weight: 600;
    color: rgb(51, 51, 51);
    text-align: left;
    line-height: normal;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: flex-start;
    border-bottom-right-radius: 0px;
    border-top-right-radius: 0px;
}
.bg-image {
    background-image: url('../images/img_portal_backgroundimage.png');
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
}
.div-new-dashboard {
    display: flex;
    justify-content: start;
    gap: 10px;
    gap: 10px 20px;
    row-gap: 10px;
    column-gap: 20px;
}
.icon-people {
    font-size: 80px !important;
    color: #005467 !important;
}
.icon-event { font-size: 80px !important; }
.icon-time {
    font-size: 85px !important;
    color: #00a9c5 !important;
    font-weight: 700 !important;
}
.div-assignment {
    height: 80px;
    width: 100px !important;
    border-radius: 10px;
    background-color: var(--dark-blue);
    width: 80px !important;
    border-radius: 50px;
    background-color: var(--dark-blue);
    text-align: center;
    line-height: 120px;
} 
.icon-white{ color: #fff !important; }
.clr-light-blue { color: #78d0e2 !important; }
.lbl-day{ font-weight: 700; }
.div-portal-text {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100% !important;
    flex-direction: row;
    justify-content: space-between;
    gap: 70px;
    padding: 0px;
}
.p-50{ padding: 50px; }
 span.lbl-dashboard-text,  ul.list-dashboard > li {
    color: #c7d0d6;
    font-size: 18px;
    font-weight: normal;
}
.lbl-date {
    font-weight: 700;
    font-size: 48px;
    margin: 0px;
    color: var(--dark-blue);
    line-height: 63px;
    height: 58px;
}
.lbl-month, .lbl-day {
    font-size: 26px;
    color: var(--light-black);
    font-weight: 600;
    margin: 0px;
}
.lbl-day, .lh-22 { line-height: 22px; }
.div-portal-time {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100% !important;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: start;
    gap: 130px;
    padding: 30px;
}
.icon-business{ font-size: 80px !important; }
.btn-business, btn-business:hover {
    background-color: #c7e6ea !important;
    color: var(--grey-color);
    opacity: 1 !important;
    cursor: default;
    justify-content: left;
    align-items: start;
}
.icon-business-clr { color: #a0b7c6 !important; }
.lbl-Coming {
    color: #333333 !important;
    background-color: #f2d40f;
    font-size: 16px !important;
    border-top-left-radius: 8px !important;
    padding: 0px 35px;
    border-bottom-right-radius: 8px !important;
    line-height: 40px;
}
.div-portal-user {
    display: flex;
    align-items: center;
    justify-content: space-between !important;
    padding: 0px;
    gap: 15px !important;
    flex-wrap: wrap;
}
.lbl-sub-heading {
    font-size: 48px !important;
    font-weight: 700 !important;
    color: #c7d0d6 !important;
    line-height: 18px;
    height: 60px;
}
.lbl-heading {
    font-size: 55px !important;
    font-weight: 700 !important;
    color: #fff !important;
    letter-spacing: 3.5px !important;
    line-height: 60px !important;
}

/*=========================================== Wobble Vertical Section ======================================*/
@keyframes wobble-vertical {
 16.65% { transform: translateY(8px);   }
 33.3%  { transform: translateY(-6px); }
 49.95% { transform: translateY(4px);  }
 66.6%  { transform: translateY(-2px); }
 83.25% { transform: translateY(1px);   }
 100%   { transform: translateY(0);     }
}
.wobble-vertical { display: inline-block; }
.btn-projects:hover  > .wobble-vertical {
    animation-name: wobble-vertical;
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 4;
}
div.div-inner-border > .btn-save-clr:hover {
    background-color: #fff;
    color: var(--dark-blue);
    border: 1px solid var(--dark-blue);
}
.tooltip {
    text-align: center !important;
    font-size: 14px;
    width: 200px;
    height: 102px;
    align-self: center;
    padding: 10px;
    border-radius: 4px;
    line-height: 17px;
    background-color: #fff !important;
    border: 1px solid #c7d0d6;
    color: #333 !important;
    font-size: 12px;
    opacity: 1;
    position: absolute;
    z-index: 4;
    font-family: var(--font-family);
    top: 9px;
    left: 87px;
    visibility: hidden;
}
.icon-toolip {
    font-size: 14px !important;
    color: #333;
    width: 14px;
    display: inline-block !important;
    height: 3px;
    line-height: 10px !important;
    vertical-align: sub !important;
}
.icon-info:hover + .tooltip { visibility: visible !important; }
.bg-clr-grey { background-color: #f0f0f0 !important; }
.w-65{ width: 65% !important;}
.div-option {
    width: 26%;
    float: left;
    margin-top: 5px;
}
.div-option-label {
    width: 74%;
    float: left;
    margin-top: 5px;
}
.div-align {
    width: auto;
    clear: both;
    float: left;
}

/*=========================================== Responsive CSS (for mobile view) ======================================*/
@media only screen and (max-device-width: 640px) {
.div-inner-table { overflow: scroll; }
.div-login { width: 80%;     }
.mobile-mt-10 { margin-top: 10px !important; }
.mobile-mt-20 {  margin-top: 20px !important; }
.mobile-mt-30 { margin-top: 30px !important;}
.div-inner-border input[type=checkbox] + label {  width: 90% !important; }
.div-inner-border, .div-user-info, .mobile-w-100 { width: 100% !important;  }
.div-user-info {  padding: 10px 0px;  flex-direction: column; }
.bg-image{ height: auto !important; }
.div-portal-text{
    align-items: start;
    width: 100% !important;
    flex-direction: column;
    gap: 30px;
}
.div-portal-time{ gap: 70px !important; }
.div-dashboard{ padding: 25px !important; }
.div-portal {  padding: 0px !important; justify-content: center;  }
.lbl-sub-heading{  font-size: 35px !important; }
.lbl-heading { font-size: 45px !important;  }
.div-new-dashboard {
    padding: 8px 0px;
    justify-content: center !important;
    margin-top: 15px !important;
}
.mobile-p-0{ padding: 0px !important; }
.mobile-left{ float: left !important; }
.navbar-light .navbar-toggler {
    color: var(--dark-blue);
    border-color: var(--dark-blue);
}
.navbar-toggler-icon { color: var(--dark-blue); }
.div-portal{ flex-wrap: wrap !important; }
.div-portal{ width: 100% !important;}
.mobile-d-none{ display: none; }
.div-portal.div-common-dashboard{ justify-content: center !important; }
.mobile-w-95, .modal-dialog { width: 95% !important; }
.table-user{ width: 200% !important; }
.mobile-ms-0{ margin-left: 0px !important;}
.mobile-me-0{ margin-right: 0px !important;}
.lbl-sub-heading{ line-height: 60px !important;  }
.mobile-div-scroll {
     width: 100% !important;
     overflow-x: scroll;
}
.mobile-inner-scroll {
        float: left;
        width: 180% !important;
}
.navbar-border > div{ line-height: 30px !important; }
.div-inner-border input[type=checkbox] + label, .mobile-lh-20 { line-height: 20px !important; }
.div-inner-border input[type=checkbox]{  height: 20px !important; }    
}
    
/*=========================================== End Mobile CSS ======================================*/
/*=========================================== Only for Tablet view ======================================*/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
.div-inner-table, .div-user-info, .div-inner-border, .div-inner-border input[type=checkbox] + label {  width: 95% !important;  }
.tablet-w-98 {  width: 98% !important; }
.tablet-p-0 { padding: 0px !important; }
 .div-login {  width: 50%  }
.width-74 {  width: 60% !important; }
.bg-image{ height: auto !important; }
.tablet-w-45{ width: 35% !important; }
.btn-projects, .btn-user, .btn-user:hover { width: 40% !important; }
.div-inner-border.lbl-heading{ line-height: 90px !important; }
 .btn-projects{ line-height: normal !important;}
.modal-dialog{ width: 55% !important; }
.lbl-sub-heading{ line-height: 50px !important; }
.tablet-mt-20{ margin-top: 20px !important;}
 }

/*=========================================== End Tablet CSS ======================================*/
.lnk-selected-only {
    color: var(--grey-color) !important;
    border: 1px solid #00728A !important;
    background-color: #D7EFF5 !important;
    background-color: transparent;
    font-size: 12px;
    text-decoration: none;
    border-radius: 4px;
    padding: 2px;
    text-align: center;
    height: 40px;
    line-height: 32px;
    width: 47%;
    box-shadow: none;
    pointer-events: none !important;
}
input[type=text].border-requried {
    border-color: #bf3126 !important;
}
input[type=radio].border-requried {
    outline: 1px solid #bf3126;
}
select.border-requried {
    border-color: #bf3126 !important;
}
.div-user-info label.lbl-requried, label.lbl-requried, label.lbl-requried i {
    color: #bf3126 !important;
}
.border-requried {
    border-color: #bf3126 !important;
}
.lbl-margin div:nth-child(3) {
    margin-bottom: 29px;
}
.div-inner-border input[type=checkbox] + span > i {
    font-size: 12px;
    color: #808385;
}
input:disabled {
    background-color: #f0f0f0 !important;
}
.div-pms {
    height: 30px;
    line-height: 30px;
    border: none;
    border-bottom: 1px solid var(--grey-color);
    padding: 0px 4px !important;
}
.div-pms-bg {
    background-color: rgb(240, 240, 240);
}

.selected-options {
    padding: 5px 10px;
    cursor: pointer;
    border-bottom: 1px solid var(--grey-color) !important;
}
.dropdown-menu {
    display: none;
    position: absolute;
    z-index: 1;
    background-color: #fff;
    border: 1px solid var(--grey-color);
    padding: 0px;
    /* max-height: 200px; */
    overflow-y: auto;
    border-radius: 0px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}

.disabled {
    background-color: rgb(240, 240, 240);
    pointer-events: none; 
}
.dropdown-menu > label{
    float: left!important;
    width: 100% !important;
}
.list-hover:hover span, .list-hover:hover, .list-hover:hover input[type=checkbox] {
    color: #fff !important;
    background-color: #0073E6 !important;
    accent-color: #fff !important;
}
.list-hover input[type=checkbox] {
    margin-left: 5px !important;
    margin-right: 5px !important;
}
.z-index-1{
    z-index: 1 !important;
}
.drp-arrow {
    position: absolute;
    top: 10px;
    z-index: 3;
    right: 6px;
    height: 6px;
    background-size: 9px;
    background-repeat: no-repeat !important;
    background-position: right;
    background-position-y: 7px;
    cursor: pointer;
}
.icon-dark-blue {
    color:var(--dark-blue) !important;
}