@import url(open-iconic/font/css/open-iconic-bootstrap.min.css);
@import url(https://fonts.googleapis.com/css2?family=Lato&family=Roboto&family=Roboto+Serif:opsz@8..144&display=swap);


.light-mode {
    --heading-black: #222222;
    --normal-text: #000;
    --background-blue: #0c57a4;
    --orange-background: #f37224;
    --background-black: #E6E6E6;
    --background-green: #8dc770;
    --box-border: #d9d9d9;
    --box-color-01: #fff;
    --box-color-02: #fff;
    --skeleton-background: #d8d9cf;
    --skeleton-transition: rgb(255, 255, 255, .5);
}

.dark-mode {
    --heading-black: #EEEEEE;
    --normal-text: #fff;
    --background-blue: #0c57a4;
    --orange-background: #f37224;
    --background-black: #35383c;
    --background-green: green;
    --box-border: #686868;
    --box-color-01: #222831;
    --box-color-02: #393E46;
    --skeleton-background: #4e5052;
    --skeleton-transition: rgb(255, 255, 255, .2);
}

.container-fluid {
    background-color: var(--background-black)
}

.theme-select {
    width: 100%;
    height: 40px;
    border: 1px solid #c7c7c7;
    border-radius: 5px;
    opacity: .8;
    padding: 5px 10px;
    background-color: var(--box-color-02) !important;
    color: var(--normal-text);
}

    .theme-select option {
        padding: 5px 10px;
    }

select:focus {
    border: none !important;
    box-shadow: none !important;
}

#app, .page, body, html {
    height: 100%;
    background-color: var(--background-black) !important;
}

.loading-svg-icon img, .spinner {
    top: 0;
    bottom: 0;
    left: 0;
    right:0;
    position: absolute;
    margin: auto;
}

.arthur-radio, .select-radio {
    list-style-type: none;
    padding: 0
}

.db-scroll, .prf-box, .scroll, .to-do {
    overflow: auto
}

body, html {
    font-family: Lato,sans-serif !important;
    background-color: #e6e6e6 !important
}

.btn-link, a {
    color: #0366d6
}

.btn-primary {
    color: #fff;
    background-color: #0b56a2;
    border-color: #0b56a2
}

.content {
    padding-top: 1.1rem
}

.valid.modified:not([type=checkbox]) {
    outline: #26b050 solid 1px
}

.invalid {
    outline: red solid 1px
}

.validation-message {
    color: #db1313;
    font-size: 12px;
}

#validation-message {
    color: #db1313;
    display: block;
    margin-top: 5px
}

#timeline .timeline-movement .timeline-item .timeline-panel.debits .timeline-panel-ul li.img-wraping, .w100 {
    width: 100%
}

.margin-auto {
    margin: auto;
    margin-top: 12% !important
}

.box-shadow {
    box-shadow: 3px 2px 11px 3px rgb(183 183 183 / 78%);
    border-radius: 4px;
    padding: 40px 30px !important
}

.bold-text {
    font-weight: bolder
}

.spinner {
    border: 16px solid silver;
    border-top: 16px solid #337ab7;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    animation: .7s linear infinite spin
}

@keyframes spin {
    0% {
        transform: rotate(0)
    }

    100% {
        transform: rotate(360deg)
    }
}

.core-plan-modal .modal-dialog-width {
    max-width: 50% !important;
}

.core-plan-modal .details-form {
    height: auto;
    max-height: 500px;
}

.care-plan img {
    width: 100% !important;
    height: auto !important;
}

.provider-list {
    max-height: 370px !important;
    height: 100% !important;
 }

 #appointmentrequest-EnterPincode {
    margin-top: 11px !important;
 }

@media screen and (max-width:600px) {
    .mobile-hide {
        display: none
    }

    .profile {
        height: 106px !important
    }

        .profile ul {
            font-size: 13px !important;
            flex-wrap: wrap
        }

            .profile ul li {
                padding-right: 10px !important
            }

                .profile ul li img {
                    vertical-align: top;
                    margin-top: 0 !important;
                    width: 20px !important;
                    height: 20px !important;
                    margin-left: 0 !important
                }
}

.body-card, .d-flex, .range-slide {
    display: flex
}

.login-right {
    margin-top: -40px;
}

.provider-button {
    width: 100% !important;
    margin-top: -30px;
    background: var(--orange-background) !important;
    color: #fff !important;
    margin-left: -20px;
    padding: 3px 10px !important
}

    .provider-button:hover {
        background: #fff !important;
        color: var(--orange-background) !important;
        border: 1px solid
    }

.profile {
    width: 100%;
    height: 80px;
    background-color: #0c57a4;
    padding-top: 0;
}

.progress {
    background-color: #f1f1f1 !important;
    height: .5rem !important
}

.progress-bar {
    background-color: #1c4489 !important
}

.offcanvas-backdrop, .offcanvas-end {
    top: 50px !important
}

.arthur-nav a:hover, .profile h4 {
    color: #fff
}

.profile ul {
    display: inline-flex;
    list-style: none;
    padding-left: 0;
    color: #fff;
    font-size: 14px;
    margin-bottom: 0;
    margin-top: 20px
}

    .profile ul li {
        padding-right: 30px;
        color: #dfdfdf
    }

        .profile ul li img {
            vertical-align: top;
            margin-top: -8px
        }

        .profile ul li b {
            color: #fff;
            padding-left: 5px;
            font-weight: 500
        }

.profile-img {
    width: 38px !important;
    border-radius: 100px;
    cursor: pointer;
}

.top-header {
    background-color: var(--box-color-01);
    margin-top: -15px;
    border-radius: 5px;
    box-shadow: rgb(12 12 12 / 14%) 1px 1px 4px 0
}

.body-card, .cust-text, .prev-btn {
    box-shadow: 1px 1px 4px 0 #0c0c0c24
}

.top-header h2 {
    text-align: center;
    padding: 10px 0;
    color: var(--normal-text);
    font-size: 22px
}

.body-card {
    border-radius: 5px;
    flex-direction: column;
    background-color: var(--box-color-01)
}

.bg-orange {
    background-color: #f37225 !important
}

.bg-a-blue {
    background-color: #0c57a4 !important
}

.cust-card {
    border: none;
    color: #fff;
    border-radius: 2px
}

.next-btn, .prev-btn {
    border-radius: 0;
    margin-right: 12px
}

.cust-card .card-body {
    max-height: 120px
}

.cust-card .icon {
    padding: 20px;
    margin: auto
}

.cust-card p {
    padding: 10px;
    border-top: 1px solid #e6e6e6;
    margin-bottom: 0;
    cursor: pointer
}

    .cust-card p:hover {
        background: rgb(255 255 255 / 46%)
    }

.arthur-nav li, .p0 {
    padding: 0 !important
}

.w50 {
    width: 50%
}

.vh100 {
    height: 100vh
}

.main > div[b-5aa1oeeicy] {
    padding-left: 1rem !important;
    padding-right: 1rem !important
}

.top-row i {
    color: var(--normal-text) !important
}

.top-row a {
    margin-left: 0 !important;
    padding: 10px 15px;
    color: var(--normal-text) !important;
}

.login-bg img {
    margin: 15% auto 30px;
    display: block
}

.pt12 {
    padding-top: 10%
}

.next-btn {
    height: 40px;
    min-width: 120px;
    color: #fff;
    background-color: #1c4489 !important
}

.prev-btn {
    height: 40px;
    min-width: 50px;
    background-color: #fff !important
}

.submit-btn {
    border: none;
    height: 40px;
    /* min-width: 150px; */
    min-width: 120px;
    border-radius: 0;
    color: #fff !important;
    background-color: #8dc770 !important;
    margin-right: 20px
}

.skip-btn {
    border: none;
    height: 40px;
    /*min-width: 60px;*/
    border-radius: 0;
    color: #fff !important;
    background-color: #dc7335 !important;
    margin-right: 20px
}

.assestment-card {
    min-height: 405px
}

    .assestment-card p {
        color: #fff;
        margin-bottom: 10px
    }

        .assestment-card p.indent-text {
            text-indent: 15px;
        }

    .assestment-card ul {
        /* list-style: none;*/
        color: #333;
        padding-left: 0
    }

        .assestment-card ul li, .provider-card label {
            font-size: 14px;
            /* color: #212529; */
        }

    /* .provider-card label{
        color: #fff;
    } */

.reset-req {
    font-size: 18px;
    margin-top: 20px;
    color: #2b57a2
}

.cust-form {
    padding: 10px 20px;
    margin-top: 20px
}

    .cust-form label {
        font-size: 15px
    }

.doctor-data p, .profile-data p, label {
    font-size: 14px;
    color: var(--normal-text);
    /* color: #000;*/
}

.custom-select, .form-control {
    border-radius: 2px;
    border: none;
    background-color: #f1f1f1;
    padding: 2px 8px;
    font-size: 15px;
    min-height: 40px
}

.cust-check {
    padding: 12px;
    width: 50%
}

    .cust-check label {
        font-size: 13px;
        padding: 5px;
        width: 100%;
        text-align: center
    }

#timeline .timeline-movement .timeline-item .timeline-panel.debits .timeline-panel-ul, .range-slide li {
    text-align: left
}

.cust-check label:hover {
    background-color: #0b56a2;
    color: #fff
}

.cust-check label span {
    display: block;
    font-size: 14px;
    margin-top: 5px
}

.cust-radio {
    padding-left: 0 !important;
    margin-bottom: 8px !important
}

.ans, .qst {
    padding: 0
}

.response-table td {
    padding: 12px 5px 8px;
    border: 1px solid var(--box-border) !important;
    color: var(--normal-text)
}

.response-head {
    color: var(--orange-background);
    font-size: 18px;
    margin: 15px 0;
}

.response-table th {
    font-size: 13px;
    color: var(--normal-text);
    font-weight: 500;
    padding: 5px;
    border: 1px solid var(--box-border)
}

.qst {
    font-size: 14px;
    color: var(--normal-text);
    margin-bottom: 4px;
    opacity: .8
}

.ans {
    color: var(--background-blue);
    margin-bottom: 5px;
    font-size: 15px;
    font-weight: 500
}

.cust-radio label {
    margin-top: 10px;
    min-width: 100px
}

    .cust-radio label span {
        color: #fff;
        font-size: 16px;
        margin-left: 10px
    }

    .cust-radio label input {
        overflow: visible;
        vertical-align: middle;
        margin-right: 4px;
        height: 20px;
        width: 20px
    }

.cust-text {
    width: 100%;
    height: 120px;
    border: 1.5px solid #d6d6d6;
    border-radius: 4px;
    padding: 5px
}

.prf-box, .scaler {
    border-radius: 3px
}

.prf-box {
    margin: 0 auto;
    height: Calc(100vh - 312px);
    flex-basis: auto
}

.care-footer h5 {
    font-size: 12px;
    margin-bottom: 3px
}

.care-body {
    padding: 40px 20px
}

    .care-body h5 {
        font-size: 22px;
        font-weight: 600;
        color: #0b56a2;
        margin-bottom: 3px
    }

.scaler {
    min-height: 180px;
    padding: 10px;
    background-color: var(--box-color-02);
    border: 1px solid #d3d3d3;
    box-shadow: rgba(0,0,0,.15) 1.95px 1.95px 2.6px;
    margin-bottom: 12px
}

    .scaler p {
        color: var(--normal-text) !important;
    }

    .scaler output {
        color: var(--normal-text) !important;
    }

.arthur-tab, .arthur-tab .btn-group, .box-header {
    min-height: 40px
}

.range-slide {
    list-style: none;
    font-size: 10px;
    padding-left: 0;
    width: 100%;
    position: relative
}

.loading-svg, .loading-svg-icon {
    position: fixed;
    display: block;
    left: 0;
    text-align: center
}

.range-slide li {
    width: 11.11%
}

.range-slide:after {
    content: "100";
    position: absolute;
    right: 0
}

.slider::-moz-range-thumb {
    width: 2px;
    height: 25px;
    background: #04aa6d;
    cursor: pointer
}

.care-card i, .care-footer p {
    font-size: 18px
}

::-webkit-scrollbar {
    width: 5px !important;
    height: 5px !important;
}

::-webkit-scrollbar-track {
    background: #f1f1f1 !important
}

::-webkit-scrollbar-thumb {
    background: #c5c5c5 !important
}

    ::-webkit-scrollbar-thumb:hover {
        background: #555 !important
    }

@keyframes ldio-2md6wjb9e17-1 {
    0% {
        top: 32.97px;
        height: 91.06px
    }

    100%,50% {
        top: 55.735px;
        height: 45.53px
    }
}

@keyframes ldio-2md6wjb9e17-2 {
    0% {
        top: 38.66125px;
        height: 79.67750000000001px
    }

    100%,50% {
        top: 55.735px;
        height: 45.53px
    }
}

.loading-svg-icon {
    height: 100%;
    width: 100%;
    top: 0;
    background-color: rgb(0,0,0,.5);
    z-index: 9
}

.loading-svg {
    height: 80%;
    width: 100%;
    top: 20%;
    background-color: var(--background-black) !important
}

    .loading-svg img {
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        position: absolute;
        margin: auto;
        /*
        position: absolute;
        top: 45%;
        left: 50%
        */
    }

.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
}

.range-slider.flat, .range-slider.overlay {
    --progress-flll-shadow: none;
    --progress-shadow: none
}

.range-slider.grad input:hover {
    --thumb-transform: scale(1.2)
}

.range-slider.grad input:active {
    --thumb-shadow: inherit;
    --thumb-transform: scale(1)
}

.range-slider.flat {
    --thumb-size: 25px;
    --track-height: calc(var(--thumb-size) / 3);
    --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
}

.range-slider.overlay {
    --primary-color: #d6e9ff;
    --track-height: 50px;
    --thumb-size: var(--track-height);
    --thumb-color: var(--primary-color);
    --thumb-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
}

    .range-slider.overlay input:hover {
        --thumb-shadow: calc(25px - (50px * var(--is-left-most))) 0 0 -15px #0366d6 inset
    }

    .range-slider.overlay input:active {
        --thumb-color: inherit
    }

    .range-slider.overlay .range-slider__values {
        width: calc(100% - 50% / (var(--max) - var(--min)))
    }

.range-slider {
    --primary-color: #2b57a2;
    --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: silver;
    --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;
    width: 100%
}

    .range-slider[data-ticks-position=top] {
        --flip-y: 1
    }

    .range-slider::after, .range-slider::before {
        --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;
        color: #000
    }

    .range-slider::before {
        --before: 1;
        --at-edge: var(--thumb-close-to-min);
        counter-reset: x var(--min);
        left: var(--offset);
        color: var(--normal-text) !important;
    }

    .range-slider::after {
        --at-edge: var(--thumb-close-to-max);
        counter-reset: x var(--max);
        right: var(--offset);
        color: var(--normal-text) !important;
    }

.range-slider__values {
    position: relative;
    top: 50%;
    line-height: 0;
    text-align: justify;
    width: 100%;
    pointer-events: none;
    margin: 0 auto;
    z-index: 5
}

    .range-slider__values::after {
        content: "";
        width: 100%;
        display: inline-block;
        height: 0;
        background: red
    }

.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,#a3a3a3);
    pointer-events: none;
    z-index: -1;
    border-radius: var(--progress-radius)
}

    .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,#000);
        box-shadow: var(--progress-flll-shadow);
        z-index: 1;
        border-radius: inherit
    }

.btn-outline-primary:hover, .list-group-item-action:active {
    background-color: #0b56a2 !important;
    color: #fff !important
}

.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
}

.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: 0;
    background: 0 0
}

.arthur-nav a, .arthur-radio, .arthur-radio li, .field-icon, .list-group, .select-radio li, a {
    cursor: pointer
}

.range-slider > input:not(:only-of-type) {
    pointer-events: none
}

.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: .1s;
    transition: .1s
}

.cust-table {
    padding: 10px;
    border: 1px solid #e6e6e6;
    color: #0b56a2;
    margin-bottom: 25px;
    background-color: var(--box-color-02);
}

.box .accordion-item {
    background-color: var(--background-black) !important;
    border-radius: 3px !important;
}

.box-header, .secondry-text {
    color: var(--normal-text)
}

.cust-table h5 {
    color: var(--normal-text);
    padding-left: .5rem
}

.cust-table table th {
    background-color: var(--background-black) !important;
    color: white !important;
}

.cust-table .rz-column-title {
    color: var(--normal-text) !important;
    font-weight: 500 !important;
}

.cust-table .rz-cell-data {
    color: var(--normal-text) !important;
    font-weight: 500 !important;
}

.cust-table table td {
    background-color: var(--box-color-02);
    font-size: 14px;
    border-bottom: 1px solid #ebebeb;
    padding: 6px
}

.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: .1s;
    transition: .1s
}

.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: .1s;
    transition: .1s
}

.range-slider > input:hover {
    --thumb-shadow: var(--thumb-shadow-hover)
}

    .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)
    }

.range-slider > input:active {
    --thumb-shadow: var(--thumb-shadow-active);
    cursor: -webkit-grabbing;
    cursor: grabbing;
    z-index: 2
}

    .range-slider > input:active + output {
        transition: none
    }

.range-slider > input:first-of-type {
    --is-left-most: Clamp(0, (var(--value-a) - var(--value-b)) * 99999, 1)
}

    .range-slider > input:first-of-type + output {
        --value: var(--value-a);
        --x-offset: calc(var(--completed-a) * -1%)
    }

        .range-slider > input:first-of-type + output:not(:only-of-type) {
            --flip: calc(var(--thumbs-too-close) * -1)
        }

        .range-slider > input:first-of-type + output::after {
            content: var(--prefix, "") var(--text-value-a) var(--suffix, "")
        }

.range-slider > input:nth-of-type(2) {
    --is-left-most: Clamp(0, (var(--value-b) - var(--value-a)) * 99999, 1)
}

    .range-slider > input:nth-of-type(2) + output {
        --value: var(--value-b)
    }

.range-slider > input:only-of-type ~ .range-slider__progress {
    --clip-start: 0
}

.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: .12s ease-out,left
}

    .range-slider > input + output::after {
        content: var(--prefix, "") var(--text-value-b) var(--suffix, "");
        font: var(--value-font)
    }

body > .range-slider, label[dir=rtl] .range-slider {
    width: clamp(300px,50vw,800px);
    min-width: 200px
}

.select-radio {
    margin: 25px 0 0;
    display: inline-flex
}

    .select-radio li {
        margin: 5px;
        width: 30px;
        height: 40px;
        position: relative
    }

        .arthur-radio label:hover, .select-radio li:hover {
            background-color: #e6e6e6
        }

    .arthur-radio input, .arthur-radio label, .select-radio input, .select-radio label {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%
    }
    .arthur-radio label {
        position: relative;
    }

        .arthur-radio input[type=radio], .select-radio input[type=radio] {
            opacity: .01;
            z-index: 100
        }

            .Checked + label, .arthur-radio input[type=radio]:checked + label, .select-radio input[type=radio]:checked + label {
                background: #0b56a2;
                color: #fff
            }

    .select-radio label {
        padding: 10px;
        z-index: 90;
        border: 1px solid #e3e3e3;
        background-color: #ededed;
        border-radius: 3px
    }

.arthur-radio label, .arthur-tab {
    background-color: var(--box-color-01);
    box-shadow: 1px 1px 4px 0 #0c0c0c24
}

.arthur-tab {
    width: 100%;
    margin-top: 10px;
    border-radius: 0;
    border-bottom: 2px solid var(--orange-background)
}

    .arthur-tab .btn-primary {
        background-color: var(--orange-background) !important;
        border-radius: 0 !important;
        border-color: var(--orange-background) !important;
        color: #fff !important;
    }

    .arthur-tab button {
        color: var(--normal-text) !important;
    }

.scroll {
    height: Calc(100vh - 247px)
}

.arthur-radio {
    margin-bottom: 10px
}

    .arthur-radio li {
        margin: 0 5px 0 0;
        width: 100%;
        height: 100%;
        min-height: 30px; /*50px;*/
        position: relative;
        min-width: 160px
    }

    .arthur-radio label {
        padding: 10px;
        z-index: 90;
        border-radius: 3px;
        font-size: 14px;
        line-height: 16px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }

.navbar-light .navbar-nav .nav-link {
    color: #333;
    cursor: pointer
}

.arthur-nav a {
    color: #333
}

.arthur-nav li:hover {
    background-color: #e5e5e5;
    color: #fff
}

.arthur-nav h4 {
    font-weight: 400;
    font-size: 16px;
    color: #333
}

.profile-drop {
    right: 2%;
    border: .2px solid #e9e9e9;
    box-shadow: rgb(99 99 99 / 20%) 0 2px 8px 0;
    width: 30%
}

.box {
    border: 0.5px solid var(--box-border);
    padding: 15px;
    border-radius: 5px;
    margin: 10px 0;
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075) !important;
    background-color: var(--box-color-02);
    max-height: 430px;
}

.referral-box {
    border: 1px solid #e7e7e7;
    padding: 15px;
    border-radius: 5px;
    margin: 10px 0;
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075) !important;
    background-color: var(--box-color-02);
    max-height: 430px;
}

.box-header {
    margin-bottom: 10px !important;
    display: block;
    position: relative;
    border-bottom: 1px solid #dbdbdb;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px
}

    .box-header .box-title {
        display: inline-block;
        margin: 0;
        font-weight: 500;
        font-size: 18px;
        color: var(--heading-black);
    }

.box p {
    margin-bottom: 8px !important;
    font-size: 14px;
    color: var(--normal-text);
}

.accordion-body span {
    opacity: .95 !important;
}

.accordion-body li {
    color: var(--normal-text) !important;
}

.accordion-body a {
    color: #649bff !important;
}

.box span {
    font-size: 13px;
    color: var(--normal-text) !important;
    margin-right: 5px;
    font-weight: 500;
    opacity: .6;
    margin-left: 0px;
    width: 140px;
}

.doctor-data h4, .profile-data h4, .box-body h4 {
    font-size: 18px;
    color: var(--normal-text);
    margin-bottom: 0px !IMPORTANT;
}

.check-btn, .unassign-btn {
    color: #595858;
    padding: 5px 10px;
    border-radius: 5px;
    border: .25px solid #d1d1d1
}

.btn-outline-primary, .text-arthur-blue, .text-primary {
    color: #0b56a2 !important
}

.check-btn:hover, .unassign-btn:hover {
    color: #000;
    border: .25px solid #595858
}

.widget-timeline-icon ul {
    padding-left: 0;
    margin-bottom: 0
}

.widget-timeline-icon li {
    padding-left: 30px;
    position: relative;
    margin-left: 28px;
    border-left: 3px solid #5156be;
    min-height: 80px;
    padding-top: 1px
}

    .widget-timeline-icon li .icon {
        position: absolute;
        width: 40px;
        height: 40px;
        font-size: 22px;
        color: #fff;
        text-align: center;
        line-height: 56px;
        border-radius: 56px;
        left: -22px;
        top: 0
    }

.bi-heart::before {
    vertical-align: 3px !important
}

.widget-timeline-icon li a h4 {
    font-size: 16px;
    color: var(--normal-text)
}

.widget-timeline-icon li a p {
    font-size: 14px;
    color: var(--normal-text);
    opacity: .7;
}

#timeline {
    list-style: none;
    position: relative;
    margin: 50px auto;
    width: 90%
}

    #timeline:before {
        top: 0;
        bottom: 0;
        position: absolute;
        content: " ";
        width: 2px;
        background-color: #5156be;
        left: 50%;
        margin-left: -1.5px
    }

    #timeline .clearFix {
        clear: both;
        height: 0
    }

    #timeline .timeline-badge {
        color: #fff;
        width: 25px;
        height: 25px;
        font-size: 1.2em;
        text-align: center;
        position: absolute;
        top: 0;
        left: 50%;
        margin-left: -13px;
        background-color: #fff;
        z-index: 6;
        border-radius: 50%;
        border: 2px solid #5156be
    }

        #timeline .timeline-badge span.timeline-balloon-date-day {
            font-size: 1.4em
        }

        #timeline .timeline-badge span.timeline-balloon-date-month {
            font-size: .7em;
            position: relative;
            top: -10px
        }

        #timeline .timeline-badge .timeline-filter-movement {
            background-color: #fff;
            font-size: 1.7em;
            height: 35px;
            margin-left: -18px;
            width: 35px;
            top: 40px
        }

            #timeline .timeline-badge .timeline-filter-movement a span {
                color: #5156be;
                font-size: 1.3em;
                top: -1px
            }

        #timeline .timeline-badge .timeline-future-movement {
            background-color: #fff;
            height: 120px;
            width: 120px;
            font-size: 1.7em;
            top: -16px;
            margin-left: -60px;
            border: 2px solid #5156be
        }

            #timeline .timeline-badge .timeline-future-movement a span {
                color: #5156be;
                font-size: .9em;
                top: 0;
                left: 1px
            }

            #timeline .timeline-badge .timeline-future-movement p {
                color: #5156be;
                position: absolute;
                top: 40px;
                left: 32px
            }

    #timeline .timeline-movement {
        position: relative;
        margin-bottom: 10rem
    }

        #timeline .timeline-movement.timeline-movement-top {
            height: 60px
        }

        #timeline .timeline-movement .timeline-item .timeline-panel {
            border: 1px solid #b3b3b3;
            border-radius: 10px;
            background-color: #fff;
            color: #666;
            padding: 10px;
            position: relative;
            -webkit-box-shadow: 0 1px 6px rgba(0,0,0,.175);
            box-shadow: 0 1px 6px rgba(0,0,0,.175)
        }

            #timeline .timeline-movement .timeline-item .timeline-panel .timeline-panel-ul {
                list-style: none;
                padding: 0;
                margin: 0
            }

            #timeline .timeline-movement .timeline-item .timeline-panel.credits .timeline-panel-ul .lefting-wrap {
                float: right;
                width: 30%;
                height: 130px;
                background-color: #f3f6f9
            }

            #timeline .timeline-movement .timeline-item .timeline-panel.credits .timeline-panel-ul .righting-wrap {
                float: left;
                width: 70%;
                height: 130px;
                padding: 0 12px 0 0;
                display: flex;
                flex-direction: column;
                justify-content: space-between
            }

            #timeline .timeline-movement .timeline-item .timeline-panel.credits .timeline-panel-ul li, #timeline .timeline-movement .timeline-item .timeline-panel.debits .timeline-panel-ul li {
                color: #666;
                width: 100%
            }

                #timeline .timeline-movement .timeline-item .timeline-panel.credits .timeline-panel-ul li.img-wraping a img, #timeline .timeline-movement .timeline-item .timeline-panel.debits .timeline-panel-ul li.img-wraping a img {
                    width: 100%;
                    height: 130px
                }

                #timeline .timeline-movement .timeline-item .timeline-panel.credits .timeline-panel-ul li a.importo, #timeline .timeline-movement .timeline-item .timeline-panel.debits .timeline-panel-ul li a.importo {
                    font-size: 1.3em;
                    font-weight: 600
                }

            #timeline .timeline-movement .timeline-item .timeline-panel.debits .timeline-panel-ul .lefting-wrap {
                float: left;
                width: 30%;
                height: 130px;
                background-color: #f3f6f9
            }

            #timeline .timeline-movement .timeline-item .timeline-panel.debits .timeline-panel-ul .righting-wrap {
                float: right;
                width: 70%;
                height: 130px;
                padding: 0 0 0 12px;
                display: flex;
                flex-direction: column;
                justify-content: space-between
            }

.clear {
    clear: both
}

.provider-card {
    overflow: hidden;
    height: Calc(100vh - 175px);
    border-radius: 5px;
    box-shadow: 1px 1px 4px 0 #0c0c0c24;
    display: flex;
    flex-direction: column;
    background-color: var(--box-color-01);
    margin-top: 10px;
    padding-top: 0
}

.profile-img {
    margin-right: 5px
}

.assessment-bg {
    background-image: url(/img/assessment-bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 750px;
    /*height: 750px;*/
    /*max-height: 200%;*/
}

a {
    text-decoration: auto !important
}

.list-group {
    margin-bottom: 12px !important
}

.appointment-btn {
    width: 200px !important
}

.btn-outline-primary, .btn-outline-primary:hover {
    border-color: #0b56a2 !important
}

.dashboard-assessment-btn {
    min-width: 80px;
    font-size: 14px !important;
    padding: 3px !important;
    background-color: transparent !important;
    color: var(--normal-text) !important;
    border: 1px solid var(--background-green) !important;
}

    .dashboard-assessment-btn:hover {
        background-color: var(--background-green) !important;
        color: #fff !important;
    }

.assess-table td {
    vertical-align: baseline !important;
    border-bottom: none !important;
}

.nav-link {
    color: var(--normal-text) !important;
    font-weight: 500;
}

.header-icon, .list-group-item-action .active i {
    color: #f28e22 !important
}


.care-plan table td h6 {
    color: var(--normal-text);
    font-size: 15px;
    font-weight: 600;
    margin-top: 5px
}

.care-plan li {
    color: var(--normal-text) !important;
    opacity: .7;
}

.care-plan span {
    color: var(--normal-text) !important;
    opacity: 1;
}

.care-plan a {
    color: #7272ff !important;
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: #ea7227 !important;
    background-color: #fff;
    border-color: transparent !important;
    border-bottom: 3px solid #ea7227 !important
}

.to-do {
    height: 310px !important;
    max-height: 350px;
}

.list-active, .list-ui {
    border-left: 5px solid #0b56a2;
    background-color: var(--background-black);
    margin-bottom: 15px
}

.accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23333' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' d='M8 0a1 1 0 0 1 1 1v6h6a1 1 0 1 1 0 2H9v6a1 1 0 1 1-2 0V9H1a1 1 0 0 1 0-2h6V1a1 1 0 0 1 1-1z' clip-rule='evenodd'/%3e%3c/svg%3e");
    transform: scale(.7) !important;
    margin-right: 5% !important
}

.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23333' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' d='M0 8a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H1a1 1 0 0 1-1-1z' clip-rule='evenodd'/%3e%3c/svg%3e")
}

.header-icon {
    width: 25px;
    margin: 0 10px
}

.list-group-item.active {
    color: #fff !important;
    background-color: var(--background-blue) !important;
    border-color: var(--background-blue) !important;
    margin: 10px 10px;
    width: 420px;
    border-radius: 5px !important;
}

.field-icon {
    float: right;
    margin-top: -37px;
    position: relative;
    z-index: 2;
    font-size: 21px;
    margin-right: 14px
}

.profile-scroll {
    overflow: hidden;
    height: Calc(100vh - 220px);
    overflow-y: auto;
    background-color: var(--box-color-01);
}

.list-group-item {
    padding: .5rem .2rem !important
}

.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem
}

    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: .6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg)
    }

        .loading-progress circle:last-child {
            stroke: #1b6ec2;
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage,0%) * 0.8),500%;
            transition: stroke-dasharray 50ms ease-in-out
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: 700;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading")
    }

.main {
    width: 100vw !important
}

.create-account-right a:hover, .login-right a:hover {
    text-decoration: underline !important
}

.create-account-right {
    max-height: 100vh;
    overflow: auto
}

    .create-account-right .rz-dropdown {
        height: 41px !important
    }

.img-fluid {
    max-width: 30px !important;
    height: auto !important
}

.vitals p {
    font-size: 14px !important;
    opacity: .7;
    color: var(--normal-text)
}

.vitals h5 {
    font-size: 14px !important;
    opacity: 1;
    color: var(--normal-text)
}

.reset-btn {
    padding: 5px 10px !important
}

.bi-snow3::before {
    vertical-align: 5px !important
}

.logout-btn {
    color: var(--normal-text);
    font-size: 16px;
    border: none;
    background: 0 0
}

    .logout-btn:hover {
        color: red
    }

.dropdown-menu {
    width: 280px !important;
    box-shadow: rgba(0,0,0,.24) 0 3px 8px;
    background-color: var(--background-black) !important;
}

.dropdown-item:hover, .dropdown-item:hover i {
    color: #1e2125 !important;
}

.dropdown-profile img {
    width: 80px;
    border-radius: 100px;
}

.dropdown-profile h3 {
    font-size: 20px;
    color: var(--normal-text)
}

.dropdown-profile h5, .profile-data h5 {
    font-size: 14px;
    opacity: .75;
    color: var(--normal-text)
}

.dashboard-title {
    padding: 10px !important
}
/*
.loading {
    max-height: 460px !important;
}
*/
.loading, .profile-loading {
    background-color: var(--box-color-01);
    overflow: hidden;
    margin-left: 0px !important;
    border-radius: 5px;
    padding: 5px !important;
}

.profile-loading {
    max-height: 560px !important;
}

.Skeleton {
    border-radius: 5px;
    position: relative;
    background-color: var(--skeleton-background) !important;
    overflow: hidden
}

    .Skeleton::after {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        transform: translateX(-100%);
        background-image: linear-gradient(to left,transparent,var(--skeleton-transition),transparent);
        animation: 1s ease-in-out infinite skeleton-loading
    }

@keyframes skeleton-loading {
    100% {
        transform: translateX(100%)
    }
}

.Skeleton-logo {
    width: 170px;
    height: 50px
}

.Skeleton-profile {
    width: 50px;
    height: 50px;
    border-radius: 100px
}

.Skeleton-name {
    width: 120px;
    height: 20px
}

.Skeleton-main {
    width: 170px;
    height: 40px;
    margin-left: 45%
}

.Skeleton-box {
    width: 100% !important;
    height: 380px
}

.Skeleton-vitals-box {
    width: 420px;
    height: 260px
}

.Skeleton-profile-box {
    width: 420px;
    height: 120px
}

.modal-dialog-scrollable .modal-content {
    max-height: 100vh !important;
    overflow: hidden;
    margin-top: -5%;
    background-color: var(--background-black);
}

.rz-dropdown, .rz-textbox {
    height: 41px !important;
    width: 100%;
    color: var(--normal-text) !important;
    padding: 10px 15px !important;
    background-color: var(--box-color-02) !important;
    font-size: 14px !important;
}

#appointmentrequest-EnterPincode {
    margin-top: 6px
}

#appointmentrequest-button {
    margin-top: 16px
}

.rz-dropdown-label {
    color: var(--normal-text) !important;
    opacity: .8 !important;
    font-size: 14px !important;
}

.submit-btn {
    /*  width: 93%;
    margin-left: 12px
  */
}

.search-btn {
    width: 61%;
    margin-left: 12px;
    margin-top: 11px
}

.close-btn {
    border: none;
    padding: 5px 10px;
    color: red;
    border-radius: 5px
}

.login-btn {
    padding: 6px 12px
}

.provider-card-form {
    background-color: var(--box-color-01) !important;
    border-bottom: 1.5px solid var(--orange-background)
}

.provider-div {
    height: Calc(100vh - 280px);
    overflow: auto
}

.list-group-item address {
    margin-bottom: 3px;
    font-size: 14px
}

.list-group-item p {
    font-size: 13px
}

.map {
    width: 100% !important;
    height: 100% !important
}

.date-picker {
    margin-left: 25%
}

.care-card {
    margin: 10px 0
}

.contact {
    height: 50px
}

.patient-response {
    overflow: auto;
    height: Calc(100vh - 175px);
    background-color: var(--box-color-01)
}

    .patient-response h5 {
        color: var(--normal-text) !important;
    }

.profile-box-body {
    background-image: url(../images/gallery/landscape14.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover
}

.profile-card p {
    color: var(--normal-text) !important;
    font-size: 16px
}

.modal-form {
    /* height: calc(100vh - 163px); */
    height: auto;
    overflow: auto
}

.input {
    width: 50px
}

.wed-up .btn-primary {
    background-color: var(--background-green) !important;
    border-color: var(--background-green) !important;
}

.card {
    background-color: var(--background-black) !important;
    border: 1px solid var(--box-border) !important;
}

.badge-pill {
    background-color: var(--background-green) !important;
    border-color: var(--background-green) !important;
    color: var(--normal-text) !important;
    padding: 10px 10px !important;
    opacity: 1 !IMPORTANT;
}

.rz-grid-table thead {
    z-index: 1 !important;
}

.rz-calendar .rz-inputtext {
    background-color: var(--box-color-02) !important;
    color: var(--normal-text) !important;
    height: 41px !important;
    padding: 10px 15px !important;
}

.text-end {
    /*  color: white !important; */
    color: var(--normal-text);
}

.profile-scroll .box-body-small {
    height: 170px;
    max-height: 170px;
    overflow: auto;
    overflow-x: hidden;
}

.profile-scroll .box-body-big {
    height: 250px;
    max-height: 250px;
    overflow: auto;
    overflow-x: hidden;
}

.profile-scroll h2 {
    font-size: 24px;
    margin-right: 10px;
    margin-top: 10px !important
}

/* Asif CSS Style */
.modalBtn {
    float: left
}

    .modalBtn:hover {
        background: #e6e6e6;
        float: left;
        border-radius: 5px;
        transition: background-color .5s
    }

.multiDivBox {
    position: relative;
    z-index: 0
}

.mapIconAlign {
    float: left;
    height: 40px;
}

.mapIconAlignment {
    float: left;
}

.dashStartBtn {
    background: #198754 !important;
    color: #fff !important;
    /*padding: 0.5em 2.5em !important;*/
    padding: 0.5em 1em !important;
}

.dashdownloadBtn {
    background: #E6E6E6 !important;
    color: #fff !important;
    border: 1px solid #E6E6E6;
}

    .dashdownloadBtn:hover {
        background-color: var(--background-green) !important;
        color: #fff !important;
    }
.matrix-td-th {
    white-space: normal !important;
}
.rz-multiselect, .rz-dropdown {
    margin-top: 0.5em;
}

#app > div > div > div.top-row.d-flex.justify-content-between > div.d-flex > div.top-row.px-4 > div > a > h4 {
    text-align: right;
}

.innerParaTxt {
    max-height: 300px;
    height: 340px;
    overflow-y: auto;
}

.generic-field-style {
    width: 100%;
    padding: 0.5em;
    /* border: 3px solid #0c57a4; */
    border: 1px solid #ced4da;
    border-radius: 6px;
}
.multiDivBox select:focus{
    border: 2px solid #000 !important;
}

.assestment-card .rz-data-grid {
    max-height: 420px;
}

.chkInputBox {
    width: 20px;
    height: 20px;
    margin-right: 5px;
}

.chkNosStyle {
    color: #fff;
    /* text-indent: 0.5em; */
    width: 71%;
}

#fileInputLabel {
    display: inline-block;
    background-color: #f7f7f7;
    color: #1a1919;
    padding: 5px 13px;
    border: 1px solid #121313;
    border-radius: 4px;
    cursor: pointer;
    margin-left: 10px;
}

    #fileInputLabel:hover {
        background-color: #ebeced;
    }

#fileInput {
    display: none;
}

.lang {
    position: absolute;
    right: 1em;
    top: 1em;
}

.alpha tr td ol li {
    list-style-position: outside !important;
}

.flabel {
    color: #fff !important;
}

.Instruction table tr td ul li {
    color: var(--normal-text) !important;
}

.newh4 {
    color: var(--normal-text) !important;
}

.Instruction table tr td {
    color: var(--normal-text) !important;
}

.instructions-modal-dialog-width {
    max-width: 50% !important;
    margin-top: 5em !important;
}

ul.btBtns {
    padding: 0;
    margin: 0;
    width: 100%;
}

    ul.btBtns li {
        list-style: none;
        text-align: center;
        display: inline-block;
    }

.assessmentImg {
    /*    height: auto;
    max-width: 500px;
    margin: 0 auto;
    text-align: center;
   position: absolute;
    left: 68%;
    top: 3em; */
}

.submitresult-modal-dialog-width {
    max-width: 40% !important;
    max-height: 40% !important;
    margin-top: 5em !important;
}

.crtAcc {
    position: absolute;
    top: 5em;
    width: inherit;
    height: 89vh;
    margin: 0 auto;
    padding: 0 2em;

}

.modal-dialog-width {
    max-width: 75% !important;
    margin-top: 5em !important;
}

.fp-flex {
    display: flex !important;
    padding: 1em;
}

.xp-flex {
    display: flex !important;
    padding: 1em;
}

.fp-flex-label {
    display: block;
}

.f-input-gaps {
    padding: 0 3px;
}
.noBtn {
    width: 21% !important;
}

.mainlgClass {
    width: 60%;
}

.familyPhoto {

}

/* Modal Center */
.modal {
    text-align: center;
}

    .modal:before {
        display: inline-block;
        vertical-align: middle;
        content: " ";
        height: 100%;
    }

.modal-dialog {
    display: inline-block;
    text-align: left;
    vertical-align: middle;
    width: 80% !important;
}

.res-submit-btn {
    width:80% !important;
}

.smAlign {
    float: none;
}

.bookapt {
    margin-top: 1.5em;
    color: white;
}

.modal-dialog-scrollable {
    height: auto !important;
}

.profile-data h4 {
    word-wrap: break-word;
}

.img-fluid-new {
    max-width: 100% !important;
    height: auto !important;
}

.care-plan table > tr > td > div > div:nth-child(2) > img {
    width: 100% !important;
}

.modeClrStyle {
    color: var(--normal-text) !important;
}

.careplan_box {
    border: 1px solid #e7e7e7;
    border-radius: 5px;
    margin: 10px 0;
    box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,.075) !important;
    background-color: var(--box-color-02);
}

.eppImg {
    display: block;
    margin: 0 auto;
}
.custom-radio-btn{
    flex-wrap: wrap;
}
.custom-radio-btn .chkNosStyle {
    margin-right: 10px;
}
.custom-radio-btn .arthur-radio {
    margin-right: 10px;
}
.custom-radio-btn .arthur-radio li {
    min-width: auto;
}


@media screen and (max-width: 1440px) {
    .text-arthur-blue {
        width: 110px !important;
    }
}
    /*********** responsive css ****************/
    @media screen and (max-width: 1024px) {

        .nav-item > button {
            padding: 0.5rem 0.3rem;
        }

        .med_none {
            display: none;
        }

        .provider-button {
            margin-left: 0;
        }

        .fpw {
            width: 100% !important;
        }
    }

    /*********** responsive css ****************/
    @media screen and (max-width: 768px) {
        .xs-box {
            width: 100%;
        }

        .d-flex {
            display: block !important;
            padding: 1em;
        }

        .pt12 {
            padding-top: 33% !important;
        }

        #app > div > div.px-4.top-row > div > a > h4 {
            text-align: left;
            float: right;
        }

        .rz-dropdown, .rz-textbox {
            width: 80%;
        }

        /* Blue Area */
        .profile ul {
            margin-top: 0;
        }

            .profile ul li {
                width: 100%;
            }

        /* Pop up Instructions */
        .instructions-modal-dialog-width {
            max-width: 96% !important;
            margin-top: 3em !important;
        }

        /* To do list */
        .nav-item > button {
            padding: 0.5rem 0.3rem;
        }

        /* Assessment details bottom btns */
        ul.btBtns {
            display: inline-grid;
        }

            ul.btBtns li {
                display: table-cell;
            }

                ul.btBtns li > button {
                    margin-bottom: 1em;
                    width: 100%;
                }

        /* Assessment Iamge */
        .assessmentImg {
            margin: 0 auto;
            display: table;
        }

        /* Submit Modal */
        .submitresult-modal-dialog-width {
            max-width: 96% !important;
            margin-top: 3em !important;
        }

        /* thermometer */
        .assestment-card ul {
            list-style: none;
        }

        .loading, .profile-loading {
            overflow: visible;
        }

        .modal-dialog-width {
            max-width: 96% !important;
            margin-top: 5em !important;
        }

        .submitresult-modal-dialog-width {
            max-width: 95% !important;
            margin-top: 5em !important;
        }

        .fp-flex {
            display: block !important;
            padding: 1em;
        }

        .noBtn {
            width: 40% !important;
        }

        .submitresult-modal-dialog-height {
            max-height: 50vh !important;
        }

        .provider-card {
            height: auto;
        }

        .date-picker {
            margin-left: 0;
            padding: 1em;
        }

        .modal-form-alt {
            height: auto !important;
            overflow: auto;
        }

        .map {
            width: 100% !important;
            height: 100% !important
        }

        .mainlgClass {
            width: 80%;
        }

        .familyPhoto {
            width: 80%;
        }

        .profile {
            height: 120px;
        }

            .profile ul {
                flex-wrap: wrap;
            }

        .chkNosStyle {
            width: 53%;
        }

        .noPadz {
            padding: 0 !important;
        }

        .modal:before {
            display: contents;
            vertical-align: top;
            content: " ";
            height: 100%;
        }

        .bookapt {
            margin-top: 1em;
            margin-bottom: 1em;
        }

        /* ahsan 30-1-24 */
        .assestment-card .question .indent-text {
            text-indent: 0px;
        }

        .dashboard-cards {
            height: auto !important;
        }

        .core-plan-modal .modal-dialog-width {
            max-width: 80% !important;
        }

        .provider-button {
            margin-left: 0;
        }

        .dashboard-cards {
            height: auto;
        }

        .hd-none {
            display: none !important;
        }

        .signup-100 {
            width: 100% !important;
        }
        #appointmentrequest-EnterPincode {
            width: 80%;
        }
    }


    @media (max-width: 640.98px) {
        .top-row:not(.auth)[b-kulsww2jhc] {
            display: block !important;
        }

        .top-row[b-kulsww2jhc] {
            height: auto;
        }

        .top-row.auth[b-kulsww2jhc] {
            justify-content: space-between;
        }

        .top-row[b-kulsww2jhc] a, .top-row[b-kulsww2jhc] .btn-link {
            margin-left: 0;
        }

        .xp-flex {
            display: block !important;
            padding: 3px;
        }

        .smAlign {
            float: right;
        }
    }

    @media (min-width: 576px) {
        .modal-dialog-scrollable {
            height: auto !important;
        }
    }

    @media (max-width: 475px) {
        .custom-plan-modal .nav-tabs .nav-link {
            font-size: 14px;
        }
        .care-plan b, strong {
            word-break: break-all !important;
        }
        .care-plan a {
            word-break: break-all !important;
        }
        /* .core-plan > #_goodler > .parent-div { */
        .care-plan > #_goober:empty{
            width: 92%;
        }
        .care-plan ul {
            padding-left: 6px !important;
        }
        
    }

    @media (max-width: 420px) {
        /* .care-plan img {
            width: 80% !important;
            height: auto !important;
        } */
        
    }

    @media screen and (max-width:1024px) and (orientation:landscape) {
        .dashboard-cards {
            height: auto !important;
        }
    }


    /* ahsan 30-01-24 */
    .dashboard-cards {
        height: calc(100vh - 200px);
    }