html {
    font-size: 14px;
}

.body-content {
    background-color: #efefef;
}

.patient-nav-pane {
    background-color: white;
    border-radius: 15px;
    padding: 20px;
    margin: 5px;
}

form i {
    cursor: pointer;
}

.input-group-text {
    padding: 0.635rem 0.75rem;
    background: transparent;
    border: none;
}

.showPass, .shoWPass {
    position: relative;
}

    .showPass .eyecls, .eyeIn {
        position: absolute;
        right: 16px;
        z-index: 5 !important;
    }

a,
a:hover,
a:focus {
    text-decoration: none;
    transition: all 0.3s;
}

.navbar {
    padding: 15px 10px;
    background: #fff;
    border: none;
    border-radius: 0;
    margin-bottom: 40px;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}

.navbar-btn, .btn:focus {
    box-shadow: none;
    outline: none !important;
    border: none;
}

.line {
    width: 100%;
    height: 1px;
    border-bottom: 1px dashed #ddd;
    margin: 40px 0;
}

/* ---------------------------------------------------
    SIDEBAR STYLE
----------------------------------------------------- */

.wrapper {
    display: flex;
    width: 100%;
    align-items: stretch;
}
header {
    background: #212529;
}
#sidebar {
    min-width: 250px;
    max-width: 250px;
    color: #fff;
    transition: all 0.3s;
}

    #sidebar.active {
        margin-left: -250px;
    }

    #sidebar .sidebar-header {
        padding: 20px;
        background: #6d7fcc;
    }

a[data-toggle="collapse"] {
    position: relative;
}

.dropdown-toggle::after {
    display: block;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}

/* ---------------------------------------------------
    CONTENT STYLE
----------------------------------------------------- */

.btn-toggle {
    border: 0.5px solid transparent;
    border-radius: 3px;
    margin-left: -16px;
    background-color: transparent;
}

#content {
    width: 100%;
    padding: 0px 10px 10px 10px;
    min-height: 100vh;
    transition: all 0.3s;
    background-color: #efefef;
    /*display: grid;*/
}

/* ---------------------------------------------------
    MEDIAQUERIES
----------------------------------------------------- */

@media (max-width: 768px) {
    #sidebar {
        margin-left: -250px;
    }

        #sidebar.active {
            margin-left: 0;
        }

    #sidebarCollapse span {
        display: none;
    }
}

/* For Mobile Portrait View */
@media screen and (max-device-width: 480px) and (orientation: portrait) {
    .align-items-center {
        align-items: flex-start !important;
    }

    .d-none {
        display: initial !important;
    }

    .patient-nav-pane {
        padding: 5px;
        margin: 0px;
    }

    .nav-link {
        padding: 0rem 0rem;
    }
}

/* For Mobile Landscape View */
@media screen and (max-device-width: 640px) and (orientation: landscape) {
    .align-items-center {
        align-items: flex-start !important;
    }

    .d-none {
        display: initial !important;
    }

    .patient-nav-pane {
        padding: 5px;
        margin: 0px;
    }

    .nav-link {
        padding: 0rem 0rem;
    }
}

/* For Mobile Phones Portrait or Landscape View */
@media screen and (max-device-width: 640px) {
    .align-items-center {
        align-items: flex-start !important;
    }

    .d-none {
        display: initial !important;
    }

    .patient-nav-pane {
        padding: 5px;
        margin: 0px;
    }

    .nav-link {
        padding: 0rem 0rem;
    }
}

/* For iPhone 4 Portrait or Landscape View */
@media screen and (min-device-width: 320px) and (-webkit-min-device-pixel-ratio: 2) {
    .align-items-center {
        align-items: flex-start !important;
    }

    .d-none {
        display: initial !important;
    }

    .patient-nav-pane {
        padding: 5px;
        margin: 0px;
    }

    .nav-link {
        padding: 0rem 0rem;
    }
}

/* For iPhone 5 Portrait or Landscape View */
@media (device-height: 568px) and (device-width: 320px) and (-webkit-min-device-pixel-ratio: 2) {
    .align-items-center {
        align-items: flex-start !important;
    }

    .d-none {
        display: initial !important;
    }

    .patient-nav-pane {
        padding: 5px;
        margin: 0px;
    }

    .nav-link {
        padding: 0rem 0rem;
    }
}

/* For iPhone 6 and 6 plus Portrait or Landscape View */
@media (min-device-height: 667px) and (min-device-width: 375px) and (-webkit-min-device-pixel-ratio: 3) {
    .align-items-center {
        align-items: flex-start !important;
    }

    .d-none {
        display: initial !important;
    }

    .patient-nav-pane {
        padding: 5px;
        margin: 0px;
    }

    .nav-link {
        padding: 0rem 0rem;
    }
}


html {
    position: relative;
    min-height: 100%;
}


.zoom {
    height: 100vh;
    width: 100%;
    display: block;
    place-items: center;
    position: relative;
    top: 0;
    left: 0;
}

.modal-content {
    border: none;
    background-color: transparent;
}

.termsagreebtn {
    margin-top: 8px;
}

.card-description-auto-hide {
    display: block;
    overflow: hidden;
}

.history-count-flag {
    background-color: #e9dfde;
    color: black;
    border-radius: 10px;
    padding: 0px 10px;
    font-size: 12px;
    text-underline-position: under;
    margin-left: 10px;
}

.feedback-title {
    color: white;
}

.text-justify {
    text-align: justify;
}

button.acc-btn {
    /* create a grid */
    display: grid;
    /* create colums. 1fr means use available space */
    grid-template-columns: 1fr max-content max-content;
    align-items: center;
    grid-gap: 10px;
}

#pdfmodal {
    background: rgba(0, 0, 0, 0.6);
    color: white;
}

.nav-link {
    color: #b0b6bf;
}

.create-health-record {
    margin-bottom: 5px;
    color: rgb(0 0 0);
    background-color: #fff;
    border-color: #6c757d;
    font-size: 1.25rem;
}

.update-record {
    margin-bottom: 5px;
    margin-left: 3px;
    font-size: 1.25rem;
    color: rgb(0 0 0);
    background-color: #fff;
    border-color: #41464b;
}

.create-prescription {
    margin-left: 3px;
    margin-bottom: 5px;
    font-size: 1.25rem;
    color: rgb(0 0 0);
    background-color: #ffffff;
    border-color: #41464b;
}

.create-investigation {
    margin-left: 3px;
    margin-bottom: 5px;
    font-size: 1.25rem;
    color: #000;
    background-color: #ffffff;
    border-color: #41464b;
}

.auto-margin {
    margin-left: auto;
    margin-right: auto;
}

.mb-lg-3 {
    margin-bottom: 1rem !important;
}

td {
    word-break: break-word;
}

.history-health-record-no {
    color: dimgray;
    background-color: white;
    padding: 3px;
}

.sort-button {
    /*width: 101px !important;*/
    border-radius: 20px;
    padding: 7px 40px 7px 15px;
}


.health-record-title {
    font: 500 16px/17px "Poppins";
    margin-bottom: 10px !important;
}

.recordCards .card-subtitle {
    font: 400 14px/24px "Poppins";
}

.recordCards p {
    text-transform: capitalize;
}

#searchInput {
    width: 100%;
    margin-bottom: 5px;
    padding: 10px;
}

.search-button {
    background-color: transparent;
    color: #000;
    margin-bottom: 5px;
    cursor: pointer;
}

    .search-button:hover {
        color: #0056b3;
    }

#v-pills-tab {
    text-align: center;
    border-radius: 0;
}

#searchHealthRecords {
    width: 235px;
    /*margin-bottom: 5px;
    margin-top: 5px;
    padding: 5px;
    margin-left: 5px;*/
    margin: 5px 0 0;
    padding: 8px 10px;
    border-radius: 20px;
}

@media(max-width: 575px) {
    #searchHealthRecords {
        width: 235px;
    }

    .m-0-small {
        margin: 0 !important;
        font-size: 14px !important;
        width: 85px !important;
    }

    .search-health-record {
        flex-wrap: wrap;
        justify-content: start !important;
    }
}

#searchPrescriptions, #searchInvestigations {
    margin: 5px 0 0;
    padding: 8px 10px;
    border-radius: 20px;
    width: 220px;
}

#searchInvestigations {
    width: 235px;
}

#searchInput3 {
    margin: 5px 0 0;
    padding: 8px 10px;
    border-radius: 20px;
    width: 220px;
}
.printBtn {
    padding: 8px 15px;
    background: white;
    color: blue;
    margin-left: 10px;
    font-weight: 600;
    border: 1px solid #7d7d7d;
    box-shadow: 1px 1px #7d7d7d;
    border-radius: 20px;
}

.printBtn:hover {
    border: 2px solid blue; 
}

.create-health-record-on-viewing-patient-records {
    cursor: pointer;
    border-radius: 20px;
    background-color: rgb(0, 0, 0);
    padding-top: 9px;
    padding-bottom: 9px;
    padding-left: 25px;
    padding-right: 25px;
    margin-top: 6px;
}

.create-health-record-on-viewing-patient-records a {
    color: white;
}

    .create-health-record-on-viewing-patient-records:hover {
        background-color: white;
        border: 1px solid #000;
    }

.create-health-record-on-viewing-patient-records:hover a {
    color: rgb(0, 0, 0);
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.create-health-record-on-viewing-patient-records a:hover {
    color: rgb(0, 0, 0);
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.create-new-prescription, .create-new-investigation, .add-patient-button {
    cursor: pointer;
    border-radius: 20px;
    background-color: black;
    padding-top: 9px;
    padding-bottom: 9px;
    font-family: Poppins;
    padding-left: 25px;
    padding-right: 25px;
    margin-top: 5px;
    color: white;
    width: max-content;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.create-new-prescription a, .create-new-investigation a, .add-patient-button a {
    color: white;
}

.create-new-prescription:hover, .create-new-investigation:hover, .add-patient-button:hover {
    border: 1px solid #000;
    border-radius: 20px;
    background-color: white;
    font-family: Poppins, sans-serif;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.create-new-prescription:hover a, .create-new-investigation:hover a, .add-patient-button:hover a {
    color: black;
}


#buttons-container {
    position: fixed;
    bottom: 25px; /* Adjust the bottom value as needed */
    right: 450px; /* Adjust the right value as needed */
    z-index: 999; /* Adjust the z-index as needed to make sure it appears above other elements */
}

    #buttons-container button {
        margin-right: 30px; /* Add margin between buttons if needed */
    }

.create-prescription-form-buttons {
    display: flex;
    justify-content: space-between;
    padding-left: 390px;
    padding-right: 450px;
}

.create-investigation-form-buttons {
    display: flex;
    justify-content: space-between;
    padding-left: 390px;
    padding-right: 450px;
}

.password-instructions {
    font-size: 0.90rem;
    font-weight: 400;
}

@media print {

    html {
        height: 99%;
    }

    /* Hide the specified elements for printing */
    #sidebar-toggle-button,
    #privacy-terms-and-conditions,
    #print-page-buttons,
    #footer {
        orphans: 1;
    }

    body {
        margin: 0;
        height: 99%;
    }

    @page {
        size: auto;
        margin: 20px;
    }

    .print:last-child {
        page-break-after: auto;
    }

    .print-only {
        display: block !important;
    }
}

@media screen {
    .print-only {
        display: none;
    }
}

/* Frontend css */

.mainWrap {
    margin-top: 20px;
    margin-bottom: 20px;
}

    .mainWrap .bgclr {
        background: #f7f6f6;
    }

    .mainWrap .titleTop {
        padding: 10px;
        background: #ff7421;
        text-align: center;
        border-radius: 0;
        color: white;
    }

        .mainWrap .titleTop h2 {
            font-family: 'DM Serif Display', serif;
            text-align: center;
            font-size: 32px;
            font-weight: 600;
        }

    .mainWrap input, .mainWrap select, .mainWrap .form-control:focus, .mainWrap .form-select:focus, .mainWrap textarea {
        padding: 10px 15px;
        border-radius: 0;
        border: 1px solid #6B6B6B;
        font-size: 16px;
        outline: none;
        box-shadow: none;
    }

    .mainWrap textarea {
        width: 100%;
    }

    .mainWrap .contactBtns {
        -moz-column-gap: 20px;
        column-gap: 20px;
    }

@media(max-width: 575px) {
    .mainWrap .contactBtns {
        flex-wrap: wrap;
    }

        .mainWrap .contactBtns .nexT {
            margin-top: 15px !important;
        }
}

#menu li:hover a {
    margin-left: 7px;
    transition: all .5s;
}

input {
    background: white;
    outline: none;
    box-shadow: none;
}

select, .form-select:focus {
    outline: none;
    box-shadow: none;
}

.mainWrap label {
    color: #000;
    font-family: 'Inter';
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.submit .SubmitBtn {
    border: 1px solid #ffffff;
    background: #ff7421;
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    font-weight: 400;
    padding: 10px 30px;
    width: 160px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

    .submit .SubmitBtn:hover {
        background: #ff9c57;
        color: #ffffff;
        border: 1px solid #ffffff;
    }

.forgotPass, .createAcc h4 {
    color: #000;
    font-family: 'Inter';
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    padding-top: 10px;
}

.creatAccBtn {
    border: 1px solid #000;
    background: #FFF;
    color: blue;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 400;
    padding: 10px 30px;
    width: 70%;
    margin-top: 25px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.creatAccBtn:hover {
    background:#A9A9A9;
    color: #ffffff;
    border: 1px solid #ffffff;
}

.nexT .nextBtn {
    border: 1px solid #000;
    background: #FFF;
    color: #000;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 400;
    padding: 10px;
    width: 160px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

    .nexT .nextBtn:hover {
        background: #A9A9A9;
        color: #ffffff;
        border: 1px solid #ffffff;
    }

.nextBtnSave {
    border: 1px solid #ffffff;
    background: #ff7421;
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 400;
    padding: 10px;
    width: 160px;
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition effect */
}

        .nextBtnSave:hover {
            background: #ff9c57;
            color: #ffffff;
            border: 1px solid #ffffff;
        }


.logSuccess {
    color: #1d7149;
    background-color: transparent;
    border-color: #1d7149;
    font-size: 16px;
    font-weight: 600;
    border-radius: 0;
    margin-bottom: 20px;
}

.field-validation-error {
    font-size: 13px;
    font-weight: 300;
}

@media (max-width: 768px) {
    .mainWrap .titleTop {
        padding: 10px 15px;
    }

    .mainWrap input, .mainWrap select, .mainWrap .form-control:focus, .mainWrap .form-select:focus {
        padding: 10px;
    }

    .submit .submit {
        font-size: 16px;
        padding: 8px 20px;
        width: 120px;
    }

    .creatAccBtn {
        font-size: 16px;
        padding: 10px 30px;
        width: 100%;
        margin-top: 10px;
    }

    .createAcc {
        padding-bottom: 0 !important;
        margin: 0 20px;
    }

    #login_form {
        padding: 0 20px;
    }
}

.TwoBtns {
    -moz-column-gap: 10px;
    column-gap: 10px;
    margin-top: 35px;
}

    .TwoBtns .nexT .nextBtn {
        border: 1px solid #000;
        background: #FFF;
        color: #000;
        font-family: Poppins;
        font-size: 16px;
        font-weight: 400;
        padding: 10px 30px;
        width: 160px;
        transition: background-color 0.3s ease, color 0.3s ease;
    }

    .TwoBtns .nexT .nextBtn:hover {
        background:#A9A9A9;
        color: #ffffff;
        border: 1px solid #ffffff;
    }

.passValidate {
    padding-top: 15px;
}

    .passValidate .textTag {
        font: 600 16px/26px "Poppins", sans-serif;
    }

    .passValidate .tickBox {
        height: 25px;
    }

    .passValidate p {
        font-size: 14px;
        font-weight: 500;
    }

    .passValidate .tickBox.active {
        content: "";
        width: 18px;
        height: 18px;
        background-color: green;
        border-radius: 50%;
        margin: 4px;
    }

    .passValidate .wrapTick {
        display: flex;
        justify-content: center;
    }

.conditionsT {
    align-items: center !important;
}

    .conditionsT .termsagreebtn input {
        box-shadow: none;
    }

#sidebar-toggle-button {
    position: absolute;
    top: 50px;
}

@media (max-width: 992px) {
    .viewPtWrap {
        flex-wrap: wrap;
    }

    .mainWrap .titleTop {
        padding: 15px;
    }

        .mainWrap .titleTop h2 {
            font-size: 26px;
        }
    .FWDocument{
        flex-wrap: wrap;
        justify-content: left;
    }
}
@media(max-width: 575px){
    .FWDocumentIn{
        flex-wrap: wrap;
        justify-content: left !important;
        align-items: center !important;
    }
    .FWDocumentIn #searchForm{
        margin: 10px 10px 10px 0;
    }
    .FWDocumentIn .ms-2.mt-1 {
        margin-left: 0 !important;
    }
    .mainWrap .titleTop h2 {
        font-size: 22px;
    }
    /*#searchHealthRecords {
        width: 220px;
    }*/
    #sidebar-toggle-button {
        position: absolute;
        top: 28px;
    }
    .btn-toggle {
        margin-left: -17px;
    }
}

@media (max-width: 768px) {
    label, input {
        margin-bottom: 10px;
    }

    .nexT {
        margin-top: 25px !important;
    }

    .viewPtWrap {
        display: block !important;
    }

    .nav-pills .nav-link.active, .nav-pills .show > .nav-link {
        padding: 13px;
        font-size: 16px;
    }

    .patient-nav-pane {
        padding: 10px;
        margin: 10px;
    }
}

@media (max-width: 575px) {
    .flexWrap {
        flex-wrap: wrap;
    }

    input {
        padding: 10px;
    }

    .patient-nav-pane {
        padding: 5px;
        margin: 5px;
    }

    .TwoBtns .nexT .nextBtn {
        width: auto;
        font-size: 15px;
    }

    .p-Samll-d {
        padding: 15px !important;
    }

    .nav-pills .nav-link.active, .nav-pills .show > .nav-link {
        padding: 5px;
        margin-bottom: 5px;
    }

    .topSearchPresc .searchAll {
        width: max-content;
        margin-top: 10px;
    }

    /*#searchPrescriptions {
        padding: 8px 24px;
    }*/
}

@media (max-width: 450px) {
    .TwoBtns {
        flex-wrap: wrap;
        justify-content: start !important;
    }

        .TwoBtns .nexT {
            margin-top: 5px !important;
        }
}

@media (max-width: 1200px) {
    .passValidate p {
        text-align: start;
    }

    .passValidate .wrapTick {
        justify-content: start;
    }

    .mainWrap label {
        font-size: 14px;
    }
}

.viewPtWrap #v-pills-tab {
    padding: 8px;
}

.viewPtWrap button {
    margin-bottom: 4px;
}

.nexT {
    position: relative;
}

    .nexT .arrow {
        position: absolute;
        right: 40px;
        top: 12px;
    }

.patient-nav-pane td, .patient-nav-pane tr, patient-nav-pane th {
    padding: 15px !important;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: #fff;
    background-color: #ff7421;
}

.searchAll .search-button {
    position: absolute;
    right: 10px;
    top: 8px;
}

.searchAll {
    position: relative;
}

    .searchAll.rightSearch {
        width: fit-content;
    }

.prescripPage .patient-nav-pane {
    padding: 10px;
    border-radius: 0;
}

.prescripPage .patient-button {
    border-radius: 0;
    margin-bottom: 4px;
}

table th {
    vertical-align: top;
    background-color: rgb(233, 233, 233) !important;
}

.table {
    margin: 0;
    border: 1px solid black;
}

.prescripPage .patient-nav-pane td {
    padding: 10px !important;
}

.topSearchPresc {
    display: flex;
    justify-content: space-between;
    margin: 10px;
}

@media(max-width: 1350px) {
    .prescripPage table {
        width: 785px;
    }
}

@media(max-width: 1150px) {
    .prescripPage {
        display: block !important;
    }
}
@media(max-width: 575px) {
    .prescripPage .table {
        width: 900px;
    }
        .prescripPage .table th {
            padding: 10px !important;
        }
    .prescripPage .topSearchPresc {
        display: block;
    }

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

nav .nav-pills .nav-link, #dropdownUser1 span {
    font: 500 16px/26px "Poppins";
    margin-bottom: 8px;
    color: #a6acb4;
}

p, .alert-danger {
    font: 400 14px/26px "Poppins";
    border-radius: 0;
}

.alert-success {
    font: 500 15px/26px "Poppins";
    border-radius: 0;
}

.footer {
    background: #DEDEDE;
}

    .footer .ftIn, .footer .ftIn a {
        color: black;
        font: 500 15px/26px "Poppins";
    }

        .footer .ftIn {
            display: flex;
            justify-content: center;
            padding-top: 10px;
        }

.sidebarL .group .one, .sidebarL .group .two {
    content: "";
    width: 5px;
    height: 24px;
    background: #212529;
    margin-left: 2px;
    transition: all .3s;
}

.sidebarL .group .one {
    transform: rotate(0deg);
}

.sidebarL .group .two {
    transform: rotate(0deg);
    margin-top: -5px;
}

.sidebarL .group:hover .one {
    transform: rotate(-30deg);
    transition: all .3s;
}

.sidebarL .group:hover .two {
    transform: rotate(30deg);
    transition: all .3s;
}

.createNPrec .patient-nav-pane {
    border-radius: 0px;
    padding: 10px;
}

@media(max-width: 992px) {
    .createNPrec .RespDiv {
        display: block !important;
    }

    .createNPrec #v-pills-tabContent {
        margin-top: 20px;
    }
}

/*@media(max-width: 1200px) {
    #searchHealthRecords {
        width: 215px;
    }
}*/

.nextFloatBtn {
    padding: 7px 15px;
    background: white;
    border: 2px solid blue;
    color: blue;
    border-radius: 8px;
    font: 500 15px/25px "Poppins";
}

.nextFloatBtn:hover {
    color: white;
    background: blue;
    border: none;
}

.cancelFloatBtn {
    padding: 7px 15px;
    background: white;
    border: 2px solid red;
    color: red;
    border-radius: 8px;
    font: 500 15px/25px "Poppins";
}

.cancelFloatBtn:hover {
    color: white;
    background: red;
    border: none;
}

.plusBtn {
    color: #f00;
    background: transparent;
    border: none;
}

.minusBtn {
    color: blue;
    background: transparent;
    border: none;
}

.overFlowScrl textarea {
    height: 46px;
}

/*@media(max-width: 575px) {
    .overFlowScrl, .scrollInvestigation {
        overflow-x: scroll;
    }

        .overFlowScrl table {
            width: 800px;
        }

        .scrollInvestigation table {
            width: 400px;
        }
}*/

/* -------Allergy Modal-------- */
.allergiesModal .custPrimaryBtn,
.allergiesModal .closeBTN {
    border: 1px solid #000;
    background: #fff;
    padding: 7px 15px;
    color: #000;
    font-family: Poppins;
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    border-radius: 20px;
}

.closeBTN:hover {
    border: 1px solid #000;
    background: black;
    color: white;
    font-family: Poppins;
}

.custPrimaryBtn:hover {
    border: 1px solid #000;
    background: black;
    color: white;
    font-family: Poppins;
}

.allergiesModal .subOrgBTN {
    border: 1px solid #fe5f11;
    background: #fff;
    padding: 8px 18px;
    color: #fe5f11;
    border-radius: 20px;
    font-size: 15px;
    font-weight: 600;
}

.allergiesModal .subOrgBTN:hover {
    border: 1px solid #fe5f11;
    background: #fe5f11;
    color: #ffffff;
}

.subOrgBTN2 {
    border: 1px solid #ffffff;
    background: #ff7421;
    color: #ffffff;
    padding: 8px 18px;
    border-radius: 20px;
    font-size: 15px;
    font-weight: 600;
}

.allergiesModal .modal-body {
    text-align: center;
    padding: 0;
}

    .allergiesModal .modal-body .ADDBtn {
        border: none;
        background: none;
        color: #fe722d;
        margin-top: 5px;
    }

    .allergiesModal .modal-body .titleWrap {
        padding: 10px 0;
        background: #626262;
    }

.allergiesModal input {
    padding: 10px;
    border: 1px solid black;
}

.allergiesModal .input-container {
    display: flex;
    padding: 12px;
    justify-content: space-between;
}

    .allergiesModal .input-container button {
        border-radius: 50%;
        padding: 0 12px;
        text-align: center;
        color: white;
        background-color: blue;
        border: 0;
        height: 32px;
        font-size: 20px;
        font-weight: 700;
    }

.modal-body .title {
    color: white;
    font: 600 18px/28px "Poppins";
}

.modal-header h3 {
    font-weight: 600;
}
@media(max-width: 360px) {
    .allergiesModal .allergy {
        padding-left: 5px !important;
    }
}
    @media(max-width: 575px) {
        .allergiesModal {
            margin-bottom: -6px;
            margin-top: 10px;
        }

            .allergiesModal .allergy {
                padding-left: 50px;
            }

            .allergiesModal .custPrimaryBtn {
                font-size: 14px;
                margin-left: 0 !important;
            }

        #v-pills-1 .create-health-record-on-viewing-patient-records {
            margin-left: 0 !important;
            margin-bottom: 5px;
        }

        .searchAll input {
            font-size: 14px !important;
        }
    }

    @media(max-width: 500px) {
        .allergiesModal .modal-header, .allergiesModal .modal-body, .allergiesModal .modal-footer {
            width: 560px;
        }

        .allergiesModal .modal-content {
            overflow-x: scroll;
        }
    }

    .create-health-record-on-viewing-patient-records a {
        font-family: "Poppins";
    }

    @media (max-width: 575px) {
        .nexT {
            margin-top: 0 !important;
        }

        .showPass .eyecls, .eyeIn {
            top: 12%;
        }

        .conditionsT .termsagreebtn {
            display: flex;
        }

        .printBtn {
            margin: 10px 0;
        }
    }

    @media(max-width: 700px) {
        #buttons-container {
            right: 0px;
        }
    }

    #section-to-print p {
        margin-bottom: 8px;
        text-transform: capitalize;
    }

    h6, td {
        font-family: "Poppins";
    }

    .printBtnss {
        padding: 8px 20px !important;
        font: 500 14px/24px "Poppins";
        color: white;
        border: none !important;
        text-align: center;
    }

    .redB {
        background: red;
    }

    .greenB {
        background: #006800;
    }

    .yellowB {
        background: #ffc106;
        color: black;
    }

    .print-only {
        display: none;
    }

    /* Hide the logo and title by default */
    #print-title,
    #logo, #currentDatePlaceholder {
        display: none;
    }

    /* Styles for logo and title on each printed page */
    @media print {
        #print-title {
            font-family: 'Poppins', sans-serif;
            text-align: center;
            display: block;
            position: fixed;
            width: 100%;
            height: auto;
            color: black;
            margin-top: 20px;
            margin-bottom: 40px;
        }
        .mainWrap .titleTop h2 {
            font-family: 'Poppins', sans-serif;
            color: black;
        }
            #logo {
            display: block;
            position: fixed;
            top: 10px;
            left: 0;
            width: 100%;
            height: auto;
        }

        #logo {
            left: 60px;
            width: 100px;
        }

        #section-to-print:not(:first-of-type) {
            padding-top: 80px;
        }

        #currentDatePlaceholder {
            display: block;
        }
    }

    #content {
        position: relative;
    }

#HFrAllergies {
    margin-bottom: 115px;
}

.dFrAllery .allergyShow {
    padding: 10px;
    position: relative;
}

            .dFrAllery .allergyShow .HForScroll {
                height: 110px;
            }

    .btn-close:focus {
        box-shadow: none;
    }

    .dFrAllery .allergyShow .modalForExapand_Allergy {
        position: absolute;
        top: 3px;
        right: 20px;
    }

.pagination {
    column-gap: 4px;
    justify-content: end;
    font: 600 14px / 24px 'Poppins';
}

    .pagination .active, .pagination .pagenum {
        padding: 0px;
        border-radius: 50%;
        width: 22px;
        height: 23px;
        text-align: center;
        vertical-align: middle;
        color: black;
        background: transparent;
        font: 600 14px / 24px 'Poppins';
    }

    .pagination .active {
        color: white;
        background: #ff7421;
        border: 1px solid #ff7421;
    }

    .pagination .arrowPagn {
        color: black;
        font: 600 14px / 24px 'Poppins';
        margin: 0 5px;
    }
.height_375 .table-responsive {
    height: 400px;
}

.AccForCreateHR .accordion-button {
    border: 1px solid #e9ecef;
    border-radius: 0 !important;
    background: #e9ecef !important;
    font-size: 17px;
    font-weight: 700;
    color: black !important;
}
.AccForCreateHR .accordion-body {
    border: 1px solid #e9ecef;
    border-radius: 0 !important;
    border-top: none;
}
.accordion-button:focus {
    border-color: #e9ecef !important;
    outline: 0;
    box-shadow: none;
}
.AccForCreateHR .accordion-item {
    margin-bottom: 20px;
}
.AccForCreateHR table th {
    background-color: rgb(233 236 239) !important;
}
#accordionHealthRecord .acc-btn, #accordionHistoryRecord .acc-btn {
    font: 500 14px/17px "Poppins";
}   

.ViewPrescPatient .custPrimaryBtn:hover {
    border: none;
    background: none;
    color: #003af7;
    font: 500 14px/26px "Poppins";
}

.ViewPrescPatient .custPrimaryBtn {
        border: none;
        background: none;
        color: #0073ff;
        font: 500 14px/26px "Poppins";
    }

    button:focus-visible {
        outline: none !important;
    }

    .width_700 {
        width: 700px;
    }
    ::-webkit-scrollbar {
        width: 7px;
        height: 5px;
    }
    ::-webkit-scrollbar-track {
        background: #f1f1f1;
    }
    ::-webkit-scrollbar-thumb {
        background: #555;
    }
    .HForScroll::-webkit-scrollbar {
        width: 10px;
    }

    .allergyShow span {
        font: 400 14px / 24px "Poppins";
    }

    .emptyAllergy {
        display: none;
    }
    /*.dropdown-menu.show {
    display: contents !important;
}*/
    .dropdown-menu.show {
        display: block;
        padding: 10px;
        background: white;
        border: none;
        min-width: max-content;
        transform: translate(-21px, 30px) !important;
    }

    @media (max-width: 1050px) and (min-width: 575px ) {
        .tableforDropdown .table {
            width: 500px;
        }
    }

    @media (max-width: 575px) {
        .tableforDropdown .table {
            width: 400px !important;
        }
        .recordCards {
            padding: 5px;
        }
        .recordCards .card-text {
            font-size: 12px;
            margin-bottom: 5px;
        }
        .health-record-title {
            font-size: 14px;
        }
        .dateResp{
            display: block !important;
        }
        .txtStart{
            text-align: start !important;
        }
        .footer .ftIn, .footer .ftIn a{
            font-size: 12px;
        }
        .footer .ftIn{
            padding-top: 10px;
        }
    }
    .UpdtIcon a:hover i, .UpdtIcon button:hover i{
        color: #2882e2 !important;
    }

    

/* Plus button at the right */
.add-prescription-btn-container {
    position: relative;
    text-align: right;
    margin-bottom: 15px; /* Add some space between button and table */
}

    .add-prescription-btn-container .plusBtn {
        font-size: 20px;
        padding: 5px 10px;
        /*background-color: #28a745;*/ /* Optional: Button color */
        /*color: white;*/
        border: none;
        border-radius: 50%;
        cursor: pointer;
    }

/* For screens above 575px */
@media (min-width: 576px) {
    .prescription-container .accordion {
        display: none;
    }

    .prescription-row {
        display: table-row;
    }
}

/* For screens below 575px */
@media (max-width: 575px) {
    /*.prescription-row {
        display: block;
    }*/

    .prescription-container .accordion-button {
        width: 100%;
        text-align: left;
    }

    .prescription-container {
        margin-bottom: 15px;
    }

    .plusBtn, .copyReasonBtn {
        display: inline-block;
        margin-right: 10px;
    }
}

    .hfor5{
        height: 291px; 
        display: block;
        overflow: hidden;
    }
    .hfor5 button{
        width: 100%;
        text-align: center;
    }
.search-container {
    position: relative;
}
    .search-container #clearSearchButton {
        position: absolute;
        right: 3px;
        top: 12px;
        background: transparent;
        border: none;
        width: 35px;
        display: block !important
    }
.hVHR5 {
    height: 270px;
    display: block;
    overflow: hidden;
}
.copyReasonBtn{
    border-radius: 20px;
    background: #000;
}
.copyReasonBtn i {
    color: white;
    font-size: 16px;
    padding: 3px 1px;
}
#investigations-body tr, #prescriptionTable tr{
    border-bottom: 1px solid black;
}
.newPt{
    text-align: end;
}
    .newPt button {
        padding: 8px 15px;
        margin: 0 5px 10px;
        background: white;
        font: 600 14px/24px "Poppins";
        color: blue;
    }

.profWrap h6 {
    padding-bottom: 10px;
}

.profWrap h3 {
    padding-bottom: 15px;
}

.profWrap .pAll {
    padding: 30px 0;
}

.createProLinks ul li {
    list-style: none;
    text-align: center;
    border: 1px solid black;
    margin-bottom: 10px;
}

    .createProLinks ul li a {
        color: black;
        font: 500 15px/25px "Poppins";
    }


.DayTime input, .DayTime .form-control:focus {
    padding: 3px 6px;
    padding-top: 5px;
}

.DayTime span {
    font: 400 15px/25px 'Poppins', sans-serif;
    padding-left: 5px;
}

.DayTime .day {
    width: 115px;
}
/* remove ln 193 */
.DrProfile .profileImg {
    border: 1px solid black;
    padding: 5px;
}

.DrProfile .parentRight .qualif {
    padding-bottom: 20px;
    border-bottom: 1px solid black;
    margin-right: 50px;
}

.DrProfile .parentRight .ContactDetails {
    margin: 20px 0;
    margin-right: 50px;
}
.DrProfile .parentRight .name{
    margin-right: 50px;
}


.DrProfile .ContactDetails h5 {
    padding-bottom: 10px;
}

.DrProfile .parentRight .qualif h4, .DrProfile .parentRight .qualif h5 {
    color: #656565;
}

.DrProfile .desCription {
    border-bottom: 1px solid black;
    margin-right: 50px;
}

    .DrProfile .desCription p {
        font: 500 15px/25px 'Poppins', sans-serif;
    }

.DrProfile .workDays table th {
    font-size: 16px;
}

.drschedule h3 {
    /* border-bottom: 1px solid black;
            width: fit-content; */
    font-weight: 700;
    margin-bottom: 30px;
}

.apptBtn {
    /* text-align: center; */
    margin-top: 60px;
}

    .apptBtn button {
        border: 1px solid #ff7421;
        background: #ff7421;
        padding: 10px 17px;
        font-size: 15px;
        font-weight: 600;
        color: white;
        transition: all .5s;
    }

        .apptBtn button:hover {
            border: 1px solid #ff7421;
            background: #ffffff;
            color: #ff7421;
        }

@media (max-width: 768px) {
    .parentRight {
        margin-top: 25px;
        padding: 0 !important;
    }

    .pm-0 {
        padding: 10px !important;
    }
}

@media(max-width: 992px) {
    .profReg .appointment {
        margin-top: 20px;
    }
}

.downArrRel {
    position: relative;
}

    .downArrRel i {
        position: absolute;
        right: 26px;
        top: 16px;
    }

.language-checkbox-list {
    border: 1px solid;
    padding: 10px;
}

.owl-dots {
    text-align: center; /* Set the color for inactive dots */
    margin-right: 145px;
}

.owl-theme .owl-dots .owl-dot span {
    width: 10px;
    height: 10px;
    margin: 5px 7px;
    background: #ff7421;
    display: block;
    transition: opacity .2s ease;
    border-radius: 30px;
}

.owl-theme .owl-dots .owl-dot.active span {
    outline: 1px solid #ff7421 !important;
    outline-offset: 5px;
}

.owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev {
    font-size: 30px !important;

    color: #ff7421 !important;

}

body {
    overflow-x: hidden;
}

.owl-nav {
    position: relative;
}

.owl-carousel .owl-nav button.owl-next {
    position: absolute;
    right: 11%;
}

.print-print-btn {
    border: 1px solid #000 !important;
    background: #ff7421;
    color: white;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 400;
    padding: 10px;
    width: 160px;
    text-align: center;
    margin: 0 10px;
    border: white !important;
}

    .print-print-btn:hover {
        background: #ff9c57;
        color: #ffffff;
    }

.cancel-print-btn {
    border: 1px solid #000 !important;
    background: #FFF;
    color: black;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 400;
    padding: 10px;
    width: 160px;
    text-align: center;
    margin: 0 10px;
}

    .cancel-print-btn:hover {
        border: none !important;
        background: #A9A9A9;
        color: #ffffff;
    }

.close-print-btn {
    border: 1px solid #000 !important;
    background: #FFF;
    color: black;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 400;
    padding: 10px;
    width: 160px;
    text-align: center;
    margin: 0 10px;
}

    .close-print-btn:hover {
        border: none !important;
        background: #A9A9A9;
        color: white;
    }

.extend-trial-button {
    font-size: 14px !important; 

}

#languageCheckboxList {
    border: 1px solid #ccc;
    padding: 10px;
    max-height: 200px;
    overflow-y: auto;
}

#otherLanguageInput {
    margin-top: 10px;
}

.otp-verification {
    align-items: center!important;
}


@media(max-width: 1024px) {
    .otp-verification {
        flex-wrap: wrap;
    }
    .otp-verification label{
        margin-bottom: 15px;
    }
        .otp-verification .mx-3 input {
            margin-left: 35px;
        }
}

@media(max-width: 768px) and (min-width: 540px) {
    .otp-verification .mx-3 input {
        margin-left: 0;
    }
}

@media(max-width: 575px){
    .otp-verification {
        margin-bottom: 20px;
    }
}

.btn-close cross :focus {
    box-shadow: none;
    /*color: white;*/
}

.card-body .presc elements .card-text {
    margin-bottom: 5px; /* Adjust this value as needed */
}

.height400 {
    height: 400px;
    overflow-y: scroll;
}

.view-patients {
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-top: 14px;
    background-color: white;
    border-radius: 15px;
    /*padding: 20px;*/
    /*margin: 5px;*/
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 5px;
    margin-bottom: 5px;
}


.card-Shadow {
    box-shadow: rgba(0, 0, 0, 0.30) 0px 1px 6px;
}

.big-checkbox {
    width: 15px;
    height: 15px;
}
.widthFor74{
    width: 74% !important;
}
@media(max-width: 768px){
    .widthFor74 {
        width: 100% !important;
    }
}









/*subscription plans page css*/

.subscription-plans {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 20px;
}

.plan {
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin: 10px;
    padding: 20px;
    width: 100%;
    max-width: 300px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s;
}

    .plan:hover {
        transform: translateY(-10px);
    }

    .plan h2 {
        font-size: 1.5em;
        margin-bottom: 10px;
    }

    .plan p {
        font-size: 1.2em;
        margin-bottom: 20px;
        color: #333;
    }

    .plan ul {
        list-style: none;
        margin-bottom: 20px;
        padding-left: 0 !important;
    }

        .plan ul li {
            margin: 10px 0;
            font-size: 1em;
            color: #555;
        }

    .plan button {
        padding: 10px 20px;
        font-size: 1em;
        color: white;
        background-color: #007bff;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.2s;
    }

        .plan button:hover {
            background-color: #0056b3;
        }

@media (min-width: 600px) {
    .plan {
        width: calc(50% - 40px);
    }
}

@media (min-width: 900px) {
    .plan {
        width: calc(33.333% - 40px);
    }
}

.patients-page {
    margin-right: 20px;
    background-color: white;
    border-radius: 15px;
    padding: 20px;
    margin-left: 5px;
    margin-top: 5px;
    margin-bottom: 5px;

}


/* print.css */

/* General print styles */
@media print {
    body {
        font-size: 12px; /* Adjust font size for better readability */
        margin: 0; /* Remove default margins */
        padding: 0;
    }

    .d-flex {
        display: block; /* Adjust flexbox layouts for print */
    }

    .printBtnsss {
        display: none; /* Hide print buttons on the printed page */
    }

    /* Adjust margins and paddings */
    .content-wrapper {
        margin: 10px;
        padding: 10px;
    }

    /* Scale down images if necessary */
    img {
        max-width: 100%;
        height: auto;
    }

    /* Ensure that tables fit within the page */
    table {
        width: 100%;
        table-layout: auto;
    }

    /* Handle page breaks for long content */
    .page-break {
        page-break-before: always;
    }
}

.submit2 .SubmitBtn2 {
    border: 1px solid #000;
    background: #FFF;
    color: #000;
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    font-weight: 400;
    padding: 10px 30px;
    width: 200px;
}

.submit2 .SubmitBtn:hover {
    color: white;
    background: #A9A9A9;
    border: none;
}

.container1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 20px 0;
}

.header1 {
    margin-bottom: 20px;
}

.calendar1 {
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-button1 {
    background: none;
    border: none;
    font-size: 1.5em;
    cursor: pointer;
    align-self: self-start;
    padding-top: 20px;
}


.week1 {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-height: 458px; /* Adjust this height as needed */
    overflow-y: auto;
    border: 2px solid #ccc; /* Add border */
    border-radius: 8px; /* Optional: add rounded corners */
    /*padding: 10px;*/ /* Optional: add padding inside the border */
    box-sizing: border-box; /* Ensure padding doesn't affect the total width */
    margin: 0 10px; /* Optional: add margin to separate from the navigation buttons */
}

.day1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    flex: 1;

}

.day-name1, .day-date1 {
    font-weight: bold;
    position: sticky;
    top: 0;
}

.time-slots1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 10px;
    
}

.slot1 {
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 20px;
    padding: 10px 20px;
    margin: 5px 0;
    cursor: pointer;
    transition: background-color 0.3s;
}

    .slot1:hover {
        background-color: #e0e0e0;
    }


/*.slot2 {
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 20px;
    padding: 10px 20px;
    margin: 5px 0;
    cursor: not-allowed;
    transition: background-color 0.3s;
}

    .slot2:hover {
        background-color: #e0e0e0;
    }

.booked-slot {
    background-color: #d3d3d3;
    color: #999;*/
    /*cursor: not-allowed;*/
    /*cursor: pointer;
}*/

.slot2 {
    background-color: #efefef;
    border: 1px solid #ccc;
    border-radius: 20px;
    padding: 10px;
    margin: 5px 0;
    cursor: not-allowed; /* Slots are not clickable by default */
    transition: background-color 0.3s;
    color: black;
    width: 106px;
    font-size: 13px;
}

.booked-slot {
    /*background-color: #d3d3d3;
    color: #333;*/ /* Make the text darker for better visibility */
    background-color: #ff7421; /* Green for completed */

    color: #fff;
    cursor: pointer; /* Make booked slots clickable */
}

.slot2.booked-slot:hover {
    /*background-color: #b3b3b3; /* Change the hover effect for booked slots */
    background-color: #e87a39;
}

/*.slot2.disabled-cursor {
    cursor: not-allowed;
    pointer-events: none;
}*/

.footer1 {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-top: 20px;
}



/*.back-button, .book-button {
    background-color: black;
    border: none;
    border-radius: 20px;
    padding: 10px 20px;
    color: white;
    cursor: pointer;
    transition: background-color 0.3s;
}
*/
/* Fixed position for the book-button */
.book-button {
    position: fixed;
    right: 70px;
    bottom: 200px;
    background-color: black;
    border: none;
    border-radius: 20px;
    padding: 10px 20px;
    color: white;
    cursor: pointer;
    transition: background-color 0.3s;
    z-index: 1001; /* Ensure it stays above the footer */
}
    .back-button:hover, .book-button:hover {
        background-color: #8a9cae;
    }

.book-button1 {
    background-color: black;
    border: none;
    border-radius: 20px;
    padding: 10px 20px;
    color: white;
    cursor: pointer;
    transition: background-color 0.3s;
}

    .back-button:hover, .book-button:hover {
        background-color: #8a9cae;
    }

.cancel-button1 {
    background-color: #616161;
    border: none;
    border-radius: 20px;
    padding: 10px 20px;
    color: white;
    cursor: pointer;
    transition: background-color 0.3s;
}

.back-button:hover, .book-button:hover {
    background-color: #8a9cae;
}



.hidden-slots {
    display: none;
    flex-direction: column;
    align-items: center;
    width: 100%; /* Ensure hidden slots container aligns with parent */
    /*margin-left: 25px;*/
}

    /* Adjust the slot container for alignment */
    .hidden-slots .slot1 {
        margin-top: 5px;
    }



.slot1.selected {
    background-color: #333;
    color: white;
}

/*.nav-row1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
*/
/*.nav-button1 {
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    padding: 10px;
    cursor: pointer;
}*/

/*.week1 {
    display: flex;
    flex-grow: 1;
    justify-content: space-around;
}

.day1 {
    display: flex;
    flex-direction: column;
    align-items: center;
}*/

.day-name1, .day-date1 {
    margin-bottom: 5px;
}

/*.time-slots1 {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.slot1 {
    background-color: #e0e0e0;
    border: 1px solid #ccc;
    padding: 5px 10px;
    margin: 2px 0;
    cursor: pointer;
}*/

.more-button {
    background-color: #d0d0d0;
    border: 1px solid #bbb;
    padding: 5px 10px;
    cursor: pointer;
}

.book-appointment-button {
    cursor: pointer;
    border-radius: 20px;
    background-color: black;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 25px;
    padding-right: 25px;
    margin-top: 5px;
    color: white;
    width: max-content;
}

.book-appointment-button button {
    color: white;
}

.book-appointment-button:hover button {
    color: black;
}

.book-appointment-button:hover {
    border: 1px black solid;
    background-color: white;
    color: black;
}

.week-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 90%;
}

/*.week-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    flex: 1;
}*/

h1 {
    font-size: 24px;
    margin-bottom: 20px;
}

.container10 {
    text-align: center;
}

.locations {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Responsive column sizing */
    gap: 20px;
    margin-bottom: 40px;
    justify-content: center;
}

.location-card {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    width: 100%; /* Adjust width to take full space available */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    justify-self: center;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s;
}

    .location-card:hover {
        transform: scale(1.05); /* Scale up the card on hover */
    }

    .location-card h2 {
        font-size: 20px;
        margin-bottom: 10px;
    }

    .location-card p {
        font-size: 16px;
        margin-bottom: 20px;
        color: #666;
    }

/*.date {
    display: flex;
    align-items: center;
    font-size: 16px;
    color: #666;
}

.icon {
    margin-right: 10px;
}

.contact-info {
    font-size: 16px;
    color: #333;
}

    .contact-info p {
        margin: 5px 0;
    }

.phone {
    font-size: 18px;
    font-weight: bold;
}
*/


/*.modal5 {
    display: none;*/ /* Hidden by default */
    /*position: fixed;*/ /* Stay in place */
    /*z-index: 1;*/ /* Sit on top */
    /*left: 0;
    top: 0;
    width: 100%;*/ /* Full width */
    /*height: 100%;*/ /* Full height */
    /*overflow: auto;*/ /* Enable scroll if needed */
    /*background-color: rgb(0,0,0);*/ /* Fallback color */
    /*background-color: rgba(0,0,0,0.4);*/ /* Black w/ opacity */
/*}

.modal5-content5 {
    background-color: #fefefe;
    margin: 15% auto;*/ /* 15% from the top and centered */
    /*padding: 20px;
    border: 1px solid #888;
    width: 80%;*/ /* Could be more or less, depending on screen size */
/*}

.close5 {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

    .close5:hover,
    .close5:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }*/


.modal5 {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.modal5-content5 {
    background-color: #fefefe;
    margin: 5% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
}

.close5 {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

    .close5:hover,
    .close5:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }


.completed-slot {
    /*background-color: #ff7421;*/ /* Green for completed */

    /*color: #fff;*/
    background-color: #d3d3d3;
    color: #333; /* Make the text darker for better visibility */
    cursor: not-allowed; /* Non-clickable */
}

.slot2.completed-slot:hover {
    background-color: #b3b3b3;
}

#appointmentStatus {
    padding: 4px;
    font-weight: 600;
}
#submitStatus:disabled, #refundButton:disabled {
    border: 1px solid grey;
    color: black;
    background-color: lightgray;
    font-family: 'Poppins', sans-serif;
    cursor: not-allowed;
}
#submitStatus, #refundButton {
    padding: 10px;
    background: #ff7421;
    color: white;
    border: none;
    width: 100px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
}

#submitStatus:hover {
    background: #ff9c57;
    color: #ffffff;
}

.calendar1 button {
    font-family: 'Poppins', sans-serif;
}
#cancellationReasonContainer textarea {
    overflow: hidden;
    resize: none;
}

@media (max-width: 575px) {
    #showMobile {
        display: block !important;
    }
    #showDesktop {
        display: none
    }
}

#showMobile {
    display: none;
}

#dynamic-allergyTable tr th {
    font-size: 15px;
}

#dynamic-allergyTable .plusBtn i, .minusBtn i{
    font-size: 16px;
}

@media (max-width: 767.98px) {
    .hide-on-mobile {
        display: none !important;
    }
}

/* Apply a custom font to all form elements */
form {
    font-family: "Poppins", sans-serif; /* Replace "Arial" with your preferred font */
}

.poppins-font {
    font-family: "Poppins", sans-serif; /* Replace "Arial" with your preferred font */
}

@media (max-width: 575px) {

    .ehr-action-btn {
        padding: 10px !important;
        font-size: 12px !important;
    }
}

.ehr-button-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.ehr-action-btn {
    padding: 10px 20px;
    background-color: white;
    color: black;
    border: 1px solid black;
    border-radius: 0;
    text-align: center;
    transition: background-color 0.3s, color 0.3s;
    white-space: nowrap; /* Prevents text from wrapping to the next line */
}

    .ehr-action-btn:hover {
        background-color: black;
        color: white;
    }

    .ehr-action-btn:disabled {
        background-color: #555555;
        color: white;
        cursor: not-allowed !important;
    }

.checkmark-on-document {
    font-size: 1.5rem; /* Icon size */
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px; /* Fixed width */
    height: 30px; /* Fixed height */
    background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent background */
    border-radius: 20%; /* Make it circular */
    padding: 5px; /* Add some padding around the icon */
    border: 2px solid rgba(0, 0, 0, 0.1); /* Light border for contrast */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Subtle shadow effect */
    display: flex !important; /* Center icon inside */
    align-items: center; /* Center vertically */
    justify-content: center; /* Center horizontally */
}

.ehr-d-none {
    display: none !important;
}

.add-patient-button:disabled {
    cursor: not-allowed;
}


@media screen and (max-width: 768px) {
    .long-text {
        word-wrap: break-word;
        word-break: break-word;
        overflow-wrap: break-word;
    }

    .flexwrap  {
        flex-wrap: wrap;
    }

    .flexwrap #v-pills-tabContent {
        width: inherit;
    }
}

/* Hide mobile view by default (for larger screens) */
.mobile-view {
    display: none;
}

/* PC view is visible by default */
.pc-view {
    display: block;
}

/* When the screen width is 768px or less (mobile), show mobile view and hide PC view */
@media (max-width: 768px) {
    .mobile-view {
        display: block;
    }

    .pc-view {
        display: none;
    }
}




/* Default: Show PC view and hide mobile view */
.mobile-view {
    display: none;
}

.pc-view {
    display: block;
}

/* On screens smaller than 768px, show mobile view and hide PC view */
@media (max-width: 768px) {
    .mobile-view {
        display: block;
    }

    .pc-view {
        display: none;
    }

    /* Additional styles for card format on mobile */
    .prescription-card {
        margin-bottom: 1rem;
    }

    .prescription-card .card-body {
        padding: 1.25rem;
    }

    .prescription-card .card-title {
        font-weight: bold;
        font-size: 1.2rem;
    }

    .prescription-card .card-text {
        margin-top: 0.5rem;
        font-size: 1rem;
    }

    .patient-details {
        display: block !important;
    }
}


/* Default mobile view styles */
@media (max-width: 768px) {
    .prescription-card .prescriptionInstruction {
        width: 100%; /* Ensures the text box takes the full width of the card */
        min-height: 80px; /* Minimum height for the text box */
        resize: vertical; /* Allow vertical resizing */
    }

    /* If you want to limit the maximum width on mobile */
    .prescription-card {
        max-width: 100%; /* Ensure the card fits the mobile screen */
    }

        .prescription-card .card-body {
            padding: 1.25rem; /* Padding for the card body */
        }

        .prescription-card .card-title {
            font-weight: bold;
            font-size: 1.2rem;
        }

        .prescription-card .card-text {
            margin-top: 0.5rem;
            font-size: 1rem;
        }
}

.print-prescription-card {
    border: 1px solid #ddd;
    /*padding: 15px;
    margin-bottom: 20px;*/
    max-width: 100%;
    page-break-inside: avoid;
}

.print-prescription-card-title {
    font-size: 1.25rem;
    font-weight: bold;
}

#startDateInput, #endDateInput {
    padding: 8px 10px !important;
    font-size: 14px !important;
}

@media (max-width: 575px) {
    .get-slots-search-input-box {
        display: block !important;
    }

    #startDateInput, #endDateInput {
        padding: 8px !important;
        font-size: 12px !important;
    }
}

.cancel-booking {
    transition: all 0.3s ease;
    border: 1px black solid;
    border-radius: 0;
    font-size: 14px;
}

.cancel-booking:hover {
    border: none;
    background : #A9A9A9;
    color: white;

}

.confirm-booking {
    background: #ff7421;
    border: 1px solid #ff7421;
    color: white;
}

.confirm-booking:hover {
    border: none;
    background : #ff9c57;
    color: white;
}

.referral-input-group select.referralform-select {
    border-right: 0;
}

.referral-input-group {
    display: flex;
    flex-wrap: nowrap;
    margin-bottom: 0px;
}

@media (max-width: 768px) {
    .referral-input-group select.referral-form-select {
        margin-bottom: 0px;
    }

    .referral-input-group input {
        margin-bottom: 0px;
    }
}

@media (max-width: 576px) {
    .referral-input-group {
        display: flex;
        flex-wrap: nowrap;
        margin-bottom: 0px;
    }

        .referral-input-group select.referral-form-select {
            padding-right: 0.5rem;
            padding-left: 0.5rem;
            margin-bottom: 0px;
        }
        .hero-image{
            height: 300px;
        }
}
.ImgFileBox{
    width: 150px;
    height: 150px;
    border: 1px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
}
.attachment-container .fa-times-circle{
    background: white;
    border-radius: 50%;
}
.cancelAbs{
    top: -5px;
    right: -5px;
}