@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 100000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: #dc3545;
}

.width200 {
    width: 200px
}

#components-reconnect-modal {
    z-index: 100000 !important;
}
/*.custom-reconnect-modal > div {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1100;
    overflow: hidden;
    background-color: #fff;
    opacity: 0.8;
    text-align: center;
    font-weight: bold;
}

.components-reconnect-hide > div {
    display: none;
}

.components-reconnect-show > div {
    display: none;
}

.components-reconnect-show > .show {
    display: block;
}

.components-reconnect-failed > div {
    display: none;
}

.components-reconnect-failed > .failed {
    display: block;
}

.components-reconnect-refused > div {
    display: none;
}

.components-reconnect-refused > .refused {
    display: block;
}*/

.drag-drop-zone {
    width: 100%;
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #eee;
    color: #aeaeae;
    font-size: 1.4rem;
    cursor: pointer;
    margin: 1rem 0 1rem 0;
    position: relative;
}

.drag-drop-zone:hover {
    background-color: #f5f5f5;
}

.drag-drop-zone input[type=file] {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}


.inputfile {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

.inputfile + label {
    font-weight: 400!important;
    color: white;
    background-color: #6c757d;
    display: inline-block;
}

.inputfile:focus + label {
    outline: 1px dotted #000;
    outline: -webkit-focus-ring-color auto 5px;
}

.inputfile + label {
    cursor: pointer; 
}

.custom-popup .modal-header {
    padding: 0;
}

.custom-popup .custom-header {
    padding: 0.3rem 0;
    font-size: 1.1rem;
    justify-content: left;
    display: flex;
    align-items: center;
    padding-left: 10px;
}

.custom-popup .demo-icon-info {
    margin: 0 0.5rem 0 0.6rem;
}

.custom-popup .custom-header .close-button {
    font-size: 0.7rem;
    margin-left: auto;
    margin-bottom: 0.2rem;
    margin-right: 0.9rem;
    cursor: pointer;
}

.custom-popup .modal-body {
    padding-top: 0.6rem;
}

.max-width900 {
    max-width: 900px;
}

.max-width750 {
    max-width: 750px;
}

.max-width700 {
    max-width: 750px;
}

.max-width650 {
    max-width: 650px;
}

.max-width600 {
    max-width: 600px;
}

.width200 {
    width: 200px;
}

.modal-footer-compact {
    padding: 14px 0 0 0;
}

.list-group-item {
    padding: 0.25rem
}

.form-control {
    height: calc(1.75rem);
    padding: 0.25rem 0.4rem;
    font-size: 0.875rem; 
    line-height: 1.5;
}

.input-group-append {
    height: calc(1.75rem);
}

.input-group-prepend {
    height: calc(1.75rem);
}

.btn {
    padding: 0.25rem 0.75rem;
}

.card-header {
    padding: 0.4rem 0.6rem;
}

.card-body {
    padding: .75rem;
}

.login-container {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    align-content: center;
    margin: 5% auto 0;
}

.login-body {
    flex-direction: column;
    margin: 0 auto;
}

.sidebar {
    padding-left: 0px;
    padding-right: 0px;
}

.content-wrapper > .content {
    padding-top: 15px;
}

.toast-center-center {
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

.btn-td {
    padding-left: 0px;
    padding-top: 0px;
    text-align: left;
}

.user-panel {
    overflow:visible
}

[class*='sidebar-dark-'] .user-panel a:hover {
    color: #212529;
}

.fc-toolbar.fc-header-toolbar {
    margin-bottom: 0em;
    padding: 0rem !important;
    padding-bottom: 1rem !important;
}

/*.tooltip-inner {
    min-width: 400px;*/ /* the minimum width */
/*}*/

.tooltip {
    z-index:999999;
}

.photo-preview {
    max-height: 150px;
    max-width: 150px;
}

.photo-container {
    display: flex;   
}

.form-group {
    margin-bottom: .5rem;
}

/*.dxbs-dm.dropdown-menu.dxbs-listbox {
    width: 600px !important;
}
*/
#intake-calendar .table-active {
    background-color: #51a3d2 !important;
    color: #ffffff;
}

#intake-calendar .text-danger {
    color:#000000 !important;
}

#intake-calendar .disabled {
    background-color: #fafafa !important;
    border: 1px solid #dee2e6 !important;
    color: #000000;
}

#intake-calendar .dxbs-today {
    border: 1px #000000 solid !important;
    opacity: 100
}

#intake-calendar .dxbs-day {
    background-color: #dcf2ff;
    border: 1px #51a3d2 solid;
}

#intake-calendar small {
    display: none;
}

#analytics .altcs-counters .card-header {
    font-weight:bold;
}

#card-element, #scard-element {
    width: 100%;
}

.StripeElement {
    box-sizing: border-box;
    height: 40px;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: 4px;
    background-color: white;
    box-shadow: 0 1px 3px 0 #e6ebf1;
    -webkit-transition: box-shadow 150ms ease;
    transition: box-shadow 150ms ease;
}
.Padding-bt-10 {
    padding-bottom: 10px;
}

.StripeElement--focus {
    box-shadow: 0 1px 3px 0 #cfd7df;
}

.StripeElement--invalid {
    border-color: #fa755a;
}

.StripeElement--webkit-autofill {
    background-color: #fefde5 !important;
}

#payment-form #customer-name, #spayment-form #scustomer-name {
    box-sizing: border-box;
    height: 40px;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: 4px;
    background-color: white;
    box-shadow: 0 1px 3px 0 #e6ebf1;
    -webkit-transition: box-shadow 150ms ease;
    transition: box-shadow 150ms ease;
    font-size: 16px;
}

.disabled-tablink {
    cursor: default;
    pointer-events: none;
}

.hide-tablink{
    display:none;
}

.disabled-tablink a {
    text-decoration: none;
    color: grey !important;
}


ol.account-setup-progress[data-steps="2"] li {
    width: 49%;
}

ol.account-setup-progress[data-steps="3"] li {
    width: 33%;
}

ol.account-setup-progress[data-steps="4"] li {
    width: 24%;
}

ol.account-setup-progress[data-steps="5"] li {
    width: 19%;
}

ol.account-setup-progress[data-steps="6"] li {
    width: 16%;
}

ol.account-setup-progress[data-steps="7"] li {
    width: 14%;
}

ol.account-setup-progress[data-steps="8"] li {
    width: 12%;
}

ol.account-setup-progress[data-steps="9"] li {
    width: 11%;
}

.account-setup-progress {
    width: 100%;
    list-style: none;
    list-style-image: none;
    margin: 20px 0 20px 0;
    padding: 0;
}

    .account-setup-progress li {
        float: left;
        text-align: center;
        position: relative;
    }

    .account-setup-progress .account-setup-name {
        display: block;
        vertical-align: bottom;
        text-align: center;
        margin-bottom: 1em;
    }

    .account-setup-progress .account-setup-step {
        color: #fff;
        border: 3px solid #ff4510;
        background-color: #ff4510;
        border-radius: 50%;
        line-height: 1.2;
        width: 1.2em;
        height: 1.2em;
        display: inline-block;
        z-index: 0;
    }



        .account-setup-progress .account-setup-step:before {
            content: "";
            display: block;
            background-color: #ff4510;
            height: 0.4em;
            width: 50%;
            position: absolute;
            bottom: 0.6em;
            left: 0;
        }

        .account-setup-progress .account-setup-step:after {
            content: "";
            display: block;
            background-color: #ff4510;
            height: 0.4em;
            width: 50%;
            position: absolute;
            bottom: 0.6em;
            right: 0;
        }

    .account-setup-progress li:first-of-type .account-setup-step:before {
        display: none;
    }

    .account-setup-progress li:last-of-type .account-setup-step:after {
        display: none;
    }

    .account-setup-progress .account-setup-done .account-setup-step,
    .account-setup-progress .account-setup-done .account-setup-step:before,
    .account-setup-progress .account-setup-done .account-setup-step:after {
        background-color: #92d14f !important;
    }

    .account-setup-progress .account-setup-done .account-setup-step {
        border: 3px solid #92d14f !important;
    }



    .account-setup-progress .account-setup-active .account-setup-step,
    .account-setup-progress .account-setup-active .account-setup-step:before,
    .account-setup-progress .account-setup-active .account-setup-step:after {
        background-color: #f79647 !important;
    }

    .account-setup-progress .account-setup-active .account-setup-step {
        border: 3px solid #f79647 !important;
    }

    .green {
        color: #92d14f;
    }

    .red {
        color: #ff4510;
    }

    .orange {
        color: #f79647;
    }




.title {
    margin-bottom: 30px;
    color: #162969;
}


.credit-card {
    width: 100%;
    height: 190px;
    -webkit-perspective: 600px;
    -moz-perspective: 600px;
    perspective: 600px;
}

.card__part {
    box-shadow: 1px 1px #aaa3a3;
    top: 0;
    position: absolute;
    z-index: 1000;
    left: 0;
    display: inline-block;
    width: 100%;
    height: 190px;
    background-image: url('../images/world.png'), linear-gradient(to right bottom, #0f67ec, #617bfa, #5886f6, #5074f1, #485bec);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border-radius: 8px;
}

.card__front {
    padding: 18px;
    cursor: pointer;
}


.card__black-line {
    margin-top: 5px;
    height: 38px;
    background-color: #303030;
}

.card__logo {
    height: 25px;
}

.card__front-logo {
    position: absolute;
    top: 18px;
    right: 18px;
}

.card__square {
    border-radius: 5px;
    height: 30px;
}

.card_numer {
    display: block;
    width: 100%;
    word-spacing: 4px;
    font-size: 20px;
    letter-spacing: 2px;
    color: #fff;
    text-align: center;
    margin-bottom: 20px;
    margin-top: 20px;
}

.card__space-75 {
    width: 75%;
    float: left;
}

.card__space-25 {
    width: 25%;
    float: left;
}

.card__label {
    font-size: 10px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.8);
    letter-spacing: 1px;
}

.card__info {
    margin-bottom: 0;
    margin-top: 5px;
    font-size: 14px;
    line-height: 18px;
    color: #fff;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.card__back-content {
    padding: 15px 15px 0;
}

.card__secret--last {
    color: #303030;
    text-align: right;
    margin: 0;
    font-size: 14px;
}

.card__secret {
    padding: 5px 12px;
    background-color: #fff;
    position: relative;
}

    .card__secret:before {
        content: '';
        position: absolute;
        top: -3px;
        left: -3px;
        height: calc(100% + 6px);
        width: calc(100% - 42px);
        border-radius: 4px;
        background: repeating-linear-gradient(45deg, #ededed, #ededed 5px, #f9f9f9 5px, #f9f9f9 10px);
    }

.card__back-logo {
    position: absolute;
    bottom: 15px;
    right: 15px;
}

.card__back-square {
    position: absolute;
    bottom: 15px;
    left: 15px;
}


#calendar button.fc-button {
    width: initial;
    height: initial;
    font-size: initial;
}

.black-card-edit-screen {
    width: 100%;
    height: 190px;
    background: #000;
    position: absolute;
    z-index: 9999;
    opacity: 0.6;
    cursor:pointer;
    cursor:hand;
}

.overlay-card-edit-screen {
    width: 321px;
    height: 190px;
    position: absolute;
    z-index: 9999;
    cursor: pointer;
    cursor: hand;
}

.profile-card-3 {
    float: left;
    overflow: hidden;
    width: 100%;
    text-align: center;
    height: 368px;
}

.profile-card-3 .background-block {
    float: left;
    width: 100%;
    height: 200px;
    overflow: hidden;
    background: #343a40;
}

.profile-card-3 .background-block .background {
    width: 100%;
    vertical-align: top;
    opacity: 0.9;
    -webkit-filter: blur(0.5px);
    filter: blur(0.5px);
    -webkit-transform: scale(1.8);
    transform: scale(2.8);
}

.profile-card-3 .profile {
    position: absolute;
    bottom: 50%;
    left: 50%;
    max-width: 100px;
    opacity: 1;
    box-shadow: 3px 3px 20px rgba(0, 0, 0, 0.5);
    border: 2px solid rgba(255, 255, 255, 1);
    -webkit-transform: translate(-50%, 0%);
    transform: translate(-50%, 0%);
    z-index: 99999;
}

.profile-card-3 .card-content {
    width: 100%;
    padding: 15px 25px;
    color: #232323;
    float: left;
    background: #efefef;
    height: 50%;
    border-radius: 0 0 5px 5px;
    position: relative;
    z-index: 9999;
}

.profile-card-3 .card-content::before {
    content: '';
    background: #efefef;
    width: 120%;
    height: 100%;
    left: 11px;
    bottom: 51px;
    position: absolute;
    z-index: -1;
    transform: rotate(-13deg);
}

.profile-card-3 h2 {
    margin: 0 0 5px;
    font-weight: 600;
    font-size: 25px;
}

.profile-card-3 h2 small {
    display: block;
    font-size: 15px;
    margin-top: 10px;
}

/* My plan start */

/*PRICE COLOR CODE START*/
#generic_price_table .generic_content {
background-color: #fff;
}

#generic_price_table .generic_content .generic_head_price {
background-color: #f6f6f6;
}

#generic_price_table .generic_content .generic_head_price .generic_head_content .head_bg {
    border-color: #e4e4e4 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #e4e4e4;
}

#generic_price_table .generic_content .generic_head_price .generic_head_content .head span {
    color: #525252;
}

#generic_price_table .generic_content .generic_head_price .generic_price_tag .price .sign {
    color: #414141;
}

#generic_price_table .generic_content .generic_head_price .generic_price_tag .price .currency {
    color: #414141;
}

#generic_price_table .generic_content .generic_head_price .generic_price_tag .price .cent {
    color: #414141;
}

#generic_price_table .generic_content .generic_head_price .generic_price_tag .month {
    color: #414141;
}

#generic_price_table .generic_content .generic_feature_list ul li {
color: #a7a7a7;
}

#generic_price_table .generic_content .generic_feature_list ul li span {
    color: #414141;
}



#generic_price_table .generic_content .generic_price_btn a {
    border: 1px solid #2ECC71;
    color: #2ECC71;
    pointer-events: none;
}

#generic_price_table .generic_content.active .generic_head_price .generic_head_content .head_bg {
border-color: #2ECC71 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #2ECC71;
color: #fff;
}

#generic_price_table .generic_content.active .generic_head_price .generic_head_content .head span {
color: #fff;
}

#generic_price_table .generic_content.active .generic_price_btn a {
    background-color: #2ECC71;
    color: #fff;
    pointer-events: none;
}

#generic_price_table {
margin: 50px 0 50px 0;
font-family: 'Raleway', sans-serif;
}

#myPlans .row .table {
padding: 28px 0;
}

/*PRICE BODY CODE START*/

#generic_price_table .generic_content {
overflow: hidden;
position: relative;
text-align: center;
}

#generic_price_table .generic_content .generic_head_price {
margin: 0 0 20px 0;
}

#generic_price_table .generic_content .generic_head_price .generic_head_content {
margin: 0 0 50px 0;
}

#generic_price_table .generic_content .generic_head_price .generic_head_content .head_bg {
    border-style: solid;
    border-width: 90px 1411px 23px 399px;
    position: absolute;
}

#generic_price_table .generic_content .generic_head_price .generic_head_content .head {
    padding-top: 40px;
    position: relative;
    z-index: 1;
}

    #generic_price_table .generic_content .generic_head_price .generic_head_content .head span {
        font-family: "Raleway",sans-serif;
        font-size: 28px;
        font-weight: 400;
        letter-spacing: 2px;
        margin: 0;
        padding: 0;
        text-transform: uppercase;
    }

#generic_price_table .generic_content .generic_head_price .generic_price_tag {
padding: 0 0 20px;
}

#generic_price_table .generic_content .generic_head_price .generic_price_tag .price {
    display: block;
}

    #generic_price_table .generic_content .generic_head_price .generic_price_tag .price .sign {
        display: inline-block;
        font-family: "Lato",sans-serif;
        font-size: 28px;
        font-weight: 400;
        vertical-align: middle;
    }

    #generic_price_table .generic_content .generic_head_price .generic_price_tag .price .currency {
        font-family: "Lato",sans-serif;
        font-size: 60px;
        font-weight: 300;
        letter-spacing: -2px;
        line-height: 60px;
        padding: 0;
        vertical-align: middle;
    }

    #generic_price_table .generic_content .generic_head_price .generic_price_tag .price .cent {
        display: inline-block;
        font-family: "Lato",sans-serif;
        font-size: 24px;
        font-weight: 400;
        vertical-align: bottom;
    }

#generic_price_table .generic_content .generic_head_price .generic_price_tag .month {
    font-family: "Lato",sans-serif;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 3px;
    vertical-align: bottom;
}

#generic_price_table .generic_content .generic_feature_list ul {
list-style: none;
padding: 0;
margin: 0;
}

#generic_price_table .generic_content .generic_feature_list ul li {
font-family: "Lato",sans-serif;
font-size: 18px;
padding: 15px 0;
transition: all 0.3s ease-in-out 0s;
}



#generic_price_table .generic_content .generic_feature_list ul li .fa {
    padding: 0 10px;
}

#generic_price_table .generic_content .generic_price_btn {
margin: 20px 0 32px;
}

#generic_price_table .generic_content .generic_price_btn a {
border-radius: 50px;
-moz-border-radius: 50px;
-ms-border-radius: 50px;
-o-border-radius: 50px;
-webkit-border-radius: 50px;
display: inline-block;
font-family: "Lato",sans-serif;
font-size: 18px;
outline: medium none;
padding: 12px 30px;
text-decoration: none;
text-transform: uppercase;
}

#generic_price_table .generic_content,
#generic_price_table .generic_content .generic_head_price .generic_head_content .head_bg,
#generic_price_table .generic_content .generic_head_price .generic_head_content .head h2,
#generic_price_table .generic_content .price,
#generic_price_table .generic_content .generic_price_btn a {
transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-ms-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
-webkit-transition: all 0.3s ease-in-out 0s;
}

@media (max-width: 320px) {
}

@media (max-width: 767px) {
#generic_price_table .generic_content {
margin-bottom: 75px;
}
}

@media (min-width: 768px) and (max-width: 991px) {
#generic_price_table .col-md-3 {
float: left;
width: 50%;
}

#generic_price_table .col-md-4 {
float: left;
width: 50%;
}

#generic_price_table .generic_content {
margin-bottom: 75px;
}
}

@media (min-width: 992px) and (max-width: 1199px) {
}

@media (min-width: 1200px) {
}

#generic_price_table_home {
font-family: 'Raleway', sans-serif;
}

#myPlans .text-center h1,
#myPlans .text-center h1 a {
color: #7885CB;
font-size: 30px;
font-weight: 300;
text-decoration: none;
}

#myPlans .demo-pic {
margin: 0 auto;
}


#generic_price_table_home ul {
margin: 0 auto;
padding: 0;
list-style: none;
display: table;
}

#generic_price_table_home li {
float: left;
}

#generic_price_table_home li + li {
margin-left: 10px;
padding-bottom: 10px;
}

#generic_price_table_home li a {
display: block;
width: 50px;
height: 50px;
font-size: 0px;
}

#generic_price_table_home .blue {
background: #3498DB;
transition: all 0.3s ease-in-out 0s;
}

#generic_price_table_home .emerald {
background: #2ECC71;
transition: all 0.3s ease-in-out 0s;
}

#generic_price_table_home .grey {
background: #7F8C8D;
transition: all 0.3s ease-in-out 0s;
}

#generic_price_table_home .midnight {
background: #34495E;
transition: all 0.3s ease-in-out 0s;
}

#generic_price_table_home .orange {
background: #E67E22;
transition: all 0.3s ease-in-out 0s;
}

#generic_price_table_home .purple {
background: #9B59B6;
transition: all 0.3s ease-in-out 0s;
}

#generic_price_table_home .red {
background: #E74C3C;
transition: all 0.3s ease-in-out 0s;
}

#generic_price_table_home .turquoise {
background: #1ABC9C;
transition: all 0.3s ease-in-out 0s;
}



#generic_price_table_home .divider {
border-bottom: 1px solid #ddd;
margin-bottom: 20px;
padding: 20px;
}

#generic_price_table_home .divider span {
width: 100%;
display: table;
height: 2px;
background: #ddd;
margin: 50px auto;
line-height: 2px;
}

#generic_price_table_home .itemname {
text-align: center;
font-size: 50px;
padding: 50px 0 20px;
border-bottom: 1px solid #ddd;
margin-bottom: 40px;
text-decoration: none;
font-weight: 300;
}

#generic_price_table_home .itemnametext {
text-align: center;
font-size: 20px;
padding-top: 5px;
text-transform: uppercase;
display: inline-block;
}

#generic_price_table_home .footer {
padding: 40px 0;
}

#myPlans .price-heading {
text-align: center;
}

#myPlans .price-heading h1 {
color: #666;
margin: 0;
padding: 0 0 50px 0;
}

#myPlans .demo-button {
background-color: #333333;
color: #ffffff;
display: table;
font-size: 20px;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
margin-bottom: 50px;
outline-color: -moz-use-text-color;
outline-style: none;
outline-width: medium;
padding: 10px;
text-align: center;
text-transform: uppercase;
}

#myPlans .bottom_btn {
background-color: #333333;
color: #ffffff;
display: table;
font-size: 28px;
margin: 60px auto 20px;
padding: 10px 25px;
text-align: center;
text-transform: uppercase;
}

/* My plan end*/

/* Referral Start */
#referralCoordinator .header {
    padding: 20px 16px;
    border-bottom: 1px solid #0000001a;
    background: #ffffff;
    z-index: 9;
}

#referralCoordinator .content {
    padding: 16px;
}

#referralCoordinator .centerPage {
    margin: 40px auto;
}
/* Referral End  */

/* Appointments start */

#appointments .header {
    padding: 20px 16px;
    border-bottom: 1px solid #0000001a;
    background: #ffffff;
    z-index: 9;
}

#appointments .content {
    padding: 16px;
}

#appointments .sticky {
    position: fixed;
    top: 0;
    width: 100%;
}

#appointments .sticky + .content {
    padding-top: 102px;
    padding-bottom: 102px;
}

#appointments .footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: 30px 16px;
    border-top: 1px solid #0000001a;
    background:#ffffff;
}

.list-group-item {
    background: #f4f6f9 !important;
    border: none !important;
    font-weight: bold;
    color: #212529;
    cursor: pointer;
}

.list-group-item-active {
    color: #007bff;
    border-bottom: 1px solid #2896cc;
}


.left-side {
    margin-top: 40px;
}

.right-side {
    margin-top: 40px;
}

.card-slot {
    background-color: transparent;
    margin-top: 25px;
    cursor:pointer;
}

.card-title, .card-text {
    margin: 5px !important;
}

.more-info {
    margin-left: 10px;
    font-weight: bold;
    color: #007bff;
    cursor: pointer;
}

.more-info-text {
    font-size: 14px;
    margin: 10px !important;
}

.dxbs-calendar .card-header {
    font-size: 23px;
    border-bottom: 1px #ccc solid !important;
}

.table-active {
    background-color: unset;
}

/*.dxbs-calendar.card .dxbs-today, .dxbs-calendar.card  td{
    border: none;
}*/

.dxbs-calendar .card-footer {
    display: none;
}

.dxbs-day:hover:before {
    background-color:unset;
}


.dxbs-today, .dx-blazor-calendar-selected {
    width: 50px;
}

.badge-primary {
    padding: 11px;
    margin-bottom: 16px;
}

.badge-success {
    padding: 11px;
    margin-bottom: 16px;
}

.badge.badge-light {
    padding: 11px;
    border: 1px #ccc solid;
    color: #ccc;
    margin-bottom: 16px;
}

[class*='sidebar-dark-'] .nav-treeview > .nav-item > .nav-link, [class*='sidebar-dark-'] .sidebar a, [class*='sidebar-dark-'] .nav-sidebar > .nav-item.menu-open > .nav-link {
    color: unset !important;
}

[class*='sidebar-dark-'] {
    background-color: unset;
}

#appointment-form input.form-control {
    height: calc(2.25rem + 2px) !important;
}

#appointment-form textarea.form-control {
    height: auto !important;
}

p.info {
    margin: 20px 0px;
}

p.line {
    border-bottom: 1px #ccc solid;
    margin: 20px 0px;
}

.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active {
    color: #ffffff !important;
}

[class*='sidebar-dark'] .brand-link {
    color: #004091 !important;
    font-size: 17px !important;
}

.layout-navbar-fixed .wrapper .sidebar-dark-primary .brand-link:not([class*="navbar"]) {
    background: #ffffff !important;
}

.slot{
    margin-right:10px;
    cursor:pointer;
}

.validation-error {
    outline: 1px solid red !important;
}

.appt-booked-box {
    margin-top: 50px;
}

.appt-booked-success {
    border: 1px #ccc solid;
    margin-top: 50px;
    text-align: center;
    padding: 42px 0px;
}

p.bold {
    font-weight: bold !important;
}

p.bold-text {
    font-weight: bold !important;
    font-size: 19px;
}

p.bigger-text {
    font-size: 19px;
}

p.bigger-link {
    font-weight: bold;
    font-size: 17px;
    color: #007bff;
    cursor: pointer;
}

.sub-menu a {
    background: transparent !important;
}

p.heading-text {
    font-weight: bold;
    font-size: 19px;
}

.well {
    padding: 10px;
    height: 40px;
}

p.line{
    border-bottom:1px #ccc solid;
}

.color-swatch {
    width:30px;
    height:30px;
    float:left;
    margin-right:10px;
    margin-bottom:10px;
    cursor:pointer;
}

.white-check {
    padding: 7px;
    color: #ffffff;
}

.powered-by{
    float:right;
}

.overview-active .overview-circle .btn-primary {
    background-color: #39d25c !important;
    border-color: #39d25c !important;
}

.overview-circle .btn-primary {
    color: #ffffff;
    background-color: #000;
    border-color: #000;
    box-shadow: none;
}

.overview-tab {
    height: 200px;
    margin-top: 26px;
}

.overview-active .overview-circle {
    border: 1px solid #39d25c !important;
}

.overview-circle {
    border: 1px solid #000;
    height: 200px;
    width: 200px;
    margin: 0px auto;
    background:#fff;
}
.overview-circle p:first-child {
    margin: 61px 0px 0px 0px;
    font-size: 24px;
}

.overview-active .overview-circle p {
    color: #39d25c !important;
}

.overview-circle p {
    text-align: center;
    color: #000;
}

.overview-circle i {
    font-size: 30px;
    margin-top: -10px;
}

.overview-active p {
    color: #007bff;
}

.overview-circle {
    border: 1px solid #000;
    text-align: center;
}

a.dropdown-item.dxbs-clickable.focused.bg-primary.text-white {
    color: #fff !important;
}

#register-form {
    margin-top: 31px;
    padding: 26px;
    border: 1px #e2e2e2 solid;
    background: #ffffff;
}

#registerClinic input.form-control {
    height: calc(2.25rem + 2px) !important;
}

#registerClinic textarea.form-control {
    height: auto !important;
}

#registerClinic .header {
    padding: 20px 16px;
    border-bottom: 1px solid #0000001a;
    background: #ffffff;
    z-index: 9;
}

#registerClinic .content {
    padding: 16px;
}

#registerClinic .sticky {
    position: fixed;
    top: 0;
    width: 100%;
}

#registerClinic .sticky + .content {
    padding-top: 102px;
    padding-bottom: 102px;
}

#registerClinic .footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: 30px 16px;
    border-top: 1px solid #0000001a;
    background: #ffffff;
}

#registerClinic .register-left{
    background:#007bff;
}

.note-left {
    background-color: #f0f1f2;
    padding: 10px 20px;
}

.note-right textarea {
    width: 102%;
    height: 123px;
    border: none;
}

.appointment-label {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.667;
    letter-spacing: 1px;
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #aeb1b5;
    margin-bottom: 0px;
}

.appointment-head {
    font-size: 20px;
    font-weight: 500;
}

.appointment-header {
    border-bottom: 0 solid rgba(0, 0, 0, 0.125);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.125), 0 1px 3px rgba(0, 0, 0, 0.2);
}

.appointment-time {
    font-size: 20px;
    font-weight: 500;
}

.appointment-text {
    font-size: 14px;
    margin-bottom: 5px;
}

.appt-popover {
    height: 151px;
    width: 162px;
    position: absolute;
    border: 1px #ccc solid;
    margin-top: -153px;
    margin-left: -10px;
    background: #fff;
}

.appt-popover-item {
    display: block;
    font-size: 14px;
    cursor: pointer;
    border-bottom: 1px #ccc solid;
    height: 30px;
}

.custom-popup .modal-body {
    background: #f9f9f9;
}

.progress {
    width: 200px;
    margin: 0px auto !important;
}

.progress-blank .progress-bar {
    color: #000 !important;
}

.hand{
    cursor:pointer;
}

.main-sidebar {
    background: #f4f6f9 !important;
}

#loading {
    position: absolute;
    top: 18px;
    right: 24px;
    z-index: 944;
}

#loadingStatic {
    margin: 10px 22px;
}

.common-add {
    display: inline;
    position: absolute;
    right: 117px;
}

.common-share {
    display: inline;
    position: absolute;
    right: 93px;
}

.fc-button-success {
    color: #fff;
    background-color: #28a745;
    border-color: #28a745;
}

.fc-button-success:hover {
    color: #fff;
    background-color: #218838;
    border-color: #1e7e34;
}

.fc-button-secondary {
    color: #fff;
    background-color: #007bff;
    border-color: #007bff
}

    .fc-button-secondary:hover {
        color: #fff;
        background-color: #0069d9;
        border-color: #0069d9
    }

.tooltip-coc {
    position: relative;
    display: inline-block;
}

    .tooltip-coc .tooltiptext-coc {
        visibility: hidden;
        width: 80px;
        background-color: #555;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px;
        position: absolute;
        z-index: 9999;
        bottom: 150%;
        left: 50%;
        margin-left: -40px;
        opacity: 0;
        transition: opacity 0.3s;
    }

        .tooltip-coc .tooltiptext-coc::after {
            content: "";
            position: absolute;
            top: 100%;
            left: 50%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: #555 transparent transparent transparent;
        }

    .tooltip-coc:hover .tooltiptext-coc {
        visibility: visible;
        opacity: 1;
    }

.spacer {
    margin: 20px 0px;
}

.pointer {
    cursor: pointer;
}

.cc_name {
    padding: 7px 8px;
    width: 208px;
    display: block;
    margin: 0px 0px 11px 56px;
}
.cc_month {
    padding: 7px 8px;
    width: 38px;
}
.cc_year {
    padding: 7px 15px;
    width: 68px;
}

.fc-today-button, #dropdownMenuButton i, .fc-timeGridDay-button, .fc-listWeek-button {
    display: inline-block;
}

#shareMySchedule {
    font-size: 1em;
}

.common-search {
    position: absolute;
    right: 283px;
    width: 257px;
    height: 36px;
}

.grid-search {
    width: 257px;
    height: 36px;
}

.grid-search input {
    height: 36px !important;
}
    .grid-search.search-patient-box input {
        height: 29px !important;
    }
.common-chat {
    position: absolute;
    right: 569px;
}

.utilization {
    position: absolute;
    right: 554px;
}

.search-box {
    height: 36px;
}

.search-btn {
    height: 36px;
}
.search-patient-box {
    height: 29px;
}

.search-patient-btn {
    height: 29px;
}

.common-search .input-group-text {
    background-color: #007bff;
    border: 1px solid #007bff;
    color: #ffffff;
}

.dxbs-tabs li.nav-item span {
    font-weight: bold;
}

table.dxbs-table td.bg-primary {
    background-color: #90c9ff !important
}

.padding-20-px {
    padding: 20px
}

#workflow-outer-box .col-md-3 {
    -ms-flex: 0 0 24% !important;
    flex: 0 0 24% !important;
    max-width: 24% !important;
}

.kanban-section {
    width: 313px;
    padding: 5px;
    float: left;
}

.kanban-section-header {
    margin-bottom: 20px;
    font-weight:bold;
}

.kanban-section-body {
    background: #969da90a;
}

.kanban-task {
    position: relative;
    padding: .75rem 1.25rem;
    border-radius: .25rem;
    border: 1px #ccc solid;
    background: #fff;
    margin-right: 1rem;
    min-height: 400px;
}

.kanban-therapy-color-green {
    background: #00db83;
    border: 1px #00db83 solid;
    color:#000;
}

.kanban-therapy-color-fpink {
    background: #fd5778;
    border: 1px #fd5778 solid;
    color: #fff;
}

.kanban-therapy-color-pink {
    background: #ff79fb;
    border: 1px #ff79fb solid;
    color: #000;
}

.kanban-therapy-color-yellow {
    background: #ffa820;
    border: 1px #ffa820 solid;
    color: #000;
}

.kanban-therapy-color-lite-green {
    background: #69f0ae;
    border: 1px #69f0ae solid;
    color: #000;
}



.kanban-therapy-color-purple {
    background: #7b1fa2;
    border: 1px #4a0072 solid;
    color: #fff;
}

.kanban-therapy-color-blue {
    background: #007bff;
    border: 1px #007bff solid;
    color: #fff;
}

.kanban-color-red {
    background: #ff8a80;
    border: 1px #c85a54 solid;
}

.kanban-color-red-hot {
    background: #f00;
    border: 1px #f00 solid;
    color: #ffffff;
}

.kanban-color-pink {
    border: 1px #c94f7c solid;
    background: #ff80ab
}

.kanban-color-purple {
    border: 1px #b64fc8 solid;
    background: #ea80fc
}

.kanban-color-blue {
    border: 1px #4d82cb solid;
    background: #82b1ff
}

.kanban-color-cyan {
    border: 1px #4bcbcc solid;
    background: #84ffff
}

.kanban-color-teal {
    border: 1px #75ccb9 solid;
    background: #a7ffeb
}

.kanban-color-light-green {
    border: 1px #99cc60 solid;
    background: #ccff90
}

.kanban-color-yellow {
    border: 1px #99cc60 solid;
    background: #cacc5d
}

.kanban-color-orange {
    border: 1px #caa052 solid;
    background: #ffd180
}

.kanban-color-deep-orange {
    border: 1px #c96f53 solid;
    background: #ff9e80
}

.kanban-color-black {
    border: 1px #000000 solid;
    background: #000000;
    color: #ffffff;
}

.kanban-user {
    text-align: center;
    vertical-align: middle;
    float: left;
}

.kanban-user-circle {
    border-radius: 200px;
    height: 28px;
    font-weight: bold;
    width: 28px;
    display: table;
}
.kanban-user-circle-sub {
    border-radius: 254px;
    height: 20px;
    font-weight: bold;
    width: 20px;
    font-size: 12px;
    display: table;
}

.kanban-no-user, .kanban-no-schedule {
    color: #ccc;
    font-size: 25px;
}

.kanban-user-circle p, .kanban-user-circle-sub  p{
    vertical-align: middle;
    display: table-cell;
}

.kanban-date, .kanban-generic {
    float: left;
    margin-left: 10px;
}

.kanban-date-sub {
    font-size: 12px;
    margin-top: 5px;
    font-weight: bold;
}

.kanban-comments {
    float: right
}

.kanban-task-footer {
    margin-top: 57px;
}

.kanban-add-task {
    text-align: center;
    border: 1px transparent solid;
    cursor: pointer;
    padding: 5px;
}

.kanban-add-task:hover {
    background: #151b260a;
}

#KanBanOuter {
    min-width: 1952px;
}

.mark-completed:hover {
    color: #25e8c8;
}

.completed {
    color: #25e8c8;
}

.btn-normal {
    color: #6c757d;
    background-color: #ffffff;
    border-color: #6c757d;
    padding: 0px 5px;
    font-size: 12px;
    margin: 5px 0px 5px;
}

.btn-normal:hover {
    color: #00bf9c;
    background: #e2fffa;
    border-color: #00bf9c;
}

.btn-normal-completed {
    color: #00bf9c;
    background: #e2fffa;
    border-color: #00bf9c;
}

.border-bottom-line {
    border-bottom: 1px #ccc solid;
}

.pull-right {
    float:right;
}

.margin-spacing {
    margin: 10px 0px 10px 0px;
}

.kanban-taskpopup .dxbs-day.dx-blazor-calendar-selected.table-active {
    border: 1px solid #107ce8;
}

.kanban-taskpopup .dxbs-day.dxbs-weekend.text-danger.dxbs-today.dx-blazor-calendar-selected.table-active {
    border: none;
}

.kanbanlog {
    background: #efefef;
    padding: 5px;
}

kanbanlog-header{

}

.kanbanlog-name {
    float: left;
    text-align: left;
    font-weight: bold;
}

.kanbanlog-time {
    float: right;
    text-align: right;
    font-size: 12px;
}

.kanbanlog-body {
    text-align: left;
    display: block;
    clear: both;
    font-size: 16px;
}

.draggable-source--is-dragging {
    visibility: hidden;
}

.primary-span {
    font-size: 11px;
    color: green;
    font-weight: bold;
}

.kanban-colorpicker-colorNone {
    background-color: #f6f8f9;
    border: 1px solid #ccc;
    color: #000;
}

.kanban-colorpicker-colorRed {
    background-color: #fb5779;
    color: #fff;
}

.kanban-colorpicker-colorOrange {
    background-color: #ff7511;
    color: #331a00;
}

.kanban-colorpicker-colorYellowOrange {
    background-color: #ffa800;
    color: #4d3400;
}

.kanban-colorpicker-colorTeal600 {
    background-color: #00897B;
    color: #ffffff;
}

.kanban-colorpicker-colorYellow {
    background-color: #ffd100;
    color: #574500;
}


.kanban-colorpicker-colorYellowGreen {
    background-color: #ace60f;
    color: #3c5007;
}

.kanban-colorpicker-colorGreen {
    background-color: #19db7e;
    color: #084426;
}

.kanban-colorpicker-colorBlueGreen {
    background-color: #00d4c8;
    color: #00423f;
}

.kanban-colorpicker-colorAqua {
    background-color: #48dafd;
    color: #02485a;
}

.kanban-colorpicker-colorBlue {
    background-color: #0064fb;
    color: #fff;
}

.kanban-colorpicker-colorIndigo {
    background-color: #6457f9;
    color: #fff;
}

.kanban-colorpicker-colorCyan200 {
    background-color: #80DEEA;
    color: #000;
}

.kanban-colorpicker-colorCodeYellow {
    background-color: #fbc02d;
    color: #0a0a0a;
}

.kanban-colorpicker-colorBlueA100 {
    background-color: #82B1FF;
    color: #000;
}
.kanban-colorpicker-colorCodePink {
    background-color: #ff9cbc;
    color: #000;
}


.kanban-colorpicker-incomplete {
    color: #f00;
}

.kanban-colorpicker-complete {
    color: #00db83
}

.kanban-generic-block {
    display: block;
    border-top: 1px #e5e5e5 solid;
    border-bottom: 1px #e5e5e5 solid;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: bold;
}

.kanban-colorpicker-colorPurple {
    background-color: #9f46e4;
    color: #fff;
}

.kanban-colorpicker-colorMagenta {
    background-color: #ff78ff;
    color: #570057;
}

.kanban-colorpicker-colorHotPink {
    background-color: #ff4ba6;
    color: #fff;
}

.kanban-colorpicker-colorPink {
    background-color: #ff93af;
    color: #6b001d;
}

.kanban-colorpicker-colorCoolGray {
    background-color: #5a7896;
    color: #fff;
}

.line {
    border-bottom: 1px #ccc solid;
    width: 100%;
    margin-bottom: 5px;
}

@-webkit-keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.hide-task {
    display: none;
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut;
}

.kanbanCalendar {
    position: absolute !important;
    z-index: 1 !important;
    margin-top: 10px !important;
}

.assigneeUsersPopup {
    position: absolute;
    width: 200px;
    z-index: 999;
    border: 1px #ccc solid;
    background: #fff;
}

.assigneeUsersPopup-user {
    text-align: center;
    border-bottom: 1px #ccc solid;
}
.loader-text {
    margin: 5px;
    text-align: center;
    background: #fff;
    width: 800px;
    height: 600px;
}

.noscroll {
    overflow: hidden;
}

.overlay {
    position: fixed;
    overflow-y: scroll;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 99999;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

@keyframes blink {
    50% {
        color: transparent
    }
}

.loader__dot {
    animation: 1s blink infinite
}

.loader__dot:nth-child(2) {
    animation-delay: 250ms
}

.loader__dot:nth-child(3) {
    animation-delay: 500ms
}

.calender-legends {
    border: 1px #ddd solid;
    padding: 0px;
    margin: 10px 0px;
    background: #fff;
}

.calender-legends-title {
    text-align: center;
    color: #fff;
    background-color: #2C3E50;
    border-color: #2C3E50;
    margin: 0px;
    padding: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.calender-legends-body{

}

.calender-legend {
    float: left;
    margin-right: 15px;
}

.calender-legend-color {
    width: 10px;
    height: 10px;
    float: left;
    margin-top: 8px;
}

.calender-legend-text {
    float: left;
    margin-left: 5px;
}

.fc-unthemed td.fc-today {
    background: #ffffff38 !important;
}

.fc-today a {
    color: #f00 !important;
}

td.fc-today a {
    font-weight: bold;
}

.documentation-patient-list {
    height: 754px;
    overflow-y: scroll;
}

.documentation-patient-list .list-group {
    margin-left: 0 !important;
}

.documentation-patient-list .list-group-item.active {
    z-index: 2;
    color: #ffffff;
    background: #007bff !important;
    border: 1px #007bff solid !important;
}

#evaluation-page{
    padding:20px
}

#evaluation-page textarea {
    resize:none
}

#evaluation-page .borders {
    border: 1px #ccc solid;
}

#evaluation-page .left {
    background: #dadfe6;
    padding: 3px 8px;
}

#evaluation-page .right {
    background: #fff;
    padding: 3px 8px;
}

#evaluation-page .section {
    margin-top:10px
}

#poc-page {
    padding: 20px
}

#poc-page textarea {
    resize: none
}

#poc-page .borders {
    border: 1px #ccc solid;
}

#poc-page .left {
    background: #dadfe6;
    padding: 3px 8px;
}

#poc-page .right {
    background: #fff;
    padding: 3px 8px;
}

#poc-page .section {
    margin-top: 10px
}

.dxbs-combobox .form-control:disabled, .dxbs-combobox .form-control[readonly] {
    background-color: #e9ecef;
    opacity: 1;
}

.dx-blazor-checkbox.valid.modified .custom-control-input:checked + .custom-control-label::before, .dx-blazor-checkbox.valid.modified .custom-switch .custom-control-label::before, .dx-blazor-checkbox.valid.modified .custom-switch .custom-control-label::after {
    background-color: #007bff;
}

.custom-switch .custom-control-label::after {
    -webkit-box-shadow: 0 1px 4px 0 rgb(0 0 0 / 30%);
    box-shadow: 0 1px 4px 0 rgb(0 0 0 / 30%);
    background-color: #fff !important;
}

.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
    background-color: #007bff !important;
}

.bold {
    font-weight: bold
}

.custom-control-input:checked ~ .custom-control-label::before {
    color: #ffffff;
    border-color: #80bdff;
    background-color: #80bdff;
    box-shadow: none;
}

.ModalitiesTagBox {
    border: 1px #ccc solid;
    margin-bottom: 10px;
}

.new-progress-note {
    margin: 7px 0px;
    float: right;
}

.diag-codes {
    cursor: pointer;
    border: 1px #858688 solid;
    padding: 1px;
    background: #e9ecef;
    margin-right: 5px;
}

.btn-appt {
    font-size: 12px;
    float:left;
}

#documentation-main-page .dxbs-fixed-header-content {
    text-align: center
}

.noshow-color button {
    background: #323232 !important;
    color: #ffffff !important;
    border: 1px #323232 solid !important;
}

.revert-noshow-color button {
    background: #323232 !important;
    color: #ffffff !important;
    border: 1px #323232 solid !important;
}

.cancelled-color button {
    background: #870303 !important;
    color: #ffffff !important;
    border: 1px #870303 solid !important;
}

.change-color button {
    background: #DBA800 !important;
    color: #ffffff !important;
    border: 1px #DBA800 solid !important;
}

.delete-color button {
    background: #dc3545 !important;
    color: #ffffff !important;
    border: 1px #dc3545 solid !important;
}

.discharge-color button {
    background: #795548 !important;
    color: #ffffff !important;
    border: 1px #795548 solid !important;
}

.close-color button {
    background: #D6E4E5 !important;
    color: #000000 !important;
    border: 1px #D6E4E5 solid !important;
}

.rtb-color button {
    background: #6f42c1 !important;
    color: #ffffff !important;
    border: 1px #6f42c1 solid !important;
}

.completed-color button {
    background: #428142 !important;
    color: #ffffff !important;
    border: 1px #428142 solid !important;
}
.sub-of-sub-menu {
    position: absolute !important;
    z-index: 9 !important;
    background: rgb(244, 246, 249) !important;
}

#select-location .list-group {
    margin-left: 0px !important
}

#view-patient ul.nav-tabs {
    display: none !important
}

.findslots-data-popup ul.nav-tabs {
    display: none !important
}

.findslots-data-popup > .modal-content > .modal-body {
    margin-top: 0px !important;
    padding: 9px !important;
}

.findslots-data-popup .modal-body {
    overflow-x: hidden !important;
}


.findslots-data-popup .nav-link-active, #view-patient .nav-link-active {
    border: 1px #007bff30 solid;
    background: #007bff30;
    color: #007bff;
}

.patient-data-popup ul.nav-tabs {
    display: none !important
}

.patient-data-popup > .modal-content > .modal-body {
    margin-top: 0px !important;
    padding: 0px !important;
}

.patient-data-popup .modal-body {
    overflow-x: hidden !important;
}


.patient-data-popup .nav-link-active, #view-patient .nav-link-active {
    border: 1px #007bff30 solid;
    background: #007bff30;
    color: #007bff;
}

.card {
    box-shadow: 0 0 5px rgb(0 0 0 / 13%), 0 4px 3px rgb(0 0 0 / 20%) !important;
    margin-bottom: 1rem;
}

#patient-doc-sec .dxbs-table thead tr:first-child {
    background: #007bff;
    color: #fff;
}

#patient-doc-sec .EvalGrid .dxbs-table thead tr:first-child th.dxbs-toggle-cell:first-child {
    background: #fff !important;
}

#patient-doc-sec .ProgressNoteGrid .dxbs-table thead tr:first-child th:first-child {
    background: #007bff !important;
}

#patient-doc-sec .dxbs-table .oi-arrow-bottom {
    color: #fff;
}

.patient-data-popup .nav-sidebar .nav-link {
    padding: 10px 5px !important;
}

.patient-data-popup .nav-pills .nav-link, #view-patient .nav-pills .nav-link {
    color: #3e4348 !important;
}

.sub-card {
    background-color: #e9ecef !important;
}

#main-search .form-control, #other-main-search .form-control {
    height: 36px;
}

.patient-data-popup .dxbs-combobox .form-control[readonly], #view-patient .dxbs-combobox .form-control[readonly] {
    background-color: #ffffff !important;
}
.patient-data-popup {
    margin-bottom: 100px;
}
.filterRole {
    width:200px
}

.blue-table .dxbs-table thead tr:first-child {
    background: #007bff !important;
    color: #fff !important;
}

.default-header-color {
    background: #007bff !important;
    color: #fff !important;
}

.card-invalid {
    border:1px #ff4510 solid;
}

.textarea-comment textarea {
    resize: none;
    border: none;
    width: 100%;
    padding: 13px;
    border: 1px #ccc solid;
    outline: none;
}

.status-cue-default {
    color: #00db83;
}

.kanban-generic-icon {
    font-size: 25px;
}

.DxMemo {
    border: none;
    width: 100%;
    outline: none;
}

.DxMemo textarea {
    resize: none !important;
}

.fc-time-grid .fc-slats td {
    height: 4.5em !important;
    border-bottom: 0;
}

.PatientFileStatus{
    margin-bottom:78px
}

.grey-line {
    border-bottom: 1px #b9b9b9 solid;
}
.light-grey-line {
    border-bottom: 1px #e9e9e9 solid;
}

.float-left{
    float:left !important;
}

.toast-warning {
    color:#000000 !important;
}

#workflow-outer-box .dxbs-tabs {
    background: #f4f6f9 !important;
}

#worflow-filters {
    width: 240px;
    float: left;
    margin-right: 20px;
}

#patient-filter {
    width: 150px;
    float: left;
    margin-right: 20px;
}


#worflow-section {
    width: 157px;
    float: left;
}

.workflow-helper {

}

.clearfix {
    clear:both
}

#workflow-outer-box .workflow-area .col-xl-4 {
    max-width: 31.333333% !important;
}

#global-search-results {
    border-collapse: collapse;
    width: 100%;
}

#global-search-results td, #global-search-results th {
    border: 1px solid #ddd;
    padding: 8px;
}

#global-search-results tr:nth-child(even) {
    background-color: #f2f2f2;
}

#global-search-results tr:hover {
    background-color: #ddd;
}

#global-search-results th {
    padding-top: 4px;
    padding-bottom: 4px;
    text-align: left;
    background-color: #007bff;
    color: white;
}

.card-header-sub-header {
    background-color: #d9d9d9;
    font-weight: bold;
    text-align: center;
}

button.btn.btn-flat.btn-white {
    color: #000000;
    background-color: #ffffff;
    border-color: #000000;
}

.column-selector {
    border: 1px #ccc solid;
    padding: 5px;
    text-align: center;
    margin-bottom: 5px;
}

.column-selector-selected {
    border: 1px #17a2b8 solid;
}

.loginAsBtn {
    position: absolute;
    right: 670px;
}

.notificationsBtn {
    position: absolute;
    right: 785px;
}
.signOutBtn {
    position: absolute;
    right: 17px;
    padding: 0.25rem 0.3rem;
}
.topbarMenubtnPadding {
    padding: 0.25rem 0.3rem;
}
.required-field {
    color: red;
}

/* timeline start */
.timeline_area {
    position: relative;
    z-index: 1;
}

.single-timeline-area {
    position: relative;
    z-index: 1;
    padding-left: 180px;
}

    .single-timeline-area .timeline-date {
        position: absolute;
        width: 180px;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 1;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -ms-grid-row-align: center;
        align-items: center;
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
        padding-right: 60px;
    }

        .single-timeline-area .timeline-date::after {
            position: absolute;
            width: 3px;
            height: 100%;
            content: "";
            background-color: #ebebeb;
            top: 0;
            right: 30px;
            z-index: 1;
        }

        .single-timeline-area .timeline-date::before {
            position: absolute;
            width: 11px;
            height: 11px;
            border-radius: 50%;
            background-color: #0069d9;
            content: "";
            top: 50%;
            right: 26px;
            z-index: 5;
            margin-top: -5.5px;
        }

        .single-timeline-area .timeline-date p {
            margin-bottom: 0;
            color: #020710;
            font-size: 13px;
            text-transform: uppercase;
            font-weight: 500;
        }

    .single-timeline-area .single-timeline-content {
        position: relative;
        z-index: 1;
        padding: 14px 25px 14px;
        border-radius: 6px;
        margin-bottom: 15px;
        margin-top: 15px;
        -webkit-box-shadow: 0 0.25rem 1rem 0 rgba(47, 91, 234, 0.125);
        box-shadow: 0 0.25rem 1rem 0 rgba(47, 91, 234, 0.125);
        border: 1px solid #ebebeb;
    }

        .single-timeline-area .single-timeline-content .timeline-icon {
            -webkit-transition-duration: 500ms;
            transition-duration: 500ms;
            width: 30px;
            height: 30px;
            background-color: #0069d9;
            -webkit-box-flex: 0;
            -ms-flex: 0 0 30px;
            flex: 0 0 30px;
            text-align: center;
            max-width: 30px;
            border-radius: 50%;
            margin-right: 15px;
        }

            .single-timeline-area .single-timeline-content .timeline-icon i {
                color: #ffffff;
                line-height: 30px;
            }

        .single-timeline-area .single-timeline-content .timeline-text h6 {
            -webkit-transition-duration: 500ms;
            transition-duration: 500ms;
        }

        .single-timeline-area .single-timeline-content .timeline-text p {
            font-size: 13px;
            margin-bottom: 0;
        }

        .timeline-text {
            margin-top: 5px;
        }
/* timeline end */
@media all and (min-width:769px) and (max-width: 800px) {
    /* put your css styles in here */
    #calendar button.fc-button {
            width: 45px;
            height: 30px;
            font-size: 10px;
        }

        #calendar .fc-toolbar h2 {
            font-size: 14px !important;
        }

        ol.account-setup-progress li {
            font-size: 10px;
        }
    }

    @media all and (min-width:569px) and (max-width: 768px) {
        /* put your css styles in here */
        #calendar button.fc-button {
            width: 45px;
            height: 30px;
            font-size: 10px;
        }

        #calendar .fc-toolbar h2 {
            font-size: 14px !important;
        }

        ol.account-setup-progress li {
            font-size: 10px;
        }
    }

    @media all and (min-width:481px) and (max-width: 568px) {
        /* put your css styles in here */
        #calendar button.fc-button {
            width: 45px;
            height: 30px;
            font-size: 10px;
        }

        #calendar .fc-toolbar h2 {
            font-size: 14px !important;
        }

        ol.account-setup-progress li {
            font-size: 10px;
        }

        .single-timeline-area {
            padding-left: 100px;
        }

        .single-timeline-area .timeline-date {
            width: 100px;
        }

        .single-timeline-area .single-timeline-content {
            padding: 20px;
        }
    }

    @media all and (min-width:321px) and (max-width: 480px) {
        /* put your css styles in here */
        #calendar button.fc-button {
            width: 45px;
            height: 30px;
            font-size: 10px;
        }

        #calendar .fc-toolbar h2 {
            font-size: 14px !important;
        }

        ol.account-setup-progress li {
            font-size: 10px;
        }
    }

    @media all and (min-width:0px) and (max-width: 320px) {
        /* put your css styles in here */
        #calendar button.fc-button {
            width: 45px;
            height: 30px;
            font-size: 10px;
        }

        #calendar .fc-toolbar h2 {
            font-size: 10px !important;
        }

        ol.account-setup-progress li {
            font-size: 10px;
        }
    }

    @media only screen and (max-width: 768px) {
        /* For mobile phones: */
        .list-group {
            margin-left: 0px;
        }

        #calendar-page .dxbs-calendar {
            width: 329px !important;
        }

        #calendar-page .dxbs-month-table {
            width: 311px !important;
            height: 251px !important;
        }

        #calendar-page table.dxbs-month-table tr td:first-child {
            display: none !important;
            height: 45px;
        }

        #calendar-page table.dxbs-month-table tr th {
            height: 30px;
        }

        .alert-heading {
            font-size: 20px;
        }

        #calendar-page .calendar-page {
            /* text-align: center; */
        }

        #calendar-page .dxbs-today span {
            background: #007bff;
            border: 2px solid #007bff !important;
            color: #ffffff !important;
            border-radius: 50% 50% !important;
            /* padding: 7px 9px;*/
        }

        #calendar-page .dxbs-day span {
            border: 2px solid #007bff !important;
            color: #000000 !important;
            border-radius: 50% 50% !important;
            /* padding: 7px 9px;*/
        }

            #calendar-page .dxbs-day span:hover {
                background: #007bff;
                color: #ffffff !important;
            }

        .embed-logo {
            margin-left: 6px;
        }

        .selected-group-item {
            font-weight: normal !important;
            padding: 15px !important;
            margin-bottom: 1px !important;
            width: 224px;
            color: #212529;
            border: 1px #000 solid !important
        }
    }

    @media only screen and (min-width: 992px) {

        .list-group {
            margin-left: 17px;
        }


        #calendar-page .dxbs-calendar {
            width: 671px !important;
        }

        #calendar-page .dxbs-month-table {
            width: 650px;
            height: 365px;
        }

        #calendar-page table.dxbs-month-table tr td:first-child {
            display: none !important;
            height: 45px;
        }

        #calendar-page table.dxbs-month-table tr th {
            height: 30px;
        }

        #calendar-page .dxbs-today span {
            background: #007bff;
            border: 2px solid #007bff !important;
            color: #ffffff !important;
            border-radius: 50% 50% !important;
            /*padding: 12px 14px;*/
        }

        #calendar-page .dxbs-day span {
            border: 2px solid #007bff !important;
            color: #000000 !important;
            border-radius: 50% 50% !important;
            /* padding: 12px 14px;*/
        }

            #calendar-page .dxbs-day span:hover {
                background: #007bff;
                color: #ffffff !important;
            }

        .embed-logo {
            margin-left: 21px;
        }

        .selected-group-item {
            font-weight: normal !important;
            padding: 15px !important;
            margin-bottom: 1px !important;
            width: 286px;
            border: 1px #000 solid !important
        }

        .medium-popup {
            max-width: 600px !important;
        }

        .xl-medium-popup {
            max-width: 800px !important;
        }

        .large-popup {
            max-width: 1000px !important;
        }

        .xl-large-popup {
            max-width: 1100px !important;
        }

        .super-large-popup {
            max-width: 1450px !important;
        }
    }
    /* Extra large devices (large laptops and desktops, 1200px and up) */
    @media only screen and (min-width: 1200px) {

        .col-xl-4 {
            -ms-flex: 0 0 32.333333%;
            flex: 0 0 32.333333%;
            max-width: 32.333333%;
        }

        .list-group {
            margin-left: 150px;
        }


        #calendar-page .dxbs-calendar {
            width: 671px !important;
        }

        #calendar-page .dxbs-month-table {
            width: 650px;
            height: 365px;
        }

        #calendar-page table.dxbs-month-table tr td:first-child {
            display: none !important;
            height: 45px;
        }

        #calendar-page table.dxbs-month-table tr th {
            height: 30px;
        }

        #calendar-page .dxbs-day span {
            border: 2px solid #007bff !important;
            color: #000000 !important;
            border-radius: 50% 50% !important;
            /*        padding: 12px 14px;*/
        }

        #calendar-page .dx-blazor-calendar-selected span {
            border: 2px solid #007bff !important;
            color: #ffffff !important;
            border-radius: 50% 50% !important;
            /*        padding: 12px 14px;*/
            background: #007bff !important;
        }

        .disabled span {
            border: none !important;
        }

        #calendar-page .dxbs-today span {
            background: #007bff;
            border: 2px solid #007bff !important;
            color: #ffffff !important;
            border-radius: 50% 50% !important;
            /*        padding: 12px 14px;*/
        }

        #calendar-page .dxbs-day span:hover {
            background: #007bff;
            color: #ffffff !important;
        }

        .embed-logo {
            margin-left: 127px;
        }

        .selected-group-item {
            font-weight: normal !important;
            padding: 15px !important;
            margin-bottom: 1px !important;
            width: 286px;
            border: 1px #000 solid !important
        }

        .setting-text {
            margin-top: 20px
        }

        .medium-popup {
            max-width: 600px !important;
        }

        .large-popup {
            max-width: 1000px !important;
        }

        .xl-large-popup {
            max-width: 1100px !important;
        }
        .super-large-popup {
            max-width: 1450px !important;
        }
    }

@media (max-width: 768px) {
    .btn-icon-only {
        font-size: 0 !important; /* hide text */
        width: 40px; /* optional fixed width */
        padding: 8px; /* adjust as needed */
    }

        .btn-icon-only i {
            font-size: 16px; /* keep icon visible */
            margin: 0; /* remove any margin if present */
        }
}
    /* Appointments end */
    .warningBlock {
        padding: 3px;
        background: #ffff0078;
        border: 1px solid #ffff00;
        font-size: 14px;
    }

        .warningBlock a {
            cursor: pointer;
            color: #007bff !important;
            text-decoration: underline !important;
        }

    i.disabledRx {
        pointer-events: none;
        color: #cccccc !important;
        border: 2px solid #cccccc !important;
    }

    .disabledCheckin {
        pointer-events: none;
        background-color: #28a745b3;
        border-color: #28a745b3;
    }

    .selected-file {
        border: 1px #008000 solid;
        padding: 5px;
        color: #008000;
    }

    .normal-file {
        border: 1px #ccc solid;
        padding: 5px;
        color: #000;
    }

    .selected-file-line {
        border-top: 1px #008000 solid;
        padding-top: 7px;
    }

    .normal-file-line {
        border-top: 1px #ccc solid;
        padding-top: 7px;
    }

    .paymentCb .custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before {
        border: #adb5bd solid 1px;
        background-color: #ffffff;
    }

    .paymentCb .custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::after {
        background-image: none;
    }

    .reportListBox .list-group {
        margin-left: 0px;
    }

        .reportListBox .list-group .list-group-item {
            padding: 0.25rem !important;
        }

    .reportTable.dxbs-gridview .dxbs-fixed > thead > tr > th, .reportTable.dxbs-gridview .dxbs-fixed > tbody > tr > td, .reportTable.dxbs-gridview .dxbs-fixed > tfoot > tr > td
    td {
        white-space: normal;
    }

    .text-notstarted {
        color: #2817b8 !important
    }

    #main-reports-div td.text-left {
        padding-left: 10px
    }

    .TimerDiv {
        margin-bottom: 0px;
        font-weight: bold;
    }

    .visibility-hidden {
        visibility: hidden !important;
    }

    /*Chat css*/
    .box {
        height: 100px;
        width: 200px;
        border: 1px solid gray;
        overflow: hidden;
        overflow-y: auto;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        opacity: 0.85;
    }

    .tb {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }

        .tb > li:nth-child(odd) {
            background-color: #D2D2D2;
        }

        .tb > li:nth-child(even) {
            background-color: transparent;
        }

.msg_container_base {
    background: #f9f9f9;
    margin: 0;
    padding: 0 10px 10px;
    max-height: 73vh;
    overflow-x: hidden;
    height: 100%;
}

    .top-bar {
        background: #666;
        color: white;
        padding-top: 5px;
        position: relative;
        overflow: hidden;
        margin-top: 2px;
    }

    .messages > p.chatTime {
        float: right;
        font-size: 10px;
        position: relative;
        top: 6px;
        padding-left: 5px;
    }

    .msg_receive {
        padding-left: 0;
        margin-left: 0;
    }

    .msg_sent {
        /* padding-bottom: 20px !important; */
        margin-right: 0;
    }

    .messages {
        background: white;
        padding: 4px;
        border-radius: 5px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
        max-width: 100%;
    }

        .messages > p {
            font-size: medium;
            margin: 0 0 0.2rem 0;
        }

        .messages > time {
            font-size: 11px;
            color: #ccc;
        }

        .messages.group_Messages > p {
            font-size: small;
            margin: 0 0 0.2rem 0;
        }

    .msg_container {
        padding: 10px;
        overflow: hidden;
        display: flex;
    }

    /*img {
    display: block;
    width: 100%;
}*/

    .avatar {
        position: relative;
    }

    .base_receive > .avatar:after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 0;
        height: 0;
        border: 5px solid #FFF;
        border-left-color: rgba(0, 0, 0, 0);
        border-bottom-color: rgba(0, 0, 0, 0);
    }

    .base_sent {
        justify-content: flex-end;
        align-items: flex-end;
    }

    .base_newUser {
        justify-content: center;
        align-items: center;
        color: #007bff;
    }

    .base_sent > .avatar:after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 0;
        height: 0;
        border: 5px solid white;
        border-right-color: transparent;
        border-top-color: transparent;
        box-shadow: 1px 1px 2px rgba(black, 0.2);
    }

    .msg_sent > time {
        float: right;
    }

    .msg_container_base::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        background-color: #F5F5F5;
    }

    .msg_container_base::-webkit-scrollbar {
        width: 12px;
        background-color: #F5F5F5;
    }

    .msg_container_base::-webkit-scrollbar-thumb {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
        background-color: #555;
    }

    .btn-group.dropup {
        position: fixed;
        left: 0px;
        bottom: 0;
    }

    .ChartViewClass {
        float: right;
        width: 300px;
        margin-bottom: 10px;
    }
    /* Money Slider Start */
    #money-slider .range-slider.grad {
        --progress-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2) inset;
        --progress-flll-shadow: var(--progress-shadow);
        --fill-color: linear-gradient(to right, LightCyan, var(--primary-color));
        --thumb-shadow: 0 0 4px rgba(0, 0, 0, 0.3), -3px 9px 9px rgba(255, 255, 255, 0.33) inset, -1px 3px 2px rgba(255, 255, 255, 0.33) inset, 0 0 0 99px var(--primary-color) inset;
    }

        #money-slider .range-slider.grad input:hover {
            --thumb-transform: scale(1.2);
        }

        #money-slider .range-slider.grad input:active {
            --thumb-shadow: inherit;
            --thumb-transform: scale(1);
        }

    #money-slider .range-slider.flat {
        --thumb-size: 25px;
        --track-height: calc(var(--thumb-size) / 3);
        --progress-shadow: none;
        --progress-flll-shadow: none;
        --thumb-shadow: 0 0 0 7px var(--primary-color) inset, 0 0 0 99px white inset;
        --thumb-shadow-hover: 0 0 0 9px var(--primary-color) inset, 0 0 0 99px white inset;
        --thumb-shadow-active: 0 0 0 13px var(--primary-color) inset;
    }

    #money-slider .range-slider.overlay {
        --primary-color: #d6e9ff;
        --track-height: 50px;
        --thumb-size: var(--track-height);
        --thumb-color: var(--primary-color);
        --thumb-shadow: none;
        --progress-flll-shadow: none;
        --progress-shadow: none;
        --progress-background: none;
        --progress-radius: 0px;
        --ticks-color: var(--primary-color);
        --ticks-height: 0;
        --ticks-thickness: 0;
        --ticks-gap: 0px;
        --min-max-font: 700 18px Arial;
        --min-max-opacity: 1;
        --show-min-max: none;
        color: #0366d6;
    }

        #money-slider .range-slider.overlay input:hover {
            --thumb-shadow: calc(25px - (50px * var(--is-left-most))) 0 0 -15px #0366d6 inset;
        }

        #money-slider .range-slider.overlay input:active {
            --thumb-color: inherit;
        }

        #money-slider .range-slider.overlay .range-slider__values {
            width: calc(100% - 50% / (var(--max) - var(--min)));
        }

    #money-slider .range-slider {
        --primary-color: #06d603;
        --value-offset-y: var(--ticks-gap);
        --value-active-color: white;
        --value-background: transparent;
        --value-background-hover: var(--primary-color);
        --value-font: 700 12px/1 Arial;
        --fill-color: var(--primary-color);
        --progress-background: #eee;
        --progress-radius: 20px;
        --track-height: calc(var(--thumb-size) / 2);
        --min-max-font: 12px Arial;
        --min-max-opacity: 0.5;
        --min-max-x-offset: 10%;
        --thumb-size: 22px;
        --thumb-color: white;
        --thumb-shadow: 0 0 3px rgba(0, 0, 0, 0.4), 0 0 1px rgba(0, 0, 0, 0.5) inset, 0 0 0 99px var(--thumb-color) inset;
        --thumb-shadow-active: 0 0 0 calc(var(--thumb-size) / 4) inset var(--thumb-color), 0 0 0 99px var(--primary-color) inset, 0 0 3px rgba(0, 0, 0, 0.4);
        --thumb-shadow-hover: var(--thumb-shadow);
        --ticks-thickness: 1px;
        --ticks-height: 5px;
        --ticks-gap: var( --ticks-height, 0 );
        --ticks-color: #000000;
        --step: 1;
        --ticks-count: Calc(var(--max) - var(--min)) / var(--step);
        --maxTicksAllowed: 30;
        --too-many-ticks: Min(1, Max(var(--ticks-count) - var(--maxTicksAllowed), 0));
        --x-step: Max( var(--step), var(--too-many-ticks) * (var(--max) - var(--min)) );
        --tickInterval: 100/ ((var(--max) - var(--min)) / var(--step)) * var(--tickEvery, 1);
        --tickIntervalPerc: calc( (100% - var(--thumb-size)) / ((var(--max) - var(--min)) / var(--x-step)) * var(--tickEvery, 1) );
        --value-a: Clamp( var(--min), var(--value, 0), var(--max) );
        --value-b: var(--value, 0);
        --text-value-a: var(--text-value, "");
        --completed-a: calc( (var(--value-a) - var(--min)) / (var(--max) - var(--min)) * 100 );
        --completed-b: calc( (var(--value-b) - var(--min)) / (var(--max) - var(--min)) * 100 );
        --ca: Min(var(--completed-a), var(--completed-b));
        --cb: Max(var(--completed-a), var(--completed-b));
        --thumbs-too-close: Clamp( -1, 1000 * (Min(1, Max(var(--cb) - var(--ca) - 5, -1)) + 0.001), 1 );
        --thumb-close-to-min: Min(1, Max(var(--ca) - 2, 0));
        --thumb-close-to-max: Min(1, Max(98 - var(--cb), 0));
        display: inline-block;
        height: max(var(--track-height), var(--thumb-size));
        background: linear-gradient(to right, var(--ticks-color) var(--ticks-thickness), transparent 1px) repeat-x;
        background-size: var(--tickIntervalPerc) var(--ticks-height);
        background-position-x: calc( var(--thumb-size) / 2 - var(--ticks-thickness) / 2 );
        background-position-y: var(--flip-y, bottom);
        padding-bottom: var(--flip-y, var(--ticks-gap));
        padding-top: calc(var(--flip-y) * var(--ticks-gap));
        position: relative;
        z-index: 1;
    }

        #money-slider .range-slider[data-ticks-position=top] {
            --flip-y: 1;
        }

        #money-slider .range-slider::before, #money-slider .range-slider::after {
            --offset: calc(var(--thumb-size) / 2);
            content: counter(x);
            display: var(--show-min-max, block);
            font: var(--min-max-font);
            position: absolute;
            bottom: var(--flip-y, -2.5ch);
            top: calc(-2.5ch * var(--flip-y));
            opacity: clamp(0, var(--at-edge), var(--min-max-opacity));
            transform: translateX(calc(var(--min-max-x-offset) * var(--before, -1) * -1)) scale(var(--at-edge));
            pointer-events: none;
        }

        #money-slider .range-slider::before {
            --before: 1;
            --at-edge: var(--thumb-close-to-min);
            counter-reset: x var(--min);
            left: var(--offset);
        }

        #money-slider .range-slider::after {
            --at-edge: var(--thumb-close-to-max);
            counter-reset: x var(--max);
            right: var(--offset);
        }

    #money-slider .range-slider__values {
        position: relative;
        top: 50%;
        line-height: 0;
        text-align: justify;
        width: 100%;
        pointer-events: none;
        margin: 0 auto;
        z-index: 5;
    }

        #money-slider .range-slider__values::after {
            content: "";
            width: 100%;
            display: inline-block;
            height: 0;
            background: red;
        }

    #money-slider .range-slider__progress {
        --start-end: calc(var(--thumb-size) / 2);
        --clip-end: calc(100% - (var(--cb)) * 1%);
        --clip-start: calc(var(--ca) * 1%);
        --clip: inset(-20px var(--clip-end) -20px var(--clip-start));
        position: absolute;
        left: var(--start-end);
        right: var(--start-end);
        top: calc( var(--ticks-gap) * var(--flip-y, 0) + var(--thumb-size) / 2 - var(--track-height) / 2 );
        height: calc(var(--track-height));
        background: var(--progress-background, #eee);
        pointer-events: none;
        z-index: -1;
        border-radius: var(--progress-radius);
    }

        #money-slider .range-slider__progress::before {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            -webkit-clip-path: var(--clip);
            clip-path: var(--clip);
            top: 0;
            bottom: 0;
            background: var(--fill-color, black);
            box-shadow: var(--progress-flll-shadow);
            z-index: 1;
            border-radius: inherit;
        }

        #money-slider .range-slider__progress::after {
            content: "";
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            box-shadow: var(--progress-shadow);
            pointer-events: none;
            border-radius: inherit;
        }

    #money-slider .range-slider > input {
        -webkit-appearance: none;
        width: 100%;
        height: var(--thumb-size);
        margin: 0;
        position: absolute;
        left: 0;
        top: calc( 50% - Max(var(--track-height), var(--thumb-size)) / 2 + calc(var(--ticks-gap) / 2 * var(--flip-y, -1)) );
        cursor: -webkit-grab;
        cursor: grab;
        outline: none;
        background: none;
    }

        #money-slider .range-slider > input:not(:only-of-type) {
            pointer-events: none;
        }

        #money-slider .range-slider > input::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            height: var(--thumb-size);
            width: var(--thumb-size);
            transform: var(--thumb-transform);
            border-radius: var(--thumb-radius, 50%);
            background: var(--thumb-color);
            box-shadow: var(--thumb-shadow);
            border: none;
            pointer-events: auto;
            -webkit-transition: 0.1s;
            transition: 0.1s;
        }

        #money-slider .range-slider > input::-moz-range-thumb {
            -moz-appearance: none;
            appearance: none;
            height: var(--thumb-size);
            width: var(--thumb-size);
            transform: var(--thumb-transform);
            border-radius: var(--thumb-radius, 50%);
            background: var(--thumb-color);
            box-shadow: var(--thumb-shadow);
            border: none;
            pointer-events: auto;
            -moz-transition: 0.1s;
            transition: 0.1s;
        }

        #money-slider .range-slider > input::-ms-thumb {
            appearance: none;
            height: var(--thumb-size);
            width: var(--thumb-size);
            transform: var(--thumb-transform);
            border-radius: var(--thumb-radius, 50%);
            background: var(--thumb-color);
            box-shadow: var(--thumb-shadow);
            border: none;
            pointer-events: auto;
            -ms-transition: 0.1s;
            transition: 0.1s;
        }

        #money-slider .range-slider > input:hover {
            --thumb-shadow: var(--thumb-shadow-hover);
        }

            #money-slider .range-slider > input:hover + output {
                --value-background: var(--value-background-hover);
                --y-offset: -5px;
                color: var(--value-active-color);
                box-shadow: 0 0 0 3px var(--value-background);
            }

        #money-slider .range-slider > input:active {
            --thumb-shadow: var(--thumb-shadow-active);
            cursor: -webkit-grabbing;
            cursor: grabbing;
            z-index: 2;
        }

            #money-slider .range-slider > input:active + output {
                transition: 0s;
            }

        #money-slider .range-slider > input:nth-of-type(1) {
            --is-left-most: Clamp(0, (var(--value-a) - var(--value-b)) * 99999, 1);
        }

            #money-slider .range-slider > input:nth-of-type(1) + output {
                --value: var(--value-a);
                --x-offset: calc(var(--completed-a) * -1%);
            }

                #money-slider .range-slider > input:nth-of-type(1) + output:not(:only-of-type) {
                    --flip: calc(var(--thumbs-too-close) * -1);
                }

                #money-slider .range-slider > input:nth-of-type(1) + output::after {
                    content: var(--prefix, "") var(--text-value-a) var(--suffix, "");
                }

        #money-slider .range-slider > input:nth-of-type(2) {
            --is-left-most: Clamp(0, (var(--value-b) - var(--value-a)) * 99999, 1);
        }

            #money-slider .range-slider > input:nth-of-type(2) + output {
                --value: var(--value-b);
            }

        #money-slider .range-slider > input:only-of-type ~ .range-slider__progress {
            --clip-start: 0;
        }

        #money-slider .range-slider > input + output {
            --flip: -1;
            --x-offset: calc(var(--completed-b) * -1%);
            --pos: calc( ((var(--value) - var(--min)) / (var(--max) - var(--min))) * 100% );
            pointer-events: none;
            position: absolute;
            z-index: 5;
            background: var(--value-background);
            border-radius: 10px;
            padding: 2px 4px;
            left: var(--pos);
            transform: translate(var(--x-offset), calc( 150% * var(--flip) - (var(--y-offset, 0px) + var(--value-offset-y)) * var(--flip) ));
            transition: all 0.12s ease-out, left 0s;
        }

            #money-slider .range-slider > input + output::after {
                content: var(--prefix, "") var(--text-value-b) var(--suffix, "");
                font: var(--value-font);
            }

    #money-slider {
        height: 100px;
        display: grid;
        place-content: space-evenly;
        place-items: center;
        gap: 10%;
        padding: 0;
    }

    @media screen and (max-width: 500px) {
        #money-slider {
            padding-top: 2em;
            gap: 8%;
        }
    }

    #money-slider a {
        position: fixed;
        top: 1em;
        left: 1em;
        display: inline-block;
        height: 2em;
    }

    @media screen and (max-width: 500px) {
        #money-slider a {
            position: static;
            order: -1;
        }
    }

    #money-slider a > img {
        display: inherit;
        height: 100%;
    }

    #money-slider > .range-slider,
    label[dir=rtl] .range-slider {
        width: clamp(300px, 50vw, 800px);
        min-width: 200px;
    }



    #money-slidder-summary-handle-open {
        display: none;
        cursor: pointer;
    }

    #money-slidder-summary-handle-close {
        display: block;
        cursor: pointer;
    }

    .WorkFlow-ul {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        padding-left: 0;
        margin-bottom: 0;
        list-style: none;
    }

        .WorkFlow-ul a {
            color: #495057;
            background-color: #ffffff;
            border: 1px solid #dee2e6;
            border-top-left-radius: 0.25rem;
            border-top-right-radius: 0.25rem;
            display: block;
            padding: 0.5rem 1rem;
            cursor: pointer;
            border-bottom: 0px;
        }
    /* Money Slider End */
    .custom-popup.groupUserPopup {
        margin: 4.75rem auto;
    }

    .PatientGrid td {
        white-space: -o-pre-wrap;
        word-wrap: break-word;
        white-space: unset !important;
    }

    .NotificationSwitch label {
        float: left;
        margin-right: 5px;
    }
}

/* Dev Dashboard Start*/
#dev-dashboard .c-dashboardInfo {
    margin-bottom: 15px;
}

#dev-dashboard .c-dashboardInfo .wrap {
    background: #ffffff;
    box-shadow: 2px 10px 20px rgba(0, 0, 0, 0.1);
    border-radius: 7px;
    text-align: center;
    position: relative;
    overflow: hidden;
    padding: 40px 25px 20px;
    height: 100%;
}

#dev-dashboard .c-dashboardInfo__title,
#dev-dashboard .c-dashboardInfo__subInfo {
    color: #6c6c6c;
    font-size: 1.18em;
}

#dev-dashboard .c-dashboardInfo span {
    display: block;
}

#dev-dashboard .c-dashboardInfo__count {
    font-weight: 600;
    font-size: 2.5em;
    line-height: 64px;
    color: #323c43;
}

#dev-dashboard .c-dashboardInfo .wrap:after {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 10px;
    content: "";
}

#dev-dashboard .c-dashboardInfo:nth-child(1) .wrap:after {
    background: linear-gradient(82.59deg, #00c48c 0%, #00a173 100%);
}

#dev-dashboard .c-dashboardInfo:nth-child(2) .wrap:after {
    background: linear-gradient(81.67deg, #0084f4 0%, #1a4da2 100%);
}

#dev-dashboard .c-dashboardInfo:nth-child(3) .wrap:after {
    background: linear-gradient(69.83deg, #0084f4 0%, #00c48c 100%);
}

#dev-dashboard .c-dashboardInfo:nth-child(4) .wrap:after {
    background: linear-gradient(81.67deg, #ff647c 0%, #1f5dc5 100%);
}

#dev-dashboard .c-dashboardInfo__title svg {
    color: #d7d7d7;
    margin-left: 5px;
}

#dev-dashboard .MuiSvgIcon-root-19 {
    fill: currentColor;
    width: 1em;
    height: 1em;
    display: inline-block;
    font-size: 24px;
    transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    user-select: none;
    flex-shrink: 0;
}

.c-dashboardInfo.col-lg-3.col-md-6 {
    margin-bottom: 17px;
}

/* Dev Dashboard Stop */

/* tree Start */

#ui-tree-view ul, #task-tree ul {
    list-style-type: none !important;
}

#ui-tree-view .tree ul, #task-tree .tree ul {
    margin: 0 0 0 15em;
    padding: 0;
    color: #369;
    position: relative;
}

    #ui-tree-view .tree:before, #ui-tree-view .tree ul:before, #task-tree .tree:before, #task-tree .tree ul:before {
        content: "";
        display: block;
        width: 0px;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        border-left: 1px solid;
        background: white;
        z-index: -1;
    }



#ui-tree-view .tree li, #task-tree .tree li {
    font-weight: bold;
    line-height: 3em;
    margin: 0;
    padding: 1.5em 0 0 2em;
    /*position: relative;*/
    z-index: -1;
    border-left: 1px #369 solid;
}

    #ui-tree-view .tree li:before, #task-tree .tree li:before {
        border-top: 1px solid;
        content: "";
        display: block;
        height: 100%;
        left: 0;
        margin-top: 1em;
        position: absolute;
        top: 1.5em;
        width: 2em;
    }

    #ui-tree-view .tree li:last-child:before, #task-tree .tree li:last-child:before {
        bottom: 0;
        height: auto;
        top: 1.5em;
    }



    #ui-tree-view .tree li div.sticky, #task-tree .tree li div.sticky {
        border-radius: 5px;
        border: 1px solid #afafaf;
        margin: 0;
        max-width: 16em;
        min-width: 16em;
        padding: 0.25em 0.5em;
        background: white;
        box-shadow: 1px 1px 4px #8f949a;
        color: #369;
        font-weight: bold;
    }

#ui-tree-view ul.tree, #task-tree ul.tree {
    margin-left: 0px;
}

    #ui-tree-view ul.tree:before, #task-tree ul.tree:before {
        border-left: none;
    }

#ui-tree-view .sticky, #task-tree .sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0px;
    width: 100%;
}

#ui-tree-view .custom-checkbox, #task-tree .custom-checkbox {
    line-height: 20px;
}
 

/* tree End */

.cal-deflex {
    font-size: 13px;
    padding-left: 3px;
    font-weight: bold;
    padding-bottom: 1px;
    left: 0px;
    bottom: 0px;
    position: absolute;
}

.cal-deflex-recurring {
    font-size: 13px;
    padding-left: 3px;
    font-weight: bold;
    padding-bottom: 1px;
    left: 0px;
    bottom: 0px;
    position: absolute;
    margin-left: 20px;
}

.dashed-div {
    border-bottom-style: dashed;
    width: 100%;
    border-width: thin;
    padding-bottom: 5px;
    font-weight: bold;
    border-bottom-color: #b7b8b9;
    color: #91969b;
    font-size: 14px;
}

.brand-link {
    border-bottom: 1px solid #dee2e6 !important;
}

.user-panel {
    border-bottom: 1px solid #dee2e6 !important;
}
.combo-dropdown {
    max-height: 500px !important;
}

    .combo-dropdown .dxbs-listbox {
        max-height: 500px !important;
    }

.DatePickerFont {
    font-weight: 200;
}

.bg-ai-assistance {
    background-color: #00db83 !important;
    color: #000000 !important;
} 

#ai-assistance {
    border-collapse: collapse;
    width: 100%;
}

#ai-assistance td, #ai-assistance th {
    border: 1px solid #ddd;
    padding: 8px;
}

#ai-assistance tr:nth-child(even){background-color: #f2f2f2;}

#ai-assistance tr:hover {background-color: #dddddd94;}

#ai-assistance th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: #ddd;
    color: #000;
}

#ai-assistance p.missing{
    margin-top: unset;
    margin-bottom: unset;
    color: #c00000;
}

/* therapist dashboard start */
#tdash-wrapper {
    text-align: center;
    margin-top: 13px;
}

.tdash-item {
    margin-right: 1px;
    margin-bottom: 8px;
}

.tdash-item-main {
    float: right;
    border: 1px #ccc solid;
    background: #ffffff
}

.tdash-item-img-div {
    float: left;
    padding: 19px 0px 19px 19px
}

.tdash-item-data-div {
    padding: 26px 3px;
    text-align: center;
    width: 268px;
    float: left
}
.tdash-dfex {
    margin: 0px;
    font-weight: bold;
}

.tdash-p-nomargin {
    margin: 0px;
}
/* therapist dashboard end */

/*Chat*/
#chatAccordion .avatar {
    font-size: 14px;
    font-weight: bold;
}

#chatAccordion .list-group-item {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    #chatAccordion .list-group-item strong {
        font-size: 14px;
    }

    #chatAccordion .list-group-item small {
        font-size: 12px;
    }
#chatAccordion .list-group {
    margin-left: 0px;
}

.avatar-red {
    background-color: #e57373;
}

.avatar-green {
    background-color: #81c784;
}

.avatar-orange {
    background-color: #ffb74d;
}

.avatar-purple {
    background-color: #9575cd;
}

.avatar-teal {
    background-color: #4db6ac;
}

.avatar-circle {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: #fff;
}
.chat-username {
    font-weight: 400; /* normal weight */
    font-size: 0.95rem; /* slightly smaller */
    color: #333; /* dark gray instead of black */
}
.list-group-item.active {
    background-color: #e9f3ff;
    color: #000;
    border-left: 4px solid #007bff;
}

/* Hover effect */
.list-group-item:hover {
    background-color: #f7f7f7;
}

.list-group-item.active-user {
    background-color: #e6f2ff !important; /* light blue highlight */
    border-left: 4px solid #007bff !important; /* blue accent */
    font-weight: 500; /* subtle emphasis */
}

.user-search-wrapper {
    padding: 0.5rem 0.75rem;
    background: #f9f9f9;
    border-bottom: 1px solid #ddd;
}

    .user-search-wrapper .input-group {
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 1px 2px rgba(0,0,0,0.08);
    }

    .user-search-wrapper .form-control {
        border: none;
        box-shadow: none;
    }

    .user-search-wrapper .input-group-text {
        background: #fff;
        border: none;
    }

    .user-search-wrapper .clear-btn .btn {
        border: none;
        background: #fff;
        font-size: 1.2rem;
        line-height: 1;
        padding: 0 0.75rem;
    }

        .user-search-wrapper .clear-btn .btn:hover {
            background: #f0f0f0;
        }