.txtKanitMed {
    font-family: 'Rubik', sans-serif;
    font-weight: 500 !important;
}

.txtKanitBold {
    font-family: 'Rubik', sans-serif;
    font-weight: 700 !important;
}

.txtKanitLight {
    font-family: 'Rubik', sans-serif;
    font-weight: 300 !important;
}

.txtRubikReg {
    font-family: "Rubik", sans-serif;
    font-weight: 400 !important;
}

.txtRubikMed {
    font-family: "Rubik", sans-serif;
    font-weight: 500 !important;
}

.txtRubikSemiBold {
    font-family: "Rubik", sans-serif;
    font-weight: 600 !important;
}

.txtRubikBold {
    font-family: "Rubik", sans-serif;
    font-weight: 700 !important;
}

.txtRubikLight {
    font-family: "Rubik", sans-serif;
    font-weight: 300 !important;
}

.txtNunitoReg {
    font-family: "Nunito Sans", sans-serif;
    font-weight: 400 !important;
}

.txtNunitoSemiBold {
    font-family: "Nunito Sans", sans-serif;
    font-weight: 600 !important;
}

.txtNunitoMed {
    font-family: "Nunito Sans", sans-serif;
    font-weight: 500 !important;
}

.txtNunitoBold {
    font-family: "Nunito Sans", sans-serif;
    font-weight: 700 !important;
}

.txtInterReg {
    font-family: "Inter", sans-serif;
    font-weight: 400 !important;
}

.txtInterSemiBold {
    font-family: "Inter", sans-serif;
    font-weight: 600 !important;
}

.txtCairoReg {
    font-family: 'Cairo',sans-serif;
    font-weight: 400;
}

.btnAddHistory {
    margin-left: 2.5rem;
    width: 6rem;
}

.imgIcon {
    width: 1.5rem;
    /*filter to make image white*/
    filter: brightness(0) invert(1);
}

a.nav-link:hover {
    img.imgIcon {
        filter: none;
    }
}

a.nav-link.active {
    img.imgIcon {
        filter: none;
    }
}

.brdRLGray {
    border-left: 1px solid #bbbbbb;
    border-right: 1px solid #bbbbbb;
}

.pl2-5 {
    padding-left: 2.5rem !important;
}

.selectedShift {
    background-color: var(--palebluecolor);
}

.textDot {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 17rem;
    margin: 0 auto;
}

ul.daysUl {
    position: absolute;
    background-color: white;
    width: 100%;
    border: 1px solid;
    padding: 1rem;
    top: 4.5rem;
    z-index: 99;
}

ul.daysUl li {
    list-style: none;
    margin-bottom: 0.5rem;
}

.btnW {
    width: 5rem;
    margin-left: 0.25rem;
    margin-right: 0.25rem;
}

.pt0-5h7 {
    padding-top: 0.5rem !important;
    height: 7rem;
}

.spinner-border {
    width: 1rem;
    height: 1rem;
}
.autocomplete > .input-group > input[b-zkhsnlgtvk] {
    border: none;
    border-bottom: 1px solid;
    border-radius: 0 !important;
}

/* Custom styles for the Blazor Bootstrap Autocomplete input */
#autoCompleteImpression > .autocomplete > .input-group > input {
    border: 1px solid var(--primarycolor);
    border-radius: 0.75rem !important;
    height: 2.6rem;
}
#autoCompleteFinalImpression > .autocomplete > .input-group > input {
    border: 1px solid var(--primarycolor);
    border-radius: 0.75rem !important;
    height: 2.6rem;
}
#autoCompletePrescription > .autocomplete > .input-group > input {
    border: 1px solid var(--primarycolor);
    border-radius: 0.75rem !important;
    height: 2.6rem;
}
#autoCompletePrescription > .autocomplete {
    width:100%;
}

#autoCompletePatient > .autocomplete > .input-group > input {
    border: 1px solid var(--primarycolor);
    border-radius: 0.75rem !important;
    height: 2.6rem;
}

#autoCompletePatient > .autocomplete {
    width: 100%;
}
#autoCompletePatientReferralModal {
    width:83%;
}

#autoCompleteCountry > .autocomplete > .input-group > input {
    border: 1px solid var(--primarycolor);
    border-radius: 0.75rem !important;
    height: 2.6rem;
}

#autoCompleteCountry > .autocomplete {
    width: 100%;
}

ul.listLi {
    padding-left: 1rem;
    margin-bottom: 0.5rem;
}
ul.listLi li {
    list-style: none;
}
.w80 {
    width: 80% !important;
}

.txtCyan {
    color: var(--primarycolor);
}

.btnWaitingBg, .btnWaitingBg:hover, .btnSave, .btnSave:hover {
    background-color: #369cbf;
    color: white;
}

.bgReviews {
    background-image: url(/Images/Home/bgReviews.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: left top;
    height: 25rem;
}

.AppearanceAuto {
    appearance: auto !important;
}

/*start calendar*/
.disabledEvent {
    background: lightgray;
    border-left: 2px solid black;
}

.Treatment {
    background: darkseagreen;
    border-left: 2px solid green;
}

.PremiumAppointment {
    background: #F5C3C3;
    border-left: 2px solid #DE2A2A;
}

.Meeting {
    background: #D9C1F9;
    border-left: 2px solid #8428E3;
}

.General {
    background: #C0F3F6;
    border-left: 2px solid #20D7DD;
}

.Appointment {
    background: #F6E0C4;
    border-left: 2px solid #E6AE5F;
}

.FollowUp {
    background: #c6ff83;
    border-left: 2px solid #6a8b43;
}

.Operation {
    background: #3f98c3;
    border-left: 2px solid #0f2732;
    color: white;
}

.Consultation {
    background: #1cc9b9;
    border-left: 2px solid #057269;
}

.PremiumTreatment {
    background: #ff867d;
    border-left: 2px solid #6a322e;
}

.Absence {
    background: #d72a2a;
    border-left: 2px solid #4f0505;
    color: white;
}

.PaidTimeOff {
    background: #9bd72a;
    border-left: 2px solid #374d0e;
}

.BankHoliday {
    background: #d7bb2a;
    border-left: 2px solid #4f440a;
}

.Classified {
    background: #0558c3;
    border-left: 2px solid #011127;
    color: white;
}

.Booking {
    background: #1c9f45;
    border-left: 2px solid #083315;
}

table#Calendar tr.firstRow {
    background-color: #b8bec1 !important;
}

table#Calendar tr:nth-child(odd) {
    background-color: #c4d7df;
}

table#Calendar tr:nth-child(even) {
    background-color: #ffffff;
}

table#Calendar tr th:last-child {
    text-align: center;
}

select#EventTypeList {
    width: 100% !important;
    height: 2.7rem;
    color: black !important;
}

.h7 {
    height: 7rem;
}

.resize {
    resize: none;
}

.btnOutlineRed, .btnOutlineRed:hover {
    color: red;
    border: 1px solid red;
}
/*end calendar*/
/*start switch btn*/
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #c1c1c1;
    -webkit-transition: .4s;
    transition: .4s;
    width: 3.35rem;
    height: 1.7rem;
}

    .slider:before {
        position: absolute;
        content: "";
        height: 1.25rem;
        width: 1.25rem;
        left: 4px;
        bottom: 4px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }

input:checked + .slider {
    background-color: var(--primarycolor);
}

input:focus + .slider {
    box-shadow: 0 0 1px var(--primarycolor);
}

input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

    .slider.round:before {
        border-radius: 50%;
    }
/*end switch btn*/

.disableStars {
    pointer-events: none;
}

/****** Style Star Rating Widget *****/
.textLeft {
    text-align: left;
}

.rating {
    direction: rtl;
    unicode-bidi: bidi-override;
    color: #ddd; /* Personal choice */
}

.ratingModal {
    direction: rtl;
    unicode-bidi: bidi-override;
    color: #ddd; /* Personal choice */
}

    .ratingModal input {
        display: none;
    }

        .ratingModal label:hover,
        .ratingModal label:hover ~ label,
        .ratingModal input:checked + label,
        .ratingModal input:checked + label ~ label {
            color: #fbba00; /* Personal color choice. Lifted from Bootstrap 4 */
            cursor: pointer;
        }

.rating input {
    display: none;
}

.rating label.disabledRating:hover, .disabledRating {
    pointer-events: none;
    cursor: default;
}

.svg-inline--fa.fa-w-18 {
    width: 1.6rem;
}

.f1-2 {
    font-size: 1.2rem !important;
}

.alignTxtRev {
    text-align: left;
}

/*.ratingModal > [type="radio"]:checked,
.ratingModal > [type="radio"]:not(:checked) {
    position: absolute;
    left: -9999px;
}*/

    .ratingModal > [type="radio"]:checked + label,
    .ratingModal > [type="radio"]:not(:checked) + label {
        position: relative;
        padding-left: 0;
        cursor: pointer;
        line-height: 20px;
        display: inline-block;
        margin-right: 0;
    }


    .ratingModal > [type="radio"]:checked + label:before, .ratingModal > [type="radio"]:not(:checked) + label:before {
            display: none;
        }

.ratingModal > [type="radio"]:checked + label:after,
.ratingModal > [type="radio"]:not(:checked) + label:after {
    display: none;
}

        .ratingModal > [type="radio"]:not(:checked) + label:after {
            opacity: 0;
            -webkit-transform: scale(0);
            transform: scale(0);
        }

        .ratingModal > [type="radio"]:checked + label:after {
            opacity: 1;
            -webkit-transform: scale(1);
            transform: scale(1);
        }
/* End Rating */

/*start chat*/
/* CSS talk bubble */
.talk-bubble {
    margin: 0.75rem;
    display: inline-block;
    position: relative;
    width: 75%;
    height: auto;
    background-color: lightyellow;
    border-radius: 0.75rem;
}

/* talk bubble contents */
.talktext {
    padding: 1em;
    text-align: left;
    line-height: 1.5em;
    font-family: 'Cairo', 'sans-serif';
}

    .talktext p {
        /* remove webkit p margins */
        -webkit-margin-before: 0em;
        -webkit-margin-after: 0em;
    }

.left-top.you {
    border-top-left-radius: 0;
}

.btm-right.me {
    border-bottom-right-radius: 0;
}

ul li.chatLi {
    list-style: none;
    border-bottom: 1px solid #a1d9ec;
    padding-top: 1rem;
    height: 6rem;
}

.chatImg {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background-color: gray;
    margin-right: 0.75rem;
}

.numberContentChat {
    width: 2rem;
    margin-left: auto;
}

.colorPrimaryChat {
    border-radius: 50%;
    width: 2rem;
    height: 2rem;
    padding: 5px;
    background: #017dc0;
    border: 2px solid #017dc0;
    color: #fff;
    text-align: center;
    font-size: 0.8rem;
    margin-left: auto;
}

.me {
    float: right;
    background-color: #a5d3e3 !important;
}

    .me:after {
        border-color: #a5d3e3 #a5d3e3 transparent transparent !important;
    }

.you {
    background-color: #d5d9db !important;
}

    .you:after {
        border-color: #d5d9db #d5d9db transparent transparent !important;
    }

ul.listStyleNone li {
    list-style: none;
}

.vAMid {
    vertical-align: middle;
}

.bgChat {
    background-color: #cad4d7;
}

.scrollChat {
    overflow-x: hidden;
    overflow-y: scroll;
    height: 81vh;
}

.txtTime {
    color: var(--primarycolor);
}

.resizeN {
    resize: none;
}

.btnSendMsg {
    width: 3rem;
    height: 3rem;
    display: block;
    vertical-align: middle;
    margin-left: 0.5rem;
}

.btnFrame {
    border: none;
    margin: 0;
    padding: 0;
    background-color: transparent;
}

.senderImg {
    vertical-align: top;
    margin-top: 1rem;
    width: 2.5rem;
    height: 2.5rem;
    margin-right: 0;
    border-radius: 50%;
}

li.chatList:not(:first-child) img {
    opacity: 0
}

li.chatList:not(:first-child) div.left-top.you {
    border-top-left-radius: 0.75rem;
}

.h92 {
    height: 92% !important;
}
/*end chat*/
/*custom dropdown*/
ul#ListUl {
    position: absolute;
    z-index: 9999;
    background: white;
    border: 1px solid #efefef;
    width: 100%;
    top: 2.5rem;
    list-style: none;
    left: 0;
    text-align: left;
    padding: 0.5rem;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 2px 8px;
}

.overflowXInherit {
    overflow-x: inherit;
}

ul#ListUl li:hover {
    background-color: #94c1dd;
}

/*end custom dropdown*/
.salesIcon {
    width: 1.5rem;
    height: 1.3rem;
    margin-right: 0.8rem;
}

.txtLink {
    color: #0065ad;
    cursor: pointer;
}

    .txtLink:hover {
        text-decoration: underline;
    }

.borderSolid {
    border: 1px solid #121212;
    max-height: 29rem;
    overflow-y: scroll;
}

.h32 {
    max-height: 32rem;
}

.boxOrange {
    background-color: #ff8000 !important;
}

.boxGray {
    background-color: #adadad !important;
}

.boxPaleGreen {
    background-color: #7cd200 !important;
}

.boxDeepGreen {
    background-color: #2ca01c !important;
}

.boxPaleBlue {
    background-color: #0988b3;
}

.boxDeepBlue {
    background-color: #074368;
}

.txtDeepGreen {
    color: #2ca01c;
}

.mt1-8 {
    margin-top: 1.8rem !important;
}

.w11 {
    width: 11rem;
}

.bgGreen {
    background-color: #019245;
}

.bgPaleBlue {
    background-color: #b5c7fb;
}

.bgTabsPaleBlue {
    background-color: #e2f1f6;
    margin-top: -0.15rem;
}

.txtPrimary {
    color: var(--primarycolor);
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active, .nav-tabs .nav-link:hover {
    color: #074368;
    background-color: #e2f1f6;
    border: none !important;
}

.nav-tabs#nav-tab2 .nav-item.show .nav-link, .nav-tabs#nav-tab2 .nav-link.active, .nav-tabs#nav-tab2 .nav-link:hover {
    color: var(--primarycolor);
    background-color: transparent;
    border: none !important;
}

.nav-tabs .nav-link {
    color: white;
    border:none !important;
}

.arrowIcon {
    transform: rotateX(0deg);
    transition: all 0.5s;
}

.FlipArrow {
    transform: rotateX(180deg);
    transition: all 0.5s;
}

.AccountingLink {
    height: 2.5rem;
    padding-left: 3rem;
    background-color: #1b5e74;
    transition: height 0.5s;
    font-size: 0.9rem;
}

.mt1-5 {
    margin-top: 1.5rem;
}

.mt1-7 {
    margin-top: 1.7rem;
}

.h2-4 {
    height: 2.4rem;
}

.mt1-2 {
    margin-top: 1.2rem;
}

.mt1-3 {
    margin-top: 1.3rem;
}

.txtRed {
    color: red;
}

.H2-7 {
    height: 2.7rem;
}

.customPosition {
    height: 5.7rem;
    margin-top: -1.5rem;
}

.txt0-85 {
    font-size: 0.85rem;
}

.AccountingLink:hover {
    background-color: #1b5e74 !important;
    color: #a8862c !important;
}

.WH2-5 {
    height: 2.5rem;
    width: 2.5rem;
    margin: 0 auto;
    text-align: center;
}

.accordionBodyMenu {
    padding: 0rem;
}

.w1-5em {
    width: 1.5em !important;
}

.accItem {
    background: transparent;
    border: none;
}

.AccLinkH {
    height: 2.5rem;
    transition: height 0.5s;
}

.accButton {
    height: 2.5rem;
    background-color: transparent;
    color: var(--menucolor);
    border-bottom: none;
    font-family: 'Rubik',sans-serif;
    font-weight: 400;
    padding: 0.85rem !important;
}

    .accButton::after {
        background-image: url(/Images/Icons/download.svg);
    }

    .accButton:not(.collapsed) {
        color: var(--menucolor);
        background-color: #074368;
        box-shadow: none !important;
    }

        .accButton:not(.collapsed)::after {
            background-image: url(/Images/Icons/download.svg);
        }

/*.accordion-button::after {
    background-image: url(/Images/Icons/arrow-accordion.svg) !important;
    margin-top: 0.75rem;
    margin-left: 0.5rem;
}
.accordion-button:not(.collapsed)::after {
    margin-top: 0;
}*/
#LargeModal {
    height: 90vh;
    max-width: 60vw;
}

#VariantsList {
    display: none;
}

#SubVariantsList {
    display: none;
}

.dropdown {
    position: relative;
    /*width: 200px;*/
}



    .dropdown select {
        width: 100%;
    }



    .dropdown > * {
        box-sizing: border-box;
        height: 1.5em;
    }



    .dropdown input {
        position: absolute;
        width: calc(100% - 20px);
    }

.w1-5 {
    width: 1.5rem;
}
.w1 {
    width: 1rem;
}

.modalWBill {
    max-width: 45%;
}

.txtArea5 {
    resize: none;
    height: 5rem !important;
}

.imgFavProd {
    position: absolute;
    right: 1rem;
    top: 1rem;
    cursor: pointer;
}

    .imgFavProd:hover, .favClicked {
        content: url(/Images/Icons/favorite-Hover.svg);
    }

.removeFavClicked {
    content: url(/Images/Icons/favorite.svg);
}

.imgLike:hover, .likeClicked {
    content: url(/Images/Icons/like-hover.png);
}

.removeLikeClicked {
    content: url(/Images/Icons/like.png);
}

/*start suppliers*/
ul.editList li {
    list-style: none;
    display: inline-block;
    margin-left: -0.8rem;
    margin-top: 0.5rem;
    cursor: pointer;
    font-family: 'Rubik', sans-serif;
    font-weight: 400;
}

.editSubMenu {
    background-color: #9bcddf;
    z-index: 999;
    margin-left: -6rem !important;
    margin-top: 0rem !important;
    cursor: default;
    padding-top: 0;
    padding-bottom: 0;
    border-radius: 0;
}

.dropdownLink {
    color: #000;
}


    .dropdownLink:hover {
        text-decoration: underline;
        background: transparent;
    }

.mr1-5RTL {
    margin-right: 1.5rem;
}

#SupplierModalDialog {
    max-width: 60vw;
}

.brdL {
    border-left: 0.1rem solid #7c7c7c;
}

.brdLSettings {
    border-left: 0.1rem solid var(--primarycolor);
}

.appearanceAuto {
    -webkit-appearance: auto;
    -moz-appearance: auto;
    appearance: auto;
}

.w40P {
    width: 40%;
}

.w45P {
    width: 45%;
}

.w20P {
    width: 20%;
}

input.disabled {
    pointer-events: none;
}

.pointerLine {
    color: black !important;
    text-decoration: none !important;
}

    .pointerLine:hover {
        text-decoration: underline !important;
    }

.w33P {
    width: 33%;
}

.w12 {
    width: 12rem;
}


/*end suppliers*/

/*start dropdown checkbox css*/
.dropdown-check-list {
    display: inline-block;
}

    .dropdown-check-list .anchor {
        position: relative;
        cursor: pointer;
        display: inline-block;
        padding: 5px 50px 5px 10px;
        border: 1px solid #ccc;
    }

        .dropdown-check-list .anchor:after {
            position: absolute;
            content: "";
            border-left: 2px solid black;
            border-top: 2px solid black;
            padding: 0.15rem;
            right: 10px;
            top: 30%;
            -moz-transform: rotate(-135deg);
            -ms-transform: rotate(-135deg);
            -o-transform: rotate(-135deg);
            -webkit-transform: rotate(-135deg);
            transform: rotate(-135deg);
        }

#CoursesList {
    position: relative;
}

.iconArrow {
    position: absolute;
    right: 0.5rem;
    top: 0;
    font-size: 1.7rem;
}

.dropdown-check-list .anchor:active:after {
    right: 10px;
    top: 30%;
}

.dropdown-check-list ul.items {
    padding: 2px;
    display: none;
    margin: 0;
    border: 1px solid #ccc;
    border-top: none;
    background-color: white;
}

.dropdown-check-list ul.items {
    position: absolute;
    width: 100%;
}

    .dropdown-check-list ul.items li {
        list-style: none;
    }

.dropdown-check-list.visible .anchor {
    color: #0094ff;
}

.dropdown-check-list.visible .items {
    display: block;
}

.borderBgNone {
    border: none;
    background-color: transparent !important;
}

/*end dropdown checkbox css*/
:root {
    --blackcolor: #000;
    --whitecolor: #FFF;
    --defaultGray: #999999;
    --sidebarmenucolor: #e7e6e6;
    --activecolor: #074368;
    --menucolor: #0988b3;
    --bgopacity: #0743684d;
    --titlecolor: #074368;
    --primarycolor: #0988b3;
    --secondarycolor: #074368;
    --btncolor: #2d91cf;
    --inputBorder: #a1a1a1;
    --editcolor: #4caf50;
    --palebluecolor: #c2ecfb;
}

.btnBackToTop {
    padding: 0.3rem 0.5rem;
    font-size: 1.2rem;
    position: fixed;
    right: 1.5rem;
    bottom: 7rem;
    opacity: 0;
    transition: all 0.5s;
}

.btnBackToTopBlock {
    opacity: 1;
}

.bgDegreeOdd {
    background-color: var(--boxdegreeodd);
}

.bgDegreeEven {
    background-color: var(--boxdegreeeven);
}

.bgPaleYellow {
    background-color: var(--paleyellowcolor);
}

.btnAddBg, .btnAddBg:hover {
    background-color: var(--palebluebtncolor);
    color: white;
    font-family: 'Nunito Sans', sans-serif;
}

.btnAddBgDrpDwn {
    background-color: var(--palebluebtncolor);
    color: white;
    font-family: 'Nunito Sans', sans-serif;
}

.brdR, .brdRBill {
    border-right: 1px solid #ced4da;
}

ul.clothingSubMenu li a {
    color: var(--menucolor);
}

    ul.clothingSubMenu li a:hover {
        color: var(--activecolor);
    }

.bgDefaultGray {
    background-color: var(--defaultGray);
}

.txtOrange {
    color: var(--activecolor);
}

.txtDeepOrange {
    color: #FF9800;
}

.starFill {
    content: url('/Images/Icons/star-fill.png');
}

.iconStar {
    height: 1.3rem;
    width: 1.3rem;
}

.linkOrange {
    color: var(--activecolor) !important;
    text-decoration: none !important;
}

    .linkOrange:hover {
        color: var(--activecolor) !important;
        text-decoration: underline !important;
    }

.txtBlack, .txtBlack:hover {
    color: var(--blackcolor);
}

.txtWhite {
    color: var(--whitecolor);
}

.bgSection {
    background-color: var(--sectionbackground);
}

.imgArrow {
    width: 3rem;
}

.h45 {
    height: 45rem;
}

.mt2 {
    margin-top: 2rem;
}

.h1 {
    height: 1rem;
}

.pointer {
    cursor: pointer;
}

.cartNo {
    left: 1rem;
    top: -0.5rem;
    background: #c90000;
    padding: 0.07rem;
    border-radius: 50%;
    color: #fff;
    position: absolute;
    font-weight: bold;
    width: 1.5rem;
    height: 1.5rem;
    text-align: center;
    font-size: .9rem;
}

/*.btnCart:after {
    content: "";
    width: 3rem;
    height: 1rem;
    background: url('/Images/Icons/CartWhite.png');
    background-size: contain;
    background-repeat: no-repeat;
}*/
/*Bio section*/
.firstClip {
    clip-path: polygon(0px 0px, 100% 0px, 80% 100%, 0px 100%);
}

.secondClip {
    clip-path: polygon(17% 0px, 97% 0px, 80% 100%, 0px 100%);
}

.thirdClip {
    clip-path: polygon(17% 0px, 97% 0px, 80% 100%, 0px 100%);
}

.imgGrayScale {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
}

.mlN5 {
    margin-left: -5rem;
}

.mlN10 {
    margin-left: -10rem;
}

.imgGrayScale:hover {
    filter: grayscale(0%);
    -webkit-filter: grayscale(0%);
}

.imgTxtFirst {
    margin-left: 1.5rem;
}

.imgTxtSecond {
    margin-left: -2rem;
}

.imgTxtThird {
    margin-left: -2rem;
}

.clipped {
    clip-path: polygon(20% 0, 100% 0, 80% 100%, 0 100%);
}

.bgGrayClipped {
    background: #e5e5e5;
    margin-left: -18.5rem;
    clip-path: polygon(15% 0, 100% 0, 85% 100%, 1% 100%);
    height: 60%;
    margin-top: 2rem;
    width: 33rem;
}

.borderBlackClipped {
    background: #e5e5e5;
    border: 1px solid;
    margin-left: -18.5rem;
    clip-path: polygon(15% 0, 100% 0, 85% 100%, 1% 100%);
    height: 60%;
    margin-top: 2rem;
    width: 33rem;
}

.pic1 {
    width: 23.7rem;
    background-image: url(../Images/Home/LatestNews.png);
    background-repeat: no-repeat;
    background-position: 32% center;
    height: 19rem;
}


.pic3 {
    width: 28.7rem;
    background-image: url(../Images/Home/BookDJ.png);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: 8% center;
    height: 19rem;
    margin-left: -5rem;
}

.pic2 {
    width: 28.7rem;
    background-image: url(../Images/Home/RadioShow.png);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: 16% center;
    height: 19rem;
    margin-left: -4.5rem;
}

.pic4 {
    /*background: #e5e5e5;
    clip-path: polygon(17% 0px, 100% 0px, 100% 100%, 0px 100%);
    height: 305px;
    margin-left: -4.3rem;
    width: 28.4rem;*/
    background: rgb(229, 229, 229);
    clip-path: polygon(14% 0px, 100% 0px, 83% 100%, 0px 100%);
    height: 17rem;
    width: 31.4rem;
    margin-top: 1rem;
    margin-left: -7.5rem;
}

.pBio {
    position: absolute;
    margin-top: -17rem;
    width: 23rem;
    margin-left: -2rem;
}

.button-slanted {
    -ms-transform: skewX(-20deg);
    -webkit-transform: skewX(-20deg);
    transform: skewX(-20deg);
    color: #212529;
    background-color: #ffffff;
    text-align: center;
    padding: 5px 10px;
    margin: 1rem;
    margin-left: 0;
    display: block;
    border: 1px solid #212529;
    width: 8rem;
}

    .button-slanted:hover {
        background: #000;
        color: #fff;
        cursor: pointer;
    }

.button-slanted-content {
    -ms-transform: skewX(20deg);
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    display: inline-block;
}
/*end bio section*/

/*start events section*/
.bgTilt {
    position: relative;
    margin-left: 3rem;
    margin-top: 5rem;
    height: 17rem;
    width: 31.4rem;
    background: var(--whitecolor);
    clip-path: polygon(17% 0px, 100% 0px, 83% 100%, 0px 100%);
}

.pEvents {
    position: absolute;
    margin-left: 6.5rem;
    margin-top: 2.5rem;
    width: 70%;
}

.txtFontAwesome {
    font-size: 1.2rem;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}

    .txtFontAwesome:hover {
        color: var(--activecolor);
    }

.borderGray {
    height: 16rem;
    position: relative;
}

    .borderGray img {
        background: transparent;
        border-radius: 0;
        padding: 1rem;
        height: auto;
        width: auto !important;
        max-height: 100%;
        max-width: 100%;
        margin: 0 auto;
    }

.border0 {
    border: none;
}

.linkBlack {
    color: black !important;
    text-decoration: none !important;
    margin: 0 auto;
    transition: all 0.4s;
}

.linkUnderlined {
    color: black !important;
    text-decoration: none !important;
    margin: 0 auto;
    transition: all 0.4s;
}

    .linkUnderlined:hover {
        color: black !important;
        text-decoration: underline !important;
    }

.linkBlack:hover .btn {
    display: none;
    transition: all 0.4s;
}

.linkBlack:hover {
    color: var(--activecolor) !important;
    text-decoration: none !important;
}

.overlaySlider {
    position: absolute;
    background: transparent;
    width: 100%;
    height: 100%;
    top: 0;
}

    .overlaySlider:hover {
        display: none;
    }

.btnTickets {
    top: 6rem;
    position: absolute;
    left: 30%;
    background: black;
    color: white;
    border-radius: 1.5rem;
}
/*end events section*/

/*start products range*/
.borderGrayRange {
    height: 20rem;
    position: relative;
}

    .borderGrayRange img {
        background: transparent;
        border-radius: 0;
        padding: 0 !important;
        height: auto;
        width: auto !important;
        max-height: 100%;
        max-width: 100%;
        margin: 0 auto;
    }

    .borderGrayRange:hover .btnShop {
        color: var(--activecolor);
    }

.borderGray {
    border: 1px solid rgba(0,0,0,.125);
}

.btnShop {
    bottom: 2.5rem;
    position: absolute;
    left: 28%;
    background: black;
    color: white;
    border-radius: 2rem;
    width: 10rem;
    padding: 0.2rem;
}

    .btnShop:hover {
        color: var(--activecolor);
    }
/*end products range*/

/*start Testimonial section*/
.bgTestimonial {
    background-repeat: no-repeat !important;
    height: 40rem;
    background-size: cover !important;
    background-position: 50% !important;
    width: 100%;
    background-image: url(../Images/Home/bgTestimonials.png);
}

.bgTiltTestimonial {
    background: rgba(256, 256, 256,0.3);
    clip-path: polygon(10% 0px, 100% 0px, 90% 100%, 0px 100%);
    width: 77%;
    height: 27rem;
    text-align: center;
    margin: 0 auto;
    position: relative;
}

.txtTestimonial {
    position: absolute;
    width: 75%;
    margin: 0 auto;
    text-align: center;
    margin-left: 9rem;
    top: 25%;
}

#carouselTestimonial {
    margin-top: 4rem;
}
/*end Testimonial section*/


/*start contact section*/
.txtArea {
    resize: none;
    height: 7rem !important;
}

.bgGrayInput, input.bgGrayInput:focus, textarea.bgGrayInput:focus {
    background-color: #dbdbdb;
    border: none;
    border-radius: 0;
}

    .bgGrayInput.form-control::placeholder {
        color: var(--blackcolor);
    }

.btnSend {
    background: black;
    color: white;
    border-radius: 1.5rem;
}

    .btnSend:hover {
        color: var(--activecolor);
    }

.txtLine {
    text-decoration: none;
}

    .txtLine:hover {
        text-decoration: underline;
    }

.imgSoc {
    width: 2.5rem;
    height: 2.5rem;
    margin-left: 0.15rem;
    margin-right: 0.15rem;
}

.hrLine {
    height: 0.1rem;
    background: var(--menucolor);
    border: none;
    opacity: 1;
    margin: 0;
}

.imgLogo {
    width: 120px;
}
/*end contact section*/

/*start products list*/
.col3Prod {
    position: relative;
    flex: 0 0 23%;
    width: 23%;
    margin-right: 0.25rem;
    margin-left: 1rem;
    padding: 0;
    margin-bottom: 2rem;
}

.bgGray {
    background-color: #e5e5e5;
    padding: 0.5rem;
}

.imgBorderGray {
    border: 1px solid #9a9a9a;
    border-bottom: none;
    height: 20rem;
    text-align: center;
}

.imgThumb {
    width: auto !important;
    max-width: 100%;
    margin: 0 auto;
    max-height: 100%;
    height: auto;
}

.btnBasket {
    text-align: center;
    margin-top: -1rem;
}

.btnCart, .btnCart:hover {
    background: black;
    color: white;
    border-radius: 2rem;
    width: 13rem;
    padding: 0.1rem;
}

.cartWhite {
    width: 1.2rem !important;
    margin: 0.25rem !important;
    display: inline-block !important;
}

.strikeThrough {
    text-decoration: line-through;
}

.w14 {
    width: 14rem !important;
}

.mr0-5 {
    margin-right: 0.5rem;
}

.scroll {
    padding: 4px;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
}
/*end products list*/
/*start pagination*/
.selectFormControl {
    height: 2rem;
    border: 1px solid #ced4da;
    background-color: white;
}

.h2-3 {
    height: 2.3rem;
}

.btnPage:hover {
    background-color: var(--secondarycolor);
    color: white;
}

.activePage {
    background-color: var(--secondarycolor);
    color: white;
}

ul.pageUl li {
    display: inline-block;
    padding: 0.25rem;
    cursor: pointer;
    width: 2rem;
    height: 2rem;
    border-radius: 1rem;
    font-family: 'Rubik', sans-serif;
    font-weight: 400;
}

    ul.pageUl li.prevBtn, ul.pageUl li.nextBtn {
        width: auto;
        height: auto;
        border-radius: 0;
    }
/*end pagination*/

/*start product details*/
.mt7 {
    margin-top: 7rem;
}

.mt10 {
    margin-top: 10rem;
}

.mb10 {
    margin-bottom: 10rem;
}

.mt2 {
    margin-top: 2rem;
}

#imgThumb {
    width: auto !important;
    max-width: 100%;
    margin: 0 auto;
    max-height: 100%;
    height: auto;
}

.imgCont {
    height: 25rem;
    margin: 0 auto;
    text-align: center;
    margin-top: 2rem;
    border: 1px solid;
}

.imgCenter {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 70%;
}

.w90 {
    width: 90%;
}

.imgColor {
    margin: 0.5rem;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
}

    .imgColor:hover {
        border: 2px solid var(--activecolor);
        cursor: pointer;
    }

.imgColorActive {
    border: 2px solid var(--activecolor);
}

.sizeBox {
    border: 1px solid #808080;
    color: #808080;
    padding: 0.5rem;
    width: 3rem;
    text-align: center;
    margin-right: 1rem;
}

    .sizeBox:hover, .sizeBoxActive {
        border: 1px solid #808080;
        color: #FFF;
        background: #808080;
        cursor: pointer;
    }

.txtGray {
    color: #7B8D9E;
}

.sizeChart {
    border-bottom: 1px solid;
    height: 2rem;
}

.ml1 {
    margin-left: 1rem;
}

.w3 {
    width: 3rem !important;
}

.borderGrayQty {
    border: 1px solid #808080;
}

ul.descUl {
    margin-left: -0.5rem;
}

    ul.descUl li {
        font-family: 'Rubik', sans-serif;
        font-weight: 400 !important;
        margin-bottom: 0.5rem;
    }

.checkedStar {
    color: gold;
}

.ml0-5 {
    margin-left: 0.5rem;
}

.txt0-7 {
    font-size: 0.7rem;
}
/*end product details*/
/*start contacts css*/
.bgContact {
    background: linear-gradient(to right,var(--sectionbackground) 50%,#ffffff 50%);
    -webkit-background: linear-gradient(to right,var(--sectionbackground) 50%,#ffffff 50%);
}
/*end contacts css*/

/*start login signup css*/
.loginLink {
    color: black !important;
    text-decoration: none;
}

    .loginLink:hover, .loginLink.active {
        color: var(--activecolor) !important;
        text-decoration: none;
    }

.bgBlackBtn {
    background: var(--menucolor);
    border-radius: 0;
}

.txtBlue {
    color: var(--menucolor) !important;
}

.bgBlackBtn:hover {
    color: var(--whitecolor);
}

.bgGrayBtn {
    background: #e5e5e5;
    border-radius: 0;
}

.bgWhiteInput {
    background: var(--whitecolor);
    border: 1px solid #919191;
    border-radius: 0;
    height: 3rem;
}

.bgPink {
    background-color: pink;
}

.btnBlack {
    width: 25%;
    text-align: center;
    margin: auto;
    background: var(--menucolor);
    color: white;
    border-radius: 2rem;
}

    .btnBlack:hover {
        color: var(--whitecolor);
    }

.w10 {
    width: 10rem;
}

.w20 {
    width: 20rem;
}

.PLR2 {
    padding-left: 2rem;
    padding-right: 2rem;
}

.w5 {
    width: 5rem;
}

.txtPaleOrange {
    color: #efa800;
}

.txtPrimaryIcon {
    color: #2d91cf;
}

.mTB10 {
    margin-top: 10rem;
    margin-bottom: 10rem;
}

.btnPadding {
    padding: 0.25rem 0.5rem;
}

.customMargin {
    margin: 0 auto;
}

.w12 {
    width: 12rem;
}

.w15 {
    width: 15rem;
}

.w15auto {
    width: 15rem;
    margin: 0 auto;
}

.w10auto {
    width: 10rem;
    margin: 0 auto;
}

.w5auto {
    width: 5rem;
    margin: 0 auto;
}

.w7auto {
    width: 7rem;
    margin: 0 auto;
}

.NoResize {
    resize: none;
}

.borderVat {
    border: 1px solid #9f9f9f !important;
    padding: 0.5rem;
}

.mr1 {
    margin-right: 1rem;
}

.mr2 {
    margin-right: 2rem;
}

.lblRadio {
    margin-left: 0.7rem;
    margin-top: -0.3rem;
}
/*end login signup css*/

/*start account css*/
.dropdownAccount {
    color: #fff;
    border-bottom: 1px solid var(--activecolor);
}

    .dropdownAccount.active, .dropdownAccount:hover {
        color: var(--activecolor);
        background: transparent;
    }

.pUserName {
    color: white;
    margin-bottom: 0;
    padding: 0 1rem 0.5rem 1rem;
}

.titleLogin {
    padding: 0.5rem;
    font-size: 1.5rem;
    color: var(--whitecolor);
    background: var(--menucolor);
}

ul.AccDetailsUl {
    margin-left: -1rem;
}

    ul.AccDetailsUl li {
        list-style: none;
        font-size: 1.1rem;
        margin-bottom: 0.5rem;
    }

    ul.AccDetailsUl a:hover li, ul.AccDetailsUl a.active li {
        color: var(--activecolor);
    }

.boxBg {
    background: #f1f1f1;
    border: 1px solid var(--menucolor);
}

.ml2 {
    margin-left: 2rem;
}

.accordionItem {
    border-color: transparent;
}

.accordionBtn {
    color: #fff;
    box-shadow: none !important;
    background-color: #000;
    border-radius: 0 !important;
}

    .accordionBtn:not(.collapsed) {
        color: #fff;
        background-color: var(--palebluebtncolor);
        box-shadow: inset 0 -1px 0 rgb(0 0 0 / 13%);
        width: auto;
    }

.accordionItem:last-of-type .accordionBtn.collapsed {
    width: auto;
}

.accordionBtn::after {
    background-image: url(/Images/Icons/ChevronDown.png);
    margin-left: 0.5rem;
}

.accordionBtn:not(.collapsed)::after {
    background-image: url(/Images/Icons/ChevronDown.png);
    margin-left: 0.5rem;
    transform: rotate(0deg);
}


.accordionBtnBill {
    color: #000;
    box-shadow: none !important;
    background-color: transparent;
    border-radius: 0 !important;
}

    .accordionBtnBill:not(.collapsed) {
        color: #000;
        background-color: transparent;
        box-shadow: inset 0 -1px 0 rgb(0 0 0 / 13%);
        width: auto;
    }

.accordionItem:last-of-type .accordionBtnBill.collapsed {
    width: auto;
}

.accordionBtnBill::after {
    background-image: url(/Images/Icons/ChevronDown.png);
    margin-left: 0.5rem;
    display: none;
}

.accordionBtnBill:not(.collapsed)::after {
    background-image: url(/Images/Icons/ChevronDown.png);
    margin-left: 0.5rem;
    transform: rotate(0deg);
    display: none;
}

.btnYesNo {
    width: 7rem;
    margin-left: 1rem;
}

.accordionBody {
    padding: 1rem 0;
}

.itemImg {
    width: 2rem;
    height: 2rem;
    margin: 0.5rem 1rem;
}

.borderR {
    border-right: 1px solid;
}

.heartWish {
    position: absolute;
    right: 1rem;
    top: 1rem;
    cursor: pointer;
}

.favImg {
    content: url('../Images/Icons/Heart-Fill.png');
}

.notFavImg {
    content: url('../Images/Icons/Heart.png');
}

.table > :not(:first-child) {
    border-top: 0;
}

table tr {
    border-bottom: 1px solid #dee2e6;
    border-top: 0;
}

.txtMessage {
    background: #efefef;
    -webkit-box-shadow: 0 3px 3px 0 rgb(0 0 0 / 20%);
    -moz-box-shadow: 0 3px 3px 0 rgba(0,0,0,.2);
    box-shadow: 0 3px 3px 0 rgb(0 0 0 / 20%);
    padding: 1.5rem;
    font-size: 1.1rem;
    font-family: 'Rubik', sans-serif;
    font-weight: 400 !important;
    font-weight: bold;
}

.borderBottom {
    border-bottom: 1px solid;
}

.bgBlackCart {
    background: black;
    color: white;
    padding-top: 0.7rem;
}

.height3 {
    height: 3rem;
}

.btnGray, .btnGray:hover {
    background: #979797;
    color: white;
    border-radius: 0;
}

.btnGrayNew, .btnGrayNew:hover {
    background: #979797;
    color: white;
}

.bgPaleBlueDrpdwn {
    background-color: #9bcddf;
}

.VAlignM {
    vertical-align: middle;
}

.btnGreen, .btnGreen:hover {
    background: #009045;
    color: white;
    border-radius: 0;
}

.w2-5 {
    width: 2.5rem;
}

.w1-15 {
    width: 1.15rem;
}

.bgTransparentInput {
    border: 1px solid #919191;
    border-radius: 0;
    height: 3rem;
}
/*end account css*/

/*start radio show css*/
.scIframe {
    margin: 40px auto 0 auto;
    width: 85%;
    height: 12rem;
}
/*end radio show css*/

/*start blog css*/

.faSize {
    width: 1.6rem !important;
    height: 1.3rem;
}

ul#blogTabs li a {
    background-color: transparent;
}

    /*ul#blogTabs {
    border-bottom: 2px solid !important;
}*/

    ul#blogTabs li a.active, ul#blogTabs li a.active:hover, ul#blogTabs li a:hover {
        color: #fff;
        background-color: #000;
        border: none;
    }

ul#blogTabs, ul#blogTabs li a {
    border: none;
}

    ul#blogTabs li {
        display: inline-block;
        list-style: none;
        border-bottom: 2px solid;
    }

        ul#blogTabs li a {
            font-family: 'Rubik', sans-serif;
            font-weight: 400;
            color: black;
        }

.imgResp {
    height: auto;
    width: auto;
    max-width: 100%;
    max-height: 100%;
    margin: 0 auto;
}

.imgRespCont {
    height: 20rem;
}

.w1-8 {
    width: 1.8rem;
}

.shareIcon {
    width: 1.8rem !important;
    height: 1.2rem;
    margin-left: 0.7rem;
}

.drpDwnMenu {
    margin-left: 1rem !important;
}

.w1-6 {
    width: 1.6rem;
}

.w2-6 {
    width: 2.6rem;
}

.w2-5 {
    width: 2.5rem;
}
/*ul#blogTabs li a:hover {
                font-family: 'Rubik', sans-serif;
                font-weight: 400;
                color: #a8862c;
            }*/
/*end blog css*/
/*start admin css*/

/* start scrollbar css */
.section {
    scrollbar-width: thin; /* "auto" or "thin" */
    scrollbar-color: var(--activecoloradmin) #cfcfcf; /* scroll thumb and track */
}

.section {
    height: auto;
    max-height: 40rem;
    overflow-y: scroll;
}

    .section::-webkit-scrollbar {
        width: 15px; /* width of the entire scrollbar */
    }

    .section::-webkit-scrollbar-track {
        background: #cfcfcf; /* color of the tracking area */
    }

    .section::-webkit-scrollbar-thumb {
        background-color: var(--activecoloradmin); /* color of the scroll thumb */
        border-radius: 20px; /* roundness of the scroll thumb */
        border: 3px solid #cfcfcf; /* creates padding around scroll thumb */
    }

/* end scrollbar css */

/*Start Quill Editor*/
#QuillEditor {
    border: 1px solid var(--activecoloradmin);
    border-top: 0;
    height: 8rem;
}

#QuillToolBar {
    border-top: 1px solid var(--activecoloradmin);
    border-right: 1px solid var(--activecoloradmin);
    border-left: 1px solid var(--activecoloradmin);
}
/*End Quill Editor*/

.btnPaleBlue {
    background-color: #d9d9d9;
}

.btnOutline, .btnOutline:hover {
    background-color: transparent;
    border: 1px solid var(--menucolor);
    color: var(--menucolor);
}

/*.btnOutline:hover {
        background-color: var(--primarycolor);
        border: 1px solid transparent;
        color: var(--whitecolor);
    }*/

.dotText {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


.bgNewGray {
    background: #cbcbcb;
}

.h90, .h95 {
    height: 25rem;
}

.imgAddProd {
    margin-top: 33%;
    margin-bottom: 1rem;
}

.linkWhite {
    color: white !important;
    text-decoration: none !important;
    /*margin: 0 auto;*/
    transition: all 0.4s;
}

    .linkWhite:hover {
        text-decoration: none !important;
    }

.btnEditOrRemove {
    background: black;
    color: white;
    border-radius: 2rem;
    padding: 0.1rem;
    width: 7.3rem;
    /* margin-right: 1rem;*/
}

    .btnEditOrRemove:hover {
        color: var(--activecolor);
    }

.modalHeader {
    background: var(--menucolor);
    color: white;
}

.modal-header .btn-close {
    padding: 0.25em 0.25em !important;
    margin: 0 !important
}

.btn-close:hover {
    opacity: 1 !important;
}

.mt6 {
    margin-top: 6rem;
}

.imgAddRelatedProd {
    margin-top: 0 !important;
    padding-top: 6rem !important;
    margin-bottom: 1rem !important;
}

.categoryDrpDwn {
    border: transparent;
    border-radius: 1rem;
    padding: 0.5rem;
    margin-bottom: 1rem;
}

.txt1-5 {
    font-size: 1.5rem;
}

.txt1-3 {
    font-size: 1.3rem;
}

.txt1-1 {
    font-size: 1.1rem;
}

.brdBlackBalance {
    border: 1px solid black !important;
    width: 50%;
    text-align: center;
    margin: 0 auto;
    height: 2.4rem;
}

input.inputTitle:focus {
    color: var(--activecolor);
}

.imgOverlay {
    position: absolute;
    background: #ffffff9e;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.imgDelete {
    position: absolute;
    top: 1rem;
    width: 1.2rem;
    right: 2rem;
    height: 1.2rem;
}

.imgChange {
    width: 5rem;
    margin-top: 8rem;
}

.imgOverlaySmall {
    position: absolute;
    background: #ffffff9e;
    width: 100%;
    height: 100%;
    top: 0;
}

.imgDeleteSmall {
    position: absolute;
    top: 0.5rem;
    width: 1rem !important;
    right: 0.5rem;
    height: 1rem !important;
}

.imgChangeSmall {
    width: 2.5rem !important;
    margin-top: 2rem !important;
    height: 2rem !important;
}

.txt0-8 {
    font-size: 0.8rem;
}

.txtArea12 {
    resize: none;
    height: 12rem !important;
}

.txtArea9 {
    resize: none;
    height: 9rem !important;
}

.w1 {
    width: 1rem;
}

.borderTransparent {
    border: transparent;
}

.mTR0-5 {
    margin-top: 0.5rem;
    margin-right: 0.5rem;
}

.WH2 {
    width: 2rem;
    height: 2rem;
    border: 1px solid gray;
    border-radius: 50%;
}

.ml0-5 {
    margin-left: 0.5rem;
}

.ml3 {
    margin-left: 3rem;
}

.mt0-3 {
    margin-top: 0.3rem;
}

.mt0-2 {
    margin-top: 0.2rem;
}

.modalDialog {
    max-width: 50%;
}

.modalDialog60 {
    max-width: 60%;
}

.modalDialog40 {
    max-width: 40%;
}

#ModalSubCategories {
    max-width: 70vw;
}

.imgCircle {
    width: 4rem;
    height: 4rem;
}

.w1-2 {
    width: 1.2rem;
    padding: 0.1rem;
    vertical-align: middle;
}

.scroll {
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
}

.brdT {
    border-top: 1px solid var(--menucolor);
}

.w5 {
    width: 5rem;
}

.linkUpdate {
    color: black !important;
    text-decoration: none;
    margin: 0 auto;
    transition: all 0.4s;
}

    .linkUpdate:hover {
        text-decoration: underline;
        transition: all 0.4s;
    }

.bgWhite {
    background-color: white;
}

.bgTablePaleBlue {
    background-color: var(--sidebarmenucolor)
}

.w20P {
    width: 20%;
}

.faGear {
    vertical-align: middle;
    width: 1.6rem !important;
    height: 1.8rem;
}

.faUser {
    vertical-align: middle;
    width: 1.6rem !important;
    height: 1.6rem;
}

.contGear {
    right: 8rem;
    top: 0.7rem;
}

.contUser {
    /*right: 12rem;*/
    right: 11rem;
    top: 0.9rem;
}

.bgWhiteInput {
    background: var(--whitecolor);
    border: 1px solid #919191;
    border-radius: 0;
    height: 3rem;
}

.h2-4 {
    height: 2.4rem;
}

.langSelect {
    /*right: 16rem;*/
    left: 13rem;
    top: 1.3rem;
}

.borderPrimary {
    border: 1px solid #017dc0 !important;
    height: 17rem;
    border-radius: 1rem;
}

img.w4 {
    background: transparent;
    border-radius: 0;
    padding: 1rem;
    height: auto;
    width: auto !important;
    max-height: 100%;
    max-width: 100%;
    margin: 0 auto;
}

.imgH {
    height: 12rem;
}

.btnAddNew {
    padding-bottom: 1rem;
    margin-bottom: 1rem;
}

.numberContent {
    width: 2rem;
    margin-right: 0.5rem;
}

.txtPrimary {
    color: var(--primarycolor);
}

.txtSecondary, .innerTitle, .innerTxt {
    color: var(--secondarycolor) !important;
}

.btnPrimary, .btnPrimary:hover {
    background-color: var(--btncolor);
    color: white;
    font-family: 'Nunito Sans', sans-serif;
}

.btnSecondary, .btnSecondary:hover {
    background-color: var(--secondarycolor);
    color: white;
    font-family: 'Nunito Sans', sans-serif;
}

.txt0-89 {
    font-size: 0.89rem;
}
.txt0-85 {
    font-size: 0.85rem;
}

.colorPrimary {
    border-radius: 50%;
    width: 2rem;
    height: 2rem;
    padding: 5px;
    background: var(--primarycolor);
    border: 2px solid var(--primarycolor);
    color: #fff;
    text-align: center;
    margin-right: 0.5rem;
    font-size: 0.8rem;
}

#formContentDental:hover img {
    content: url(/images/Forms/bgFormDentalHover.svg);
}

#formContentInternalMedicine:hover img {
    content: url(/images/Forms/bgFormInternalMedicineHover.svg);
}

#formContentDiabetes:hover img {
    content: url(/images/Forms/bgFormDiabetesHover.svg);
}

#formContentHeart:hover img {
    content: url(/Images/Forms/bgFormHeartHover.svg);
}

#formContentRespiratory:hover img {
    content: url(/Images/Forms/bgFormRespiratoryHover.svg);
}

#formContentObstetric:hover img {
    content: url(/Images/Forms/bgFormObstetricHover.svg);
}

#formContentGynaecology:hover img {
    content: url(/Images/Forms/bgFormGynaecologyHover.svg);
}
/*custom checkbox*/
/* Hide the browser's default checkbox */
.custom-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkmarkFilter {
    position: absolute;
    top: 0;
    left: 0;
    height: 1.3rem;
    width: 1.3rem;
    background-color: transparent;
    border: 1px solid #002260;
}

/* On mouse-over, add a grey background color */
.custom-checkbox:hover input ~ .checkmarkFilter {
    background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.custom-checkbox input:checked ~ .checkmarkFilter {
    border: 1px solid #9c9da0;
    background-color: transparent;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmarkFilter:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.custom-checkbox input:checked ~ .checkmarkFilter:after {
    display: block;
}

/* Style the checkmark/indicator */
.custom-checkbox {
    padding-left: 2rem;
    color: #000;
}

    .custom-checkbox .checkmarkFilter:after {
        left: 0.4rem;
        top: 0.1rem;
        width: 7px;
        height: 13px;
        border: solid var(--primarycolor);
        border-width: 0 3px 3px 0;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
    }
/*end custom checkbox*/

/*Create custom radio button*/
[type="radio"]:checked,
[type="radio"]:not(:checked) {
    position: absolute;
    left: -9999px;
}

    [type="radio"]:checked + label,
    [type="radio"]:not(:checked) + label {
        position: relative;
        padding-left: 28px;
        cursor: pointer;
        line-height: 20px;
        display: inline-block;
        margin-right: 1rem;
    }

        [type="radio"]:checked + label:before,
        [type="radio"]:not(:checked) + label:before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 20px;
            height: 20px;
            border: 1px solid #7c7c7c;
            border-radius: 100%;
            background: #fff;
        }

        [type="radio"]:checked + label:after,
        [type="radio"]:not(:checked) + label:after {
            content: '';
            width: 12px;
            height: 12px;
            background: var(--primarycolor);
            position: absolute;
            top: 4px;
            left: 4px;
            border-radius: 100%;
            -webkit-transition: all 0.2s ease;
            transition: all 0.2s ease;
        }

        [type="radio"]:not(:checked) + label:after {
            opacity: 0;
            -webkit-transform: scale(0);
            transform: scale(0);
        }

        [type="radio"]:checked + label:after {
            opacity: 1;
            -webkit-transform: scale(1);
            transform: scale(1);
        }
/*end custom radio button*/


.branchDetails {
    display: none;
}

.departmentDetails {
    display: none;
}

.userDetails {
    display: none;
}

.mtN0-25 {
    margin-top: -0.25rem !important;
}

/*create custom input number*/
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}
/*end custom input number*/


.ml1-5 {
    margin-left: 1.5rem !important;
}

.newInputForm {
    width: 20rem;
    margin-left: 1rem;
    margin-right: 1rem;
}

.marginCheck {
    margin-left: 1rem;
    margin-top: 0.5rem;
}

.marginCheck0-5 {
    margin-left: 0.5rem;
    margin-top: 0.5rem;
}

.marginCheck1 {
    margin-left: 1rem;
    margin-top: 0.5rem;
}
/*start input range*/
.gdas-range {
    -webkit-appearance: none;
    width: 100%;
    height: 5px;
    background-image: -webkit-linear-gradient(135deg, #1b8f12, #1b8f12, #847c0d, #f05c0b, #eb0a19) !important; /* For Chrome and Safari */
    background-image: -moz-linear-gradient(135deg, #1b8f12, #1b8f12, #847c0d, #f05c0b, #eb0a19) !important; /* For old Fx (3.6 to 15) */
    background-image: -ms-linear-gradient(135deg, #1b8f12, #1b8f12, #847c0d, #f05c0b, #eb0a19) !important; /* For pre-releases of IE 10*/
    background-image: -o-linear-gradient(135deg, #1b8f12, #1b8f12, #847c0d, #f05c0b, #eb0a19) !important; /* For old Opera (11.1 to 12.0) */
    background-image: linear-gradient(135deg, #1b8f12, #1b8f12, #847c0d, #f05c0b, #eb0a19) !important; /* Standard syntax; must be last */
    outline: none;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

    .gdas-range::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 20px;
        height: 20px;
        background: #01a3db;
        border: 1px solid #01a3db;
        border-radius: 50%;
        cursor: pointer;
    }

    .gdas-range::-moz-range-thumb {
        width: 20px;
        height: 20px;
        background: #01a3db;
        border: 1px solid #01a3db;
        border-radius: 50%;
        cursor: pointer;
    }
/*end input range*/

.btnSaveForm, .btnSaveForm:hover {
    width: auto;
    text-align: center;
    margin: auto;
    background: var(--primarycolor);
    color: white;
}

.inputForm {
    border: 1px solid var(--primarycolor);
    height: 2.7rem;
    border-radius: 0.75rem;
    font-family: "Rubik", sans-serif;
    font-weight: 400 !important;
}

.ml2-5 {
    margin-left: 2.5rem !important;
}

.btnAlert, .btnAlert:hover {
    border: 1px solid #844867;
    color: #844867;
}

.customTxtArea {
    margin-top: 0.5rem;
    margin-bottom: 2rem;
    height: 7rem;
    margin-left: 3rem;
    width: 80%;
    resize: none;
}

.TxtAreaReferral {
    width: 90%;
    margin: 0.5rem auto;
}

.customFormControl {
    margin-left: 2.5rem;
    margin-top: 0.5rem;
    width: 80%;
}

/*end admin css*/
/* slick */
.mainSlider {
    /*background-color: #333;*/
    height: auto;
    width: 95%;
    margin: 0 auto;
}

.slickSlider {
    width: 100%;
    margin: auto;
    background-color: transparent;
    height: auto;
}

.item {
    text-align: center;
    line-height: auto;
    margin: 1rem;
}

    .item img {
        width: 100%;
        margin-right: 0.5rem;
        /*background: black;*/
        padding: 0;
        /*margin-left: 1.2rem;*/
        /*border-radius: 50%;*/
        height: 100%;
        margin: 0 auto;
    }

.customCss {
    width: 100%;
    height: 300px;
    margin-bottom: 2rem;
    padding-top: 0.5rem;
}


.item img.imgSlick {
    background: transparent;
    /*border: 1px solid black;*/
    border-radius: 0;
    padding: 1rem;
    /*height: 11rem;*/
    height: auto;
    width: auto !important;
    max-height: 100%;
    max-width: 100%;
    margin: 0 auto;
}

.brdBlack {
    border: 1px solid black !important;
    height: 11rem;
}

.item img.imgProd {
    background: transparent;
    /*border: 1px solid black;*/
    padding: 0;
    border-radius: 0;
    /*height: 9rem;*/
    height: auto !important;
    width: auto !important;
    max-height: 9rem;
    max-width: 100%;
    margin: 0 auto;
}

.h14 {
    height: 14rem;
}

.mtN1 {
    margin-top: -1rem;
}

.pb10 {
    padding-bottom: 10rem;
}

.mtN13 {
    margin-top: -13rem;
}

.linkStream {
    position: absolute;
    top: 10rem;
    left: 10rem;
    font-size: 1.5rem;
}
/*.slick-prev:before {
    content: url(/images/icons/arrowLeft.svg) !important;
}

.slick-next:before {
    content: url(/images/icons/arrowRight.svg) !important;
}*/
.slick-dots {
    display: block;
}

.slick-prev, .slick-next {
    top: 50% !important;
    width: 17px !important;
    height: 17px !important;
}

.slick-dots li button {
    width: 1rem !important;
    height: 1rem !important;
}

.slick-next {
    right: -1rem !important;
}

.slick-dots li.slick-active button:before {
    background-color: var(--activecolor) !important;
    border: 1px solid var(--activecolor) !important;
    border-radius: 50% !important;
    opacity: 1 !important;
    color: transparent !important;
    width: 1rem !important;
    height: 1rem !important;
}


.slick-dots li button:before {
    background-color: #000 !important;
    border: 1px solid var(--activecolor) !important;
    border-radius: 50% !important;
    opacity: 1 !important;
    color: transparent !important;
    width: 1rem !important;
    height: 1rem !important;
}

.slick-dots li button:hover:before {
    background-color: var(--activecolor) !important;
    border: 1px solid var(--activecolor) !important;
    transition: all 0.4s;
}

/* end slick */

/*start admin-cms css*/
/*start login*/
.bgLogin {
    background-color: #F5F5F5;
    border: 1px solid var(--primarycolor);
    border-radius: 1rem;
}

.selectLang {
    border: 1px solid var(--primarycolor);
    border-radius: 1rem;
    width: 17rem;
}

.selectBorder {
    border: 1px solid var(--primarycolor);
    border-radius: 1rem;
    width: 10rem;
    padding: 0.25rem 0.75rem;
}

.selectBgLang {
    background-repeat: no-repeat;
    background-position: right;
    background-size: 1.3rem;
    padding-left: 0.25rem;
    background-image: url(/Images/Icons/langSelect.svg);
}

.card-content {
    padding-bottom: 3rem;
}

ul.langUl li {
    list-style: none;
    margin-bottom: 0.25rem;
}

ul.langUl {
    position: absolute;
    background-color: white;
    width: 10rem;
    border: 1px solid var(--menucolor);
    padding-left: 1.2rem;
    padding-right: 1rem;
}

.w9 {
    width: 9rem;
}

.Rounded {
    border: 1px solid var(--inputBorder);
    border-radius: 1rem;
}

.btnRed, .btnRed:hover {
    text-align: center;
    margin: auto;
    background: #c91517;
    color: white;
    border-radius: 2rem;
}
/*end login*/

/*start admin login css*/
.M5Auto {
    margin: 5rem auto !important;
}

.w6 {
    width: 6rem;
}

.mlN0-5 {
    margin-left: -0.5rem;
}

.borderBN {
    border-bottom: none;
}

.w35 {
    width: 35%;
}
/*end admin login css*/
/*start navmenu*/
.w10 {
    width: 10rem;
}

.top-row {
    background-color: var(--primarycolor);
    border-bottom: 1px solid var(--primarycolor);
    height: 6rem;
}

.NavMenu nav a.nav-link.active, .ShowMenu nav a.nav-link:hover {
    background-color: var(--activecolor);
    color: white;
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
    border-top-right-radius: 3rem;
    border-bottom-right-radius: 3rem;
}

.NavMenu nav a.nav-link {
    color: var(--whitecolor);
    font-family: 'Rubik',sans-serif;
    font-weight: 400;
    width: 8rem;
    padding: 0.25rem;
    border-bottom: none;
    margin-top: 0.5rem;
    border-top-right-radius: 3rem;
    border-bottom-right-radius: 3rem;
}
/*end navmenu*/

/*start Top bar*/
.bgTopBar {
    background-color: var(--primarycolor);
    color: var(--whitecolor);
    padding: 0;
    margin-bottom: 0;
    /*new style*/
    position: fixed !important;
    width: 92vw;
    margin-bottom: 2rem;
    z-index: 99;
}
/*end Top bar*/

/*start products list*/
.boxDegree {
    margin-right: 1rem;
    width: 8rem;
    padding: 1rem 0.5rem;
    height: 7rem;
}

    .boxDegree:nth-child(odd) {
        background-color: var(--primarycolor);
    }

    .boxDegree:nth-child(even) {
        background-color: var(--secondarycolor);
    }

.customPDrpdwn {
    padding: 0.5rem 0.375rem;
    -webkit-appearance: auto;
    -moz-appearance: auto;
    appearance: auto;
}

.customPDrpdwnWAuto {
    padding: 0.5rem 0.375rem;
    -webkit-appearance: auto;
    -moz-appearance: auto;
    appearance: auto;
}

.btnRadius {
    border-radius: 0 0.25rem 0.25rem 0;
}

.btnGrayAdmin, .btnGrayAdmin:hover {
    background-color: var(--boxdegreeeven);
    color: var(--whitecolor);
    text-align: center;
}

.bgGrayAdmin {
    background-color: var(--boxdegreeeven);
}

.customTable {
    width: 100%;
    display: inline-table;
}

.customTableCustomer {
    width: 100%;
    display: inline-table;
}

.pageContent {
    margin-top: 1rem;
}

.colorEdit, .colorEdit:hover {
    color: var(--editcolor);
}

table tr th:last-child {
    text-align: center;
}

.eyeIcon {
    width: 1.25rem !important;
    margin-top: 0.45rem;
}

.eyeContent {
    border: 1px solid var(--primarycolor);
    border-radius: 0.45rem;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.mb10 {
    margin-bottom: 10rem;
}

.btn-close {
    background: transparent;
}

.bgClosed {
    background-color: #df6667;
}

.bgOpen {
    background-color: #fac678;
}

.bgActive {
    background-color: #a8dfa2;
}

.bgInProgress {
    background-color: #fddfb1;
}

.customBtn {
    padding: 0.5rem;
    height: 2.5rem;
    margin: 1rem;
}

.imgOverlayAdmin {
    position: absolute;
    background: #ffffff9e;
    border: 1px solid var(--activecoloradmin);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.borderActiveAdmin {
    border: 1px solid var(--activecoloradmin);
    width: 75%;
    text-align: center;
    margin: 0 auto;
    margin-top: 3rem;
}

.w1-7 {
    width: 1.7rem;
}

.w15P {
    width: 15%;
}

.w70P {
    width: 70%;
}

.w60P {
    width: 60%;
}

.w85P {
    width: 85%;
}

.inputAdmin {
    border: 1px solid var(--activecoloradmin);
    border-radius: 0;
}

.txt0-9 {
    font-size: 0.9rem;
}

.d-rtl {
    direction: rtl;
}

.w30 {
    width: 30%;
}

.w45 {
    width: 45%;
}

.w60 {
    width: 60%;
}

.w70 {
    width: 70%;
}

.scrollV {
    padding: 4px;
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    white-space: nowrap;
    height: 30rem;
}

.imgScroll {
    width: auto !important;
    height: auto;
    max-height: 100%;
    max-width: 100%;
    margin: 0 auto;
}

.h10 {
    height: 10rem;
    margin: 0 auto;
    text-align: center;
}

.h6 {
    height: 6rem;
    margin: 0 auto;
    text-align: center;
}

.h8 {
    height: 8rem;
    margin: 0 auto;
    text-align: center;
}

div#ProdList {
    margin: 0 auto;
    text-align: center;
    justify-content: space-around;
    width: 100%;
}

    div#ProdList a, div#ProdList a:hover {
        color: white !important;
        text-decoration: none !important;
    }

.navtabsBg {
    background-color: var(--menucolor);
}

.nav-tabs .nav-link.navLink.active, .nav-tabs .nav-link.navLink:hover {
    background-color: var(--primarycolor);
    border-radius: 0;
    border-color: transparent;
    color: var(--sidebarmenucolor);
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
}

    .nav-tabs .nav-link.navLink.active img.medical-history-img, .nav-tabs .nav-link.navLink:hover img.medical-history-img {
        content: url("/Images/Icons/medical-history-white.svg");
    }

    .nav-tabs .nav-link.navLink.active img.visit-history-img, .nav-tabs .nav-link:hover img.visit-history-img {
        content: url("/Images/Icons/visit-history-white.svg");
    }

    .nav-tabs .nav-link.navLink.active img.investigations-img, .nav-tabs .nav-link:hover img.investigations-img {
        content: url("/Images/Icons/investigations-white.svg");
    }

.nav-tabs .nav-link.navLink {
    background-color: var(--sidebarmenucolor);
    border-radius: 0;
    border-color: transparent;
    color: var(--primarycolor);
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
}

.tabContent {
    border: 1px solid var(--menucolor);
    border-radius: 0.75rem;
    padding: 0 0.45rem;
    height: 31rem;
}

.p75 {
    padding: 0.75rem;
}

.nav-tabs {
    border-bottom: 0;
}

/*end products list*/

.dropdownToggle {
    height: auto;
    background: white;
    border: 1px solid #ced4da;
    text-align: left;
}

.arrowPeriod::after {
    float: right;
    margin-top: 0.75rem;
}

.arrowRows::after {
    float: right;
    margin: 0;
    margin-top: 0.75rem;
}

table#BalanceSheetTable tr td {
    padding: 0;
    border-bottom: 0;
}

    table#BalanceSheetTable tr td:last-child {
        padding-right: 0.7rem;
    }

table#BalanceSheetTable tr {
    border-bottom: 0;
}

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

.borderTop {
    border-top: 1px solid #767676 !important;
}

.borderTopBottom {
    border-top: 1px solid #767676 !important;
    border-bottom: 1px solid #767676 !important;
}

.ScrollableDiv {
    overflow-x: scroll;
    width: 93%;
}

.w10table {
    /*width: 10rem;*/
}

table#BalanceSheetTable {
    table-layout: fixed;
}

.FA {
    width: 2rem !important;
    font-size: 1.1rem;
    vertical-align: text-top;
    top: 3px;
    margin-left: -0.5rem !important;
    margin-right: 0.5rem !important;
}

.h2-7 {
    height: 2.7rem;
}

.mt1-25 {
    margin-top: 1.25rem;
}

.h1-3 {
    height: 1.3rem;
}

.drpDwn {
    height: 2.5rem;
    padding: 0 0.5rem;
}

.mlForms {
    margin-left: 1rem;
}

.chatLeftSide {
    background-color: #def5fd;
    height: 100vh;
}

.chatRightSide {
    background-color: #e8e8e8;
    height: 100vh;
}

.ChatIcon {
    display: none;
}

#messages {
    scroll-behavior: smooth;
}

.scrollBtm {
    position: absolute;
    bottom: 6rem;
    left: 1rem;
    cursor: pointer;
    width: 1.6rem;
    height: 2rem;
    background: #2d91cf;
    border-radius: 0.55rem;
    padding: 0.4rem 0.5rem;
    color: white;
}

.reservedIcon {
    width: 1rem !important;
    margin-left: 0.25rem !important;
}

.serviceSubMenu {
    background-color: #d3d3d3;
    z-index: 999;
    margin-right: 0;
    margin-top: 0.5rem !important;
    cursor: default;
    right: 0 !important;
}

    .serviceSubMenu:before {
        content: '';
        width: 0;
        height: 0;
        background: transparent;
        border: 10px solid !important;
        border-top-color: transparent !important;
        border-left-color: transparent !important;
        border-right-color: transparent !important;
        border-bottom-color: #d3d3d3 !important;
        top: -1.25rem;
        position: absolute;
        left: 4.5rem;
    }

.serviceSubMenu li {
    /* border-bottom: 1px solid white; */
    margin-left: 0.75rem;
    margin-right: 0.75rem;
    text-align:center;
}

.serviceSubMenu li a {
    color: var(--activecolor) !important;
    text-decoration: none !important;
}
.serviceSubMenu li a:hover {
    color: var(--activecolor) !important;
    text-decoration: underline !important;
}
.nameLbl {
    border: 1px solid var(--activecolor);
    height: 2.7rem;
    border-radius: 0.75rem;
    padding-right: 1.7rem !important;
    padding: 0.5rem;
}
.ml1-5mt0-5 {
    margin-left: 1.5rem;
    margin-top: 0.5rem;
}
/*#Calendar {
    display: block;
}*/
/*start style new menu*/
.NavMenu nav a.nav-link.active, .ShowMenu nav a.nav-link:hover, .NavMenu nav a.nav-link:hover {
    border-top-right-radius: 3rem;
    border-bottom-right-radius: 3rem;
    width: 8rem;
    padding: 0.25rem;
    border-bottom: none;
    box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.2);
    border-top-right-radius: 3rem;
    border-bottom-right-radius: 3rem;
    background-color: var(--activecolor);
    color: white;
}

.imgIconMenu {
    width: 2rem;
    margin-bottom: 0.35rem;
}

.mlN2-5 {
    margin-left: -2.5rem;
}

.bgTopCorner {
    background-color: white;
    padding: 1rem 1.5rem;
    border-top-left-radius: 4rem;
}

.main {
    margin-left: 7rem !important;
    width: 92vw;
}

.content {
    padding-left: 3rem !important;
    /*new style*/
    width: 90vw;
    margin-top: 6rem;
}

.btnAddBg {
    border-radius: 1rem;
    padding: 0.5rem 0.75rem;
}

.btnRadP, btnRadP:hover {
    border-radius: 1rem !important;
    padding: 0.5rem 0.75rem;
}

.btnRadClose, .btnRadClose:hover {
    border-radius: 1rem;
    padding: 0.5rem 0.75rem;
}

.icon {
    width: 2rem;
}

.round2 {
    border-radius: 2rem;
}

.paleBlueBorder {
    border: 1px solid var(--primarycolor);
}
.borderColor {
    border: 1px solid var(--btncolor);
}

.table thead tr th {
    vertical-align: middle;
    color: var(--primarycolor);
    text-align: center;
}

.table tbody tr td {
    vertical-align: middle;
    text-align: center;
}

.table tbody tr {
    height: 3.5rem;
}

.doneColor {
    color: #08B724;
}

.doneBg {
    background-color: #08B724;
}

.spanVisit {
    padding: 0.5rem 0.75rem;
    border-radius: 1rem;
    color: white;
    width: 4.5rem;
}

    .spanVisit img {
        margin-top: -0.25rem;
    }

.done {
    background: #08B724;
}

.cancelColor {
    color: #EB001B;
}

.cancelBg {
    background-color: #EB001B;
}

.cancel {
    background: #EB001B;
}

.iconUser {
    width: 3rem;
    margin-right: 1rem;
}

.iconContact {
    width: 2.5rem;
    margin-right: 1rem;
}

.iconalert {
    width: 2rem;
    margin-right: 1rem;
}

.bgNeed {
    background-color: #F9A041;
    border-radius: 3rem;
    padding: 0.2rem 1rem;
    height: 2rem;
    text-align: center;
    margin-top: -0.35rem;
}

.insuranceSpan {
    border: 1px solid var(--primarycolor);
    padding: 0.5rem;
    border-radius: 0.75rem;
}

.contactSpan {
    display: inline-block;
    width: 100%;
    border: 1px solid var(--primarycolor);
    padding: 0.5rem;
    border-radius: 0.75rem;
}

.alertSpan {
    display: inline-block;
    width: 100%;
    border: 1px solid #FB021E;
    padding: 0.5rem;
    border-radius: 0.75rem;
}

.alertBg {
    background-color: #00B5E8;
    padding: 0.35rem 0.5rem;
    border-radius: 1rem;
    color: white;
    margin-right: 0.5rem;
}
.alertLow {
    background-color: #76a137 !important;
}
.alertMedium {
    background-color: #ffb51c !important;
}
.alertHigh {
    background-color: #ff6767 !important;
}

.txtBlue1 {
    color: #017DC0;
}

.txtBlue2 {
    color: #01507A;
}

.details {
    padding-left: 4rem;
    margin-top: -0.25rem;
}

.headerAcc {
    justify-self: end;
}

.accordion-button:not(.collapsed), .accordion-item:last-of-type .accordion-button.collapsed {
    background-color: transparent;
    border: none;
    padding: .5rem;
}

.accordion-button span {
    padding-right: 1rem;
    padding-top: 0.5rem 8px;
}

.medical-history-img {
    content: url("/Images/Icons/medical-history-blue.svg");
    width: 1.5rem;
    height: 1.5rem;
}

.visit-history-img {
    content: url("/Images/Icons/visit-history-blue.svg");
    width: 1.5rem;
    height: 1.5rem;
}

.investigations-img {
    content: url("/Images/Icons/investigations-blue.svg");
    width: 1.5rem;
    height: 1.5rem;
}

.txtAllergy {
    width: 7rem !important;
    margin: 0 auto;
    border-radius: 1rem;
}

.InvestigationType {
    color: var(--menucolor);
    border: 1px solid var(--menucolor);
}

.severe {
    color: #EB001B;
    border: 1px solid #EB001B;
}

.highProp {
    color: #EB001B;
    border: 1px solid #EB001B;
    width: auto !important;
    padding: 0 1rem;
    margin-right: 1rem;
}

.MedProp {
    color: #FFC107;
    border: 1px solid #FFC107;
    background-color: #ffefc1;
    width: auto !important;
    padding: 0 1rem;
    margin-right: 1rem;
}

.LowProp {
    color: #08B724;
    border: 1px solid #08B724;
    background-color: #daf4de;
    width: auto !important;
    padding: 0 1rem;
    margin-right: 1rem;
}

.moderate {
    color: #FF6F07;
    border: 1px solid #FF6F07;
    background-color: #F8E7D5;
}

.mild {
    color: #08B724;
    border: 1px solid #08B724;
    background-color: #D3FAD9;
}

.frameVitalSigns {
    border-radius: 0.5rem;
    width: 95%;
    height: 7rem;
    border: 1px solid #97AEC2;
    background-color: #e8ebed;
}

.txtHigh {
    color: #EB001B;
}

.txtNormal {
    color: #08B724;
}

.txtElevated {
    color: #cfca00;
}

.txtStageOne {
    color: #d79d00;
}
.txtStageTwo {
    color: #B94723;
}

.txtLow {
    color: #F1B600;
}
.txtHighTemp {
    color: #EE8A00;
}
.txtFever {
    color: #970A2C;
}
.txtLowO {
    color: #970A2C;
}
.txtConcerning {
    color: #F1B600;
}
.borderLowO {
    border: 1px solid #970A2C;
    background-color: #ffc0c0;
}
.borderConcerning {
    border: 1px solid #F1B600;
    background-color: #fff3cf;
}
.borderLow {
    border: 1px solid #F1B600;
    background-color: #fff3cf;
}
.borderHighTemp {
    border: 1px solid #EE8A00;
    background-color: #ffdecc;
}
.borderFever {
    border: 1px solid #970A2C;
    background-color: #ffc0c0;
}
.borderHigh {
    border: 1px solid #EB001B;
    background-color: #FDECEC;
}

.borderNormal {
    border: 1px solid #08B724;
    background-color: #e6f8e9;
}

.borderElevated {
    border: 1px solid #cfca00;
    background-color: #fffece;
}
.borderStageOne {
    border: 1px solid #d79d00;
    background-color: #f5e0a7;
}
.borderStageTwo {
    border: 1px solid #B94723;
    background-color: #ffd0c1;
}

.fs1-2 {
    font-size: 1.2rem;
}

.trends {
    background-color: var(--primarycolor);
    border-radius: 1rem;
    padding: 0.25rem 0.3rem;
    color: white;
    height: 2rem;
    text-align: center;
}

.wImgAdd {
    width: 1.25rem;
    margin-left: 0.25rem;
}

.nav-tabs .nav-link.active[b-hevg38ubtq], .nav-tabs .nav-link:hover[b-hevg38ubtq] {
    color: var(--primarycolor);
}

.nav-tabs .nav-link.active[b-s1y18jfdel], .nav-tabs .nav-link:hover[b-s1y18jfdel] {
    color: var(--primarycolor);
}

.borderBtn {
    border: 2px solid var(--primarycolor);
    border-radius: 1rem;
    padding: 0 0.5rem;
}

    .borderBtn p {
        margin-top: 0.5rem;
        margin-left: 0.25rem;
    }

.borderBtnBg {
    background-color: #d2efff;
}

    .borderBtnBg p {
        margin-top: 0.65rem;
        margin-left: 0.25rem;
    }

.borderBlue {
    border: 1px solid var(--menucolor);
    border-radius: 0.75rem;
    padding: 0.75rem;
    margin-top: 1rem;
}

.borderBlueScroll {
    height: 45rem;
    overflow: hidden;
}

.accButton2 {
    /*background-color: var(--menucolor) !important;*/
    border-radius: 0.5rem !important;
    padding: 0 0.25rem !important;
    height: 2rem;
}

    .accButton2:not(.collapsed)::after {
        background-image: url(/Images/Icons/drpDwn.svg);
        transform: rotate(-180deg);
    }

    .accButton2::after {
        background-image: url(/Images/Icons/drpDwn.svg);
    }

.accordion-button.accButton2::after {
    width: 2rem;
    height: 2rem;
    background-size: 2rem;
}

.accBtnDrug {
    border-radius: 0.5rem !important;
    padding: 0 0.25rem !important;
    height: 2rem;
}

    .accBtnDrug:not(.collapsed)::after {
        background-image: url(/Images/Icons/drpDwn.svg);
    }

    .accBtnDrug::after {
        background-image: url(/Images/Icons/drpDwn.svg);
    }

.accordion-button.accBtnDrug::after {
    width: 1.5rem;
    height: 1.5rem;
    background-size: 1.5rem;
}

@-moz-document url-prefix() {
    .headerAcc2 {
        display: flex;
        flex-direction: row;
        text-align: right;
        float: right;
    }

    .accordion-collapse2 {
        clear: both;
    }

    .clearBoth {
        clear: both;
        padding-top: 0.5rem;
    }
}


.formHeight {
    height: 40rem;
    overflow: hidden;
    overflow-y: scroll;
}

.borderBtnHeight {
    height: 2.7rem;
    margin-right: 1rem;
}

    .borderBtnHeight p {
        margin-top: 0.5rem;
        margin-left: 0.25rem;
    }

.imgEditForm {
    margin-top: -0.75rem;
    margin-right: 0.5rem;
    width: 1.7rem;
}

.AccordionScroll {
    height: 29rem;
    overflow: hidden;
    overflow-y: scroll;
}

.pt45 {
    padding-top: 0.45rem;
}

.accBtnVisit {
    border-bottom: 1px solid var(--menucolor) !important;
}

    .accBtnVisit::after {
        background-image: url(/Images/Icons/download.svg);
        transform: rotate(0deg);
    }

    .accBtnVisit:not(.collapsed)::after {
        background-image: url(/Images/Icons/download.svg);
    }

.txtBlueAccTitle {
    color: #017DC0;
}

.accBody {
    padding: 0.2rem 1.25rem;
}

.tabInvestigations {
    height: 27rem;
    overflow: hidden;
    overflow-y: scroll;
}

.tabMedicalHistory {
    height: 27rem;
    overflow: hidden;
    overflow-y: scroll;
}

.btnCloseModal {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 999;
}

.brdR2 {
    border-radius: 2rem;
}

.brdR0-75 {
        border-radius: 0.75rem;
}

.brdBlue {
    border: 1px solid var(--menucolor);
}

.inputBorder {
    border: 1px solid var(--menucolor);
    border-radius: 0.8rem;
    padding: 0.5rem;
}

.modalPadding {
    padding: 0.5rem 1rem 16px;
}

.modal-backdrop {
    background-color: var(--menucolor);
}

.col6Vital {
    width: 56%;
}

.btnModal, .btnModal:hover {
    border-radius: 1rem;
    width: 12rem;
    padding: 0.5rem 1rem;
    /*width: 17rem;
    padding: 0.8rem 2rem;*/
}

.btnBack {
    display: none;
    background-color: transparent;
    border: 1px solid var(--menucolor);
    border-radius: 1rem;
    margin-right: 1rem;
    color: var(--menucolor);
}

    .btnBack:hover {
        background-color: transparent;
        border: 1px solid var(--menucolor);
        border-radius: 1rem;
        margin-right: 1rem;
        color: var(--menucolor);
    }

.w2 {
    width: 2rem;
}

.NotificationIcon {
    width: 2rem;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}

.selectBg {
    background-repeat: no-repeat;
    background-position: right;
    background-size: 1.7rem;
    padding-left: 0.25rem;
}

/*input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}*/

.selectdropdown {
    background-image: url(/Images/Icons/dropdown.svg);
}

.selectcalendar {
    background-image: url(/Images/Icons/calendarPicker.svg);
}

.selectDrug {
    background-image: url(/Images/Icons/drpDwn.svg);
}

.appearanceNone {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.txtSecondaryInput {
    color: var(--menucolor) !important;
}

.inputW4 {
    width: 4rem;
}

.bgHabit, .bgDrugs, .bgThrombosis, .bgAllergies, .bgSurgicalOperations, .bgSmokingHistory, .bgAlcoholUse, .bgCaffeineIntake, .bgRecreationalDrugUse, .bgMenstrualUse, .bgPregnancyHistory, .bgContraceptiveUse {
    background-color: var(--bgopacity);
    padding: 1rem 1.5rem;
    border-radius: .7rem;
    margin-right: 1.5rem;
    color: var(--menucolor);
    cursor: pointer;
}

.bgYesOrNoActive {
    background-color: var(--menucolor);
    color: white;
}

    .bgYesOrNoActive#yesHabit img {
        content: url('/Images/Icons/yes-selected.svg');
    }

    .bgYesOrNoActive#noHabit img {
        content: url('/Images/Icons/no-selected.svg');
    }

    .bgYesOrNoActive#yesDrugs img {
        content: url('/Images/Icons/yes-selected.svg');
    }

    .bgYesOrNoActive#noDrugs img {
        content: url('/Images/Icons/no-selected.svg');
    }

    .bgYesOrNoActive#yesThrombosis img {
        content: url('/Images/Icons/yes-selected.svg');
    }

    .bgYesOrNoActive#noThrombosis img {
        content: url('/Images/Icons/no-selected.svg');
    }

    .bgYesOrNoActive#yesAllergies img {
        content: url('/Images/Icons/yes-selected.svg');
    }

    .bgYesOrNoActive#noAllergies img {
        content: url('/Images/Icons/no-selected.svg');
    }

    .bgYesOrNoActive#yesSurgicalOperations img {
        content: url('/Images/Icons/yes-selected.svg');
    }

    .bgYesOrNoActive#noSurgicalOperations img {
        content: url('/Images/Icons/no-selected.svg');
    }

    .bgYesOrNoActive#yesSmokingHistory img {
        content: url('/Images/Icons/yes-selected.svg');
    }

    .bgYesOrNoActive#noSmokingHistory img {
        content: url('/Images/Icons/no-selected.svg');
    }

    .bgYesOrNoActive#yesAlcoholUse img {
        content: url('/Images/Icons/yes-selected.svg');
    }

    .bgYesOrNoActive#noAlcoholUse img {
        content: url('/Images/Icons/no-selected.svg');
    }

    .bgYesOrNoActive#yesCaffeineIntake img {
        content: url('/Images/Icons/yes-selected.svg');
    }

    .bgYesOrNoActive#noCaffeineIntake img {
        content: url('/Images/Icons/no-selected.svg');
    }

    .bgYesOrNoActive#yesRecreationalDrugUse img {
        content: url('/Images/Icons/yes-selected.svg');
    }

    .bgYesOrNoActive#noRecreationalDrugUse img {
        content: url('/Images/Icons/no-selected.svg');
    }

    .bgYesOrNoActive#yesMenstrualUse img {
        content: url('/Images/Icons/yes-selected.svg');
    }

    .bgYesOrNoActive#noMenstrualUse img {
        content: url('/Images/Icons/no-selected.svg');
    }

    .bgYesOrNoActive#yesPregnancyHistory img {
        content: url('/Images/Icons/yes-selected.svg');
    }

    .bgYesOrNoActive#noPregnancyHistory img {
        content: url('/Images/Icons/no-selected.svg');
    }

    .bgYesOrNoActive#yesContraceptiveUse img {
        content: url('/Images/Icons/yes-selected.svg');
    }

    .bgYesOrNoActive#noContraceptiveUse img {
        content: url('/Images/Icons/no-selected.svg');
    }

[type="radio"]:checked + label.behaviourLbl:before,
[type="radio"]:not(:checked) + label.behaviourLbl:before {
    left: 38%;
    top: -2rem;
    width: 28px;
    height: 28px;
}

[type="radio"]:checked + label.behaviourLbl:after,
[type="radio"]:not(:checked) + label.behaviourLbl:after {
    left: 43%;
    top: -1.75rem;
    width: 20px;
    height: 20px;
}

[type="radio"]:checked + label.behaviourLbl.lbl1:after,
[type="radio"]:not(:checked) + label.behaviourLbl.lbl1:after {
    left: 45%;
}

[type="radio"]:checked + label.behaviourLbl.lbl3:after,
[type="radio"]:not(:checked) + label.behaviourLbl.lbl3:after {
    left: 46%;
}

[type="radio"]:checked + label.behaviourLbl, [type="radio"]:not(:checked) + label.behaviourLbl {
    padding-left: 1rem;
}

.mlN2 {
    margin-left: -2rem;
}

.mt3 {
    margin-top: 3rem;
}

.w12 {
    width: 12rem;
}

.btnSaveProfile {
    padding: 0.5rem 4rem;
    margin-top: 3rem;
}

.ml2-5 {
    margin-left: 2.5rem;
}

.pl0-75 {
    padding-left: 0.75rem;
}

.bgDisease {
    background-color: var(--bgopacity);
    padding: 0.25rem;
    border-radius: .7rem;
    margin-right: 0.5rem;
    color: var(--menucolor);
    cursor: pointer;
}

.customInput {
    opacity: 1 !important;
    width: 10rem !important;
    height: 2.5rem !important;
}

.bgItemActive {
    background-color: var(--menucolor);
    color: var(--whitecolor);
}

.imgDisease {
    width: 2.5rem;
    height: 3rem;
}

.selectedBg {
    background-color: var(--secondarycolor);
    width: 23.3333%;
    border-radius: 0.7rem;
    color: white;
    text-align: center;
    padding: 0.25rem;
    margin-right: 0.5rem;
}

.lh1-2 {
    line-height: 1.2rem;
}

.w7 {
    width: 7rem;
}

.scrollDiv {
    overflow: hidden;
    overflow-x: scroll;
}

.bgAddItem {
    background-color: var(--menucolor);
    padding: 0 0.5rem;
    border-radius: .7rem;
    margin-right: 1rem;
    color: var(--whitecolor);
}

.w17 {
    width: 17rem;
}

.pl4 {
    padding-left: 4rem;
}

.ptb1lr2 {
    padding: 1rem 2rem;
}

.addInputImg {
    width: 3rem;
    margin-left: -3rem;
    margin-top: 1.5rem;
}

.imgAbs {
    position: absolute;
    top: -0.5rem;
    right: -0.5rem;
}

.mt3-5 {
    margin-top: 3.5rem;
}

.lineGray {
    border-left: 1px solid #7B8D9E;
    padding-left: 2rem;
    height: 9rem;
}

.hrL {
    background-color: #7B8D9E;
    height: 1px;
    margin-top: 3rem;
    margin-bottom: 2rem;
}

.btnAddProfile {
    border-radius: 1rem;
    padding: 0.5rem 1rem;
}

.h3-5 {
    height: 3.5rem;
}

.mlr0-25 {
    margin-right: 0.25rem;
    margin-left: 0.25rem;
}

.ps2 {
    padding-left: 2rem;
}

.headerAccDrug {
    justify-self: normal;
}

.brdR1 {
    border-radius: 1rem;
}

.modalBg {
    background-color: #cfe8fd;
}

.w95 {
    width: 95%;
}

.txtArea14 {
    resize: none;
    height: 14rem !important;
}

.txtArea7 {
    resize: none;
    height: 7rem !important;
}

.ptb0-5lr3 {
    padding: 0.5rem 3rem;
}

.diseaseList {
    position: absolute;
    top: 2.8rem;
    left: 0;
    width: 100%;
    background-color: #cffbff;
    padding: 1rem;
}

ul.selectedDiseaseList li {
    list-style: none;
    border-bottom: 1px solid var(--menucolor);
    padding-top: 0.5rem;
}

    ul.selectedDiseaseList li:last-child {
        border-bottom: none;
    }

.w96 {
    width: 96%;
}

.borderBtnH {
    height: 3rem;
    margin-left: 1rem;
}

.fs1-1 {
    font-size: 1.1rem;
}

.inputBorderBtm {
    border: none;
    border-bottom: 1px solid;
    border-radius: 0;
}

.inputSmall {
    width: 20rem !important;
    flex: 0 1 auto !important;
}

.btnSaveReferral, .btnSaveReferral:hover {
    background-color: var(--menucolor);
    color: white;
    font-family: 'Nunito Sans', sans-serif;
    border-radius: 1rem;
    padding: 0.5rem 3rem;
}

.btnTransparent, .btnTransparent:hover {
    background-color: transparent;
    color: var(--menucolor);
    font-family: 'Nunito Sans', sans-serif;
    border-radius: 1rem;
    padding: 0.5rem 1rem;
}

.btnModalSmPd, .btnModalSmPd:hover {
    padding: 0.5rem 2rem;
}

.btnAttach {
    height: 2.3rem;
    margin-right: 1rem;
    width: 10rem;
}

.ms1-75 {
    margin-left: 1.75rem !important;
}

.mtb1-5 {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

.inputTxtCheckbox {
    opacity: 1 !important;
    margin-left: 4rem;
    width: 20rem !important;
    height: 2rem !important;
    margin-top: -0.75rem;
}

.mtb0-5 {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.mb0-5 {
    margin-bottom: 0.5rem;
}

.mb1-5 {
    margin-bottom: 1.5rem;
}

.mb3 {
    margin-bottom: 3rem;
}

.mb1-7 {
    margin-bottom: 1.7rem;
}

.txtArea4 {
    resize: none;
    height: 4rem !important;
}

.mt1b0-5 {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

.statusActive {
    color: #08B724;
    border: 1px solid #08B724;
    background-color: #D3FAD9;
}

.txtStatus {
    width: 7rem !important;
    margin: 0 2rem;
    border-radius: 1rem;
}

.borderTopStatus {
    border-top: 1px solid black;
    padding-top: 1rem;
    padding-left: 1rem;
}

.complainUl {
    padding-left: 0.5rem;
}

    .complainUl li {
        list-style: none;
    }

.txtSuspended {
    width: 9rem !important;
    margin: 0 2rem;
    border-radius: 1rem;
}

.statusSuspended {
    color: #EB001B;
    border: 1px solid #EB001B;
}

.suspendedColor {
    color: #7B8D9E;
}

.btnRequest {
    text-decoration: none;
    color: #7B8D9E;
}

    .btnRequest:hover {
        text-decoration: underline;
        color: #7B8D9E;
    }

ul.currentMed {
    margin-top: 2rem;
}

    ul.currentMed li {
        list-style: none;
        padding-bottom: 1rem;
        border-bottom: 1px solid;
        margin-bottom: 1rem;
    }

        ul.currentMed li:last-child {
            border-bottom: none;
        }

.m0auto {
    margin: 0 auto;
}

.btnLoginP {
    padding: 0.5rem 5rem;
}

.brdN {
    border: none;
}

.AIChatIcon {
    position: fixed;
    right: 1rem;
    bottom: 2rem;
    z-index: 99;
    cursor: pointer;
}

.NiceGuideLinesIcon {
    position: fixed;
    right: 0.5rem;
    bottom: 20%;
    z-index: 99;
    width: 6.5rem;
    cursor: pointer;
}

.txtNewsNormal {
    color: #939393;
}
.txtNewsLow {
    color: #08B724;
}
.txtNewsHigh {
    color: #e68a6c;
}
.txtNewsCritical {
    color: #eb001b;
}
.txtLowRisk {
    color: #08B724;
}
.txtLowMediumRisk {
    color: #f2bd7e;
}
.txtMediumRisk {
    color: #e68a6c;
}
.txtHighRisk {
    color: #eb001b;
}

.ChatAI {
    right: 7rem;
    bottom: -1rem;
    z-index: 99;
    position: fixed;
    height: 40rem;
}

.ChatPatient {
    right: 1.4rem;
    bottom: -4rem;
    z-index: 99;
    position: fixed;
    height: 40rem;
}

.btnInlineBlock {
    display: inline-block !important;
}

.ChatAIContent {
    border: 1px solid var(--primarycolor);
    border-radius: 1rem;
    width: 27rem;
    background-color: #d9f2f4;
}

.NICEContent {
    border: 1px solid var(--primarycolor);
    border-radius: 1rem;
    width: 37rem;
    background-color: #d9f2f4;
}

.overflowXH {
    overflow-x: hidden;
}

.scrollChatAi {
    overflow-y: scroll;
    height: 24rem;
}

.closeChatImg {
    position: absolute;
    top: -0.7rem;
    right: -0.7rem;
}

.pTLR {
    padding: 1rem 1rem 0 1rem;
}

ul.AIChatUl li {
    list-style: none;
    border-bottom: 1px solid #D9D9D9;
    padding-bottom: 0.75rem;
}

ul.AIChatUl {
    padding-left: 1rem;
}

ul.PChatUl li {
    list-style: none;
}

ul.PChatUl {
    padding-left: 1rem;
}

.PatientChatTemplate {
    width: 80%;
    background-color: #d5dadb;
    padding: 1rem;
    border-radius: 1rem;
    margin-top: 0.5rem;
}

.DoctorChatTemplate {
    width: 80%;
    background-color: #a1c2c7;
    padding: 1rem;
    margin-top: 0.5rem;
    border-radius: 1rem;
    margin-left: 4.5rem;
}

.pl1 {
    padding-left: 1rem;
}

.pt0-5 {
    padding-top: 0.5rem;
}

.sendDiv {
    padding: 1rem;
    padding-top: 0;
}

.sendDiv img {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}

.overflowH {
    overflow: hidden;
}
.scrollAlert {
    overflow-x: scroll;
    white-space: nowrap;
}
/*start arrow box*/
.hideDiv {
    display: none;
}

.arrow_box {
    background: #ffffff;
    border: 1px solid #719ECE; /*set border colour here*/
    border-radius: 3px;
    -webkit-filter: drop-shadow(0 1px 10px rgba(113, 158, 206, 0.8)); /*set shadow colour  and size here*/
    -moz-box-shadow: 0 1px 10px rgba(113, 158, 206, 0.8);
    filter: drop-shadow(0 1px 10px rgba(113, 158, 206, 0.8));
    position: absolute;
    height: 4rem;
    width: 15rem;
    left: -3rem;
    top: 4rem;
    border-radius: 1.5rem;
    z-index: 99;
}

    .arrow_box:after,
    .arrow_box:before {
        bottom: 100%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
    }

    .arrow_box:after {
        border-color: rgba(255, 255, 255, 0);
        border-bottom-color: #ffffff;
        border-width: 19px;
        left: 50%;
        margin-left: -19px;
    }

    .arrow_box:before {
        border-color: rgba(113, 158, 206, 0);
        border-bottom-color: #719ECE;
        border-width: 20px;
        left: 50%;
        margin-left: -20px;
    }
/*end arrow box*/


/*end style new menu*/
/*end admin-cms css*/
/*media queries*/
@media (max-width:2040px) {
    .pic4 {
        background: rgb(229, 229, 229);
        clip-path: polygon(14% 0px, 100% 0px, 83% 100%, 0px 100%);
        height: 20rem;
        width: 36.4rem;
        margin-top: 2rem;
        margin-left: -9.5rem;
    }
}

@media (max-width: 2000px) {
    .pic1 {
        width: 28.7rem;
        height: 24rem;
    }

    .pic2, .pic3 {
        width: 35.7rem;
        height: 24rem;
        margin-left: -5.5rem;
    }

    .h3Add {
        padding-bottom: 12rem;
    }

    .scrollChat {
        height: 72.7vh;
    }

    .chatLeftSide {
        height: 89vh;
    }

    .chatRightSide {
        height: 89vh;
    }

    #bgChat {
        margin-top: 2rem !important;
    }
}

@media (max-width:1800px) {
    .scrollChat {
        height: 73vh;
    }

    .pic4 {
        width: 30.4rem;
        margin-top: 2rem;
        margin-left: -7.5rem;
    }

    .pBio {
        margin-left: -3rem;
    }

    .pic3 {
        margin-left: 0.5rem;
    }

    .pic2 {
        margin-left: -2.5rem;
    }

    .imgTxtSecond {
        margin-left: -1rem;
    }

    .imgTxtThird {
        margin-left: 2rem;
    }

    .h3Add {
        padding-bottom: 9.5rem;
    }
}

@media (max-width:1600px) {
    .scrollChat {
        height: 53.5vh;
    }

    .chatRightSide, .chatLeftSide {
        height: 77vh;
    }

    .scrollChatLeft {
        height: 67vh;
    }

    .pic1 {
        width: 23.7rem;
        height: 19rem;
    }

    .pic3 {
        width: 28.7rem;
        height: 19rem;
        margin-left: -5rem;
    }

    .pic2 {
        width: 28.7rem;
        height: 19rem;
        margin-left: -4.5rem;
    }

    .pic4 {
        height: 17rem;
        width: 31.4rem;
        margin-top: 1rem;
        margin-left: -7.5rem;
    }

    .pBio {
        position: absolute;
        margin-top: -15rem;
        width: 23rem;
        margin-left: -2rem;
    }

    .imgTxtFirst {
        margin-left: 1.5rem;
    }

    .imgTxtSecond {
        margin-left: -2rem;
    }

    .imgTxtThird {
        margin-left: -2rem;
    }
}

@media (max-width: 1500px) {
    .pic2 {
        margin-left: -3.5rem;
    }

    .pic3 {
        margin-left: -3rem;
    }

    .pic4 {
        margin-left: -9.5rem;
    }

    .pBio {
        margin-left: -4rem;
    }
}

@media (max-width:1450px) {
    .col8-1450 {
        flex: 0 0 auto;
        width: 100%;
    }
    .col4-1450 {
        flex: 0 0 auto;
        width: 100%;
        margin-bottom: 1.5rem;
        text-align: left !important;
    }
    .insuranceSpan {
        margin-left: 4rem;
    }
}

@media (max-width:1420px) {
    .flexCol1420 {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

        .flexCol1420 img {
            margin-bottom: 0.25rem;
        }
}

@media (max-width:1400px) {
    .tabMedicalHistory {
        height: 11rem;
    }
    .lineGray {
        padding-left: 1rem;
    }

    .pic2 {
        margin-left: -2rem;
    }

    .pic3 {
        margin-left: 0;
    }

    .pic4 {
        margin-top: 1rem;
        margin-left: -8rem;
        width: 28.4rem;
    }

    .imgTxtSecond {
        margin-left: 0;
    }

    .imgTxtThird {
        margin-left: 1rem;
    }
}

@media (max-width:1320px) {
    .mt-1320 {
        margin-top: 4.7rem;
    }
}


@media (max-width:1300px) {
    .pl4 {
        padding-left: 0;
    }

    .customCol3 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .pic1, .pic2, .pic3, .pic4 {
        clip-path: none;
        width: 100%;
        margin-left: 1rem;
        height: 25rem;
        margin-top: 0;
        background-size: cover;
        background-position: center;
        margin-left: 0;
    }

    .imgTxtFirst, .imgTxtSecond, .imgTxtThird {
        margin-left: 2rem;
    }

    .pBio {
        margin-left: 2rem;
        margin-top: -20rem;
    }

    .col3Prod {
        flex: 0 0 30.3333%;
        width: 30%;
    }

    .NavMenu nav a.nav-link, .NavMenu nav a.nav-link.active, .ShowMenu nav a.nav-link:hover, .NavMenu nav a.nav-link:hover {
        width: 90%;
        border-radius: 3rem;
        margin: 0 auto;
        margin-bottom: 1rem;
    }
}

@media (max-width:1200px) {
    .emailInput {
        margin-left: 2rem !important;
        margin-top: 0.75rem;
    }
    .btnAttach {
        width: 11rem;
    }
    .btnModal, .btnModal:hover {
        padding: 0.8rem 1rem;
    }
    .vline1200 {
        display: none;
    }

    .borderBtnHeight {
        margin-bottom: 1rem;
    }

    .flexCol1200 {
        flex-direction: column !important;
        align-items: flex-start !important;
        margin-left: 0;
    }

    .contactSpan {
        margin-bottom: 1rem;
    }

    .col12-1200 {
        flex: 0 0 auto;
        width: 100%;
        text-align: left !important;
        margin-top: 1rem;
        margin-bottom: 2rem;
    }

    .flexCol1420 {
        font-size: 0.89rem;
    }

    .col4WomenHealth {
        flex: 0 0 auto;
        width: 33.3333%;
    }

    .col8WomenHealth {
        flex: 0 0 auto;
        width: 66.66666667%;
    }

    .col6-1200 {
        flex: 0 0 auto;
        width: 100%;
    }

    .col4Habits {
        flex: 0 0 auto;
        width: 33.33333333%;
    }

    .lineGray {
        display: none;
    }

    .col4Thromb1200 {
        flex: 0 0 auto;
        width: 50%;
    }

    .col4Allergy1200 {
        flex: 0 0 auto;
        width: 50%;
        margin-top: 1.5rem;
    }

    .col8Thromb1200, .col8Allergy1200 {
        margin-left: 2rem;
        margin-top: 1rem;
    }

    .col3-1200 {
        flex: 0 0 auto;
        width: 33.3333%;
    }

    .ml0-1200 {
        margin-left: 0;
    }

    .col4Login {
        flex: 0 0 50%;
        width: 50%;
    }

    .modalWBill {
        max-width: 65%;
        margin: auto;
    }

    .h45 {
        height: auto;
    }

    .txtTestimonial {
        margin-left: 6rem;
    }

    .col4Cart {
        flex: 0 0 auto;
        width: 50%;
    }

    .mtN13 {
        margin-top: -10rem;
    }

    .linkStream {
        top: 8rem;
        left: 8rem;
    }

    .col6Links {
        flex: 0 0 100%;
        width: auto;
    }

    .col3-991 {
        flex: 0 0 auto;
        width: 50%;
    }
}

@media (max-width:1100px) {
    .btnModal, .btnModal:hover {
        padding: 0.8rem 0.25rem;
    }
    .col8Complaint, .col4Notes {
        flex: 0 0 auto;
        width: 100%;
    }
}

@media (max-width:991px) {
    .tableResponsive {
        overflow-x: auto;
        white-space: nowrap;
    }
    .bgNeed {
        margin-top: 0.5rem;
        margin-bottom: 1.5rem;
    }
    .flexCol991 {
        flex-direction: column !important;
        align-items: flex-start !important;
        margin-left: 0;
    }
    .spanRow991 {
        margin-left: 4rem !important;
    }

    #accordionNotes {
        overflow-y: scroll;
        height: 40rem;
    }

    .col3mt1-5 {
        margin-top: 1.5rem;
    }

    .col3-1200, .col4-991 {
        flex: 0 0 auto;
        width: 50%;
    }

    .table991 {
        display: block;
        max-width: -moz-fit-content;
        max-width: fit-content;
        margin: 0 auto !important;
        overflow-x: auto;
        white-space: nowrap;
    }

    .col3-991 {
        flex: 0 0 auto;
        width: 50%;
    }

    .chatLeftSide {
        transition: all 0.5s ease;
        position: absolute;
        width: 20rem;
        left: 0;
        z-index: 99;
    }

    .txtChat991 {
        font-size: 0.8rem;
    }

    .txtTime991 {
        font-size: 0.75rem;
    }

    .leftMargin {
        transition: all 0.5s ease;
        left: -20.5rem;
        z-index: 99;
    }

    .chatRightSide {
        width: 92%;
        margin-left: 2rem;
    }

    .ChatIcon {
        display: block;
        position: absolute;
        left: 20.2rem;
        top: 0;
        width: 3rem;
        background: #2d91cf;
        border-radius: 0.55rem;
        padding: 0.5rem 1rem;
        cursor: pointer;
    }

    .modalDialog, .modalDialog60 {
        max-width: 70%;
        margin: 0.5rem auto;
    }

    .col3Check {
        flex: 0 0 50%;
        width: 50%;
    }

    .col2Img {
        width: 25%;
        margin: 0 auto;
    }

    .rowImg {
        margin: 0 auto;
        width: 95%;
    }

    .col2AddNew {
        width: 25%;
        margin-left: 2rem;
    }

    .wDate {
        width: 100% !important;
    }

    .h1 {
        height: auto;
    }

    .col4LineLeft {
        flex: 0 0 20%;
        width: 20%;
    }

    .col4Title {
        flex: 0 0 60%;
        width: 60%;
    }

    .col4LineRight {
        flex: 0 0 20%;
        width: 20%;
    }

    .txtTestimonial {
        margin-left: 4rem;
    }

    .col3Prod {
        flex: 0 0 45%;
        width: 45%;
    }

    .col4Slider {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

    .col8Slider {
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
        height: auto;
        margin-bottom: 1rem;
    }

    .col12Slider {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .mainSlider {
        width: 95%;
    }

    .col30 {
        flex: 0 0 auto;
        width: 33.33333333%;
    }

    .col65 {
        flex: 0 0 auto;
        width: 66.66666667%;
        padding-left: 1rem !important;
        padding-right: 0 !important;
    }

    .col8Checkout {
        flex: 0 0 auto;
        width: 100%;
    }

    .mtN13 {
        margin-top: -8rem;
    }

    .linkStream {
        top: 6rem;
    }

    .h3Add {
        padding-bottom: 11rem;
    }

    .w90 {
        width: 90%;
    }

    .customTableCustomer {
        display: block;
    }

    #ModalSubCategories {
        width: 93vw;
        max-width: initial;
    }

    #SupplierModalDialog {
        width: 85vw;
        max-width: initial;
    }
}

@media (max-width:920px) {
    .col12-920 {
        flex: 0 0 auto;
        width: 100%;
    }
    .col6-920 {
        width: 100%;
    }
}

@media (max-width:875px) {
    .bgHabit, .bgDrugs, .bgThrombosis, .bgAllergies, .bgSurgicalOperations,
    .bgSmokingHistory, .bgAlcoholUse, .bgCaffeineIntake, .bgRecreationalDrugUse,
    .bgMenstrualUse, .bgPregnancyHistory, .bgContraceptiveUse {
        padding: 1rem 1rem;
        margin-right: 1rem;
    }
}

@media (max-width:820px) {
    .btnAttach p, .txtInvest {
        font-size: 0.89rem;
    }
    .modalWBill {
        max-width: 70%;
        margin: auto;
    }

    .customCol3 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .pic1, .pic2, .pic3, .pic4 {
        margin-left: 0.5rem;
    }

    .customTable {
        display: inline-table;
    }
}

@media (max-width:780px) {
    .langSelect {
        position: relative !important;
        left: 0;
    }
}

@media (max-width:768px) {
    .col3Form {
        flex: 0 0 auto;
        width:50%;
    }
    .btnAttach {
        width: 12rem;
    }
    .tabMedicalHistory {
        height: 11rem;
    }

    .tabInvestigations {
        height: 10rem;
        margin-top: 0.75rem;
    }

    .col4WomenHealth, .col8WomenHealth {
        flex: 0 0 auto;
        width: 100%;
    }

    .check768 {
        margin-left: 0;
    }

    .w50768 {
        width: 100% !important;
    }

    .flexCol768 {
        flex-direction: column !important;
        align-items: flex-start !important;
        margin-left: 0;
    }

    .col4Habits {
        flex: 0 0 auto;
        width: 100%;
    }

    .col3-1200, .col3-991, .col4-991 {
        flex: 0 0 auto;
        width: 100%;
    }

    .modalDialog, .modalDialog60 {
        max-width: 85%;
        margin: 0.5rem auto;
    }

    .col2Img {
        width: 47%;
        margin: 0 auto;
    }

    .col2AddNew {
        width: 47%;
        margin-left: 1rem;
    }

    .flL768 {
        float: left !important;
    }

    .col4Login {
        flex: 0 0 85%;
        width: 85%;
    }

    .modalWBill {
        max-width: 80%;
        margin: auto;
    }

    .brdRBill {
        border-right: none;
    }

    .flexDate {
        flex-direction: row !important;
    }

    .wDate {
        width: 45% !important;
    }

    .msDate {
        margin-left: 1.5rem;
    }

    .bgTilt {
        clip-path: none;
        width: 100%;
        margin-left: 0;
    }

    .pEvents {
        margin-left: 1rem;
        width: 90%;
    }

    .txtTestimonial {
        margin-left: 4rem;
    }

    .bgTiltTestimonial {
        width: 100%;
    }

    .prevTestimonial, .nextTestimonial {
        display: none;
    }

    .col3Prod {
        flex: 0 0 45%;
        width: 45%;
    }

    .mainSlider {
        width: 80%;
    }

    .imgCont {
        margin-top: 0;
    }

    .bgContact {
        background: transparent;
    }

    .bgGrayContact {
        background: var(--sectionbackground);
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    .pt0 {
        padding-top: 0 !important;
    }

    .pt3 {
        padding-top: 3rem;
    }

    .col30 {
        flex: 0 0 auto;
        width: 100%;
    }

    .col65 {
        flex: 0 0 auto;
        width: 100%;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .col4Cart {
        flex: 0 0 auto;
        width: 100%;
    }

    .dInlineBlock {
        display: inline-block !important;
    }

    .mtN13 {
        margin-top: -6rem;
    }

    .linkStream {
        top: 4rem;
        left: 5rem;
    }

    .img50 {
        width: 100% !important;
        margin-bottom: 1rem !important;
    }

    .col4Radio {
        flex: 0 0 auto;
        width: 100%;
    }

    .imgw100 {
        width: 75% !important;
    }

    .imgw50 {
        width: 50% !important;
        margin: 2rem;
    }
}

@media (max-width:640px) {
    .col2Img {
        width: 96%;
        margin: 0 auto;
    }

    .col2AddNew {
        width: 30%;
        margin: 0 auto;
    }
    .flexCol640 {
        flex-direction: column !important;
        align-items: flex-start !important;
        margin-left: 0;
    }
    .flexColInputCheckbox {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        align-items: end;
        width: 100%;
    }
    .flexColInputCheckbox input {
        margin-left: -1px;
        position: relative;
        margin-top: 0.75rem;
        width: 100% !important;
    }
}

@media (max-width:576px) {
    .scrollAlert {
        overflow-x: hidden;
    }
    .insuranceSpan {
        display: block;
    }
    .ChatAI {
        bottom: 6.5rem;
        width: 84%;
        margin: 0 auto;
        right: 2rem;
        height: 32rem;
    }

    .scrollChatAi {
        height: 20rem;
    }

    .ChatAIContent {
        width: 100%;
    }

    .alertBg {
        margin-bottom: 0.5rem;
    }

    .flexCol576 {
        flex-direction: column !important;
        align-items: flex-start !important;
        margin-left: 0;
    }

    .flexCol1420 {
        font-size: 0.5rem;
    }

    .alignItemsCenter {
        align-items: center !important;
    }

    .btnGray {
        margin-bottom: 1rem;
    }

    .col9-576 {
        flex: 0 0 95%;
        width: 95%;
    }

    .logoLanding {
        width: 100%;
    }

    .col4Login {
        flex: 0 0 95%;
        width: 95%;
    }

    .w35 {
        width: 50%;
    }

    .pBio {
        width: 84%;
    }

    .col4LineLeft {
        flex: 0 0 0%;
        width: 0%;
    }

    .col4Title {
        flex: 0 0 100%;
        width: 100%;
    }

    .col4LineRight {
        flex: 0 0 0%;
        width: 0%;
    }

    .txtTestimonial {
        margin-left: 3rem;
    }

    .col3Prod {
        flex: 0 0 80%;
        width: 85%;
        margin-right: auto;
        margin-left: auto;
    }

    .w50 {
        width: 50%;
    }

    .imgAddProd {
        margin-top: 13%;
        width: 4rem !important;
    }

    .h90 {
        height: 17rem;
    }

    .h95 {
        height: 95%;
    }

    .imgCenter {
        width: 50%;
    }
}

@media (max-width:540px) {

    .w50 {
        width: 100%;
    }

    .flex50 {
        flex-direction: column !important;
    }

    .colTitle {
        flex: 0 0 50%;
        width: 50%;
    }
    .col3Form {
        flex: 0 0 auto;
        width: 100%;
    }
}

@media (max-width:500px) {
    .tabInvestigations {
        height: 8.5rem;
    }
    .flexCol500 {
        flex-direction: column !important;
        align-items: flex-start !important;
        margin-left: 0;
    }

    .bgNeed {
        margin-top: 1rem;
    }

    .txt500 {
        margin-left: 0 !important;
    }

    .txtStatus, .txtSuspended {
        margin: 0;
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
    }
}

@media (max-width:480px) {
    .txtAllergy {
        margin: 0;
    }
    .btnAttach p, .txtInvest {
        font-size: 0.75rem;
    }
    .flexCol480 {
        flex-direction: column !important;
        align-items: flex-start !important;
        margin-left: 0;
    }

    .txtTestimonial {
        top: 15%;
    }

    .col6-480 {
        flex: 0 0 auto;
        width: 100%;
        margin-top: 1.5rem;
    }
}

@media (max-width:450px) {
    .btnApply, .inputCode {
        width: 8rem;
    }

    .mtN13 {
        margin-top: -4rem;
    }

    .linkStream {
        top: 3rem;
        left: 4rem;
        font-size: 1rem;
    }

    .nameLbl, .signOutLbl {
        font-size: 0.8rem;
    }

    .contUser {
        right: 9rem;
    }

    .langSelect {
        right: 12rem;
    }

        .langSelect span select {
            width: 7rem !important;
        }

    #accordionNotes {
        overflow-y: scroll;
        height: 40rem;
    }
}

@media (max-width:420px) {
    .btnAttach p, .txtInvest {
        font-size: 0.65rem;
    }
}

@media (max-width:400px) {
    .txt0-7-400 {
        font-size: 0.7rem;
    }

    .ChatAI {
        bottom: 9.5rem
    }
}

@media (max-width:360px) {
    .linkStream {
        top: 2rem;
        left: 3rem;
    }
}
/*end media queries*/

.txtPaid {
    position: absolute;
    color: forestgreen;
    top: 40%;
    left: 45%;
    transform: translate(-40%, -45%);
    transform: rotate(-45deg);
    font-size: 3rem;
}

@media print {
    table, table#JournalVoucherTable {
        display: inline-table;
    }

    .grecaptcha-badge {
        display: none !important;
    }
    /*thead {
        color: #074368 !important;
    }*/
    body {
        -webkit-print-color-adjust: exact;
        -moz-print-color-adjust: exact;
        -ms-print-color-adjust: exact;
        print-color-adjust: exact;
        margin: 1rem;
    }

    .col-md-6 {
        width: 50% !important;
    }

    h4.txtPrimary {
        margin-top: 0.75rem !important;
    }

    /*p.txtPrimary {
        color: #0988b3 !important;
    }*/

    .col9Print {
        flex: 0 0 auto;
        width: 100%;
    }

    .rowPrint {
        margin-top: 0;
    }