@charset "utf-8";
:root {
    --font-black-color: #000000;
    /*--input-border: #c0c0c0;*/
    --input-border: #bfcbd9;
    --main-green-color: #1bc5bd;
    --main-blue-color: #0069ff;
    --second-blue-color: #1b78c5;
    --light-blue-background: #f3f6f9;
    --light-gree-background: #DDF1EF;
    --main-section-bg: #eef0f8;
    --label-color: #70757a;
}

.kt-quick-panel--on {
    overflow: hidden;
}

.kt-aside .kt-aside-menu {
    margin: 0 !important;
}

/* Login-Page */
.limiter {
    width: 100%;
    margin: 0 auto;
}

.container-login100 {
    width: 100%;
    min-height: 100vh;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 15px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.wrap-login100 {
    width: 500px;
    padding: 55px;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
}

.login100-form {
    width: 100%;
}

.login100-form-title {
    display: block;
    font-family: "Heebo", Helvetica, Arial, sans-serif;
    font-size: 39px;
    padding-bottom: 40px;
    color: #333;
    line-height: 1.2;
    text-align: center;
}

.login100-form-title img {
    width: 80%;
}

.validate-input {
    position: relative;
}

.m-b-23 {
    margin-bottom: 23px;
}

.wrap-input100 {
    width: 100%;
    position: relative;
    border-bottom: 2px solid #d9d9d9;
}

.label-input100 {
    font-size: 14px;
    color: #0a0a0a;
    line-height: 1.5;
    padding-left: 7px;
}

.input100 {
    font-size: 16px;
    color: #333;
    line-height: 1.2;
    display: block;
    width: 100%;
    height: 55px;
    background: 0 0;
    padding: 0 7px 0 43px;
    border: none;
}

.focus-input100::before {
    content: "";
    display: block;
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: #7f7f7f;
    -webkit-transition: all .4s;
    -o-transition: all .4s;
    -moz-transition: all .4s;
    transition: all .4s;
}

.focus-input100::after {
    content: attr(data-symbol);
    font-family: "LineAwesome";
    color: #adadad;
    font-size: 22px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    height: calc(100% - 20px);
    bottom: 0;
    left: 0;
    padding-left: 13px;
    padding-top: 3px;
}

.p-b-31 {
    padding-bottom: 31px;
}

.p-t-8 {
    padding-top: 8px;
}

.container-login100-form-btn {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.wrap-login100-form-btn {
    width: 100%;
    display: block;
    position: relative;
    z-index: 1;
    border-radius: 25px;
    overflow: hidden;
    margin: 0 auto;
    box-shadow: 0 5px 30px 0 rgba(3, 216, 222, .2);
    -moz-box-shadow: 0 5px 30px 0 rgba(3, 216, 222, .2);
    -webkit-box-shadow: 0 5px 30px 0 rgba(3, 216, 222, .2);
    -o-box-shadow: 0 5px 30px 0 rgba(3, 216, 222, .2);
    -ms-box-shadow: 0 5px 30px 0 rgba(3, 216, 222, .2);
}

.login100-form-bgbtn {
    position: absolute;
    z-index: -1;
    width: 300%;
    height: 100%;
    background: #0BA9DE;
    background: -webkit-linear-gradient(right, #235193, #75bbd4, var(--main-green-color), #208eb3);
    background: -o-linear-gradient(right, #235193, #75bbd4, var(--main-green-color), #208eb3);
    background: -moz-linear-gradient(right, #235193, #75bbd4, var(--main-green-color), #208eb3);
    background: linear-gradient(right, #235193, #75bbd4, var(--main-green-color), #208eb3);
    top: 0;
    left: -100%;
    -webkit-transition: all .4s;
    -o-transition: all .4s;
    -moz-transition: all .4s;
    transition: all .4s;
}

.login100-form-btn {
    font-size: 16px;
    color: #fff;
    line-height: 1.2;
    text-transform: uppercase;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
    width: 100%;
    height: 50px;
    border: 0px;
    background: none;
}

.wrap-input100 textarea:focus,
.wrap-input100 input:focus {
    border-color: transparent !important;
    outline: 0;
}

.input100:focus + .focus-input100::before {
    width: 100%;
}

.input100:focus + .focus-input100::after {
    color: var(--main-green-color);
}

.wrap-login100 a {
    color: #59b8b2;
    font-weight: 500;
}

.symbol {
    font-size: 1rem;
    font-weight: 600;
    padding-right: 3px;
}

/*.kt-aside__brand {*/
/*    background-color: var(--main-green-color) !important;*/
/*}*/

.sign-out-flip {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}

.my-portlet {
    box-shadow: 0px 1px 15px 1px rgba(69, 65, 78, 0.08) !important;
    margin-bottom: 0px !important;
}

.my-portlet .kt-portlet__head {
    min-height: 35px !important;
    border-bottom: none !important;
}

.my-portlet .kt-portlet__head-label {
    visibility: hidden;
}

.my-portlet .kt-portlet__head .kt-portlet__head-label .kt-portlet__head-icon {
    color: #fff !important;
}

.my-portlet .kt-portlet__head .kt-portlet__head-label .kt-portlet__head-title {
    color: var(--main-green-color) !important;
    font-size: 1.25rem !important;
}

.my-portlet .kt-portlet__head .kt-portlet__head-toolbar {
    align-items: center !important;
}

.my-portlet .kt-portlet__head-toolbar .kt-portlet__head-actions a i {
    color: var(--main-green-color);
    font-size: 2rem !important;
}

.my-portlet .kt-portlet__head-toolbar .kt-portlet__head-actions a:hover i {
    color: var(--main-green-color);
}

.my-label {
    font-weight: 500;
    font-size: 0.90rem !important;
    color: var(--label-color);
    margin-bottom: 0.3rem;
}

.my-mb-10 {
    margin-bottom: 10px;
}

.vital-sign {
    padding: 6px 0px;
    display: inline-block;
    font-size: 1.10rem !important;
}

.vital-sign-icon {
    padding-right: 5px;
}

.temperature-btn {
    color: #212529 !important;
    background-color: #ebedf2 !important;
    border-color: #ebedf2 !important;
    opacity: 1 !important;
    padding: 0.50rem 1rem !important;
}

.vital-sign-icon .kt-svg-icon {
    width: 35px;
    height: 35px;
    /*    background: var(--main-green-color);*/
    padding: 3px;
    border: 1px solid var(--main-green-color);
}

.vital-sign-icon .kt-svg-icon g [fill] {
    fill: var(--main-green-color);
}

.b-icon {
    /*padding: 5px 0px 0px;*/
    text-align: center;
    /* display: block; */
    vertical-align: middle;
    font-size: 1.30rem;
    color: var(--second-blue-color);
}

.m-custom-select {
    width: auto !important;
    display: unset !important;
    margin-right: 8px;
}

.my-tab li:first-child {
    border-left: 1px solid var(--main-green-color);
    border-top-left-radius: 0.2rem;
    border-bottom-left-radius: 0.2rem;
}

.my-tab li:last-child {
    border-top-right-radius: 0.2rem;
    border-bottom-right-radius: 0.2rem;
}

.my-tab li a {
    border-bottom: none !important;
}

.my-tab li:hover a,
.my-tab li:hover a i {
    color: var(--main-green-color) !important;
}

.tab-bg {
    background-color: var(--main-green-color);
}

.my-tab-head {
    min-height: 32px !important;
    padding: 0px 10px !important;
}

.my-tab li a.active,
.my-tab li a.active i {
    border-bottom: none !important;
    color: #ffffff !important;
}

.my-tab li:hover a {
    border-bottom: none !important;
}

.my-tab .nav-item {
    margin-right: 0px !important;
    border: 1px solid var(--main-green-color);
    padding: 0px 5px;
}

@media (max-width: 767px) {
    .my-tab li {
        width: 100%;
        display: block;
    }
}

.my-portlet-tab {
    padding: 10px 10px !important;
}

.my-tab li a {
    font-size: 1rem !important;
    padding: 6px 0px !important;
}

.my-md {
    padding-right: 15px;
    padding-left: 15px;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
}

.referredBy {
    width: 49% !important;
}

@media (max-width: 1200px) {
    .my-md {
        -ms-flex: 0 0 33%;
        flex: 0 0 33%;
        max-width: 33%;
    }
}

@media (max-width: 767px) {
    .my-md {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}

.bmi-label {
    text-align: left;
    display: block;
    padding-top: 5px;
    font-weight: 500;
}

.m-portlet {
    -webkit-box-shadow: 0px 1px 15px 1px rgba(69, 65, 78, 0.08);
    box-shadow: 0px 1px 15px 1px rgba(69, 65, 78, 0.08);
    background-color: #fff;
    border-radius: 3px;
}

.m-history-box .m-portlet .m-portlet__head {
    background-color: #3A6788;
    border-color: #3A6788;
    height: 3rem;
}

.m-portlet .m-portlet__head {
    border-bottom: 1px solid #ebedf2;
}

.m-portlet .m-portlet__head {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 0;
    padding: 0 1rem;
    height: 3rem;
    position: relative;
}

.m-portlet .m-portlet__head .m-portlet__head-caption {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-line-pack: start;
    align-content: flex-start;
}

.m-portlet .m-portlet__head .m-portlet__head-caption .m-portlet__head-title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.m-portlet .m-portlet__head .m-portlet__head-caption .m-portlet__head-title .m-portlet__head-text {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 1.40rem;
    font-weight: 400;
    font-family: Roboto, "Segoe UI", Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
}

.m-portlet.m-portlet--success.m-portlet--head-solid-bg .m-portlet__head .m-portlet__head-text {
    color: #fff;
}

.m-portlet .m-portlet__body {
    padding: 1rem 1rem;
}

.m-demo {
    background: #f7f7fa;
    margin-bottom: 20px;
}

.clinical-note-btn {
    background: white;
    border: 3px solid #f7f7fa;
    padding: 8px 5px;
    text-align: center;
}

.c-note-btn, .investigation-az-filter {
    padding: 0.4rem 0rem !important;
    height: 30px;
    width: 30px;
    margin: 0px 3.30px;
    border: 1px solid var(--main-green-color) !important;
    color: #6c7293 !important;
    font-weight: 500 !important;
    line-height: 16px !important;
}

.my-custom-acc {
    padding-right: 10px;
}

.note-select,
.investigation-az-filter.active,
.c-note-btn:hover,
.investigation-az-filter:hover {
    background-color: var(--main-green-color) !important;
    color: #fff !important;
}

.clinical-radio {
    padding-left: 25px !important;
}

.clinical-note-custom-scroll {
    /*height: 320px;*/
    overflow: auto;
}

.clicnical-note-body-scroll {
    min-height: 300px;
}

.clinical-note-inner-body {
    overflow: auto;
    height: 100% !important;
    background-color: #f7f8fa !important;
    border: 2px solid #fff !important;
    color: #3F4254 !important;
    padding: 0.50rem 1rem !important;
}

.clinical-followup-note {
    overflow: auto;
    height: 26% !important;
    background-color: #f7f8fa !important;
    border: 2px solid #fff !important;
    color: #3F4254 !important;
    padding: 0.50rem 1rem !important;
}

.diagnosis-custom-scroll {
    height: 280px;
    overflow: auto;
    padding-right: 10px;
}

.investigation-custom-scroll {
    height: 340px;
    overflow: auto;
    padding-right: 10px;
}

.diagnosis-body-scroll,
.investigation-body-scroll {
    min-height: 312px;
}

.diagnosis-inner-body-scroll,
.investigation-inner-body-scroll {
    overflow: auto;
    min-height: 165px;
    /*padding-right: 15px;*/
    margin-bottom: 10px;
    overflow-x: hidden;
}

.diagnosis-change-btn {
    margin-right: 12px !important;
    border-bottom: 3px solid transparent;
}

.investigation-div .my-label {
    color: #ffffff;
}

.diagnosis-div .form-control:focus,
.investigation-div .form-control:focus {
    border: none;
}

.investigation-div .select2-selection__rendered {
    height: 150px;
    overflow: auto !important;
}

.template-investigation-select .select2-selection__rendered {
    height: 87px;
    overflow: auto !important;
}

.investigation-div .select2-container--default.select2-container--focus .select2-selection--multiple {
    border: none !important;
}

.investigation-div .select2-selection__choice {
    color: #ffffff !important;
    background: var(--main-green-color) !important;
    border: 1px solid #ffffff !important;
    border-radius: 0 !important;
}

.investigation-div .select2-selection__choice__remove {
    color: #ffffff !important;
}

.d-active {
    border-bottom: 3px solid #ffffff;
    font-weight: 500 !important;
}

.prescription-body-scroll {
    /*height: 498px;*/
}

.prescription-inner-body-scroll {
    /*height: 330px;*/
    min-height: 305px;
    /*overflow: auto;*/
    /*padding-right: 10px;*/
}

.prescription-separator.kt-section--space-sm {
    margin: 10px 0;
}

.billing-scroll {
    overflow: auto;
    height: 170px
}

.s-arrow {
    font-size: 12px;
    position: unset !important;
    background: none !important;
}

.s-arrow:after {
    content: none !important;
}

.my-widget-portlet {
    background-color: var(--main-green-color) !important;
}

.m-portlet .m-portlet__head {
    border-bottom: 1px solid #ebedf2;
}

.my-widget-portlet .m-portlet__head .m-portlet__head-text {
    color: #ffffff;
}

.m-widget2 .m-widget2__item {
    /*disply: table;*/
    margin-bottom: 0.30rem;
    position: relative;
    padding: 0.5rem;
    background: #ffffff;
    border-radius: 0.2rem;
}

/*.my-widget2_checkbox-success:before {*/
/*    background: #ffffff !important;*/
/*}*/

.clinical-note-button i {
    font-size: 1.10rem;
}

/*.m-widget2 .m-widget2__item:before {*/
/*    position: absolute;*/
/*    display: block;*/
/*    width: 0.3rem;*/
/*    border-radius: 4px;*/
/*    width: 4px;*/
/*    height: 100%;*/
/*    content: "";*/
/*}*/

.my-widget2_checkbox {
    display: table-cell;
    /*vertical-align: middle !important;*/
    /*padding-left: 0.80rem !important;*/
    /*padding-top: 0px !important;*/
    /*padding-right: 0.60rem !important;*/
}

/* `padding-bottom: 4px !important` removed 2026-08-17 — it followed `padding: 0` purely as a
   nudge, and left a 4px gap under every icon button once these controls moved onto v2 rows. */
.clinical-note-button {
    background: none !important;
    color: var(--main-green-color) !important;
    padding: 0px !important;
}

.m-widget2 .m-widget2__item .m-widget2__desc {
    display: table-cell;
    width: 100%;
    /* vertical-align: middle; */
    font-size: 1rem;
}

.mytitle {
    font-size: 1.05rem;
    font-weight: 600;
    color: #3F4254;
}

.my-time-time {
    font-size: 1.06rem;
    font-weight: 500;
    color: #fff;
    padding-right: 5px;
}

.my-desc {
    color: #ffffff;
    font-size: 1rem;
    /* font-weight: 500;*/
}

.diagnosis-search {
    margin-bottom: 10px;
}

.m-demo {
    background: #f7f7fa;
    margin-bottom: 10px;
}

.m-demo .m-demo__preview {
    background: white;
    border: 4px solid #f7f7fa;
    padding: 10px;
}

.diagnosis-btn .btn, .investigation-content .investigation-item {
    margin-bottom: 10px !important;
    border-color: #e6e5e5;
    padding: 0.50rem;
    color: #3a4045;
    background-color: #e6e5e5;
    font-weight: 500;
}

.investigation-content .investigation-btn-container.selected-border,
#diagnosis-content .diagnosis-name.selected-border {
    border: 2px solid var(--main-green-color);
}

#diagnosis-content .diagnosis-template.selected-border {
    border: 2px solid var(--second-blue-color);
}

.investigation-content .investigation-item.active {
    background: rgba(27, 197, 189, 0.2);
    color: var(--main-green-color) !important;
    border-color: transparent;
}

.investigation-btn-container {
    margin-bottom: 5px !important;
}

.investigation-btn-container.active .investigation-more-action-btn {
    background: rgba(27, 197, 189, 0.2);
    color: var(--main-green-color);
}

.my_m-widget4__ext button i {
    vertical-align: unset;
    padding-right: 5px;
}

.m-demo .m-demo__preview.m-demo__preview--btn .btn {
    margin-right: 5px;
    margin-bottom: 15px;
}

.add-investigation-btn {
    margin-bottom: 10px;
    float: right;
    font-size: 1.2rem;
    font-weight: 500;
}

.my_m-widget4__ext {
    display: table-cell;
    /*vertical-align: middle;*/
}

.my_m-widget4__ext button {
    font-size: 1rem;
    font-weight: 500;
    width: 90px;
    padding: .30rem .3rem;
}

.my-btn-design {
    color: #fff !important;
    background-color: #017aa9 !important;
    border-color: #017aa9 !important;
    padding: 0.3rem !important;
}

.my-touchspin button {
    padding: .58rem 1.10rem;
    margin-bottom: 5px;
}

.my-presc-input {
    display: block;
    height: 40px;
    padding: 0px;
}

.prescription-btn button {
    padding: .60rem 0.40rem !important;
    font-size: 1rem;
    background: white;
    border-color: #ebedf2;
}

.pres-tools li a {
    padding: 4px !important;
}

.m-portlet .m-portlet__head .m-portlet__head-tools {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-line-pack: end;
    align-content: flex-end;
}

.m-portlet .m-portlet__head .m-portlet__head-tools .nav.nav-tabs,
.m-portlet .m-portlet__head .m-portlet__head-tools .nav.nav-pills {
    margin: 0;
}

.prescription-2 .m-widget_content {
    padding: 0.4rem 0.5rem;
    background: #ffffff;
    border-radius: 3px;
}

.prescription-2 .m-widget_content .m-widget_content-items {
    width: 100%;
    display: table;
    table-layout: fixed;
}

.add-btn {
    padding: 0.40rem 1rem !important;
}

.pres-button, .delete-selected-investigation-item {
    color: var(--main-green-color) !important;
    border: none !important;
}

.pres-button i {
    vertical-align: unset !important;
}

.prescription-2 .m-widget_content .m-widget_content-items .m-widget_content-item > span {
    display: block;
    text-align: center;
}

.prescription-2 .m-widget_content .m-widget_content-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: #3F4254;
    display: inline;
    /*padding-left: 5px;*/
}

.prescription-2 .m-widget_content .m-widget_content-items {
    width: 100%;
    display: table;
    table-layout: fixed;
    position: relative;
}

.prescription-2 .m-widget_content .m-widget_content-items .m-widget_content-item {
    display: table-cell;
    border-bottom: 1px solid #d8ddee;
}

.prescription-2 .m-widget_content .m-widget_content-items .m-widget_content-item > span:first-child {
    color: #9699a2;
}

.prescription-2 .m-widget_content .m-widget_content-items .m-widget_content-item > span:first-child {
    font-weight: 600;
    font-size: 1rem;
    margin: .2rem 0 .2rem 0;
    border-bottom: 1px solid #d8ddee;
    padding-bottom: 3px;
    color: #666;
    /*text-align: center;*/
}

.m--font-accent {
    color: #00c5dc !important;
}

.prescription-2 .m-widget_content .m-widget_content-items .m-widget_content-item > span:last-child {
    font-size: 1rem;
    font-weight: 400;
    padding-bottom: 3px;

    /*text-align: center;*/
}

.prescription-2 .m-widget_content .m-widget_content-items .m-widget_content-item > span.valid-till-date {
    transform: translate(0px, 10px);
}

.f-inst {
    font-size: 1rem;
    font-weight: 500;
    color: #9699a2;
    /*padding-left: 8px;*/
}

.m-widget6 .m-widget6__head .m-widget6__item {
    display: table;
    width: 100%;
    font-size: 1rem;
    font-weight: 500;
}

.m-widget6 .m-widget6__item:last-child {
    border-bottom: 0;
}

.m-widget6 .m-widget6__head .m-widget6__item .m-widget6__caption {
    display: table-cell;
    /*width: 97%;*/
    padding-left: 0;
    padding-right: 0;
    /* margin-bottom: 10px; */
}

.billing-box .m-widget6__item .m-widget6__caption {
    color: #ffffff !important;
    font-size: 1.10rem;
}

.m-widget6 .m-widget6__head .m-widget6__item .m-widget6__caption:last-child {
    padding-right: 0;
    padding-left: 0;
}

.m--align-right {
    text-align: right;
}

.m-widget6 .m-widget6__foot .m-widget6__action {
    text-align: right;
    margin-top: 1rem;
}

.billing-label {
    border-top: 1px solid #fff;
    padding-top: 10px;
}

.billing-label label {
    color: #ffffff !important;
    font-size: 1.1rem !important;
    text-align: left;
    display: block;
}

.billing-label input {
    text-align: right;
}

.bill-btn button {
    width: 42px;
    background: #fff;
    padding: 0.55rem 1rem;
    text-align: center;
}

.bill-btn {
    text-align: left;
}

.bill-btn button i {
    color: #6f727d;
}

.bill-select i {
    color: var(--main-green-color) !important;
}

.payment-option {
    margin-top: 15px;
}

.payment-title {
    /* text-align: left; */
    color: #fff;
    font-size: 1.20rem;
    font-weight: 500;
}

.billing-label .kt-radio-inline .kt-radio {
    margin-right: 5px !important;
    display: inline !important;
}

.my-radio-color .kt-radio.kt-radio--solid > input:checked ~ span {
    background: #3A6788 !important;
}

.m-widget6 .m-widget6__body .m-widget6__item .m-widget6__text {
    display: table-cell;
    width: 92%;
    padding-left: 0;
    padding-right: 0;
    vertical-align: middle;
    font-size: 1rem;
}

.m-widget6 .m-widget6__body .m-widget6__item {
    display: table;
    width: 100%;
    position: relative;
    margin: 0px 0px 7px;
}

.m-widget6__body {
    padding-right: 10px;
}

.billing-box .m-widget6__item .m-widget6__text {
    color: #ffffff !important;
}

.my-event {
    position: relative;
    display: block;
    font-size: .85em;
    line-height: 1.3;
    background: #fff;
    border: 1px solid #ebedf2;
    -webkit-box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.055);
    box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.055);
}

.my-event .fc-title {
    font-size: 1rem;
    font-weight: 500;
}

.my-event .fc-title a {
    color: #6c7293;
}

.event-right {
    float: right;
}

.my-event .fc-content {
    padding: 0.70rem 1rem;
}

.advise-btn,
.previous-billing-btn .btn-light {
    color: var(--main-green-color) !important;
    border: 1px solid #fff !important;
    background: #fff !important;
    padding: 0.4rem 0.7rem !important;
}

.advise-btn i {
    color: var(--main-green-color);
    font-size: 1.1rem !important;
}

.bootstrap-select > .dropdown-toggle.btn-light.language-btn {
    color: #fff;
    border: 0;
    padding: 0.4rem 0.60rem;
    border: 1px solid transparent;
}

.bootstrap-select > .dropdown-toggle.btn-light.language-btn:hover,
.bootstrap-select.show > .dropdown-toggle.btn-light.language-btn,
.bootstrap-select > .dropdown-toggle.btn-light.language-btn:focus {
    border: 1px solid #FFFFFF;
}

.custom-panel .kt-quick-panel__content {
    padding: 10px 15px !important;
}

.custom-panel .kt-demo-panel__head {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-bottom: 1px solid #DEE1EB;
    padding: 0.8rem 1rem;
    background: var(--second-blue-color);
    /*background-size: cover;*/
    /*background-position: center;*/
}

.custom-panel .kt-demo-panel__head .kt-demo-panel__title {
    font-size: 1.3rem;
    font-weight: 500;
    color: #ffffff;
    margin: 0;
    padding: 0;
}

.kt-quick-panel .kt-quick-panel__close, .kt-demo-panel__head .btn {
    background-color: #ffffff !important;
}

.kt-quick-panel .kt-quick-panel__close i, .kt-demo-panel__head .btn i {
    color: var(--main-green-color) !important;
}

.kt-quick-panel .kt-quick-panel__close:hover, .kt-demo-panel__head .btn:hover {
    background: var(--main-green-color) !important;
}

.kt-quick-panel .kt-quick-panel__close:hover i, .kt-demo-panel__head .btn:hover i {
    color: #ffffff !important;
}

.kt-demo-panel__head .btn.active {
    background: var(--main-green-color) !important;
}

.kt-demo-panel__head .btn.active i {
    color: #ffffff !important;
}

.custom-panel .kt-demo-panel__head .kt-demo-panel__title span {
    margin-right: 5px;
    font-size: 1.65rem;
}

.custom-panel .kt-demo-panel__head .kt-demo-panel__close {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 28px;
    height: 28px;
    background-color: #f7f8fa;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    border-radius: 4px;
}

.custom-panel .kt-demo-panel__head .kt-demo-panel__close i {
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    font-size: 0.8rem;
    color: #a7abc3;
}

.custom-panel .form-group label {
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 0.2rem;
}

.custom-panel .kt-portlet {
    box-shadow: none;
    margin-bottom: 0px;
}

.custom-panel .kt-portlet .kt-portlet__body {
    padding: 0px;
}

.custom-panel .kt-portlet .kt-portlet__foot {
    padding: 10px 0px 0px;
}

.vaccine-table {
    font-weight: 500;
}

.vaccine-table td {
    color: #3F4254;
}

.vaccine-table .vaccine-form {
    cursor: pointer;
}

.vaccine-table .success-state {
    background: rgba(27, 197, 189, 0.22);
    color: var(--main-green-color);
}

.vaccine-table .pending-state {
    background: rgba(255, 103, 93, 0.22);
    color: #ff675d;
}

.vaccine-table .not-required-state {
    /*background: rgba(238, 162, 0, 0.22);*/
    /*color: #eea200;*/
}

.vaccine-table .upcoming-due-state {
    background: rgba(238, 162, 0, 0.22);
    color: #eea200;
}

.vaccine-table .current-state {
    background: #eea200;
    color: #fff;
}

.table.vaccine-table td {
    padding: 0rem !important;
}

.table.vaccine-table td {
    /*border: none;*/
}

.table.vaccine-table th {
    padding: .5rem .6rem !important;
    background: #F4F5F8;
    font-size: 1.1rem;
    vertical-align: top !important;
    border-bottom: 2px solid var(--main-green-color);
}

.vaccine-cell-detail {
    width: 140px;
    padding: .5rem .6rem !important;
    font-weight: 400;
}

@media (max-width: 991px) {
    .vaccine-table {
        display: block;
        overflow: auto;
        height: 340px;
    }

    .scedule-table,
    .schedule-tab-table {
        display: block;
        overflow: auto;
    }
}

.scedule-table td {
    padding: 0.30rem !important;
    text-align: center;
    vertical-align: middle !important;
    /* font-weight: 400;*/
}

.scedule-table th {
    text-align: center;
}

.my-appointment-btn {
    margin-bottom: 10px;
    text-align: right;
}

#billing-form-open {
    /*width: 1150px !important;
    right: -1155px !important;*/
}

.billing-form-open-custom {
    width: 1050px !important;
    right: 0px !important;
}

.billing-form-close-custom {
    width: 1050px !important;
    right: -1155px !important;
}

.Appointment-status {
    cursor: pointer;
}

/*================= Medical History Timeline ================= */
/* Main Components
-------------------------------- */
.cd-horizontal-timeline {
    opacity: 0;
    /* margin: 0 auto;*/
    -webkit-transition: opacity 0.2s;
    -moz-transition: opacity 0.2s;
    transition: opacity 0.2s;
}

.cd-horizontal-timeline::before {
    /* never visible - this is used in jQuery to check the current MQ */
    content: 'mobile';
    display: none;
}

.cd-horizontal-timeline.loaded {
    /* show the timeline after events position has been set (using JavaScript) */
    opacity: 1;
}

.cd-horizontal-timeline .timeline {
    position: relative;
    height: 65px;
    width: 100%;
    /* max-width: 1000px;*/
    margin: 0 auto;
}

.b-left {
    border-left: 3px solid #E2E5EC;
}

.title {
    color: #ffffff;
    -webkit-print-color-adjust: exact;
    margin: 0px;
    padding: 4px;
    /*background: var(--main-green-color);*/
}

.cd-horizontal-timeline .events-wrapper {
    position: relative;
    height: 100%;
    margin: 0 40px;
    overflow: hidden;
}

.cd-timeline-navigation li {
    list-style: none;
}

.cd-horizontal-timeline .events-wrapper::after,
.cd-horizontal-timeline .events-wrapper::before {
    /* these are used to create a shadow effect at the sides of the timeline */
    content: '';
    position: absolute;
    z-index: 2;
    top: 0;
    height: 100%;
    width: 20px;
}

.cd-horizontal-timeline .events-wrapper::before {
    left: 0;
    height: 26px;
    width: 5px;
    top: 25px;
    background: #e6eaf5;
}

.cd-horizontal-timeline .events-wrapper::after {
    right: 0;
    height: 26px;
    width: 5px;
    top: 25px;
    background: #e6eaf5;
}

.cd-horizontal-timeline .events {
    /* this is the grey line/timeline */
    position: absolute;
    z-index: 1;
    left: 0;
    top: 35px;
    height: 5px;
    /* width will be set using JavaScript */
    background: #E6EAF5;
    -webkit-transition: -webkit-transform 0.4s;
    -moz-transition: -moz-transform 0.4s;
    transition: transform 0.4s;
}

.cd-horizontal-timeline .filling-line {
    /* this is used to create the green line filling the timeline */
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: var(--main-green-color);
    -webkit-transform: scaleX(0);
    -moz-transform: scaleX(0);
    -ms-transform: scaleX(0);
    -o-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -ms-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
    -webkit-transition: -webkit-transform 0.3s;
    -moz-transition: -moz-transform 0.3s;
    transition: transform 0.3s;
}

.cd-horizontal-timeline .events a {
    position: absolute;
    bottom: 0;
    z-index: 2;
    text-align: center;
    font-size: 1.15rem;
    padding-bottom: 15px;
    color: #6c7293;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    font-weight: 500;
}

.cd-horizontal-timeline .events a::after {
    content: '';
    position: absolute;
    left: 50%;
    right: auto;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    bottom: -8px;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    border: 3px solid #dfdfdf;
    background-color: #f8f8f8;
    -webkit-transition: background-color 0.3s, border-color 0.3s;
    -moz-transition: background-color 0.3s, border-color 0.3s;
    transition: background-color 0.3s, border-color 0.3s;
}

.no-touch .cd-horizontal-timeline .events a:hover::after {
    background-color: #7b9d6f;
    border-color: #7b9d6f;
}

.cd-horizontal-timeline .events a.selected {
    pointer-events: none;
}

.cd-horizontal-timeline .events a.selected::after {
    border-color: var(--main-green-color);
}

.cd-horizontal-timeline .events a.older-event::after {
    background-color: var(--main-green-color);
    border-color: #ffffff;
}

@media only screen and (min-width: 1100px) {
    /*.cd-horizontal-timeline {
    margin: 6em auto;
    }*/
    .cd-horizontal-timeline::before {
        /* never visible - this is used in jQuery to check the current MQ */
        content: 'desktop';
    }
}

.cd-timeline-navigation a {
    position: absolute;
    z-index: 1;
    top: 60%;
    bottom: auto;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    color: var(--second-blue-color);
    -webkit-transition: border-color 0.3s;
    -moz-transition: border-color 0.3s;
    transition: border-color 0.3s;
    font-size: 1.70rem;
}

.cd-timeline-navigation a::after {
    /* arrow icon */
    /* content: "\f104";
    font-family: "Font Awesome 5 Free";*/
    position: absolute;
    height: 16px;
    width: 16px;
    left: 50%;
    top: 50%;
    bottom: auto;
    right: auto;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

.cd-timeline-navigation a.prev {
    left: 0;
    /*-webkit-transform: translateY(-50%) rotate(180deg);
  -moz-transform: translateY(-50%) rotate(180deg);
  -ms-transform: translateY(-50%) rotate(180deg);
  -o-transform: translateY(-50%) rotate(180deg);
  transform: translateY(-50%) rotate(180deg);*/
}

.cd-timeline-navigation a.next {
    right: 0;
}

.no-touch .cd-timeline-navigation a:hover {
    border-color: #7b9d6f;
}

.cd-timeline-navigation a.inactive {
    cursor: not-allowed;
}

.cd-timeline-navigation a.inactive::after {
    background-position: 0 -16px;
}

.no-touch .cd-timeline-navigation a.inactive:hover {
    border-color: #dfdfdf;
}

.cd-horizontal-timeline .events-content {
    position: relative;
    width: 100%;
    /*margin: 2em 0;*/
    overflow: hidden;
    -webkit-transition: height 0.4s;
    -moz-transition: height 0.4s;
    transition: height 0.4s;
}

.kt-form__seperator {
    border-top: 1px dashed #ebedf2;
    /*border-top: 1px dashed red;*/
}

.events-content ol {
    padding: 0px;
    margin: 0px;
}

.cd-horizontal-timeline .events-content li {
    position: absolute;
    z-index: 1;
    width: 100%;
    left: 0;
    top: 0;
    list-style: none;
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    transform: translateX(-100%);
    /* padding: 0 2%;*/
    opacity: 0;
    -webkit-animation-duration: 0.4s;
    -moz-animation-duration: 0.4s;
    animation-duration: 0.4s;
    -webkit-animation-timing-function: ease-in-out;
    -moz-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
}

.medical-history-timeline li {
    list-style: none;
}

.cd-horizontal-timeline .events-content li.selected {
    /* visible event content */
    position: relative;
    z-index: 2;
    opacity: 1;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
}

.cd-horizontal-timeline .events-content li.enter-right,
.cd-horizontal-timeline .events-content li.leave-right {
    -webkit-animation-name: cd-enter-right;
    -moz-animation-name: cd-enter-right;
    animation-name: cd-enter-right;
}

.cd-horizontal-timeline .events-content li.enter-left,
.cd-horizontal-timeline .events-content li.leave-left {
    -webkit-animation-name: cd-enter-left;
    -moz-animation-name: cd-enter-left;
    animation-name: cd-enter-left;
}

.cd-horizontal-timeline .events-content li.leave-right,
.cd-horizontal-timeline .events-content li.leave-left {
    -webkit-animation-direction: reverse;
    -moz-animation-direction: reverse;
    animation-direction: reverse;
}

.cd-horizontal-timeline .events-content li > * {
    /* max-width: 800px;*/
    margin: 0 auto;
}

.cd-horizontal-timeline .events-content h2 {
    font-weight: bold;
    font-size: 2.6rem;
    font-family: "Playfair Display", serif;
    font-weight: 700;
    line-height: 1.2;
}

.cd-horizontal-timeline .events-content em {
    display: block;
    font-style: italic;
    margin: 10px auto;
}

.cd-horizontal-timeline .events-content em::before {
    content: '- ';
}

.cd-horizontal-timeline .events-content p {
    font-size: 1.4rem;
    color: #959595;
}

.cd-horizontal-timeline .events-content em,
.cd-horizontal-timeline .events-content p {
    line-height: 1.6;
}

@media only screen and (min-width: 768px) {
    .cd-horizontal-timeline .events-content h2 {
        font-size: 7rem;
    }

    .cd-horizontal-timeline .events-content em {
        font-size: 2rem;
    }

    .cd-horizontal-timeline .events-content p {
        font-size: 1.8rem;
    }
}

@-webkit-keyframes cd-enter-right {
    0% {
        opacity: 0;
        -webkit-transform: translateX(100%);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0%);
    }
}

@-moz-keyframes cd-enter-right {
    0% {
        opacity: 0;
        -moz-transform: translateX(100%);
    }
    100% {
        opacity: 1;
        -moz-transform: translateX(0%);
    }
}

@keyframes cd-enter-right {
    0% {
        opacity: 0;
        -webkit-transform: translateX(100%);
        -moz-transform: translateX(100%);
        -ms-transform: translateX(100%);
        -o-transform: translateX(100%);
        transform: translateX(100%);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0%);
        -moz-transform: translateX(0%);
        -ms-transform: translateX(0%);
        -o-transform: translateX(0%);
        transform: translateX(0%);
    }
}

@-webkit-keyframes cd-enter-left {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-100%);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0%);
    }
}

@-moz-keyframes cd-enter-left {
    0% {
        opacity: 0;
        -moz-transform: translateX(-100%);
    }
    100% {
        opacity: 1;
        -moz-transform: translateX(0%);
    }
}

@keyframes cd-enter-left {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-100%);
        -moz-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
        -o-transform: translateX(-100%);
        transform: translateX(-100%);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0%);
        -moz-transform: translateX(0%);
        -ms-transform: translateX(0%);
        -o-transform: translateX(0%);
        transform: translateX(0%);
    }
}

.m-timeline .kt-widget1 {
    padding: 0px 0px;
}

.m-timeline .kt-widget1__number {
    font-size: 1.1rem !important;
}

.m-timeline .kt-widget1 .kt-widget1__item {
    padding: .35rem 0px !important;
}

.prescription-table tr th,
.patientProcedure tr th {
    background-color: #efefef !important;
}

.prescription-table th,
.prescription-table td,
.patientProcedure th,
.patientProcedure. td {
    text-align: center;
    vertical-align: middle !important;
}

.prescription-table tr th,
.patientProcedure tr th {
    padding-top: .40rem !important;
    padding-bottom: .40rem !important;
    font-size: 1rem;
    font-weight: 400;
    color: #0a0a0a;
}

.prescription-table tr td,
.patientProcedure tr td {
    padding: 0.40rem !important;
    color: #0a0a0a !important;
    font-weight: 400;
}

.prescription-table tr td {
    vertical-align: middle;
}

.prescription-table tr th {
    font-weight: 600 !important;
    padding-top: .50rem !important;
    padding-bottom: .50rem !important;
    font-size: 1.1rem;
}

.prescription-table tr .medName {
    font-weight: 500;
}

.print-btn i {
    color: #fff;
    font-size: 1.7rem !important;
}

.print-btn {
    color: #ffffff !important;
    font-size: 1rem !important;
    padding: 0.50rem 0.30rem !important;
    /*border-radius: 0px !important;*/
}

.print-btn:hover {
    background: #fff;
}

.print-btn:hover i {
    color: var(--main-green-color) !important;
}

.vital-sign-line > div {
    border-right: 2px solid #ebedf2;
}

.vital-sign-line > div:last-child {
    border-right: none;
}

.vital-sign-line input:disabled {
    width: 55px;
    border: none;
    text-align: right;
    background: none;
    margin-left: auto;
    padding: 0px;
    /*margin-right: 5px;*/
}

.vital-sign-line input {
    width: 60px;
    text-align: right;
    background: none;
    margin-left: auto;
    border: 1px solid #ebedf2;
    padding: 0px 5px;
    /*margin-right: 5px;*/
}

.vital-sign-line:first-child {
    border-bottom: 2px solid #ebedf2;
}

.blood-pressure {
    width: 40px !important;
}

.vital-sign-unit {
    padding-left: 3px !important;
}

.my-vital-sign {
    font-size: 1.1rem !important
}

.vital-sign-chart {
    font-size: 1.70rem;
}

.temperature-dropdown {
    padding: 2px;
    border: 1px solid #ebedf2;
    color: #6c7293;
    margin-left: 3px;
}

.p-history-btn {
    margin: 5px 0px;
}

.option-btn-align {
    margin-left: auto;
}

.scheduled-label {
    margin-left: auto;
}

.calender-scheduled {
    font-size: 1rem;
    font-weight: 500;
    margin: 3px 6px;
    display: inline-block;
}

.calender-scheduled .calender-scheduled-number {
    text-align: center;
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
}

.calender-scheduled .calender-scheduled-title {
    font-size: 1rem;
    color: #a7abc3;
    font-weight: 600;
}

.schedule-time {
    margin-right: 5px;
}

.scheduled-tab .nav-link {
    padding: 5px !important;
    border-bottom: none !important;
    width: 100%;
    text-align: center;
}

.scheduled-tab .calender-scheduled {
    margin: 0px;
    width: 100%;
}

.scheduled-tab .nav-item {
    margin-right: 0px !important;
    border: 1px solid #e6e5e5;
    padding: 0px;
    width: 100px;
}

.thank-you-report-tab .nav-item {
    width: 110px;
    padding: 3px 0px;
}

.scheduled-tab li a.active,
.scheduled-tab li a.active .calender-scheduled-title,
.scheduled-tab li a.active .calender-scheduled .calender-scheduled-number {
    border-bottom: none !important;
    color: #ffffff !important;
}

.schedule-tab-table td {
    padding: 0.60rem !important;
    text-align: center;
    vertical-align: middle !important;
    font-weight: 400;
}

.schedule-tab-table th {
    text-align: center;
}

.tab-default-bg {
    background: var(--second-blue-color);
}

.doctor-filter {
    margin-bottom: 0;
    padding-top: 10px;
    font-weight: 400;
    font-size: 1.05rem !important;
    color: var(--label-color);
}

.doctor-filter-row {
    width: 100%;
}

/* The dropdown search box may simply be forced to full width.
   This used to be a blanket rule over every .select2-search__field with a
   ":not(#reasonVisit .select2-search__field)" exception carved out for one multi-select.
   Do NOT reintroduce a descendant selector inside :not() - the CSS minifier drops the
   space, so ":not(#reasonVisit .x)" ships as ":not(#reasonVisit.x)" and the exception
   silently stops matching (which is why that carve-out never worked in production). */
.select2-container .select2-search--dropdown .select2-search__field {
    width: 100% !important;
}

/* The INLINE search box of a multi-select needs the parent li fixed first. select2 ships
   it as a shrink-to-fit float, which breaks its width in two different ways:
     - with a placeholder, select2 sets the field to the row width, but "width: 100%" on a
       child of a shrink-to-fit float is circular, so the field collapses to the intrinsic
       width of its own placeholder and clips it ("Type or Select a Patient G");
     - once anything is selected select2 blanks the placeholder and then sizes the field to
       (characters + 1) * 0.75em, i.e. 0.75em when empty - about two visible characters, so
       typing a new tag looks like it stops after two letters.
   Making the li a block that establishes its own BFC gives it a real width: it sits beside
   the floated chips when there is room and drops to its own full-width line when there is
   not, so "width: 100%" on the field finally means the row. */
.select2-container .select2-selection--multiple .select2-search--inline {
    float: none;
    display: block;
    overflow: hidden;
    min-width: 10em;
}

.select2-container .select2-selection--multiple .select2-search--inline .select2-search__field {
    width: 100% !important;
}

.select2 {
    width: 100% !important;
}

/*#reasonVisit .select2-search__field{*/
/*    width: auto !important;*/
/*}*/
.m-history-border-right {
    border-right: 2px solid #e4e8ee;
}

.custom-border-solid {
    border-bottom: 2px solid #E4E8EE !important;
}

.patient-history .kt-portlet__head-icon {
    color: var(--second-blue-color) !important;
    font-size: 1.50rem !important;
}

.patient-history .kt-portlet__head-title {
    color: #48465b !important;
    font-size: 1.10rem !important;
    font-weight: 500 !important;
}

.no-border {
    border: none !important;
}

.medical-history-panel .kt-quick-panel__content {
    padding-top: 0rem !important;
}

.birth-history-section {
    padding: 5px 20px 5px;
    display: table;
    width: 100%;
    border-bottom: 1px solid #f4f5f9;
}

.history-question {
    width: 95%;
    display: table-cell;
}

.history-ans {
    display: table-cell;
    padding-left: 0px;
    padding-right: 0px;
}

.medical-history-panel .kt-quick-panel__nav .nav .nav-item {
    margin-right: 1rem !important;
}

.medical-history-panel .kt-quick-panel__close {
    top: 1.5rem;
}

.medical-history-panel {
    width: 500px !important;
    right: -500px !important;
}

.medical-history-panel.kt-quick-panel--on {
    right: 0px !important;
}

.medical-history-panel .kt-notification .kt-notification__item:after {
    display: none !important;
}

.medical-history-panel .kt-notification .kt-notification__item {
    padding: 0.55rem 1.5rem !important;
}

.medical-history-panel .kt-notification {
    padding-top: 1rem;
}

.cd-horizontal-timeline .kt-widget1 .kt-widget1__item .kt-widget1__info .kt-widget1__desc {
    color: #0a0a0a !important;
}

#vital-sign-chart-panel,
#vital-sign-chart-panel-second {
    width: 565px !important;
    right: -5883px !important;
}

#vital-sign-chart-panel.kt-quick-panel--on,
#vital-sign-chart-panel-second.kt-quick-panel--on {
    right: 0px !important;
}

#add-new-walk-in-panel {
    width: 950px !important;
    right: -955px !important
}

#add-new-walk-in-panel .kt-quick-panel__content,
#add-new-app-panel .kt-quick-panel__content,
#edit-appointment-panel .kt-quick-panel__content {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

#add-new-walk-in-panel .walkin-scroll {
    height: 70vh;
    overflow: auto;
}

#add-new-walk-in-panel .kt-portlet {
    -webkit-box-shadow: 0px 1px 15px 1px rgba(230, 229, 229, 0.76);
    box-shadow: 0px 1px 15px 1px rgba(230, 229, 229, 0.76);
    border: 1px solid #e1e3ec;
}

#add-new-walk-in-panel .kt-portlet__body,
#add-new-app-panel .kt-portlet__body,
#edit-appointment-panel .kt-portlet__body {
    padding: 10px 12px;
}

#add-new-app-panel .kt-quick-panel__content .kt-portlet__body,
#edit-appointment-panel .kt-quick-panel__content .kt-portlet__body {
    height: 78vh;
    overflow-y: auto;
    padding-top: 0;
}

#add-new-walk-in-panel .kt-portlet__foot,
#add-new-app-panel .kt-portlet__foot,
#edit-appointment-panel .kt-portlet__foot {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

#add-new-walk-in-panel.kt-quick-panel--on {
    right: 0 !important
}

#add-new-walk-in-panel .kt-portlet.kt-portlet--height-fluid {
    height: calc(100%);
}

#edit-walkin-panel {
    width: 950px !important;
    right: -955px !important
}

#edit-walkin-panel .kt-portlet {
    -webkit-box-shadow: 0px 1px 15px 1px rgba(230, 229, 229, 0.76);
    box-shadow: 0px 1px 15px 1px rgba(230, 229, 229, 0.76);
    border: 1px solid #e1e3ec;
}

#edit-walkin-panel .kt-portlet__body {
    padding: 10px 18px;
}

#edit-walkin-panel.kt-quick-panel--on {
    right: 0 !important
}

#edit-walkin-panel .kt-portlet.kt-portlet--height-fluid {
    height: calc(100%);
}

#vital-sign-chart-panel .kt-quick-panel__close,
#vital-sign-chart-panel-second .kt-quick-panel__close {
    top: 1.5rem;
}

.chart-margin {
    margin-right: 15px;
}

.patient-search-table thead tr th {
    color: #ffffff !important;
    background: var(--main-green-color);
}

.patient-search-table .no-content:after,
.patient-search-table .no-content:before {
    content: "" !important;
}

.patient-search-table .no-content {
    padding-right: 0.75rem !important;
}

.schedule-tab-table thead tr th,
.scedule-table thead tr th {
    background: var(--main-green-color);
    color: #fff;
}

.patient-search-table td {
    padding: 0.30rem 0.75rem !important;
    vertical-align: middle !important;
}

.chartdiv {
    width: 100%;
    height: 100%;
}

.digipad {
    margin: 0px 10px 10px;
}

.handWriting {
    /* border:1px solid #ccc;*/
    background: #F4F5F8;
}

.writing-btn i {
    font-weight: 600;
    color: var(--main-green-color);
    font-size: 1.5rem !important;
}

.writing-btn:hover {
    background: #f0f3ff;
}

.custom-cursor {
    cursor: url("../media/logos/clean.png"), auto;
}

.rotate-icon {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

.digipad-fixed {
    position: fixed;
    top: 0px;
    left: 0;
    width: 100%;
    background: #ffffff;
    z-index: 97;
}

.digipad-fixed .writing-btn:last-child {
    margin-right: 20px;
}

.patient-search-column-hide {
    display: none;
}

.medical-history-main .kt-radio > input:disabled ~ span:after,
.medical-history-main .kt-checkbox > input:disabled ~ span:after,
.clinical-examination-tab .kt-checkbox > input:disabled ~ span:after {
    border-color: #ffffff;
}

.quick-statistics .kt-head {
    padding: 1rem 0rem;
    background-position: center;
}

.quick-statistics .kt-grid-nav > .kt-grid-nav__row > .kt-grid-nav__item {
    padding: 1.50rem 0.75rem;
}

.quick-statistics .kt-grid-nav__icon {
    font-size: 1.2rem !important;
    color: var(--main-green-color) !important;
}

.quick-statistics .kt-grid-nav > .kt-grid-nav__row > .kt-grid-nav__item .kt-grid-nav__title {
    font-size: 1rem;
    margin-top: 0.3rem;
}

.quick-statistics .kt-grid-nav > .kt-grid-nav__row > .kt-grid-nav__item .kt-grid-nav__desc {
    margin-top: 0.3rem;
}

.quick-custom-btn i {
    padding-right: 0rem !important;
    font-size: 1.70rem !important;
    line-height: 1.90rem !important;
}

.quick-custom-btn {
    color: var(--second-blue-color) !important;
    padding: 0.65rem 0.65rem !important;
}

.quick-custom-btn:hover {
    background: var(--second-blue-color);
}

.quick-custom-btn:hover i {
    color: #ffffff;
}

.option-btn-align .dropdown-menu.dropdown-menu-lg {
    width: 270px;
}

.quick-statistics .btn-font-sm {
    padding: 0.5rem 0.5rem;
    line-height: 0.8;
}

.qr-code-icon i {
    font-size: 2.5rem !important;
}

.development-history .kt-radio-inline .kt-radio {
    margin-right: 7px;
}

.development-history .development-time-duration, .personal-history-time-duration {
    color: #212529 !important;
    border-color: #ebedf2 !important;
    opacity: 1 !important;
    padding: 0.50rem 0.70rem !important;
    font-size: 0.90rem;
    /*height: calc(1em + 1rem + 2px);*/
}

.development-history input {
    height: calc(1.5em + 1rem);
}

.language-development label {
    margin-bottom: 0px;
}

.development-history-accordian.accordion-toggle-plus .card .card-header .card-title.collapsed {
    color: var(--main-green-color) !important;
    padding-right: 20px;
}

.development-history-accordian.accordion-toggle-plus .card .card-header .card-title {
    padding-right: 20px !important;
}

.development-history-accordian.accordion-toggle-plus .card .card-header .card-title.collapsed:after {
    color: var(--main-green-color) !important;
}

.follow-up-date {
    color: #fff;
    font-size: 1rem;
    font-weight: 500;
    padding: 5px 0px;
}

.custom-sm-btn {
    padding: 0.5rem 0.60rem !important;
}

.noUi-value-large {
    font-size: 1rem;
    font-weight: 500;
    color: #6c7293;
}

#muscleStrengthSlider .noUi-marker-horizontal.noUi-marker-sub {
    display: none;
}

#muscleStrengthSlider .noUi-value-horizontal {
    -webkit-transform: translate(-50%, 0%);
    transform: translate(-50%, 0%);
}

.noUi-target .noUi-handle {
    border: 3px solid var(--second-blue-color) !important;
}

.custom-mb-9 {
    margin-bottom: 9rem;
}

.custom-group-append .input-group-text {
    border-radius: 0px;
    background: #ffffff;
}

.custom-append-margin {
    margin: 0px 2px;
}

.payment-option-button .dropdown-toggle {
    border-color: #ffffff !important;
    background: #ffffff !important;
}

.medicine-title {
    font-size: 1.4rem !important
}

.m-widget6-delete:before {
    position: absolute;
    display: block;
    width: 0.3rem;
    border-radius: 4px;
    width: 4px;
    height: 100%;
    /* left: 0.8rem; */
    content: "";
    background: #ffffff;
}

.billing-item-delete {
    color: #ffffff !important;
    padding: 0px 0px 0px 8px !important;
}

.billing-item-delete i {
    font-size: 1.1rem !important;
}

.billing-table thead tr th {
    color: #ffffff;
    font-size: 1.10rem;
    font-weight: 500;
    padding: 0.40rem;
}

.billing-table tbody tr td {
    color: #ffffff;
    border-top: 0px;
    padding: 0.40rem;
}

.billing-table > tbody {
    display: block;
    /*height: 180px;*/
    height: 128px;
    overflow: auto;
}

.billing-table > thead,
.billing-table > tbody tr {
    display: table;
    /* width:100%;*/
    table-layout: fixed;
}

.billing-table > thead {
    width: calc(100% - 1em)
}

.billingItmeQty .btn {
    line-height: 1 !important;
}

.billing-input {
    height: 1.4rem !important;
    background: none !important;
    border-bottom: 1px solid #fff;
    border: none !important;
    border-bottom: 1px solid #fff !important;
    color: #fff !important;
    border-radius: 0px !important;
}

.vaccine-legend {
    text-align: center;
    padding: 0.40rem;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 500;
}

.v-given {
    background: var(--main-green-color);
    border-top-left-radius: 0.3rem;
    border-bottom-left-radius: 0.3rem;
}

.v-upcoming {
    background: var(--second-blue-color);
}

.v-overdue {
    background: #ff675d;
    border-top-right-radius: 0.3rem;
    border-bottom-right-radius: 0.3rem;
}

.v-current {
    background: #EEA200;
}

.clinicradio .kt-radio,
.radiotime .kt-radio {
    margin-bottom: 0px !important;
}

.diagnosis-search .btn i {
    padding-right: 0px;
}

.advise-search-list {
    height: 64vh;
    overflow: auto;
    margin-top: 0.5rem;
}

.selected-advise-list ul {
    padding: 0px;
    list-style-type: decimal;
}

.selected-advise-list ul li {
    list-style-position: inside;
    margin: 0.20rem 0rem;
    color: #3F4254;
    font-weight: 400;
}

.support-content input,
.support-content select,
.support-content textarea,
.support-content .select2-container--default .select2-selection--single {
    background-color: #F4F5F8 !important;
}

#support_modal input,
#support_modal select,
#support_modal textarea,
#support_modal .select2-container--default .select2-selection--single {
    background-color: #E6E5E5 !important;
}

.income-report-table thead tr th {
    color: #ffffff;
    background: var(--main-green-color);
    padding: 0.80rem 1rem !important;
}

.income-report-table .td-right {
    text-align: right;
}

.income-report-table .total-highlight {
    background: #F4F5F8;
    font-weight: 800;
    color: #6c7293;
}

.income-report-table tbody tr td,
.income-report-table tfoot tr td {
    /*color: #3F4254;*/
    font-weight: 400;
}

.income-report-table td {
}

/* Analytics Report Dashboard */
.widget {
    overflow: hidden;
    margin-bottom: 20px;
    background: #fff;
    color: inherit;
    padding: 0;
    border-radius: 0;
}

.widget.widget-stats {
    position: relative;
    color: #fff;
    padding: 15px;
    border-radius: 3px;
}

.bg-gradient-teal {
    background: #34babb !important;
    background: -moz-linear-gradient(-45deg, rgba(70, 191, 179) 0, rgba(86, 184, 174) 100%) !important;
    background: -webkit-linear-gradient(-45deg, rgba(70, 191, 179) 0, rgba(86, 184, 174) 100%) !important;
    background: linear-gradient(135deg, rgba(70, 191, 179) 0, rgba(86, 184, 174) 100%) !important;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#34babb', endColorstr='#00acac', GradientType=1) !important;
}

.widget-stats .stats-icon {
    font-size: 42px;
    height: 56px;
    width: 56px;
    text-align: center;
    line-height: 56px;
    margin-left: 15px;
    color: #000;
    position: absolute;
    right: 15px;
    top: 15px;
    opacity: .15;
}

.widget-stats .stats-icon.stats-icon-lg {
    font-size: 105px;
    top: 15px;
    right: 0;
    color: #fff;
    width: 115px;
    height: 50px;
    line-height: 50px;
    text-shadow: 3px 7px rgba(0, 0, 0, .25);
}

.widget-stats .stats-content,
.widget-stats .stats-icon.stats-icon-lg i {
    position: relative;
}

.widget-stats .stats-content,
.widget-stats .stats-icon.stats-icon-lg i {
    position: relative;
}

.widget-stats .stats-title {
    position: relative;
    margin: 0 0 2px;
    font-size: 1.2rem;
    font-weight: 600;
}

.widget-stats .stats-desc {
    color: #fff;
    color: rgba(255, 255, 255, .7);
}

.widget-stats .stats-number {
    font-size: 1.8rem;
    margin-bottom: 10px;
    font-weight: 300;
    letter-spacing: 1px;
}

.widget-stats .stats-progress {
    background: rgba(0, 0, 0, .5);
    height: 2px;
    margin: 0 0 15px;
}

.widget-stats .stats-progress .progress-bar {
    background: #fff;
    border-radius: 0 3px 3px 0;
}

.widget-stats .stats-desc {
    margin: -5px 0 -3px;
    font-weight: 300;
}

.inr-symbol {
    font-family: Roboto, "Segoe UI", Helvetica, Arial, sans-serif;
    margin-right: 2px;
}

.rs-icon {
    position: relative;
}

.rs-icon:before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f007";
}

.td-padding tr td {
    padding: 0.70rem 0.75rem;
}

.patient-detail-top-header {
    padding: 5px 15px;
}

.top-header-item h6 {
    font-size: 1rem;
    color: var(--label-color);
    font-weight: 500;
    align-items: center;
    margin-bottom: 0px;
}

.top-header-item h6 i {
    padding-right: .5rem;
}

.top-header-item .kt-badge--unified-danger {
    font-size: 1rem;
}

.patient-engaged-timer {
    font-size: 0.9rem;
    font-weight: 500;
    background: #fff;
    color: var(--main-green-color);
    width: 75px;
    text-align: center;
    border-radius: 0.2rem;
    margin-left: auto;

    position: fixed;
    top: 15px;
    z-index: 99;
    left: 13%;
    /*transform: translate(-50%, 0);*/
}

.top-header-allergy {
    font-size: 1.2rem;
    cursor: pointer;
}

.allergy-link {
    cursor: pointer;
}

.top-header-divider {
    width: 1px;
    background: #000;
    height: 15px;
}

.top-header-divider-bold {
    width: 2px;
    background: var(--main-green-color);
    height: 15px;
}

.top-header-item-list {
    padding: 0;
    margin: 0;
}

.top-header-item-list .top-header-item {
    display: inline-block;
    padding: 0px 3px;
    position: relative;
    /*vertical-align: middle;*/
    font-size: 1rem;
    color: var(--label-color);
    font-weight: 500;
    align-items: center;
}

.top-header-item-list .top-header-item.header-right-border:after {
    content: '';
    background: var(--main-green-color);
    height: 14px;
    width: 1px;
    display: block;
    position: absolute;
    top: 50%;
    left: -2px;
    /* bottom: 50%; */
    transform: translate(0%, -50%);
}

.top-header-first-item {
    width: 30px;
}

.top-header-item-small {
    font-size: 0.8rem;
}

.top-header-diagnosis {
    /*background: #FFEBF1;*/
    color: #fd397a !important;
}

.top-header-diagnosis .top-header-diagnosis-text.kt-font-brand {
    color: #fd397a !important;
}

.kt-badge.kt-badge-patient {
    width: 23px;
    height: 23px;
    line-height: .3rem;
    border-radius: 10%;
    font-size: 1rem;
    font-weight: 600;
}

.timer-span {
    background: var(--main-green-color);
    padding: 2px;
    border-radius: 3px;
    font-size: 1rem;
    font-weight: 600;
    color: #ffffff;
    width: 25px;
    display: inline-block;
    text-align: center;
}

.customAccordionLevelTwo {
    margin: 0px;
    font-size: 1.1rem;
    font-weight: 500;
    color: #3F4254;
    cursor: pointer;
    display: flex;
}

.customAccordionLevelTwo span {
    color: #9c9ea2
}

.customAccordionLevelTwo .chief-complaint-name {
    color: #3F4254;
}

.clinical-note-duration {
    background: #f7f8fa;
    color: #959cb6;
    font-size: 1.1rem;
    padding: 8px;
    text-align: center;
    margin: 0px;
    border-bottom: 3px solid #ebedf2;
}

.clinical-note-list .kt-nav__item > .kt-nav__link {
    padding: 0.05rem 0.40rem !important;
    color: #3F4254;
    font-weight: 500;
}

.clinical-note-list .kt-nav__item > .kt-nav__link span {
    margin-right: 0.20rem;
    color: #9c9ea2
}

.top-header {
    align-items: center !important;
}

.top-nav-links {
    display: flex;
}

#reviewPatientFile {
    font-size: 1.3rem;
}

.custom-subtitle {
    color: var(--label-color);
}

.action-dropdown > li > a > i:before,
.dropdown-menu > .dropdown-item > i:before {
    vertical-align: unset !important;
}

.custom-action-btn .btn {
    background: #e6e6e6;
    /* display: flex; */
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    border-radius: 3px;
    transition: background .3s ease;
    line-height: 32px;
    padding: 0px;
    cursor: pointer;
}

.custom-action-btn a {
    cursor: pointer;
}

.custom-action-btn .btn i {
    padding: 0px;
    color: var(--second-blue-color);
}

.custom-action-btn .btn:hover {
    background: var(--second-blue-color);
}

.custom-action-btn .btn:hover i {
    color: #ffffff;
}

.custom-action-btn .dropdown-item,
.custom-action-btn.dropdown-menu,
.custom-action-btn.dropdown-menu .dropdown-item i,
.custom-action-btn .dropdown-menu .dropdown-item i {
    color: var(--second-blue-color);
    /*color: red;*/
}

.custom-action-btn .dropdown-item:hover {
    background: var(--second-blue-color);
    color: #ffffff !important;
}

.custom-action-btn.dropdown-menu .dropdown-item:hover i,
.custom-action-btn .dropdown-menu .dropdown-item:hover i {
    color: #ffffff;
}

.vital-sign-widget {
    display: flex;
}

.vital-sign-box {
    padding: 1rem;
    margin: 0.50rem;
    flex: 1;
    /* overflow: hidden; */
    border-radius: 4px;
    background: var(--light-blue-background);
    height: 95px;
}

.vital-sign-box label {
    color: var(--second-blue-color);
    /* font-size: 1.1rem; */
    font-weight: 500;
}

.vital-sign-box .input-group-text {
    background: var(--second-blue-color);
    color: #fff;
    border-top-right-radius: 3px !important;
    border-bottom-right-radius: 3px !important;
}

.error-message {
    color: #fd397a;
}

.doctor-list-bullet {
    height: 10px;
    width: 10px;
    border-radius: 50%;
    display: inline-block;
    background: var(--second-blue-color);
    margin-right: 2px;
}

.custom-btn-icon.btn {
    height: 2.8rem;
    width: 2.8rem;
    border-radius: 3px;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 0;
}

.custom-btn-icon.btn i {
    font-size: 1.2rem;
    padding: 0px;
}

.pharmacy-status-action-container .custom-btn-icon.btn {
    height: 2.5rem;
    width: 2.5rem;
}

#vital-sign-panel .form-control, #vital-sign-panel-from-calendar .form-control, .vital-sign-form-control.form-control {
    background-color: #fff;
    border: 1px solid #fff;
}

.prescription-box .form-control,
.prescription-box .form-control[readonly] {
    color: var(--font-black-color);
    background-color: transparent;
    border-color: var(--input-border);
}

.prescription-box .btn-secondary {
    background: #cccccc;
    border: none;
}

.prescription-box .input-group-text {
    background-color: #e6e5e5;
    border-color: #e6e5e5;
}

.kt-iconbox {
    border-radius: 3px;
}

.kt-iconbox .kt-iconbox__body .kt-iconbox__desc .kt-iconbox__content {
    font-size: 1.8rem;
}

.custom-background {
    background-color: #E6E5E5 !important;
}

.readonly-element-border {
    border-color: #E6E5E5 !important;
}

.br-remove {
    border-top-right-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
}

.bl-remove {
    border-top-left-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
}

.kt-link:hover:after {
    border-bottom: none;
}

.custom-iconbox-icon {
    font-size: 3.2rem;
    color: var(--second-blue-color);
}

.dashboard-area .kt-portlet {
    margin-bottom: 20px;
    border-radius: 4px;
}

.dashboard-area .kt-portlet .kt-portlet__head {
    min-height: 60px;
}

.dashboard-chart {
    width: 100%;
    height: 300px;
}

.ipd-dashboard-chart {
    width: 100%;
    height: 280px;
    overflow: auto;
}

.chart-rupees-symbol {
    color: red;
}

.removeCardArrow:after {
    content: none !important;
}

.advise-search-list .kt-checkbox-list p {
    cursor: pointer;
    font-weight: 500;
}

.search-list .search-item {
    font-weight: 500;
    margin-bottom: 0.5rem;
    display: flex;
}

.search-list {
    height: 350px;
    overflow: auto;
}

.library-item-add .btn {
    justify-content: center;
    align-items: center;
    width: 26px;
    height: 26px;
    line-height: 26px;
    border-radius: 3px;
    transition: background .3s ease;
    padding: 0px;
}

.library-item-add .btn i {
    vertical-align: unset;
}

.library-item-add .btn.active, .library-item-add .btn:hover {
    color: var(--second-blue-color) !important;
    background-color: var(--light-blue-background) !important;
    border-color: var(--light-blue-background) !important;
}

.library-item-add p {
    margin: 0px;
}

.user-active {
    bottom: 0;
}

.user-active .kt-menu__nav > .kt-menu__item > .kt-menu__link {
    padding: 0px 0px 0px 15px !important;
}

.user-active .kt-menu__nav > .kt-menu__item > .kt-menu__link:hover {
    background-color: unset !important;
}

.user-active .kt-badge.kt-badge--unified-success {
    color: #ffffff;
    background: rgb(27, 197, 189);
}

.removeInputArrow::-webkit-inner-spin-button,
.removeInputArrow::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
}

.removeInputArrow {
    -moz-appearance: textfield;
}

.diagnosis-icon {
    color: var(--main-green-color);
}

.diagnosis-active .diagnosis-icon {
    color: #fff;
}

.custom-dropdown .dropdown-item, .custom-dropdown > .dropdown-item > i {
    color: var(--second-blue-color) !important;
}

.custom-dropdown .dropdown-item:hover {
    background-color: var(--second-blue-color);
    color: #ffffff !important;
}

.custom-dropdown .dropdown-item:hover i {
    color: #fff !important;
}

.active-prescription {
    position: absolute;
    /* display: block; */
    top: 0;
    right: 0;
}

.active-prescription .kt-svg-icon {
    height: 21px;
    width: 21px;
}

.active-prescription .kt-pulse {
    display: flex;
    align-items: center;
    align-self: center;
    justify-content: center;
    transition: all .3s;
    border-radius: 4px;
    cursor: unset;
}

.active-prescription .kt-pulse .kt-pulse__ring {
    height: 30px;
    width: 30px;
    border-color: rgba(255, 103, 93, 0.8);
}

.active-prescription .kt-svg-icon g [fill] {
    fill: #FF675D;
}

.dataTable td {
    color: #000;
    font-weight: 400;
}

.btn-secondary:focus i, .btn-secondary.active i, .btn-secondary:active i, .btn-secondary:hover i {
    color: #ffffff;
}

.patient-file .form-control:disabled, .form-control[readonly] {
    border-color: #E6E5E5;
    color: #3a4045;
    background-color: #E6E5E5;
    /*padding: 0.3rem;*/
    /*font-size: 0.95rem;*/
}

/* vaccine */
.vaccine-widget .table-responsive {
    overflow-y: hidden;
}

.vaccine-widget .table thead > tr > td {
    padding: 0;
    vertical-align: top;
    border-top: 0;
    font-weight: 500;
    color: #000000;
    font-size: 1.10rem;
}

/*.vaccine-widget .table tbody > tr {*/
/*    border-bottom: 1px dashed #ebedf2; }*/
.vaccine-widget .table tbody > tr > td {
    border: 0;
    padding-left: 0;
    padding-right: 0.8rem;
    padding-top: 5px;
    vertical-align: top;
    color: #6c7293;
    padding-bottom: 5px;
}

.vaccine-widget .table tbody > tr > td > label {
    right: 0;
    top: 0.5rem;
    vertical-align: top;
}

.vaccine-widget .table tbody > tr > td .vaccine-widget__chart {
    position: relative;
    margin-top: -0.6rem;
}

.vaccine-widget .table tbody > tr > td:last-child {
    padding-right: 0;
    vertical-align: middle;
    text-align: center;
}

.vaccine-widget .table tbody > tr .vaccine-widget__title {
    font-size: 1.1rem;
    font-weight: 500;
    display: block;
    color: #6c7293;
    -webkit-transition: color .3s ease;
    transition: color .3s ease;
}

.vaccine-widget .table tbody > tr .vaccine-widget__title:hover {
    color: var(--second-blue-color);
    -webkit-transition: color .3s ease;
    transition: color .3s ease;
}

.vaccine-widget .table tbody > tr .vaccine-widget__title > span {
    color: #a7abc3;
}

.vaccine-widget .table tbody > tr .vaccine-widget__sub {
    display: block;
    font-size: 1rem;
}

.vaccine-widget .table tbody > tr:last-child {
    border: 0;
}

.vaccineDesabledInput {
    background-color: #E6E5E5 !important;
}

.newPatient {
    background: #fff;
    color: #0ecca6;
    padding: 0px 3px;
    font-weight: bold;
    margin-right: 2px;
    font-size: 0.7rem;
}

.kt-badge-sm {
    height: 15px !important;
    width: 16px !important;
}

.bg-white {
    background-color: #ffffff !important;
    /*border-color: #ffffff !important;*/
}

.total-discount-border {
    border-radius: 3px !important;
}

.billing-item-container {
    height: 310px;
    overflow: auto;
    padding-right: 5px;
}

.billing-item-container .card {
    margin-bottom: .2rem !important;
}

.billing-item-container .card .card-header .card-title {
    font-size: 1rem !important;
    font-weight: 500;
    padding: 0.50rem 1rem !important;
    background-color: #e6e5e5;
    border-radius: 3px;
}

.datatable-font {
    color: #0a0a0a;
    font-weight: 400;
}

.datatable-font-weight {
    font-weight: 600;
}

.visitTypeIcon {
    font-size: 1.4rem;
    color: var(--second-blue-color);
    vertical-align: middle;
}

.kt-user-card-v2 .kt-user-card-v2__pic .kt-badge {
    font-size: 0.8rem;
    font-weight: bold;
}

.datatable-female-text-color {
    color: #fd397a;
}

.datatable-male-text-color {
    color: var(--second-blue-color);
}

.previous-billing-btn .dropdown {
    background: none !important;
}

.total-due {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 500;
}

.kt-badge--success-custom {
    color: var(--main-green-color);
    background: #ffffff;
    font-weight: bolder;
}

.kt-font-level-2 {
    color: var(--second-blue-color);
    font-size: 1.1rem;
    font-weight: 600;
    /*margin: 0px;*/
}

.kt-font-level-3 {
    color: #48465b;
    font-size: 1.1rem;
    font-weight: 500;
}

.kt-font-level-4 {
    color: #48465b;
    font-size: 1.05rem;
    font-weight: 500;
}

.history-border-left {
}

.history-text {
    font-size: 1rem;
    font-weight: 400;
    color: #0A0A0A;
}

.history-custom-separator {
    color: #0a0a0a;
    font-weight: 600;
    font-size: 1.2rem
}

.kt-subheader.custom-kt-subheader {
    padding: 0px;
    height: auto !important;
    background-color: none !important;
    box-shadow: none !important;
}

#select2-followeupdateSelect-container {
    padding: 0.5rem 1rem;
}

#patient-print-button:focus {
    background-color: var(--light-blue-background);
    color: var(--second-blue-color);
}

.favourite-checkbox .kt-checkbox {
    padding-left: 35px;
    /* margin-top: 2px; */
    padding-top: 3px;
    font-size: 1.1rem;
}

.favourite-checkbox .kt-checkbox > span {
    height: 25px;
    width: 25px;
}

.alert.alert-solid-danger {
    background: rgba(253, 57, 122, .1);
    border-color: transparent;
    color: #fd397a;
}

/*.status-switch{*/
/*    width: 92px !important;*/
/*}*/
.kt-badge--grey {
    color: #ffffff;
    background: #949292;
}

.kt-quick-panel#add-user-panel {
    width: 600px;
    right: -600px;
}

.kt-quick-panel#add-user-panel.kt-quick-panel--on {
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    right: 0;
}

.kt-quick-panel#doctor-timeline-panel {
    width: 500px;
    right: -505px;
}

.kt-quick-panel#doctor-timeline-panel.kt-quick-panel--on {
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    right: 0;
}

.kt-quick-panel#certificate-panel, .kt-quick-panel#send-referral-panel {
    width: 600px;
    right: -610px;
}

.kt-quick-panel#certificate-panel.kt-quick-panel--on,
.kt-quick-panel#send-referral-panel.kt-quick-panel--on {
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    right: 0;
}

.kt-quick-panel#email-prescription-panel {
    width: 450px;
    right: -450px;
}

.kt-quick-panel#email-prescription-panel.kt-quick-panel--on {
    right: 0;
}

.kt-quick-panel#email-prescription-panel .form-group {
    margin-bottom: 0.6rem;
}

.password-pointer {
    cursor: pointer;
}

.vital-div .btn-sm {
    padding: 0.4rem 0.7rem !important;
    border: 3px;
}

.vital-div .btn-sm i {
    font-size: 1rem !important;
}

.vital-div .btn:last-child i {
    font-size: 0.8rem !important;
}

.accordion.accordion-toggle-arrow .card .card-header .card-title.vaccine-accordion-danger,
.accordion.accordion-toggle-arrow .card .card-header .card-title.collapsed.card-title.vaccine-accordion-danger {
    color: #FF675D;
    background-color: #F8E5ED;
    font-weight: 600;
    font-size: 1.2rem;
}

.accordion.accordion-toggle-arrow .card .card-header .card-title.vaccine-accordion-success,
.accordion.accordion-toggle-arrow .card .card-header .card-title.collapsed.card-title.vaccine-accordion-success {
    background: #ddf1ef;
    color: var(--main-green-color);
    font-weight: 600;
    font-size: 1.2rem;
}

.thank-you-report-status-change .kt-svg-icon g [fill] {
    fill: #fff;
}

.thank-you-report-status-change .kt-svg-icon {
    transform: rotate(90deg);
    height: 30px;
    width: 30px;
}

.datatable-line-height {
    line-height: 1.5rem;
}

.is-invalid-custom {
    border: 1px solid #fd397a;
    border-radius: 5px;
}

.my-tab.master-tab li a {
    padding: 4px 0px !important;
}

.expandCollapseIcon a i {
    /*visibility: hidden;*/
}

.attached-file-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    width: 100%;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.attached-file-content {
    width: 100%;
    margin: 5px 0 0;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    /*height: 45px;*/
    background-color: #f7f8fa;
    border-radius: 4px;
    overflow: hidden;
}

.attached-file {
    width: 50px;
    height: 50px;
    overflow: hidden;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    align-items: center;
    font-size: 2.3rem;
    color: var(--second-blue-color);
}

.attached-file img {
    height: 100%;
    width: auto;
}

.dropdown-menu.attached-file-dropdown {
    min-width: 30rem;
}

.attach-file-label {
    font-weight: 400;
    color: var(--label-color);
    flex: 1;
    word-break: break-all;
    margin-right: 5px;
}

.attach-file-name {
    font-size: 1.1rem;
    font-weight: 500;
    color: #0a0a0a;
}
.attached-file-action {
    margin: auto 10px auto auto;
}

.remove-default-arrow::-webkit-calendar-picker-indicator {
    opacity: 0;
}

.add-custom-icon {
    position: absolute;
    top: 10px;
    right: 12px;
    font-size: 0.9rem !important;
}

.chief-complaint-icon {
    font-size: 1.5rem;
}

.nav-tabs.master-navigation .nav-link {
    /*border-bottom: 3px solid transparent !important;*/
}

.nav-tabs.master-navigation .nav-item .nav-link.active, .nav-tabs.master-navigation .nav-item .nav-link:hover {
    border-color: var(--second-blue-color) !important;
    color: var(--second-blue-color) !important;
}

.nav-tabs.master-navigation.nav-tabs-line.nav-tabs-line-2x .nav-item {
    margin-bottom: -3px;
}

.nav-tabs.master-navigation .nav-item .nav-link {
    padding: 8px 0 3px;
}

.master-portlet-head {
    /*padding-bottom: 0.4rem !important;*/
}

#quickMedicineBoxContainer, #quickMedicineBoxClassicContainer {
    position: absolute;
    z-index: 1100;
    background: white;
    padding: 0.7rem;
    text-align: center;
    display: none;
    box-shadow: 0px 1px 9px -3px rgba(0, 0, 0, 0.75);
    border-radius: 4px;
}

.medicine-timing-table tr {
    /*border: 1px solid #ccc;*/
}

.medicine-timing-table tr td {
    padding: 0.2rem;
}

.medicine-timing-btn {
    padding: 0rem !important;
    height: 35px;
    width: 35px;
    /*border: 1px solid #E6E5E5!important;*/
    color: #0a0a0a !important;
    font-weight: 500 !important;
    line-height: 35px !important;
    /*background: #E6E5E5!important;*/
    text-align: center;
    display: inline-block;
    font-size: 1rem;
    border-radius: 0.25rem;
    cursor: pointer;
}

.medicine-timing-btn:hover {
    background: #E6E5E5 !important;
}

.fractional-digit {
    font-size: 1.3rem;
    /*font-weight: 600 !important;*/
}

.medicine-timing-table tr td:nth-of-type(odd) {
    background-color: #f7f8fa;
}

.medicine-timing-table tr td {
    border-right: 1px solid #ebedf2;
    border-top: none;
}

.medicine-timing-table tr td:last-child {
    border-right: none;
}

.medicine-timing-table tr:first-child td a {
    font-weight: 600 !important;
}

.custom-accordion-card-body .kt-nav .kt-nav__item .kt-nav__link {
    padding: 0.55rem 0.55rem;
}

.custom-accordion-card-body .kt-nav .kt-nav__item .kt-nav__link span {
    color: #0a0a0a;
    font-weight: 500;
    font-size: 1.04rem;
}

.custom-accordion-card-body .kt-nav .kt-nav__item.kt-nav__item--active > .kt-nav__link .kt-nav__link-text {
    color: #0a0a0a;
}

.custom-accordion-card-body .kt-nav .kt-nav__item.kt-nav__item--active > .kt-nav__link, .kt-nav .kt-nav__item:hover:not(.kt-nav__item--disabled):not(.kt-nav__item--sub) > .kt-nav__link,
.custom-accordion-card-body .kt-nav .kt-nav__item:hover:not(.kt-nav__item--disabled):not(.kt-nav__item--sub) > .kt-nav__link {
    background-color: #f5f5f5;
}

.accordion.accordion-solid .card {
    margin-bottom: .5rem !important;
}

.accordion.accordion-solid .card .custom-accordion-card-body,
.accordion.accordion-solid .card .diagnosis-template-body {
    border: 1px solid var(--main-green-color) !important;
}

.accordion.accordion-toggle-arrow .customAccordionHeader .card-header .card-title.collapsed {
    color: #3a4045 !important;
    background-color: #E6E5E5 !important;
}

.accordion.accordion-toggle-arrow .customAccordionHeader .card-header .card-title {
    color: #ffffff !important;
    background-color: var(--main-green-color) !important;
    border-bottom-left-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
}

.accordion.accordion-toggle-arrow .customAccordionHeader .card-header .card-title:after {
    color: #ffffff !important;
    font-weight: 700;
}

.accordion.accordion-toggle-arrow .customAccordionHeader .card-header .card-title.collapsed:after {
    color: var(--label-color) !important;
    font-weight: 700;
}

.prescription-container {
    cursor: pointer;
}

.kt-radio.kt-radio--solid:focus > span {
    border-color: var(--second-blue-color) !important;
}

.kt-radio.kt-radio--solid > input:focus ~ span {
    border: 1px solid red !important
}

.prescription-btn .btn:focus {
    box-shadow: 0 0 0 0.2rem rgba(88, 103, 221, 0.25) !important;
}

.my-btn-design option {
    background-color: white;
    color: #0a0a0a;
}

.diagnosis-div .m-widget2__desc {
    padding: 0 0.5rem;
}

.user-profile-menu {
    position: absolute;
    z-index: 99;
    background: white;
    display: none;
    min-width: 14rem;
    padding: 0.4rem 0rem;
    -webkit-box-shadow: 0px 1px 9px -3px rgba(0, 0, 0, 0.75);
    box-shadow: 0px 1px 9px -3px rgba(0, 0, 0, 0.75);
    border-radius: 4px;
    width: 200px;
}

.user-profile-menu .kt-nav .kt-nav__item > .kt-nav__link .kt-nav__link-text {
    color: #0a0a0a !important;
}

.user-profile-menu .kt-nav .kt-nav__link .kt-nav__link-bullet.kt-nav__link-bullet--dot > span {
    background-color: #0a0a0a !important;
}

.user-profile-menu .kt-nav__item:hover .kt-nav__link {
    background-color: var(--second-blue-color) !important;
}

.user-profile-menu .kt-nav__item:hover .kt-nav__link .kt-nav__link-bullet.kt-nav__link-bullet--dot > span {
    background-color: #ffffff !important;
}

.user-profile-menu .kt-nav__item:hover .kt-nav__link .kt-nav__link-text {
    color: #ffffff !important;
}

.kt-form__actions .btn, .modal-footer .btn {
    padding: 0.5rem 2rem;
    font-size: 0.875rem;
}

.swal2-popup .swal2-styled {
    padding: 0.5rem 1.5rem !important;
}

#select2-user_location_calendar_color-container {
    align-items: center;
    display: flex;
}

#select2-user_location_calendar_color-results li {
    display: flex;
    align-items: center;
}

.calendar-color-option, .toggle-color-option {
    width: 15px;
    height: 15px;
    border-radius: 4px;
    margin-right: 5px;
    display: inline-block;
}

.toggle-color-option {
    margin-right: 0;
    margin-top: 2px;
}

.exam-answer-options-container .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 1.2rem;
}

.exam-answer-options-container .select2-container--default .select2-selection--single {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: 1px solid #dbd5d5;
}

.swal2-actions .btn {
    padding: 0.5rem 2rem;
    font-size: 0.875rem;
}

.patient_diagnosis_status_drpdown {
    width: 75px !important;
}

#attach-cam-pic-panel {
    width: 39vw !important;
    /*height: 70vh !important;*/
    right: -55vw !important;
}

#attach-cam-pic-panel.kt-quick-panel--on {
    right: 0 !important;
}

.ui-helper-hidden-accessible {
    display: none;
}

.certificate-row {
    border-bottom: 1px solid #d4d4d4;
    padding: 0.2rem 0rem;
    align-items: center;
}

.certificate-header {
    background: #ffffff;
    border-bottom: 2px solid var(--main-green-color);
}

.certificate-title {
    font-weight: 600;
    vertical-align: middle;
    font-size: 1.2rem;
    color: #000000;
}

.certificate-collapse, .custom-collapse {
    font-size: 1.3rem;
    color: var(--second-blue-color);
}

.certificate-data {
    color: #0a0a0a;
    font-size: 1.1rem;
    vertical-align: middle;
    font-weight: 500;
}

#previewImage img {
    width: 100%;
    height: 100%;
}

#email-prescription-container {
    width: 650px;
}

.dropdown-menu.datatable-dropdown > li > a > i:before, .dropdown-menu > .dropdown-item > i:before {
    line-height: unset !important;
}

.dataTable-phone {
    transform: rotate(90deg);
}

.dataTable-location-icon:before {
    font-weight: 900 !important;
}

.custom-kt-datatable .kt-datatable__body .kt-datatable__row > .kt-datatable__cell:first-child,
.custom-kt-datatable .kt-datatable__head .kt-datatable__row > .kt-datatable__cell:first-child,
.custom-kt-datatable .kt-datatable__foot .kt-datatable__row > .kt-datatable__cell:first-child {
    padding-left: 5px !important;
}

.custom-kt-datatable .kt-datatable__body .kt-datatable__row > .kt-datatable__cell:last-child,
.custom-kt-datatable .kt-datatable__head .kt-datatable__row > .kt-datatable__cell:last-child {
    padding-right: 5px !important;
}

.custom-kt-datatable .kt-user-card-v2 .kt-user-card-v2__pic .kt-badge {
    width: 19px;
    height: 19px;
    line-height: 0.3rem;
    border-radius: 10%;
}

.patientSearchBadge .kt-user-card-v2 .kt-user-card-v2__pic .kt-badge {
    width: 30px;
    height: 30px;
    font-size: 1rem;
    font-weight: 500;
}

.patientSearchBadge .kt-user-card-v2 .kt-user-card-v2__pic .kt-badge--success {
    background: var(--main-green-color);
    color: #ffffff;
}

.femaleBadge {
    background: var(--main-green-color);
    color: #ffffff;
}

.maleBadge {
    background: #5975FF;
    color: #ffffff;
}

.custom-kt-datatable .kt-datatable__cell {
    padding: 8px 0px !important;
}

.keyword-shortcut-table tr td {
    color: #0a0a0a;
    font-size: 1rem;
    font-weight: 400;
}

.keyword-shortcut-table tr:first-child td {
    border: none;
}

.keyword-shortcut-table tr td:first-child {
    width: 68%;
}

.keyword-shortcut-table tr td:last-child {
    width: 32%;
}

#keyboard_shortcut_modal .modal-body {
    height: 450px;
    overflow: auto;
}

body.modal-open {
    overflow: hidden !important;
}

.table-action-btn {
    /*background: #E6E6E6 !important;*/
    background: var(--light-blue-background) !important;
}

.table-action-btn i {
    color: var(--second-blue-color) !important;
}

.table-action-btn:hover {
    background: var(--second-blue-color) !important;
}

.show > .btn.btn-clean.table-action-btn i, .btn.btn-clean.active.table-action-btn i, .btn.btn-clean.table-action-btn:active i, .btn.btn-clean:hover i,
.table-action-btn:hover i,
.table-action-btn.active i,
.table-action-btn:active i {
    color: #ffffff !important;
}

.ktdataTableActionCursor,
.no-sort {
    cursor: default !important;
}

/* Calendar State Button */
.calendar-state-button {
    /*margin: 4px 0px;*/
}

.calendar-state-button .btn {
    border-color: var(--second-blue-color);
    padding: 5px 5px;
    width: 100px;
    border-radius: 0.2rem;
    margin: 0px 2px;
    position: relative;
}

.status-number {
    font-size: 1.5rem;
    font-weight: 600;
    display: block;
    line-height: 1.5rem;
}

.status-title {
    font-size: 1rem;
    font-weight: 500;
}

.status-time {
    font-size: 0.9rem;
    display: block;
    line-height: 1rem;
    padding-top: 0.2rem;
    color: #0a0a0a;
    font-weight: 400;
    width: 100%;
}

.status-time:empty {
    display: none;
}

.status-active {
    background: transparent;
    height: 5px;
    border-bottom-right-radius: 0.4rem;
    border-bottom-left-radius: 0.4rem;
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
}

.masterDataTable .kt-datatable__head .kt-datatable__row > .kt-datatable__cell > span {
    color: var(--main-green-color) !important;
}

.chiefComplaintLevelTwoTitle .kt-datatable__head .kt-datatable__row > .kt-datatable__cell > span {
    color: var(--second-blue-color) !important;
}

.chiefComplaintLevelThreeTitle .kt-datatable__head .kt-datatable__row > .kt-datatable__cell > span,
.kt-dataTable-second-level-title .kt-datatable__head .kt-datatable__row > .kt-datatable__cell > span {
    color: #6c7293 !important;
}

.masterDataTable .slmicon-caret-down, .masterDataTable .slmicon-caret-right {
    font-size: 1.3rem !important;
    margin-right: 1rem;
}

#patientListFilterDatepicker .input-group-text {
    padding: 0.50rem 0.3rem !important;
}

.medicine-information {
    padding-top: 0.4rem;
}

.medicine-information-border {
    border-right: 1px solid #ccc;
}

.medicine-information .kt-widget3 .kt-widget3__item {
    margin-bottom: 0.2rem;
}

.medicine-information .kt-widget3 .kt-widget3__item .kt-widget3__header {
    padding-bottom: 0.2rem;
    margin-top: 0.2rem;
}

.medicine-information-container {
    border-bottom: 4px solid #f7f7fa;
    /* margin-top: 0.2rem; */
    padding-bottom: 0.5rem;
}

.medicine-information .table th {
    font-weight: 500;
    font-size: 1rem !important;
    color: var(--label-color);
    padding: 0.3rem;
}

.medicine-information .table td {
    padding: 0.3rem
}

.medicine-information .table .highlightDose {
    color: #5578eb;
    font-weight: 500;
}

.top-more-action .btn {
    width: 1.5rem !important;
}

.schedule-confirm {
    padding-left: 5px;
    font-size: 1.4rem;
    color: var(--label-color);
    cursor: pointer;
    display: block;
    height: 25px;
}

.schedule-confirm.bookPatientAppointment {
    padding-right: 0;
    padding-left: 5px;
    color: #ff675d;
}

.schedule-confirm.reception-reminder {
    color: #FF675D;
}

.schedule-confirm.reception-reminder.reception-reminder-indicator,
.reception-search-bell-icon.schedule-confirm.reception-reminder {
    width: 1.75rem;
    height: 1.75rem;
    padding-left: 0;
    border-radius: 0.5rem;
    background: #fdecec;
    color: #ff675d;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    line-height: 1;
}

.schedule-confirm.reception-reminder.reception-reminder-indicator i,
.reception-search-bell-icon.schedule-confirm.reception-reminder i {
    color: inherit;
    font-size: 0.95rem;
    line-height: 1;
}

.reminder-bell-svg {
    width: 0.95rem;
    height: 0.95rem;
    display: block;
}

.billing-currency-value {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.billing-rupee-svg {
    width: 0.6875rem;
    height: 0.875rem;
    flex-shrink: 0;
}

.schedule-confirm.active {
    padding-left: 5px;
    font-size: 1.4rem;
    color: var(--main-green-color);
    cursor: pointer;
}

.changePatientStatus {
    cursor: pointer;
}

.patient-name-grid {
    width: 19%;
}

.mobile-no-grid {
    width: 10%;
}

.doctor-name-grid {
    width: 20%;
}

.followup-type-grid {
    width: 15%;
}

.visit-date-grid {
    width: 14%;
}

.visit-type-grid {
    width: 12%;
}

.patient-type-grid {
    width: 10%;
}

.visit-reason-grid {
    width: 15%;
}

.counselor-name-grid {
    width: 14%;
}

.procedure-name-grid {
    width: 17%;
}

.procedure-date-grid {
    width: 20%;
}

.calendar-grid-container .calendar-grid:first-child {
    padding-left: 1rem !important;
}

.calendar-grid-container .calendar-grid:last-child {
    padding-right: 1rem !important;
}

.select2-container--default .select2-results__option.select2-results__option--highlighted:not([aria-selected='true']) {
    color: #ffffff !important;
    background: var(--second-blue-color) !important;
}

.select2-container--default .select2-results__option.select2-results__option--highlighted .pres-button {
    color: #FFFFFF !important;
}

/*.bootstrap-select .dropdown-menu.inner > li:hover > a {*/
/*    background: #fff !important;*/
/*}*/

/*.bootstrap-select .dropdown-menu.inner > li:hover > a .text {*/
/*    color: var(--second-blue-color) !important;*/
/*}*/

.bootstrap-select .dropdown-menu.inner > li.selected:hover > a {
    background: var(--second-blue-color) !important;
}

.bootstrap-select .dropdown-menu.inner > li.selected:hover > a span.check-mark,
.bootstrap-select .dropdown-menu.inner > li.selected > a .text {
    color: #ffffff !important;
}

.desktop-more-action .dropdown-item {
    padding: 0.7rem 1.2rem;
    color: var(--second-blue-color);
}

.desktop-more-action .dropdown-item i {
    margin-right: 0rem !important;
    color: var(--second-blue-color) !important;
    font-size: 1.1rem !important;
    width: 2rem;
    text-align: center;
    vertical-align: middle;
}

.desktop-more-action .dropdown-item.active i {
    color: #ffffff !important;
}

.desktop-more-action .dropdown-item:hover {
    background: var(--second-blue-color);
    color: #ffffff !important;
}

.desktop-more-action .dropdown-item:hover i {
    color: #ffffff !important;
}

.desktop-more-action {
    display: inline-block;
}

.total-discount-input input {
    border-top-right-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
}

.total-discount-input span:nth-child(2) {
    border-top-right-radius: 3px !important;
    border-bottom-right-radius: 3px !important;
}

::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
    height: 8px;
}

::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0, 0, 0, .5);
    -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5) !important;
}

.prescription-dropdown-border .dropdown-menu:not(.inner) {
    border: 2px solid #E6E5E5 !important;
}

#calculatorSwitchToggle.active {
    background: var(--main-green-color);
    color: #ffffff;
}

.diagnosis-template-content .history-text {
    border-bottom: 0.07rem dashed #ebedf2;
}

.diagnosis-template-content .history-text:last-child {
    border-bottom: none;
}

.diagnosis-template-content {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

#calculatorSwitchToggle.btn.active {
    background: var(--main-green-color);
}

.kt-portlet.kt-portlet-history {
    height: calc(100%);
}

.kt-portlet.kt-portlet-history .kt-portlet__head {
    padding: 0px;
    border-bottom: none;
    min-height: unset;
    background: #e2e4ed;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
}

.kt-portlet.kt-portlet-history .kt-portlet__head .title {
    color: #0a0a0a;
}

.kt-portlet.kt-portlet-history .kt-portlet__head .title {
    font-weight: 500;
    padding-left: .6rem;
}

.kt-portlet.kt-portlet-history.diagnosis-portlet .kt-portlet__head {
    background: rgba(255, 103, 93, 0.8);
}

.kt-portlet.kt-portlet-history.diagnosis-portlet .kt-portlet__head .title {
    color: #ffffff;
}

.history-title-level-2 {
    background: #ffffff;
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0px;
    padding: 5px;
    color: #48465b;
}

.history-title-level-3 {
    color: #48465b;
    font-size: 1.1rem;
    font-weight: 600;
}

.history-title-level-4 {
    font-size: 1rem;
    font-weight: 500;
    margin: 0px;
    padding: 5px;
    color: #000;
}

.history-portlet-level-3 .kt-portlet-history {
    box-shadow: none;
}

.history-portlet-level-3 .kt-portlet__head {
    border: none !important;
}

.history-portlet-level-3 .kt-portlet__body {
    padding: 5px 0px !important;
}

.history-portlet-level-4 .kt-portlet__body {
    padding: 0px 5px !important;
}

.kt-portlet.kt-portlet-history .kt-portlet__head.kt-portlet-head-level-2 {
    border-bottom: 1px solid #48465b;
    background: transparent;
}

#calculator_Policy p {
    color: #0a0a0a;
}

.custom-border-right {
    border-right: 1px solid #d4d4d4 !important;
}

.no-action-table td {
    padding-bottom: 8px !important;
    padding-top: 8px !important;
}

.kt-user-card-v2 .kt-user-card-v2__pic .kt-badge.report-badges {
    width: 35px;
    height: 35px;
    border-radius: 4px;
    font-size: 1rem;
}

.kt-datatable.kt-table-header-background thead th {
    background: var(--main-green-color) !important;
}

/*pooja start*/
.masterDataTable.kt-datatable.kt-table-header-background thead th,
.masterDataTable.kt-table-header-background thead th {
    background: none !important;
    border-bottom: 2px solid var(--main-green-color);
}

.masterDataTable.kt-table-header-background .kt-datatable__head .kt-datatable__row > .kt-datatable__cell > span {
    color: #000000 !important;
}

.masterDataTable.kt-datatable.kt-datatable--default.kt-datatable--subtable > .kt-datatable__table > .kt-datatable__body .kt-datatable__row-subtable {
    border: 1px solid var(--main-green-color);
}

/*pooja end */
.masterDataTable.kt-table-header-background .kt-datatable__head .kt-datatable__row > .kt-datatable__cell > span > i {
    color: #e6e5e5 !important;
}

.kt-dataTable-second-level-title .kt-datatable__table thead tr th {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

.export-btn-container {
    padding-top: 4px;
}


.vaccineDetailTable .kt-datatable__table > .kt-datatable__head .kt-datatable__row > .kt-datatable__cell:first-child,
.vaccineDetailTable .kt-datatable__table > .kt-datatable__body .kt-datatable__row > .kt-datatable__cell:first-child {
    padding-left: 20px !important;
}

.kt-aside-menu .kt-menu__nav > .kt-menu__item.kt-menu__item--active > .kt-menu__link:before {
    /*position: absolute;*/
    /*background: var(--main-green-color);*/
    /*height: 100%;*/
    /*width: 3px;*/
    /*content: '';*/
    /*top: 0px;*/
    /*left: 0px;*/
}

.submenuWrapText {
    max-width: 195px;
}

.btn.custom-btn-xs {
    padding: 0.3rem 1rem;
}

/* Patient Search Design */
.patient-search-container .kt-portlet {
    margin-bottom: 20px;
}

.patient-search-container .kt-portlet .kt-portlet__head {
    min-height: 60px;
}

.patient-search-container .kt-portlet .kt-portlet__body {
    padding: 15px;
}

.kt-widget.patient-search-card.kt-widget--user-profile-2 .kt-widget__head .kt-widget__media .kt-widget__pic {
    width: 50px;
    height: 50px;
    font-size: 1.3rem;
    border-radius: 4px;
}

.kt-widget.patient-search-card.kt-widget--user-profile-2 .kt-widget__head {
    margin-top: unset;
    margin-bottom: 10px;
    align-items: start;
}

.kt-widget.patient-search-card.kt-widget--user-profile-2 .kt-widget__head .kt-widget__info .kt-widget__username {
    font-size: 1.3rem;
}

.favourite-case-icon {
    position: absolute;
    right: 20px;
    top: 5px;
    font-size: 1.2rem;
    color: var(--label-color);
}

.favourite-case-icon.favourite-case-active {
    color: #FF675D;
}

.patient-card-font {
    font-weight: 500;
    font-size: 1rem;
}

.patient-card-font-success {
    color: var(--main-green-color);
}

.patient-card-font-dark {
    color: #48465b;
}

.patient-search-filter {
    position: absolute;
    right: 0;
    z-index: 9999;
    background-color: #fff;
    -webkit-box-shadow: 0 15px 50px 0 rgba(82, 63, 105, .15);
    box-shadow: 0 15px 50px 0 rgba(82, 63, 105, .15);
    padding: 10px;
    border-radius: 4px;
    width: 85%;
    -webkit-animation: kt-header-menu-submenu-fade-in .3s ease 1, kt-header-menu-submenu-move-down .3s ease-out 1;
    animation: kt-header-menu-submenu-fade-in .3s ease 1, kt-header-menu-submenu-move-down .3s ease-out 1;
}

.kt-demo-panel-overlay.patient-search-filter-overlay {
    background: rgba(0, 0, 0, 0.70);
}

.btn.patient-search-card-btn-success, .btn.patient-search-card-btn-success:hover {
    background: var(--main-green-color);
    color: #ffffff;
    cursor: text !important;
}

.patient-search-filter .noUi-horizontal .noUi-tooltip {
    top: 120%;
    bottom: unset;
}

.patient-search-visit-dare-btn {
    width: 100%;
    justify-content: center;
    margin-left: 0px !important;
}

.patient-card-font-danger span {
    background: #FFEFEE;
    color: #ff675d;
    padding: 3px 10px;
}

.patient-search-card.kt-widget.kt-widget--user-profile-2 .kt-widget__footer {
    margin-top: 1rem;
}

.patient-search-filter .mt-6 {
    margin-top: 4rem !important;
}

.patient-filter-nav.kt-nav .kt-nav__item > .kt-nav__link .kt-nav__link-text {
    color: #3F4254;
    font-weight: 500;
    font-size: 1.1rem;
}

.patient-filter-nav.kt-nav .kt-nav__item > .kt-nav__link .kt-nav__link-icon {
    color: #3F4254;
}

.patient-filter-nav.kt-nav .kt-nav__separator {
    border-bottom: 1px solid #e6e5e5;
    margin: 0.75rem 0 0.75rem 0;
}

.patient-filter-nav.kt-nav .kt-nav__item > .kt-nav__link {
    padding: 0.55rem 1rem;
}

.patient-filter-nav .noUi-horizontal .noUi-tooltip {
    top: 120%;
    bottom: unset;
}

.patient-filter-nav.kt-nav .kt-nav__item.patient-filter-nav-item-active > .kt-nav__link .kt-nav__link-icon,
.patient-filter-nav.kt-nav .kt-nav__item.patient-filter-nav-item-active > .kt-nav__link .kt-nav__link-text,
.kt-nav .kt-nav__item.patient-filter-nav-item-active > .kt-nav__link .kt-nav__link-arrow {
    color: var(--second-blue-color);
}

.patient-filter-nav.kt-nav .kt-nav__item:hover .kt-nav__link {
    background-color: unset !important;
}

.custom-portlet--height-fluid {
    height: 100%;
}

.referred-to-icon {
    font-size: 2.5rem;
    color: #EEA200;
}

.referral-later-template-tools .bootstrap-select {
    width: 220px !important;
}

.kt-datatable.kt-datatable--default > .kt-datatable__table > .kt-datatable__head .kt-datatable__row > .kt-datatable__cell.kt-datatable__cell--sort .fa,
.customSortIcon,
.masterDataTable.kt-table-header-background .kt-datatable__head .kt-datatable__row > .kt-datatable__cell > span > .fa,
.kt-datatable.kt-datatable--default > .kt-datatable__table > .kt-datatable__head .kt-datatable__row > .kt-datatable__cell.kt-datatable__cell--sort i, .kt-datatable.kt-datatable--default > .kt-datatable__table > .kt-datatable__body .kt-datatable__row > .kt-datatable__cell.kt-datatable__cell--sort i, .kt-datatable.kt-datatable--default > .kt-datatable__table > .kt-datatable__foot .kt-datatable__row > .kt-datatable__cell.kt-datatable__cell--sort i {
    font-size: 1.2rem !important;
}

.masterDataTable.kt-table-header-background .kt-datatable__head .kt-datatable__row > .kt-datatable__cell.kt-datatable__cell--sorted > span > i {
    color: var(--main-green-color) !important;
}

.kt-dataTable-second-level-title .kt-datatable__table {
    min-height: unset !important;
}

/*.kt-datatable-sort-icon{*/
/*    font-size: 1rem !important;*/
/*}*/
#new-client-panel {
    /*width: 575px !important;*/
    /*right: -580px !important;*/
}

#new-client-panel.kt-quick-panel--on {
    /*right: 0 !important;*/
}

.breadcrumb-header span {
    font-size: 1rem;
    font-weight: 500;
    color: var(--label-color);
}

.breadcrumbs-separator {
    padding: 0px 5px;
}

.breadcrumbs-separator i {
    position: relative;
    top: 2px;
}

.kt-subheader .kt-subheader__main.breadcrumb-header .kt-subheader__title {
    font-family: 'DM Sans', sans-serif;
    font-size: 25px;
    font-weight: 700;
    color: var(--text-primary, #0a0a0a);
    letter-spacing: -0.2px;
}

.patient-search-sidebar {
    background: #fff;
    border-radius: 4px;
}

.feedbackRadio img {
    /*height: 20px;*/
    /*width: 60px;*/
}

#feedback-past-history-content .kt-widget4 .kt-widget4__item .kt-widget4__info .kt-widget4__text {
    color: #0a0a0a;
    font-weight: 400;
}

.diagnosis-summary p {
    color: #0a0a0a;
    font-weight: 500;
    margin-bottom: 0.5rem;
    line-height: 15px;
}

.diagnosis-summary {
    margin-top: 1rem;
}

.diagnosis-summary-content.kt-notification .kt-notification__item {
    border-bottom: 1px solid #d4cdcd;
}

.diagnosis-note-summary p {
    color: var(--label-color);
    font-weight: 500;
}

.diagnosis-summary-content.kt-notification .kt-notification__item:hover:after {
    color: var(--main-green-color);
    font-weight: 800;
}

.diagnosis-summary-content.kt-notification .kt-notification__item .kt-notification__item-details .kt-notification__item-title {
    color: #5d75f8;
}

.diagnosis-summary-content {
    max-height: 450px;
    overflow: auto;
    margin-bottom: 1rem;
}

.kt-datatable__row--subtable-expanded .kt-badge.kt-badge--unified-info {
    color: #ffffff;
    background: var(--second-blue-color);
}

.client-location-user-table table .kt-datatable__head tr th:nth-child(2) {
    padding-left: 1rem !important;
}

.client-location-user-table table .kt-datatable__head tr th:nth-child(2) {
    padding-left: 1rem !important;
}

#patientListFilterDatepicker input:first-child {
    border-color: var(--second-blue-color) !important;
    border-right: none;
}

#patientListFilterDatepicker input:last-child {
    border-color: var(--second-blue-color) !important;
    border-left: none;
}

#patientListFilterDatepicker .input-group-append {
    border-top: 1px solid var(--second-blue-color) !important;
    border-bottom: 1px solid var(--second-blue-color) !important;
}

.filter-active-border {
    border: 1px solid var(--second-blue-color) !important;
}

.walk-in-patient-phone-container .country-dropdown {
    width: 27%;
}

.walk-in-patient-phone-container .twitter-typeahead {
    width: 58%;
}

.ipd-phone-number-container.typeahead .twitter-typeahead {
    /*width: 75%;*/
    display: flex !important;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
}

.walk-in-patient-phone-container .input-group-text {
    padding: 0.1rem .8rem;
    /*background-color: #f4f4f4;*/
}

.walk-in-patient-phone-container .twitter-typeahead input {
    border-radius: 0 !important;
}

.ipd-phone-number-container .twitter-typeahead input {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.walk-in-patient-phone-container .input-group .bootstrap-select.form-control .dropdown-toggle,
.ipd-phone-number-container .input-group .bootstrap-select.form-control .dropdown-toggle {
    line-height: 1.4;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.is-whatsapp-icon-container {
    display: flex;
    /* align-content: center; */
    /* justify-content: center; */
    /*align-items: center;*/
}

.is-whatsapp-icon,
.is-whatsapp-icon:hover {
    font-size: 1.5rem;
    color: var(--label-color);
    vertical-align: middle;
}

.is-whatsapp-icon-container.active {
    background: #00E676 !important;
}

.is-whatsapp-icon-container.active,
.is-whatsapp-icon-container.active i {
    color: #FFFFFF !important;
}

.patient-search-pagination-toolbar .bootstrap-select > .dropdown-toggle.btn-light {
    font-size: 1rem;
    font-weight: 500;
    border: 0 !important;
    color: var(--second-blue-color);
    background: #e4e8f7;
}

.patient-search-pagination-toolbar .bootstrap-select > .dropdown-toggle.btn-light:hover {
    border: 0 !important;
    color: #ffffff !important;
    background: var(--second-blue-color);
}

.patient-search-pagination-toolbar {
    width: 20%;
}

.patient-search-pagination-toolbar .pagination__desc {
    white-space: nowrap;
}

.advise-btn.language-btn {
    padding: 0.3rem 0.7rem !important;
}

.vital-grid {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 10%;
    flex: 0 0 10%;
    max-width: 10%;
    padding-right: 3px;
    padding-left: 3px;
}

.vital-grid-5 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
    padding-right: 3px;
    padding-left: 3px;
}

.history-list-item {
    font-size: 1.05rem;
    font-weight: 500;
    color: #0a0a0a;
    /*border-bottom: 1px dashed #c7c4c4;*/
    padding: 0.5rem 0rem 0.4rem;
}

.history-list-item:last-child {
    border-bottom: none;
}

.appointment-list-diagnosis {
    background: var(--light-blue-background);
    padding: 2px 8px;
    margin-right: 8px;
    border-radius: 4px;
    font-weight: 500 !important;
}

.appointment-list-facetime {
    font-size: 1rem;
}

.doctor-timeline-container {
    height: 85vh;
    overflow: auto;
}

.doctor-timeline-duration-gap {
    font-size: 1rem;
    display: block;
    text-align: center;
    font-weight: 400;
    color: #ff675d !important;
}

.kt-timeline-v2 .kt-timeline-v2__items .kt-timeline-v2__item .kt-timeline-v2__item-time.doctor-timeline-time {
    color: #646c9a;
    font-size: 1.15rem;
}

.kt-timeline-v2 .kt-timeline-v2__items .kt-timeline-v2__item .kt-timeline-v2__item-text.doctor-timeline-text {
    display: table-cell;
    vertical-align: top;
    font-size: 1.1rem;
    padding: 0.35rem 0 0 6rem;
    color: #0a0a0a;
    font-weight: 400;
    width: 100%;
}

.kt-timeline-v2.kt-doctor-timeline:before {
    left: 5.85rem;
}

.kt-timeline-v2.kt-doctor-timeline .kt-timeline-v2__items .kt-timeline-v2__item .kt-timeline-v2__item-cricle {
    left: 5.12rem;
}

.doctor-timeline-summary {
    display: flex;
    justify-content: center;
    margin-bottom: 0.5rem;
}

.doctor-timeline-summary .doctor-timeline-summary-item {
    padding: 0px 0.5rem;
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    display: flex;
}

.doctor-timeline-summary .doctor-timeline-summary-item i {
    font-size: 1.8rem;
    padding-right: 0.3rem;
}

.doctor-timeline-summary .doctor-timeline-summary-item span {
    color: var(--label-color);
    font-weight: 500;
}

.doctor-timeline-summary-time {
    font-size: 1.3rem;
    display: block;
}

.doctor-timeline-summary-revenue {
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.doctor-timeline-item-container {
    border-radius: 4px;
    padding: 1rem;
    background-color: #F3F6F9;
    position: relative;
}

.doctor-timeline-item-container:after {
    position: absolute;
    content: '';
    width: 0;
    height: 0;
    top: 15px;
    left: -30px;
    right: auto;
    margin-left: 3px;
    border-right: solid 10px #F3F6F9;
    border-bottom: solid 17px transparent;
    border-left: solid 17px transparent;
    border-top: solid 17px transparent;
}

.doctor-timeline-diagnosis, .doctor-timeline-revenue {
    padding-left: 20px;
}

.doctor-timeline-revenue {
}

.btn.doctor-timeline-revenue-container, .btn.doctor-timeline-revenue-container:hover {
    align-self: start;
    display: inherit;
    padding: 0;
    font-weight: 600;
    background: transparent !important;
    font-size: 1.2rem;
}

.doctor-timeline-item-container .doctor-timeline-diagnosis-text {
    color: #0a0a0a;
    font-size: 1rem;
    margin: 0;
    padding-left: 25px;
}

.doctor-timeline-item-container .kt-widget4 .kt-widget4__item .kt-widget4__pic {
    align-self: start;
    padding-right: 0.5rem !important;
}

.doctor-timeline-item-container .kt-widget4__item {
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

.doctor-timeline-item-container .kt-widget4 .kt-widget4__item .kt-widget4__info .kt-widget4__username {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--font-black-color);
}

.doctor-timeline-item-container .kt-widget4 .kt-widget4__item .kt-widget4__info .kt-widget4__text {
    color: #0a0a0a;
}

.doctor-timeline-item-container .kt-badge {
    width: 19px;
    height: 19px;
    line-height: 0.3rem;
    border-radius: 10%;
}

.doctor-timeline-date-navigation .btn {
    padding: 0.40rem 0.8rem;
    background: #bbbbbb;
}

.date-navigator-left .btn {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

/*.kt-doctor-timeline .kt-timeline-v2__item{*/
/*    margin-bottom: 1.15rem !important;*/
/*}*/
.advise-list {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.advise-list .advise-list-text {
    width: 68%;
    padding-right: 0.5rem;
}

.advise-list .advise-list-text p {
    margin: 0;
}

.advise-list .advise-list-btn {
    width: 32%;
    text-align: left;
    margin-bottom: 0.5rem;
}

.template_advise {
    color: #54b8ad;
    font-weight: 500;
}

.sos-label {
    font-size: 1.2rem !important;
    margin-top: -3px;
}

/*Pharmacy Referral Portal*/
.referral-portal-section-portlet {
    /*border: 2px solid #a2a5b9;*/
    /*border: 3px solid #e1e3ec;*/
    margin-bottom: 1rem;
    /*border-top-color: var(--main-green-color);*/
}

#patient-procedure-container .referral-portal-section-portlet:last-child {
    margin-bottom: 0;
}

.referral-portal-section-portlet:last-child {
    margin-bottom: 0;
}

.kt-portlet.referral-portal-section-portlet .referral-portal-section-portlet-head {
    /*min-height: 58px;*/
    /*background: var(--light-blue-background);*/
    border-bottom: 1px solid #ebedf2;
    padding: 0.5rem 1.5rem;
}

.referral-patient-detail-content {
    /*display: flex;*/
    /*align-items: center;*/
}

.referral-patient-detail-item span {
    font-size: 1.2rem;
    color: #0a0a0a;
    font-weight: 400;
}

.referral-patient-detail-item .separator {
    font-weight: 500;
    color: var(--main-green-color);
    padding: 0rem 0.2rem;
}

.referral-prescription-route {
    font-weight: 500;
    font-size: 1rem !important;
}

.referral-patient-contact-text {
    display: inline-block;
}

.referral-portal-section-portlet-head .kt-portlet__head-actions .btn {
    margin: 0px 1px;
}

.pharmacy-status-action-container {
    text-align: right;
}

.pharmacy-status-timing, .laboratory-status-timing {
    text-align: center;
    color: var(--second-blue-color) !important;
}

.referral-pharmacy-timing span {
    display: block;
    font-weight: 500;
    color: #0a0a0a;
    text-align: center;
    font-size: 1.2rem;
}

.referral-profile-separator {
    background: #d0d0d0;
    width: 1px;
}

.external-pharmacy-form {
    background: #FFFFFF;
    border-radius: 4px;
    padding: 35px 20px;
}

.external-pharmacy-table-container {
    background: #fff;
    margin: 20px;
}

.external-pharmacy {
    align-items: center;
    display: flex;
    justify-content: center;
    height: 100%;
    width: 100%;
}

.external-pharmacy-form h2 {
    text-align: center;
    font-size: 1.5rem;
    color: #646c9a;
    font-weight: 500;
    margin-bottom: 1.5rem;
}

.header-logo-img {
    margin-bottom: 2rem;
}

.header-logo-img img {
    width: 225px;
}

.investigation-content .btn {
    width: 100%;
    text-align: left;
    margin-bottom: 0px !important;
}

.investigation-output-container label {
    margin-bottom: 5px;
    font-weight: 500;
    font-size: 1rem;
    color: var(--label-color);
}

/*.external-pharmacy-table tr:not(last-child){*/
/*    border-bottom: 1px solid #000000;*/
/*}*/
/*.external-pharmacy-form .form-control{*/
/*    height: 40px;*/
/*    font-size: 2rem;*/
/*    line-height: 2rem;*/
/*}*/
.kt-font-custom {
    color: #93a2dd !important;
}

.investigation-result-container .form-group {
    margin-bottom: 0rem;
}

.kt-quick-panel#investigation-report-result-panel {
    width: 600px;
    right: -610px;
}

.kt-quick-panel#investigation-report-result-panel.kt-quick-panel--on {
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    right: 0;
}

#vital-sign-panel.kt-quick-panel--on {
    z-index: 9999;
}

.kt-portlet-remove-style {
    box-shadow: none !important;
    border: none !important;
}

.calendar-context-menu {
    width: 245px;
}

.kt-nav.calendar-context-menu .kt-nav__item > .kt-nav__link .kt-nav__link-icon {
    color: #6c7293;
    flex: 0 0 22px;
}

.kt-nav.calendar-context-menu .kt-nav__item > .kt-nav__link .kt-nav__link-text {
    font-size: 1.1rem;
    font-weight: 500;
}

/* timing Clock */
.jq-ci,
.jq-ci * {
    -webkit-transition: .4s ease;
    transition: .4s ease;
}

.jq-ci-p {
    display: none;
}

.jq-ci-hide {
    opacity: 0.1;
    -webkit-pointer-events: none;
    pointer-events: none;
}

/* parent */
.jq-ci {
    width: 180px;
    height: 180px;
    background: #ebedf2;
    border: 1px solid #eee;
    display: inline-block;
    border-radius: 50%;
    position: relative;
    font: 0 sans-serif;
    text-align: center;
    overflow: hidden;
    user-select: none;
    cursor: default;
}

/* time display */
.jq-ci-t {
    position: absolute;
    z-index: 2;
    height: 24px;
    width: 100px;
    text-align: center;
    top: 45%;
    left: 50%;
    margin-top: -12px;
    margin-left: -50px;
    font-size: 18px;
}

.jq-ci-t_h,
.jq-ci-t_m,
.jq-ci-t_ap {
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
}

.jq-ci-t_h,
.jq-ci-t_m {
    line-height: 24px;
}

.jq-ci-t_ap {
    font-size: 1.5rem;
    position: relative;
    overflow: hidden;
    height: 24px;
    /*width: 24px;*/
    /* margin-right: -16px; */
    display: block;
    margin: 0 auto;
    color: var(--main-green-color);
}

.jq-ci-t_ap > span {
    display: block;
    line-height: 24px;
    -webkit-transition: .2s ease;
    transition: .2s ease;
}

.jq-ci-t_ap--s > span {
    -webkit-transform: translateY(-24px);
    transform: translateY(-24px);
}

/* hour/minute faces */
.jq-ci-h,
.jq-ci-m {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    visibility: hidden;
    opacity: 0;
    -webkit-transform: scale(0.7);
    transform: scale(0.7);
    border-radius: 50%;
}

.jq-ci--h > .jq-ci-h,
.jq-ci--m > .jq-ci-m {
    visibility: visible;
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

.jq-ci--m > .jq-ci-h {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
}

/*.jq-ci-m { background-color: #fafafa; }*/

/* hour/minute orbs */
.jq-ci-h_h,
.jq-ci-m_m {
    font-size: 14px;
    display: inline-block;
    width: 28px;
    line-height: 28px;
    top: 50%;
    left: 50%;
    margin: -15px 0 0 -15px;
    border-radius: 50%;
    cursor: pointer;
    position: absolute;
}

.jq-ci-h_h:hover,
.jq-ci-m_m:hover {
    background-color: var(--main-green-color);
    color: #fff;
}

.jq-ci-h_h--s,
.jq-ci-m_m--s {
    color: #fff !important;
    background-color: var(--main-green-color) !important;
}

/* hour/minute positioning */
.jq-ci-h_h--1,
.jq-ci-m_m--5 {
    -webkit-transform: rotate(-60deg) translate(70px) rotate(60deg);
    transform: rotate(-60deg) translate(70px) rotate(60deg);
}

.jq-ci-h_h--2,
.jq-ci-m_m--10 {
    -webkit-transform: rotate(-30deg) translate(70px) rotate(30deg);
    transform: rotate(-30deg) translate(70px) rotate(30deg);
}

.jq-ci-h_h--3,
.jq-ci-m_m--15 {
    -webkit-transform: rotate(0deg) translate(70px) rotate(0deg);
    transform: rotate(0deg) translate(70px) rotate(0deg);
}

.jq-ci-h_h--4,
.jq-ci-m_m--20 {
    -webkit-transform: rotate(30deg) translate(70px) rotate(-30deg);
    transform: rotate(30deg) translate(70px) rotate(-30deg);
}

.jq-ci-h_h--5,
.jq-ci-m_m--25 {
    -webkit-transform: rotate(60deg) translate(70px) rotate(-60deg);
    transform: rotate(60deg) translate(70px) rotate(-60deg);
}

.jq-ci-h_h--6,
.jq-ci-m_m--30 {
    -webkit-transform: rotate(90deg) translate(70px) rotate(-90deg);
    transform: rotate(90deg) translate(70px) rotate(-90deg);
}

.jq-ci-h_h--7,
.jq-ci-m_m--35 {
    -webkit-transform: rotate(120deg) translate(70px) rotate(-120deg);
    transform: rotate(120deg) translate(70px) rotate(-120deg);
}

.jq-ci-h_h--8,
.jq-ci-m_m--40 {
    -webkit-transform: rotate(150deg) translate(70px) rotate(-150deg);
    transform: rotate(150deg) translate(70px) rotate(-150deg);
}

.jq-ci-h_h--9,
.jq-ci-m_m--45 {
    -webkit-transform: rotate(180deg) translate(70px) rotate(-180deg);
    transform: rotate(180deg) translate(70px) rotate(-180deg);
}

.jq-ci-h_h--10,
.jq-ci-m_m--50 {
    -webkit-transform: rotate(210deg) translate(70px) rotate(-210deg);
    transform: rotate(210deg) translate(70px) rotate(-210deg);
}

.jq-ci-h_h--11,
.jq-ci-m_m--55 {
    -webkit-transform: rotate(240deg) translate(70px) rotate(-240deg);
    transform: rotate(240deg) translate(70px) rotate(-240deg);
}

.jq-ci-h_h--0,
.jq-ci-m_m--0 {
    -webkit-transform: rotate(270deg) translate(70px) rotate(-270deg);
    transform: rotate(270deg) translate(70px) rotate(-270deg);
}

.btn.btn-icon.btn-sm.medicine-timing-clock {
    height: 2rem;
    width: 2rem;
}

.timing-prefix .input-group-text.customDisable {
    color: #212529;
    background-color: #e1e1ef;
    border-color: #e1e1ef;
    opacity: 0.65;
}

.timing-prefix .input-group-text {
    background-color: #bbbbbb;
    color: #0a0a0a;
    border-top-right-radius: 4px !important;
    border-bottom-right-radius: 4px !important;
}

.dropdown-menu.medicine-timing-clock-dropdown {
    padding: 1rem;
}

.p-separator {
    padding: 0px 0.5rem;
    color: var(--main-green-color);
    font-weight: 800;
}

. > route-name-title {
    color: var(--second-blue-color);
    font-weight: 500;
}

.clock-picker-result.customDisable {
    opacity: 0.65;
}

.kt-aside-menu .kt-menu__nav > .kt-menu__section .kt-menu__section-text.custom-kt-menu__section-text {
    color: #a2a3b7;
    font-size: 1.1rem;
}

.kt-aside-menu .kt-menu__nav > .kt-menu__section {
    margin: 0 !important;
    height: 20px !important;
}

.kt-aside-menu .kt-menu__nav > .kt-menu__section:first-child {
    margin: 0 !important;
    border: none;
}

.kt-aside-menu-separator {
    border-top: 1px solid #504e4e;
    margin: 0.3rem 0rem;
}

.operative-team-container {
    min-height: 85px;
    padding-right: 10px;
}

/* custom five column grid system */
.col-five-grid,
.col-sm-five-grid,
.col-md-five-grid,
.col-lg-five-grid,
.col-xl-five-grid {
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}

.col-five-grid {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
}

@media (min-width: 540px) {
    .col-sm-five-grid {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }
}

@media (min-width: 720px) {
    .col-md-five-grid {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }
}

@media (min-width: 960px) {
    .col-lg-five-grid {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }
}

@media (min-width: 1140px) {
    .col-xl-five-grid {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }
}

/* new physiotherapy panel design*/
.kt-quick-panel.physiotherapy-panel {
    width: 650px;
    right: -655px;
}

.physiotherapy-panel .physiotherapy-item-container {
    height: 70vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 3px;
}

.physiotherapy-panel .physiotherapy-item,
.referral_modal .physiotherapy-item {
    margin-bottom: 1.2rem;
}

.physiotherapy-panel .physiotherapy-item-container .kt-portlet {
    -webkit-box-shadow: 0px 1px 15px 1px rgba(230, 229, 229, 0.76);
    box-shadow: 0px 1px 15px 1px rgba(230, 229, 229, 0.76);
}

.physiotherapy-panel .physiotherapy-item-container .kt-portlet__body,
.referral_modal .physiotherapy-item-container .kt-portlet__body {
    padding: 10px;
}

.physiotherapy-panel .physiotherapy-item .physiotherapy-item-title {
    color: var(--main-green-color);
    margin-bottom: 0.8rem;
    font-size: 1.1rem;
}

.prescription-toolbar-icon-size {
    font-size: 1.4rem;
}

.medical-history-row {
    align-items: center;
    margin-bottom: 0.3rem;
}

.medical-history-row .kt-radio-inline .kt-radio {
    margin-bottom: 0;
}

.medical-history-row input[type='text'].form-control {
    /*height: calc(1em + 1rem + 2px);*/
}

.patient-search-card .kt-widget__footer .btn {
    padding: 0.6rem 0 !important;
}

.kt-widget3 .sms-template-item.kt-widget3__item .kt-widget3__header {
    padding-bottom: 0.2rem;
    margin-top: 1rem;
}

.kt-widget3 .sms-template-item.kt-widget3__item .kt-widget3__header .kt-widget3__info {
    padding-left: 0;
    display: flex;
}

.kt-widget3 .sms-template-item.kt-widget3__item .kt-widget3__header .kt-widget3__info .kt-widget3__username {
    font-size: 1.1rem;
    margin-bottom: 0;
    color: #0a0a0a;
}

.kt-widget3 .sms-template-item.kt-widget3__item .kt-widget3__body .kt-widget3__text {
    color: #0a0a0a;
}

.sms-template-container {
    height: 65.5vh;
    overflow: auto;
    padding-right: 0.8rem;
    margin-bottom: 0.5rem;
}

.kt-checkbox.patient-select-checkbox span {
    height: 30px;
    width: 30px;
}

.sms-center-sidebar.nav-tabs.nav-tabs-line {
    /*padding: 5px 10px;*/
    border: none;
    margin-bottom: 0px;
}

.sms-group-widget.kt-widget2 {
    padding: 15px 0px 10px;
}

.sms-group-widget.kt-widget2 .kt-widget2__item .kt-widget2__checkbox {
    padding: 0 0 0 1rem;
}

.sms-group-widget.kt-widget2 .kt-widget2__item {
    border-bottom: 1px solid #e6e5e5;
    margin-bottom: 1rem;
    /* justify-content: unset; */
    display: block;
    padding-bottom: 0.5rem;
}

.sms-group-widget.kt-widget2 .kt-widget2__item:last-child {
    border-bottom: 0;
    margin-bottom: 0
}

.sms-group-widget.kt-widget2 .kt-widget2__item .kt-widget2__checkbox .kt-checkbox {
    font-size: 1.1rem;
    margin-bottom: 0;
}

.sms-group-widget.kt-widget2 .kt-widget2__item .kt-widget2__info {
    color: var(--main-green-color);
    font-weight: 500;
    padding-left: 3.3rem;
}

.medical-history-row {
    align-items: center;
    margin-bottom: 0.3rem;
}

.medical-history-row .kt-radio-inline .kt-radio {
    margin-bottom: 0;
}

.upload-document-panel {
    width: 775px !important;
    right: -780px !important;
}

.upload-document-panel.kt-quick-panel--on {
    right: 0px !important;
}

.upload-btn-container {
    text-align: center;
    border: 2px dashed var(--second-blue-color);
    /* box-shadow: 0 0 black; */
    padding: 1rem;
    position: relative;
    height: 60vh;
}

.upload-btn-child-container {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}

.file-not-available {
    color: #595d6e;
    margin: 0 0 5px 0;
    padding: 0;
    font-weight: 500;
    font-size: 1.2rem;
    text-align: center;
}

.uploaded-file-list {
    height: 60vh;
    overflow-y: auto;
}

.kt-quick-panel.SMS-panel {
    width: 750px;
    right: -755px;
}

.sms-textarea.form-control {
    border-radius: 0;
    border: 0;
    background: #ffffff;
    height: 82%;
}

.sms-length {
    color: #FF675D;
    padding-top: 3px;
    font-weight: 500;
    background: #fff;
    height: 8%;
    text-align: center;
}

.kt-portlet .kt-portlet__head.sms-sidebar-header {
    padding: 0 10px;
    min-height: 50px;
}

.sms-table-total-member {
    color: var(--second-blue-color);
    font-weight: 400;
}

.medical-history-custom-group-append .input-group-text {
    cursor: pointer;
}

.medical-history-custom-group-append .input-group-text.active {
    background: var(--main-green-color);
    color: #ffffff;
}

.sms-group-sidebar-footer {
    padding: 0px 10px 10px;
    text-align: right;
}

.sms-status-nav.kt-nav .kt-nav__item {
    display: inline-block;
    margin-right: 1.1rem;
}

.sms-status-nav.kt-nav .kt-nav__item i {
    font-size: 1.1rem;
    color: var(--second-blue-color);
    padding-right: 0.2rem;
}

.sms-status-nav.kt-nav .kt-nav__item .kt-nav__link-text {
    font-weight: 600;
    color: var(--second-blue-color);
    font-size: 1.1rem;
}

.kt-quick-panel.investigation-result-table-modal {
    max-width: 65vw;
    right: -9999px;
    overflow-x: hidden;
}

.investigation-result-table-container {
    max-height: 75vh;
    overflow: auto;
    position: relative;
}

.investigation-result-table-container table {
    position: relative;
    border-collapse: collapse;
    table-layout: fixed;
}

.investigation-result-table-container table td,
.investigation-result-table-container table th {
    padding: 0.3rem 0.50rem;
    color: #0a0a0a;
    font-weight: 500;
}

.investigation-result-table-container table thead th {
    position: -webkit-sticky; /* for Safari */
    position: sticky;
    top: 0;
    color: #0a0a0a;
    font-weight: 600;
    font-size: 1rem;
    padding: 0.7rem 0.50rem;
    border-bottom: 2px solid var(--main-green-color);
    background: #ffffff;
}

.investigation-result-table-container tbody tr:last-child td,
.investigation-result-table-container tbody tr:last-child th {
    border-bottom: 1px solid #ebedf2;
}

.investigation-result-table-container table thead th:first-child {
    left: 0;
    z-index: 1;
}

.investigation-result-table-container table tbody th {
    vertical-align: middle;
    position: -webkit-sticky; /* for Safari */
    position: sticky;
    left: 0;
    /*background: #F4F5F8;*/
    color: #0a0a0a;
    font-weight: 500;
    /*border-right: 1px solid #CCC;*/
}

.investigation-result-table-container table tbody .investigation-result-input {
    height: calc(1.1em + 1rem + 2px);
    background: none;
    border: 1px solid #eaeaea;
    text-align: center;
}

.investigation-result-table-container table tbody textarea.investigation-result-input {
    height: auto;
    line-height: 1rem;
    resize: none;
    min-height: calc(1.1em + 1rem + 2px);
    max-height: 100px;
}

.investigation-result-table-container .investigation-table-result {
    text-align: center;
    vertical-align: middle;
}

.natal-history-text {
    white-space: nowrap;
}

.history-text > .natal-history-text:not(:last-child):after {
    content: ", ";
}

.visitor-registration-button {
    border-top: 2px solid #6c7293;
}

.diagnosis-name.diagnosis-active .card-header .card-title {
    background-color: rgba(27, 197, 189, 0.2) !important;
    color: var(--main-green-color) !important;
    border: none;
    /*background-color: rgb(27, 197, 189) !important;*/
    /*color: rgb(255, 255, 255) !important;*/
    /*border: none;*/
}

.diagnosis-name.diagnosis-active .card-header .card-title:after {
    color: var(--main-green-color) !important;
    font-weight: 700;
}

.shorthand-template-dropdown-container .shorthand-name {
    color: #1e1e2d !important;
    font-weight: bold;
}

.shorthand-template-dropdown-container .shorthand-template-name {
    color: #1e1e2d !important;
}

.shorthand-template-dropdown-container .shorthand-diagnosis-name {
    color: var(--main-green-color) !important;
    padding-left: .5em;
    font-size: 80%;
    font-weight: 400;
}

.shorthand-template-dropdown-container .filter-option .shorthand-diagnosis-name {
    display: none;
}

.shorthand-template-dropdown-container .bootstrap-select .dropdown-menu.inner > li.active > a .text .shorthand-name,
.shorthand-template-dropdown-container .bootstrap-select .dropdown-menu.inner > li.active > a .text .shorthand-template-name {
    color: #ffffff !important;
}

.bootstrap-select .dropdown-menu.inner > li.selected > a .text, .bootstrap-select .dropdown-menu.inner > li:hover > a .text .shorthand-name,
.bootstrap-select .dropdown-menu.inner > li.selected > a .text, .bootstrap-select .dropdown-menu.inner > li:hover > a .text .shorthand-diagnosis-name,
.bootstrap-select .dropdown-menu.inner > li.selected > a .text, .bootstrap-select .dropdown-menu.inner > li:hover > a .text .shorthand-template-name {
    color: #FFFFFF !important;
}

.investigation-panel-container .investigation-count {
    color: var(--main-green-color) !important;
    padding-left: .5em;
    font-size: 80%;
    font-weight: 400;
}

.investigation-panel-container .panel-name {

    color: #1e1e2d !important;
}

.investigation-chart-add-new-date {
    margin-left: auto;
    text-align: right;
}

#empty-investigation-chart-table {
    text-align: center;
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 250px;
}

.patient-list-dropdown.dropdown-menu.dropdown-menu-xl {
    width: 500px;
}

.patient-list-dropdown .kt-head {
    padding: 1rem 0rem;
    background-position: center;
}

.patient-list-container {
    position: absolute;
    border-radius: 4px;
    -webkit-box-shadow: 0px 0px 50px 0px rgba(82, 63, 105, 0.15);
    box-shadow: 0px 0px 50px 0px rgba(82, 63, 105, 0.15);
    font-size: 1rem;
    color: #212529;
    text-align: left;
    list-style: none;
    background-color: #fff;
    width: 500px;
    z-index: 999;
    right: 10px;
}

.patient-list-container .kt-head {
    padding: 1rem;
    background-position: center;
}

.patient-list-body {
    padding: 1rem;
    margin-right: 0.5rem;
}

.patient-list-status-tab {
    cursor: pointer;
}

.patient-list-content {
    margin-top: 1rem;
}

.patient-list-widget .patient-list-item.kt-widget4__item .kt-widget4__pic {
    padding-right: 0.5rem;
    width: 12%;
}

.patient_list_status {
    width: 22%;
}

.patient-list-widget .patient-list-item.kt-widget4__item .kt-widget4__pic .kt-badge {
    width: 19px;
    height: 19px;
    line-height: 0.3rem;
    border-radius: 10%;
}

.patient-list-item-patient-type {
    width: 25px;
    padding-right: 2px;
    display: inline-block;
    text-align: center;
}

.patient-list-widget .patient-list-item.kt-widget4__item .kt-widget4__info .kt-widget4__username {
    color: #0a0a0a;
    color: var(--label-color);
    font-weight: 500;
    font-size: 1.1rem;
}

.patient-list-widget .patient-list-item.kt-widget4__item .kt-widget4__info .kt-widget4__text {
    color: #0a0a0a;
    font-weight: 400;
}

.patient-list-panel.kt-quick-panel {
    top: 0;
    width: 500px;
    right: -505px;
}

.patient-list-panel.kt-quick-panel.kt-quick-panel--on {
    right: 0;
}

.patient-list-panel.kt-quick-panel .kt-quick-panel__close {
    top: 1.5rem;
}

.patient-list-count-badge.kt-badge {
    font-size: 1rem;
    color: var(--second-blue-color);
    border-radius: 3px;
    position: relative;
    background: var(--light-blue-background);
    margin-left: 3px;
}

.patient-list-widget .patient-list-item.kt-widget4__item .kt-widget4__info .kt-widget4__text.patient-list-timing {
    font-size: 1.1rem;
    font-weight: 600;
    color: #0a0a0a;
}

.patient-list-timing-small {
    font-size: 0.9rem;
}

.ps > .ps__rail-y > .ps__thumb-y {
    width: 7px !important;
}

/*.top-header-diagnosis-vital-container .top-header-vitals-container:nth-child(2){*/
/*    border-left: 1px solid var(--main-green-color);*/
/*}*/
.top-header-diagnosis-vital-container .top-header-vitals-container.show-border {
    border-left: 1px solid var(--main-green-color);
    padding-left: 3px;
}

/* #investigation-result-table-modal .modal-dialog sizing removed — the Investigation Chart was
   converted to the global .slm-drawer shell (slm-theme-v1.css); the ID rule's margin/min/max-width
   fought the drawer's fixed-right positioning at (1,1,0). */

.patientDetailLink {
    cursor: pointer;
    width: 68%;
    padding-right: 0.5rem;
}

.kt-aside-menu-separator {
    border-top: 1px solid #504e4e;
    margin: 0.3rem 0rem;
}

/*pooja start*/
.tableBottomBorder.kt-datatable > .kt-datatable__table > .kt-datatable__head .kt-datatable__row {
    background: none !important;
    border-bottom: 2px solid var(--main-green-color);
}

.table-MyOffice-Filter-Icon.kt-datatable > .kt-datatable__table > .kt-datatable__head .kt-datatable__row > .kt-datatable__cell > span > i {
    color: var(--main-green-color) !important;
}

.table-myOffice-Filter-Text.kt-datatable.kt-datatable--default > .kt-datatable__table > .kt-datatable__head .kt-datatable__row > .kt-datatable__cell.kt-datatable__cell--sorted > span {
    color: black !important;
}

.table-Filter-Text.kt-datatable > .kt-datatable__table > .kt-datatable__head .kt-datatable__row > .kt-datatable__cell > span {
    color: black !important;
}

.analytics-table-sub-data {
    color: #909090;
}

#vital-sign-panel-from-calendar.kt-quick-panel, #vital-sign-panel.kt-quick-panel {
    width: 600px;
    right: -605px;
}

#vital-sign-panel-from-calendar.kt-quick-panel.kt-quick-panel--on, #vital-sign-panel.kt-quick-panel.kt-quick-panel--on {
    right: 0;
}

.btn-icon-vital {
    height: 0.25rem !important;
}

.vital-seprator {
    margin: 0.25rem 0 !important;
}

.vital-temp-dropdown.bootstrap-select > .dropdown-toggle.btn-light {
    background: #ffffff;
    width: 40px;
    border: none !important;
}

.sms-decription-settings {
    color: #000000;
    font-size: 0.95rem;
    vertical-align: middle;
    font-weight: 300;
}

.settings-div {
    display: inline-block;
}

/*pooja end*/
.visit_reason_option_check .select2-results__option[aria-disabled="true"] {
    display: none;
}

/*.select2-container--default .select2-search--inline .select2-search__field {*/
/*    width: initial !important;*/
/*}*/
/*.select2-container--default .select2-search--inline .select2-search__field {*/
/*    width: initial !important;*/
/*}*/
.patient-list-dropdown.dropdown-menu.dropdown-menu-xl {
    width: 500px;
}

.patient-list-dropdown .kt-head {
    padding: 1rem 0rem;
    background-position: center;
}

.patient-list-container {
    position: absolute;
    border-radius: 4px;
    -webkit-box-shadow: 0px 0px 50px 0px rgba(82, 63, 105, 0.15);
    box-shadow: 0px 0px 50px 0px rgba(82, 63, 105, 0.15);
    font-size: 1rem;
    color: #212529;
    text-align: left;
    list-style: none;
    background-color: #fff;
    width: 500px;
    z-index: 999;
    right: 10px;
}

.patient-list-container .kt-head {
    padding: 1rem;
    background-position: center;
}

.patient-list-body {
    padding: 1rem;
}

.patient-list-status-tab {
    cursor: pointer;
}

.patient-list-content {
    margin-top: 1rem;
}

.patient-list-widget .patient-list-item.kt-widget4__item .kt-widget4__pic {
    padding-right: 0.5rem;
}

.patient-list-widget .patient-list-item.kt-widget4__item .kt-widget4__pic .kt-badge {
    width: 19px;
    height: 19px;
    line-height: 0.3rem;
    border-radius: 10%;
}

.patient-list-item-patient-type {
    width: 20px;
    padding-right: 2px;
    display: inline-block;
    text-align: center;
}

.patient-list-widget .patient-list-item.kt-widget4__item .kt-widget4__info .kt-widget4__username {
    color: #0a0a0a;
    color: var(--label-color);
    font-weight: 500;
    font-size: 1.1rem;
}

.patient-list-widget .patient-list-item.kt-widget4__item .kt-widget4__info .kt-widget4__text {
    color: #0a0a0a;
    font-weight: 400;
}

.patient-list-panel.kt-quick-panel {
    top: 0;
    width: 500px;
    right: -505px;
}

.patient-list-panel.kt-quick-panel.kt-quick-panel--on {
    right: 0;
}

.patient-list-panel.kt-quick-panel .kt-quick-panel__close {
    top: 1.5rem;
}

.patient-list-count-badge.kt-badge {
    font-size: 1rem;
    color: var(--second-blue-color);
    border-radius: 3px;
    position: relative;
    background: var(--light-blue-background);
    margin-left: 3px;
}

.patient-list-widget .patient-list-item.kt-widget4__item .kt-widget4__info .kt-widget4__text.patient-list-timing {
    font-size: 1.1rem;
    font-weight: 600;
    color: #0a0a0a;
}

.patient-list-timing-small {
    font-size: 0.9rem;
}

.ps > .ps__rail-y > .ps__thumb-y {
    width: 7px !important;
}

.online-appointment-patient-list {
    border-radius: 4px;
}

.online-appointment-patient-list .kt-widget4__item {
    padding: 1rem;
}

.online-appointment-patient-list .kt-widget4 .kt-widget4__item:first-child {
    padding-top: 1rem;
}

.online-appointment-patient-list .kt-widget4 .kt-widget4__item:last-child {
    padding-bottom: 1rem;
}

.online-appointment-patient-list .kt-widget4__item.new-item {
    background: #f7f8fa;
}

.online-appointment-patient-list .kt-widget4__item.new-item .new-appointment-indicator {
    display: inline-block;
}

.online-appointment-patient-list .kt-widget4__item.old-item .new-appointment-indicator {
    display: none;
}

.online-appointment-patient-list.prescription-notification-list {
    /*margin: .7rem;*/
    /*height: 86vh;*/
    /*overflow: auto;*/
}

.dropdown-menu.dropdown-menu-xl.prescription-notification-dropdown {
    width: 450px;
    background: #F2F3F8;
}

.online-appointment-patient-list.prescription-notification-list .patient-list-item.kt-widget4__item .kt-widget4__info .kt-widget4__username {
    color: #0A0A0A;
    font-weight: 600;
}

.online-appointment-patient-list.prescription-notification-list .patient-list-item.kt-widget4__item .kt-widget4__info .icon-container {
    font-size: 1.3rem;
    color: var(--second-blue-color);
    margin-right: 0.5rem;
}

.online-appointment-patient-list.prescription-notification-list .patient-list-item.kt-widget4__item {
    padding: .5rem !important;
    box-shadow: 0px 1px 15px 1px rgb(230 229 229 / 76%);
    margin-bottom: .5rem;
    border: none;
    background: #fff;
    border-radius: 3px;
    border-left: 3px solid transparent;
    cursor: pointer;
}

.online-appointment-patient-list.prescription-notification-list .kt-widget4__item.new-item {
    /*border: 1px solid var(--main-green-color);*/
    background: #DDF1EF;
    border-left: 3px solid var(--main-green-color);
    /*border: 1px solid rgb(27 197 189 / 34%);*/
}

.online-appointment-list-btn:focus {
    outline: none;
    box-shadow: none !important;
}

.prescription-count-badge {
    top: -8px;
    right: -5px;
}

.online-appointment-list-btn.kt-pulse {
    color: #ff675d;
    border: 1px solid;
}

.online-appointment-list-btn.kt-pulse .kt-pulse__ring {
    border-color: #ff675d;
}

.online-appointment-list-btn.kt-pulse:hover {
    color: #ffffff;
    background-color: #ff675d;
}

/*------------------------------------------------------------------------------------------------------------------------*/

.medicine-dosage-container {
    /*overflow-y: auto;*/
    overflow-x: hidden;
    /*height: 70%;*/
}

.medicine-dosage-container-height {
    height: 285px;
    overflow-y: auto;
}

.medicine-dosage-html-row .kt-portlet {
    box-shadow: 0px 1px 15px 1px rgba(230, 229, 229, 0.76);
    margin: 8px;
    position: relative;
}

.medicine-dosage-html-row .kt-portlet .kt-portlet__body {
    padding: 10px 18px;
}

.medicine-dosage-html-row .form-group label {
    margin-bottom: auto;
}

/*.form-control.addMedicineDefaultDuration {*/
/*    height: 2.2rem;*/
/*}*/

.btn.add-medicine-food-button {
    background: #e6e5e5;
    color: #212529;
    height: calc(1.5em + 1rem + 2px);
    line-height: 1;
}

.btn.add-medicine-food-button.active {
    background: var(--main-green-color);
    color: #ffffff;
}

.prescription-medicine-list-container .dropdown-menu.inner .dropdown-header,
.history-medicine-list-container .dropdown-menu.inner .dropdown-header {
    padding-left: 10px;
    padding-right: 10px;

}

.prescription-medicine-list-container .dropdown-menu.inner .opt.dropdown-item,
.history-medicine-list-container .dropdown-menu.inner .opt.dropdown-item {
    padding-left: 25px;
    padding-top: 0;
}

.prescription-medicine-list-container .dropdown-menu.inner .dropdown-header span,
.history-medicine-list-container .dropdown-menu.inner .dropdown-header span {
    font-size: 1.15rem;
    color: #0a0a0a;
    font-weight: 400;
}

.noPatientQueueData {
    float: left;
    margin-left: 95px;
    padding: 2px;
}

.removeRowBtnContainer {
    position: absolute;
    top: -5px;
    right: 0;
}

.removeRowBtnContainer i.removeIcon {
    color: #FF675D;
    padding: 0;
    font-size: 1.3rem;
}

#medicine-panel {
    width: 500px !important;
    right: -5883px !important;
}

#medicine-panel.kt-quick-panel--on {
    right: 0px !important;
}

.dateErrorBorder {
    color: red;
    width: 100%;
    margin-top: 0.25rem;
    font-size: 1rem;
    display: block;
    margin-left: 10px;
}

/* Prescription Table */
.prescription-create-table .prescription-medicine-number {
    width: 1%;
}

.prescription-create-table .prescription-medicine-type {
    width: 8%;
}

.prescription-create-table .prescription-medicine-name {
    width: 12%;
}

.prescription-create-table .prescription-medicine-dose {
    width: 6%;
}

.prescription-create-table .prescription-medicine-timing {
    width: 10%;
}

.prescription-create-table .prescription-medicine-duration {
    width: 7%;
}

.prescription-create-table .past-history-medicine-duration {
    width: 9%;
}

.prescription-create-table .current-history-medicine-duration {
    width: 9%;
}

.prescription-create-table .prescription-medicine-note {
    width: 17%;
}

.prescription-create-table .prescription-action {
    width: 5%;
}

.prescription-create-table tbody tr td {
    vertical-align: middle;
    color: #0a0a0a;
    font-weight: 500;
    padding: .5rem .3rem;
}

.compact-prescription-sr-no {
    display: block;
    width: 100%;
    height: calc(1.5em + 1rem + 2px);
    padding: 0.60rem 0.40rem;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
    color: #3a4045;
    background-clip: padding-box;
    border: 1px solid #e6e5e5;
    border-radius: 3px;
    text-align: center;
}

.prescription-create-table .prescription-medicine-timing-btn {
    padding: 0.40rem 0.65rem;
}

.prescription-create-table.table thead th {
    color: #0a0a0a;
    background: none;
    font-size: 1.1rem;
    vertical-align: middle;
    border-bottom: 2px solid var(--main-green-color);
    font-weight: 500;
    padding: 0.5rem .3rem;
}

.prescription-create-table.table .form-control:not(.medicine-),
.prescription-create-table.table .dropdown-toggle.btn-light {
    background: none;
}

.prescription-create-table .prescription-medicine-timing-btn {
    background: #E6E5E5;
    border-color: #e6e5e5;
}

.prescription-advise-followUp-content .kt-portlet--height-fluid {
    margin-bottom: 20px;
}

.prescription-global-duration-dropdown {
    display: inline-block;
}

.prescription-global-duration-dropdown .dropdown-item {
    padding: 5px 10px;
    color: #0a0a0a;
}

.prescription-global-duration-dropdown-input {
    padding: 5px 10px;
}

.prescription-global-duration-dropdown .dropdown-menu {
    min-width: 9rem;
}

.past-prescription-global-duration-dropdown {
    display: inline-block;
}

.past-prescription-global-duration-dropdown .dropdown-item {
    padding: 5px 10px;
    color: #0a0a0a;
}

.past-prescription-global-duration-dropdown-input {
    padding: 5px 10px;
}

.past-prescription-global-duration-dropdown .dropdown-menu {
    min-width: 9rem;
}

.current-prescription-global-duration-dropdown {
    display: inline-block;
}

.current-prescription-global-duration-dropdown .dropdown-item {
    padding: 5px 10px;
    color: #0a0a0a;
}

.current-prescription-global-duration-dropdown-input {
    padding: 5px 10px;
}

.current-prescription-global-duration-dropdown .dropdown-menu {
    min-width: 9rem;
}

.old-prescription-global-duration-dropdown {
    display: inline-block;
}

.old-prescription-global-duration-dropdown .dropdown-item {
    padding: 5px 10px;
    color: #0a0a0a;
}

.old-prescription-global-duration-dropdown-input {
    padding: 5px 10px;
}

.old-prescription-global-duration-dropdown .dropdown-menu {
    min-width: 9rem;
}

.treatment-global-duration-dropdown {
    display: inline-block;
}

.treatment-global-duration-dropdown .dropdown-item {
    padding: 5px 10px;
    color: #0a0a0a;
}

.treatment-global-duration-dropdown-input {
    padding: 5px 10px;
}

.treatment-global-duration-dropdown .dropdown-menu {
    min-width: 9rem;
}

.OPD-patient-detail-container #patient-detail-main-content {
    /*margin-bottom: 2rem;*/
}

.OPD-patient-detail-container .kt-wizard-v3.kt-wizard-v3--white .kt-wizard-v3__wrapper {
    background-color: #edeef5;
    /*box-shadow: 0 0 20px 1px rgb(193 190 190);*/
    /*border: 2px solid var(--main-green-color);*/
    /*border-radius: 4px;*/
    /*border-top-left-radius: 0;*/
}

.OPD-patient-detail-container #patient-detail-main-tab-header {
    /*background: #edeef5;*/
}

.OPD-patient-detail-container .solomo360-wizard.kt-wizard-v3 .kt-wizard-v3__nav {
    border-bottom: 2px solid var(--main-green-color);
}

.OPD-patient-detail-container .kt-wizard-v3 .kt-wizard-v3__wrapper .kt-form .kt-wizard-v3__content {
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 0;
}

.tooltip .tooltip-inner {
    background: #111827;
    color: #fff;
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.2px;
    padding: 5px 10px;
    border-radius: 8px;
    max-width: 240px;
    white-space: normal;
    text-align: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

/* ═══ A NOTE'S OWN MARKUP MUST NOT RESIZE THE BUBBLE ═══
   Every tooltip in the app is initialised with `html: true` — the delegated one on the layout
   (dashboard_refactored.blade.php:508) and the per-page re-inits beside it (master.js:386,453;
   common-function.js:512; newcalendar + ipd/schedule/common-schedule.js). That is deliberate and
   cannot simply be turned off: some tooltips carry real markup, notably the OPD calendar's
   `.slm-appt-card`, which renders a whole card inside `.tooltip-inner`.

   The cost is that anything typed into a note is parsed as HTML. The reminder and reception-note
   fields are plain `<textarea>`s (reception_reminder_modal.blade.php:20), so a user can save
   `<h1>Test</h1>` — and Bootstrap's own `h1 { font-size: 2.5rem }` then renders it at 32.5px,
   taking the bubble from 41×26 to 80×56. Measured against the built bundle after it was
   reported on IPD (2026-08-27); the OPD queue reads the same `personalNote` through the same
   `html: true` tooltip and was one note away from the same thing.

   So headings and block margins are neutralised here and the bubble keeps ONE size whatever the
   note contains. `<strong>`, `<em>` and `<br>` are LEFT ALONE on purpose — they are the markup a
   note might legitimately want, and none of them changes the box.
   ⚠ TWO THINGS KEEP THIS OFF THE RICH TOOLTIPS, and both are needed.
     • `:not(:has(.slm-appt-card))` excludes the OPD calendar's card outright. The same guard is
       already used on the chip styling at :17083, so the pattern and its browser support are
       established here.
     • `div` IS NOT IN THE LIST. `.slm-appt-card` is built from `div`s and `span`s
       (reception-schedule.js:390) and its own type comes from class selectors at (0,2,0);
       `.tooltip .tooltip-inner div` would be (0,2,1) and would out-specify every one of them,
       flattening the card to 11px. A note typed into a `<textarea>` realistically carries
       headings, `<p>`, or a list — not bare `div`s — so nothing is lost by leaving it out.
   Weight is otherwise not in question: Bootstrap's `h1` is (0,0,1) against this rule's (0,3,1),
   so source order between style.css and slm-theme-v1.css does not come into it. */
.tooltip:not(:has(.slm-appt-card)) .tooltip-inner :is(h1, h2, h3, h4, h5, h6) {
    font-size: inherit;
    /* Not `inherit`: a heading in a note is still meant to read as emphasis, and 600 against the
       bubble's own 500 is as far as that can go without changing the line box. */
    font-weight: 600;
    line-height: inherit;
    margin: 0;
}
.tooltip:not(:has(.slm-appt-card)) .tooltip-inner :is(p, blockquote, pre) {
    font-size: inherit;
    font-family: inherit;
    line-height: inherit;
    margin: 0;
}
.tooltip:not(:has(.slm-appt-card)) .tooltip-inner p + p {
    margin-top: 4px;
}
.tooltip:not(:has(.slm-appt-card)) .tooltip-inner :is(ul, ol) {
    margin: 0;
    padding-left: 16px;
    text-align: left;
}

.tooltip.bs-tooltip-top .arrow::before,
.tooltip.bs-tooltip-auto[x-placement^="top"] .arrow::before {
    border-top-color: #111827;
}

.tooltip.bs-tooltip-bottom .arrow::before,
.tooltip.bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
    border-bottom-color: #111827;
}

.tooltip.bs-tooltip-left .arrow::before,
.tooltip.bs-tooltip-auto[x-placement^="left"] .arrow::before {
    border-left-color: #111827;
}

.tooltip.bs-tooltip-right .arrow::before,
.tooltip.bs-tooltip-auto[x-placement^="right"] .arrow::before {
    border-right-color: #111827;
}

.solomo360-wizard.kt-wizard-v3 .kt-wizard-v3__nav .kt-wizard-v3__nav-items .kt-wizard-v3__nav-item {
    position: relative;
    /*border-bottom: 1px solid transparent;*/
    /*margin-right: 5px;*/
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
    /*background: #e1e4ec;*/
}

.solomo360-wizard.kt-wizard-v3 .kt-wizard-v3__nav .kt-wizard-v3__nav-items .kt-wizard-v3__nav-item .kt-wizard-v3__nav-body {
    color: #6c7293;
    /* border-bottom: none; */
    padding: .6rem .5rem;
}

.solomo360-wizard.kt-wizard-v3 .kt-wizard-v3__nav .kt-wizard-v3__nav-items .kt-wizard-v3__nav-item .kt-wizard-v3__nav-body .kt-wizard-v3__nav-label {
    font-size: 1.2rem;
    font-weight: 600;
}

.solomo360-wizard.kt-wizard-v3 .kt-wizard-v3__nav .kt-wizard-v3__nav-items .kt-wizard-v3__nav-item[data-ktwizard-state="current"] {
    background: var(--main-green-color);
    /*border-top: 3px solid #0c9e97;*/
    /*border-bottom: 1px solid var(--second-blue-color);*/
    /*border: 2px solid var(--main-green-color);*/
    /*border-bottom: 0;*/
}

.solomo360-wizard.kt-wizard-v3 .kt-wizard-v3__nav .kt-wizard-v3__nav-items .kt-wizard-v3__nav-item:hover .kt-wizard-v3__nav-body {
    color: var(--main-green-color);
}

/*.solomo360-wizard.kt-wizard-v3 .kt-wizard-v3__nav .kt-wizard-v3__nav-items .kt-wizard-v3__nav-item[data-ktwizard-state="current"] .kt-wizard-v3__nav-body:after {*/
/*    content: "";*/
/*    display: block;*/
/*    position: absolute;*/
/*    bottom: -2px;*/
/*    height: 2px;*/
/*    left: 0;*/
/*    right: 0;*/
/*    background: #eaebf1;*/
/*    width: 100%;*/
/*}*/

/*.solomo360-wizard.kt-wizard-v3 .kt-wizard-v3__nav .kt-wizard-v3__nav-items .kt-wizard-v3__nav-item[data-ktwizard-state="current"] .kt-wizard-v3__nav-body:after,*/
/*.solomo360-wizard.kt-wizard-v3 .kt-wizard-v3__nav .kt-wizard-v3__nav-items .kt-wizard-v3__nav-item:hover .kt-wizard-v3__nav-body:after {*/
/*    content: "";*/
/*    display: block;*/
/*    position: absolute;*/
/*    border-radius: 3px 3px 0 0;*/
/*    bottom: -1px;*/
/*    height: 3px;*/
/*    left: 12px;*/
/*    right: 12px;*/
/*    background: var(--second-blue-color);*/
/*}*/

.solomo360-wizard.kt-wizard-v3 .kt-wizard-v3__nav .kt-wizard-v3__nav-items .kt-wizard-v3__nav-item[data-ktwizard-state="current"] .kt-wizard-v3__nav-body {
    color: #FFFFFF;
    border-bottom: 0;
}

.bootstrap-select .dropdown-menu.inner > li > a .text {
    font-size: 1.06rem;
}

.procedure-table {
    table-layout: auto;
}

.procedure-table.table thead tr td {
    border: none;
    border-bottom: 2px solid var(--main-green-color);
    font-weight: 600;
    color: #0a0a0a;
    font-size: 1.2rem;
}

.procedure-table.table.table-bordered thead tr td {
    border-top: none !important;
}

.procedure-table td {
    border: 1px solid #d4d4d4;
}

.procedure-table tr td:first-child {
    border-left: 0;
}

.procedure-table tr td:last-child {
    border-right: 0;
}

.procedure-table textarea {
    background: transparent;
    border: 1px solid #e6e5e5;
}

.procedure-table.table td {
    color: #0a0a0a;
    font-weight: 400;
    font-size: 1.1rem;
    padding: 0.50rem;
}

.procedure-table-name {
    width: 8%;
}

.procedure-table-counselor {
    width: 10%
}

.procedure-table-instruction {
    width: 13%;
}

.procedure-table-action {
    width: 3%;
}

.procedure-table-title {
    width: 5%;
}

.procedure-table-timing {
    width: 12%;
    height: 20px;
}

.procedure-table-details {
    width: 20%;
}

.procedure-table-column-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/*.procedure-table-icon-container {*/
/*    width: 24px;*/
/*    display: inline-block;*/
/*}*/

.procedure-table-column-center {
    text-align: center;
}

.procedure-table-icon {
    /*color: var(--label-color);*/
    font-size: 1.5rem;
    cursor: pointer;
    vertical-align: middle;
}

.procedure-table-icon.active {
    color: var(--main-green-color);
}

/*pooja */
.appointMentIcon {
    font-size: 1.72rem !important;
}

.box-shadow-graph {
    box-shadow: 1px 0px 1px 7px rgba(230, 229, 229, 0.76) !important;
}

.calendar-menu-patient {
    border-bottom: 1px solid lightgray;
}

.kt-nav .calender-menu-schedule.kt-nav__item:hover {
    background-color: #cfedfb;
}

.kt-nav .calender-menu-schedule.kt-nav__item:hover:not(.kt-nav__item--disabled):not(.kt-nav__item--sub) > .kt-nav__link {
    background-color: #cfedfb;
}

.kt-nav .calender-menu-schedule.kt-nav__item:hover:not(.kt-nav__item--disabled):not(.kt-nav__item--sub) > .kt-nav__link .kt-nav__link-icon {
    color: var(--second-blue-color);
}

.kt-nav .calender-menu-schedule.kt-nav__item:hover:not(.kt-nav__item--disabled):not(.kt-nav__item--sub) > .kt-nav__link .kt-nav__link-text {
    color: var(--second-blue-color);
}

.kt-nav .kt-nav__item.calender-menu-schedule {
    position: relative;
}

.kt-nav .calender-menu-schedule.kt-nav__item > .kt-nav__link:after {
    content: "";
    background: #1b78c5;
    height: 70%;
    width: 5px;
    display: block;
    position: absolute;
    left: 0;
    border-radius: 10px;
    top: 6px;
    opacity: 0;
}

.kt-nav .calender-menu-schedule.kt-nav__item:hover:not(.kt-nav__item--disabled):not(.kt-nav__item--sub) > .kt-nav__link:after {
    opacity: 1;
}

.more-action-dropdown.nav-link.dropdown-toggle:after {
    content: unset !important;
}

.analytics-dropdown-doctor .btn {
    display: inline-block !important;
}

.doctor-name-visit-reason,
.doctor-consultation-type {
    padding-left: 10px !important;
    font-size: 1.15rem !important;
    color: #000 !important;;
}

/* New Billing */
.bill-table {
    /*border: 1px solid #e6e5e5;*/
    border-spacing: 0;
    border-collapse: unset;
}

.bill-table.table .thead-light th {
    color: #ffffff;
    font-size: 1.2rem;
    vertical-align: middle;
    font-weight: 500;
    background: var(--main-green-color);
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.bill-table tbody .form-control,
.bill-table tbody .form-control[readonly]:focus,
.bill-result-table tbody .form-control,
.bill-result-table tbody .form-control[readonly]:focus {
    background: none;
    border: 1px solid #eaeaea;
}

.bill-table tbody .form-control:focus,
.bill-result-table tbody .form-control:focus {
    border-color: var(--second-blue-color);
}

.bill-table tbody tr td {
    vertical-align: middle;
    color: #0a0a0a;
    font-weight: 500;
}

.bill-table tbody tr td .btn-clean i {
    color: #FF675D;
}

.bill-table tbody tr td.bill-category {
    background: #f7f8fa;
    font-size: 1.1rem;
    font-weight: 600;
    padding: 0.8rem 0.75rem !important;
}

.bill-header .top-header-item-list .top-header-item {
    font-weight: 400;
}

.bill-table tfoot tr td {
    border-bottom: 1px solid #ebedf2;
}

.bill-discount-percentage.form-control {
    width: 45%;
    display: inline-block;
    float: left;
    text-align: right;
}

.bill-discount-rupees.form-control {
    width: 50%;
    margin-left: 5px;
    display: inline-block;
    text-align: right;
}

.bill-result-table-container table tr td {
    padding: 0.30rem 0.75rem;
    vertical-align: middle;
}

.bill-result-table-container table tr:first-child td {
    border-top: 0;
}

.bill-total-label {
    margin-bottom: 0;
    color: #595d6e;
    font-weight: 500;
    font-size: 1.06rem;
    width: 200px;
}

.bill-total-value {
    color: #48465b;
    font-weight: 600;
    font-size: 1.2rem;
    text-align: right;
}

.bill-total-value .form-control {
    text-align: right;
}

.bill-result-status {
    background: var(--main-green-color);
    color: #fff;
    text-align: center;
    padding: 0.70rem;
    font-size: 1.2rem;
    font-weight: 500;
    display: inline-block;
    width: 100%;
}

.bill-result-table.table td {
    border-top: 0;
}

.bill-discount-percentage, .bill-tax-percentage {
    width: 200px;
}

.bill-text-right .form-control {
    text-align: right;
}

.bill-discount-input-group .input-group-text,
.bill-tax-input-group .input-group-text {
    background-color: #e6e5e5;
    border-color: #e6e5e5;
}

.bill-discount-input-group .input-group-text i,
.bill-tax-input-group .input-group-text i {
    color: #656e74;
    font-size: 1rem;
}

.bill-table .bootstrap-select .dropdown-menu.inner > li > a [class*=" flaticon-"] {
    color: #48465b;
}

.bill-table .bootstrap-select .dropdown-menu.inner > li:hover > a [class*=" flaticon-"] {
    color: var(--second-blue-color);
}

.bill-table .bootstrap-select .dropdown-menu.inner > li.selected:hover > a [class*=" flaticon-"] {
    color: #adb1c7;
}

/* modifybill row*/
.bill-table tr.disableEditRow {
    background: #eef0f8;
    opacity: 0.8;
}

.previous-bill-menu.dropdown-menu {
    width: 600px;
}

.previous-bill-list-container {
    padding: 1rem 0;
    max-height: 20rem;
    overflow: auto;
}

.previous-bill-list-container .kt-widget5 .kt-widget5__item {
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    cursor: pointer;
    color: var(--label-color);
}

.previous-bill-list-container .kt-widget5 .kt-widget5__item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
}

.previous-bill-list-container .kt-widget5 .kt-widget5__item .kt-widget5__content .kt-widget5__info span:nth-child(even) {
    font-weight: 400;
}

.previous-bill-list-container .kt-widget5 .kt-widget5__item .kt-widget5__content .kt-widget5__stats .kt-widget5__number {
    color: #0a0a0a;
}

.previous-bill-list-container .kt-widget5 .kt-widget5__item .kt-widget5__content .kt-widget5__title {
    color: #0a0a0a;
}

.previous-bill-list-container .kt-widget5 .kt-widget5__item .kt-widget5__content .kt-widget5__stats:last-child .kt-widget5__number {
    color: var(--main-green-color);
}

.invoice-title-container {
    text-align: left;
}

.invoice-title-container h2 {
    font-size: 2.2rem;
    font-weight: 600;
    color: var(--main-green-color);
    letter-spacing: 2px;
    text-transform: uppercase;
}

.invoice-title-container .invoice-title-small {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--main-green-color);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-left: 1rem;
}

.invoice-title-container h2 #bill-new-invoice-header {
    color: #ff675d;
}

.invoice-title-info {
    font-size: 1.1rem;
    background: var(--label-color);
    color: #fff;
    padding: 3px 8px;
    font-weight: 500;
    cursor: pointer;
}

.bill-patient-title {
    font-size: 1.3rem;
    font-weight: 500;
    margin: 0;
}

.bill-content {
    font-size: 1.1rem;
    color: var(--label-color);
    font-weight: 400;
    margin: 0;
}

.bill-header-separator {
    border-bottom: 2px solid var(--label-color);
}

.bill-header-admission-table td {
    padding: 0;
}

.invoice-portlet.kt-portlet {
    box-shadow: 0px 1px 15px 1px rgba(221, 220, 220, 0.76);
    -webkit-box-shadow: 0px 1px 15px 1px rgba(221, 220, 220, 0.76);
    border: 1px solid #e1e3ec;
}

.invoice-header-section-title {
    font-size: 1.1rem;
    color: var(--second-blue-color);
    margin-bottom: 0.2rem;
    font-weight: 500;
}

/* patient previous visit timeline*/
.patient-previous-visit-timeline.kt-timeline-v1.kt-timeline-v1--justified .kt-timeline-v1__items {
    margin-bottom: 0px;
    padding: 10px 0px;
}

.patient-previous-visit-timeline.kt-timeline-v1 .kt-timeline-v1__items .kt-timeline-v1__marker {
    background-color: #a2a5b9;
}

.patient-previous-visit-timeline.kt-timeline-v1 .kt-timeline-v1__items .kt-timeline-v1__marker.bottom-marker {
    top: unset;
    bottom: 0;
}

.patient-previous-visit-timeline.kt-timeline-v1:after {
    background-color: #a2a5b9;
    width: 4px;
}

.patient-previous-visit-timeline.kt-timeline-v1.kt-timeline-v1--justified .kt-timeline-v1__items .kt-timeline-v1__item.kt-timeline-v1__item--first {
    margin-top: 0px !important;
}

.patient-previous-visit-timeline.kt-timeline-v1 .kt-timeline-v1__items .kt-timeline-v1__item.kt-timeline-v1__item--left .kt-timeline-v1__item-circle {
    top: 8px;
    width: 30px;
    height: 30px;
    right: -15px;
    left: -15px;
    background: #E1F0FF;
    border: 2px solid var(--second-blue-color);
}

.patient-previous-visit-timeline.kt-timeline-v1 .kt-timeline-v1__items .kt-timeline-v1__item .kt-timeline-v1__item-circle > .timeline-icon {
    color: var(--second-blue-color);
    height: unset;
    width: unset;
    margin-right: 1px;
    font-size: 1.3rem;
}

.patient-previous-visit-timeline.kt-timeline-v1 .kt-timeline-v1__items .kt-timeline-v1__item .kt-timeline-v1__item-content {
    -webkit-box-shadow: 0px 1px 15px 1px rgba(230, 229, 229, 0.76);
    box-shadow: 0px 1px 15px 1px rgba(230, 229, 229, 0.76);
    background: #ffffff;
    padding: 0rem;
}

.patient-previous-visit-timeline.kt-timeline-v1 .kt-timeline-v1__items .kt-timeline-v1__item:after {
    border-right: solid 12px #a2a5b9 !important;
    border-bottom: solid 12px transparent !important;
    border-left: solid 14px transparent !important;
    border-top: solid 12px transparent !important;
    top: 8px !important;
    margin-left: 5px !important;
}

.patient-previous-visit-portlet {
    border: 2px solid #a2a5b9;
}

.patient-previous-visit-portlet .kt-portlet__head {
    min-height: 58px;
    /*background: var(--light-blue-background);*/
}

.patient-previous-visit-day-section {
    margin-right: 0.5rem;
}

.patient-previous-visit-day-section .kt-badge {
    flex-direction: column;
    background: var(--main-green-color);
    color: #ffffff;
}

.patient-previous-visit-day-section .day-label {
    font-size: 1rem;
    font-weight: 500;
    text-transform: capitalize;
    text-align: center;
    line-height: 1.2rem;
}

.patient-previous-visit-timing span {
    display: block;
    font-weight: 500;
    color: #0a0a0a;
    text-align: center;
}

.patient-previous-visit-header-separator {
    background: #d0d0d0;
    width: 1px;
    height: 58px;
    margin: 0px 1rem;
}

.patient-previous-visit-portlet .kt-portlet__head .kt-portlet__head-label .kt-portlet__head-title {
    color: #5d77fc;
}

.patient-previous-visit-portlet .kt-portlet__head-title {
    font-size: 1.3rem !important;
    font-weight: 500 !important;
}

.record-by-title {
    display: block;
    color: var(--main-green-color);
    font-size: .95rem;
    padding-top: 0.2rem;
}

.patient-previous-visit-title-separator {
    color: #0a0a0a;
    font-weight: 300;
}

.patient-previous-visit-portlet .kt-portlet__head-actions .btn-brand + .btn.dropdown-toggle:before {
    border-left: 1px solid #fdf7f7;
    top: 0px;
    bottom: 0px;
    opacity: 1;
}

.kt-widget.kt-widget--user-profile-3.patient-previous-visit-patient-card .kt-widget__top .kt-widget__content .kt-widget__subhead div {
    padding-right: 1.5rem;
    color: var(--label-color);
    font-weight: 500;
    display: inline-block;
}

.kt-widget.kt-widget--user-profile-3.patient-previous-visit-patient-card .kt-widget__top .kt-widget__pic {
    max-width: 45px;
    height: 45px;
    border-radius: 4px;
}

.kt-widget.kt-widget--user-profile-3.patient-previous-visit-patient-card .kt-widget__top .kt-widget__content {
    padding-left: 1rem;
}

.kt-widget.kt-widget--user-profile-3.patient-previous-visit-patient-card .kt-widget__bottom .kt-widget__item {
    padding: .3rem 1rem 0 0;
}

.kt-portlet .kt-portlet__body.patient-history-top-card {
    background: #eff0f3;
    border-radius: 0;
    padding-right: 0;
    padding-left: 0;
}

.error-border {
    border: 1px solid #fd397a;
    border-radius: 3px;
}

.timeline-patient-procedure-table td {
    text-align: center;
    vertical-align: middle !important;
}

.kt-aside-menu.show-ipd-menu-items .kt-menu__nav > .kt-menu__item {
    /*margin-top: -2px !important;*/
    /*margin-bottom: -2px !important;*/
}

.justify-content-flex-end {
    justify-content: flex-end !important;
}

.bill-advance-pay-status {
    background: #ffc107;
    color: #fff;
    text-align: center;
    padding: 0.70rem;
    font-size: 1.2rem;
    font-weight: 500;
    display: inline-block;
    width: 100%;
}

#discharge-card-list-container .discharge-card-template-name {
    cursor: pointer;
}

.discharge-card-editor .discharge-card-keywords-container,
.certificate-template-keywords-container {
    height: 70vh;
    overflow-y: auto;
    overflow-x: hidden;
}

.investigation-template-modal .investigation-custom-template-keywords-container {
    height: 59vh;
    overflow-y: auto;
    overflow-x: hidden;
}

.investigation-template-modal .modal-dialog {
    margin: 0.3rem auto;
}

.discharge-card-editor .discharge-card-editor-main-footer {
    border-top: unset !important;
    margin-top: 0 !important;
}

.discharge-card-editor .discharge-card-keywords-container .discharge-card-keyword,
.investigation-template-modal .investigation-custom-template-keyword,
.certificate-template-keywords-container .certificate-template-keyword {
    cursor: pointer;
    margin-bottom: 0;
    padding: .5rem 1.2rem;
    color: #595d6e;
    font-weight: 500;
}

.discharge-card-editor .discharge-card-keywords-container .discharge-card-keyword:hover,
.investigation-template-modal .investigation-custom-template-keyword:hover,
.certificate-template-keywords-container .certificate-template-keyword:hover {
    background-color: #f7f8fa;
    color: var(--second-blue-color);
}

/*.discharge-card-template-dropdown .btn {*/
/*    display: inline-block !important;*/
/*}*/

.bill-advance-pay-status {
    background: #ffc107;
    color: #fff;
    text-align: center;
    padding: 0.70rem;
    font-size: 1.2rem;
    font-weight: 500;
    display: inline-block;
    width: 100%;
}

.walkin-modal .kt-portlet {
    -webkit-box-shadow: 0px 1px 15px 1px rgba(230, 229, 229, 0.76);
    box-shadow: 0px 1px 15px 1px rgba(230, 229, 229, 0.76);
    border: 1px solid #e1e3ec;
}

.gender-input-group .input-group-text {
    cursor: pointer;
}

.gender-input-group .input-group-text.male.active {
    background: var(--second-blue-color);
    color: #ffffff;
}

.gender-input-group .input-group-text.female.active {
    background: #fd397a;
    color: #ffffff;
}

.gender-input-group .input-group-text.other.active {
    background: var(--main-green-color);
    color: #ffffff;
}

.gender-input-group.input-group .input-group-text:first-child {
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}

.insurance-input-group .input-group-text {
    cursor: pointer;
}

.insurance-input-group .input-group-text.yes.active {
    background: var(--second-blue-color);
    color: #ffffff;
}

.insurance-input-group .input-group-text.no.active {
    background: #fd397a;
    color: #ffffff;
}

.insurance-input-group.input-group .input-group-text:first-child {
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}

.solomo360-modal.modal .modal-content .modal-header .close {
    opacity: 1;
    color: var(--main-green-color);
    text-shadow: none;
    margin: 0 -.5rem 0 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 28px;
    height: 28px;
    border-radius: 3px;
}

.solomo360-modal.modal .modal-content .modal-header .close:hover {
    background: var(--main-green-color);
    color: #ffffff;
}

.solomo360-modal.modal .modal-content .modal-header,
.solomo360-modal.modal .modal-content .modal-footer {
    padding: 1rem 1.25rem;
}

/*.solomo360-modal.modal.modal .modal-content{*/
/*    margin-left: 77px;*/
/*}*/
.walkin-modal-tab .nav-item {
    width: 45px;
    text-align: center;
}

/* The Vital tab shares the profile form's footer, so hide the actions that only
   belong to the profile while it is open. Done with a class on the modal rather
   than hide() on the buttons so each button's own show/hide state survives the
   switch back to the profile tab. */
#walkin_modal.walkin-vital-mode .modal-footer .delete-patient-walkin,
#walkin_modal.walkin-vital-mode .modal-footer #walkin-create-abha-btn,
#walkin_modal.walkin-vital-mode .modal-footer #walkin-verify-abha-btn {
    display: none !important;
}

.appointment-modal-tab .nav-item {
    width: 125px;
    text-align: center;
}

.solomo360-modal-sub-modal .modal-content {
    box-shadow: 0 16px 24px 2px rgba(0, 0, 0, .14), 0 6px 30px 5px rgba(0, 0, 0, .12), 0 8px 10px -5px rgba(0, 0, 0, .4);
}

.solomo360-modal {
    padding-left: 70px;
}

.modal-backdrop.show {
    opacity: 0.6;
}

.billing-discount-margin-1 {
    margin-right: 2px;
}

.bill-discount-percentage .input-group-text {
    cursor: pointer;
    width: 38px;
    justify-content: center;
}

.bill-discount-percentage .input-group-text.active,
.bill-tax-input-group .input-group-text.active {
    background: var(--main-green-color);
}

.bill-discount-percentage .input-group-text.active i,
.bill-tax-input-group .input-group-text.active i {
    color: #ffffff;
}

.opd-invoice-portlet.kt-portlet {
    box-shadow: unset;
}

.opd-invoice-portlet.kt-portlet .kt-portlet__body {
    padding: 0;
}

.OPD-bill-table.bill-table tbody tr td.bill-category {
    font-size: 1rem;
    padding: 0.5rem 0.75rem !important;
}

.OPD-bill-table.bill-table.table .thead-light th {
    font-size: 1.1rem;
    padding-top: 0.1rem;
    padding-bottom: 0.1rem;
}

.OPD-bill-table.bill-table tbody .form-control {
    height: calc(1em + 1rem + 2px);
}

.OPD-bill-table.bill-table tbody .btn.btn-icon.btn-sm,
.bill-receipt-table .btn.btn-icon.btn-sm {
    height: 2.2rem;
    width: 2.2rem;
}

.OPD-bill-table.table td {
    padding: 0.2rem;
    line-height: 18px;
}

.arrow-font-family {
    font-size: 12px;
}

.my-tab.nav-tabs.nav-tabs-line .nav-link {
    font-weight: 500;
}

.custom-invalid-border {
    border: 1px solid #fd397a !important;
    border-radius: 5px !important;
}

.master-menu .dropdown-item {
    color: var(--second-blue-color);
}

.master-menu .dropdown-item.master-sub-dropdown-item {
    color: var(--second-blue-color);
    background-color: #ffffff;
}

.master-menu .dropdown-item:hover, .master-menu .dropdown-item:hover:not(.master-sub-dropdown-item),
.master-menu .dropdown-item:hover, .master-menu .dropdown-item:focus:not(.master-sub-dropdown-item) {
    color: #ffffff;
    background-color: var(--second-blue-color);
}

.master-menu .dropdown-item:hover, .master-menu .dropdown-item:focus:not(.master-sub-dropdown-item) .dropdown-item.master-sub-dropdown-item,
.master-menu .dropdown-item:hover, .master-menu .dropdown-item:hover:not(.master-sub-dropdown-item) .dropdown-item.master-sub-dropdown-item {
    color: #ffffff !important;
    background-color: var(--second-blue-color);
}

.btn.btn-sm [class^="slmicon-"], .btn-group-sm > .btn [class^="slmicon-"], .btn.btn-sm [class*=" slmicon-"], .btn-group-sm > .btn [class*=" slmicon-"] {
    font-size: 1.2rem;
}

.masterDataTable .btn.btn-sm [class^="slmicon-"], .masterDataTable .btn-group-sm > .btn [class^="slmicon-"], .masterDataTable .btn.btn-sm [class*=" slmicon-"], .masterDataTable .btn-group-sm > .btn [class*=" slmicon-"] {
    font-size: 1rem;
}

.btn.btn-sm [class^="slmicon-"].slmicon-sm-icon {
    font-size: 1rem;
}

.table-action-dropdown-menu .dropdown-item i {
    font-size: 1.2rem;
}

.prescripLink .kt-menu__hor-arrow.slmicon-right-arrow {
    font-size: .8rem;
}

.item-stock-action-btn .btn {
    /*width: 150px;*/
}

.inventory-tab .nav-item {
    width: 120px;
    text-align: center;

}

.inventory-remove-button.removeRowBtnContainer {
    top: 6px;
    right: 6px;
}

.temperature-unit-list .dropdown-item {
    padding: 0.2rem 1.2rem !important;
}

.kt-portlet .kt-portlet__foot.ipd-dashboard-portlet-footer {
    text-align: center;
    color: #fff;
    background: var(--second-blue-color);
    margin: 0;
    padding: 10px;
}

.ipd-dashboard-badges.kt-badge {
    margin-left: .5rem;
    font-size: 1.1rem;
}

.bill-balance-container {
    height: calc(1.5em + 1rem + 2px);
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.kt-badge.kt-badge--xl.bill-patient-visit-count {
    width: 19px;
    height: 19px;
    line-height: .3rem;
    border-radius: 10%;
    font-size: 0.8rem;
    font-weight: bold;
}

.patient-gender-option, .patient-insurance-option:focus {
    /*border: 1px solid var(--second-blue-color);*/
    /*outline: 0;*/
    outline-color: var(--second-blue-color);
}

/*Inventory modal table*/
/* New Billing */
.inventory-modal-table {
    /*border: 1px solid #e6e5e5;*/
    border-spacing: 0;
    border-collapse: unset;
}

.inventory-modal-table.table .thead-light th {
    color: #ffffff;
    font-size: 1.2rem;
    vertical-align: middle;
    font-weight: 500;
    background: var(--main-green-color);
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.inventory-modal-table tbody .form-control,
.inventory-modal-table tbody .form-control[readonly]:focus {
    background: none;
    border: 1px solid #eaeaea;
}

.inventory-modal-table tbody .form-control:focus {
    border-color: var(--second-blue-color);
}

.inventory-modal-table tbody tr td {
    vertical-align: middle;
    color: #0a0a0a;
    font-weight: 500;
    padding: 0.50rem 0.2rem;
}

.inventory-modal-table tfoot tr td {
    padding: 0.50rem 0.4rem;
}

.inventory-modal-table tbody tr td .btn-clean i {
    color: #FF675D;
}

.inventory-modal-table tbody tr .inventory-item-type {
    background: #f7f8fa;
    font-size: 1rem;
    font-weight: 600;
}

.inventory-modal-table .bootstrap-select .dropdown-menu.inner > li > a [class*=" flaticon-"] {
    color: #48465b;
}

.inventory-modal-table .bootstrap-select .dropdown-menu.inner > li:hover > a [class*=" flaticon-"] {
    color: var(--second-blue-color);
}

.inventory-modal-table .bootstrap-select .dropdown-menu.inner > li.selected:hover > a [class*=" flaticon-"] {
    color: #adb1c7;
}

.inventory-modal-table.table .thead-light th {
    font-size: 1.1rem;
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
}

.inventory-modal-table tbody .form-control {
    height: calc(1.1em + 1rem + 2px);
}

.inventory-modal-table .bill-discount-percentage .input-group-text {
    width: 33px;
}

.inventory-modal-table tbody .bootstrap-select > .dropdown-toggle {
    padding: 0.3rem 0.6rem;
}

.inventory-modal-table tbody .bootstrap-select.form-control {
    border: none;
}

.stock-qty-btn.btn {
    width: 90px;
}

.inventory-log-type-badge.kt-badge.kt-badge--inline {
    width: 115px;
}

.custom-font-black {
    color: #000000 !important;
}

/* patient detail header */
.patient-profile-item-padding {
    padding-right: 5px !important;
    padding-left: 5px !important;
}

.patient-profile-item-padding-left {
    padding-left: 5px !important;
}

.patient-profile-item-padding-right {
    padding-right: 5px !important;
}

.patient-general-profile-row .patient-profile-item {
    font-size: 1.15rem;
    color: #0a0a0a;
    cursor: pointer;
}

.patient-advanced-profile-row .patient-profile-item {
    font-size: .9rem;
}

.patient-profile-item {
    color: var(--label-color);
    font-weight: 500;
    font-size: 1rem;
}

.patient-profile-item .patient-balance {
    padding: .6rem !important;
}

.tt-suggestion.tt-cursor:not(.slm-gs-row) {
    color: #fff !important;
    background-color: var(--second-blue-color) !important;
}

.typeahead .tt-menu .tt-dataset .tt-suggestion {
    font-weight: 400;
}

.typeahead .tt-menu .tt-dataset .tt-suggestion:not(.slm-gs-row),
.typeahead .form-control.tt-input {
    color: var(--font-black-color) !important;
}
.typeahead .tt-menu .tt-dataset .tt-suggestion:hover:not(.slm-gs-row) {
    color: #fff !important;
    background: var(--second-blue-color) !important;
}

.tt-menu {
    border: 1px solid #ebedf2 !important;
}

.typeahead .tt-menu {
    max-height: 150px;
    overflow-y: auto;
}

.typeahead .tt-cst-menu {
    max-height: 370px;
    overflow-y: auto;
}


.slmicon-ellipsis-h-bold {
    vertical-align: text-bottom !important;
}

/* [removed 2026-08-01] `.expense-modal .modal-md { max-width: 535px }` @>=1024px. Its only consumer
   was #add-expense-modal, which became a .slm-drawer; both `expense-modal` and `modal-md` were
   dropped from that markup, so the rule could no longer match. Deleted rather than left inert
   because it was an "armed" (0,2,0) TIE with the shell's
   `.slm-drawer .slm-drawer__dialog { max-width: calc(100% - 75px) }` — it lost only on bundle
   source order (style.css is concatenated before slm-theme-v1.css), so any future reorder would
   have silently pinned the drawer at 535px. */

.patient-detail-loader-container {
    min-height: 60vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* The four .patient-previous-visits-modal geometry rules that lived here (dialog max-width:98% +
   margin:.5rem auto, content height:97vh, body overflow) were DELETED when that modal became a
   .slm-drawer. They fought the shell: the drawer dialog is position:fixed right at
   width:min(--slm-d-width,--slm-d-vw-cap) with its own max-width, the panel is a 100dvh flex
   column, and the body is the single scroll region. Restoring them re-breaks the drawer.
   The byte-identical block immediately below is the IPD .patient-previous-admission-modal twin -
   still a plain Bootstrap modal, so it KEEPS these rules. Do not "dedupe" the two.
   See slm-theme-v1.css [prev-visits-drawer], and ui-globalization-backlog.md #19. */

.patient-previous-admission-modal .modal-dialog {
    max-width: 98%;
}

.patient-previous-admission-modal .modal-dialog {
    margin: .5rem auto;
}

.patient-previous-admission-modal .modal-content {
    height: 97vh;
}

.patient-previous-admission-modal .modal-body {
    overflow-x: hidden;
    overflow-y: scroll;
}

.followup-dropdown-menu.dropdown-menu {
    min-width: 8rem;
}

.follow-up-status-btn {
    color: #ffffff !important;
    width: 95px !important;
}

.kt-datatable__row--hover {
    background: #edfbfa;
}

.is-follow-up-container {
    margin: 1rem 1rem 0 !important;
}

.is-follow-up-container .follow-up-note-text {
    font-size: 1.05rem;
    font-weight: 600;
    color: #3F4254;
    line-height: 2.5;
}

.cursor-pointer {
    cursor: pointer;
}

.font-white {
    color: #ffffff !important;
}

.kt-switch.kt-switch--xs input:empty ~ span {
    line-height: 24px;
    margin: 2px 0;
    height: 22px;
    width: 40px;
    border-radius: 12px;
}

.kt-switch.kt-switch--xs input:empty ~ span:before,
.kt-switch.kt-switch--xs input:empty ~ span:after {
    width: 40px;
    border-radius: 12px;
}

.kt-switch.kt-switch--xs input:empty ~ span:after {
    height: 18px;
    width: 18px;
    line-height: 20px;
    top: 2px;
    bottom: 2px;
    margin-left: 2px;
    font-size: 0.5em;
    text-align: center;
    vertical-align: middle;
}

.kt-switch.kt-switch--xs input:checked ~ span:after {
    margin-left: 20px;
}

.low-stock-badge.kt-badge {
    border-radius: 3px;
    margin-left: 6px;
    font-weight: 600;
    top: -1px;
    position: relative;
}

.follow-up-calendar-grid-container {
    justify-content: flex-end;
}

.follow-up-calendar-grid-container .calendar-grid-btn {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
}

.kt-checkbox.is-past-investigation-container {
    margin-right: -10px;
    margin-bottom: 15px;
}

.pharmacy-billing-modal .form-group {
    margin-bottom: .2rem;
}

#add-medicine-form .form-group {
    margin-bottom: .5rem;
}

#add-medicine-form .form-group.form-group-last {
    margin-bottom: 0;
}

.physiotherapy-portlet.kt-portlet {
    border: 2px solid #e1e3ec;
}

.physiotherapy-portlet .physiotherapy-item-title {
    color: var(--second-blue-color);
    font-weight: 400;
    font-size: 1.05rem;
}

.green-tab.nav-tabs.nav-tabs-line.nav.nav-tabs .nav-link i, .green-tab.nav-tabs.nav-tabs-line a.nav-link i {
    color: var(--main-green-color);
}

.table-indicator-icon {
    display: flex;
    width: 45px;
    justify-content: flex-end;
}

.history-vital-container .form-control:disabled, .history-vital-container .form-control[readonly] {
    background: none;
    border: 0;
    padding: 0;
    height: unset;
}

.timeline-vital-table tr td {
    color: #0a0a0a;
    font-weight: 500;

}

.operative-note-modal .modal-body {
    height: 70vh;
    overflow-x: hidden;
    overflow-y: auto;
}

.userMenuContainer {
    width: 200px;
}

.kt-aside--minimize .userMenuContainer {
    width: 100px;
}

.dashboard-btn-group .btn.btn-default {
    margin-left: 0 !important;
    border: 1px solid var(--second-blue-color);
    color: var(--second-blue-color);
}

/*.pharmacy-sale-unit-opt,*/
/*.pharmacy-batch-opt {*/
/*    border: 0 !important;*/
/*}*/

.pharmacy-sale-unit-opt .dropdown-toggle.btn-light,
.pharmacy-batch-opt .dropdown-toggle.btn-light {
    background: transparent !important;
    padding: 0.35rem 0.6rem;
}

.bootstrap-select.pharmacy-sale-unit-opt > .dropdown-toggle:after,
.bootstrap-select.pharmacy-batch-opt > .dropdown-toggle:after {
    content: unset;
}

.bootstrap-select.pharmacy-sale-unit-opt > .dropdown-toggle.bs-placeholder.btn-light,
.bootstrap-select.pharmacy-batch-opt > .dropdown-toggle.bs-placeholder.btn-light {
    color: #0a0a0a;
}

.custom-kt-datatable th.kt-datatable__cell.statusColumn span {
    position: relative;
    left: 20px;
}

#calendar_schedule_table th.kt-datatable__cell.statusColumn span {
    position: relative;
    left: 10px;
}

#calendar_followup_table th.kt-datatable__cell.statusColumn span {
    right: 15px;
    left: unset;
}

#ipd_calendar_schedule_table th.kt-datatable__cell.statusColumn span {
    position: unset;
    left: unset;
}

#ipd_calendar_admitted_table th.kt-datatable__cell.statusColumn span {
    position: unset;
    left: unset;
}

#ipd_calendar_discharged_table th.kt-datatable__cell.statusColumn span {
    position: unset;
    left: unset;
}

.billing-modal-scroll {
    height: 425px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 1.2rem;
}

.patient-group-select2 .select2-container .select2-search--inline .select2-search__field {
    padding-left: 2px;
}

.kt-doctor-timeline.kt-timeline-v2 .kt-timeline-v2__items .kt-timeline-v2__item .kt-timeline-v2__item-cricle > i {
    font-size: 1.2rem;
    top: -0.7rem;
    left: -0.65rem;
    position: absolute;
}

.bill-modal-billing-company .bootstrap-select .dropdown-menu.inner > li.disabled > a {
    display: none;
}

.kt-badge.kt-badge--inline.previous-bill-type-badge {
    width: 40px;
}

html .patient-detail-billing-modal, body .patient-detail-billing-modal {
    font-size: 13px;
}

.bill-modal-paid-amount-empty-space {
    padding: .3rem .75rem;
}

.patient-detail-billing-modal .invoice-title-container h2 {
    font-size: 2rem;
}

.patient-detail-billing-modal .bill-patient-title {
    font-size: 1.2rem;
}

.patient-detail-billing-modal .my-label {
    font-size: .95rem !important;
}

.patient-detail-billing-modal .OPD-bill-table.bill-table.table .thead-light th,
.patient-detail-billing-modal .invoice-title-info,
.patient-detail-billing-modal .kt-widget5 .kt-widget5__item .kt-widget5__content .kt-widget5__title {
    font-size: 1rem;
}

.patient-detail-billing-modal .kt-badge {
    font-size: 0.7rem;
}

.patient-detail-billing-modal .kt-widget5 .kt-widget5__item .kt-widget5__content .kt-widget5__stats .kt-widget5__number {
    font-size: 1.15rem;
}

.patient-detail-billing-modal .kt-widget5__info,
.patient-detail-billing-modal .kt-widget5__sales,
.patient-detail-billing-modal .kt-widget5__votes {
    font-size: 0.91rem;
}

.patient-detail-billing-modal .bill-content {
    font-size: 1.02rem;
}

.referral-doctor-contact a {
    font-weight: 400;
}

.investigation-template-info {
    font-size: 1.1rem;
}

.inventory-modal-table tbody tr td.inventory-item-column,
.OPD-bill-table tbody tr td.bill-item-group {
    font-size: 1rem;
    /*padding: .5rem .75rem!important;*/
    background: #f7f8fa;
    font-weight: 600;
}

#inventory-page-container .kt-datatable table thead th.text-right i {
    margin-right: 10px;
}

.investigation-result-table-container .table tbody th,
.investigation-result-table-container .table tbody td {
    vertical-align: middle;
}

.investigation-chart-danger-bg {
    background-color: rgba(255, 103, 93, 0.1) !important;
}

.investigation-chart-success-bg {
    background-color: rgba(85, 184, 174, 0.2) !important;
}

.investigation-result-table-container .investigation-result-input {
    text-align: center;
}

.YesNo-input-group .input-group-prepend,
.YesNo-input-group .input-group-append {
    cursor: pointer;
}

.YesNo-input-group .input-group-prepend .input-group-text {
    margin: 0 2px
}

.YesNo-input-group .input-group-append .input-group-text {
    margin: 0 1px
}

.YesNo-input-group .input-group-prepend.active .input-group-text {
    background: var(--main-green-color);
    color: #ffffff;
}

.YesNo-input-group .input-group-append.active .input-group-text {
    background: #FF675D;
    color: #ffffff;
}

.family-history-siblings-gender-button-container.YesNo-input-group .input-group-prepend.active .input-group-text {
    background: var(--second-blue-color);
}

.family-history-siblings-gender-button-container.YesNo-input-group .input-group-append.active .input-group-text {
    background: #fd397a;
}

.family-history-table-container .table th {
    color: #ffffff;
    vertical-align: middle;
    font-weight: 500;
    background: var(--main-green-color);
    font-size: 1rem;
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
}

.family-history-table-container .table td {
    padding: 0.30rem 0.75rem;
    vertical-align: middle;
}

.deleteInvestigationDate {
    margin-left: 10px;
}

.btn.btn-icon.btn-sm.investigation-result-icon-btn {
    height: 2rem;
    width: 2rem;
    margin-bottom: 5px;
}

.btn.btn-icon.btn-sm.investigation-result-icon-btn i {
    font-size: 1.1rem;
}

.medical-history-portlet {
    margin-bottom: 10px;
}

.investigation-history-table {
    max-height: 300px;
    overflow: auto;
}

#social-medical-history .kt-separator.kt-separator--space-md {
    margin: 1rem 0;
}

.w-35-px {
    width: 35px;
}

.gynec-stress-level-input .irs-grid-text {
    font-size: 1rem;
}

.gynec-stress-level-input .irs-grid-pol.small {
    display: none;
}

.gynec-history-widget .gynec-history-widget-control {
    height: calc(1.1em + 1rem + 2px);
    background: none;
    border: 1px solid #eaeaea;
    /*text-align: center;*/
}

.gynec-history-widget .form-control[readonly] {
    height: calc(1.1em + 1rem + 2px);
}

.gynec-history-widget-border-b {
    border-bottom: 2px solid var(--main-green-color);
}

.gynec-history-widget-border-b .my-label {
    color: #0a0a0a;
    font-weight: 600;
}

.pregnant-column-width {
    width: 100px;
}

.prior-treatment-sr-column {
    width: 20px;
}

.family-history-yes-no-button:focus,
.family-history-yes-no-button span:focus,
.family-history-siblings-gender-button:focus,
.family-history-siblings-gender-button span:focus,
.family-history-siblings-status-button:focus,
.family-history-siblings-status-button span:focus {
    outline: unset;
}

.gynec-selectpicker-container .bootstrap-select > .dropdown-toggle.btn-light, .bootstrap-select > .dropdown-toggle.btn-secondary {
    background: #ffffff;
}

.gynec-selectpicker-container .form-control {
    height: calc(1.1em + 1rem + 2px);
}

.gynec-selectpicker-container .bootstrap-select > .dropdown-toggle {
    padding: 0.35rem 0.60rem;
}

.medical-history-tab.nav-tabs.nav-tabs-line .nav-item .nav-link {
    width: 125px;
    justify-content: center;
}

.image-thumbnail-container {
    margin: 5px 15px;
    width: calc(25% - 30px);
    height: 190px;
    display: block;
    float: left;
    position: relative
}

.image-thumbnail-container .image-thumbnail-item {
    width: 100%;
    height: 120px;
}

.image-thumbnail-item img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    border-radius: 3px;
}

.image-thumbnail-item .btn {
    position: absolute;
    right: -5px;
    top: -5px;
    padding: 0;
    color: #fff;
    background: var(--main-green-color);
    height: 25px;
    width: 25px;
    border-radius: 50px;
    display: none;
}

.image-thumbnail-item .btn i {
    padding: 0;
}

.image-thumbnail-item:hover .btn {
    display: block;
}

.image-thumbnail-item:hover .btn:hover {
    color: #ffffff;
}

.image-thumbnail-item .img-info {
    font-size: 12px;
    line-height: 1.3;
    font-weight: 500;
    margin: 4px 0;
    word-break: break-all;
}

/* codepen gallery */
.upload-document-gallery .img-wrapper {
    position: relative;
    cursor: pointer;
    margin-top: 15px;
}

.upload-document-gallery .img-info {
    font-size: 12px;
    line-height: 1.3;
    font-weight: 500;
    margin: 4px 0;
    word-break: break-all;
}

.upload-document-gallery .img-wrapper img {
    width: 100%;
    height: 125px;
    object-fit: cover;
    border-radius: 4px;
}

.upload-document-gallery .img-wrapper .btn {
    position: absolute;
    right: -5px;
    top: -5px;
    padding: 0;
    color: #fff;
    background: var(--main-green-color);
    height: 25px;
    width: 25px;
    border-radius: 50px;
    display: none;
}

.upload-document-gallery .img-wrapper .btn i {
    padding: 0;
}

.upload-document-gallery .img-wrapper:hover .btn {
    display: block;
}

.upload-document-gallery .img-wrapper:hover .btn:hover {
    color: #ffffff;
}

.upload-document-gallery .img-overlay {
    background: rgba(0, 0, 0, 0.95);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
}

.upload-document-gallery .img-overlay i {
    color: #fff;
    font-size: 3em;
}

#overlay {
    background: rgba(0, 0, 0, 0.8);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding-left: 70px;
}

@media (max-width: 1024px) {
    #overlay {
        padding-left: unset;
    }
}

#overlay img {
    margin: 0;
    width: auto;
    max-width: 95%;
    height: auto;
    object-fit: contain;
    padding: 2%;
}

@media screen and (min-width: 768px) {
    #overlay img {
        /*width: 75%;*/
    }
}

@media screen and (min-width: 1200px) {
    #overlay img {
        /*width: 75%;*/
    }
}

#nextButton {
    color: #fff;
    font-size: 2em;
    transition: opacity 0.8s;
}

#nextButton:hover {
    opacity: 0.7;
}

@media screen and (min-width: 768px) {
    #nextButton {
        font-size: 3em;
    }
}

#prevButton {
    color: #fff;
    font-size: 2em;
    transition: opacity 0.8s;
}

#prevButton:hover {
    opacity: 0.7;
}

@media screen and (min-width: 768px) {
    #prevButton {
        font-size: 3em;
    }
}

#exitButton {
    color: #fff;
    font-size: 2em;
    transition: opacity 0.8s;
    position: absolute;
    top: 15px;
    right: 15px;
}

#exitButton:hover {
    opacity: 0.7;
}

@media screen and (min-width: 768px) {
    #exitButton {
        font-size: 3em;
    }
}

#prevButton, #exitButton, #nextButton {
    cursor: pointer;
}

.natal-term-duration-container .dropdown.bootstrap-select.form-control {
    height: calc(1.5em + 1rem + 4px) !important;
}

.medicine-timing-btn.compact {
    width: 130px;
}

.medicine-timing-table tr:first-child td a.compact {
    font-weight: 500 !important;
}

.medicine-timing-table.compact-quick-box tr td:nth-of-type(odd) {
    background-color: unset;
}

.prescription-medicine-list-container .dropdown-menu .dropdown-item > span,
.prescription-medicine-list-container .dropdown-menu .dropdown-header > span,
.history-medicine-list-container .dropdown-menu .dropdown-item > span,
.history-medicine-list-container .dropdown-menu .dropdown-header > span {
    width: 100%;
    display: flex !important;
    justify-content: space-between;
}

.prescription-medicine-select2-container .medicine-action-container, .ipd-investigation-action-container {
    float: right;
}

.prescription-medicine-select2-container .medicine-action-container .edit-medicine,
.prescription-medicine-select2-container .medicine-action-container .disable-medicine,
.history-medicine-list-container .disable-medicine,
.ipd-investigation-action-container .investigation-master-edit,
.ipd-investigation-action-container .investigation-master-delete {
    width: 25px;
    height: 25px;
}

.custom-draggable-table-container .draggable {
    cursor: move;
    user-select: none;
}

.custom-draggable-table-container .placeholder {
    background-color: #edf2f7;
    border: 2px dashed #cbd5e0;
}

.custom-draggable-table-container .clone-list {
    border-top: 1px solid #ccc;
}

.custom-draggable-table-container .clone-table {
    border-collapse: collapse;
    border: none;
}

.custom-draggable-table-container .clone-table th, .clone-table td {
    border: 1px solid #ccc;
    border-top: none;
    padding: 0.5rem;
}

.custom-draggable-table-container .dragging {
    background: #fff;
    border-top: 1px solid #ccc;
    z-index: 999;
}

.custom-draggable-table-container .clone-list:not(:first-child) {
    display: none !important;
}

.compact-prescription-dosage sup,
.compact-prescription-dosage sub {
    font-size: 75%;
}

.prescription-medicine-list-container .dropdown-menu .no-results,
.ipd-investigation-select2-container .dropdown-menu .no-results {
    display: none;
}

.prescription-medicine-select2-container .select2-results__options .loading-results,
.ipd-investigation-select2-container .select2-results__options .loading-results {
    display: none !important;
}

#select2-medicine_select-container .disable-medicine {
    display: block;
}

.history-language .bootstrap-select > .dropdown-toggle.btn-light,
.history-language .bootstrap-select > .dropdown-toggle.btn-light:focus {
    background: var(--second-blue-color);
    color: #ffffff;
    border-color: var(--second-blue-color);
    padding: 0.4rem 0.60rem;
}

.paid-status-type-badge.kt-badge.kt-badge--inline {
    width: 65px;
}

.online-appointment-icon {
    display: inline-flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.table-visit-type-icon > span {
    overflow: unset !important;
}

.kt-user-card-v2 .kt-user-card-v2__pic .kt-badge.patient-search-badges {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    font-size: 1.3rem;
    font-weight: 600;
}

.patient-overview-modal-tab .nav-item {
    width: 80px;
    text-align: center;
}

.diagnosis-btn .btn.diagnosis-more-action-btn {
    margin-bottom: 0 !important;
    padding: 0;
    background: transparent;
    border: none;
}

.diagnosis-name.diagnosis-active .diagnosis-more-action-btn {
    color: var(--main-green-color) !important;
}

.investigation-more-action-btn.btn {
    background: #E6E5E5;
    padding: 0.65rem .5rem;
    border-radius: 0rem 0.2rem 0.2rem 0rem;
}

.investigation-more-action-btn.btn i {
    position: relative;
    right: 6px;
    top: 2px;
}

.diagnosis-more-action-btn.btn i {
    position: relative;
    right: 5px;
    top: 1px;
}

.investigation-item.btn {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.investigation-btn-container .investigation-item.btn:focus, .investigation-more-action-btn.btn:focus {
    box-shadow: unset;
}

.diagnosis-btn .btn.diagnosis-more-action-btn i,
.investigation-more-action-btn.btn i {
    transform: rotate(90deg);
    display: inline-block;
}

.diagnosis-btn .card {
    overflow: unset !important;
}

.diagnosis-btn .dropdown-menu.dropdown-menu-xs,
.investigation-btn-container .dropdown-menu.dropdown-menu-xs,
.dropdown-menu.dropdown-menu-xs {
    min-width: 10rem;
}

.btn.diagnosis-more-action-btn:focus, .btn.focus {
    outline: 0;
    -webkit-box-shadow: unset;
    box-shadow: unset;
}

.compact-prescription-instruction {
    overflow: hidden;
}

/*Video Consultation */
#full-screen-video {
    height: 100%;
    width: 100%;
}

#full-screen-video video {
    height: 100%;
    width: 100%;
    object-fit: none;
}

.big-video {
    height: 100%;
    width: 100%;
    object-fit: fill;
    display: flex;
    background: #000;
    justify-content: center;
    align-items: center;
}

.big-video .kt-badge.kt-badge--lg {
    height: 85px;
    width: 85px;
    font-size: 3rem;
    background: var(--main-green-color);
    color: #ffffff;
}

.video-consultation-container {
    height: 89vh;
    position: relative;
}

.kt-font-white {
    color: #ffffff;
}

.video-control-button {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translate(-50%, 0);
}

.video-control-button .btn i {
    font-size: 1.6rem;
}

.video-control-button .btn.btn-icon {
    height: 3.3rem;
    width: 3.3rem;
}

.small-video-container {
    height: 150px;
    width: 150px;
    position: absolute;
    top: 10px;
    right: 10px;
}

.small-video {
    width: 100%;
    height: 100%;
}

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

.video-consultation-info-container .info-content {
    font-size: 1rem;
    font-weight: 400;
    color: #0A0A0A;
    word-break: break-word;
}

.history-medicine-select2-container .disable-medicine,
.history-medicine-select2-container .edit-medicine {
    display: none;
}

#compact-patient-prescription-table tbody tr {
    cursor: move;
}

#compact-patient-prescription-table tbody tr:hover {
    background: #edfbfa;
}

.visit-count-badge.kt-badge {
    height: 20px;
    width: 20px;
    border-radius: 10%;
}

.my-label.my-label-md {
    font-size: 1.15rem !important;
}

#editable-bill-invoice-number {
    border-bottom: 1px solid;
}

#editable-bill-invoice-number:focus {
    outline: unset;
    border-bottom: 1px solid;
}

.pharmacy-tagify-input .tagify {
    /*border: 1px solid #eaeaea !important;*/
    border-radius: 3px;
}

.pharmacy-tagify-input .tagify:focus-within {
    border-color: var(--second-blue-color) !important;
}

.pharmacy-tagify-input .tagify__input {
    margin: 2px 5px !important;
}

.pharmacy-tagify-input .tagify__tag {
    display: none !important;
}

#day-care-modal .modal-dialog {
    max-width: 600px;
}

a.btn.btn-label-brand#isDayCareVisitBtn:focus {
    background-color: var(--light-blue-background);
    color: var(--second-blue-color);
}

a.btn.btn-label-danger#isDayCareVisitBtn:focus {
    background-color: rgba(253, 57, 122, 0.1);
    color: #fd397a;
}

a.btn#isDayCareVisitBtn:focus {
    box-shadow: unset !important;
}

.selectedDiagnosisItem,
.investigation-selected-item-container {
    cursor: move;
}

.reception-search-table-notification {
    display: flex;
    width: 80px;
    justify-content: flex-end;
}

.kt-badge.kt-badge--inline.reception-search-table-status-badge {
    width: 90px;
}

.reception-search-child-table.custom-kt-datatable th.kt-datatable__cell.statusColumn span,
th.reception-search-case-no span {
    position: relative;
    left: 20px;
}

.reception-child-table-title {
    border-bottom: 1px solid #e6e5e5;
    padding: 8px 15px;
}

.reception-child-table-title h3 {
    color: var(--second-blue-color);
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 0;
}

.reception-search-bell-icon {
    position: relative;
    top: -3px;
}

.added-med-generic-name {
    display: none;
    font-size: 1.05rem;
    font-weight: 600;
    color: #3f4254;
}

.medicine-generic-name-title {
    font-weight: 500;
    font-size: 0.9rem !important;
    color: var(--label-color);
}

.operative-note-keyword-title {
    margin: 0;
    padding: 0;
    font-size: 1.3rem;
    font-weight: 500;
    color: #464457;
}

.operative-note-portlet-head {
    min-height: 40px !important;
    background: unset !important;
}

.operative-note-keywords-container {
    height: 70vh;
    overflow-y: auto;
    overflow-x: hidden;
}

.operative-note-keywords-container .operative-note-keyword {
    cursor: pointer;
    margin-bottom: 0;
    padding: .5rem 1.2rem;
    color: #595d6e;
    font-weight: 500;
}

.operative-note-keywords-container .operative-note-keyword:hover {
    background-color: #f7f8fa;
    color: var(--second-blue-color);
}

.procedure-advise-by-container {
    display: block;
    font-size: 0.9rem;
    font-weight: 400;
    margin-top: 2px;
}

.show > .btn.btn-clean, .btn.btn-clean.active, .btn.btn-clean:active, .btn.btn-clean.opd-procedure-action-button.active {
    background: var(--second-blue-color) !important;
}

.show > .btn.btn-clean, .btn.btn-clean.active, .btn.btn-clean:active, .btn.btn-clean.opd-procedure-action-button.active i {
    color: #ffffff !important;
}

.operation-team-details .tagify__tag {
    display: none !important;
}

.gallery-overlay {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1042;
    overflow: hidden;
    position: fixed;
    background: #0b0b0b;
    opacity: 0.8;
    -webkit-backface-visibility: hidden;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.img-gallery-iframe {
    width: 100%;
    height: 82vh;
}

.image-gallery-container {
    overflow: hidden auto;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1043;
    position: fixed;
    outline: none !important;
}

.image-gallery-container .mfp-container {
    text-align: center;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    padding: 0 8px;
    box-sizing: border-box;
}

.image-gallery-container .mfp-container .mfp-content {
    max-width: 100%;
    position: relative;
    display: flex;
    vertical-align: middle;
    margin: 0 auto;
    z-index: 1045;
    cursor: auto;
    justify-content: center;
    align-self: center;
    align-items: center;
    height: 100vh;
}

.image-gallery-container .mfp-container .mfp-figure {
    line-height: 0;
    cursor: pointer;
}

.image-gallery-container .gallery-button-container {
    height: 44px;
    line-height: 44px;
    position: absolute;
    top: 0;
    text-decoration: none;
    opacity: .65;
    padding: 0 0 18px 10px;
    font-style: normal;
    font-size: 60px;
    color: #fff;
    right: -6px;
    text-align: right;
    padding-right: 6px;
    width: 100%;
}

.image-gallery-container .gallery-button-container .btn {
    color: #ffffff;
    font-size: 2rem;
    padding: 0 .1rem;
}

#viewFileModal.pdf-viewer .image-gallery-container .gallery-button-container .btn.custom-img-print,
#viewFileModal.pdf-viewer .image-gallery-container .gallery-button-container .btn.data-fileContent-url {
    display: none !important;
}

.image-gallery-container .mfp-container button.mfp-arrow {
    overflow: visible;
    cursor: pointer;
    background: transparent;
    border: 0;
    -webkit-appearance: none;
    display: block;
    outline: none;
    padding: 0;
    z-index: 1046;
    box-shadow: none;
    touch-action: manipulation;
    font-size: 50px;
    color: #fff;
}

.image-gallery-container .mfp-container .mfp-figure figure {
    margin: 0;
}

.image-gallery-container .mfp-container .mfp-img {
    width: auto;
    height: auto;
    display: block;
    line-height: 0;
    box-sizing: border-box;
    padding: 40px 0 40px;
    margin: 0 auto;
    max-width: 80vw;
    max-height: 70vh;
}

.image-gallery-container .mfp-container .mfp-bottom-bar {
    margin-top: -36px;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    cursor: auto;
}

.image-gallery-container .mfp-container .mfp-title {
    text-align: left;
    line-height: 18px;
    color: #F3F3F3;
    word-wrap: break-word;
    padding-right: 36px;
}

.image-gallery-container .mfp-container .mfp-counter {
    position: absolute;
    top: 0;
    right: 0;
    color: #CCC;
    font-size: 12px;
    line-height: 18px;
    white-space: nowrap;
}

.image-gallery-container .mfp-container .mfp-arrow {
    position: absolute;
    opacity: 0.65;
    margin: 0;
    top: 50%;
    margin-top: -55px;
    padding: 0;
    width: 90px;
    height: 110px;
    -webkit-tap-highlight-color: transparent;
}

.image-gallery-container .mfp-container .mfp-arrow-left {
    left: 0;
}

.image-gallery-container .mfp-container .mfp-arrow-right {
    right: 0;
}

.image-gallery-container .mfp-container .mfp-arrow:before, .mfp-arrow:after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    left: 0;
    top: 0;
    margin-top: 35px;
    margin-left: 35px;
    border: medium inset transparent;
}

.tl {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    width: 100%;
    position: relative;
    margin-top: 0.3rem;
}

.tl_btns {
    width: 100%;
    /*margin-bottom: 20px;*/
    padding: 0;
    position: relative;
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    justify-content: center;
}

.tl_btns li {
    list-style-type: none;
    -webkit-box-flex: 1;
    flex: 1 auto;
    position: relative;
    text-align: center;
    color: #000;
    padding: 0 10px 15px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
}

.tl_btns li:before, .tl_btns li:after {
    content: "";
}

.tl_btns li:before {
    content: "✔";
    font-size: 11px;
    color: #fff;
    line-height: 17px;
    font-family: 'Zapf Dingbats';
}

/*.tl_btns li.scheduled-time-circle:before{*/
/*    content: "S";*/
/*}*/
/*.tl_btns li.waiting-time-circle:before{*/
/*    content: "W";*/
/*}*/
/*.tl_btns li.engage-time-circle:before{*/
/*    content: "E";*/
/*}*/
/*.tl_btns li.checkout-time-circle:before{*/
/*    content: "C";*/
/*}*/
.tl_btns li span {
    color: #0a0a0a;
    position: absolute;
    left: 50%;
    margin-top: 5px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    font-size: 0.95rem;
    line-height: 1;
    font-weight: 500;
    padding: 1px 2px 1px 3px;
    display: block;
    width: 100%;
}

.tl_btns li .time-meridiem {
    font-size: .75rem;
    margin: 0;
}

.tl_btns li:before {
    width: 16px;
    height: 16px;
    display: block;
    margin: 0 auto;
    border-radius: 50%;
    background-color: var(--second-blue-color);
    position: relative;
    z-index: 9;
    /*border: 2px solid #1bc5bd;*/
}

/*.tl_btns li.warning:before {*/
/*    border-color: #ffb822;*/
/*}*/
/*.tl_btns li.danger:before {*/
/*    border-color: #ff675d ;*/
/*}*/
/*.tl_btns li.brand:before {*/
/*    border-color: #1b78c5;*/
/*}*/
/*.tl_btns li.success:before {*/
/*    border-color: #1bc5bd ;*/
/*}*/
.tl_btns li:after {
    position: absolute;
    width: 100%;
    height: 3px;
    background: var(--second-blue-color);
    top: 22%;
    left: -50%;
    /* -webkit-transform: translateY(-50%); */
    /* transform: translateY(-50%); */
    z-index: 0;
}

.tl_btns li:first-child:after {
    content: none;
}

.tl_btns li.active:before,
.tl_btns li.active + li.active:before {
    background: var(--second-blue-color);
}

/* Missing-visit / All-Visits modal — converted to the global .slm-drawer shell (see slm-theme-v1.css).
   The old fixed modal-body height and dialog overflow fought the drawer's flex column, so they were
   removed. */

/* Edd report modal — converted to the global .slm-drawer shell (see slm-theme-v1.css).
   The old fixed modal-body height and dialog overflow fought the drawer's flex column,
   so they were removed. */

/* Patient ledger modal — converted to the global .slm-drawer shell (see slm-theme-v1.css).
   The old fixed modal-body height and dialog overflow fought the drawer's flex column,
   so they were removed. */

.table-visit-type-icon .kt-user-card-v2 {
    height: 20px;
}

.frontdesk-icon {
    width: 19px;
    height: 19px;
    text-align: right;
    line-height: 1.5rem;
    font-size: 1.4rem;
}

.frontdesk-icon .slmicon-walking-2 {
    left: 5px;
    position: relative;
}

.missed-app-modal-tab li {
    width: 110px;
    text-align: center;
}

.online-appointment-doctor-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: #0a0a0a;
}

.prescription-note-tagify-container .tagify__tag > div > * {
    white-space: unset;
}

.medicine-instruction {
    display: block;
}

#compact-patient-prescription-table .tagify__input {
    min-width: unset;
}

.tagify .tagify__tag div .tagify__tag-text {
    color: var(--font-black-color) !important;
    font-weight: 400 !important;
}

.tagify .tagify__tag {
    border: 1px solid var(--input-border) !important;
    border-radius: 3px !important;
    background-color: #f4f5f8 !important;
}

.tagify .tagify__tag.tagify__tag--editable {
    border-color: #1b78c5 !important;
}

.tagify .tagify__tag .tagify__tag__removeBtn:after {
    color: #3a4045 !important;
}

.tagify__dropdown__item {
    color: #0a0a0a !important;
    font-weight: 500 !important;
    padding: 0.5rem 1rem !important;
}

.tagify__dropdown__item:hover {
    background: transparent !important;
    color: var(--second-blue-color) !important;

}

.prescription-wizard-content .customDisable.tagify .tagify__input {
    visibility: hidden;
}

.timeline-day-divider .btn.btn-label-danger {
    color: #ff675d;
    border-color: #ff675d;
    background: unset;
    width: 20%;
}

.pharmacy-status-action-container .pharmacy-view-detail-btn,
.laboratory-view-detail-btn {
    border: 1px solid var(--second-blue-color) !important;
    color: var(--second-blue-color) !important;
}

.show-in-ipd .bill-balance-container {
    height: auto;
}

#billing-table tbody .tagify__tag {
    display: none;
}

#billing-table tbody .tagify--select::after {
    content: unset;
}

#bill-receipt-list-table tbody > tr > td {
    vertical-align: middle;
}

.total-bill-balance-container.bill-balance-container {
    display: unset;
    padding: 0.25rem 0.75rem !important;
}

.room-billing-item-tagify-dropdown {
    max-height: 200px !important;
}

.bill-receipt-table.table thead tr {
    border-bottom: 2px solid var(--main-green-color);
}

.bill-receipt-table.table thead tr th {
    font-weight: 600;
    vertical-align: middle;
    padding: 0.3rem;
}

.bill-receipt-table.table tr td {
    vertical-align: middle;
    color: #0a0a0a;
    font-weight: 500;
    padding: 0.3rem;
}

.bedRoomNoContainer .dropdown-menu {
    width: 100% !important;
}

.discharge-card-header span {
    font-size: 1.2rem;
    color: #464457;
}

.previous-discharged-card-container .discharged-card-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 10px;
    padding-right: 1rem !important;
    padding-left: 1rem !important;
    padding-bottom: 10px;
    cursor: pointer;
    border-bottom: .07rem dashed #ebedf2;
}

.previous-discharged-card-container .discharged-card-item:last-child {
    border-bottom: none;
}

.previous-discharged-card-container .discharged-card-item:hover {
    background: #f3f6f9;
    color: var(--second-blue-color) !important;
}

.previous-discharged-card-container .discharged-card-item .sr-no {
    width: 20px;
    font-weight: 500;
    border: 1px solid;
    text-align: center;
    height: 20px;
    margin-right: 8px;
}

.kt-subheader__toolbar .previous-discharged-card-container .discharged-card-item .btn-sm {
    height: 28px !important;
    width: 28px !important;
}

.with-date-range-for-dropdown {
    padding-right: 0 !important;
}

.with-date-range-for-dropdown a#billing3cDateRange {
    border-bottom-right-radius: unset;
    border-top-right-radius: unset;
    margin-left: unset;
}

.date-range-filter-for-container, .date-range-filter-for-referral-container {
    min-width: 150px;
}

.date-range-filter-for-container .btn.dropdown-toggle {
    border-bottom-left-radius: unset !important;
    border-top-left-radius: unset !important;
    height: 35px !important;
}

.date-range-filter-for-referral-container .btn.dropdown-toggle {
    border-bottom-left-radius: unset !important;
    border-top-left-radius: unset !important;
    height: 35px !important;
}

.billing-status-container {
    display: inline-flex;
}

.billing-status-container .btn:focus {
    box-shadow: unset !important;
}

#bill-receipt-modal .modal-dialog,
#pharmacy-bill-receipt-modal .modal-dialog,
#supplier-bill-receipt-modal .modal-dialog {
    max-width: 710px !important;
}

#credit-note-apply-modal .modal-dialog {
    max-width: 900px !important;
}

.invoice-balance-table tr td {
    border: 0;
    padding: 0 !important;
    color: #0a0a0a;
    font-size: 1.1rem;
}

.invoice-balance-table.positive tr:last-child td {
    background: var(--main-green-color);
    color: #FFFFFF;
    padding: 0 5px;
}

.invoice-balance-table.negative tr:last-child td {
    background: #ff675d;
    color: #FFFFFF;
    padding: 0 5px;
}

.accept-payment-modal-balance-container {
    border-radius: 4px 4px 0 0;
    font-size: 1.1rem;
    display: flex;
    padding: .3rem 1.5rem;
    justify-content: center;
}

.accept-payment-modal-balance-container.positive {
    background: var(--main-green-color) !important;
}

.accept-payment-modal-balance-container.negative {
    background: #ff675d !important;
}

.accept-payment-modal-balance-container .my-label,
.accept-payment-modal-balance-container {
    color: #ffffff !important;
}

.accept-payment-modal-balance-container .my-label {
    margin: 0;
    font-weight: 400;
}

.balance-modal-container .kt-badge {
    font-size: 1rem;
    margin-top: .2rem;
}

.billing-date-header {
    cursor: pointer;
}

.billing-date-header .billing-date-sort-icon {
    display: unset;
}

.billing-date-header[data-sort="no-sort"] .billing-date-sort-icon {
    display: none;
}

#billing-table.showDragDropArrow tbody tr {
    cursor: move;
}

#billing-table tbody tr:hover {
    background: #edfbfa;
}

.justify-content-unset {
    justify-content: unset !important;
}

.dropdown-menu-center {
    right: auto !important;
    left: 50% !important;
    -webkit-transform: translate(-50%, 0) !important;
    -o-transform: translate(-50%, 0) !important;
    transform: translate(-50%, 0) !important;
    top: unset !important;
}

#bill-receipt-modal .modal-content {
    margin-left: 25px;
    margin-right: -25px;
}


.billing-global-discount-dropdown, .billing-global-tax-dropdown {
    display: inline-block;
}

.billing-global-discount-dropdown .dropdown-item , .billing-global-tax-dropdown .dropdown-item {
    padding: 5px 10px;
    color: #0a0a0a;
}

.billing-global-discount-dropdown-input, .billing-global-tax-dropdown-input {
    padding: 5px 10px;
}

.billing-global-discount-dropdown .dropdown-menu,
.billing-global-tax-dropdown .dropdown-menu,
.purchase-global-discount-dropdown .dropdown-menu {
    min-width: 9rem;
}

.billing-global-discount-dropdown-btn:focus {
    box-shadow: unset !important;
}

.online-appointment-list-spinner {
    top: 50%;
    left: 50%;

}

.patient-prescription-QR-advise-container {
    width: 100%;
}

.language-container .language-btn.btn-light {
    background-color: var(--light-blue-background) !important;
    color: var(--second-blue-color) !important;
    padding: 0.6rem 0.7rem !important;
}

.billing-patient-visit-type {
    width: 19px !important;
    height: 19px !important;
    line-height: 0.3rem;
    border-radius: 10% !important;
    margin-right: 5px !important;
}

#external-doctor-list-modal .modal-body {
    height: calc(100vh - 200px);
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

.paymentDetailDropdown .dropdown-item {
    color: #0a0a0a;
    font-weight: 500;
}

/* Floor, not a fixed size: select2 writes the FIELD's width inline on the panel, so wide UHID
   fields (appointment drawers) get a full-width panel while the walk-in's narrow UHID column
   still opens at a usable 300px. Was `width: 300px !important`, which capped every panel. */
.caseNoDropdown {
    min-width: 300px !important;
}

.procedure-table-container .instructionClass p {
    margin: 0;
}

.medicine-template-modal .treatment-timing {
    display: none !important;
}

.treatment-template-dropdown .bootstrap-select {
    height: 30px;
}

.treatment-template-dropdown .bootstrap-select > .dropdown-toggle.btn-light {
    background: #ffffff;
    color: #1bc5bd;
    border-color: #ffffff;
    height: 30px;
    padding-top: 0.3rem;
}

.treatment-template-dropdown .bootstrap-select > .dropdown-toggle.btn-light:focus {
    background-color: white;
}

.treatment-prescribe-dropdown .btn-light {
    padding: .18rem .6rem !important;
}

.treatment-prescribe-dropdown .form-control {
    height: calc(1.5em + 5px) !important;
}

.investigation-referred-dropdown .btn-light {
    padding: .18rem .6rem !important;
}

.investigation-referred-dropdown .form-control {
    height: calc(1.5em + 5px) !important;
}

.pharmacy-header-group .pharmacy-header-label {
    position: relative;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    width: 1%;
    margin-bottom: 0;
}

.pharmacy_desc_row .form-control:disabled {
    background: transparent;
    border: transparent;
}

.pharmacy_desc_row .input-group > .form-control:not(:first-child), .input-group > .custom-select:not(:first-child) {
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}

.pharmacy_desc_row .fully-filled-cell .pharmacy-total-filled-qty,
.pharmacy_desc_row .fully-filled-cell .pharmacy-pending-qty {
    background: #DDF1EF !important;
    color: var(--main-green-color) !important;
}

.pharmacy_desc_row .partially-filled-cell .pharmacy-total-filled-qty,
.pharmacy_desc_row .partially-filled-cell .pharmacy-pending-qty {
    background: #F8E5ED !important;
    color: #FF675D !important;
}

#prescription-notification-panel.kt-quick-panel .kt-quick-panel__content {
    height: 88vh;
    overflow: auto;
}

#prescription-notification-panel .kt-demo-panel__head {
    height: 70px;
}

#prescription-notification-panel {
    top: 0 !important;
    bottom: 0 !important;
}

#toast-container > div {
    opacity: 1 !important;
}

#calendarFromDate > .datepicker {
    width: 100% !important;
}

#billing_modal.locked-bill #bill-generate-receipt-btn,
#billing_modal.locked-bill #bill-generate-full-receipt-btn,
#billing_modal.locked-bill #bill-generate-refund-receipt-btn,
#billing_modal.locked-bill #bill-accept-button,
#billing_modal.locked-bill .edit-bill-number,
#billing_modal.locked-bill #billing-status-btn,
#purchase-bill.locked-bill #add-stock-btn,
#purchase-bill.locked-bill #cancelPurchaseBill,
#purchase-bill.locked-bill #undoPurchaseBill {
    cursor: not-allowed;
    opacity: 0.8;
}

#billing_modal.locked-bill #bill-generate-full-receipt-btn.allow-accept-payment,
#billing_modal.locked-bill #bill-generate-receipt-btn.allow-accept-payment,
#billing_modal.locked-bill #bill-generate-refund-receipt-btn.allow-accept-payment,
#purchase-bill.locked-bill #add-stock-btn,
#purchase-bill.locked-bill #cancelPurchaseBill,
#purchase-bill.locked-bill #undoPurchaseBill {
    cursor: pointer;
    opacity: unset;
}

#billing_modal.locked-bill #cancelBill,
#billing_modal.locked-bill #undoBill,
#billing_modal.canceled-bill-modal .undo-cancel-receipt,
#pharmacy-bill-modal.canceled-bill-modal .undo-cancel-pharmacy-receipt,
#purchase-bill.locked-bill #add-stock-btn,
#purchase-bill.locked-bill #cancelPurchaseBill,
#purchase-bill.locked-bill #undoPurchaseBill {
    visibility: hidden !important;
}

#billing_modal.locked-bill .disable-billing-change,
#purchase-bill.locked-bill .disable-billing-change {
    position: absolute;
    width: 100%;
    height: 100%;
    background: transparent;
    z-index: 9;
    cursor: not-allowed;
}

#billing_modal .print-receipt,
#billing_modal #previous-bill-list-dropdown,
#billing_modal.opd-bill-modal #new-bill-button {
    position: relative;
    z-index: 10;
}

#lock-bill-icon {
    display: none;
}

#billing_modal.locked-bill #lock-bill-icon,
#add-stock-modal.locked-bill #lock-bill-icon {
    display: unset;
}

.section-bg {
    background: var(--main-section-bg);
}

/* Score card round design */
/*.count-scorecard-round{*/
/*    display: inline-block;*/
/*    text-align: center;*/
/*}*/
.custom-invalid-border.select2-container--default.select2-container--focus .select2-selection--multiple,
.custom-invalid-border.select2-container--default.select2-container--focus .select2-selection--single,
.custom-invalid-border.select2-container--default.select2-container--open .select2-selection--multiple,
.custom-invalid-border.select2-container--default.select2-container--open .select2-selection--single,
.custom-invalid-border.select2-container--default .select2-selection--multiple,
.custom-invalid-border.select2-container--default .select2-selection--single {
    border: transparent;
}

/*.form-control[type="text"]:disabled, .form-control[readonly]:focus {*/
/*    border-color: var(--second-blue-color);*/
/*}*/
.form-control[readonly]:focus {
    border-color: var(--second-blue-color);
}

.prescription-box .form-control[type="text"]:disabled,
.prescription-box .form-control[type="number"]:disabled {
    border-color: #f4f5f8
}

.select2-search--dropdown .select2-search__field:focus {
    border: 1px solid var(--second-blue-color) !important;
}

.schedule-table-row {
    border: 2px solid var(--input-border) !important;
    border-collapse: separate !important;
    position: relative;
}

.schedule-detail-row.schedule-table-row {
    border-top: 0 !important;
    border-radius: 0 0 4px 4px;
}

.schedule-detail-row.schedule-table-row td {
    vertical-align: top !important;
}

.schedule-summary-row.schedule-table-row {
    border-bottom: 0 !important;
    margin-top: 15px;
    border-radius: 4px 4px 0 0;
}

.schedule-summary-row.kt-datatable__row--hover,
.schedule-detail-row.kt-datatable__row--hover {
    border-color: #DCE3EC !important;
}

.table-action-hover-btn {
    /*height: 3.3rem;*/
    width: auto !important;
    display: none;
    /*display: inline-flex;*/
    border: 2px solid var(--second-blue-color);
    border-radius: 0.25rem;
    position: absolute;
    top: -15px;
    right: 5px;
    background: #fff;
    box-shadow: 0 1px 15px 1px rgba(230, 229, 229, 0.76);
    align-items: center;
    z-index: 1;
}

.table-action-hover-btn.show {
    display: inline-flex;
}

.table-action-hover-btn .btn.btn-icon {
    font-size: 1.5rem;
    color: var(--second-blue-color);
}

.table-action-hover-btn .btn.btn-icon:hover {
    background: var(--second-blue-color);
    color: #FFFFFF;
    border-radius: 1px;
}

/* WhatsApp icon shown inline before the Follow Up status button, styled to
   match the same icon in the row hover action bar above. The Status cell also
   holds the 95px status badge and the Book Appointment icon, so the icon is
   kept compact and nothing in the row is allowed to shrink or wrap. */
/* The Status cell holds three controls: the WhatsApp icon, the fixed 95px
   status badge and the Book Appointment icon. That needs ~165px, which a
   percentage width alone does not guarantee on a narrow screen, so floor it. */
#calendar_followup_table .kt-datatable__cell.statusColumn {
    min-width: 175px;
}

.follow-up-status-dropdown-container {
    flex-wrap: nowrap;
    padding-right: 0.5rem;
}

.follow-up-status-dropdown-container > * {
    flex: 0 0 auto;
}

.follow-up-status-dropdown-container .btn.btn-icon.follow-up-whatsapp-btn {
    height: 1.75rem;
    width: 1.75rem;
    min-width: 1.75rem;
    padding: 0;
    margin-right: 0.25rem;
    font-size: 1.3rem;
    line-height: 1;
    color: var(--second-blue-color);
}

.follow-up-status-dropdown-container .schedule-confirm {
    padding-left: 0.5rem;
}

.follow-up-status-dropdown-container .btn.btn-icon.follow-up-whatsapp-btn:hover {
    background: var(--second-blue-color);
    color: #FFFFFF;
    border-radius: 1px;
}

/*.schedule-summary-row:hover ~ .schedule-detail-row,*/
/*.schedule-detail-row:hover ~ .schedule-summary-row {*/
/*    background: #edfbfa;*/
/*}*/
.schedule-summary-row-data {
    display: flex;
    align-items: center;
}

.scheduled-diagnosis.kt-badge.kt-badge--inline {
    font-size: 1.1rem;
    font-weight: 500;
    padding: .2rem .5rem;
    height: auto;
}

.kt-user-card-v2 .kt-user-card-v2__details .kt-user-card-v2__name.user-name-label {
    font-size: 1.3rem;
    color: var(--font-black-color);
}

.kt-user-card-v2 .kt-user-card-v2__details .kt-user-card-v2__name.user-name-label:hover {
    color: var(--font-black-color);
}

.custom-kt-datatable .schedule-table-row .kt-user-card-v2 .kt-user-card-v2__pic .kt-badge {
    width: 23px;
    height: 23px;
    font-size: 1rem;
}

.custom-kt-datatable .schedule-table-row .frontdesk-icon,
.patient-general-profile-row .frontdesk-icon {
    width: 23px;
    height: 23px;
    text-align: center;
    border: 1px solid var(--second-blue-color);
    border-radius: 10%;
}

.custom-kt-datatable .schedule-table-row .visitTypeIcon,
.patient-general-profile-row .frontdesk-icon .visitTypeIcon {
    font-size: 1.2rem;
}

.custom-kt-datatable .schedule-table-row .frontdesk-icon .slmicon-walking-2,
.patient-general-profile-row .frontdesk-icon .slmicon-walking-2 {
    left: 3px;
    position: relative;
    top: 1px;
}

.custom-kt-datatable .schedule-table-row .frontdesk-icon .slmicon-calendar,
.patient-general-profile-row .frontdesk-icon .slmicon-calendar {
    position: relative;
    top: 1px;
}

.custom-kt-datatable .schedule-table-row .frontdesk-icon .slmicon-world-grid {
    position: relative;
    top: 2px;
}

.table-badge.kt-badge {
    height: 23px;
    width: 23px;
}

.table-badge.kt-badge svg {
    fill: var(--second-blue-color);
}

.vital-list-display {
    width: 160px;
}

.vital-list-display .vital-label {
    width: 40%;
}

.vital-list-display .vital-value {
    width: 60%;
    text-align: left;
}

.pharmacy-prescribe-qty[readonly]:focus, .pharmacy-filled-qty[readonly]:focus {
    border-color: var(--input-border);
}

.nav-tabs.nav-tabs-line.ipd-tab .nav-item {
    margin-right: 0;
}

.nav-tabs.ipd-tab .nav-item .nav-link {
    padding: 18px 6px;
    position: relative;
}

.nav-tabs.ipd-tab .nav-item .nav-link.active {
    /*border-bottom: none !important;*/
}

/*.nav-tabs.ipd-tab .nav-item .nav-link .bottom-arrow{*/
/*    content: "";*/
/*    position: absolute;*/
/*    bottom: -25px;*/
/*    z-index: 1;*/
/*    border: solid 10px transparent;*/
/*    border-top-color: #1b78c5;*/
/*    margin: auto;*/
/*    display: block;*/
/*}*/
.setting-main-container .my-tab li a {
    width: 100%;
    text-align: center;
    display: block !important;
}

/*.OPD-patient-detail-container .btn.btn-label-brand {*/
/*    background: transparent;*/
/*}*/

/*#calendar_checkout_table tbody td{*/
/*    !*border: 1px solid red;*!*/
/*}*/
.section-border-1 {
    border: 1px solid #a2a5b9;
}

.open-bill-modal .patient-profile-item {
    position: relative;
    top: -2px;
}

#billing_modal .bill-add-discount,
#billing_modal .bill-add-tds {
    height: calc(1.1em + 1rem + 2px);
}

.discount-separator {
    background: #000;
    margin-left: 40%;
    border-collapse: collapse;
    height: 1px;
}

@media (min-width: 1025px) {
    .kt-header {
        background-color: #0eb8a9;
    }
}

.kt-header .kt-svg-icon g [fill] {
    fill: #ffffff;
}

.kt-header .kt-svg-icon {
    width: 17px;
    height: 17px;
}

.slm-header-searchbar.changeWidth {
    width: 400px;
}

.slm-header-searchbar input {
    border: 1px solid #ffffff;
    height: 38px;
    /*border-bottom: 0;*/
    /*border-bottom-right-radius: 0;*/
    /*border-bottom-left-radius: 0;*/
    /*border: transparent;*/
    color: var(--font-black-color) !important;
}

.slm-header-searchbar input:focus {
    border: 1px solid #FFFFFF;
    color: var(--font-black-color) !important;
}

#generalSearchContainer .twitter-typeahead {
    position: relative;
    vertical-align: top;
}

#generalSearchContainer .tt-menu {
    width: 100% !important;
    top: 100% !important;
    overflow: hidden;
}

#generalSearchContainer .tt-menu .tt-dataset-patient_name {
    max-height: 335px;
    padding: 5px;
    overflow-y: auto;
    overflow-x: hidden;
}

.slm-header-searchbar .kt-input-icon > .kt-input-icon__icon > span i {
    color: var(--second-blue-color);
}

.slm-header-searchbar .kt-input-icon > .kt-input-icon__icon.kt-input-icon__icon--left > span i {
    transform: rotate(275deg);
}

.slm-header-searchbar .kt-input-icon > .kt-input-icon__icon.kt-input-icon__icon--right > span i {
    font-size: 1.8rem;
}

.slm-header-searchbar ::-webkit-input-placeholder,
.slm-header-searchbar ::placeholder { /* Edge */
    color: #FFFFFF !important;
}

.slm-header .kt-user-card .kt-user-card__avatar .kt-badge,
.slm-header .kt-user-card .kt-user-card__avatar img {
    width: 50px;
    height: 50px;
    font-size: 1.8rem;
    background-color: var(--light-blue-background) !important;
    border-radius: 50%;
}

.slm-header .kt-user-card {
    padding: 1rem;
    border-bottom: 1px solid #ebedf2;
    flex-direction: column;
}

.slm-header .kt-notification .kt-notification__custom {
    border-top: 1px solid #ebedf2;
}

.slm-header .kt-user-card .kt-user-card__name .user-email {
    font-size: 1rem;
    color: var(--label-color);
}

.slm-header .kt-header__topbar .kt-header__topbar-item.kt-header__topbar-item--user .kt-header__topbar-user {
    padding: 0;
}

.slm-header .kt-header__topbar .kt-header__topbar-item.kt-header__topbar-item--user .kt-header__topbar-user .kt-badge.kt-badge--username {
    box-sizing: border-box;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    border: 2px solid rgba(255, 255, 255, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.154rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
}

.edit-profile-btn {
    background: #FFFFFF;
    border-radius: 50%;
    position: absolute;
    top: -6px;
    right: 3px;
    width: 20px;
    height: 20px;
    color: var(--second-blue-color);
    text-align: center;
    font-size: .8rem;
    line-height: 20px;
    box-shadow: 0 9px 16px 0 rgba(24, 28, 50, .25) !important;
    border: 1px solid var(--second-blue-color);
    cursor: pointer;
}

.OPD-bill-table.bill-table tbody button.dropdown-toggle {
    height: calc(1.1em + 1rem + 2px);
    padding: 0.35rem 0.60rem;
}

.hide-custom-range-option li[data-range-key="Custom Range"] {
    display: none !important;
}

.receipt-table-row.canceled-receipt,
#daily-summary-report-table-body .canceled-receipt,
.previous-bill-list-item.canceled-bill-item {
    background: #EEF0F8;
}

.cursor-zoom-in {
    cursor: zoom-in !important;
}

.cursor-zoom-out {
    cursor: zoom-out !important;
}

#fileViewerImageContainer .mfp-img.zoomed {
    -webkit-transform: scale(2);
    transform: scale(2);
}


.kt-header__topbar .kt-header__topbar-item {
    margin-left: .5rem !important;
}

.patient_diagnosis_status_drpdown.bootstrap-select > .dropdown-toggle,
.lab-dropdown.bootstrap-select > .dropdown-toggle {
    padding: 0.3rem 0.60rem;
}

.investigation-result-button.btn.btn-icon.btn-sm {
    height: 2rem;
    width: 2rem;
}

.calendar-setting-table .form-control {
    height: calc(1.2em + 1rem + 2px);
}

.table.calendar-setting-table thead th {
    padding-top: .5rem;
    padding-bottom: .5rem;
}

.table.calendar-setting-table .calendar-day-title {
    font-weight: 500;
}

.table.calendar-setting-table tbody td {
    border: none;
    padding: .3rem .5rem;
}

.masterDataTable.kt-table-header-background thead th {
    font-weight: 600;
    vertical-align: middle;
    font-size: 1.2rem;
}

.table.user-preferences-table tr td {
    vertical-align: middle;
    padding: 0.4rem 0.6rem;
}

.table.user-preferences-table tr td.field-title-label {
    font-weight: 500;
    font-size: 1.1rem;
}

.table.user-preferences-table td label {
    margin-bottom: 0;
}

.kt-badge.filter-count-badge {
    position: absolute;
    right: -5px;
    top: 15px;
    display: none;
}

.my-tab li a .kt-badge {
    padding-top: 1px !important;
}

.my-tab li a.active .kt-badge {
    background: #ffffff !important;
    color: var(--main-green-color) !important;
}

.kt-header--fixed.kt-subheader--fixed .kt-subheader.kt-subheader {
    height: 48px;
}

.hide-disabled-option .dropdown-menu li.disabled {
    display: none !important;
}

.dropdown-item {
    color: var(--font-black-color) !important;
}

.dropdown-item:hover, .dropdown-item:focus,
.dropdown-item.active, .dropdown-item:active {
    color: #FFFFFF !important;
    background-color: var(--second-blue-color) !important;;
}

.billing-summary-table tr th:first-child,
.billing-summary-table tr td:first-child {
    padding-right: 0;
}

.billing-summary-table tr th:nth-child(2),
.billing-summary-table tr td:nth-child(2) {
    padding-left: .3rem;
}

.billing-summary-table .kt-badge.kt-badge--md {
    height: 30px;
    width: 30px;
    font-weight: 600;
}

.billing-summary-table.table thead tr th {
    padding-top: 0.50rem;
    padding-bottom: 0.50rem;
    font-weight: 600;
    font-size: 1.1rem;
    border-bottom: 2px solid var(--main-green-color);

}

.billing-summary-table tr td {
    vertical-align: middle;
    font-size: 1.1rem;
    font-weight: 500;
}

.billing-summary-modal .kt-portlet.kt-iconbox {
    border-top: 4px solid var(--second-blue-color);
    height: 70px;
}

.billing-summary-modal .kt-iconbox .kt-iconbox__body .kt-iconbox__desc .kt-iconbox__content {
    font-size: 1rem;
}

.kt-aside--minimize .kt-aside-menu .kt-menu__nav > .kt-menu__item.kt-menu__item--active:before,
.kt-aside--minimize .kt-aside-menu .kt-menu__nav > .kt-menu__item:hover:before,
.kt-aside--minimize .kt-aside-menu .kt-menu__nav > .kt-menu__item.kt-menu__item--active:after,
.kt-aside--minimize .kt-aside-menu .kt-menu__nav > .kt-menu__item:hover:after {
    content: "";
    height: 8px;
    width: 8px;
    background: radial-gradient(circle closest-side, transparent 0, transparent 50%, #494e55 0) 200% 200%/400% 400%;
    position: absolute;
    /* border-bottom-right-radius: 15px; */
    z-index: 1;
}

.kt-aside--minimize .kt-aside-menu .kt-menu__nav > .kt-menu__item.kt-menu__item--active:before,
.kt-aside--minimize .kt-aside-menu .kt-menu__nav > .kt-menu__item:hover:before {
    right: 0;
    top: -8px;
}

.kt-aside--minimize .kt-aside-menu .kt-menu__nav > .kt-menu__item.kt-menu__item--active:after,
.kt-aside--minimize .kt-aside-menu .kt-menu__nav > .kt-menu__item:hover:after {
    right: 0;
    bottom: -8px;
    transform: scaleY(-1);
}

.kt-aside--minimize .kt-aside-menu .kt-menu__nav > .kt-menu__item.kt-menu__item--active:first-child:before,
.kt-aside--minimize .kt-aside-menu .kt-menu__nav > .kt-menu__item:hover:first-child:before {
    content: unset;
}

.kt-aside-menu .kt-menu__nav > .kt-menu__item.kt-menu__item--active > .kt-menu__link:before,
.kt-aside-menu .kt-menu__nav > .kt-menu__item:hover > .kt-menu__link:before {
    content: "";
    height: 100%;
    width: 3px;
    background: var(--main-green-color);
    position: absolute;
    left: 0;
    top: 0;
}

.kt-aside .ps > .ps__rail-y {
    z-index: 9;
}

.kt-aside--minimize .kt-aside-menu .kt-menu__nav > .kt-menu__item.custom-aside-submenu-parent > .kt-menu__link .kt-menu__ver-arrow {
    display: flex;
    position: absolute;
    right: 12px;
    top: 25px;
}

.custom-aside-submenu {
    display: none;
    position: fixed;
    background: #0e1318;
    border-radius: .2rem;
    margin-left: .5rem;
}

.custom-aside-submenu.show {
    display: block;
}

/*.custom-aside-submenu:after ,*/
/*.custom-aside-submenu:before{*/
/*    content: "";*/
/*    position: absolute;*/
/*    width: 10px;*/
/*    height: 10px;*/
/*    left: -20px;*/
/*    top: 20px;*/
/*    border: solid 10px transparent;*/
/*    border-right-color: #0e1318;*/
/*}*/
.custom-aside-submenu:before {
    content: "";
    position: absolute;
    width: 10px;
    left: -20px;
    height: 100%;
    top: 0;
    border: solid 10px transparent;
}

.custom-aside-submenu .kt-nav .kt-nav__item:hover:not(.kt-nav__item--disabled):not(.kt-nav__item--sub) > .kt-nav__link {
    background-color: #494e55;
}

.custom-aside-submenu .kt-nav .kt-nav__item > .kt-nav__link .kt-nav__link-text {
    color: #a2a3b7;
}

.custom-aside-submenu .kt-nav .kt-nav__item:hover:not(.kt-nav__item--disabled):not(.kt-nav__item--sub) > .kt-nav__link .kt-nav__link-bullet.kt-nav__link-bullet--line > span {
    background-color: #FFFFFF;
}

.custom-aside-submenu .kt-nav .kt-nav__item:hover:not(.kt-nav__item--disabled):not(.kt-nav__item--sub) > .kt-nav__link .kt-nav__link-text {
    color: #FFFFFF;
}

.custom-aside-submenu > .custom-aside-submenu-arrow {
    position: absolute;
    width: 10px;
    height: 10px;
    left: -20px;
    top: 20px;
    border: solid 10px transparent;
    border-right-color: #0e1318;
}

.calendar-header-btn-container .btn.btn-sm [class^="slmicon-"], .calendar-header-btn-container .btn-group-sm > .btn [class^="slmicon-"], .calendar-header-btn-container .btn.btn-sm [class*=" slmicon-"], .calendar-header-btn-container .btn-group-sm > .btn [class*=" slmicon-"],
.icon-btn-size-big .btn [class^="slmicon-"],
.icon-btn-size-big .btn [class^="slmicon-"] {
    font-size: 1.5rem !important;
}

.billing-summary-modal .nav-pills .nav-item {
    margin-right: 0;
}

.billing-summary-modal .billing-summary-title {
    font-size: 1rem;
    font-weight: 600;
}

.calendar-btn-group.btn-group-sm > .btn {
    /*padding: .5rem .5rem;*/
    /*width: 105px;*/
}

.cursor-not-allowed {
    cursor: not-allowed !important;
    pointer-events: unset !important;
}

.btn-group-sm > .go-to-calendar.btn {
    font-size: 1.1rem;
    padding: 0.4rem 1.5rem;
}

.vital-sign-modal {
    font-size: 15px;
}

.word-wrap {
    white-space: nowrap;
}

.doctor-list a.my-event:last-child,
.doctor-list .slm-scroll-list-doctor a.my-event:last-child {
    margin-bottom: 0 !important;
}

.appointment-widget-note.kt-badge.kt-badge--inline {
    height: auto;
    font-weight: 400;
    margin-bottom: .5rem;
    font-size: 1rem;
    padding: 0.5rem;
}

/*.appointment-widget-note{*/
/*    background: #C9F7F5;*/
/*    color: var(--font-black-color);*/
/*    font-weight: 400;*/
/*    padding: 3px 5px;*/
/*    border-radius: 3px;*/
/*    margin-bottom: .5rem;*/
/*}*/
.accordion.accordion-light .card .card-header .card-title.collapsed {
    color: #000000 !important;
}

.kt-header__topbar .kt-header__topbar-item.kt-header__topbar-item--active .kt-header__topbar-icon {
    border: 1px solid #FFFFFF;
}

.kt-header__topbar .kt-header__topbar-item.kt-header__topbar-item--active .kt-header__topbar-icon .kt-svg-icon g [fill] {
    fill: #FFFFFF;
}

.gynec-top-header-list .top-header-item:first-child {
    padding-left: 0;
}

.user-list-switch {
    position: relative;
    top: 10px;
    left: 2px;
}

.cursor-zoom-in {
    cursor: zoom-in !important;
}

.cursor-zoom-out {
    cursor: zoom-out !important;
}

#fileViewerImageContainer .mfp-img.zoomed {
    -webkit-transform: scale(2);
    transform: scale(2);
}

.custom-img-rotate-left svg,
.custom-img-rotate-right svg {
    fill: #fff;
    height: 30px;
    width: 30px;
}

#fileViewerImageContainer .mfp-img.rotate-90 {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

#fileViewerImageContainer .mfp-img.rotate-180 {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

#fileViewerImageContainer .mfp-img.rotate-270 {
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
}

#fileViewerImageContainer .mfp-img.zoomed.rotate-90 {
    -webkit-transform: scale(2) rotate(90deg);
    transform: scale(2) rotate(90deg);

}

#fileViewerImageContainer .mfp-img.zoomed.rotate-180 {
    -webkit-transform: scale(2) rotate(180deg);
    transform: scale(2) rotate(180deg);
}

#fileViewerImageContainer .mfp-img.zoomed.rotate-270 {
    -webkit-transform: scale(2) rotate(270deg);
    transform: scale(2) rotate(270deg);
}

.rate {
    /* float: left; */
    /*height: 46px;*/
    /* padding: 0 3rem; */
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: row-reverse;
}

.rate:not(:checked) > input {
    position: absolute;
    top: -9999px;
}

.rate:not(:checked) > label {
    /*float:right;*/
    width: 1em;
    overflow: hidden;
    white-space: nowrap;
    cursor: pointer;
    font-size: 45px;
    color: #ccc;
}

.rate:not(:checked) > label:before {
    content: '★ ';
}

.rate > input:checked ~ label {
    color: #ffc700;
}

.rate:not(:checked) > label:hover,
.rate:not(:checked) > label:hover ~ label {
    color: #ffc700;
}

.rate > input:checked + label:hover,
.rate > input:checked + label:hover ~ label,
.rate > input:checked ~ label:hover,
.rate > input:checked ~ label:hover ~ label,
.rate > label:hover ~ input:checked ~ label {
    color: #ffc700;
}

.doctor-timeline-summary .btn {
    border-top: 3px solid;
}

.kt-user-card-v2 .kt-user-card-v2__details.line-height-unset {
    line-height: unset;
}

.global-search-tab {
    /*text-align: right;*/
    /*padding-right: 10px;*/
}

/*.global-search-tab button{*/
/*    border-radius: 0;*/
/*}*/

.custom-overlay {
    height: 100vw;
    width: 100vw;
    background: #000;
    position: fixed;
    z-index: 95;
    opacity: 0.5;
}

.registration-dropdown.dropdown-menu {
    min-width: 10rem;
    right: 0 !important;
    left: auto !important;
}

.registration-dropdown.dropdown-menu .dropdown-item {
    align-items: center;
    padding: 0.25rem 1.5rem;
}

.registration-dropdown.dropdown-menu .dropdown-item i {
    font-size: 1.5rem;
}

.no-result-found .global-search-tab {
    display: none;
}

#medicine-template-modal .added-medicine-duration {
    display: none !important;
}

/*.rate-us-fixed {*/
/*    width: 80px;*/
/*    text-align: center;*/
/*    bottom: 5px;*/
/*}*/

.rate-us-fixed .btn.btn-icon {
    height: 40px;
    width: 40px;
    padding: 0;
    font-size: 1.5rem;
    color: #ff675d;
    text-align: center;
}

.rate-us-fixed .btn.btn-icon:hover {
    border: none;
}
.chief-complaint-card-body .kt-nav .kt-nav__item > .kt-nav__sub .kt-nav__item > .kt-nav__link {
    padding: 0.5rem 0.5rem 0.5rem 2.5rem;
}

.patient_bill_credit.kt-badge {
    font-size: 1.1rem;
    padding: .9rem 1rem !important;
}

#bill-audit-panel {
    z-index: 9999;
    width: 450px;
    right: -450px;
    bottom: 0;
}

#bill-audit-panel.kt-quick-panel.kt-quick-panel--on {
    right: 0;
}

/*#bill-audit-panel .bill-audit-insert-data{*/
/*    background: #0abb8766;*/
/*}*/

/*#bill-audit-panel .bill-audit-update-data{*/
/*    background: #ffb82266;*/
/*}*/

/*#bill-audit-panel .bill-audit-delete-data{*/
/*    background: #fd397a66;*/
/*}*/

#bill-audit-data-container {
    height: 75vh;
    overflow: auto;
    overflow-x: hidden;
}

.bill-history-timeline.timeline.timeline-4.timeline-justified .timeline-items .timeline-item {
    margin-bottom: 8px;
}

.bill-history-timeline.timeline.timeline-4 .timeline-items .timeline-item .timeline-badge > div {
    border-radius: 50%;
    width: 12px;
    height: 12px;
}

.bill-history-timeline .action-text {
    position: absolute;
    right: 15px;
    font-size: 1rem;
    font-weight: 500;
}

.bill-history-timeline.timeline.timeline-4 .timeline-items .timeline-item .timeline-content {
    color: #000;
    font-size: 1rem;
    font-weight: 400;
}

.kt-datatable.kt-datatable--default > .kt-datatable__table > .kt-datatable__head .kt-datatable__row,
.kt-datatable.kt-datatable--default > .kt-datatable__table > .kt-datatable__body .kt-datatable__row,
.kt-datatable.kt-datatable--default > .kt-datatable__table > .kt-datatable__foot .kt-datatable__row {
    display: table;
    table-layout: initial;
}

.ophthal-eye-glass-prescription-portlet.quick-input.highlight {
    background: #e0f0ff;
}

.ophthal-left-right-button-container {
    display: none !important;
}

.ophthalmologist .ophthal-left-right-button-container {
    display: flex !important;
}

.opthal-input-container {
    display: none !important;
}

.ophthalmologist .opthal-input-container {
    display: block !important;
}

.ophthal-prescription-left-right-btn.compact-prescription {
    /*width: 125px;*/
}

.ophthal-prescription-column {
    display: none;
}

.ophthalmologist .ophthal-prescription-column {
    display: table-cell;
}

.classic-prescription.ophthal-left-right-button-container .btn {
    color: #fff;
    border-color: #fff;
}

.compact-prescription-global-RLB-container .btn:focus {
    box-shadow: unset !important;
}

.compact-prescription-global-RLB-container .dropdown-item {
    cursor: pointer;
}

#obhistory-table-container .obhistory-table-row {
    /*background: #ebecf0;*/
    border-bottom: 2px solid #ebecf0;
}

#obhistory-table-container .obhistory-table-row:last-child {
    border-bottom: 0;
}

.obhistory-table-row .tagify {
    border-color: var(--input-border);
}

.referral-list .referral-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .5rem;

}

.referral-list .referral-item .referral-item-data {
    font-weight: 500;
}

.referral-basic-detail-container .dropdown-menu {
    min-width: unset !important;
    width: 100% !important;

}

.obhistory-delete-container {
    position: absolute;
    top: -10px;
    right: 0;
}

/*.obhistory-sr-no-container{*/
/*    position: absolute;*/
/*    top: -17px;*/
/*    left: -8px;*/
/*    width: 100%;*/
/*}*/
.obhistory-sr-no-container .table_sr_no {
    width: 38px;
    height: 38px;
    background-color: #ebecf0;
}

.obhistory-delete-row {
    position: absolute;
    right: 0;
    z-index: 99;
    opacity: 0;
}

.obhistory-table-row:hover .obhistory-delete-row {
    opacity: 1;
}

.obhistory-table-row-separator {
    height: 0;
    border-bottom: 3px solid #ebecf0;
}

#nextPatient .spinner.spinner-primary:before {
    border: 2px solid white;
    border-right: 2px solid transparent;
}

.schedule-detail-row .referral-doctor-count {
    width: 19px;
    height: 19px;
    font-size: 0.8rem;
    line-height: 0.3rem;
    border-radius: 10%;
}

.new-referral-svg {
    margin-left: 0.1rem;
    margin-top: -5px;
    transform: scale(0.9);
}

.new-referral-svg {
    fill: #0abb87;
}

#obhistory-table-container .bootstrap-select .dropdown-menu {
    min-width: 100% !important;
}

.prescription-table tfoot.always-show {
    display: table-footer-group !important;
}

#outgoing-referral-note-template-container {
    max-height: 65vh;
    overflow: auto;
}

#ophthal-plus-minus-container button {
    font-size: 2rem;
    border: 1px solid var(--second-blue-color);
    width: 6rem;
}

#prescriptionListContainer .kt-portlet.referral-portal-section-portlet,
#labListContainer .kt-portlet.referral-portal-section-portlet {
    border: 2px solid #eef0f8;
    box-shadow: none;
}

#prescriptionListContainer .kt-portlet.referral-portal-section-portlet:hover,
#labListContainer .kt-portlet.referral-portal-section-portlet:hover {
    border-color: var(--second-blue-color);
}

/*#prescriptionListContainer .kt-portlet.referral-portal-section-portlet:hover .referral-portal-section-portlet-head {*/
/*    background: #edfbfa;*/
/*}*/

.lab-timeline {
    /*width: 160px;*/
    /*margin-right: 2rem;*/
}

.lab-change-status-btn {
    width: 105px;
}

.lab-item {
    align-items: center;
    border-bottom: 1px solid #ebedf2;
    margin-bottom: .5rem;
    padding-bottom: .5rem;
}

.lab-item:last-child {
    border-bottom: none;
}

.statusButtonContainer {
    margin: 0 1rem;
    text-align: center;
}

.btn-outline-success-2:not(:disabled):not(.disabled):active,
.btn-outline-success-2:not(:disabled):not(.disabled).active,
.show > .btn-outline-success-2.dropdown-toggle {
    color: #fff;
    background-color: #0abb87;
    border-color: #0abb87;
}

.lab-timeline .tl_btns li {
    flex: unset;
    width: 45px;
}

#labListContainer .referral-portal-section-portlet-head {
    cursor: pointer;
}

.lab-is-waiting-btn.btn-outline-dark.active {
    color: #ff675d !important;
    border-color: #ff675d !important;
}

.laboratory-note-btn.active {
    color: #ff675d;
}

.lab-timeline .tl_btns {
    -webkit-box-pack: start;
    justify-content: left;
}

.lab-is-waiting-btn.btn-outline-dark {
    color: #5e62788c;
    border-color: #5e62788c;
    background-color: white !important;
}

.lab-is-waiting-btn.btn-outline-dark:hover {
    color: #5e62788c;
    border-color: #5e62788c;
    background-color: white !important;
}

.lab-referral-investigation-data .investigation-result-button.btn.btn-icon.btn-sm {
    height: 2.5rem;
    width: 2.5rem;
}

#followup-datepicker-container .datepicker {
    width: 350px;
}

#followup-datepicker-container .datepicker table tr td {
    height: 45px;
    width: 45px;
    font-size: 1.1rem;
    vertical-align: top;
}

#followup-datepicker-container .datepicker tbody tr > td.day.selected .booked-slot, #followup-datepicker-container .datepicker tbody tr > td.day.selected:hover .booked-slot, #followup-datepicker-container .datepicker tbody tr > td.day.active .booked-slot, #followup-datepicker-container .datepicker tbody tr > td.day.active:hover .booked-slot, #followup-datepicker-container .datepicker tbody tr > td.day.today .booked-slot {
    color: #ffffff;
}

.booked-slot {
    font-size: .8rem;
    color: #ff675d;
    font-weight: 600;
}

.todo-task-container .kt-widget2 .kt-widget2__item .kt-widget2__actions {
    visibility: unset;
    flex-grow: unset;
    width: 22%;
}

.todo-task-container .kt-widget2 .kt-widget2__item .kt-widget2__actions .btn {
    height: 2.4rem;
    width: 2.4rem;
}

.todo-task-container .kt-widget2 .kt-widget2__item .kt-widget2__actions .btn i {
    font-size: 1.3rem;
}

.todo-task-container .kt-widget2 .kt-widget2__item .kt-widget2__info {
    width: 63%;
}

.todo-task-container .kt-widget2 .kt-widget2__item .kt-widget2__checkbox {
    padding: 1rem 0 0 2rem
}

.todo-task-container .kt-widget2 .kt-widget2__item .kt-widget2__checkbox .kt-checkbox > span {
    height: 24px;
    width: 24px;
}

.todo-task-container .kt-widget2 .kt-widget2__item .kt-widget2__info .kt-widget2__title {
    font-weight: 500;
    color: var(--font-black-color);
    font-size: 1.1rem;
}

.todo-task-container .kt-widget2 .kt-widget2__item .kt-widget2__info .kt-widget2__title:hover {
    color: var(--font-black-color);
}

.todo-task-container .kt-widget2 .kt-widget2__item .kt-widget2__info .kt-widget2__username {
    color: var(--label-color);
    font-weight: 500;
}

.todo-task-container .kt-widget2 .kt-widget2__item .kt-widget2__info .kt-widget2__username:hover {
    color: var(--label-color);
}

#quickFeedback:hover {
    color: #FFF !important;
}

#to-do-form-category-action-container.empty #edit-to-do-category-button,
#to-do-form-category-action-container.empty #delete-to-do-category-button {
    display: none;
}

.adviseInvestigationTagifyContainer .tagify__tag > div > * {
    white-space: unset !important;
}

#advise_modal .kt-portlet.kt-portlet--height-fluid {
    height: 100% !important;
}

#advise_modal .modal-body {
    background: #ECECF3;
}

.online-appointment-source-badge {
    font-size: 0.6rem;
    font-weight: 500;
    position: absolute;
    line-height: 1;
    top: -7px;
    right: -6px;
    z-index: 2;
    background: var(--second-blue-color);
    /*background: #ff675d;*/
    color: #fff;
    padding: 1.8px;
    display: inline-block;
    /* height: 11px; */
    /* width: 11px; */
    padding: 2px;
}

.custom-overflow-visible {
    overflow: visible !important;
}

.undoDeleteSVG {
    height: 2.3rem;
    width: 2.3rem;
}

.undoCancelAppointment:hover .undoDeleteSVG g {
    fill: #fff !important;
}

.custom-disable {
    opacity: 0.7;
    pointer-events: none;
    cursor: not-allowed;
}

.schedule-table-row.deleted-row {
    background: #eef0f8;
    opacity: 0.8;
}

.schedule-table-row.deleted-row .kt-separator {
    border-bottom: 1px solid #cccccc !important;
}

#opd-patient-more-detail-accordion .card-header {
    cursor: default;
}

#opd-patient-more-detail-accordion .card-title {
    width: 140px;
    cursor: pointer;
}

.slmicon-badge {

}

.autoCalculateQtyIcon {
    height: 23px;
    width: 23px;
}

.autoCalculateQtyIcon g {
    fill: #1b78c5;
}

#autoCalculateQtySwitch.active .autoCalculateQtyIcon g,
.autoCalculateQtyIcon:hover g,
.autoCalculateQtyIcon:focus g {
    fill: #fff;
}

#calendar-setting-modal .modal-dialog {
    max-width: 1200px;
}

.time-slot-container-table.disabled-table {
    pointer-events: none;
    opacity: 0.5;
}

.custom-disabled-button {
    pointer-events: none;
    opacity: 0.5;
}

.fc-bgevent {
    opacity: unset !important;
}

.custom-block-calendar-stripes {
    /*background: repeating-linear-gradient(45deg, #606dbc, #606dbc 5px, #465298 5px, #465298 7px) !important;*/
    background: rgba(96, 109, 188, .3) !important;
    /*background: repeating-linear-gradient(45deg, rgba(96, 109, 188, .3), rgba(96, 109, 188, .3) 5px, rgba(70, 82, 152, .3) 5px, rgba(70, 82, 152, .3) 7px) !important;*/
    border-color: rgba(0, 0, 0, .2) !important;
}

.background-event-text {
    color: var(--font-black-color);
    font-size: 0.9rem;
    font-weight: 500;
    padding-left: 3px;
}

.fc-time-grid .fc-bgevent {
    left: -5px !important;
}

.kt-portlet.calendar-config-portlet .kt-portlet__head {
    min-height: 50px;
}

.kt-portlet.calendar-config-portlet .kt-portlet__head .small-title {
    color: var(--label-color);
    font-size: .9rem;
    margin-top: .2rem;
}

.diagnosis-duration-select .btn.dropdown-toggle {
    line-height: 1;
}

.diagnosis-duration-input {
    min-width: 120px !important;
}

/* Scoped to IPD on 2026-08-17. These three were app-wide, and their !important beat the
   [select-menu-v2] panel recipe that now owns this dropdown on OPD Patient Details —
   forcing a page-specific override block that only re-stated recipe values. Confining
   them to the page still on legacy chrome removes the duplication instead of layering
   over it. IPD renders identically; drop the prefixes to restore the old behaviour. */
.slm-page-ipd-patient-details .bootstrap-select.diagnosis-duration-select .dropdown-menu.inner > li > a {
    padding: 3px 10px !important;
}

.slm-page-ipd-patient-details .bootstrap-select.diagnosis-duration-select .dropdown-menu.inner > li > a .text {
    font-size: 1rem !important;
}

.slm-page-ipd-patient-details .diagnosis-duration-select .dropdown-menu .form-control {
    border: 1px solid var(--input-border) !important;
}

/*.gynec-history-portlet-height.kt-portlet {*/
/*    height: 368px;*/
/*}*/

.magnify-modal {
    position: absolute;
    width: 60%;
    height: 95vh;
    background-color: #111;
    background-color: rgba(0, 0, 0, 0.85);
    -webkit-box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.3);
    z-index: 1090;
    margin-left: auto;
    margin-right: auto;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
}

.magnify-header {
    position: relative;
    height: 40px;
    color: #fff;
    z-index: 2;
}

.magnify-header .magnify-toolbar {
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 40px;
}

.magnify-title {
    margin-right: 80px;
    padding: 13px 10px;
    font-size: 14px;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: default;
}

.magnify-stage {
    position: absolute;
    top: 40px;
    left: 10px;
    bottom: 40px;
    right: 10px;
    border: 1px solid #ccc;
    /*overflow: hidden;*/
    z-index: 1;
    text-align: center;
    overflow: auto;
}

.magnify-stage.pdf-magnify-stage {
    overflow: hidden;
}

.magnify-stage img {
    display: inline-block;
    position: relative;
    max-height: 100%;
}

.magnify-footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 40px;
    text-align: center;
    color: #fff;
    z-index: 2;
}

.magnify-footer .magnify-toolbar {
    display: inline-block;
    height: 40px;
}

.magnify-toolbar {
    font-size: 0;
}

.magnify-button {
    display: inline-block;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 10px;
    border-width: 0;
    border-radius: 0;
    text-align: center;
    font-size: 18px;
    background: none;
    color: #ccc;
    cursor: pointer;
    outline: none;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.magnify-button:hover {
    color: #fff;
}

.magnify-button.magnify-button-close:hover {
    background-color: #ff4545;
}

.magnify-button.magnify-button-maximize:hover {
    background-color: #525252;
}

.is-grab {
    cursor: move;
    cursor: -webkit-grab;
    cursor: grab;
}

.is-grabbing {
    cursor: move;
    cursor: -webkit-grabbing;
    cursor: grabbing;
}

.resizable-handle-e {
    position: absolute;
    top: 0;
    bottom: 0;
    right: -5px;
    left: auto;
    width: 10px;
    z-index: 10;
    cursor: e-resize;
}

.resizable-handle-s {
    position: absolute;
    top: auto;
    bottom: -5px;
    right: 0;
    left: 0;
    height: 10px;
    z-index: 10;
    cursor: s-resize;
}

.resizable-handle-w {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -5px;
    right: auto;
    width: 10px;
    z-index: 10;
    cursor: w-resize;
}

.resizable-handle-n {
    position: absolute;
    top: -5px;
    bottom: auto;
    right: 0;
    left: 0;
    height: 10px;
    z-index: 10;
    cursor: n-resize;
}

.resizable-handle-se {
    position: absolute;
    width: 10px;
    height: 10px;
    bottom: -5px;
    right: -5px;
    top: auto;
    left: auto;
    z-index: 11;
    cursor: se-resize;
}

.resizable-handle-sw {
    position: absolute;
    width: 10px;
    height: 10px;
    bottom: -5px;
    right: auto;
    top: auto;
    left: -5px;
    z-index: 11;
    cursor: sw-resize;
}

.resizable-handle-nw {
    position: absolute;
    width: 10px;
    height: 10px;
    bottom: auto;
    right: auto;
    top: -5px;
    left: -5px;
    z-index: 11;
    cursor: nw-resize;
}

.resizable-handle-ne {
    position: absolute;
    width: 10px;
    height: 10px;
    bottom: auto;
    right: -5px;
    top: -5px;
    left: auto;
    z-index: 11;
    cursor: ne-resize;
}

:-webkit-full-screen {
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important;
}

:-moz-full-screen {
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important;
}

:-ms-fullscreen {
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important;
}

:fullscreen {
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important;
}

:-webkit-full-screen .magnify-header,
:-webkit-full-screen .magnify-footer,
:-webkit-full-screen .resizable-handle {
    display: none;
}

:-moz-full-screen .magnify-header,
:-moz-full-screen .magnify-footer,
:-moz-full-screen .resizable-handle {
    display: none;
}

:-ms-fullscreen .magnify-header,
:-ms-fullscreen .magnify-footer,
:-ms-fullscreen .resizable-handle {
    display: none;
}

:fullscreen .magnify-header,
:fullscreen .magnify-footer,
:fullscreen .resizable-handle {
    display: none;
}

:-webkit-full-screen .magnify-stage {
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border-width: 0;
}

:-moz-full-screen .magnify-stage {
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border-width: 0;
}

:-ms-fullscreen .magnify-stage {
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border-width: 0;
}

:fullscreen .magnify-stage {
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border-width: 0;
}

.custom-kt-datatable-footer {
    /*border-top: 2px solid;*/
}

.custom-kt-datatable-serial-number {
    position: absolute;
    top: 5px;
    left: -13px;
    width: 26px !important;
    height: 26px !important;
    background: var(--input-border);
    color: var(--font-black-color);
    font-weight: 500;
    text-align: center;
    border-radius: 20%;
    line-height: 2;

}

.schedule-summary-row.kt-datatable__row--hover .custom-kt-datatable-serial-number {
    background: #F2F4F7;
    color: #475467;
}

/*#calendar_followup_table .custom-kt-datatable-serial-number {*/
/*    background: #5E6278;*/
/*}*/

/*#calendar_schedule_table .custom-kt-datatable-serial-number {*/
/*    background: #FFB822;*/
/*}*/

/*#calendar_waiting_table .custom-kt-datatable-serial-number {*/
/*    background: #FF675D;*/
/*}*/

/*#calendar_engaged_table .custom-kt-datatable-serial-number {*/
/*    background: #1B78C5;*/
/*}*/

/*#calendar_checkout_table .custom-kt-datatable-serial-number {*/
/*    background: #1BC5BD;*/
/*}*/

.follow-up-datepicker-extra-text {
    margin-bottom: 0 !important;

}

.follow-up-datepicker-extra-text.follow-up-count {
    color: #5e6278;
}

.follow-up-datepicker-extra-text.appointment-count {
    color: #ffb822;
    margin-left: 2px;
}

.active.day .follow-up-datepicker-extra-text.follow-up-count {
    color: #ffffff;
}

.active-prescription-container {
    border: 3px solid #FF675D;
}

.tagify[readonly]:not(.tagify--mix) > .tagify__input {
    visibility: visible;
    width: 0;
    margin: 5px 0;
    pointer-events: none;
}

.vaccine-checkbox {
    position: absolute;
    top: 1px;
    right: -10px;
    display: none;
}

.vaccine-form:hover .vaccine-checkbox,
.show-all-vaccine-checkbox .vaccine-form .vaccine-checkbox {
    display: block;
}

.vaccine-update-header.alert.alert-primary {
    position: absolute;
    width: 70%;
    top: -56px;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
}

.vaccine-form .vaccine-name {
    font-size: 1.1rem;
    font-weight: 500;

}

.vaccine-form .vaccine-name,
.vaccine-form .vaccine-brand-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vaccine-update-header .lead:hover {
    color: white;
}

#vaccine-update-header .datepicker tfoot .vaccine-due-date-custom-btn {
    padding: 0.3rem 0;
    font-weight: 500;
    text-align: left;
    display: block;
}

.dropdown-menu.dropdown-menu-lg.vaccine-dropdown-menu {
    width: 550px;
}

.vaccine-menu-ul {
    padding: 0;
    list-style: none;
    display: block;
}

.vaccine-menu-ul .vaccine-menu-ul-item a {
    display: block;
    color: var(--font-black-color);
    width: 100%;
    padding: 0.3rem .5rem;
    font-weight: 400;
    white-space: nowrap;
}

.vaccine-menu-ul .vaccine-menu-ul-item:hover a {
    background: var(--second-blue-color);
    color: #ffffff;
}

.vaccine-import-button-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 475px;
}

/*.kt-portlet.vaccine-section-portlet{*/
/*    border: 2px solid #a2a5b9;*/
/*}*/

.medicine-template-dropdown .dropdown-menu.show,
.billing-package-template-dropdown .dropdown-menu.show {
    min-width: 300px;
}

.bootstrap-select .dropdown-menu.inner > li.dropdown-header.substitute-medicine {
    padding: 5px 10px;
    font-weight: 600;
    color: var(--font-black-color);
    font-size: 1.05rem;
}

.bootstrap-select .dropdown-menu.inner > li > a.substitute-medicine.dropdown-item {
    padding: 5px 30px;
    color: var(--font-black-color);
    border-bottom: 1px solid #ffffff;
    font-weight: 400;
}

.medicine-substitute-dropdown .dropdown-divider {
    display: none;
}

.medicine-substitute-dropdown .dropdown-menu {
    width: 350px !important;
}

.medicine-substitute-dropdown .dropdown-menu > .inner {
    overflow-x: hidden;
}

select.medicine-substitute-select {
    pointer-events: none;
}

.brightness-5 {
    filter: brightness(0.5);
}

.ndps {
    color: #FF1493 !important;
}

.ndbs {
    color: #141bff !important;
}

.draggable-history-row:hover,
.draggable-history-row:hover label {
    cursor: move;
}

.history-status-switch-change {
    cursor: pointer;
}

.draggable-history-row:hover,
.draggable-history-row.ui-sortable-helper {
    background-color: #edfbfa;
    /*border: 1px solid var(--input-border);*/
}

#qr_scan_modal .modal-dialog {
    width: 500px;
}

#qr_scan_modal .modal-body {
    height: 470px;
}

.medicine-stock-show .show-medicine-stock {
    display: none !important;
}

.deleted-medicine-row {
    background: #eef0f8;
    opacity: 0.8;
}

@keyframes marquee-right-to-left {
    from {
        transform: translateX(100vw);
    }
    to {
        transform: translateX(-100%);
    }
}

.marquee {
    display: flex;
    align-items: center;
    color: #fff;
    font-weight: 500;
    font-size: 1.2rem;
    width: 100%;
}

.marquee-content {
    overflow: hidden;
    width: 100%;
}

.marquee-inner {
    margin: 0;
    /*width: fit-content;*/
}

.marquee-content p {
    animation: marquee-right-to-left 30s linear infinite;
}

.pharmacy-batch-tagify.tags-look {
    width: 600px !important;
}

.pharmacy-batch-tagify .tagify__dropdown__item:hover,
.pharmacy-batch-tagify .tagify__dropdown__item.tagify__dropdown__item--active {
    background: var(--main-green-color) !important;
    color: #ffffff !important;
}

.pharmacy-batch-tagify .tagify__dropdown__item:not(:last-child) {
    border-bottom: 1px solid #ebedf2;
}

.bootstrap-select.pharmacy-batch-opt .dropdown-menu {
    width: 600px !important;
    min-width: 600px !important;
}

.bootstrap-select.pharmacy-batch-opt .dropdown-menu.inner {
    width: 600px !important;
}

.bootstrap-select.pharmacy-batch-opt .dropdown-menu li > a {
    display: block;
    width: 100%;
    white-space: normal;
}

.bootstrap-select.pharmacy-batch-opt .dropdown-menu.inner > li > a {
    padding: 6px 10px;
}

.bootstrap-select.pharmacy-batch-opt .dropdown-menu.inner > li > a .text {
    display: block;
    width: 100%;
    white-space: normal;
}

.bootstrap-select.pharmacy-batch-opt .dropdown-menu.inner > li > a .text .batch-option-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bootstrap-select.pharmacy-batch-opt .dropdown-menu.inner > li > a .text .batch-option-row > div {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bootstrap-select.pharmacy-batch-opt > .dropdown-toggle .filter-option-inner-inner .batch-option-row {
    justify-content: flex-start;
}

.bootstrap-select.pharmacy-batch-opt > .dropdown-toggle .filter-option-inner-inner .batch-option-row > div:not(:first-child) {
    display: none;
}

.bootstrap-select.pharmacy-batch-opt .dropdown-menu.inner > li:not(:last-child) > a {
    border-bottom: 1px solid #ebedf2;
}

.bootstrap-select.pharmacy-batch-opt .dropdown-menu.inner > li.active > a,
.bootstrap-select.pharmacy-batch-opt .dropdown-menu.inner > li.selected > a,
.bootstrap-select.pharmacy-batch-opt .dropdown-menu.inner > li > a:hover {
    background: var(--main-green-color) !important;
    color: #ffffff !important;
}

.bootstrap-select.pharmacy-batch-opt .dropdown-menu.inner > li.active > a .text,
.bootstrap-select.pharmacy-batch-opt .dropdown-menu.inner > li.selected > a .text,
.bootstrap-select.pharmacy-batch-opt .dropdown-menu.inner > li > a:hover .text {
    color: #ffffff !important;
}

#dischargeTimeFrmContainer .bootstrap-timepicker-widget.dropdown-menu.open,
#admissionTimeFrmContainer .bootstrap-timepicker-widget.dropdown-menu.open {
    top: 35px !important;
    left: 0 !important;
}

.kt-datatable.kt-datatable--default > .kt-datatable__table > .kt-datatable__body .kt-datatable__row > .kt-datatable__cell > span {
    font-weight: 400;
}

.kt-datatable.kt-datatable--default > .kt-datatable__table > .kt-datatable__head .kt-datatable__row > .kt-datatable__cell > span, .kt-datatable.kt-datatable--default > .kt-datatable__table > .kt-datatable__foot .kt-datatable__row > .kt-datatable__cell > span {
    font-size: 1rem !important;
}

#gst-table .kt-datatable__body,
.pharmacy-table-scroll .kt-datatable__body {
    /*height: 300px;*/
}

#gst-table .ps__rail-x,
#gst-table .ps__rail-y,
.pharmacy-table-scroll .ps__rail-x,
.pharmacy-table-scroll .ps__rail-y {
    opacity: unset !important;
}

#gst-table .ps > .ps__rail-x,
#gst-table .ps > .ps__rail-x > .ps__thumb-x,
.pharmacy-table-scroll .ps > .ps__rail-x,
.pharmacy-table-scroll .ps > .ps__rail-x > .ps__thumb-x {
    height: 7px !important;
}

/*.modal-fullscreen {*/
/*    width: 100vw !important;*/
/*    max-width: none !important;*/
/*    height: 100% !important;*/
/*    margin: 0 !important;*/
/*}*/

.modal-fullscreen {
    width: 99vw !important;
    max-width: none !important;
    height: 97% !important;
    margin: 10px auto !important;
}

.modal-fullscreen .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
    /*border-radius: 0 !important;*/
}

.modal-fullscreen .modal-header,
.modal-fullscreen .modal-footer {
    border-radius: 0;
}

.modal-fullscreen .modal-body {
    overflow-y: auto;
}

/*.fixTableHead {*/
/*    overflow-y: auto;*/
/*    height: 300px;*/
/*}*/
/*.fixTableHead thead th {*/
/*    position: sticky;*/
/*    top: 0;*/
/*}*/

.validate-cn-amount.form-control {
    width: 85px;
    height: calc(1.1em + 1rem + 2px);
}

.validate-cn-amount.form-control:disabled {
    border: none; /* Remove the border */
}

/*.validate-cn-amount:not(:disabled) {*/
/*    border: none;*/
/*    border-bottom: 1px solid #000; !* Add or show the border *!*/
/*}*/

.supplier-detail-tab .nav-item {
    width: 125px;
    text-align: center;
}

.custom-action-btn .btn.clear_initiated_payment_transaction {
    width: auto;
    color: #fff;
    background-color: var(--second-blue-color);
    border-color: var(--second-blue-color);
    padding: 0.5rem;
    height: unset;
    line-height: 1.5;
}

.kt-portlet .kt-portlet__head .kt-portlet__head-tools {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-line-pack: end;
    align-content: flex-end;
}

.billing-report-table.billing-report-table-pointer tbody tr td {
    cursor: pointer;
}

.billing-report-table.billing-report-table-row-hover tbody tr:hover {
    background: #edfbfa;
}

.billing-report-table tbody tr td .insurance-badge {
    width: 20px;
    height: 20px;
    font-size: 1rem;
    border-radius: 10%;
    line-height: .3rem;
}

.canceled-bill-note {
    color: #fd397a !important;
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: uppercase;
}


/*.slm-scrollable-table thead th {*/
/*    position: sticky;*/
/*    top: 0;*/
/*    z-index: 9;*/
/*}*/

/*.slm-scrollable-table tfoot {*/
/*    background: #ffffff;*/
/*    position: sticky;*/
/*    bottom: 0;*/
/*    z-index: 9;*/
/*}*/

/*@media (min-width: 1366px) {*/
/*    .slm-scrollable-table-container {*/
/*        overflow: auto;*/
/*        height: 30vh;*/
/*    }*/
/*}*/

/*@media (min-width: 1400px) {*/
/*    .slm-scrollable-table-container {*/
/*        overflow: auto;*/
/*        height: 40vh;*/
/*    }*/
/*}*/

/*@media (min-width: 1920px) {*/
/*    .slm-scrollable-table-container {*/
/*        overflow: auto;*/
/*        height: 54vh;*/
/*    }*/
/*}*/

.sales-bill-input-row [class^="col"]:not(:first-child) {
    padding-left: 0.4rem;
}

.sales-bill-input-row [class^="col"]:not(:last-child) {
    padding-right: 0.4rem;
}

.sales-bill-input-row .form-group {
    margin-bottom: .5rem;
}

.pharmacy-bill-table-summary.table td {
    border-top: unset;
    padding: 0 0.75rem;
    font-size: 1rem;
}

#inventory-sales-bill-table .sales-bill-status {
    width: 38px;
    padding: 0.6rem;
    margin-right: 0.3rem;
}

.calendar-tooltip .kt-portlet {
    border: 1px solid;
}


.choose-location-container .option {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 1.4em;
    border: 1px solid #EBEDF3;
    border-radius: 0.42rem;
}

.choose-location-container .option .option-control {
    width: 2.7rem;
    padding-top: 0.1rem;
}

.choose-location-container .option .option-label {
    width: 100%;
}

.choose-location-container .option .option-label .option-head {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.choose-location-container .option .option-label .option-head .option-title {
    font-size: 1.2rem;
    font-weight: 500;
    color: #0a0a0a;
}

.choose-location-container .option .option-label .option-body {
    display: block;
    font-size: 1.05rem;
    color: var(--label-color);
    font-weight: 500;
}

.location-selectpicker-container .form-control,
.location-selectpicker-container .bootstrap-select > .dropdown-toggle.btn-light {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.24);
}

.io-table-container,
.vital-sign-table-container {
    max-height: 500px;
    border: 1px solid #d4d4d4;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
}

.io-table-container .table thead,
.vital-sign-table-container .table thead {
    position: sticky;
    top: 0;
    z-index: 10; /* Ensure the header is on top of the body rows */
}

.io-table-container .table th,
.vital-sign-table-container .table th {
    position: sticky;
    top: 0;
    background: #efefef; /* Match this with your table header background color */
}

#bill-receipt-modal .bootstrap-timepicker-widget.open {
    top: 0 !important;
    left: 0 !important;
}

#support_modal .support-timing {
    font-weight: 500;
    font-size: 1.5rem;
    text-align: center;
    margin-bottom: 15px;
    background-color: var(--light-blue-background);
    color: var(--second-blue-color);
    padding: 8px;
}

#support_modal .kt-widget4 .kt-widget4__item .kt-widget4__info .kt-widget4__username {
    font-size: 2rem;
}

#select-all-bills + span,
#select-all-receipts + span {
    border: 1px solid #bdbdbd !important;
}

#select-all-bills:checked + span,
#select-all-receipts:checked + span {
    border: none !important;
}

#daily-collection.billing-report-table th:first-child .kt-checkbox {
    padding-left: 4px;
}

/* Follow-up badge light background */

/* Global portlet corner radius */
body .kt-portlet {
    border-radius: 15px;
}

#digvalue .clinical-note-button,
#lastDiagnosisAjaxData .clinical-note-button,
#currentDiagnosis .clinical-note-button {
    color: var(--slm-tab-primary) !important;
}

#diagnosis-content .diagnosis-icon {
    color: var(--slm-tab-primary);
}

/* ----- Brand override: bootstrap-select dropdown items use teal instead of
   the project-wide legacy blue (.dropdown-item rule at L13301). Scoped to
   .bootstrap-select so non-selectpicker dropdowns keep their current color.
   Applies to all kt-selectpicker menus project-wide (diagnosis, investigation,
   procedure, etc.) — by design, for brand consistency. */
.bootstrap-select .dropdown-menu .dropdown-item:hover,
.bootstrap-select .dropdown-menu .dropdown-item:focus,
.bootstrap-select .dropdown-menu .dropdown-item.active,
.bootstrap-select .dropdown-menu .dropdown-item:active {
    background-color: #0eb8a9 !important;
    color: #ffffff !important;

}

/* /device-limit and /my-devices reuse the login shell but need a wider card
   than the 350px sign-in form (login-v6.default.css:42-55). */
.kt-login.kt-login--v6 .kt-login__aside .kt-login__wrapper .kt-login__container.device-limit__container {
    width: 460px;
}
.device-limit__container .kt-widget4__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0;
    border-bottom: 1px solid #ebedf2;
}
@media (max-width: 640px) {
    .kt-login.kt-login--v6 .kt-login__aside .kt-login__wrapper .kt-login__container.device-limit__container {
        width: 100%;
    }
}

/* ============================================================================================
   OPD v3 RESKIN — moved here from public/assets/custom/slm-theme-v1.css on 2026-08-20.
   That file is the site-wide theme, loaded on every page; these rules are OPD-only and belong
   with the project's own custom CSS.

   ⚠ ORDER CHANGED WITH THE MOVE. webpack.mix.js builds theme-combine-styles.css from
   style.css (position 7) ... slm-theme-v1.css (position 16), so everything below now loads
   BEFORE the theme instead of after it. A rule here that ties a theme rule on specificity now
   LOSES. Every rule was re-checked against the rendered page after the move; if you add one,
   give it enough weight to win outright rather than relying on it coming later.

   Blocks, in the order they were written:
     [opd-header-v3]        page header, queue tabs, filter bar
     [opd-table-v3]         queue table surface
     [opd-table-v3-columns] the seven columns (contains [opd-table-v3-surface])
     [opd-v3-chrome-tune]   two leftover pre-v3 colour values
   ============================================================================================ */
/* ===== [opd-header-v3] BEGIN — OPD page header block: title + subtitle, the queue tabs and the
   filter bar, retuned to the reference design ("Solomo360 OPD Reception"). 2026-08-19.

   ⚠ EVERY SELECTOR HERE IS SCOPED TO `.slm-page-opd`, AND THAT IS NOT COSMETIC CAUTION.
   The two recipes this block re-dresses are SHARED:
     • [scorecards] (:22583) is used by the OPD page, the IPD page (`.slm-page-ipd`) AND the
       doctor-timeline drawer (`.slm-drawer-doctor-timeline`, panels/doctor_timeline.blade.php).
     • [filter-bar] (:22115) is used by OPD, IPD Reception, Procedure, Laboratory and Pharmacy.
   Un-scoping any rule below silently reshapes up to five other screens the reference never covered.
   The timeline drawer is safe by construction: index.blade.php renders it inside `@section('panels')`
   (:900-925), which the layout yields OUTSIDE `#kt_content.slm-page-opd`, so `.slm-page-opd` cannot
   reach it. Verify that still holds before moving the include.

   CSS-ONLY except for two additions in index.blade.php: the subtitle line under the H1, and the word
   "More" inside the existing filter button. See the END marker for what was deliberately NOT built. */

/* ⚠ A FOURTH PAGE JOINED ON 2026-09-07: `.slm-page-pharmacy`, the Rx Queue
   (pages/frontend/inventory/index.blade.php). Same story as Laboratory below and widened the same
   way — it renders `[scorecards]` for its Follow-up / All / Open / Closed counters and
   `[filter-bar]` for its Patient / Patient Type / Date Range / More / Clear row, so it was still
   wearing the pre-v3 look next to a Lab and an OPD that are not.
   ⚠ WIDENED BY THE SAME SELECTIVE RULE, and the mechanics are worth stating because the naive
   version is wrong: `.slm-page-pharmacy` was appended to every `:is()` in THIS BLOCK that already
   carried `.slm-page-laboratory` — 56 selectors — and to nothing else. Laboratory's branch appears
   159 times in this file; the other 99 are its OWN table block (`.slm-lab-*`, [lab-table-v3]),
   markup the Rx Queue does not have and must never inherit.
   ⚠ THE TITLE/SUBTITLE PAIR WAS EXCLUDED AT FIRST AND JOINED ON REQUEST (2026-09-07), markup and
   selectors together, as this note asked. The Rx Queue's top strip is the pharmacy MODULE NAV
   (Rx Queue / Sales / Purchase / …, inventory-menu.blade.php) rather than a page title, and that
   nav is `position: fixed` — out of flow — so the title could only go BELOW it, as the first
   element in normal flow inside `.kt-grid__item--fluid`. See the note at that markup.
   ⚠ THE H1 IS NOT ADDED TO THE Inter/1.692rem TITLE RULE (slm-theme-v1.css:22588) THAT SERVES
   OPD, SETTINGS AND PATIENT LIST. Laboratory is not in it either: both fall through to the base
   `.kt-subheader .kt-subheader__main.breadcrumb-header .kt-subheader__title`, and that is exactly
   why the two titles match. Adding this page there would make it 3px smaller than the Lab page it
   is meant to mirror.

   ⚠ A THIRD PAGE JOINED THIS BLOCK ON 2026-08-31: `.slm-page-laboratory`
   (pages/frontend/laboratory/index.blade.php). Laboratory renders the SAME two shared recipes this
   block re-dresses — `[scorecards]` for its six status tabs and `[filter-bar]` for its Patient /
   Visit Date / More / Clear row — so it was still wearing the pre-v3 look (stat CARDS to the right
   of a four-column ruled bar, red Clear) directly beside an OPD and an IPD that are not.

   ⚠ WIDENED SELECTIVELY, NOT WHOLESALE, for the reason the calendar-booking note below already
   gives: only the QUEUE TABS, FILTER BAR and "MORE" PANEL sections carry the new branch. The three
   groups deliberately left alone describe markup Laboratory does not have:
     • the TOOLBAR rules — the Lab header has no `.slm-section-toolbar` cluster at all;
     • the title/subtitle pair — Lab has no `.slm-page-subtitle`, and adding one is a content
       decision, not a restyle;
     • FILTER PILLS and the "MORE" PANEL FIELD (Visit Reason) — neither exists on Lab, whose panel
       holds Doctor and Laboratory only.
   Weight is unchanged: `:is()` takes its heaviest argument and all branches are single classes.

   Same two blade additions as OPD and IPD, minus the subtitle: the word "More" inside the filter
   button, and the tabs moved OUT of the filter row into a band of their own above the card. The
   panel FOOTER ("Clear these" / "Done") is deliberately NOT added — both buttons are driven by
   handlers in common-schedule.js that the Lab page does not load, so the markup alone would render
   two dead controls. */

/* ⚠ THE TWO RULES BELOW ALSO CARRY `.slm-page-calendar-booking`, `.slm-page-laboratory` AND
   `.slm-page-patient-list`, and they travel together. Calendar Booking gained a subtitle on
   2026-08-27, Laboratory on 2026-08-31 and Patient List on 2026-09-07; each needs BOTH: the
   `.slm-page-subtitle` typography, and the column flip on
   `.kt-subheader__main` — which is `display:flex` (a ROW) in style.bundle.css:18487, so without the
   flip the subtitle renders BESIDE the H1 rather than under it. Adding one without the other is the
   trap this comment already warns about below — and Laboratory walked straight into it: its
   subtitle shipped with NEITHER rule widened and rendered as a grey sentence trailing the H1.
   The `.kt-wizard-v3__nav` padding rule between them is NOT widened: that is page-frame spacing
   for the OPD and IPD layouts, not part of the title block.

   ⚠ PATIENT LIST IS THE ODD ONE OUT IN THIS GROUP, and it is in it deliberately. The other four
   are OPD-family screens whose header sits in a `.kt-wizard-v3__nav`; Patient List is a
   SETTINGS-family screen, and it is the one page that appears on BOTH sides of the flip —
   `:is(.slm-page-setting, .slm-page-patient-list) .kt-subheader__main.breadcrumb-header
   { align-items: center }` in slm-theme-v1.css re-centres exactly this element. That rule is
   untouched (Settings still needs it, and it has no subtitle) and this one simply out-ranks it:
   (0,4,0) here against its (0,3,0) — which is the ONLY reason source order does not decide it,
   since style.css is concatenated ahead of slm-theme-v1.css. Do NOT shorten this selector to
   `.slm-page-patient-list .kt-subheader__main` (0,2,0): the flip would silently lose, `align-items`
   would stay `center`, and the subtitle would render centred under a left-aligned breadcrumb.
   Its own [patient-list-v3] block, further down, does not repeat any of this.

   ---- Title block: H1 keeps its existing size from [content-panel-round]; the subtitle is new.
   `.kt-subheader__main` is `display:flex; align-items:center` in style.bundle.css:18487 — a ROW —
   so without this column flip the new subtitle renders BESIDE the H1 rather than under it. ---- */
.slm-page:is(.slm-page-opd, .slm-page-ipd, .slm-page-calendar-booking, .slm-page-laboratory, .slm-page-patient-list, .slm-page-pharmacy, .slm-page-expense) .kt-subheader__main.breadcrumb-header {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

/* Title-row padding retuned to the ref's rhythm: 14px above the H1, 14px below it.
   `[content-panel-round]` gives every v2 page's wizard nav `padding: 10px 1.5rem`, which left the
   title 4px tight at the top and 4px tight at the bottom against the reference.

   ⚠ THIS PADDING IS THE ONLY THING HOLDING THE TITLE OFF THE TOP BAR. `.slm-ui-theme-v1.slm-page`
   (:21929, :21963) sets radius / height / overflow and NO padding — unlike the reference, whose
   <main> carries `padding:14px 8px 28px 16px`. A first cut zeroed `padding-top` here on the
   assumption that the panel supplied the 14px, and the OPD heading ended up flush against the
   teal chrome. If this is ever moved onto the page root instead, take the 14px with it.

   Scoped to OPD — the same nav rule serves IPD and the other v2 pages, which are not being retuned
   here. Horizontal padding is untouched: it is what lines the title up with the tabs and filter
   bar below. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .kt-wizard-v3 .kt-wizard-v3__nav {
    padding-top: 14px;
    padding-bottom: 14px;
}

.slm-page:is(.slm-page-opd, .slm-page-ipd, .slm-page-calendar-booking, .slm-page-laboratory, .slm-page-patient-list, .slm-page-pharmacy, .slm-page-expense) .slm-subheader .slm-page-subtitle {
    margin-top: 4px;
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.35;
    color: #667085;
}

/* ⚠ THESE TOOLBAR RULES CARRY A THIRD BRANCH, `.slm-page-calendar-booking`, WHILE THE REST OF
   THIS BLOCK DOES NOT. Added 2026-08-27: Calendar Booking renders the same
   `.calendar-header-btn-container.slm-section-toolbar` cluster (calendar.blade.php:174) but was
   never in the v3 pass, so its ALL/OPD/IPD group, its Book Appointment button and its list toggle
   stood ~9px taller than the identical controls on OPD, in the pre-v3 radius and teal, right next
   to a calendar that had just been brought onto the v3 language.
   ONLY the `.slm-section-toolbar` rules are widened. The rest of the header block — title,
   subtitle, scorecards, filter bar — describes markup Calendar Booking does not have, and
   widening it wholesale would be styling things that are not there.
   Weight is unchanged: `:is()` takes its heaviest argument and all three branches are classes.

   Toolbar spacing → 4px between controls, down from the base's 6px. The buttons lost 9px of width
   in the v3 pass (45px → 36px) but the gap they sit in did not move with them, so the row read
   looser than before it was tightened. The second rule keeps the Calendar/list pair on the same
   value — it is a nested flex box with a `gap` of its own, so the parent's does not reach inside it.

   ⚠ There is a THIRD `gap: 6px` that looks like it governs this row and does not:
   `.slm-section-toolbar .calendar-header-btn-container` (slm-theme-v1.css:11835) is a DESCENDANT
   selector, but the two classes are on the SAME element (`<div class="calendar-header-btn-container
   slm-section-toolbar">`), so it has never matched anything. Left alone — it is inert, and it is
   also on the IPD toolbar. Change the gap HERE, not there. */
.slm-page:is(.slm-page-opd, .slm-page-ipd, .slm-page-calendar-booking) .slm-section-toolbar {
    gap: 4px;
}
.slm-page:is(.slm-page-opd, .slm-page-ipd, .slm-page-calendar-booking) .slm-section-toolbar .calendar-btn-group {
    gap: 4px;
}

/* ---- Toolbar buttons → the ref's 36px / 10px-radius white squares (were 45px / 12px). The button
   SET is untouched: the reference mockup shows a different, smaller set of actions than the real
   page carries (EDD report, doctor timeline, online appointments, print, patient queue), and
   dropping live features to match a mockup is not a restyle. Only the chrome is retuned. ---- */
.slm-page:is(.slm-page-opd, .slm-page-ipd, .slm-page-calendar-booking) .slm-section-toolbar .btn.btn-outline-brand.btn-sm.btn-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border-color: #e5e7eb;
    color: #344054;
    box-shadow: none;
}
.slm-page:is(.slm-page-opd, .slm-page-ipd, .slm-page-calendar-booking) .slm-section-toolbar .btn.btn-outline-brand.btn-sm.btn-icon:hover {
    background: #ffffff;
    border-color: #b6c0ce;
    color: #101828;
}
.slm-page:is(.slm-page-opd, .slm-page-ipd, .slm-page-calendar-booking) .slm-section-toolbar > .btn.btn-outline-brand.btn-sm.btn-icon svg,
.slm-page:is(.slm-page-opd, .slm-page-ipd, .slm-page-calendar-booking) .slm-section-toolbar > span > .btn.btn-outline-brand.btn-sm.btn-icon svg,
.slm-page:is(.slm-page-opd, .slm-page-ipd, .slm-page-calendar-booking) .slm-section-toolbar > .dropdown > .btn.btn-outline-brand.btn-sm.btn-icon svg {
    width: 16px;
    height: 16px;
}
/* Calendar / list-view toggle pair → same 36px rhythm as the icon squares. */
.slm-page:is(.slm-page-opd, .slm-page-ipd, .slm-page-calendar-booking) .slm-section-toolbar .calendar-btn-group .btn {
    height: 36px;
    border-radius: 10px;
    border-color: #e5e7eb;
    font-size: 12.5px;
    font-weight: 600;
    color: #344054;
    box-shadow: none;
}

/* ---- …AND ITS PRESSED / HOVERED / FOCUSED STATES, which the rule above did not cover and which
   fell through to Metronic. `.btn-outline-brand` is a BLUE recipe underneath:
     `.btn-outline-brand { color: var(--second-blue-color) }`                        (#1B78C5)
     `.btn-outline-brand:not(:disabled):not(.disabled):active
        { color:#fff; background-color: var(--second-blue-color) }`
     `.btn-outline-brand:focus { box-shadow: 0 0 0 .2rem rgba(93,120,255,.5) }`      (blue-violet)
   so clicking Calendar or the list toggle flashed the button blue under the pointer before the JS
   moved `.active` and the teal selected state landed — reported 2026-08-27 as "when click on
   calendar and table view some second font blue then white". The resting rule above won on weight,
   which is exactly why only the INTERACTION states showed it.
   The values are the neighbouring icon squares' hover, so the pair behaves like the rest of the row.

   ⚠ `:not(.active)` ON ALL THREE ARMS, AND IT IS LOAD-BEARING. With `:not(:disabled):not(.disabled)`
   in the `:active` arm this selector reaches (0,8,0), far above the `.active` selected rule's
   (0,3,0) — so without the guard, hovering or pressing the button that is ALREADY selected would
   strip its teal fill and turn it white. The guard means these only ever describe the button you
   are moving TO.
   ⚠ The focus ring splits the way the FullCalendar toolbar's does: nothing for a pointer click,
   a teal ring for `:focus-visible`. That arm is deliberately NOT `:not(.active)` — a keyboard user
   tabbing onto the selected view still needs to see where they are. ---- */
.slm-page:is(.slm-page-opd, .slm-page-ipd, .slm-page-calendar-booking) .slm-section-toolbar .calendar-btn-group .btn:not(.active):hover,
.slm-page:is(.slm-page-opd, .slm-page-ipd, .slm-page-calendar-booking) .slm-section-toolbar .calendar-btn-group .btn:not(.active):focus,
.slm-page:is(.slm-page-opd, .slm-page-ipd, .slm-page-calendar-booking) .slm-section-toolbar .calendar-btn-group .btn:not(.active):not(:disabled):not(.disabled):active {
    background: #ffffff;
    border-color: #b6c0ce;
    color: #101828;
    box-shadow: none;
    outline: 0;
}
.slm-page:is(.slm-page-opd, .slm-page-ipd, .slm-page-calendar-booking) .slm-section-toolbar .calendar-btn-group .btn:focus-visible {
    box-shadow: 0 0 0 2px rgba(10, 145, 132, .40);
    outline: 0;
}

/* ALL / OPD / IPD segmented group (Calendar view only — the blade renders it `d-none` and the
   calendar JS reveals it) → the SAME 36px rhythm.
   This was the one control in the OPD toolbar the v3 pass missed. It kept the pre-v3 recipe from
   slm-theme-v1.css:11730 — 45px tall, radius 12, 13px text, and an #0EB8A9 active fill under a
   teal glow — so on the Calendar tab it stood 9px taller than the icon squares either side of it
   and lit up in the old teal next to the new one. Every value below is a neighbouring rule's.

   ⚠ Scoped to `.slm-page-opd .slm-section-toolbar` on purpose. `.slm-button-group-sm` is a SHARED
   segmented-group recipe used on other screens, so widening this to
   `.slm-ui-theme-v1 .slm-button-group-sm` would re-tune every one of them.
   ⚠ Specificity, not source order, is what makes these win: style.css is concatenated at slot 7
   and slm-theme-v1.css at slot 16, so a TIE with the theme loses. The theme's rules are (0,2,0)
   for the container and (0,4,0) for a button; these are (0,3,0) and (0,5,0). The `:last-child`
   arm is written out rather than left to the theme's own (0,5,0) one for the same reason — that
   one would tie with the rule above it and win only by accident of order. */
.slm-page:is(.slm-page-opd, .slm-page-ipd, .slm-page-calendar-booking) .slm-section-toolbar .slm-button-group-sm {
    border-radius: 10px;
    border-color: #e5e7eb;
    box-shadow: none;
}
.slm-page:is(.slm-page-opd, .slm-page-ipd, .slm-page-calendar-booking) .slm-section-toolbar .slm-button-group-sm .btn.btn-default {
    height: 36px;
    min-width: 0;
    padding: 0 14px;
    border-right-color: #e5e7eb;
    font-size: 12.5px;
    font-weight: 600;
    color: #344054;
}
.slm-page:is(.slm-page-opd, .slm-page-ipd, .slm-page-calendar-booking) .slm-section-toolbar .slm-button-group-sm .btn.btn-default:last-child {
    border-right: none;
}
/* Hover is the queue card's #F2F4F7 wash, NOT the icon squares' white-with-a-darker-border: inside
   a segmented group a button has no outer border of its own to darken, so a white hover on a white
   group would show nothing at all. */
.slm-page:is(.slm-page-opd, .slm-page-ipd, .slm-page-calendar-booking) .slm-section-toolbar .slm-button-group-sm .btn.btn-default:hover {
    background: #f2f4f7;
    color: #101828;
}
/* Active → #0A9184, the v3 teal already on the Calendar/list toggle, the queue's active tab and the
   Next Step button. The theme pairs its fill with a `0 2px 8px rgba(14,184,169,.25)` glow; dropped,
   since nothing else in this toolbar carries one. */
.slm-page:is(.slm-page-opd, .slm-page-ipd, .slm-page-calendar-booking) .slm-section-toolbar .slm-button-group-sm .btn.btn-default.active {
    background: #0a9184;
    border-color: #0a9184;
    color: #ffffff;
    box-shadow: none;
}

/* ============ QUEUE TABS — .status-scorecard-round reshaped from stat CARD to the ref's PILL ============
   The blade markup is unchanged: each tab is still a card div holding an icon, a count and a title.
   Card → pill is a flex-direction flip (column → row) plus re-ordering the two survivors. */

/* No margin-bottom here — the gap to the filter bar belongs to the tabs ROW (see the rule further
   down). Carrying it on both stacked them into a 24px gap against the ref's 12px. */
.slm-page:is(.slm-page-opd, .slm-page-ipd, .slm-page-laboratory, .slm-page-pharmacy) .slm-section-scorecards {
    gap: 6px;
    flex-wrap: wrap;
}

/* DOM order is laboratory, followup, schedule, waiting, engaged, checkedOut; the ref reads
   Follow-up → Scheduled → Waiting → Engaged → Checked Out → Laboratory. Reordered with flex `order`
   on the stable `#…-counter-container` ids rather than by moving the blade nodes, because the OPD
   front-desk JS binds counts and click handlers to those ids and to their DOM positions in places.
   Visual order only — tab order for keyboard users still follows the DOM. */
.slm-page.slm-page-opd .slm-section-scorecards #followup-counter-container    { order: 1; }
.slm-page.slm-page-opd .slm-section-scorecards #schedule-counter-container    { order: 2; }
.slm-page.slm-page-opd .slm-section-scorecards #waiting-counter-container     { order: 3; }
.slm-page.slm-page-opd .slm-section-scorecards #engaged-counter-container     { order: 4; }
.slm-page.slm-page-opd .slm-section-scorecards #checkedOut-counter-container  { order: 5; }
.slm-page.slm-page-opd .slm-section-scorecards #laboratory-counter-container  { order: 6; }

/* IPD's four tabs, ordered the way the reference reads them: OPD to IPD → Appointments →
   Currently Admitted → Discharged. Same technique and the same reason as the six OPD ids
   above — the IPD front-desk JS binds counts and click handlers to these ids
   (common-schedule.js:21-24, 332-377) and `$(".status-filter").on("click")` is a DIRECT bind
   at load, so the nodes are left where the blade puts them and only the visual order moves.
   The DOM order already matches here, so these are a guard against it drifting rather than a
   correction — cheap, and the alternative is a silent re-ordering the next time a tab is
   added. */
.slm-page.slm-page-ipd .slm-section-scorecards #opd-to-ipd-counter-container   { order: 1; }
.slm-page.slm-page-ipd .slm-section-scorecards #ipd-schedule-counter-container  { order: 2; }
.slm-page.slm-page-ipd .slm-section-scorecards #ipd-admitted-counter-container  { order: 3; }
.slm-page.slm-page-ipd .slm-section-scorecards #ipd-discharged-counter-container { order: 4; }

.slm-page:is(.slm-page-opd, .slm-page-ipd, .slm-page-laboratory, .slm-page-pharmacy) .slm-section-scorecards .status-scorecard-round {
    flex: 0 0 auto;
    min-width: 0;
    max-width: none;
    min-height: 0;
    height: 38px;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 0 15px;
    border-radius: 10px;
    background: #ffffff;
    border: 1px solid #e0e5ec;
    box-shadow: none;
    overflow: visible;
}

/* The 4px coloured top accent is what made these read as six separate stat cards. The ref's tabs
   carry no per-status colour at all — the ONLY colour is the teal fill on the selected tab — so the
   accent goes. Height 0 rather than display:none: the ::before is also the element's only
   position:absolute child, and collapsing it keeps the box model identical to the ref. */
.slm-page:is(.slm-page-opd, .slm-page-ipd, .slm-page-laboratory, .slm-page-pharmacy) .slm-section-scorecards .status-scorecard-round::before {
    height: 0;
    background: transparent;
}

/* Icons out. The ref's tabs are label + count only, and at 38px tall a 38px icon disc cannot fit. */
.slm-page:is(.slm-page-opd, .slm-page-ipd, .slm-page-laboratory, .slm-page-pharmacy) .slm-section-scorecards .status-scorecard-round .scorecard-icon {
    display: none;
}

/* Label first, count second — the reverse of the card layout, where the count row sat above the
   title. `order` beats re-nesting the blade for the same reason the tab order does. */
.slm-page:is(.slm-page-opd, .slm-page-ipd, .slm-page-laboratory, .slm-page-pharmacy) .slm-section-scorecards .status-scorecard-round .status-scorecard-round-title {
    order: 1;
    text-align: left;
    font-size: 13px;
    font-weight: 600;
    color: #475467;
    letter-spacing: 0;
    line-height: 1;
    white-space: nowrap;
}
.slm-page:is(.slm-page-opd, .slm-page-ipd, .slm-page-laboratory, .slm-page-pharmacy) .slm-section-scorecards .status-scorecard-round .scorecard-top-row {
    order: 2;
    width: auto;
    gap: 0;
}

/* The count becomes the ref's rounded chip. `.lab-count-badge` (Laboratory's count) is the same
   element under a different class and is already un-positioned by the base recipe, so it inherits
   this without an arm of its own. */
.slm-page:is(.slm-page-opd, .slm-page-ipd, .slm-page-laboratory, .slm-page-pharmacy) .slm-section-scorecards .status-scorecard-round .status-scorecard-round-digit {
    padding: 1px 7px;
    border-radius: 999px;
    background: #f2f4f7;
    color: #667085;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.45;
    font-variant-numeric: tabular-nums;
}

/* Hover → teal hairline. The base recipe lifts the card 2px on hover, which reads as a button press
   on a 38px pill sitting in a row of six; replaced with the ref's border colour change. */
.slm-page:is(.slm-page-opd, .slm-page-ipd, .slm-page-laboratory, .slm-page-pharmacy) .slm-section-scorecards .status-scorecard-round:hover {
    transform: none;
    border-color: #0a9184;
}

/* Selected tab → solid brand teal, whatever the status.
   🔥 THE `.status-filter` IN THIS SELECTOR IS DELIBERATE. The base recipe fills the active card with
   its OWN status colour through six rules of the form `.status-scorecard-round.red.active` — each
   (0,4,0). A scope of `.slm-page-opd .slm-section-scorecards .status-scorecard-round.active` is also
   (0,4,0) and would only win on source order, i.e. it would break the moment this block is moved or
   another arm is appended below. Adding `.status-filter` (present on every tab in the blade) makes
   it (0,5,0) and the win structural. */
/* ⚠ #0A9184, not #0A9184. The old value was the pre-v3 chrome GROUND, back when the rail and bar
   were teal and the active tab borrowed that same teal. The chrome is navy now and #0A9184 is the
   accent — the same value that fills the active nav tile and the add-patient button — so the active
   tab must use it or the page carries two different teals. Matches the dark reference, which sets
   `bg: on ? '#0A9184' : '#FFFFFF'` on its tabs. Shadow follows: rgba(14,124,107,.18). */
.slm-page:is(.slm-page-opd, .slm-page-ipd, .slm-page-laboratory, .slm-page-pharmacy) .slm-section-scorecards .status-scorecard-round.status-filter.active {
    background: #0a9184;
    border-color: #0a9184;
    box-shadow: 0 2px 10px rgba(14, 124, 107, .18);
}
.slm-page:is(.slm-page-opd, .slm-page-ipd, .slm-page-laboratory, .slm-page-pharmacy) .slm-section-scorecards .status-scorecard-round.status-filter.active .status-scorecard-round-title {
    color: #ffffff;
    font-weight: 700;
}
.slm-page:is(.slm-page-opd, .slm-page-ipd, .slm-page-laboratory, .slm-page-pharmacy) .slm-section-scorecards .status-scorecard-round.status-filter.active .status-scorecard-round-digit {
    background: rgba(255, 255, 255, .22);
    color: #ffffff;
}

/* ============ FILTER BAR — the four-column ruled card becomes the ref's single compact row ============ */

.slm-page:is(.slm-page-opd, .slm-page-ipd, .slm-page-laboratory, .slm-page-pharmacy) .slm-section-filter {
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    row-gap: 9px;
    min-height: 0;
    padding: 10px 12px;
    border-radius: 12px;
}

/* Kill the column chrome: the base gives every field column 1.231rem of side padding and a
   right-hand rule, which is what made this read as a segmented card. In the ref each control is its
   own bordered box and the bar is just their container. */
.slm-page:is(.slm-page-opd, .slm-page-ipd, .slm-page-laboratory, .slm-page-pharmacy) .slm-section-filter > .d-flex {
    flex: 0 0 auto;
    padding: 0;
    border-right: none;
    align-self: center;
}
.slm-page:is(.slm-page-opd, .slm-page-ipd, .slm-page-laboratory, .slm-page-pharmacy) .slm-section-filter > .slm-ctrl-input-patient {
    flex: 0 0 300px;
    max-width: 100%;
}
/* Visit Date needs an explicit width, not `auto`: its `.form-group` carries Bootstrap `.w-100`
   (index.blade.php:360), so a content-sized column resolves against max-content and the box
   ballooned to 310px for a "Today Aug 19" label. 170px clears the daterange button's own 155px
   min-width (:19415) plus the box padding. */
/* ⚠ AND THE FOLLOW UP TAB'S OWN DATE COLUMN, WHICH IS A DIFFERENT ELEMENT. index.blade.php:456
   ships a SECOND daterange column, `.followup-daterangepicker-container`, and common-schedule.js
   swaps the two with d-flex/d-none per tab — Follow Up shows that one, the other five show
   `.slm-ctrl-daterange-visit`. It carries neither the `slm-ctrl-daterange-visit` hook nor
   `slm-daterange-picker` on its anchor, so every rule in this block missed it and the control
   rendered on the Follow Up tab as a borderless 279px run of text. The theme already names it
   alongside the others (slm-theme-v1.css:22368), so only this v3 layer had to be told. */
.slm-page:is(.slm-page-opd, .slm-page-ipd, .slm-page-laboratory, .slm-page-pharmacy) .slm-section-filter > :is(.slm-ctrl-daterange-visit, .followup-daterangepicker-container) {
    flex: 0 0 170px;
}
.slm-page:is(.slm-page-opd, .slm-page-ipd, .slm-page-laboratory, .slm-page-pharmacy) .slm-section-filter > :is(.slm-ctrl-dropdown-doctor, .slm-ctrl-bar-select) {
    flex: 0 0 auto;
}

/* Captions out. The ref labels nothing: the search states itself through its placeholder, and the
   two dropdowns show their current VALUE ("Today : Aug 19", the doctor's name), which is a stronger
   label than the word "Visit Date" above an unreadable value. Note this does remove the standing
   PATIENT / VISIT DATE / DOCTOR captions — see the END marker. */
.slm-page:is(.slm-page-opd, .slm-page-ipd, .slm-page-laboratory, .slm-page-pharmacy) .slm-section-filter > .d-flex > .form-group > .my-label {
    display: none !important;
}
/* Same rule, for the two fields Follow Up moves onto the bar. Their caption is a `.slm-label` as
   well as a `.my-label` and is written by the panel's own float-label recipe, which is why the
   line above does not reach it on its own. */
.slm-page:is(.slm-page-opd, .slm-page-ipd, .slm-page-laboratory, .slm-page-pharmacy) .slm-section-filter > .slm-ctrl-bar-select > .form-group > :is(.my-label, .slm-label) {
    display: none !important;
}

/* ⚠ THE !important ABOVE IS FOR ONE LABEL. The Doctor caption is `<label class="my-label d-block">`
   (index.blade.php:413) and Bootstrap's `.d-block` is `display:block !important` — so without it the
   DOCTOR caption alone survived, stacked on top of its own value and squeezed the doctor's name to
   "Dr. Siddl". The Patient and Visit Date captions carry no `.d-block` and hide either way. */

/* Doctor chip. The reference filter controls are content-width chips — value, a 7px gap, then the
   chevron sitting right against it (ref markup: a 13px #98A2B3 `m6 9 6 6 6-6`, inline, `flex:none`).
   This column was a 190px box with the chevron absolutely pinned to `right:0`, which measured 28px
   of dead space between "Dr. Siddharth Gupta" and its own arrow. Four steps, in order: size the
   column, release the control, put the value back in flow, walk the glyph back to it. */

/* 1 — SIZE. Content-width, capped. The old `min-width: 190px` floor is gone: the chip sizes to its
   value now, so the floor only ever padded short names. The cap stops a long name from shoving
   "More" and "Clear" off the bar — past it the value ellipsizes (step 3). */
.slm-page:is(.slm-page-opd, .slm-page-ipd, .slm-page-laboratory, .slm-page-pharmacy) .slm-section-filter > :is(.slm-ctrl-dropdown-doctor, .slm-ctrl-bar-select) {
    min-width: 0;
    max-width: 230px;
}

/* 2 — CONTROL. Two separate things pin this to a fixed box and BOTH have to go: the base's
   `width: 100% !important` (:22460), and bootstrap-select's own inline `width: 200px`, which it
   writes onto the wrapper at runtime from `data-width="200"` (index.blade.php:495).
   The `!important` is what beats that inline style — a plain `width: auto` loses to it.

   HEIGHT MATTERS AS MUCH AS WIDTH, and for a while only the width was released. The base pins this
   wrapper to `height: 1.615rem !important` (:22460) — 21px. The `.form-group` chip is 32px and
   centres its children, so the 21px wrapper landed at y198—219 while the 30px button inside it
   overflowed to y228: the value and the chevron sat 4px below the pill's centre and 3px THROUGH its
   bottom border. Matching the button's 30px, and centring the button inside the wrapper, seats the
   row on the chip's centre line exactly like the Visit Date button beside it. */
.slm-page:is(.slm-page-opd, .slm-page-ipd, .slm-page-laboratory, .slm-page-pharmacy) .slm-section-filter :is(.slm-ctrl-dropdown-doctor, .slm-ctrl-bar-select) .bootstrap-select {
    width: auto !important;
    max-width: 100%;
    height: 30px !important;
    display: flex;
    align-items: center;
}

/* 3 — FLOW. bootstrap-select absolutely positions `.filter-option` across the full width of the
   button so its own caret can overlay the value; that is the root of the split, and no amount of
   tuning the `::after` offset fixes it while the value is out of flow. `position: static` returns
   it, and the button becomes the reference's inline-flex row.
   ⚠ `gap` IS NOT USABLE HERE. The button carries a `::before` with `content: ""` — an empty but
   REAL flex item — so `gap: 7px` bought 7px of indent in front of the value as well as in front of
   the arrow, and the chip rendered 12px wider than its contents. The spacing is a margin on the
   arrow instead (step 4); `gap: 0` is explicit so a later edit does not reintroduce it. */
.slm-page:is(.slm-page-opd, .slm-page-ipd, .slm-page-laboratory, .slm-page-pharmacy) .slm-section-filter :is(.slm-ctrl-dropdown-doctor, .slm-ctrl-bar-select) .bootstrap-select > .dropdown-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    width: auto;
    max-width: 100%;
    padding: 0 !important;
}
.slm-page:is(.slm-page-opd, .slm-page-ipd, .slm-page-laboratory, .slm-page-pharmacy) .slm-section-filter :is(.slm-ctrl-dropdown-doctor, .slm-ctrl-bar-select) .bootstrap-select > .dropdown-toggle::before {
    display: none;
}
.slm-page:is(.slm-page-opd, .slm-page-ipd, .slm-page-laboratory, .slm-page-pharmacy) .slm-section-filter :is(.slm-ctrl-dropdown-doctor, .slm-ctrl-bar-select) .bootstrap-select > .dropdown-toggle .filter-option {
    position: static;
    flex: 0 1 auto;
    min-width: 0;
    width: auto;
    overflow: hidden;
}
.slm-page:is(.slm-page-opd, .slm-page-ipd, .slm-page-laboratory, .slm-page-pharmacy) .slm-section-filter :is(.slm-ctrl-dropdown-doctor, .slm-ctrl-bar-select) .bootstrap-select > .dropdown-toggle .filter-option-inner,
.slm-page:is(.slm-page-opd, .slm-page-ipd, .slm-page-laboratory, .slm-page-pharmacy) .slm-section-filter :is(.slm-ctrl-dropdown-doctor, .slm-ctrl-bar-select) .bootstrap-select > .dropdown-toggle .filter-option-inner-inner {
    width: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 3b — TYPE. Styling `.dropdown-toggle` is not enough: the base re-states the type on the
   innermost span at :22442 as 1rem / 500 / `#667085 !important`, and that is what actually paints.
   So the value rendered 13px/500 in #667085 while "Today : Aug 20" next to it rendered #1F2937 —
   the doctor's name read visibly washed out against its own neighbour. 12.5px / 600 / #475467 is
   the reference chip's own type; `!important` is only here to answer the base's. */
.slm-page:is(.slm-page-opd, .slm-page-ipd, .slm-page-laboratory, .slm-page-pharmacy) .slm-section-filter :is(.slm-ctrl-dropdown-doctor, .slm-ctrl-bar-select) .bootstrap-select > .dropdown-toggle .filter-option-inner-inner {
    font-size: 12.5px;
    font-weight: 600;
    color: #475467 !important;
}

/* 4 — GLYPH. The base draws the chevron as an absolutely-positioned 15px `::after` at `right: 0`
   (:22465). Static plus a 7px left margin walks it back against the value; 13px and #98A2B3 are the
   reference's own numbers, where the base SVG is 15px #9CA3AF. Same path, restated with round caps
   to match the ref's stroke. */
.slm-page:is(.slm-page-opd, .slm-page-ipd, .slm-page-laboratory, .slm-page-pharmacy) .slm-section-filter :is(.slm-ctrl-dropdown-doctor, .slm-ctrl-bar-select) .bootstrap-select > .dropdown-toggle::after {
    position: static;
    transform: none;
    flex: none;
    width: 13px;
    height: 13px;
    margin-left: 7px;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%2398A2B3' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* ---- Stacking is done in the MARKUP, not here. The tabs live in their own `.row > .col-12`
   directly above the filter row (index.blade.php:339). Nothing in this file re-orders them.

   ⚠ DO NOT "SIMPLIFY" THIS BACK INTO CSS. The first attempt kept the blade's single
   `.row > .col + .col-auto` and stacked it with `order:-1; flex:0 0 100%` on both columns. It
   rendered correctly in a harness and FAILED ON THE LIVE PAGE: the two 100%-basis, zero-shrink
   columns did not wrap, so the filter column was pushed out of view and the whole filter bar
   disappeared while the tabs stayed put. Two real Bootstrap rows have no such failure mode.
   Safe because the OPD JS binds the tabs only by `#…-counter-container` id and `.status-filter`
   (common-schedule.js:11-20, 343-348, 501-505) and never traverses between the two columns. ---- */

/* The tabs row's gap to what follows it.
   ⚠ ZERO, and that is the fix, not an omission. This was `margin-bottom: 12px` — the reference's
   value — and it was right while the tabs lived INSIDE `.kt-portlet__body`, where the tab row and
   the filter row were plain block siblings with nothing else between them.
   Since the tabs moved OUT of the card (2026-08-25) their parent is the wizard's content wrapper,
   which is `display: flex; flex-direction: column; gap: 15px`. A flex gap and a margin ADD, so the
   12px stacked on the 15px and opened 27px under the tabs — more than twice the reference.
   Zeroing it lets the container's own section gap do the job: 15px, against the reference's 12.
   The 3px is accepted deliberately — 15px is the rhythm every other section break on the page
   uses, and matching the reference here would mean either a negative margin or re-cutting the
   page-wide gap for one row. */
.slm-page:is(.slm-page-opd, .slm-page-ipd, .slm-page-laboratory, .slm-page-pharmacy) .row:has(> .col-12 > .slm-section-scorecards) {
    margin-bottom: 0;
}

/* Each field's .form-group becomes the ref's 32px bordered box.
   ⚠ NAMED COLUMNS, NOT `> .d-flex > .form-group`. The filter-action wrapper
   (`.slm-filter-action-wrap.d-flex …slm-ctrl-btn-filter`) is ALSO a `.d-flex` child of this form and
   ALSO holds a `.form-group`, so the broader selector wrapped the "More" button in a spurious
   bordered box and squashed it to 30px. Only these three are fields. */
.slm-page:is(.slm-page-opd, .slm-page-ipd, .slm-page-laboratory, .slm-page-pharmacy) .slm-section-filter > :is(.slm-ctrl-input-patient, .slm-ctrl-daterange-visit, .followup-daterangepicker-container, .slm-ctrl-dropdown-doctor, .slm-ctrl-bar-select) > .form-group {
    display: flex;
    align-items: center;
    width: 100%;
    height: 32px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid #e5e7eb;
    border-radius: 9px;
    background: #f8fafc;
    transition: border-color .14s ease, background .14s ease;
}
.slm-page:is(.slm-page-opd, .slm-page-ipd, .slm-page-laboratory, .slm-page-pharmacy) .slm-section-filter > :is(.slm-ctrl-input-patient, .slm-ctrl-daterange-visit, .followup-daterangepicker-container, .slm-ctrl-dropdown-doctor, .slm-ctrl-bar-select) > .form-group:hover {
    border-color: #b6c0ce;
    background: #ffffff;
}
.slm-page:is(.slm-page-opd, .slm-page-ipd, .slm-page-laboratory, .slm-page-pharmacy) .slm-section-filter > :is(.slm-ctrl-input-patient, .slm-ctrl-daterange-visit, .followup-daterangepicker-container, .slm-ctrl-dropdown-doctor, .slm-ctrl-bar-select) > .form-group:focus-within {
    border-color: #0a9184;
    background: #ffffff;
}

/* The search field carries the ref's magnifier as a background image rather than new markup — the
   blade input has no room for an icon span without restructuring the control. Left padding clears
   the glyph; the box's own 12px padding is zeroed so the two do not compound. */
.slm-page:is(.slm-page-opd, .slm-page-ipd, .slm-page-laboratory, .slm-page-pharmacy) .slm-section-filter > .slm-ctrl-input-patient > .form-group {
    padding-left: 0;
    padding-right: 0;
}
.slm-page:is(.slm-page-opd, .slm-page-ipd, .slm-page-laboratory, .slm-page-pharmacy) .slm-section-filter .slm-ctrl-input-patient .form-control {
    height: 30px !important;
    line-height: 30px;
    padding: 0 10px 0 32px !important;
    font-size: 12.5px;
    font-weight: 500;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2398A2B3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4.3-4.3'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 11px center;
    background-size: 14px 14px;
}
.slm-page:is(.slm-page-opd, .slm-page-ipd, .slm-page-laboratory, .slm-page-pharmacy) .slm-section-filter .slm-ctrl-input-patient .form-control::placeholder {
    color: #98a2b3;
}

/* Date-range button + Doctor select fill their box. The base pins these to 1.615rem with
   !important (:22305), so matching the 30px inner height needs !important back. */
.slm-page:is(.slm-page-opd, .slm-page-ipd, .slm-page-laboratory, .slm-page-pharmacy) .slm-section-filter .btn.slm-date-range-picker,
.slm-page:is(.slm-page-opd, .slm-page-ipd, .slm-page-laboratory, .slm-page-pharmacy) .slm-section-filter :is(.slm-ctrl-dropdown-doctor, .slm-ctrl-bar-select, .slm-filter-ctrl-dropdown) .bootstrap-select > .dropdown-toggle.btn-light {
    height: 30px !important;
    line-height: 30px;
    font-size: 12.5px;
    font-weight: 600;
    color: #475467;
    white-space: nowrap;
}

/* Visit Date's chevron, matched to the Doctor chip's. The base draws it from a 15px #9CA3AF SVG
   (:22447); step 4 above moved Doctor's to the reference's 13px #98A2B3, which left the two chips
   sitting side by side with visibly different arrows. Only the glyph is touched — this one is
   already in flow, so it needs no position work. */
.slm-page:is(.slm-page-opd, .slm-page-ipd, .slm-page-laboratory, .slm-page-pharmacy) .slm-section-filter :is(.slm-ctrl-daterange-visit, .followup-daterangepicker-container) .btn.slm-date-range-picker::after {
    width: 13px;
    height: 13px;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%2398A2B3' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* "More" — the ref marks the extra-filters control with a DASHED border so it reads as "there is
   more behind this" rather than as a fourth filter value. */
.slm-page:is(.slm-page-opd, .slm-page-ipd, .slm-page-laboratory, .slm-page-pharmacy) .slm-section-filter > .slm-ctrl-btn-filter {
    flex: 0 0 auto;
    align-self: center;
    padding: 0 !important;
    /* 🔥 "More" AND "Clear" WERE TOUCHING AT EXACTLY 0px, and the bar's own `gap: 8px`
       could not help: Clear is NOT a direct child of the bar. The blade nests both inside
       this wrapper — `.slm-filter-action-wrap.d-flex.slm-ctrl-btn-filter` holds
       [More] [Clear] — so the bar's gap applies to the WRAPPER, not between its two
       children, and the `p-4` that used to separate them is stripped by the padding reset
       on the line above. The gap belongs here, on the flex container that actually parents
       them. 8px is the bar's own value, so the whole row keeps one rhythm.
       ⚠ Note the neighbouring `> .slm-ctrl-btn-clear { margin: 0 }` rule is a red herring if
       you come looking: that selector is a DIRECT-child match and never fires for this
       markup at all. Adding a margin to Clear instead would work by accident and break the
       moment the blade is re-nested. */
    gap: 8px;
}
/* 🔥 THE FULL `.btn.btn-icon.btn-sm` CHAIN IS REQUIRED. The base pins this button to a 38x38 icon
   square at :22451 with `.slm-section-filter .slm-ctrl-btn-filter .slm-filter-btn.btn.btn-icon.btn-sm`
   — (0,6,0). A friendly-looking `.slm-page-opd .slm-section-filter .slm-filter-btn` is (0,3,0) and
   loses outright, which is exactly how the first cut of this rule silently did nothing. Repeating
   the chain and prefixing the page scope makes it (0,7,0).
   The magnifier-style glyph comes from the base's `::before` mask (it hides the blade's <i>), so the
   button reads icon + "More" with no icon work here. */
.slm-page:is(.slm-page-opd, .slm-page-ipd, .slm-page-laboratory, .slm-page-pharmacy) .slm-section-filter .slm-ctrl-btn-filter .slm-filter-btn.btn.btn-icon.btn-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 32px;
    width: auto;
    padding: 0 12px;
    /* ⚠ These three are DELIBERATELY not the field-box values. The bordered fields beside it are
       `#F8FAFC / #E5E7EB / #475467`; the reference gives "More" a WHITE fill, a darker dashed
       #CFD6E0 edge and muted #667085 text so it reads as an ACTION next to the fields rather than
       as one more field. Ours had copied the field values, which flattened that distinction. */
    border: 1px dashed #cfd6e0;
    border-radius: 9px;
    background: #ffffff;
    color: #667085;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    margin-right: 0;
}
.slm-page:is(.slm-page-opd, .slm-page-ipd, .slm-page-laboratory, .slm-page-pharmacy) .slm-section-filter .slm-ctrl-btn-filter .slm-filter-btn.btn.btn-icon.btn-sm::before {
    width: 13px;
    height: 13px;
    flex: none;
}
/* Hover and ACTIVE are separate in the reference and must stay separate here. Hover only lights the
   edge and the text; ACTIVE (filters actually applied) additionally fills with the teal tint
   #ECFAF7, which is what makes "some filters are on" readable at a glance without opening the
   panel. Merging them — as this rule used to — left the applied state looking identical to a
   passing mouse. */
.slm-page:is(.slm-page-opd, .slm-page-ipd, .slm-page-laboratory, .slm-page-pharmacy) .slm-section-filter .slm-ctrl-btn-filter .slm-filter-btn.btn.btn-icon.btn-sm:hover {
    border-color: #0a9184;
    color: #0a9184;
    background: #ffffff;
}
.slm-page:is(.slm-page-opd, .slm-page-ipd, .slm-page-laboratory, .slm-page-pharmacy) .slm-section-filter .slm-ctrl-btn-filter .slm-filter-btn.btn.btn-icon.btn-sm.active {
    border-color: #0a9184;
    color: #0a9184;
    background: #ecfaf7;
}

/* Clear → the ref's quiet underlined link that turns red only on hover. It is currently a standing
   red `.btn-link`, which competes with the selected tab for attention on a bar that is usually at
   its default state. */
.slm-page:is(.slm-page-opd, .slm-page-ipd, .slm-page-laboratory, .slm-page-pharmacy) .slm-section-filter > .slm-ctrl-btn-clear {
    margin: 0;
    align-self: center;
}
.slm-page:is(.slm-page-opd, .slm-page-ipd, .slm-page-laboratory, .slm-page-pharmacy) .slm-section-filter .slm-ctrl-btn-clear .btn.btn-link {
    padding: 0 2px;
    height: auto;
    color: #667085;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.slm-page:is(.slm-page-opd, .slm-page-ipd, .slm-page-laboratory, .slm-page-pharmacy) .slm-section-filter .slm-ctrl-btn-clear .btn.btn-link:hover {
    color: #b4453c;
}

/* NOT BUILT — these parts of the reference are new FEATURES, not restyles of anything the page has:
     • the right-hand flag chips (Appointment / Walk-in / New / Returning / Insurance) — a new
       filter dimension with no backing field, JS or query support;
     • the "New Registration" and "Book Appointment" buttons — registration already lives in the
       top bar's add-person control, and Book Appointment is the existing Calendar view toggle;
     • the ref's per-tab counts, which count a filtered set; the live page's counts come from the
       server and are not recomputed client-side.
   The captions removed above (PATIENT / VISIT DATE / DOCTOR) are the one place this block drops
   something the page had. Restore by deleting the `.my-label { display:none }` rule. */
/* ============ "MORE" PANEL FIELD — Visit Reason, built to the reference ============
   Reference (`solomo360 - OPD Reception Dark.dc.html`, the More popover):
     <label  display:flex; flex-direction:column; gap:6px>
       <span  10.5px/700 .05em UPPERCASE #98A2B3>          ← caption ABOVE the box
       <span  position:relative; display:flex>
         <select  width:100%; height:34px; padding:0 32px 0 11px; border-radius:9px;
                  border:1px solid #E5E7EB; background:#F8FAFC; 12.5px/600>
         <svg  14px #98A2B3  position:absolute; right:11px>  ← chevron
   ⚠ THIS IS NOT THE DOCTOR CHIP. An earlier pass made this field match the bar's Doctor control
   (content-width, 30px, no caption, caret inline). The reference treats bar fields and popover
   fields DIFFERENTLY: the bar labels nothing and sizes to content, the popover captions every
   field and runs it full width. Do not re-merge the two recipes.
   The `--float` classes stay off the markup: the reference's caption sits ABOVE the box, which is
   what this is — not a label floating inside it. ============ */

/* The wrapper is the reference's <label>. It must NOT be the bordered box — the box is the control
   below — so the shell an earlier pass put here is explicitly cleared. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-filter :is(.slm-ctrl-select-visit-reason, .slm-ctrl-select-admission-reason, .slm-ctrl-select-room-category, .slm-ctrl-select-room, .slm-ctrl-select-bed) {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
}

/* Caption. `!important` because `.slm-label` sets its own display, and because the bar hides every
   `.my-label` — this one has to opt back IN. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-filter :is(.slm-ctrl-select-visit-reason, .slm-ctrl-select-admission-reason, .slm-ctrl-select-room-category, .slm-ctrl-select-room, .slm-ctrl-select-bed) > .my-label {
    display: block !important;
    margin: 0;
    /* !important: `.my-label` declares `font-size: 0.9rem !important` (11.7px at the 13px root), so
       a plain value loses however specific this chain is. Same reason as the display flag above. */
    font-size: 10.5px !important;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #98a2b3;
}

/* The control IS the bordered box. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-filter :is(.slm-ctrl-select-visit-reason, .slm-ctrl-select-admission-reason, .slm-ctrl-select-room-category, .slm-ctrl-select-room, .slm-ctrl-select-bed) .bootstrap-select {
    width: 100% !important;
    height: 34px !important;
}
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-filter :is(.slm-ctrl-select-visit-reason, .slm-ctrl-select-admission-reason, .slm-ctrl-select-room-category, .slm-ctrl-select-room, .slm-ctrl-select-bed) .bootstrap-select > .dropdown-toggle {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 34px;
    padding: 0 32px 0 11px !important;
    border: 1px solid #e5e7eb;
    border-radius: 9px;
    background: #f8fafc;
    font-size: 12.5px;
    font-weight: 600;
    color: #475467;
}

/* Value back in flow — bootstrap-select absolutely positions `.filter-option` across the button so
   its own caret can overlay it, which pushes the text under the chevron. Same fix the Doctor chip
   needs, for the same reason. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-filter :is(.slm-ctrl-select-visit-reason, .slm-ctrl-select-admission-reason, .slm-ctrl-select-room-category, .slm-ctrl-select-room, .slm-ctrl-select-bed) .bootstrap-select > .dropdown-toggle .filter-option {
    position: static;
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    /* 🔥 AND IT MUST CENTRE ITS OWN CONTENT, or the value rides ~7px high in the box.
       bootstrap-select gives `.filter-option` `height: 100%`, so it stretches to the button's full
       content box (32.4px of the 34px button). It is a plain BLOCK, so the 18.8px text line inside
       it sits at the TOP of that box.
       The button's `align-items: center` does NOT fix this: it centres the filter-option, and the
       filter-option is already full height — there is nothing left for it to centre. The
       misalignment lives one level further in, so the centring has to happen here.
       (Identical cause and fix to the location picker in the top bar — see slm-theme-v1.css.) */
    display: flex;
    align-items: center;
}

/* 🔥 AND THE INHERITED PADDING MUST GO, or the value is clipped mid-word.
   bootstrap-select gives `.filter-option` `padding: inherit` and `.filter-option-inner`
   `padding-right: inherit`. That is correct for ITS layout, where `.filter-option` is absolutely
   positioned across the whole button and therefore has to re-create the button's padding to stay
   clear of the caret. The rule above puts the option back IN FLOW — inside a button that already
   has that padding — so the same 43px is now applied three times over:
     button 218.4  →  .filter-option 173.8  →  .filter-option-inner 130.8  →  text 98.8
   "Select Visit Reason" needs 106px, so it rendered as "Select Visit Reas".
   Zeroing both wrappers hands the text the button's real content width.
   ⚠ The Doctor chip never showed this because its recipe sets `padding: 0 !important` on the
   toggle — there is nothing to inherit. Any future control that keeps padding on the toggle AND
   makes the option static needs this pair too. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-filter :is(.slm-ctrl-select-visit-reason, .slm-ctrl-select-admission-reason, .slm-ctrl-select-room-category, .slm-ctrl-select-room, .slm-ctrl-select-bed) .bootstrap-select > .dropdown-toggle .filter-option,
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-filter :is(.slm-ctrl-select-visit-reason, .slm-ctrl-select-admission-reason, .slm-ctrl-select-room-category, .slm-ctrl-select-room, .slm-ctrl-select-bed) .bootstrap-select > .dropdown-toggle .filter-option-inner,
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-filter :is(.slm-ctrl-select-visit-reason, .slm-ctrl-select-admission-reason, .slm-ctrl-select-room-category, .slm-ctrl-select-room, .slm-ctrl-select-bed) .bootstrap-select > .dropdown-toggle .filter-option-inner-inner {
    padding: 0;
    width: auto;
    /* A reason longer than the box should ELLIPSIS, not cut mid-word. Every real value fits, but
       visit reasons are hospital-configurable so a long one is a matter of time; `text-overflow`
       was computing to `clip` here, which is what produced "Select Visit Reas". */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Chevron pinned right, the reference's 14px #98A2B3. The 32px of right padding above is what
   reserves its lane. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-filter :is(.slm-ctrl-select-visit-reason, .slm-ctrl-select-admission-reason, .slm-ctrl-select-room-category, .slm-ctrl-select-room, .slm-ctrl-select-bed) .bootstrap-select > .dropdown-toggle::after {
    position: absolute;
    right: 11px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    margin: 0;
    border: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2398A2B3' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px 14px;
}

/* ============ "MORE" PANEL — chrome, badge and checkboxes ============ */

/* Panel shell. Reference: `width:248px; padding:14px; border-radius:12px; background:#FFFFFF;
   border:1px solid #E5E7EB; box-shadow:0 12px 32px rgba(16,24,40,.16)`. Ours had a 10px radius, a
   teal-tinted `rgba(13,40,38,.1)` shadow left over from the teal-chrome era, and a #D8E3E0 border.
   ⚠ WIDTH DELIBERATELY LEFT AT 320px, not the reference's 248. The reference's panel holds two
   short selects; ours also carries three checkbox rows whose labels run to "Show Deleted
   Visits/Appointments". At 248px (220px of content box) every one of them wraps to two lines, so
   copying that number would trade a chrome match for a worse-reading panel. Everything else is the
   reference's. */
.slm-page:is(.slm-page-opd, .slm-page-ipd, .slm-page-laboratory, .slm-page-pharmacy) .slm-section-filter .slm-filter-dropdown {
    /* The reference's 248px. It fits two selects and the footer; ours also carries three checkbox
       rows, whose labels ("Show Deleted Visits/Appointments") now wrap to two lines at this width.
       That is the accepted cost of matching the reference exactly — shorten the labels if the wrap
       ever becomes a problem, do not widen the panel back. */
    width: 248px;
    /* ⚠ The floor must move with the width. The base `.slm-filter-dropdown` also declares
       `min-width: 20rem` — 260px at the 13px root — which silently clamped `width: 248px` back up
       to 260 and made the change look like it had not applied. */
    min-width: 248px;
    padding: 14px;
    /* !important answers `.dropdown-menu { border: 0 !important }` in the base sheet. This chain is
       (0,4,0) against its (0,1,0), so the flag decides a fight specificity alone cannot. */
    border: 1px solid #e5e7eb !important;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(16, 24, 40, .16);
}

/* IPD's panel keeps a width of its own, but a much smaller one than it used to need.
   It was 460px while it was a TWO-column grid of six selects — at the reference's 248px each
   `.col-6` came out at ~110px, the bootstrap-selects squeezed to 99px and the two select2
   widgets collapsed to 0x0 outright. It is a single column now (the chips took Patient Type
   and Visit Type out of it, which left one field facing a hole), so that pressure is gone and
   280px fits the four remaining fields at full width.
   ⚠ NOT the reference's 248px, and the 32px is deliberate: this panel's checkbox labels are
   longer than OPD's — "Show Deleted Admission/Appointments" wraps to two lines below about
   276px. OPD accepts that wrap to match the reference exactly; here the four extra pixels buy
   a label that reads in one line, which is worth more than the exact number.
   ⚠ `min-width` has to move with `width`: the base `.slm-filter-dropdown` also declares
   `min-width: 20rem` (260px at the 13px root), which silently clamps a smaller `width` and
   makes the change look like it never applied. */
.slm-page.slm-page-ipd .slm-section-filter .slm-filter-dropdown {
    width: 280px;
    min-width: 280px;
}


/* The active-filter count on the "More" button. It was a RED circle (#FF675D, `kt-badge--danger`,
   `border-radius:50%`) — red reads as an error, and this is just "two filters are on". The
   reference makes it a teal pill: `padding:1px 6px; border-radius:999px; background:#0A9184;
   color:#FFFFFF; font-size:10.5px; font-weight:700`, tabular figures so the width does not jitter
   between 1 and 2 digits. */
.slm-page:is(.slm-page-opd, .slm-page-ipd, .slm-page-laboratory, .slm-page-pharmacy) .slm-section-filter .slm-ctrl-btn-filter .filter-count-badge {
    /* 🔥 IN FLOW, NOT PINNED. The base is `.kt-badge.filter-count-badge { position:absolute;
       right:-5px; top:15px }`, which hung the count off the button's bottom-right corner, half
       outside its own border. The reference carries it INSIDE the button as the last flex item,
       after the label. `position: static` returns it to flow and the button's existing `gap: 7px`
       spaces it — no offsets needed, and it can never drift out of the button again.
       ⚠ `right`/`top` are reset too: they are inert once static, but leaving them invites someone
       to "restore" the absolute positioning by re-adding one property.
       Note the JS sets `display:inline-flex` as an INLINE style when the count is non-zero
       (common-schedule.js:492), so display is not ours to control here — only the flow is. */
    position: static;
    right: auto;
    top: auto;
    padding: 1px 6px;
    border-radius: 999px;
    background: #0a9184;
    color: #ffffff;
    font-size: 10.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Checkboxes. THE REFERENCE HAS NONE — its "More" panel is two selects and a footer — so there is
   no value to copy and these are styled to the reference's PALETTE instead of its markup: the
   neutral tone (#F2F4F7 fill over #D6DAE1) at rest, the teal accent when checked, and the same
   12.5px/500 #475467 the panel's other text uses. Previously an #E6E5E5 box at 3px radius with a
   13.65px label, which read as a different design system to everything around it. */
.slm-page:is(.slm-page-opd, .slm-page-ipd, .slm-page-laboratory, .slm-page-pharmacy) .slm-section-filter .kt-checkbox.kt-checkbox--solid {
    font-size: 12.5px;
    font-weight: 500;
    color: #475467;
}
.slm-page:is(.slm-page-opd, .slm-page-ipd, .slm-page-laboratory, .slm-page-pharmacy) .slm-section-filter .kt-checkbox.kt-checkbox--solid > span {
    height: 17px;
    width: 17px;
    border-radius: 5px;
    background: #f2f4f7;
    /* !important answers `.kt-checkbox.kt-checkbox--solid > span { border: 1px solid transparent
       !important }` — the base deliberately hides the box edge for its own solid style. */
    border: 1px solid #d6dae1 !important;
}
.slm-page:is(.slm-page-opd, .slm-page-ipd, .slm-page-laboratory, .slm-page-pharmacy) .slm-section-filter .kt-checkbox.kt-checkbox--solid:hover > span {
    border-color: #0a9184 !important;
}
/* ⚠ `!important` on the border here too, and it is MY OWN resting rule it is answering, not the
   base's: that rule needs the flag to beat `.kt-checkbox--solid > span { border: … !important }`,
   and once flagged it also outranked this plain `border-color` — so the box filled teal while
   keeping a grey edge. Flagging both keeps the pair consistent. */
.slm-page:is(.slm-page-opd, .slm-page-ipd, .slm-page-laboratory, .slm-page-pharmacy) .slm-section-filter .kt-checkbox.kt-checkbox--solid > input:checked ~ span {
    background: #0a9184;
    border-color: #0a9184 !important;
}


/* Panel footer — the reference's `grid-column:1/-1; display:flex; align-items:center;
   justify-content:space-between; gap:10px; padding-top:11px; border-top:1px solid #EEF1F5`. */
.slm-page:is(.slm-page-opd, .slm-page-ipd, .slm-page-laboratory, .slm-page-pharmacy) .slm-section-filter .slm-filter-dropdown__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 11px;
    padding-top: 11px;
    border-top: 1px solid #eef1f5;
}

/* "Clear these" — a quiet underlined link that only turns red on hover, so a destructive action is
   never the loudest thing in the panel. Reference: #667085 / 12.5px / 700-weight-600 / underline at
   2px offset, hover #B4453C. `all: unset`-style reset because this is a <button>. */
.slm-page:is(.slm-page-opd, .slm-page-ipd, .slm-page-laboratory, .slm-page-pharmacy) .slm-section-filter .slm-filter-clear-these {
    padding: 0;
    border: 0;
    background: none;
    color: #667085;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    transition: color .14s ease;
}
.slm-page:is(.slm-page-opd, .slm-page-ipd, .slm-page-laboratory, .slm-page-pharmacy) .slm-section-filter .slm-filter-clear-these:hover {
    color: #b4453c;
}

/* "Done" — the panel's only filled control, in the accent. Reference: padding 6px 14px, radius 8,
   #0A9184 on #FFFFFF, 12.5px/700, hover brightness(1.08). */
.slm-page:is(.slm-page-opd, .slm-page-ipd, .slm-page-laboratory, .slm-page-pharmacy) .slm-section-filter .slm-filter-done {
    padding: 6px 14px;
    border: 0;
    border-radius: 8px;
    background: #0a9184;
    color: #ffffff;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: filter .14s ease;
}
.slm-page:is(.slm-page-opd, .slm-page-ipd, .slm-page-laboratory, .slm-page-pharmacy) .slm-section-filter .slm-filter-done:hover {
    filter: brightness(1.08);
}

/* ============ FILTER PILLS — the reference's chip row on the right of the filter bar ============
   Visit Type and Patient Type used to be two dropdowns inside the "More" panel. The reference
   surfaces them as chips on the bar itself, so a common filter is one click instead of three.
   Values, states and grouping are the reference's own (its `flagChips`): one selection per group,
   OFF = white / #E0E5EC / #475467, ON = #0A9184 / #0A9184 / #FFFFFF, 30px tall, fully round,
   11.5px/700.
   Department and Insurance chips are deliberately ABSENT — the reference has both, Hardik does not
   want either.
   ⚠ The pills carry no state of their own; they write to the original <select>s. See the markup
   comment in newcalendar/index.blade.php for why that matters. ============ */

/* Pushed to the far right of the bar. `margin-left: auto` inside the existing flex form rather
   than a new wrapper, so the search field and date/doctor controls keep their current sizing. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-filter .slm-filter-pills {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-left: auto;
}

/* A pill the active tab does not carry. The reference varies its chip row per tab rather than
   printing one row everywhere — see the map in index.blade.php for which tab gets what and why. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-filter .slm-filter-pill.slm-pill-off {
    display: none;
}

/* Same idea for the "More" button, which the reference shows on Waiting and Completed only.
   ⚠ `.slm-ctrl-btn-filter` is the WRAPPER, not the button: hiding the button alone would leave its
   `p-4` wrapper holding 24px of padding in the bar's flex row, so the gap would stay behind on
   every tab that has no More. The map that decides this is in index.blade.php. */
/* 🔥 THIS TOOK CLEAR WITH IT. `.slm-ctrl-btn-filter` is the wrapper, and the wrapper holds TWO
   fields: the More button and, beside it, the bar's Clear link. Hiding the whole thing removed
   Clear from Follow Up, Scheduled, In Consultation and Laboratory — four of the six tabs — while
   the reference prints Clear on all six. So the rule hides the More field only.
   ⚠ THE WRAPPER'S PADDING IS WHY IT WAS WRITTEN THIS WAY. `p-4` is 24px on every side, and with
   the button gone that padding stayed in the flex row and pushed Clear 24px off the controls it
   belongs to. Zeroing the left padding on the same condition is what the earlier version was
   buying by hiding the wrapper, without the cost. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-filter .slm-ctrl-btn-filter.slm-more-off > .form-group:not(.slm-ctrl-btn-clear) {
    display: none !important;
}
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-filter .slm-ctrl-btn-filter.slm-more-off {
    padding-left: 0 !important;
}

.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-filter .slm-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 11px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #e0e5ec;
    color: #475467;
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: all .14s ease;
}

/* Hover only lights the edge and the ink — the fill is reserved for the ON state, so a passing
   mouse can never be mistaken for an applied filter. Same split the "More" button uses. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-filter .slm-filter-pill:hover {
    border-color: #0a9184;
    color: #0a9184;
}

.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-filter .slm-filter-pill.is-on,
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-filter .slm-filter-pill.is-on:hover {
    background: #0a9184;
    border-color: #0a9184;
    color: #ffffff;
}

/* The two fields these pills replace are HIDDEN, not deleted. The <select>s must stay in the DOM:
   they are what the pills write to, what common-schedule.js reads for the filter and the badge
   count, and what Clear resets. Removing them from the blade would break all three. */
/* ⚠ THIS RULE IS ONLY SAFE ON A PAGE THAT HAS THE PILLS, and it has been wrong once.
   Widened to IPD with the rest of the header block before IPD had chips, where it did not
   hide a redundant control — it deleted Patient Type and Visit Type outright, leaving a hole
   in the More panel and no other way to set either filter. It was scoped back to OPD until
   the chips existed; IPD has them now (slmIpdFilterPills), so both pages are covered again.
   If a third screen ever picks up `.slm-section-filter`, check it has pills before adding it
   here. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-filter .slm-ctrl-select-patient-type,
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-filter .slm-ctrl-select-visit-type,
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-ctrl-btn-filter .slm-ctrl-select-patient-type,
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-ctrl-btn-filter .slm-ctrl-select-visit-type {
    display: none;
}

/* ---- The nursing station's task tabs take the same selected fill. ----
   Upcoming / Due / Completed are the same `.status-scorecard-round` pill as every other tab on
   IPD, so the whole [opd-header-v3] recipe above already shapes them. The one arm they miss is
   the SELECTED state, because that is keyed on `.status-filter.active` and these carry
   `.nurse-task-status-filter` instead — deliberately, so common-schedule.js's `.status-filter`
   handler does not run the IPD tab switch on a task filter. nurse.js adds `.active` to them;
   this is the fill it turns on.
   ⚠ THE `.nurse-task-status-filter` HERE IS DOING THE SAME JOB `.status-filter` DOES IN THE RULE
   IT MIRRORS — carrying the selector to (0,5,0) so it beats the base recipe's six
   `.status-scorecard-round.<colour>.active` arms, each (0,4,0), structurally rather than on
   source order. Do not simplify it to `.status-scorecard-round.active`. */
.slm-page.slm-page-ipd .slm-section-scorecards .status-scorecard-round.nurse-task-status-filter.active {
    background: #0a9184;
    border-color: #0a9184;
    box-shadow: 0 2px 10px rgba(14, 124, 107, .18);
}
.slm-page.slm-page-ipd .slm-section-scorecards .status-scorecard-round.nurse-task-status-filter.active .status-scorecard-round-title {
    color: #ffffff;
    font-weight: 700;
}
.slm-page.slm-page-ipd .slm-section-scorecards .status-scorecard-round.nurse-task-status-filter.active .status-scorecard-round-digit {
    background: rgba(255, 255, 255, .22);
    color: #ffffff;
}
/* Hover on an unselected task tab, matching the queue tabs' teal hairline. The base recipe's
   2px lift is already cancelled for `.status-scorecard-round` generally. */
.slm-page.slm-page-ipd .slm-section-scorecards .status-scorecard-round.nurse-task-status-filter {
    cursor: pointer;
}

/* The nursing station shows one tab group at a time and toggles the other with an inline
   `display: none`, so the groups sit side by side in the DOM. `.slm-section-scorecards` is a
   flex row; without this the hidden group's inline style is honoured but the visible one still
   inherits the wrapper's own layout, which put a 24px gap where the hidden group had been. */
.slm-page.slm-page-ipd .scheduled-label > .slm-section-scorecards {
    margin: 0;
}

/* The two checkbox rows the IPD bar's chips replace — Insurance and MLC.
   Hidden, not deleted, for exactly the reason the note on the Patient/Visit Type rule above
   gives: the inputs are what the chips write to, what the "More" badge counts
   (common-schedule.js:1028-1032) and what Clear resets (common-schedule.js:396). The other two
   rows in that list (Show Deleted, Show Noshow) have no chip and stay visible.
   ⚠ IPD ONLY. OPD's More panel has its own checkbox list with different ids, and the decision
   recorded on OPD's pills is that it does NOT get an Insurance chip — so nothing there should
   be hidden. The marker class only exists in the IPD blade, but the scope makes that explicit
   rather than incidental. */
.slm-page.slm-page-ipd .slm-section-filter .slm-ctrl-check--as-pill {
    display: none;
}
/* ===== [opd-header-v3] END ===== */

/* ===== [opd-table-v3] BEGIN — OPD queue table, retuned to the v3 reference design. 2026-08-19.

   The table is NOT in the blade: index.blade.php:660-704 ships six empty
   `<div id="calendar_*_table">` containers and KTDatatable builds every head/row/cell at runtime
   (datatable-user-list.js). So this is necessarily CSS against the generated DOM.

   ⚠ THIS BLOCK NOW SERVES IPD AS WELL — the widening this note used to ASK FOR has been done.
   The block shipped scoped to `.slm-page.slm-page-opd` with a standing note that the base recipe is
   keyed `:is(.slm-page-opd, .slm-page-ipd)`, that IPD was therefore left on the old blue-grey head,
   and that 'widening these selectors to the same :is() is all it would take'. An IPD Reception
   reference landed on 2026-08-26 drawing the same card, the same head, the same zebra and the same
   row-action rail, so every selector here was widened to
   `.slm-page:is(.slm-page-opd, .slm-page-ipd)` and the four IPD table ids were appended to each
   `:is(#calendar_...)` list. IPD-only column chrome lives in [ipd-table-v3] further down.

   ⚠ THE WIDENING IS SPECIFICITY-NEUTRAL, WHICH IS THE ONLY REASON IT IS SAFE TO DO IN PLACE.
   `:is()` contributes only its heaviest argument, so `.slm-page:is(.slm-page-opd, .slm-page-ipd)`
   scores exactly what `.slm-page.slm-page-opd` did — (0,2,0) — and the ten-id list scores what the
   six-id list did. Every override in this block therefore still beats the (0,N,0) base rules it was
   written and tested against, and OPD's rendering is untouched: the selectors only GAINED matches.
   Keep it that way. Writing a bare `.slm-page-ipd` prefix instead would drop to (0,1,0) and tie the
   base rules, which then win on source order — style.css is concatenated ahead of slm-theme-v1.css.

   Rules that name markup only one page emits (.slm-col-timeline, .slm-col-nextstep, .slm-dx-line …)
   are inert on the other page, so the shared scope costs nothing. ===== */

/* ---- Card: ONE card, not two.
   🔥 THE CARD CHROME WAS BEING DRAWN TWICE, which is what put a stray line above the column
   header. Two nested elements each had a full border + 14px radius + shadow:
     • OUTER `.kt-datatable.custom-kt-datatable` — 1px #E5E7EB / 14px / 0 1px 2px rgba(16,24,40,.05)
     • INNER `.kt-datatable__table`             — 1px #DCE3EC / 14px / 0 1px 3px  (from the theme)
   Stacked, they read as a doubled rule across the top of the header and again under the pager.
   The reference has a SINGLE card (`border:1px solid #E5E7EB; border-radius:14px;
   box-shadow:0 1px 2px rgba(16,24,40,.05)`) wrapping the header and the rows.
   The OUTER already carries exactly those values, and it is also the element that contains the
   pager — so it is the card. This strips the duplicate off the inner <table>.
   ⚠ `border: 0` not `border-color`: the previous version of this rule only retuned the COLOUR,
   which left the second 1px line in place and merely made it match the first. ---- */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .opd-frontdesk-table-container .kt-datatable__table {
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/* ---- Column header: the REFERENCE's blue-grey, #E2EAF4 over #CAD6E5.
   ⚠ THIS WAS DELIBERATELY CHANGED AWAY FROM THE REFERENCE ONCE, AND IS NOW CHANGED BACK. The v3
   pass replaced it with a teal tint (#E2F0EC / #C6DFD9) on the reasoning that a blue band "reads
   as foreign under a teal top bar and rail". That was correct at the time — the chrome WAS teal.
   The chrome went back to navy (#1A2332) on 2026-08-25, which is the palette the reference's
   blue-grey was cut for in the first place, so the tint no longer has anything to harmonise with
   and the reference's own value is right again.
   Lesson worth keeping: this header is downstream of the CHROME colour, not of the page. If the
   chrome ever changes hue again, re-check this pair before anything else on the table.
   `!important` + (0,9,0) because the base sets the background with `!important` at (0,8,0). ---- */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .opd-frontdesk-table-container .tableBottomBorder.kt-datatable > .kt-datatable__table > .kt-datatable__head .kt-datatable__row {
    background: #e2eaf4 !important;
    border-bottom: 1px solid #cad6e5;
}

/* Header labels: the ref sets 11px; the base is 0.923rem (12px at the 13px root). Colour, weight,
   tracking and casing already match, so only the size moves. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .opd-frontdesk-table-container .kt-datatable.kt-datatable--default > .kt-datatable__table > .kt-datatable__head .kt-datatable__row > .kt-datatable__cell > span {
    font-size: 11px !important;
}

/* Header cell height: the ref's 11px vertical padding (base is 0.65rem = 8.45px).
   ⚠ VERTICAL ONLY. The ref's 21px/18px horizontal insets are NOT adopted: the head's first cell is
   pinned to `1.1rem` to line up with the body cells, which take the same `1.1rem` at
   `.schedule-summary-row .kt-datatable__cell` (:10357). Moving one without the other visibly
   un-aligns every column from its header. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .opd-frontdesk-table-container .kt-datatable.kt-datatable--default > .kt-datatable__table > .kt-datatable__head .kt-datatable__row > .kt-datatable__cell {
    padding-top: 11px !important;
    padding-bottom: 11px !important;
}

/* ---- Rows: separator and hover move off the blue-grey scale onto the ref's.
   Hover is the ref's `.prow:hover` = #F2FBF9 exactly (was #f2fbf9, a near-miss from the teal pass);
   the base's #DEE5EB / rgba(14,42,51,.05) are separate blue-greys. ---- */

/* ⚠ ONE SEPARATOR PER PATIENT, NOT TWO. The pre-v3 design drew the line between patients as a
   `border-top` on the NEXT pair's summary row (:10345). v3 draws it as a `border-bottom` on the
   detail row's cells instead, so wherever a band actually renders both fired and the row was
   closed by two hairlines 1px apart — at 0.8px each they read as one thick, muddy rule. It only
   showed between SOME patients because an empty band is `display: none` and a hidden row paints
   no border, so the double only appeared above a patient who has diagnosis chips.
   Scoped to the six converted tables: the pre-v3 rule is still the separator for anything on this
   page that has not been through the v3 column work, and for the whole of IPD. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-summary-row.schedule-table-row + .schedule-detail-row + .schedule-summary-row.schedule-table-row {
    border-top: 0 !important;
}
/* ---- Zebra striping, the reference's `zebra: i % 2 === 0 ? '#FFFFFF' : '#FCFDFE'`.
   Odd PATIENTS take #FCFDFE; even ones keep the shell's white, so only one rule is needed.

   ⚠ STRIPE PER PATIENT, NOT PER <tr>. Every patient is TWO rows — datatable-user-list.js:1466
   appends a `.schedule-detail-row` immediately after each `.schedule-summary-row` (it reaches back
   with `$(row).prev('tr.schedule-summary-row')`, so the pairing is guaranteed and adjacent). A
   plain `:nth-child(even)` would therefore stripe half of each patient and read as a rendering
   fault, not a stripe.
   Rows therefore run summary(1) detail(2) summary(3) detail(4)… so every patient occupies a pair
   and the SECOND patient of each pair-of-pairs starts at child 3: summary rows to stripe are
   `4n+3`, and their detail rows are the `4n` that follow.

   🔥 THE OBVIOUS SELECTOR CANNOT BE USED HERE. `:nth-child(even of .schedule-summary-row)` says
   exactly this and is robust to the pairing, but the CSS MINIFIER DESTROYS IT: cssnano does not
   know the `of S` keyword and strips the spaces around it, emitting
   `:nth-child(evenof.schedule-summary-row)` — an invalid selector, so the rule is silently dead in
   the built bundle while looking perfect in source. Verified by grepping the emitted
   theme-combine-styles.css. Do not "restore" the nicer form without re-checking the BUILT file.

   ⚠ WHAT `4n+3` ASSUMES, since it hard-codes what the nicer selector expressed: that the tbody's
   first child is a summary row and that every summary row is followed by exactly one detail row.
   Both hold today (the detail row is always created — an empty one is `display:none`, not absent,
   so it still occupies a child position). If KTDatatable ever emits a leading spacer row, or drops
   the detail row instead of hiding it, the stripe will land on half-patients. That is the failure
   mode to look for. ---- */
/* The UNSTRIPED row must be white first. Found while testing the stripe: the base recipe fills
   every summary row with #EEF3F9 —
   `:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .schedule-summary-row.schedule-table-row` —
   a blue-grey band per patient that predates this work, so the table was never the reference's
   white and the stripe would have alternated blue-grey with #FCFDFE.
   ⚠ Scoped to `.slm-page-opd` ALONE, and the base rule left untouched: that `:is()` serves IPD as
   well, and `:is()` takes the specificity of its heaviest argument, so editing it there would
   repaint the IPD table too. (0,5,0) beats the base's (0,4,0). */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .schedule-summary-row.schedule-table-row {
    background: #ffffff;
}

/* ⚠ `.schedule-table-row` is here to out-rank the white base above, not for readability: both
   would otherwise be (0,5,0) and the stripe would win only on source order. With it, zebra is
   (0,6,0) and beats white structurally — while still losing to hover at (0,7,0). The three rules
   are a deliberate ladder: white (0,5,0) → stripe (0,6,0) → hover (0,7,0). */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .schedule-summary-row.schedule-table-row:nth-child(4n + 3),
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .schedule-detail-row.schedule-table-row:nth-child(4n) {
    background: #fcfdfe;
}

/* Hover must out-rank the stripe above.
   ⚠ `.kt-datatable__row` is in these selectors ONLY to win that fight, and must not be "tidied"
   away. The zebra rule scores (0,5,0) — four classes plus the `:nth-child()` pseudo — which ties
   the old first hover arm and would then win on source order, leaving striped patients dead under
   the cursor. The extra class takes hover to (0,7,0), so it wins structurally rather than by
   position in the file. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .schedule-table-row.kt-datatable__row.kt-datatable__row--hover,
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .schedule-summary-row.schedule-table-row.kt-datatable__row.kt-datatable__row--hover {
    background: #f2fbf9;
}

/* ---- Patient cell typography. The row markup is generated in datatable-user-list.js:1544-1575
   and already carries every field the reference shows (name, UHID, sex, age, phone, city) — what
   differed was the SCALE. Every line ran 1.5-3px larger than the reference, which is what made the
   table still read as the old design after the palette had moved; and the UHID was brand teal,
   which the reference reserves for links, using a neutral grey for identifiers instead.

   Each selector below mirrors its base rule with `.slm-page.slm-page-opd` in place of
   `:is(.slm-page-opd, .slm-page-ipd)`. `:is()` contributes only its heaviest argument, so the
   double class is +1 and these win structurally rather than on source order. ---- */

/* Name: 1.192rem (15.5px) -> the ref's 13.5px. Weight/colour already match. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .kt-user-card-v2 .kt-user-card-v2__details .kt-user-card-v2__name.user-name-label {
    font-size: 13.5px;
}

/* UHID value: 0.962rem (12.5px) teal -> 11.5px on the ref's #667085 (both meta
   lines take that one grey in the reference, at :406 and :418; #475467 was a near-miss). */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .kt-user-card-v2 .kt-user-card-v2__details .caseNo {
    font-size: 11.5px;
    color: #667085;
}

/* The "UHID:" caption itself is a nested span. The ref demotes it hard — 9.5px/700 in the lightest
   grey — so the NUMBER reads as the content and the caption as a label, rather than the two
   competing at the same size and colour. */
/* ⚠ Needs the full `.kt-user-card-v2 .kt-user-card-v2__details .kt-user-card-v2__desc` chain, not
   the short `.caseNo .datatable-font-weight`. A grouped rule at :10651 ends with
   `… .kt-user-card-v2__desc span { font-weight:500 }` — (0,6,0) — and `.caseNo` IS a
   `.kt-user-card-v2__desc`, so that arm matches this inner span and beat the short selector's
   (0,4,0). The weight silently stayed 500 until the chain was spelled out. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .kt-user-card-v2 .kt-user-card-v2__details .kt-user-card-v2__desc.caseNo .datatable-font-weight {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .04em;
    color: #98a2b3;
}

/* The two meta lines (UHID | sex | age, and phone + city): 1rem (13px) -> the ref's 11.5px. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .slm-ctrl-patient-identity,
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .slm-ctrl-patient-identity .kt-user-card-v2__desc,
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .slm-ctrl-patient-contact,
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .slm-ctrl-patient-contact .kt-user-card-v2__desc {
    font-size: 11.5px;
}

/* Contact line onto the ref's meta grey (was #6B7A8D).
   ⚠ `.schedule-detail-row` IS HERE FOR WEIGHT, NOT REACH. The theme's
   `:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .schedule-detail-row
   .kt-user-card-v2__details .kt-user-card-v2__desc` also sets a colour, at the same (0,5,0) this
   rule had. It won that tie on source order until the v3 CSS moved into style.css, which loads
   BEFORE the theme - so the tie has to be broken on weight now. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .schedule-detail-row .slm-ctrl-patient-contact .kt-user-card-v2__desc {
    color: #667085;
}

/* ---- The two meta lines, laid out. The typography above got their SIZE right; this gets their
   STRUCTURE right. The reference builds both as a flex row on a 5px stack rhythm and divides the
   fields with a 1px x 11px #E5E7EB rule — a hairline, not a character. ---- */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .slm-ctrl-patient-identity,
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .slm-ctrl-patient-contact {
    display: flex;
    align-items: center;
    margin-top: 5px;
}

/* The "|" separators are LITERAL PIPE CHARACTERS in the row markup (the `.slm-info-sep` spans in
   datatable-user-list.js), so they inherited the text's font: taller than the ref's rule, sitting
   on the text baseline rather than centred, and changing width with the font. `font-size: 0`
   collapses the glyph while the box survives, which turns each span into the reference's hairline
   WITHOUT touching the emitted HTML. `line-height: 0` is needed with it — on its own the zeroed
   text still contributes a line box and the rule renders ~14px tall instead of 11px. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .slm-ctrl-patient-identity .datatable-font.slm-info-sep {
    display: inline-block;
    flex: none;
    width: 1px;
    height: 11px;
    margin: 0 8px;
    background: #e5e7eb;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
}

/* The contact line has NO separator element to convert — the markup only puts `.ml-2` on the
   city span — so its rule is drawn as a `::before` on the city instead. Same hairline; the
   inherited `ml-2` margin is dropped so the 8px either side of the rule is the only gap. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .slm-ctrl-patient-contact .kt-user-card-v2__desc {
    display: inline-flex;
    align-items: center;
}
/* ⚠ `.slm-tooltip` AND `.schedule-detail-row` ARE HERE FOR WEIGHT. The theme's
   `:is(.slm-page-opd, .slm-page-ipd) ... .kt-user-card-v2__desc.slm-tooltip.ml-2` sets
   `margin-left: 14px !important` at (0,6,0) - the same weight this rule had, and it won on source
   order until the move put it ahead of the theme. Both classes are already on the city span. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .schedule-detail-row .slm-ctrl-patient-contact .kt-user-card-v2__desc.slm-tooltip.ml-2 {
    margin-left: 0 !important;
}
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .slm-ctrl-patient-contact .kt-user-card-v2__desc.ml-2::before {
    content: "";
    display: inline-block;
    flex: none;
    width: 1px;
    height: 11px;
    margin: 0 8px;
    background: #e5e7eb;
}

/* A stray <br> sits between the two contact spans in the emitted markup. It was harmless while the
   line was a block, but a flex row turns it into a real 14px-wide item that shoves the phone number
   off the cell's left edge. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .slm-ctrl-patient-contact br {
    display: none;
}

/* ---- The cell's vertical rhythm. The reference stacks four lines in 81px; this cell took 96px for
   the same four, and the whole difference was line boxes, not gaps — the gaps were already the
   reference's 5px. Two separate causes, both inherited: ---- */

/* 1. Metronic sets `line-height: 0` on `.kt-user-card-v2__details`, and every line below inherits
   it. The meta spans were laying out as ZERO-HEIGHT boxes with their text spilling out, so the rows
   took their height from whatever else happened to be in them rather than from their own text —
   20px for an 11.5px line. The name had the opposite problem: 19.5px of line-height on a 13.5px
   name, 1.44x where the reference leaves it at `normal`.
   ⚠ The hairline separator has to keep its own `line-height: 0` (it is a zeroed glyph, see above),
   so it is restated after this rule rather than being caught by it. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .kt-user-card-v2 .kt-user-card-v2__details .kt-user-card-v2__name.user-name-label {
    line-height: 1.2;
}
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .slm-ctrl-patient-identity,
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .slm-ctrl-patient-contact,
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .slm-ctrl-patient-identity > *,
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .slm-ctrl-patient-contact > *,
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .slm-ctrl-patient-identity .kt-user-card-v2__desc,
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .slm-ctrl-patient-contact .kt-user-card-v2__desc {
    line-height: 1.2;
}
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .slm-ctrl-patient-identity .datatable-font.slm-info-sep {
    line-height: 0;
}

/* 2. `.kt-user-card-v2__desc` carries a Metronic `margin-top: 4px`. That was invisible while these
   lines were blocks, but a flex row adds a child's vertical margin straight onto the line's height,
   so each row measured 17.8px for 13.8px of text AND sat 4px low inside itself. The 5px stack gap
   is the ROW's own margin-top and is unaffected.
   ⚠ `.schedule-detail-row` IS HERE FOR WEIGHT, NOT REACH — the same tie, and the same fix, as the
   contact line's colour above. slm-theme-v1.css:10642 sets `margin-top: 4px` AND
   `align-items: center` on `:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .schedule-detail-row
   .kt-user-card-v2__details .kt-user-card-v2__desc`, which is (0,5,0) — exactly what this rule was
   without it. It won on source order once the v3 CSS moved ahead of the theme, and the UHID group
   went back to sitting 2px below the sex and age beside it. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .schedule-detail-row .slm-ctrl-patient-identity .kt-user-card-v2__desc,
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .schedule-detail-row .slm-ctrl-patient-contact .kt-user-card-v2__desc {
    margin-top: 0;
}

/* 3. UHID's LABEL AND ITS VALUE SHARE A BASELINE, NOT A CENTRE LINE. The reference wraps the pair in
   its own `display:flex; align-items:baseline` span, which is what lets a 9.5px caption sit against
   an 11.5px number without either looking dropped. The theme rule above centres every
   `.kt-user-card-v2__desc` instead, and centring two different font sizes puts the smaller one's
   baseline ~1px below the larger's — close enough to read as a mistake rather than a style.
   Only the UHID pair changes: the phone and city spans beside it hold a 12px icon against their
   text and want to stay centred. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .schedule-detail-row .slm-ctrl-patient-identity .kt-user-card-v2__desc.caseNo {
    align-items: baseline;
}

/* ---- Gender to age is a MIDDLE DOT in the reference, not a rule. The reference divides UHID from
   the age/sex group with its 1px hairline and then writes that group as one string — "M . 62Y"
   — so the hairline stays meaningful as the boundary between two FIELDS. This markup emits a
   second `.slm-info-sep` between sex and age instead, which drew a second hairline and made sex and
   age read as two separate fields of equal weight.
   The element is the same zeroed pipe glyph, so this undoes the hairline's box and puts a real
   middle dot back through `::before`. `.slm-info-gender +` is what distinguishes the two: both
   separators carry identical classes, and only their position differs. ---- */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .slm-ctrl-patient-identity .slm-info-gender + .datatable-font.slm-info-sep {
    width: auto;
    height: auto;
    margin: 0 4px;
    background: none;
    overflow: visible;
}
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .slm-ctrl-patient-identity .slm-info-gender + .datatable-font.slm-info-sep::before {
    content: "\00B7";
    font-size: 11.5px;
    line-height: 1.2;
    color: #98a2b3;
}

/* ---- Doctor / Reference. ----
   The reference stacks a 12.5px/600 #101828 doctor name over an 11px #98A2B3 reference line: a 12px
   icon, 5px gap, the referrer's name at 600. This table drew the doctor at 15.5px/500 in near-black
   — the same oversized treatment the visit reason had, and again heavier than the patient's own
   name — and the referral block one step up the scale from the reference's throughout.

   ⚠ THIS COLUMN CARRIES MORE THAN THE REFERENCE, and the extra is functional, not decorative.
   slmFrontdeskReferral (datatable-user-list.js:586) emits a second line for doctor referrals with a
   click-to-call phone link and an Edit pill, plus a referral-count pill (or a first-referral star)
   on the first line. None of that exists in the reference, so it is scaled to the 11px line rather
   than dropped — an 18px pill on a 13px line box was inflating the row on its own. The
   [frontdesk-referral-v2] block at :23113 still owns their shape; only size and weight move here.

   Scoped to `.schedule-detail-row` rather than to `:is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table)`: this is pure
   typography with no structural dependency, so every OPD tab gets it, the same way the patient-cell
   typography above does. ---- */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .schedule-detail-row .slm-info-doctor-name {
    font-size: 12.5px;
    font-weight: 600;
    /* the base pins this to `#0a1628 !important` at :10520 */
    color: #101828 !important;
}
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .schedule-detail-row .slm-ref-line,
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .schedule-detail-row .slm-ref-line2 {
    font-size: 11px;
    gap: 5px;
    margin-top: 5px;
}
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .schedule-detail-row .slm-ref-lead-icon {
    width: 12px;
    height: 12px;
}
/* `.slm-info-ref-by` re-states its own size at :10525, so inheriting 11px from the line is not
   enough; the name and phone are set alongside it to keep the line on one scale. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .schedule-detail-row .slm-info-ref-by,
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .schedule-detail-row .slm-ref-name,
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .schedule-detail-row .slm-ref-phone {
    font-size: 11px;
}
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .schedule-detail-row .slm-ref-phone-icon {
    width: 12px;
    height: 12px;
}
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .schedule-detail-row .slm-ref-count {
    height: 16px;
    padding: 0 6px;
    font-size: 10.5px;
    font-weight: 800;
}
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .schedule-detail-row .slm-ref-count svg {
    width: 11px;
    height: 11px;
}
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .schedule-detail-row .slm-ref-new {
    width: 16px;
    height: 16px;
}
/* Edit keeps its teal — it is an action, and the reference does use brand teal for those — but
   moves onto the page's actual brand value. #0EB8A9 is the old pre-v3 teal; the v3 chrome, the
   active tab and the filter focus ring are all #0A9184. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .schedule-detail-row .slm-ref-edit {
    padding: 2px 6px;
    font-size: 10.5px;
    font-weight: 700;
    color: #0a9184;
}
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .schedule-detail-row .slm-ref-edit svg {
    width: 11px;
    height: 11px;
}

/* NOT BUILT — reference features with no counterpart in the live table:
     • the 3px per-row status stripe down the left edge (`r.tokenColor`) — needs a per-row status
       token the datatable does not emit;
     • row zebra striping (`r.zebra`);
     • the ref's column set (No. / Doctor+Reference / Billing / Next Step) — the live table is
       Patient / Visit Reason / Doctor / Time / Status, driven by the `columns:` definitions in
       datatable-user-list.js. Re-cutting those is a data change, not a restyle.
   Horizontal cell padding is also left as-is; see the header-cell note above for why. */
/* ---- Three row values that had never been brought to the reference. Found by measuring the
   generated row against the ref's `.prow`, rather than by reading the CSS. ---- */

/* 1 — The contact line (phone + city). The reference gives BOTH meta lines one grey, #667085
   (:406 and :418). The identity line above already had it; this one was never styled, so it fell
   through to the base `.kt-user-card-v2__desc` colour — #0A0A0A, near-black — and the phone number
   was reading as heavily as the patient's name. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .kt-user-card-v2 .kt-user-card-v2__details .slm-ctrl-patient-contact .kt-user-card-v2__desc {
    color: #667085;
}

/* 2 — The No. column, which no rule had ever touched: it inherited the datatable's 13px/400
   near-black. The reference sets 12.5px/800 #475467 with .01em tracking — deliberately the
   HEAVIEST weight in the row, so the queue position is scannable down the left edge while staying
   a quiet grey. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .opd-frontdesk-table-container .kt-datatable.kt-datatable--default > .kt-datatable__table > .kt-datatable__body .schedule-summary-row > .kt-datatable__cell:first-child > span {
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .01em;
    color: #475467;
}

/* 3 — Row cell vertical padding: the reference's `.prow` inner grid is `padding: 9px 18px`; ours
   was 4px, so every row sat 10px tighter than the design.
   ⚠ The 4px comes from `:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .custom-kt-datatable
   .schedule-summary-row .kt-datatable__cell` — SHARED with IPD. Overridden here at (0,6,0) rather
   than edited at source: `:is()` contributes its heaviest argument, so raising it there would
   loosen every IPD row too.
   Vertical only — the horizontal inset is left alone because the head and body cells are pinned to
   a common 1.1rem, and moving one without the other un-aligns every column from its header (see
   the header-padding note above).
   ⚠ `!important` is required, not defensive: that shared rule declares `padding: 4px !important`.
   Between two !important declarations specificity decides, and this chain's (0,6,0) beats its
   (0,5,0) — but WITHOUT the flag a plain longhand loses to their flagged shorthand regardless of
   specificity, which is exactly how the first attempt silently did nothing. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .custom-kt-datatable .schedule-summary-row .kt-datatable__cell {
    /* ⚠ ASYMMETRIC ON PURPOSE - 8 ABOVE, 2 BELOW. The band carries ITS OWN row's diagnoses and is
       inserted with `$(row).before(...)`, so it sits ABOVE the patient it describes. At an even 9/9
       it floated equidistant between two patients and read as belonging to the one above it. The
       detail cells contribute 8px of their own on each side, so the strip now sits ~16px under the
       previous patient and ~10px over its own - close enough to bind, far enough to separate. */
    padding-top: 8px !important;
    padding-bottom: 2px !important;
}
/* ---- Pager padding. It had `padding: 15px 0 0 0` plus an explicit `padding-bottom: 0`, so the
   page-size control sat flush against the card's left edge and flush against its bottom edge —
   the "20" dropdown was touching the border on two sides.
   18px horizontally is the reference's card inset (its header is `11px 18px 11px 21px` and its
   rows are `9px 18px`), so the pager now lines up with the columns above it instead of hugging
   the frame. 14px vertically gives the control the same breathing room top and bottom.
   ⚠ The rule being overridden is `:is(.slm-page-opd, .slm-page-ipd) … > .kt-datatable__pager`,
   SHARED with IPD, so this is scoped to `.slm-page-opd` and beats it (0,6,0) vs (0,5,0) rather
   than being edited at source. IPD keeps its current flush pager.
   ⚠ `padding-bottom` must be restated: the base sets it as a SEPARATE declaration after the
   shorthand, so a shorthand alone here would be overridden by it. ---- */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .kt-datatable.kt-datatable--default > .kt-datatable__pager {
    padding: 14px 18px;
    padding-bottom: 14px;
}
/* ===== [opd-table-v3] END ===== */


/* ⚠ THE TABLE LIST IN THE `:is(...)` BELOW IS THE SIX OPD QUEUE TABLES, not just Waiting.
   `:is()` takes the specificity of its heaviest argument, so a list of ids still counts as ONE id
   — every rule here keeps exactly the weight it was written and tested with.
   Tabs that have not been restructured yet simply do not match the rules that name v3 markup
   (.slm-billing-stack, .slm-nextstep-btn, .slm-col-token ...), so widening the scope is inert for
   them; what they DO pick up immediately is the shared surface — card, zebra, row separator and
   status stripe — which is correct, since that is chrome rather than column content. */

/* ===== [opd-table-v3-columns] BEGIN — chrome for the Billing column that the v3 restructure split
   out of the old "Status" cell on the OPD **Waiting** table. The column definitions live in
   datatable-user-list.js inside the `$(":is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table)").KTDatatable(...)` call only, so
   this markup is emitted by that table alone. 2026-08-19.

   ⚠ NO "No." COLUMN, AND THE FLOATING SERIAL BADGE IS LEFT ALONE. The reference opens each row with
   a token chip; this table already has one — `.custom-kt-datatable-serial-number`, absolutely
   positioned at `left:-17px` so it straddles the table's left edge (:10843). An earlier cut added a
   real No. column and hid that badge, which exposed a blue caret the badge had been covering and
   pushed the row's cell count out of step with the header. Reusing the badge keeps the row number,
   keeps the covered element covered, and keeps the column count where the width maths expects it.
   ===== */

/* ---- No. — the reference's token chip, in its own column. ----
   The column is declared in the waiting table's `columns:` with an EMPTY template; the number is
   written in by rows.afterTemplate, which is where the page-aware value
   (pageSize * (page-1) + index + 1) is already computed. `scheduleSummaryRow` is called there with a
   blank rowIndex so its own floating `.custom-kt-datatable-serial-number` badge never renders and
   the number is not shown twice.

   The chip sizes itself INSIDE KTDatatable's span wrapper rather than being it — see the
   load-bearing-wrapper note at datatable-user-list.js:1529. `width: 100%` fills whatever width
   KTDatatable hands the wrapper, `max-width` caps it at the reference's 34px, and `min-width: 0`
   lets it shrink with the wrapper on a narrow viewport instead of bursting out of the column. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .slm-row-token {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    float: none;
    width: 100%;
    max-width: 34px;
    min-width: 0;
    height: 22px;
    padding: 0 4px;
    border-radius: 7px;
    background: #f2f4f7;
    color: #475467;
    font-size: 12.5px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .01em;
    font-variant-numeric: tabular-nums;
}

/* The token cell is narrow and its content is a single chip — keep it off the row's text baseline
   so it sits level with the patient name rather than centred against a three-line cell. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .kt-datatable__cell.slm-col-token {
    vertical-align: top;
}

/* The column itself. The reference gives the token a FIXED 42px track next to `fr`-sized columns,
   so it never grows; this table sizes every column as a percentage of the window in
   datatable-user-list.js and KTDatatable then stretches them all to fill the table, so 4% rendered
   as a 95px column holding a 34px chip — more than twice the reference's width, and the widest
   run of dead space in the row.

   The percentage is now 2.25 / 3 / 2.5 (desktop / small / laptop), chosen so the width KTDatatable
   hands the wrapper span clears the 34px chip, and the points it gave up went to Patient
   (15 -> 16.75, 17 -> 18, 11 -> 12.5) — the column the reference weights most heavily, and which
   was rendering 277px against the reference's 288px minimum.

   ⚠ THE COLUMN TOTAL MUST STAY 74 / 79 / 74. KTDatatable measures from
   `.kt-datatable__row:first-child`, which in this table is a colspan summary row, so a larger total
   overflows the table and desyncs the header from the body. This edit is a transfer, not an
   increase.

   The 14.3px / 9.75px cell padding is cut to 4px a side to match: 24px of padding around a 34px chip
   is most of the column, and it is what held the rendered width at 65px after the percentage came
   down. With it gone the column lands at 48px against the reference's 42px — the last 6px is
   KTDatatable handing every column a share of the table's leftover space, which cannot be taken
   back without leaving the width model.

   ⚠ `!important` IS REQUIRED HERE and specificity will not substitute for it. Two base rules set
   this padding with `!important` of their own — `.custom-kt-datatable .kt-datatable__cell` and
   `.custom-kt-datatable .kt-datatable__head .kt-datatable__row > .kt-datatable__cell:first-child`
   — and an important declaration outranks any non-important one no matter how specific. The first
   cut of this rule carried an id and seven classes, lost anyway, and read as though it had worked. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .kt-datatable__head .kt-datatable__row > .kt-datatable__cell.slm-col-token,
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .kt-datatable__body .kt-datatable__row > .kt-datatable__cell.slm-col-token {
    padding-left: 4px !important;
    padding-right: 4px !important;
}

/* ---- Patient cell: the visit-indicator chip row, moved in from the summary band. ----
   The reference stacks the patient cell as name / UHID + age-sex / phone + city / chip row, and
   leaves the full-width band above for the diagnosis chips only. The move is done in
   rows.afterTemplate; this is just the placement once it lands. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .kt-user-card-v2__details > .icon-container {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 4px;
    margin-top: 5px;
}

/* Inside the summary band the icons sat in a `.kt-user-card-v2` that assumed a row of its own.
   In the patient cell it is one line among four, so drop the inherited block spacing and let the
   chips sit on the flex line above. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .icon-container .kt-user-card-v2 {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 4px;
    margin: 0;
    padding: 0;
    overflow: visible;
}

/* ---- The visit-indicator chips themselves. ----
   The base draws each as a 34x34 rounded-8 pastel SQUARE with no border (:10876-10950). The
   reference draws a 22px-tall PILL: `height:22px; padding:0 6px; border-radius:7px;
   border:1px solid rgba(16,24,40,.09); box-shadow:0 1px 1px rgba(16,24,40,.04)`, a 13px glyph and a
   10.5px/800 tabular count. At 34px the eight chips a busy row can carry wrapped onto a second line
   and outweighed the patient's own name; at 22px they sit as one quiet band under the contact line,
   which is where the reference puts them.

   ⚠ WHICH ELEMENT PAINTS THE CHIP IS NOT INTERCHANGEABLE. A visit-type glyph is nested one level
   inside `.frontdesk-icon`, and the base sized BOTH to 34x34. The first cut made the outer element
   the chip and told the inner one to fill it with `width/height: 100%` — but percentage width
   resolves against the chip's CONTENT box, which after 12px of padding is only 13px wide. The pastel
   became a 13px patch floating inside a 26px chip with no background of its own, so walk-in rendered
   as an all-but-white box. The pastels live on the INNER element, so the inner element is the chip
   and the outer is flattened to a bare wrapper. Where there is no inner glyph — the feedback
   dropdown is a bare `.frontdesk-icon` — the outer one paints instead, which is what the `:has()`
   pair below selects between.

   ⚠ THE GEOMETRY IS DELIBERATELY GENERIC, NOT PER-INDICATOR. The reference shows nine chips;
   THIS TABLE EMITS MORE. datatable-user-list.js:329-331 concatenates visit type, case type, lab
   visit, missed visits, vitals, feedback, arrival punctuality, pregnancy, insurance, membership,
   ABHA and case renewal, plus birthday at :493 and a reception note injected later at :1453.
   Enumerating them would silently miss whichever ones this hospital's data does not happen to show
   today, so size and shape are keyed to the wrappers they all funnel through. Only COLOUR is
   assigned per indicator, below. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .icon-container .frontdesk-icon:has(.visitTypeIcon, .online-appointment-icon) {
    display: inline-flex;
    align-items: center;
    width: auto;
    height: auto;
    min-width: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background: none;
    box-shadow: none;
}
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .icon-container .frontdesk-icon:not(:has(.visitTypeIcon, .online-appointment-icon)),
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .icon-container .frontdesk-icon > .visitTypeIcon,
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .icon-container .frontdesk-icon.feedback-dropdown .visitTypeIcon,
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .icon-container .frontdesk-icon > .online-appointment-icon,
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .icon-container .kt-user-card-v2__pic > .kt-badge,
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .icon-container .slm-time-badge {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    flex: none;
    width: auto;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 7px;
    border: 1px solid rgba(16, 24, 40, .09);
    box-shadow: 0 1px 1px rgba(16, 24, 40, .04);
    font-size: 10.5px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .01em;
    font-variant-numeric: tabular-nums;
}

/* `.kt-user-card-v2__pic` is only a wrapper around the badge — it must not keep the base's
   avatar box, or every badge chip ends up inside a second, larger frame. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .icon-container .kt-user-card-v2__pic {
    display: inline-flex;
    width: auto;
    height: auto;
    min-width: 0;
    margin: 0;
    /* ⚠ `!important` BECAUSE A BOOTSTRAP UTILITY IS IN THE MARKUP. The ABHA chip's wrapper is
       `kt-user-card-v2__pic pr-0 pl-2`, and `.pl-2` is `padding-left: .5rem !important` — so a
       plain `padding: 0` lost to it and that one chip sat 10.5px after its neighbour while
       every other gap in the strip was the container's 4px. The strip's rhythm belongs to the
       container `gap`; nothing inside it should be able to add spacing of its own, which is
       why this is a blanket reset rather than an un-setting of `pl-2` specifically. */
    padding: 0 !important;
    /* ⚠ MARGIN TOO, AND ALSO FLAGGED. `padding` alone covered `pl-2` on the ABHA wrapper, but
       the strip carries other Bootstrap spacing utilities — `ml-2` on the feedback dropdown is
       a MARGIN, and a margin utility is `!important` at source just as a padding one is. The
       container `gap` is the strip's only spacing mechanism; this makes that true rather than
       true-for-the-utilities-we-happened-to-find. */
    margin: 0 !important;
}
/* `.frontdesk-icon` is the strip's other wrapper — the feedback dropdown and the birthday
   mark — and it carries `ml-2` in the markup. Same reset, same reason as above. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .icon-container .frontdesk-icon {
    margin: 0 !important;
    padding: 0 !important;
}

/* Glyphs to the ref's 13px. `!important` answers the base's 20px rule at :10898, which is grouped
   across `.frontdesk-icon svg` and `.kt-user-card-v2__pic svg` and so matches most of these; the
   ABHA mark also carries its own width/height ATTRIBUTES (18px, :189) that only a declaration
   beats. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .icon-container svg {
    width: 13px !important;
    height: 13px !important;
}

/* Same 13px for a chip whose glyph is an ICON FONT rather than an SVG. IPD draws Emergency and
   MLC that way (`slmicon-ambulance` / `slmicon-balance`), and `slm-1x-2` sets 15.6px — so those
   two chips were 2.6px larger than every SVG chip beside them and read as a different size.
   `line-height: 1` with it: an icon font otherwise contributes its own leading and pushes the
   chip taller than the 22px the others settle at.
   ⚠ `!important` for the same reason the SVG rule above needs it — `slm-1x-2` sets the size
   with the flag. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .icon-container [class*="slmicon-"] {
    font-size: 13px !important;
    line-height: 1 !important;
}

/* ---- The ABHA mark is drawn smaller WITHOUT being laid out smaller. ----
   Every other icon here is a 24x24 line drawing whose ink fills about 76% of its viewBox — the
   artwork carries its own margin — so at the strip's 13px box they paint 9.9px of ink. The
   ABDM mark is a 943x883 illustration drawn edge to edge: ink fills 100%, so the same box
   painted 13px and it read a size larger than everything beside it while measuring identical.

   🔥 AND SHRINKING THE BOX TO FIX THAT WAS WRONG — it is what the first cut of this rule did.
   These chips size to their content, so a 10px svg gave a 23.6px chip against every other icon
   chip's 26.6px: the ink matched and the CHIP no longer did. Box and ink are two different
   measurements and both have to line up.
   `transform: scale()` is what separates them. A transform paints smaller without touching the
   layout box, so the svg keeps the 13px the chip measures itself against and the drawing lands
   at 13 x .77 = 10px, alongside the line icons' 9.9px.
   ⚠ DO NOT "SIMPLIFY" THIS BACK TO width/height. That is the same trap, and it looks correct
   in isolation — the chip only gives itself away next to another icon chip in the same strip.
   To re-derive .77: ink fraction is `svg.getBBox().width / viewBox width`, and this mark's is
   1.0 against the line icons' 0.76. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .icon-container .slm-indicator-abha svg {
    transform: scale(.77);
}

/* Every glyph takes its chip's own colour, which is how the reference keeps icon and background in
   one hue. The SVGs carry literal `stroke="#e53e3e"`-style PRESENTATION ATTRIBUTES, and a CSS
   declaration outranks a presentation attribute, so this reaches them without touching the JS.
   Only `stroke` is redirected: most of these paths are drawn with `fill="none"`, and forcing fill
   to currentColor would flood them solid. Children that set their own `stroke` (the white ticks and
   crosses inside the arrival badges) keep it. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .icon-container :is(.frontdesk-icon, .kt-user-card-v2__pic, .slm-time-badge) svg {
    stroke: currentColor;
}

/* ---- The palette. Seven pairs, all lifted from the reference's own chips:
     appointment #F4F3FF/#6941C6 . walk-in #fef6ec/#b4610f . new+vitals #eaf8f0/#0b7a55
     returning #F0F1FE/#4338CA . missed #fdefee/#b4453c . member #FFF6E5/#9A6206
     insurance #E6F5F2/#0A9184
   The app's own colours were a different system — saturated icons (#e53e3e walk-in, #0ea5e9
   appointment) on near-white grounds — which is why the band read as a row of loose stickers next
   to the reference's.

   Mapped by the Metronic MODIFIER rather than per indicator wherever possible: insurance and lab
   visit are emitted with identical classes (`kt-badge--outline kt-badge--success`), so nothing but
   the modifier can address them, and going by modifier covers every badge-based indicator including
   ones this hospital's data does not currently show. Indicators that DO carry a unique class and
   mean something the modifier does not are named individually after it. ---- */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .icon-container .visitTypeIcon {
    background: #f4f3ff;
    color: #6941c6;
}
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .icon-container .visitTypeIcon.slm-indicator-icon-walkin {
    background: #fef6ec;
    color: #b4610f;
}

/* Online booking has no reference counterpart. Given the member gold so it stays distinguishable
   from an in-person appointment rather than collapsing into the same lavender. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .icon-container .online-appointment-icon {
    background: #fff6e5;
    color: #9a6206;
}
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .icon-container .kt-user-card-v2__pic > .kt-badge--success {
    background: #eaf8f0;
    color: #0b7a55;
}
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .icon-container .kt-user-card-v2__pic > .kt-badge--danger {
    background: #fdefee;
    color: #b4453c;
}
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .icon-container .kt-user-card-v2__pic > .kt-badge--warning {
    background: #fef6ec;
    color: #b4610f;
}
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .icon-container .kt-user-card-v2__pic > .kt-badge--info {
    background: #f0f1fe;
    color: #4338ca;
}
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .icon-container .kt-user-card-v2__pic > .kt-badge--primary {
    background: #f4f3ff;
    color: #6941c6;
}
/* The visit-count badge is the reference's "returning" chip, and its modifier is data-driven
   (`kt-badge--{caseTypeColor}`), so the count would otherwise change colour per patient. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .icon-container .kt-user-card-v2__pic > .all_visit_detail {
    background: #f0f1fe;
    color: #4338ca;
}
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .icon-container .kt-user-card-v2__pic > .missing_visit_detail {
    background: #fdefee;
    color: #b4453c;
}
/* Pregnancy ships as `kt-badge--danger` but is not an alert; the base already drew it purple. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .icon-container .kt-user-card-v2__pic > .slm-indicator-icon-pregnant {
    background: #f4f3ff;
    color: #6941c6;
}
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .icon-container .kt-user-card-v2__pic > .slm-badge-case-renew {
    background: #ecfaf7;
    color: #0a9184;
}
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .icon-container .slm-time-badge.slm-indicator-icon-late {
    background: #fdefee;
    color: #b4453c;
}
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .icon-container .slm-time-badge.slm-indicator-icon-ontime,
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .icon-container .slm-time-badge.slm-indicator-icon-early {
    background: #eaf8f0;
    color: #0b7a55;
}
/* Feedback: a bare `.frontdesk-icon` with no glyph child, and a neutral action rather than a state. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .icon-container .frontdesk-icon:not(:has(.visitTypeIcon, .online-appointment-icon)) {
    background: #f2f4f7;
    color: #475467;
}

/* The birthday marker. It was the one indicator that never funnelled through `.frontdesk-icon`: a
   bare <span> with inline 24px sizing and a literal stroke="#db2777", so it picked up neither the
   22px pill geometry nor the `stroke: currentColor` redirect and sat beside the chips as a loose
   pink glyph. Giving it the wrapper class in datatable-user-list.js is what makes the shared recipe
   apply; only the hue is left to state here. `ml-2` went with the inline styles - the row is a
   4px-gap flex, and that 8px was the only thing setting this chip off from its neighbours.

   The reference has no birthday concept, but it DOES define a pink: #FDF2FA/#C11574 is the PREGNANT
   row of its ALERT_KIND table (.dc.html :1316), the file's only pink tone pair. Borrowing it keeps
   every colour on this row traceable to the .dc.html rather than picked by eye.

   ⚠ TWO THINGS KEEP THIS RULE WINNING, AND IT NEEDS BOTH. The selector repeats `.frontdesk-icon`,
   the same trick the walk-in tone above uses. That alone was not enough: `:not(:has(.x))` is itself
   worth a class, so even qualified this rule only TIES the neutral feedback fallback at one id and
   seven classes, and a tie goes to source order - which is why the block sits HERE, below that
   fallback, instead of up with the other per-indicator tones. Move it back and the cake silently
   returns to the neutral #F2F4F7 fill. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .icon-container .frontdesk-icon.slm-indicator-birthday {
    background: #fdf2fa;
    color: #c11574;
}

/* The ABHA mark. It was the last indicator still styling itself: a `.kt-badge` with no modifier,
   so no tone rule reached it, plus an inline `border-color:#000080` that no stylesheet could beat.
   It rendered as the only chip on the row with no fill, a navy hairline and near-black text. The
   inline style is gone from datatable-user-list.js and a class put in its place; the tone here is
   the indigo pair the membership chip already uses - #4338CA is the reference's only indigo ink,
   and ABHA is the same KIND of marker (an identity/registration flag, not a clinical state), so
   sharing a tone is consistent rather than a collision. visit-type/pregnant and lab/insurance
   already pair up the same way. Two classes on the element to outrank the geometry rule's one. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .icon-container .kt-badge.slm-indicator-abha {
    background: #f0f1fe;
    color: #4338ca;
    border-color: #c7c9fb;
}

/* ---- VISIT FOR AND DOCTOR OPEN ON THE ROW'S OWN TOP LINE. ----
   Every cell in the row starts its content at the same y — 8px of cell padding — and the reference
   keeps it that way: each of its cells is a `flex-direction: column` whose first child is a
   blockified span at `line-height: normal`. These two are the only cells whose first line is a raw
   INLINE span inside the datatable's class-less block wrapper, so it sat in the wrapper's line box
   rather than owning one, and the wrapper's strut is 13px x 1.5 = 19.5px. The 12.5px text was
   pushed 2.4px down inside it: the patient name opened at +8.0 from the cell top and these two at
   +10.4, which is the row reading as though its columns start at three different heights.

   1.2 is the same ratio [opd-table-v3-surface] rule 1 puts on the patient card, and it lands the
   first line at +8.0 with a 15.2px box — the reference's own number for a 12.5px line.
   ⚠ THE STACK BELOW THE FIRST LINE MOVES WITH IT, AND THAT IS THE POINT. `Last visit`, the
   avg-consult line and `.slm-ref-line` all hang off the first line's box on a 5px/4px margin, so
   the 4.4px of extra leading was reaching them too — the 5px gap under the visit reason was
   rendering at 9px. Do not re-tune those margins to compensate; they already match the reference.
   Timeline and Billing are NOT affected and must not be added here: their wrappers hold a flex
   container, which opens its own formatting context and never inherited the strut. ---- */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row > .kt-datatable__cell[data-field="visitReason"],
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row > .kt-datatable__cell[data-field="doctorName"] {
    line-height: 1.2;
}

/* ---- ...AND SO DO VISIT TIMELINE AND BILLING, for a different reason. ----
   These two cells wrap their content in a flex container, so their first line already opened at
   +8.0 and none of the strut trouble above applied. What they inherited instead is the leading:
   `line-height: 1.5` reaching every line inside them, where the reference leaves all of it at
   `normal`. A timeline line measured 18px for 12px of text and a billing row 18.8px for 12.5px, so
   each cell ran about 13px taller than the reference's and every line after the first drifted
   ~3.6px further down the column.
   The rule goes on the CELL, not on `.slm-tl-wrap` / `.slm-billing-stack`: both of those are
   inline-level boxes sitting in the wrapper span's line box, so shrinking them while the wrapper
   keeps a 19.5px strut moves them DOWN as they get shorter (the timeline wrap went to +8.7). Set on
   the cell, the strut comes down with them and the first line stays on +8.0. ---- */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row > .kt-datatable__cell.slm-col-timeline,
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row > .kt-datatable__cell.slm-col-billing {
    line-height: 1.2;
}

/* ---- Follow Up's date columns stack with a <br>, so they need the strut gone as well. ----
   Follow Up does not emit `.slm-tl-wrap`; its Last Visit cell is two inline spans with a `<br>`
   between them, straight in the datatable's wrapper span. Inline content in a block wrapper is the
   same trap Visit For and Doctor were in, except here the text is 11.05px against a 13px strut, so
   the leading rule above could only narrow the gap — the column still opened 1.6px below the
   patient name. Blockifying the spans gives each one its own line box and the strut stops
   contributing at all; the `<br>` has to go with them or it lays out an empty third line.

   ⚠ `:has(> br)` IS DELIBERATELY NARROW. It matches only wrappers that ALREADY stack their lines
   with a `<br>`, which today is Follow Up's Last Visit cell and nothing else. Blockifying every
   span in every timeline cell would also stack any pair meant to sit side by side — a date and a
   time on one line, say — in a column whose data this dataset does not happen to include. On a
   browser without `:has()` the whole rule is dropped and the column renders as it does today, which
   is the right way for this to fail. ---- */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row > .kt-datatable__cell.slm-col-timeline > span:has(> br) > span {
    display: block;
}
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row > .kt-datatable__cell.slm-col-timeline > span:has(> br) > br {
    display: none;
}

/* ===== Visit For =====
   The cell holds two things: the visit reason, and an "Avg Conslt : N min" line that
   datatable-user-list.js:1626 emits only when `avgEngagedTime` is set AND the viewer is a doctor or
   admin. The reference stacks the same two — a 12.5px/600 #344054 label over an 11px/600 #98A2B3
   meta line with a clock — but this table drew the label at 15.5px/500 in near-black, heavier than
   the patient's own NAME two columns to its left, and the meta line in brand teal, which the
   reference reserves for links.

   Scoped through the new `.slm-col-visitfor` hook (datatable-user-list.js:1622): the visit reason is
   a plain `.kt-user-card-v2__desc`, exactly like the patient name and the phone and city lines, so
   without the column class these rules would restyle the patient cell too.

   ⚠ MATCHED ON `.kt-user-card-v2__desc` ALONE, NOT `.kt-user-card-v2__desc.kt-font-bold`. Follow
   Up writes this column ("Followup For") through a builder that omits `.kt-font-bold`, so keying on
   that class left one tab in six at the pre-v3 15.5px/500 while the other five were at 12.5px/600 -
   and the taller line opened 0.8px above the patient name beside it. There is exactly one
   `.kt-user-card-v2__desc` in this cell on every tab (the "Last visit" and avg-consult lines carry
   their own classes), so dropping the class widens reach without widening what is hit.
   `font-weight: 600 !important` stays: Metronic pins `.kt-font-bold` to `font-weight: 500
   !important`, and specificity does not enter into an important-vs-important contest. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .slm-col-visitfor .kt-user-card-v2__desc {
    font-size: 12.5px;
    font-weight: 600 !important;
    color: #344054;
}

/* The meta line. The base already gives it a clock `::before` and a 4px top margin (:10556); what
   changes is the scale and that it stops competing with the label — 0.962rem/500 in #0EB8A9 down
   to the reference's 11px/600 in #98A2B3, with the glyph following at 11px in the same grey.
   `!important` on the colour answers the base's own `!important` at :10552, which is there to beat
   Metronic's `.kt-font-brand`. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .slm-col-visitfor .appointment-list-facetime.kt-font-brand {
    font-size: 11px;
    font-weight: 600;
    color: #98a2b3 !important;
}
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .slm-col-visitfor .appointment-list-facetime.kt-font-brand::before {
    width: 11px;
    height: 11px;
    margin-right: 4px;
    vertical-align: -1px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2398A2B3' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
}

/* Last visit. Same 11px/600 #98A2B3 meta treatment as the avg-consult line beneath it, so the two
   read as one block under the visit reason. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .slm-col-visitfor .slm-info-visit-last {
    margin-top: 5px;
    font-size: 11px;
    font-weight: 600;
    color: #98a2b3;
}

/* ...and hidden in the summary band, where scheduleSummaryRow (:474) still writes it. The band is
   the reference's diagnosis strip, not a place for row meta. Hidden rather than removed from the JS
   because that same builder writes the checked-out tab's "Follow Up Date" through the identical
   markup, and this table is the only one moving its copy into the cell. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-summary-row .slm-info-last-visit {
    display: none;
}

/* NOT BUILT — reference lines in this column with no data behind them here:
     . "Last visit 18 Jun" — this app does have the value, but it puts it in the full-width summary
       band above the row ("Last Visit on : 18 Feb 2022"), not in this cell. Moving it is a layout
       decision about the band, not a restyle of this column.
     . the EMERGENCY chip — there is no emergency flag anywhere in this table's payload.
     . the follow-up chip — the Follow Up tab is its own table with its own columns.
   Wrapping is also left alone: the reference sets `white-space: nowrap` on the label, but its column
   is `minmax(120px,1fr)` inside a grid that scrolls, while this one is a fixed 13% of the window, so
   nowrap would push a long visit reason straight out of the cell. */

/* ===== Diagnosis pills =====
   The reference gives the band ONE line of individual pills, the primary diagnosis in brand teal and
   the rest neutral, with anything that does not fit collapsed into a "+N" chip that opens the
   remainder on hover or click. This was a single badge holding the whole list joined by commas, so
   four diagnoses wrapped the band onto three lines and pushed every row down with it.
   Markup and the fit measurement are in datatable-user-list.js (slmLayoutDiagnosisLines); this is
   the appearance only. Nothing about WHICH diagnoses are shown changed — still this visit's, from
   ⚠ WEIGHT 700, NOT 600. There is no diagnosis chip in the .dc.html to copy - the reference has no
   diagnosis concept at all, and its one clinical-chip analogue (ALERTS / ALERT_KIND, :1301-1318) is
   built into the row model at :2353 and then never rendered. So the geometry is matched to the
   reference's chip VOCABULARY instead: every one of its twelve `border-radius:999px` pills is
   font-weight:700, at 10.5/11/11.5px. The tone pairs need no such reasoning - neutral
   #F2F4F7/#475467/#D6DAE1 and teal #ECFAF7/#0A9184/#A9E4DB are verbatim STATUS_TONE rows.
   the same CalendarController query. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .schedule-summary-row .slm-dx-line {
    position: relative;
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: nowrap;
    overflow: visible;
    min-width: 0;
    flex: 1 1 auto;
}

/* The measurement reads `line.clientWidth`, so every ancestor between the band cell and the line has
   to be allowed to shrink. Flex items default to `min-width:auto`, which floors them at their
   content width — without these the line reports the width of ALL its pills laid end to end, the
   "+N" chip never appears, and the row simply overflows instead. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .schedule-summary-row .row > .col,
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .schedule-summary-row .col > .d-flex,
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .schedule-summary-row .col > .d-flex > .ml-2 {
    min-width: 0;
}
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .schedule-summary-row .col > .d-flex > .ml-2 {
    flex: 1 1 auto;
    /* Bootstrap's ml-2 was the last 6px holding the pills right of the queue number; the reference
       opens the band flush with the row's own left edge. */
    margin-left: 0 !important;
}

.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .schedule-summary-row .slm-dx-pill,
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .schedule-summary-row .slm-dx-popitem,
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .schedule-summary-row .slm-dx-more {
    padding: 2px 9px;
    border-radius: 999px;
    background: #f2f4f7;
    color: #475467;
    border: 1px solid #d6dae1;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
}
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .schedule-summary-row .slm-dx-pill {
    flex: 0 0 auto;
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Primary diagnosis — index 0 — in the reference's teal. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .schedule-summary-row .slm-dx-pill--primary,
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .schedule-summary-row .slm-dx-popitem--primary {
    background: #ecfaf7;
    color: #0a9184;
    border-color: #a9e4db;
}

/* The overflow chip. Hidden until slmLayoutDiagnosisLines finds something to hide behind it, which
   it signals with an explicit inline `display` — see the note at that assignment. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .schedule-summary-row .slm-dx-more {
    display: none;
    flex: 0 0 auto;
    background: #ecfaf7;
    color: #0a9184;
    border-color: #a9e4db;
    font-weight: 700;
    cursor: pointer;
    user-select: none;
}
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .schedule-summary-row .slm-dx-more:hover {
    background: #ecfaf7;
}

.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .schedule-summary-row .slm-dx-pop {
    display: none;
    position: absolute;
    z-index: 45;
    top: calc(100% - 2px);
    left: 0;
    min-width: 240px;
    max-width: 520px;
    padding: 8px 4px;
    border-radius: 11px;
    background: #ffffff;
    border: 1px solid #a9e4db;
    box-shadow: 0 10px 28px rgba(14, 124, 107, .18);
    flex-direction: column;
    align-items: flex-start;
}
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .schedule-summary-row .slm-dx-popitem {
    display: none;
    margin: 2px 8px;
    width: fit-content;
    max-width: calc(100% - 16px);
    white-space: normal;
}

/* Hover opens it, and the panel keeps itself open while the pointer travels down into it — the
   two selectors together are what make it reachable, since the panel sits below the chip with a
   2px overlap rather than flush against it.
   ⚠ `.slm-dx-pop` MUST STAY THE CHIP'S NEXT SIBLING. This is an adjacent-sibling rule; putting any
   element between the two in the template silently disables hover and leaves only click. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .schedule-summary-row .slm-dx-more:hover + .slm-dx-pop,
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .schedule-summary-row .slm-dx-more:focus-visible + .slm-dx-pop,
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .schedule-summary-row .slm-dx-pop:hover,
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .schedule-summary-row .slm-dx-line.slm-dx-open .slm-dx-pop {
    display: flex;
}

/* The panel hangs below the band and into the row beneath, so two things upstream have to let it
   out — it was being clipped AND painted under the row before either was fixed.

   1. The band cell's content wrapper is `<span class="w-100">`, and the datatable clips it with
      `... .kt-datatable__row > .kt-datatable__cell > span { overflow: hidden }`. ⚠ THAT SELECTOR IS
      (0,6,1) BECAUSE OF THE BARE `span`. The first cut of this rule ended in `> .w-100` — (0,6,0)
      — and lost by that single element, leaving the panel clipped to the band's own 33px. Writing
      it as `span.w-100` and adding the row class puts this at (0,7,1). */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .schedule-summary-row.kt-datatable__row .kt-datatable__cell > span.w-100 {
    overflow: visible;
}

/* 2. The panel lives in the band's <tr>, which comes BEFORE the detail row it overlaps. Positioned
      content paints in document order, so the row below drew over it. Raising the whole band while
      the panel is open puts it back on top; it is scoped to the open/hover state so the band does
      not sit above anything the rest of the time. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .schedule-summary-row:has(.slm-dx-line.slm-dx-open),
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .schedule-summary-row:has(.slm-dx-more:hover),
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .schedule-summary-row:has(.slm-dx-pop:hover) {
    position: relative;
    z-index: 50;
}

/* The band above now carries the diagnosis chips alone, so its icon slot should take no room. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-summary-row .icon-container:empty {
    display: none;
}

/* ===== Visit Timeline =====
   The reference stacks three things in this cell: a date line, one duration line saying where the
   patient IS, and a two-column grid of KEY/time stamps. Markup is built in
   datatable-user-list.js (slmBuildStageTimeline); this is the appearance.

   The cell is `text-center` in the column definition, which suited the old horizontal node track
   but leaves labelled stamps floating. Everything here is left-aligned inside a content-width
   column so the four keys line up under one another. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .schedule-detail-row .slm-col-timeline,
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .schedule-detail-row .kt-datatable__cell.text-center:has(.slm-tl-wrap) {
    text-align: left;
}
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .schedule-detail-row .slm-tl-wrap {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    min-width: 0;
    text-align: left;
}

/* Date line — 12px/600 near-black with the reference's violet calendar. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .schedule-detail-row .slm-tl-dateline {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #101828;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .schedule-detail-row .slm-tl-dateline > svg {
    flex: none;
    width: 13px;
    height: 13px;
    color: #6941c6;
}
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .schedule-detail-row .slm-tl-date {
    font-size: 12px;
    font-weight: 600;
    color: #101828;
}

/* Duration line. Neutral by default; the two tones are the reference's own thresholds — amber
   from 15 minutes waiting (or 25 in the room), red from 30. The glyph follows the text through
   `currentColor`, so a state change moves both together. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .schedule-detail-row .slm-tl-dur {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #667085;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .schedule-detail-row .slm-tl-dur > svg {
    flex: none;
    width: 13px;
    height: 13px;
    color: currentColor;
}
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .schedule-detail-row .slm-tl-dur.is-warn {
    color: #b4610f;
}
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .schedule-detail-row .slm-tl-dur.is-late {
    color: #b4453c;
}

/* The stamp grid. Two columns so SCHED/IN sit on one row and START/OUT on the next, which is what
   makes the four times scannable as pairs — before/after the desk, then before/after the doctor.
   A lab visit adds a third row through the same grid rather than a different layout.

   🔥 `auto auto`, NOT `1fr 1fr` — the equal split was eating the meridiem. 1fr splits the width
   evenly whatever the tracks hold, and the two columns do NOT hold the same thing: the left keys
   are SCHED / START / LAB IN (32px, 31px, 31px) and the right ones IN / OUT / LAB OUT (10px,
   20px, 41px). So the left column had to fit a 32px key in half the room while the right column
   sat on 22px of slack, and "01:35 PM" came out as "01:35 ..." — the ellipsis landing exactly on
   the AM/PM, which is the one part of a time you cannot infer from the rest.
   `auto` sizes each track to its own content, so the key widths are paid for where they are
   actually spent. It also makes the whole grid NARROWER than the 1fr version (201px against
   210px with a lab pair), because nothing is padded out to match the other side.
   ⚠ The ellipsis on `.slm-tl-val` below stays as the safety net: `auto` tracks still shrink
   when the column is genuinely too narrow, and `min-width: 0` on the stamp is what lets them. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .schedule-detail-row .slm-tl-stamps {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: start;
    gap: 3px 10px;
    font-variant-numeric: tabular-nums;
}
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .schedule-detail-row .slm-tl-stamp {
    display: flex;
    align-items: baseline;
    gap: 5px;
    min-width: 0;
    white-space: nowrap;
}
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .schedule-detail-row .slm-tl-key {
    flex: none;
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: .06em;
    color: #98a2b3;
}
/* The complete lab pair, written as a range on its own full-width row instead of as two stamps
   in the two tracks — see the note at the `LAB` branch in datatable-user-list.js for why the two
   long keys could not stay in the grid. Spanning is what keeps this row from setting the column
   widths for the four stamps above it. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .schedule-detail-row .slm-tl-stamp--range {
    grid-column: 1 / -1;
}
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .schedule-detail-row .slm-tl-arrow {
    flex: none;
    font-size: 10px;
    line-height: 1;
    color: #b6bcc6;
}
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .schedule-detail-row .slm-tl-val {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 11.5px;
    font-weight: 600;
    color: #101828;
}
/* A stage that has not happened yet is an em-dash in the reference's lightest grey — present, but
   clearly not a time. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .schedule-detail-row .slm-tl-val.is-empty {
    color: #b6bcc6;
}
/* Consultation start is the one stamp the reference tints, in the same violet as the calendar, so
   the eye can find "is the doctor with them yet" without reading the labels. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .schedule-detail-row .slm-tl-val.is-started {
    color: #6941c6;
}
/* No booked slot is a fact, not a gap. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .schedule-detail-row .slm-tl-val.is-walkin {
    color: #b4610f;
}

/* The Scheduled tab's booking view. The slot time shares the date line — same size and weight as
   the date, in the reference's grey, so "30 Jul 2026 1:00 PM" reads as one fact with the day
   leading. `.slm-tl-dateline` already supplies the 6px gap. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .schedule-detail-row .slm-tl-slot {
    font-size: 12px;
    font-weight: 600;
    color: #667085;
}
/* A walk-in has no slot to print, so the line says that instead — the same amber the SCHED stamp
   used, kept so the two views name the same thing the same way. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .schedule-detail-row .slm-tl-slot.is-walkin {
    color: #b4610f;
}

/* BOOKED — a labelled row rather than a stamp-grid cell, because it is the only one of its kind and
   a 1fr/1fr grid would leave the right half empty. The key reuses `.slm-tl-key` so its 8.5px/800
   caps match the stamp keys on every other tab. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .schedule-detail-row .slm-tl-meta {
    display: flex;
    align-items: baseline;
    gap: 5px;
    min-width: 0;
    white-space: nowrap;
}
/* BY sits under BOOKED on the same recipe. 3px is the stamp grid's own row-gap, so the two meta
   rows breathe the way the stamp rows do on every other tab rather than inventing a spacing. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .schedule-detail-row .slm-tl-meta + .slm-tl-meta {
    margin-top: 3px;
}
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .schedule-detail-row .slm-tl-meta-val {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 11px;
    font-weight: 600;
    color: #475467;
    font-variant-numeric: tabular-nums;
}

/* NOT REMOVED — the global `.slm-tl-node` / `.slm-tl-track` / `.slm-tl-ico` / `.slm-tl-time`
   recipe at :22892-22958 and its `--slm-tl-c` per-status colours are now unreachable: this file is
   the only place that emitted those classes, and slmBuildStageTimeline no longer does. Left in
   place rather than deleted because `.slm-tl-wrap` and the status modifiers are still applied and
   the block is one unit; deleting it is a separate tidy-up, not part of this column. */

/* The BILLING heading and its figures, on ONE right edge. KTDatatable writes an inline `width` on
   the inner span of every heading cell, and slmSyncColumnWidths copies it down to the body cells.
   That width is the column's declared share, not the cell's content box — 108px inside 110.35px on
   Laboratory, 107.52px inside 110.4px on Engaged — and the two sides did not always land on the
   same value, so a right-aligned heading stopped 2.9px short of the amounts on one tab and the
   amounts stopped 2.5px short of the heading on another. Both spans fill the cell instead, which
   puts the heading and every figure on the cell's own content edge on every tab.
   ⚠ `width: 100%`, NOT `width: auto`, AND IT MUST NOT BECOME A JS CHANGE. `auto` lets the cell
   size to its content and pushes the row wider than the table. And the sync copies
   `sp.style.width` — the inline ATTRIBUTE — so overriding how a span RENDERS is safe, while
   changing the attribute would desync the header from the rows. Verified on every tab: the head and
   body cell edges are identical before and after. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .kt-datatable__head .kt-datatable__row > .slm-col-billing > span,
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row > .kt-datatable__cell.slm-col-billing > span {
    width: 100% !important;
}

/* ---- Billing — label left, value right, per the reference. ---- */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .slm-billing-stack {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 5px;
    font-variant-numeric: tabular-nums;
}
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .slm-billing-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    white-space: nowrap;
}
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .slm-billing-label {
    font-size: 10.5px;
    font-weight: 600;
    color: #98a2b3;
}
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .slm-billing-value {
    font-size: 12.5px;
    font-weight: 600;
    color: #475467;
}
/* `.billing-currency-value` comes from billingCurrencyMarkup() carrying the app's own sizing;
   neutralise it so the amount inherits the row scale above.

   ⚠ `align-items: baseline` IS THE FIX FOR THE AMOUNT SITTING ABOVE ITS OWN LABEL, not a tidy-up.
   The billing row is `align-items: baseline`, exactly as the reference has it, and rows whose value
   is a plain dash lined up correctly. Rows carrying money did not: the amount rode 2.4px HIGH.
   `.billing-currency-value` is an inline-flex whose first item is the rupee SVG, and a flex
   container with no baseline-aligned item SYNTHESISES its baseline from that first item's bottom
   margin edge — so the row was aligning the label against the bottom of the rupee mark instead of
   against the digits. Opting the text item into baseline alignment gives the container a real text
   baseline to hand up. Measured label-to-value offset went from -1.7px to +0.8px, which is what
   every non-currency row already had.
   Do not chase this with `vertical-align` on the SVG or a margin on the row: both land it close
   without ever being right, and both break again at another font size. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .slm-billing-value .billing-currency-value {
    align-items: baseline;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    /* ⚠ THE MARK WAS TOUCHING THE DIGITS — "₹7,884" with no space at all. The global
       `.billing-currency-value` has `gap: 0.25rem`, but slm-theme-v1.css (~:23570) zeroes it
       for `:is(.slm-page-opd, .slm-page-ipd) .slm-section-table`, and its comment says why:
       "STATUS-column billing amount → remove the gap between the rupee icon and the number".
       That was written for the OLD Status cell, where the mark and the figure were set
       tighter; the v3 Billing column inherited the zero and reads as one run of ink.
       2px rather than the global 4px: a real ₹ CHARACTER — which is what the reference sets,
       since it has no multi-currency SVG to place — carries about 2px of side bearing, so
       this is the spacing the reference actually shows, not an invention. */
    gap: 2px;
}

/* ---- The rupee mark is SIZED IN em, and that is what fixes the "alignment" complaint. ----

   🔥 IT WAS NOT MISALIGNED — IT WAS TOO BIG. The mark sits correctly on the baseline: it is a
   replaced item in a `align-items: baseline` flex, so its bottom margin edge IS the baseline,
   and measurement confirms the ink lands within 0.2px of it. What made it look wrong is that
   the box was 13.375px against digits whose cap height at 12.5px is about 9px — the mark stood
   4px PROUD of the figures it belongs to, so the eye read a vertical offset that is not there.
   The 13.375px came from slm-theme-v1.css (~:23563), sized "+2px in proportion" for the OLD
   Status cell, whose type was larger. The v3 Billing column inherited it.

   0.82em puts the ink at the digits' cap height, and 0.5125em keeps the artwork's 320:512
   aspect (0.625 x the height). In `em` rather than px because this column is NOT one size: the
   two figure rows are 12.5px and the balance row is 14px, so a fixed height is wrong on one of
   them whichever value you pick. It now tracks whatever the row is set to.

   ⚠ THE `margin-top: -2.2px` THAT USED TO BE HERE IS GONE, and deliberately so. It existed
   because a 13.375px mark overhung the 15px line box and made rows carrying money 2.2px taller
   than rows showing a dash — a column of figures cannot have two line heights. At 0.82em the
   mark no longer overhangs, so the compensation has nothing left to compensate for; leaving it
   in would now pull the box up by 2.2px for no reason. If the size here ever goes back up,
   re-measure the overhang rather than restoring the old number. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .slm-billing-value .billing-rupee-svg {
    width: .5125em;
    height: .82em;
    margin-top: 0;
}
/* The text symbol the non-INR currencies use instead of the mark. Same job, no artwork — it
   just needs to stop inheriting the global sizing and sit on the row's own scale. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .slm-billing-value .billing-currency-symbol {
    font-size: inherit;
    font-weight: inherit;
}
/* No bill raised yet. Same lightest grey the Visit Timeline uses for a stage not reached, so an
   unbilled visit reads as "nothing here yet" rather than as an amount that failed to load. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .slm-billing-value .slm-billing-empty {
    color: #b6bcc6;
    font-weight: 600;
}

/* The balance row. Ruled off from the two figures above it and set a step larger, because it is
   the only line in this column anyone has to act on: whether the patient still owes money.
   Label and amount share one colour so the state reads as a single object.
   The reference separates it with the stack's own 5px gap, then the rule, then 4px of padding, and
   nothing else — a `margin-top: 1px` that used to sit here made this the only 6px gap in a column
   of 5s. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .slm-billing-row.slm-billing-net {
    padding-top: 4px;
    border-top: 1px solid #eef1f5;
}
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .slm-billing-net .slm-billing-label {
    font-weight: 700;
}
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .slm-billing-net .slm-billing-value {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.01em;
}
/* ⚠ THE STATE COLOUR IS SET ON THE ROW, NOT ON THE TWO SPANS. `.slm-billing-label` and
   `.slm-billing-value` above both declare their own `color`, and both are (0,3,0) against this
   block's (0,3,0) - a row-level colour alone would lose the tie on source order. Restating the
   colour through the descendants is what makes it win, so keep these as two-part selectors. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .slm-billing-net.is-payable .slm-billing-label,
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .slm-billing-net.is-payable .slm-billing-value {
    color: #b4453c;
}
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .slm-billing-net.is-refundable .slm-billing-label,
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .slm-billing-net.is-refundable .slm-billing-value {
    color: #0b7a55;
}
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .slm-billing-net.is-settled .slm-billing-label,
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .slm-billing-net.is-settled .slm-billing-value {
    color: #475467;
}
/* An advance held against a booking is money in hand but not yet earned — amber, the same
   tone the reference uses for a slot that has not been honoured yet. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .slm-billing-net.is-inhand .slm-billing-label,
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .slm-billing-net.is-inhand .slm-billing-value {
    color: #b4610f;
}
/* Nothing billed and nothing taken. Grey, and the amount stays an em-dash rather than a zero,
   so an unbilled visit does not read as a settled one. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .slm-billing-net.is-none .slm-billing-label,
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .slm-billing-net.is-none .slm-billing-value,
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .slm-billing-net.is-none .slm-billing-value .slm-billing-empty {
    color: #98a2b3;
}
/* ===== Next Step =====
   The reference makes this column an ACTION, not a status readout: one solid brand-teal button
   saying what happens next. This cell carried a status pill labelled with the patient's CURRENT
   state, which duplicated the Visit Timeline (now "Waiting 2h 39m") and told the user nothing they
   could act on.

   ⚠ The button's own `.btn.btn-sm` and the old status modifiers are gone from the markup, so this
   is the only thing sizing it. The label is now the NEXT step while the state travels in
   `data-current-status` — see the note at common-schedule.js:571; the click handler used to read
   the label text. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .slm-nextstep-wrap {
    display: flex;
    flex-direction: column;
    /* Starts at the cell's own left inset so the button sits under the heading - see note 10. */
    align-items: flex-start;
    gap: 5px;
    min-width: 0;
}
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .slm-nextstep-btn.btn.btn-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    /* The reference's 158px, but as a FLOOR rather than a fixed width. On `auto` the button was
       only as wide as its label, so a column mixing "Move to Waiting" with the shorter "Consult
       Now" had a ragged right edge; 158px gives the short labels one edge to share.
       ⚠ `min-width`, NOT `width`. This app's longest label -- "Move to Consultation", on Waiting --
       is wider than anything the reference has to print, and pinning the width truncated it to
       "Move to Consultat..." while the cell still had room to spare. A button that cannot say what
       it does is a worse failure than an uneven edge, so a long label grows the button instead.
       `max-width` remains the outer guard: the button can never exceed its cell. */
    width: auto;
    min-width: 158px;
    max-width: 100%;
    height: 30px;
    padding: 0 12px;
    border-radius: 8px;
    background: #0a9184;
    border: 1px solid #0a9184;
    color: #ffffff;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    box-shadow: none;
    transition: filter .12s ease;
}
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .slm-nextstep-btn.btn.btn-sm:hover,
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .slm-nextstep-btn.btn.btn-sm:focus {
    background: #0a9184;
    border-color: #0a9184;
    color: #ffffff;
    filter: brightness(1.08);
}
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .slm-nextstep-btn .slm-nextstep-ico {
    flex: none;
    width: 12px;
    height: 12px;
}
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .slm-nextstep-btn .slm-nextstep-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Laboratory carries two actions — a sample can go back to the queue or straight in to the doctor
   — so its second button is a ghost of the first rather than a second solid block of teal. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .slm-nextstep-btn--ghost.btn.btn-sm,
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .slm-nextstep-btn--ghost.btn.btn-sm:hover,
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .slm-nextstep-btn--ghost.btn.btn-sm:focus {
    background: #ffffff;
    border-color: #0a9184;
    color: #0a9184;
}
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .slm-nextstep-btn--ghost.btn.btn-sm:hover {
    background: #f2fbf9;
    filter: none;
}

/* ---- The note and reminder indicators go BELOW the button, on its left edge. ----
   They used to sit above it, and an absent indicator still cost the row 5px: the strip renders
   zero-height when its children are hidden but is still a flex item, so it kept taking the wrap's
   gap. That put the button 5px under the row's top line on rows with no indicator and ~28px under
   it on rows with one — three different button heights in one column, where the reference has all
   of them level. The reference's Next Step cell is the button FIRST with everything else after it,
   so `order` puts ours in the same sequence and every button now opens on +8.0 like the rest of the
   row. An empty strip still takes a trailing 5px, but it is below the button where nothing sees it.
   `justify-content` follows from that: `flex-end` was right while this column was right-aligned,
   but the heading and button have been on the cell's LEFT inset since the alignment was reversed,
   and it was leaving the badge 19px in from the button's edge. ---- */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .slm-nextstep-wrap .table-indicator-icon {
    order: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
}
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .slm-nextstep-wrap .table-indicator-icon:empty {
    display: none;
}

/* Each indicator is wrapped in a bare <div>, and the wrapper is a flex item even when the icon
   inside it is hidden. On Scheduled the confirmation tick is the SECOND wrapper and the first one's
   icon is hidden, so a zero-width item still collected the 4px gap and the tick sat 4px in from the
   button's left edge instead of on it.
   `display: contents` drops the wrappers and promotes the icons themselves to flex items, so a
   hidden icon contributes no item and no gap.
   ⚠ NO `!important`, DELIBERATELY. The schedule JS hides indicators by writing
   `style="display: none"` on these same wrappers, and an inline declaration outranks this one, so
   the hidden ones stay hidden. Adding `!important` would reveal every indicator the JS had turned
   off. Verified against the rendered rows: badge counts are identical with this rule on and off
   (Waiting 5, Engaged 12, Scheduled 20), and no wrapper anywhere is hidden by a CLASS instead of an
   inline style, which is the case that would slip past it. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .slm-nextstep-wrap .table-indicator-icon > div {
    display: contents;
}

/* The waiting figure this cell used to print is now the Visit Timeline's duration line, so showing
   it here as well says the same thing twice in one row. Hidden rather than removed from the
   template: `.timeDifferenceResultColumn` is written into by the schedule JS on a timer, and that
   code expects the element to exist. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .slm-nextstep-wrap .status-time.timeDifferenceResultColumn {
    display: none;
}

/* ===== Row actions =====
   The reference floats these at the row's BOTTOM-RIGHT as a white card of icon-over-label buttons.
   They were a teal icon-only popover with a speech-bubble caret, pinned to the top-right of the
   strip above the row — and that strip is the diagnosis band, which is why they had to move. The
   move itself is in datatable-user-list.js (waiting afterTemplate); this is the appearance.

   ⚠ THE LABELS ARE CSS `content`, NOT MARKUP. Each anchor already carries a full sentence in its
   `title` ("Send WhatsApp Message", "Upload Document here") which stays as the tooltip; the card
   needs a one-word caption instead. Writing them here means the eleven anchors are not touched at
   all, so none of the click handlers bound to them can be disturbed. `attr(title)` was the obvious
   alternative and is wrong — it would print the whole sentence under a 38px button. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .table-action-hover-btn {
    position: absolute;
    top: auto;
    right: 18px;
    bottom: 7px;
    z-index: 20;
    align-items: stretch;
    gap: 2px;
    padding: 3px;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 2px 6px rgba(16, 24, 40, .10);
}
/* The old caret pointed at the band this used to hang from. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .table-action-hover-btn::after {
    display: none;
}

.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .table-action-hover-btn .btn.btn-icon {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 3px;
    width: auto;
    min-width: 60px;
    height: auto;
    padding: 5px 2px 4px;
    border-radius: 9px;
    background: transparent;
    color: #475467;
    transition: background .12s ease;
}
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .table-action-hover-btn .btn.btn-icon:hover {
    background: #f2f4f7;
    border-radius: 9px;
}
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .table-action-hover-btn .btn.btn-icon svg {
    width: 17px;
    height: 17px;
    color: inherit;
    stroke-width: 1.9;
}
/* ⚠ HOVER SETS BACKGROUND AND NOTHING ELSE - no `color`. The reference's strip buttons carry
   style-hover="background:#F2F4F7;" and nothing more, so an icon keeps its resting tone while the
   pad tints. A `color: inherit` sat here to beat the legacy `.table-action-hover-btn .btn.btn-icon:hover`
   (blue fill, white text) that this file still carries, but inherit resolves to the near-black the
   cluster inherits from the page - so Edit/Print/More darkened from #475467 on every hover while the
   teal actions, whose colour comes from a heavier per-class rule, did not. Declaring no colour is
   enough: the legacy rule is four classes, the resting rule that sets #475467 is far heavier, so the
   resting value simply stands. `border-radius` DOES have to stay - the legacy rule flattens it to 1px. */
/* The caption. `::after` on the anchor, sized to the reference's 8px/700 at .78 opacity. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .table-action-hover-btn .btn.btn-icon::after {
    display: block;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0;
    white-space: nowrap;
    opacity: .78;
    color: inherit;
}

/* One-word captions, keyed to each action's own class. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .table-action-hover-btn .btn.btn-icon.appointment-whatsapp-msg-send::after {
    content: "WhatsApp";
}
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .table-action-hover-btn .btn.btn-icon.appointment-whatsapp-msg-send {
    color: #0b7a55;
}
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .table-action-hover-btn .btn.btn-icon.cancelAppointment::after {
    content: "Cancel";
}
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .table-action-hover-btn .btn.btn-icon.cancelAppointment {
    color: #b4453c;
}
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .table-action-hover-btn .btn.btn-icon.editPatientDetails::after {
    content: "Edit";
}
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .table-action-hover-btn .btn.btn-icon.reception-investigation-result::after {
    content: "Chart";
}
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .table-action-hover-btn .btn.btn-icon.reception-upload-document::after {
    content: "Upload";
}
/* This is the card's primary print action, so it takes the reference's "Print"; the second
   print action ("Print Label Sheet") lives in the menu under its own full title. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .table-action-hover-btn .btn.btn-icon.print_label::after {
    content: "Print";
}
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .table-action-hover-btn .btn.btn-icon.opd_print_multiple_label::after {
    content: "Sheet";
}
/* Restore is the cancelled row's ONLY action, so it is never in the menu (slmBuildActionOverflow
   returns early on a one-action cluster) and always draws as a card — which means it needs a
   caption like every other card, or it reads as a bare icon. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .table-action-hover-btn .btn.btn-icon.undoCancelAppointment::after {
    content: "Restore";
}
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .table-action-hover-btn .btn.btn-icon.reception-reminder::after {
    content: "Remind";
}
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .table-action-hover-btn .btn.btn-icon.add-vital-sign::after {
    content: "Vitals";
}
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .table-action-hover-btn .btn.btn-icon.add-vital-sign {
    /* Neutral, like Edit and Print beside it — see [rail-card-neutral]. */
    color: #475467;
}
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .table-action-hover-btn .btn.btn-icon.reception-vaccine-btn::after {
    content: "Vaccine";
}
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .table-action-hover-btn .btn.btn-icon.newBill::after {
    content: "Billing";
}
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .table-action-hover-btn .btn.btn-icon.newBill {
    /* Neutral, like Edit and Print beside it — see [rail-card-neutral]. */
    color: #475467;
}

/* ---- The Scheduled tab's own three captions. ----
   A strip caption is hard-coded per class (only the MENU reads `data-slm-label`), so the actions
   promoted onto the Scheduled strip need their own entries — Scheduled uses different classes for
   the same two jobs the queue tabs do: `scheduleNewBill` where they use `newBill`, and
   `editAppointmentDetailsFromScheduled` where they use `editPatientDetails`. Without these the
   promoted anchors would render as icons with no caption under them.
   "Change", not "Edit": on this tab the action opens the BOOKING — its slot and its doctor — which
   is what the reference calls that button, and it is a different thing from editing the patient's
   registration on the queue tabs. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .table-action-hover-btn .btn.btn-icon.editAppointmentDetailsFromScheduled::after,
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .table-action-hover-btn .btn.btn-icon.editVideoConsulationsDetailsFromScheduled::after {
    content: "Change";
}
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .table-action-hover-btn .btn.btn-icon.scheduleNewBill::after {
    content: "Billing";
}
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .table-action-hover-btn .btn.btn-icon:is(.editAppointmentDetailsFromScheduled, .editVideoConsulationsDetailsFromScheduled, .scheduleNewBill) {
    /* Neutral, like Edit and Billing on the queue strip — see [rail-card-neutral]. */
    color: #475467;
}
/* Mark NO SHOW stays in the menu, where the caption comes from its own title. */

/* ---- Overflow: four primary actions on the card, the rest behind "More". ----
   Built in datatable-user-list.js (slmBuildActionOverflow). Eleven actions on one strip measured
   458px and covered half the Visit Timeline on hover; the reference keeps four and hides the rest. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .table-action-hover-btn .slm-qa-sep {
    width: 1px;
    margin: 4px 1px;
    background: #e5e7eb;
    flex: none;
}
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .table-action-hover-btn .slm-qa-more::after {
    content: "More";
}
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .table-action-hover-btn.slm-qa-open .slm-qa-more {
    background: #f2f4f7;
}

/* ---- No click ring. ----
   Bootstrap paints `.btn:focus { box-shadow: 0 0 0 .2rem rgba(88,103,221,.25) }` - a lavender halo
   2.6px wide OUTSIDE the box. It showed on "More" alone, because More is the only <button> in the
   cluster while the other four are anchors, and it is the one control here that is clicked without
   navigating away, so the ring stayed behind after the menu closed. All five pads are 60px; the halo
   just made that one read wider. The reference has no equivalent - its strip buttons are `all:unset`,
   which drops every framework default.
   ⚠ :focus-visible KEEPS THE KEYBOARD RING. Killing :focus outright would match the reference for a
   mouse and leave anyone tabbing through the row with no idea where they are, so the halo is removed
   only for the pointer. The keyboard ring is the reference accent rather than Bootstrap lavender. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .table-action-hover-btn .btn.btn-icon:focus,
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .table-action-hover-btn .slm-qa-more:focus {
    box-shadow: none;
    outline: 0;
}
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .table-action-hover-btn .btn.btn-icon:focus-visible,
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .table-action-hover-btn .slm-qa-more:focus-visible {
    box-shadow: 0 0 0 2px rgba(10, 145, 132, .40);
    outline: 0;
}

/* The menu. Anchored to the card's bottom-right corner and opening UPWARD: the card already sits at
   the bottom of the row, so a downward menu would open off the last row of the table. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .table-action-hover-btn .slm-qa-menu {
    display: none;
    position: absolute;
    right: 0;
    bottom: calc(100% + 6px);
    z-index: 60;
    min-width: 232px;
    max-height: 320px;
    overflow-y: auto;
    padding: 6px;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 12px 32px rgba(16, 24, 40, .18);
    text-align: left;
}
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .table-action-hover-btn.slm-qa-open .slm-qa-menu {
    display: block;
}

/* ⚠ THE CARD RULE STACKS ICON OVER CAPTION; A MENU ROW IS THE OPPOSITE. Both are the same
   `.btn.btn-icon` element, so every axis the card sets has to be answered here — direction, the
   38px floor, the centring and the tiny 8px caption — or the items render as a column of stubs. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .table-action-hover-btn .slm-qa-menu .btn.btn-icon {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    min-width: 0;
    padding: 7px 9px;
    border-radius: 8px;
    color: #344054;
}
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .table-action-hover-btn .slm-qa-menu .btn.btn-icon:hover {
    background: #f2fbf9;
}

/* ---- The destructive row. ----
   The reference marks a destructive action in BOTH states, not just on hover: its "Remove" button
   rests at #B4453C ink and tints to #FDEFEE under the pointer (style-hover on the strip button at
   line 925 of the .dc.html). It sits on the reference's STRIP because that layout surfaces it
   directly; ours is behind "More", so the tone moves with the action rather than the position.
   Cancel Appointment and Cancel Visit are emitted with the same `cancelAppointment` class, so one
   pair covers both. Each rule carries exactly one class more than the generic menu rule it has to
   beat, which is enough - no !important needed. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .table-action-hover-btn .slm-qa-menu .btn.btn-icon.cancelAppointment {
    color: #b4453c;
}
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .table-action-hover-btn .slm-qa-menu .btn.btn-icon.cancelAppointment:hover {
    background: #fdefee;
}
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .table-action-hover-btn .slm-qa-menu .btn.btn-icon svg {
    width: 16px;
    height: 16px;
    flex: none;
}
/* Menu captions come from the `title` each anchor already carries — full sentences that read
   correctly as menu items ("Send WhatsApp Message", "Print Label Sheet"), where the card needs a
   single word. Using attr() means the anchors still are not touched. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .table-action-hover-btn .slm-qa-menu .btn.btn-icon::after {
    content: attr(title);
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0;
    opacity: 1;
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ⚠ AND BOOTSTRAP TAKES THE `title` AWAY. Every one of these anchors carries `.slm-tooltip`, and
   master.js hands that selector to $().tooltip(). Bootstrap's _fixTitle() then MOVES the attribute
   to `data-original-title` and sets `title` to "" — not at init, but the first time the element is
   hovered. attr(title) resolves to "" from that moment on and the row loses its caption for good,
   which is why a menu reads normally until the pointer has passed down it and then shows nothing but
   icons. Reading the attribute Bootstrap moved it to restores the caption; one attribute selector is
   enough to outrank the rule above, which still covers the anchors not yet hovered. Bootstrap only
   writes `data-original-title` when it has a title to move, so nothing else can match this. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .table-action-hover-btn .slm-qa-menu .btn.btn-icon[data-original-title]::after {
    content: attr(data-original-title);
}

/* THE CAPTION'S REAL SOURCE. slmBuildActionOverflow moves each menu item's `title` here and drops
   the attribute, so neither Bootstrap's bubble nor the browser's own can repeat a caption the row
   already prints in full. The two rules above stay as the fallback for an anchor the strip has not
   reached - both are one attribute selector, and this one is last, so it wins wherever they meet. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .table-action-hover-btn .slm-qa-menu .btn.btn-icon[data-slm-label]::after {
    content: attr(data-slm-label);
}

/* The cluster is revealed by a `.show` class the row's mouseenter adds and mouseleave removes. With
   the menu open the pointer is usually OFF the row, so without this the menu vanishes the moment it
   is used. Keeping it displayed while open is enough — no change to the hover handlers. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .table-action-hover-btn.slm-qa-open {
    display: inline-flex;
}

/* ===== [opd-table-v3-surface] BEGIN — the seven surface gaps found auditing the finished
   columns against the reference. Everything here is chrome around the rows; no column content
   changes. ===== */

/* 1 — ROW SEPARATOR. The reference divides rows with `1px #DDE3EC`; this table had none, and read
   as separated only because the band above each row was tinted (see 4). The rule goes on the CELLS,
   not the <tr>: this datatable does not collapse its borders, so a border on the row itself is not
   painted. Bottom edge of the DETAIL row = the boundary between one patient and the next, because
   each visual row is a summary band plus the detail row beneath it. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row > .kt-datatable__cell {
    border-bottom: 1px solid #dde3ec;
}

/* ⚠ AND NOTHING BETWEEN THE BAND AND THE ROW BENEATH IT. The diagnosis band and the detail row
   are two <tr>s but ONE row to the reader, so a rule there splits a patient in half. The datatable
   draws `1px solid #d4d4d4` under every body row; it is cancelled for the band only. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-summary-row,
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-summary-row > .kt-datatable__cell {
    border-bottom: 0 !important;
}

/* An empty band is not a row — the reference only draws this strip when there are diagnosis chips
   to put in it (`sc-if hasDx`). Without this, every patient with no diagnosis recorded still got a
   12px strip above them and the table read as double-spaced.
   ⚠ THE `:not(:has(.table-action-hover-btn))` GUARD IS LOAD-BEARING. The converted tabs move the
   action cluster down into the detail row, but Follow Up still keeps its cluster in the band —
   hiding the band unconditionally would take that tab's row actions with it.

   🔥 AND SO IS `:not(:has(.slm-deleted-by))`, for the same reason and at a real cost when it was
   missing: the band is also where "Deleted by <user> On <time>" is written, so a CANCELLED VISIT
   WITH NO DIAGNOSIS RECORDED matched both of the other two :not()s and lost the only record of
   who cancelled it and when. A cancelled visit that happened to carry a diagnosis kept the line,
   which is what made the loss look intermittent rather than structural. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-summary-row:not(:has(.slm-dx-line)):not(:has(.table-action-hover-btn)):not(:has(.slm-deleted-by)) {
    display: none;
}

/* With no diagnosis chips beside it the line was stranded at the far right of an otherwise empty
   strip, reading as though it belonged to the Billing column rather than to the patient. The
   diagnosis `.col` is `flex: 1` and was holding all that space for nothing, so it is collapsed
   when there is nothing in it and the line starts at the row's own left edge — where the old
   design had it, and where the eye is already going. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-summary-row:not(:has(.slm-dx-line)) .row > .col {
    flex: 0 0 auto;
}

/* 2 + 4 — ZEBRA, AND THE BAND JOINS THE ROW. The band was painted #EEF3F9, a blue-grey that made
   every patient read as two stacked strips instead of one row. In the reference the band has no
   background of its own — it is part of the row and carries only the diagnosis pills.
   ⚠ KTDatatable puts --even/--odd ONLY on the detail row; the band is inserted by
   scheduleSummaryRow and carries neither. `:has(+ ...)` is what lets the band read the stripe state
   off the row below it, so the pair always tints as one. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row.kt-datatable__row--even,
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-summary-row:has(+ .schedule-detail-row.kt-datatable__row--even) {
    background-color: #ffffff;
}
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row.kt-datatable__row--odd,
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-summary-row:has(+ .schedule-detail-row.kt-datatable__row--odd) {
    background-color: #fcfdfe;
}

/* 3 — STATUS STRIPE. A single 3px bar down the left edge of the whole row.
   ⚠ PAINTED AS THE ROW'S OWN BACKGROUND, NOT AS A BORDER ON THE FIRST CELL. The first cut used
   `border-left` on both rows' first cell and produced TWO visible segments with a 4px break between
   them: the band's cell is `display: flex`, which takes it out of table layout so it no longer
   stretches to its row's height (8px of cell in a 12px row). A row background always fills its row,
   so a gradient gives one unbroken bar and needs nothing from the cells.
   Teal is the waiting state. The reference varies this per status (violet in-room, green done, red
   emergency); those states live on the tabs whose columns were converted last, so one colour is the
   honest thing to draw until each tab's state is wired through. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-summary-row,
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row {
    background-image: linear-gradient(#0a9184, #0a9184);
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 3px 100%;
}

/* 5 — THE TABLE CARD. The reference is one white card: `1px #E5E7EB`, radius 14, and a 1px
   shadow. Only the tbody's bottom radius existed, so the table had no outline at all.
   ⚠ NO `overflow: hidden` HERE, however much the corners want it. The diagnosis "+N" panel and the
   row-action menu are absolutely positioned children of the body and BOTH escape this box; clipping
   it would cut them off exactly as the `.w-100` rule did before it was fixed. The corners are
   rounded on the head row and the body instead, which needs no clipping. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .kt-datatable.custom-kt-datatable {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
}
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .kt-datatable.custom-kt-datatable > .kt-datatable__table > .kt-datatable__head .kt-datatable__row {
    border-radius: 14px 14px 0 0;
}
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .kt-datatable.custom-kt-datatable > .kt-datatable__table > .kt-datatable__body {
    border-radius: 0 0 14px 14px;
}

/* 8 — THE LAST CELL WAS NOT A TABLE CELL. A pre-v3 rule (:10407) makes `.statusColumn`
   `display: flex; align-items: flex-end` so the old status badge could sit bottom-centred. A <td>
   that is `display: flex` LEAVES TABLE LAYOUT: it stops stretching to the row's height — 51.8px
   inside a 103.5px row — so its `border-bottom` drew a stray line 48px above the real row edge,
   and every row's separator appeared to stop short of the Next Step column. It also pinned the
   action button to the bottom of the cell where the reference top-aligns it with the patient name.
   Putting it back to `table-cell` fixes the ragged separator and the alignment together; the
   button's own wrapper already handles its layout, and Follow Up's recall dropdown carries its own
   `d-flex` so it is unaffected. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .statusColumn {
    display: table-cell;
    vertical-align: top;
}

/* 9 — COLUMNS UNDER THEIR HEADINGS. Every <tr> in this datatable is its own table
   (`display:table` on the row, `display:block` on table/thead/tbody), so rows share no column grid
   and each re-flows from its own content. `fixed` makes each row honour the widths
   slmSyncColumnWidths copies down from the header instead of re-measuring its contents; without it
   a wide cell -- the referral block, a long visit reason -- widens that column for that row alone
   and everything after it slides sideways. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .kt-datatable__row {
    table-layout: fixed;
}

/* 10 — HEADINGS OVER THEIR DATA. The reference sets `text-align` on exactly two of its column
   headings — centre on No., right on Billing — and leaves the rest at their default left. This
   table had Visit Timeline centred and Next Step right, so those two headings sat 38px and 56px to
   the right of the data underneath them.
   ⚠ MEASURE THE INK, NOT THE BOX. Cell edges and wrapper spans were already aligned to within 3px
   the whole time, which is why this read as fixed; what is off is where the TEXT lands inside the
   cell. A centred heading over a left-starting block is misaligned even though both boxes agree.
   Billing stays right: its heading lines up with the amount column, and the "Billed" label sitting
   left of it in a space-between row is exactly what the reference does.
   Next Step is left like the rest, and the BUTTON comes to the label rather than the other way
   round — see below. */
/* Keyed on `.statusColumn`, not `.slm-col-nextstep`: Follow Up's Next Step column keeps its
   recall dropdown instead of an action button and so never took the v3 class, but its heading
   was centred over a left-starting control and sat 24px right of it. Both classes live on the
   same cell everywhere else, so this covers all six tabs with one rule. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .kt-datatable__head .kt-datatable__row > .statusColumn {
    text-align: left !important;
}
/* ⚠ THE HEADING AND THE BUTTON ARE BOTH PUT ON THE CELL'S OWN LEFT INSET, NOT ON A MEASURED
   OFFSET. Every other column in this table lines up that way: heading ink, body ink and
   `cell left + padding-left` all agree to within 2px (patient 149/149/152, doctor 662/662/664).
   Next Step was the exception at both ends — the base nudges this heading's span with
   `position: relative; left: 20px`, and the cell's own wrapper right-aligned the button — so the
   label sat 20px right of every other heading and the button sat 20px LEFT of the label. Zeroing
   the nudge and starting the wrapper puts both on the same inset by construction, so they cannot
   drift apart at another viewport width.
   Do not express this as a pixel offset on one side: the two are only guaranteed to agree because
   they now resolve from the same box. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .kt-datatable__head .kt-datatable__row > .statusColumn > span {
    left: 0;
}

/* 11 — THE DIAGNOSIS BAND STARTS WHERE THE ROW STARTS. The reference opens the band at the same
   left inset as the row grid beneath it (`padding-left: 21px` on both), so the first pill sits just
   left of the queue number and the whole row reads off one left edge. The datatable pads a row's
   first cell by 25px and the band inherited 27px, which pushed the pills 29px to the RIGHT of the
   number chip and left the band looking indented from its own row.

   ZERO, NOT 4px, AND THE DIFFERENCE IS THE POINT. The band and the row grid below it take their
   inset from the same place now — [opd-v3-row-inset] pads the ROW — so whatever this cell adds on
   top is measured from the No. TRACK's left edge, not the card's. The reference adds nothing: its
   `.dxline` and its row grid carry the same `padding-left: 21px`, which puts the first pill on the
   track's edge with the number chip 4px inside it, the chip being centred in a 42px track. An
   earlier cut used 4px here to sit the pills flush with the CHIP instead; that reads fine on its
   own, but it is not what the reference draws.
   ⚠ DO NOT RE-ADD PADDING HERE TO NUDGE THE BAND. The row owns the inset now, and changing it
   there is what keeps the band, the header and the cells on one edge. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-summary-row > .kt-datatable__cell:first-child {
    padding-left: 0 !important;
}

/* ===== [opd-table-v3-surface] END ===== */

/* ===== [opd-table-v3-columns] END ===== */

/* ===== [opd-v3-chrome-tune] BEGIN — two colour values left over from the pre-v3 palette. ===== */

/* 6 — The notch radius. The page BACKDROP that used to be declared here has been REMOVED, not
   retuned.

   🔥 IT NEVER WORKED. This block set `#kt_content.slm-ui-theme-v1 { background: #eff8f6 }`, but
   slm-theme-v1.css declares the identical selector — an exact specificity tie — and webpack.mix.js
   concatenates style.css at slot 7 and slm-theme-v1.css at slot 16, so the theme won on source
   order and the page stayed #EFF5F3 for the whole life of this rule. Verified in the built
   bundle: `#eff8f6` appeared first and `#eff5f3` last, and the rendered page measured #EFF5F3.
   Re-declaring it here at any value would be dead again. The backdrop now lives ONLY in
   slm-theme-v1.css (~:12104) and is #F3F6F8, the dark reference's <main> colour.
   ⚠ General rule this is an instance of: a plain-tie override CANNOT be written in style.css
   against slm-theme-v1.css. Either out-specify it, or edit the theme.
   The 18px `border-top-left-radius` that used to sit here has been REMOVED for the same reason:
   [content-panel-round] in slm-theme-v1.css declares the identical selector, so this one lost the
   tie on source order too and had not been the rendered value since that block landed. The notch
   radius now lives ONLY in the theme (~:22391) and is 14px, matching the queue table's corner. */

/* 7 — The active view-toggle in the OPD header still filled with #0EB8A9, the pre-v3 teal. The v3
   chrome, the active tab, the Next Step button and the filter focus ring are all #0A9184 — the
   same stale value already corrected on the referral Edit pill.

   🔥 `color` IS NOT REDUNDANT WITH THE THEME'S — the label was rendering #344054 ON the teal fill,
   near-unreadable. The theme does set white on this button (slm-theme-v1.css:12757) but only at
   (0,4,0), and the v3 RESTING rule above — `.slm-page.slm-page-opd .slm-section-toolbar
   .calendar-btn-group .btn { color: #344054 }` — is (0,5,0), so the resting ink out-ranked the
   active state's and the button never turned white. Restated here at (0,6,0).
   ⚠ Same trap for any other state on this button: the theme's `:hover` arm is (0,4,0) and loses to
   that resting rule too, which is why hovering an inactive Calendar/list button tints its
   background but not its label. The svg needs no rule — it is `stroke: currentColor`. */
.slm-page:is(.slm-page-opd, .slm-page-ipd, .slm-page-calendar-booking) .slm-section-toolbar .calendar-btn-group .btn.active {
    background: #0a9184;
    border-color: #0a9184;
    color: #ffffff;
}

/* The pager's page-size pill was the last thing still filled with the pre-v3 #0EB8A9. Overridden
   by value rather than by tracking down the rule that sets it: several selectors paint this button
   and the winning one is not the obvious `.btn-light`. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .kt-datatable__pager .kt-datatable__pager-size .btn.dropdown-toggle {
    /* !important because the rule that paints it does the same; the selector already matches. */
    background-color: #0a9184 !important;
    border-color: #0a9184 !important;
}

/* ===== [opd-v3-chrome-tune] END ===== */

/* ===== [opd-v3-last-row] BEGIN — the doubled rule under the LAST row. =====
   The datatable's own <table class="table"> carries a `border-bottom: 1px #E5E7EB`. On every
   row but the last it is invisible; under the last row it lands 3px below that row's own
   separator, in a different grey (#E5E7EB against #DDE3EC) and running wider than the row's
   inset (95—1516 against 142—1187), so the list closed with two mismatched lines.
   The per-row separator is the one that belongs to the design, so the table's is dropped and the
   last row closes the same way as every row above it. ===== */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .kt-datatable__table {
    border-bottom: 0;
}
/* ===== [opd-v3-last-row] END ===== */

/* ===== [opd-v3-row-inset] BEGIN — the left gutter the reference opens every row with. =====
   The reference pads the column header, the diagnosis line and each row's grid alike
   (`padding: ... 18px ... 21px`), so the No. track, the diagnosis pills and every body cell
   start 21px in from the card's inner edge and stop 18px short of the right one, with the 3px
   token accent sitting in the gutter at the row's own edge. Ours had no gutter: content opened
   1.6px from the card edge, which is what left the diagnosis pills, the number chip and the
   first column crowding the table's border.

   THE INSET GOES ON THE ROW, NOT THE CELLS. The cells carry KTDatatable's fixed px widths, so
   padding added there would eat a 42px token track that is already exactly a 34px chip plus its
   4px either side. On the row it comes out of the table's width instead: rows are
   `box-sizing: border-box`, so `table-layout: fixed` redistributes the 37px proportionally over
   the columns, and head and body shrink by the same fraction because both take the same padding.

   ⚠ `border-collapse: separate` IS LOAD-BEARING HERE, NOT TIDYING. The head row computes to
   `border-collapse: collapse`, and in the collapsing border model a table's own padding is
   ignored (CSS 2.1 §17.6.2). The body rows were already `separate` and took the padding, so
   without this line the rows moved in 20px and the header stayed where it was. `border-spacing: 0`
   then drops the 1.6px the head and body cells were already out by — the head collapsed its
   spacing away and the body did not — and keeps the inset at a flat 21px instead of 21px plus a
   device-pixel-rounded gap that changes with the display's DPR.

   The token accent is a `background-size: 3px 100%` gradient on the row and the row has no left
   border, so its padding box and border box share a left edge and the bar stays at the card's
   edge where the reference draws it — do not "fix" that with `background-origin`. ===== */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .kt-datatable__head .kt-datatable__row,
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .kt-datatable__body .kt-datatable__row {
    border-collapse: separate;
    border-spacing: 0;
    /* 20/17 rather than the reference's 21/18: the card and the table each contribute a border of
       their own, so content lands 21.6px from the card's edge and 18.6px short of its right. */
    padding-left: 20px;
    padding-right: 17px;
}
/* ===== [opd-v3-row-inset] END ===== */


/* ===== [ipd-toolbar-v3] BEGIN — the two toolbar controls the reference adds or recolours. ===== */

/* ---- "New Admission", the toolbar's one filled control. ----
   `.btn-brand` gives it the legacy Metronic brand BLUE (#1B78C5) and a 3.25px radius, which is
   the pre-theme look — on a page whose every other accent is #0A9184 it reads as a control
   borrowed from another product. Reshaped to the reference's primary: accent fill, 10px radius,
   the same 36px height as the outline buttons beside it.
   The reference draws this navy because its whole chrome is navy; ours is the app's accent, the
   same value the active tab and the add-patient control already use. */
.slm-page.slm-page-ipd .slm-section-toolbar .btn.btn-brand.slm-btn-new-admission {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 36px;
    padding: 0 15px;
    border-radius: 10px;
    background: #0a9184;
    border: 1px solid #0a9184;
    color: #ffffff;
    font-size: 12.5px;
    font-weight: 700;
    box-shadow: none;
}
.slm-page.slm-page-ipd .slm-section-toolbar .btn.btn-brand.slm-btn-new-admission:hover {
    background: #0b7f74;
    border-color: #0b7f74;
    color: #ffffff;
}
.slm-page.slm-page-ipd .slm-section-toolbar .btn.btn-brand.slm-btn-new-admission svg {
    flex: none;
}

/* ---- The view toggle was filling with the PRE-V3 TEAL, #0EB8A9. ----
   [opd-v3-chrome-tune] above retires that value — it is the ground the chrome used before it
   went navy, and #0A9184 is the accent that replaced it — but its rule never won on IPD, so the
   page carried two different teals: #0EB8A9 on this toggle and #0A9184 on the active tab three
   inches below it, side by side with the New Admission button above.

   🔥 THE RULE THAT BEATS IT IS AN EXACT SPECIFICITY TIE, WON ON SOURCE ORDER.
   `.slm-section-toolbar .calendar-btn-group .btn.btn-outline-brand.btn-sm.btn-icon.active`
   in slm-theme-v1.css scores (0,7,0), and webpack.mix.js concatenates that file AFTER
   style.css — so any (0,7,0) chain written here loses to it no matter how specific it looks.
   The first cut of this rule was exactly (0,7,0) and silently did nothing; the measurement
   that found it had to enumerate every matching rule and compare specificities, because
   `getComputedStyle` on these buttons LAGS — they carry `transition: all .16s`, so a reading
   taken right after a change returns the value being transitioned FROM.
   `.btn-icon` and `.go-to-schedule` take this to (0,9,0), which wins structurally. Both are on
   the button in the blade. Do not trim them back.
   ⚠ Two other rules paint this button and are NOT the problem, so do not chase them:
   Bootstrap's `.btn-outline-brand:not(:disabled):not(.disabled).active` is (0,4,0), and
   `.slm-page-ipd … .btn.active.go-to-schedule` in the theme (~:11892) is (0,5,0) at #0E72B8 —
   a third colour, also beaten by this. */
.slm-page.slm-page-ipd .slm-section-toolbar .calendar-btn-group .btn.btn-outline-brand.btn-icon.active.go-to-schedule,
.slm-page.slm-page-ipd .slm-section-toolbar .calendar-btn-group .btn.btn-outline-brand.btn-icon.active.go-to-schedule:hover {
    background: #0a9184;
    border-color: #0a9184;
    color: #ffffff;
    box-shadow: none;
}

/* ===== [ipd-toolbar-v3] END ===== */

/* The feedback control is a Bootstrap dropdown, so it brings a wrapper and an inner <span>
   between `.frontdesk-icon` and the icon. Both are laid out as plain inline boxes so the
   chip inside them is what sets the size -- otherwise the wrapper keeps its own 34px and
   the chip sits in a box half again too big. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .schedule-detail-row .icon-container .frontdesk-icon.feedback-dropdown,
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .schedule-detail-row .icon-container .frontdesk-icon.feedback-dropdown > span {
    display: inline-flex;
    align-items: center;
    width: auto !important;
    height: auto !important;
    min-width: 0;
    line-height: 1;
}
/* ===== [ipd-identity-pairs] BEGIN — the space between a caption and its number. =====

   🔥 "UHID" AND "SS864" WERE TOUCHING, and so were "IPD NO" and the admission number.
   `.caseNo` is `display: flex`, and the separator was a plain trailing space inside the
   caption span — which a flex container collapses away, so it rendered as "UHIDSS864".
   OPD escapes this ONLY because its markup writes `UHID&nbsp;`: a non-breaking space
   survives the collapse. That is a real fix but an invisible one, and it has to be
   remembered at every call site that ever builds one of these pairs.

   The reference does it properly — its caption/value pair is
   `display:flex; align-items:baseline; gap:4px` — so the spacing is a property of the
   PAIR rather than a character hidden in a string. The IPD builders now emit the captions
   with no trailing space at all and this supplies the 4px.

   ⚠ SCOPED TO IPD, and not out of caution: OPD still emits `&nbsp;`, so widening this
   would give that page a non-breaking space AND 4px. Widen it only if the `&nbsp;` in
   datatable-user-list.js goes at the same time.
   `tabular-nums` is the reference's too — it keeps a column of UHIDs from jittering as the
   digits change. Harmless on the caption, which is letters. ===== */
.slm-page.slm-page-ipd .slm-section-table .slm-ctrl-patient-identity .kt-user-card-v2__desc.caseNo,
.slm-page.slm-page-ipd .slm-section-table .slm-ctrl-patient-identity .kt-user-card-v2__desc.admissionNo {
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-variant-numeric: tabular-nums;
}

/* ===== [ipd-identity-pairs] END ===== */


/* ===== [ref-line-truncate] BEGIN — the reference line stays on one line.

   Doctor / Reference now carries the reference grid's 1.25fr (196px against the 282px it used
   to take, which was 86px it had no content for). At that width "Ref. by DR. AARADHYA" no
   longer fits, and because the line is a nowrap flex row whose items may shrink below their
   content, the SPANS were squeezed and the text broke inside them — "Ref." over "by" over the
   name, with the referral count stranded at the right edge.

   UPDATE: the column has since been widened to ~255px so the referring doctor's full name is
   readable rather than clipped — see [ref-column-widened] in datatable-user-list.js for where
   those points came from. This block STAYS: the ellipsis is now the safety net for a name
   longer than the widest one in the data, and the `min-width: 0` below is what stops such a
   name breaking the line apart again.

   The reference solves the same problem the same way: its doctor name carries
   `white-space:nowrap; overflow:hidden; text-overflow:ellipsis` and the reference row carries
   `min-width:0`. So the icon, the "Ref. by" label and the count hold their size, and the NAME is
   the one thing that gives — it already has the full value in its click handler and the count
   badge already carries a tooltip naming the referrer, so nothing is lost by clipping it.

   ⚠ `min-width: 0` ON THE CELL AND THE LINE IS LOAD-BEARING. A flex item's default
   `min-width: auto` refuses to shrink below its content, so an ellipsis on the name alone does
   nothing — the line simply overflows the cell instead. ===== */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .schedule-detail-row > .kt-datatable__cell .slm-info-doctor-name {
    display: block;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .schedule-detail-row .slm-ref-line,
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .schedule-detail-row .slm-ref-line2 {
    min-width: 0;
    flex-wrap: nowrap;
}
/* Everything except the name holds its width. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .schedule-detail-row .slm-ref-lead-icon,
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .schedule-detail-row .slm-ref-phone-icon,
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .schedule-detail-row .slm-info-ref-by,
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .schedule-detail-row .slm-ref-count,
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .schedule-detail-row .slm-ref-new,
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .schedule-detail-row .slm-ref-edit {
    flex: none;
    white-space: nowrap;
}
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .schedule-detail-row .slm-ref-name,
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .schedule-detail-row .slm-ref-phone-wrap {
    min-width: 0;
    flex: 0 1 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* ===== [ref-line-truncate] END ===== */
/* ===== [opd-filter-bar-slot] BEGIN — the two controls Follow Up shows on the bar. ==========

   The reference's Follow Up filter row is Followup Date | Doctor | Followup For | All statuses |
   Clear. This app's last two are the Visit Reason select and the follow-up Status select, and both
   live in the "More" panel — which the reference's own rule hides on Follow Up. They were behind a
   button that is not there.
   The blade's slmFilterBar mover parks the two `<div class="col-12">` wrappers in this slot while
   that tab is open and puts them back afterwards; what is left here is undoing the grid column they
   were written as, so they sit in the bar's flex row instead of each claiming a full line.
   ⚠ THE MOVED NODE IS THE LIVE CONTROL, not a copy — see the markup comment in index.blade.php. */
/* The slot itself is only a position marker — the wrappers are inserted BEFORE it, as direct
   children of the form. ⚠ That is not a detail: every chip rule above is written
   `.slm-section-filter > <field>`, and a real container in between would break all of them, which
   is exactly what the first version of this did. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-filter .slm-filter-bar-slot {
    display: none;
}
/* On the bar the wrapper drops `.col-12` (the mover swaps the classes) and becomes a field like
   the other four: content-width, capped so a long visit-reason list cannot shove Clear off the
   row, and the value ellipsizing past that. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-filter > .slm-ctrl-bar-select {
    flex: 0 0 auto;
    max-width: 200px;
}
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-filter > .slm-ctrl-bar-select > .form-group {
    margin-bottom: 0;
}
/* ===== [opd-filter-bar-slot] END ===== */

/* ===== [billing-nextstep-gap] BEGIN — the 26px spacer column, given back as padding.

   The reference grid puts a dedicated 26px track between Billing and Next Step. With the 14px
   grid gap on each side of it that is 54px of clear air, and it is why Billing there reads as a
   column of its own rather than as part of the Next Step cell.

   ⚠ THIS CANNOT BE DONE BY MOVING COLUMN WIDTHS, which is the obvious attempt. Billing is
   right-aligned to its cell and the Next Step button is left-aligned to its own, so the distance
   between them is `billing padding-right + nextstep padding-left` and that is INVARIANT of how
   wide either column is — widen one and both edges move together. So the spacer is folded into
   Billing's WIDTH (in datatable-user-list.js, where Billing carries the reference's 1.05fr plus
   the 26px track) and handed back HERE as padding. 44px puts the figures 54px clear of the
   button, and puts the right edge of the figures exactly where the reference has it.

   ⚠ OPD ONLY, and the scope is the point: IPD has no Next Step column — Billing is its LAST
   column — so there is no boundary here to open. Applied there it only pushed the amounts in
   from the card edge, changing a column that was already right. ===== */
.slm-page.slm-page-opd .slm-section-table .schedule-detail-row > .kt-datatable__cell.slm-col-billing {
    padding-right: 44px !important;
}
/* 🔥 THE HEADING WAS NOT MOVING WITH THE FIGURES. This rule shipped alongside the row rule above
   and looked symmetrical, but it never applied: the head cell's padding is set by
   `:is(.slm-page-opd, .slm-page-ipd) .slm-section-table .opd-frontdesk-table-container
   .kt-datatable.kt-datatable--default > .kt-datatable__table > .kt-datatable__head
   .kt-datatable__row > .kt-datatable__cell` (:0.65rem 0.75rem !important, [opd-table-v3]) — a
   SHORTHAND, so it rewrites padding-right, and (0,9,0) against this rule's (0,7,0), so it wins.
   Measured on Waiting: the ₹ figures ended at x=1230 and the word BILLING at x=1264, so the
   heading sat 34px to the right of the column it names, on all six tabs.
   Fixed by matching that selector's own structure rather than by adding weight for its own sake —
   the shorthand has to be beaten where it is written, and the head is genuinely a different
   element from the row. */
.slm-page.slm-page-opd .slm-section-table .opd-frontdesk-table-container .kt-datatable.kt-datatable--default > .kt-datatable__table > .kt-datatable__head .kt-datatable__row > .kt-datatable__cell.slm-col-billing {
    padding-right: 44px !important;
}
/* ===== [billing-nextstep-gap] END ===== */

/* ===== [ipd-panel-fields] BEGIN — separation between the More panel's stacked fields. =====

   🔥 THE CAPTIONS WERE CLOSER TO THE BOX ABOVE THEM THAN TO THEIR OWN, which is what made
   them read as touching the wrong input. Measured: 6px from a caption to its own control,
   0px from the control above it to that caption. A label that is nearer the previous field
   than its own is worse than one that is merely tight.

   The 0 comes from `margin: 0` on the shared panel-field recipe, which is correct for OPD —
   its panel has exactly ONE such field, so a bottom margin there would do nothing but push
   the checkbox list down. IPD stacks four, so they collide. The reference separates its
   groups with `gap: 12px` against the 6px inside one, and that 2:1 ratio is the whole point:
   it is what tells you which box a caption belongs to.

   ⚠ NOT `gap` ON THE CONTAINER, though that is what the reference uses. These fields are in
   nested Bootstrap `.row > .col-12` wrappers with negative margins, not a flex or grid
   track, so a container gap does not apply to them. The margin goes on the fields.
   ⚠ (0,5,0) to beat the shared recipe's (0,4,0) `margin: 0`. Scoped to IPD so OPD's single
   field keeps the flush spacing its layout was tuned for.
   Bed No. carries `.mb-0` in the blade — Bootstrap's `!important` utility — so the last
   field opts itself out and nothing pushes it into the hairline below. ===== */
.slm-page.slm-page-ipd .slm-section-filter .slm-filter-dropdown :is(.slm-ctrl-select-admission-reason, .slm-ctrl-select-room-category, .slm-ctrl-select-room, .slm-ctrl-select-bed) {
    margin-bottom: 12px;
}

/* Laboratory hits the same case with two fields instead of four: its panel stacks Doctor over
   Laboratory, so without this the Doctor box and the Laboratory caption touch at 0px exactly as
   IPD's did. Laboratory carries `.mb-0` in the blade and opts itself out, so only the first field
   is named — the same shape as the rule above, where Bed No. is the one left out.
   Kept as a separate rule rather than a branch of the IPD `:is()` above, because the page scope
   differs (`.slm-page-laboratory`, not `.slm-page-ipd`) and folding both into one selector would
   let either page's fields match on the other's scope. */
.slm-page.slm-page-laboratory .slm-section-filter .slm-filter-dropdown .slm-ctrl-select-doctor {
    margin-bottom: 12px;
}

/* ===== [ipd-panel-fields] END ===== */

/* ===== [ipd-table-v3] BEGIN — the four IPD queue tables, cut to the IPD Reception reference
   (solomo360 - IPD Reception.dc.html). 2026-08-26.

   MOST OF THE APPEARANCE IS NOT IN THIS BLOCK. The card, the blue-grey head, the zebra, the
   row hover, the status stripe, the row inset, the patient-cell typography, the No. token,
   the chip strip, the Doctor/Reference lines, the Billing stack and the whole row-action rail
   all come from [opd-table-v3] and [opd-table-v3-columns] above, whose selectors were widened
   to `.slm-page:is(.slm-page-opd, .slm-page-ipd)` and given the four IPD table ids. IPD emits
   the same classes on purpose. What is left here is the three columns OPD does not have —
   Admitted For's emergency chip, Room, and the Admission/Discharge dates — plus the captions
   for IPD's own row actions.

   ⚠ SCOPED `.slm-page.slm-page-ipd`, WHICH IS THE SAME WEIGHT AS THE SHARED PREFIX.
   `.slm-page:is(.slm-page-opd, .slm-page-ipd)` is (0,2,0) and so is `.slm-page.slm-page-ipd`,
   so anything here that has to BEAT a shared rule needs a class more, not just a later
   position — style.css order is not a safe tiebreak against slm-theme-v1.css, which is
   concatenated after it. ===== */

/* ---- Patient: the name line. ----
   The reference hangs the admission-note and reminder marks off the NAME as two 17px rounded
   squares. They used to live in the Status cell, which the reference does not have. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .slm-name-line {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .slm-name-line > .kt-user-card-v2__name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .slm-name-flag {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    border-radius: 5px;
    /* The hairline every other chip in this row carries. Without it a pale fill on a white
       row is invisible and the glyph reads as floating rather than as a mark on the line. */
    border: 0.8px solid rgba(16, 24, 40, .09);
    /* ⚠ NOT DEAD STYLE — IT UNDOES A LEGACY `padding-left`. Both marks carry
       `.schedule-confirm`, whose pre-v3 rule (style.css:4206) is still
       `padding-left: 5px; font-size: 1.4rem; display: block; height: 25px` — the old status-cell
       icon box. This chip out-specifies the display/size, but nothing was answering the padding,
       so inside a 17px BORDER-BOX the note mark's content strip was 17 − 1.6 (border) − 5 = 10.4px
       starting 5.8px in. `justify-content: center` then centred the 11px glyph on THAT strip, not
       on the chip: 5.8px of space on the left against 0.8px on the right (measured, not derived),
       which is the off-centre
       icon that was reported (2026-08-27). With this it is 3px either side.
       The reminder mark never showed the fault only because `.slm-name-flag.reception-reminder`
       below happens to zero its padding for a different reason; that `padding: 0` is now redundant
       and is kept because the rest of that rule is not. */
    padding: 0;
    cursor: help;
}
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .slm-name-flag--note {
    background: #eef3ff;
    color: #1e40af;
}
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .slm-name-flag--reminder {
    background: #fef6ec;
    color: #b54708;
}
/* ⚠ THE REMINDER MARK IS ALSO A BUTTON. `.reception-reminder` opens the reminder panel, and
   the base gives that class the old icon-button box — 24px, a border and a background — which
   inside a 17px flex chip renders as a grey blob with the bell clipped. Only the box is
   reset; the class, and therefore the handler, is untouched. */
.slm-page:is(.slm-page-opd, .slm-page-ipd) .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table, #opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .slm-name-flag.reception-reminder {
    padding: 0;
    border: 0;
    min-width: 0;
    line-height: 1;
}


/* ---- The two meta lines must not wrap. ----
   IPD's identity line carries one field MORE than OPD's — IPD NO, between UHID and the
   sex/age group — so it is the line that runs out of room first, and a flex item's default
   `min-width: auto` lets it shrink and then break its own text. It read as
   "IPD" / "NO 25-" / "26/311" stacked inside a 193px box. Each field is pinned instead, and
   the line as a whole is allowed to overflow the cell rather than reflow inside it.
   The contact line gets the same treatment with one difference: the CITY is the field that
   gives — it takes an ellipsis, the way the reference does — while the phone number, which is
   meaningless truncated, is pinned. */
.slm-page.slm-page-ipd .slm-section-table :is(#opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .slm-ctrl-patient-identity,
.slm-page.slm-page-ipd .slm-section-table :is(#opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .slm-ctrl-patient-contact {
    flex-wrap: nowrap;
    min-width: 0;
}
.slm-page.slm-page-ipd .slm-section-table :is(#opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .slm-ctrl-patient-identity > * {
    flex: none;
    white-space: nowrap;
}
.slm-page.slm-page-ipd .slm-section-table :is(#opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .slm-ctrl-patient-contact > .kt-user-card-v2__desc {
    flex: none;
    white-space: nowrap;
}
/* The city is the second `__desc` on the line whenever there is a phone, and the only one
   when there is not; either way it is the last, and the last one is the one that gives. */
.slm-page.slm-page-ipd .slm-section-table :is(#opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .slm-ctrl-patient-contact > .kt-user-card-v2__desc:last-child {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* IPD NO is the reference's one accented identifier — `font-weight:700; color:#1E40AF` —
   against the neutral grey it uses for UHID. It is the number staff read a chart by. */
.slm-page.slm-page-ipd .slm-section-table :is(#ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .slm-ctrl-patient-identity .kt-user-card-v2__desc.admissionNo {
    font-weight: 700;
    color: #1e40af;
}
.slm-page.slm-page-ipd .slm-section-table :is(#ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .slm-ctrl-patient-identity .kt-user-card-v2__desc.admissionNo > .datatable-font-weight {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .04em;
    color: #98a2b3;
}

/* ---- The chips. One recipe, four tones — the reference draws EMERGENCY, MLC and every
   discharge type as the same 9.5px/800 rounded label and varies only the pair of colours. */
.slm-page.slm-page-ipd .slm-section-table :is(#opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .slm-chip {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .03em;
    line-height: 1.3;
    white-space: nowrap;
    cursor: help;
}
.slm-page.slm-page-ipd .slm-section-table :is(#opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .slm-chip--emergency,
.slm-page.slm-page-ipd .slm-section-table :is(#opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .slm-chip--dt-bad {
    background: #fef3f2;
    color: #b42318;
}
.slm-page.slm-page-ipd .slm-section-table :is(#ipd_calendar_discharged_table) .slm-chip--dt-ok {
    background: #ecfdf3;
    color: #067a5e;
}
.slm-page.slm-page-ipd .slm-section-table :is(#ipd_calendar_discharged_table) .slm-chip--dt-warn {
    background: #fffaeb;
    color: #b54708;
}
.slm-page.slm-page-ipd .slm-section-table :is(#ipd_calendar_discharged_table) .slm-chip--dt-info {
    background: #eef3ff;
    color: #1e40af;
}

/* ---- Admitted For. The reason at the reference's 12.5px/600 #344054, with the EMERGENCY
   chip beneath it. The cell was drawing `kt-font-bold` at the datatable's 13px near-black,
   which read heavier than the patient's own name beside it. ---- */
.slm-page.slm-page-ipd .slm-section-table :is(#opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .slm-col-visitfor {
    vertical-align: top;
}
.slm-page.slm-page-ipd .slm-section-table :is(#opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .slm-col-visitfor > span {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}
.slm-page.slm-page-ipd .slm-section-table :is(#opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .slm-info-admitfor {
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.25;
    color: #344054;
}

/* ---- Room. Category over "room · bed", the reference's two-line block. ---- */
.slm-page.slm-page-ipd .slm-section-table :is(#opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .slm-col-ipdroom {
    vertical-align: top;
}
.slm-page.slm-page-ipd .slm-section-table :is(#opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .slm-room-cat {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
    color: #101828;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.slm-page.slm-page-ipd .slm-section-table :is(#opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .slm-room-line {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 5px;
    font-size: 11.5px;
    line-height: 1.2;
    color: #475467;
    white-space: nowrap;
}
.slm-page.slm-page-ipd .slm-section-table :is(#opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .slm-room-no {
    font-weight: 600;
}
/* The same 1px/11px hairline the identity line uses between fields. */
.slm-page.slm-page-ipd .slm-section-table :is(#opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .slm-room-sep {
    flex: none;
    width: 1px;
    height: 11px;
    background: #e5e7eb;
}
.slm-page.slm-page-ipd .slm-section-table :is(#opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .slm-room-none {
    font-size: 12px;
    font-style: italic;
    color: #98a2b3;
}

/* ---- Admission / Discharge. Two stamps, then the stay, then the discharge-type chip.
   ⚠ THE ARROW COLOURS ARE THE COLUMN'S ONLY STATE SIGNAL, so they are not decoration: the
   reference paints the admission arrow green and gives the discharge arrow the row's own
   discharge colour — near-black once it has happened, a pale grey while the patient is still
   in. That pale grey is what makes "In hospital" read as a placeholder rather than a date. */
.slm-page.slm-page-ipd .slm-section-table :is(#opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .slm-col-ipddates {
    vertical-align: top;
}
.slm-page.slm-page-ipd .slm-section-table :is(#opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .slm-col-ipddates > span {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}
.slm-page.slm-page-ipd .slm-section-table :is(#opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .slm-ipddate {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: #101828;
}
.slm-page.slm-page-ipd .slm-section-table :is(#opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .slm-ipddate > svg {
    flex: none;
}
.slm-page.slm-page-ipd .slm-section-table :is(#opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .slm-ipddate.is-in > svg {
    color: #12b76a;
}
.slm-page.slm-page-ipd .slm-section-table :is(#opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .slm-ipddate.is-in .slm-ipddate-t {
    color: #667085;
}
.slm-page.slm-page-ipd .slm-section-table :is(#opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .slm-ipddate.is-out .slm-ipddate-t {
    color: #98a2b3;
}
/* Still in hospital: the whole line goes to the reference's #B6BCC6, arrow included. */
.slm-page.slm-page-ipd .slm-section-table :is(#opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .slm-ipddate.is-open,
.slm-page.slm-page-ipd .slm-section-table :is(#opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .slm-ipddate.is-open > svg {
    color: #b6bcc6;
}
.slm-page.slm-page-ipd .slm-section-table :is(#opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .slm-ipdstay {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: #98a2b3;
}
.slm-page.slm-page-ipd .slm-section-table :is(#opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .slm-ipdstay > svg {
    flex: none;
}
/* A stay past a week. The reference's own threshold and its own amber -- the only mark on the row
   that says an admission is running long, so it is the one state this quiet grey line breaks for.
   Written by slmIpdDatesCell, which is also where the seven days is decided. */
.slm-page.slm-page-ipd .slm-section-table :is(#opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .slm-ipdstay.is-warn {
    color: #b54708;
}
/* ⚠ THE STAY FIGURE IS WRITTEN BY calculateTimeDifference, WHICH SETS AN INLINE COLOUR.
   `$(this).find(".timeDifferenceResultColumn").text(waitingTime).css("color", color)` puts
   #1BC5BD on the element itself, and an inline style beats any rule here. The teal was the
   old queue's "waiting" tint and reads as a status on a line that is only a duration, so it
   is overridden with `!important` — the one place in this block that needs the flag. Removing
   the inline write in common-schedule.js would be the tidier fix, but that function also
   serves screens outside this pass. */
.slm-page.slm-page-ipd .slm-section-table :is(#opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .slm-ipdstay .timeDifferenceResultColumn {
    color: #98a2b3 !important;
    font-size: 11px;
    font-weight: 600;
}

/* ---- The row's status stripe. ----
   [opd-table-v3-surface] paints every row's left edge with one flat teal, and says in its own
   note that the reference varies it per status and that one colour was the honest thing to
   draw until each tab's state was wired through. On IPD the state IS the tab, so each table
   can take the reference's own value: navy for an admission in progress, amber for one that
   is only booked, grey once the patient has gone home.
   ⚠ IT IS A BACKGROUND GRADIENT, NOT A BORDER — see the note at [opd-table-v3-surface] 3 for
   why. Only the two colour stops change here; everything else is inherited. */
.slm-page.slm-page-ipd .slm-section-table :is(#ipd_calendar_admitted_table) .schedule-summary-row,
.slm-page.slm-page-ipd .slm-section-table :is(#ipd_calendar_admitted_table) .schedule-detail-row {
    background-image: linear-gradient(#1e40af, #1e40af);
}
.slm-page.slm-page-ipd .slm-section-table :is(#ipd_calendar_schedule_table, #opd_to_ipd_schedule_table) .schedule-summary-row,
.slm-page.slm-page-ipd .slm-section-table :is(#ipd_calendar_schedule_table, #opd_to_ipd_schedule_table) .schedule-detail-row {
    background-image: linear-gradient(#f79009, #f79009);
}
.slm-page.slm-page-ipd .slm-section-table :is(#ipd_calendar_discharged_table) .schedule-summary-row,
.slm-page.slm-page-ipd .slm-section-table :is(#ipd_calendar_discharged_table) .schedule-detail-row {
    background-image: linear-gradient(#98a2b3, #98a2b3);
}
/* An emergency admission overrides its tab's colour — the reference's #D92D20. Reached
   through `:has()` on the row's own emergency chip, so nothing has to be threaded from the
   data into a row class. One class heavier than the tab rules above, so it wins. */
.slm-page.slm-page-ipd .slm-section-table .schedule-detail-row:has(.slm-chip--emergency),
.slm-page.slm-page-ipd .slm-section-table .schedule-summary-row:has(+ .schedule-detail-row .slm-chip--emergency) {
    background-image: linear-gradient(#d92d20, #d92d20);
}

/* ---- Row-action captions, keyed to each IPD action's own class. ----
   Same mechanism as the OPD card's: the anchors are never touched, so no click handler can be
   disturbed, and `attr(title)` is not used because it would print a whole sentence under a
   60px button. The four that stay on the card are SLM_IPD_QA_PRIMARY in schedule_tables.js —
   change one there and its caption has to move with it. */
.slm-page.slm-page-ipd .slm-section-table :is(#opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .table-action-hover-btn .btn.btn-icon.change-room::after {
    content: "Change\00A0Room";
}
.slm-page.slm-page-ipd .slm-section-table :is(#opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .table-action-hover-btn .btn.btn-icon.change-room {
    /* Neutral with the rest of the card, matching OPD — see [rail-card-neutral]. */
    color: #475467;
}
.slm-page.slm-page-ipd .slm-section-table :is(#opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .table-action-hover-btn .btn.btn-icon.ipd_slip_label::after {
    content: "Print";
}
.slm-page.slm-page-ipd .slm-section-table :is(#opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .table-action-hover-btn .btn.btn-icon.ipd_print_label::after {
    content: "Label";
}
.slm-page.slm-page-ipd .slm-section-table :is(#opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .table-action-hover-btn .btn.btn-icon.ipd_print_multiple_label::after {
    content: "Sheet";
}
.slm-page.slm-page-ipd .slm-section-table :is(#opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .table-action-hover-btn .btn.btn-icon.generate-discharge-card::after {
    content: "Card";
}
.slm-page.slm-page-ipd .slm-section-table :is(#opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .table-action-hover-btn .btn.btn-icon.dischargePatientForm::after {
    content: "Checklist";
}
.slm-page.slm-page-ipd .slm-section-table :is(#opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .table-action-hover-btn .btn.btn-icon.ipd-schedule-table-bill-button::after,
.slm-page.slm-page-ipd .slm-section-table :is(#opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .table-action-hover-btn .btn.btn-icon.ipd-appointment-table-bill-button::after {
    content: "Billing";
}
.slm-page.slm-page-ipd .slm-section-table :is(#opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .table-action-hover-btn .btn.btn-icon.cancel-ipd-admission::after,
.slm-page.slm-page-ipd .slm-section-table :is(#opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .table-action-hover-btn .btn.btn-icon.IPDCancelAppointment::after {
    content: "Cancel";
}
.slm-page.slm-page-ipd .slm-section-table :is(#opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .table-action-hover-btn .btn.btn-icon.cancel-ipd-admission,
.slm-page.slm-page-ipd .slm-section-table :is(#opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .table-action-hover-btn .btn.btn-icon.IPDCancelAppointment {
    color: #b4453c;
}
.slm-page.slm-page-ipd .slm-section-table :is(#opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .table-action-hover-btn .btn.btn-icon.ipd-appointment-no-show::after {
    content: "No\00A0Show";
}
.slm-page.slm-page-ipd .slm-section-table :is(#opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .table-action-hover-btn .btn.btn-icon.editIPDPatientDetails::after {
    content: "Edit";
}
.slm-page.slm-page-ipd .slm-section-table :is(#opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .table-action-hover-btn .btn.btn-icon.appointment-confirmation::after {
    content: "Confirm";
}
/* A confirmed appointment: the check goes green, which is what the old cell's `.active`
   class meant when the toggle lived in the Status column. */
.slm-page.slm-page-ipd .slm-section-table :is(#ipd_calendar_schedule_table) .schedule-detail-row .table-action-hover-btn .btn.btn-icon.appointment-confirmation.active {
    color: #0b7a55;
}

/* ---- The status change, which is the top row of the More menu. ----
   The reference colours it by direction — a discharge is destructive-toned #B42318, moving a
   patient back to Admitted is #B54708, and admitting one is the accent #1E40AF — and does the
   same for the hover tint. These sit on the MENU rows rather than on the card, because
   SLM_IPD_QA_PRIMARY keeps none of them on the strip. */
.slm-page.slm-page-ipd .slm-section-table :is(#opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .table-action-hover-btn .slm-qa-menu .btn.btn-icon.slm-status-action--discharge {
    color: #b42318;
}
.slm-page.slm-page-ipd .slm-section-table :is(#opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .table-action-hover-btn .slm-qa-menu .btn.btn-icon.slm-status-action--discharge:hover {
    background: #fdefee;
}
.slm-page.slm-page-ipd .slm-section-table :is(#opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .table-action-hover-btn .slm-qa-menu .btn.btn-icon.slm-status-action--readmit {
    color: #b54708;
}
.slm-page.slm-page-ipd .slm-section-table :is(#opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .table-action-hover-btn .slm-qa-menu .btn.btn-icon.slm-status-action--admit,
.slm-page.slm-page-ipd .slm-section-table :is(#opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .table-action-hover-btn .slm-qa-menu .btn.btn-icon.slm-status-action--transfer {
    color: #1e40af;
}
/* isNoShow blocks the admission, the same guard the old badge carried as `disabled`. The
   handler is left bound so the reason can still be explained on click if that is ever wired;
   this is only the affordance. */
.slm-page.slm-page-ipd .slm-section-table :is(#ipd_calendar_schedule_table) .schedule-detail-row .table-action-hover-btn .slm-qa-menu .btn.btn-icon.slm-status-action.custom-disable {
    opacity: .45;
    pointer-events: none;
}

/* ---- Two leftovers from the pre-v3 band. ----
   `.icon-container` used to be sized `w-20` inside a flex row in the band; the shared rule
   that lays it out in the patient cell assumes it is a plain flex track, and Bootstrap's
   width utility would pin it to 20% of the cell. IPD no longer emits `w-20`, and this covers
   a cached bundle that still does. */
.slm-page.slm-page-ipd .slm-section-table :is(#opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .kt-user-card-v2__details > .icon-container.w-20 {
    width: auto !important;
}
/* The band's trailing separator rule. It closed a band that had content; the band has none
   now, and on the tabs where the band is still rendered (nothing hides it until its icons and
   actions have moved) a stray 1px line would sit above the row. */
.slm-page.slm-page-ipd .slm-section-table :is(#opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-summary-row .kt-separator {
    display: none;
}


/* ---- The More menu, opened downward. ----
   The shared rule anchors it `bottom: calc(100% + 6px)` — above the rail — which is right for
   a row low in a long list and off the top of the window for the first one. IPD's menu is the
   tall one (Discharge, Cancel, two prints, two registers, Billing…), so what it lost off the
   top was its first two items. The handler in schedule_tables.js measures the opened menu and
   adds `.slm-qa-down` when there is more room below; this is the anchor that class swaps to.
   ⚠ `bottom: auto` is not optional — without it the box is anchored on BOTH edges and
   stretches to fill the space between them. */
.slm-page.slm-page-ipd .slm-section-table :is(#opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .schedule-detail-row .table-action-hover-btn.slm-qa-down .slm-qa-menu {
    top: calc(100% + 6px);
    bottom: auto;
}

/* ---- The No. heading must not ellipsise itself. ----
   It rendered "N…" on the doctor board and "No." on Reception, off a 0.02px difference:
   KTDatatable writes the heading span's width inline from the column percentage, and the
   percentage is taken of `#schedule-wizard .kt-portlet__body`, which is a different width on
   each of the three pages. The span came out 21.68px against 21.7px of text.
   Nudging the column percentage would only move the failure to whichever page rounds against
   it next — and the OPD note above is explicit that the column total must not grow — so the
   truncation itself is switched off instead. Overflow is bounded by construction: the widest
   this label can be is three characters, the cell carries 4px of padding either side, and the
   Patient heading beside it opens on a 20px row inset. */
.slm-page.slm-page-ipd .slm-section-table :is(#opd_to_ipd_schedule_table, #ipd_calendar_schedule_table, #ipd_calendar_admitted_table, #ipd_calendar_discharged_table) .kt-datatable__head .kt-datatable__row > .kt-datatable__cell.slm-col-token > span {
    overflow: visible;
    text-overflow: clip;
}
/* ===== [ipd-table-v3] END ===== */

/* ===== [opd-followup-nextstep-v3] BEGIN — the Follow Up tab's NEXT STEP cell, rebuilt to the
   reference's shape: two 26px icon squares, then a response pill carrying a phone mark and a
   chevron, then the response menu as a titled popover.

   ⚠ THIS IS A RESTYLE, NOT A NEW CONTROL. Our six follow-up states already ARE the reference's
   response list — Booked / Call Again / No Answer / Declined / Other, plus our own unset "Follow
   Up" — so the pill only had to change shape, not meaning.

   ⚠ AND IT HAS TO STAY MARKUP-FREE. common-schedule.js:1047 answers a menu click with
   `lastClickedFollowUpButton.text(btntext)`, which REPLACES the pill's children, and it POSTs that
   same string as the new status. Real elements inside the pill would be wiped on the first click
   and a relabelled menu item would save the wrong word, so the phone mark and the chevron are
   pseudo-elements and every option keeps the text it already had.

   Specificity: `#calendar_followup_table` is carried through the block on purpose. The pill is
   already styled by slm-theme-v1.css:22966 at (0,4,0), and that file loads AFTER style.css, so
   one id is what lets these rules land. ===== */

/* The row: [WhatsApp] [Book appointment] [response pill], opening on the heading's inset.
   `justify-content` needs !important — the cell carries Bootstrap's `.justify-content-center`,
   which is itself !important. */
.slm-page.slm-page-opd .slm-section-table #calendar_followup_table .follow-up-status-dropdown-container {
    display: flex;
    align-items: center;
    justify-content: flex-start !important;
    gap: 5px;
    padding-left: 8px;
    padding-right: 0;
}
.slm-page.slm-page-opd .slm-section-table #calendar_followup_table .follow-up-status-dropdown-container > .follow-up-whatsapp-btn {
    order: 1;
}
.slm-page.slm-page-opd .slm-section-table #calendar_followup_table .follow-up-status-dropdown-container > .makeApp {
    order: 2;
    display: flex;
    align-items: center;
}
.slm-page.slm-page-opd .slm-section-table #calendar_followup_table .follow-up-status-dropdown-container > div:not(.makeApp) {
    order: 3;
}

/* The two icon squares. 26px, radius 8, a 1px tinted edge and a white face, hovering to the
   reference's teal — identical geometry for both so they read as one pair. */
.slm-page.slm-page-opd .slm-section-table #calendar_followup_table .follow-up-status-dropdown-container .btn.btn-icon.follow-up-whatsapp-btn,
.slm-page.slm-page-opd .slm-section-table #calendar_followup_table .follow-up-status-dropdown-container .schedule-confirm.bookPatientAppointment {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 26px;
    min-width: 26px;
    height: 26px;
    margin: 0;
    padding: 0;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1;
    transition: all .12s ease;
}
/* WhatsApp square — GREEN, and this is a DELIBERATE DIVERGENCE FROM THE REFERENCE, confirmed with
   Hardik on 2026-08-25. Do not "correct" it.
   The reference makes both Next Step squares quiet — this one neutral (#FFFFFF / #E5E7EB / #475467)
   and only the Book square teal. We keep green because green-for-WhatsApp is a recognised
   affordance and greying it would cost that for exact parity.
   It is NOT an off-palette colour: the trio below is the reference's own green tone verbatim from
   its STATUS_TONE table (`'#0B7A55': ['#EAF8F0', '#0B7A55', '#A8E3C0']`), just applied to an
   element the reference leaves neutral. If that table is ever retuned, retune this with it. */
.slm-page.slm-page-opd .slm-section-table #calendar_followup_table .follow-up-status-dropdown-container .btn.btn-icon.follow-up-whatsapp-btn {
    background: #eaf8f0;
    border: 1px solid #a8e3c0;
    color: #0b7a55;
}
.slm-page.slm-page-opd .slm-section-table #calendar_followup_table .follow-up-status-dropdown-container .schedule-confirm.bookPatientAppointment {
    background: #ffffff;
    border: 1px solid #a9e4db;
    color: #0a9184;
}
.slm-page.slm-page-opd .slm-section-table #calendar_followup_table .follow-up-status-dropdown-container .btn.btn-icon.follow-up-whatsapp-btn:hover,
.slm-page.slm-page-opd .slm-section-table #calendar_followup_table .follow-up-status-dropdown-container .schedule-confirm.bookPatientAppointment:hover {
    background: #f2fbf9;
    border-color: #0a9184;
    color: #0a9184;
    border-radius: 8px;
}
.slm-page.slm-page-opd .slm-section-table #calendar_followup_table .follow-up-status-dropdown-container .schedule-confirm.bookPatientAppointment > i {
    font-size: 13px;
    line-height: 1;
}

/* An empty slot is not a control. The Book Appointment square only applies to a recall that was
   booked without an appointment on it, and every other row shipped it as `visibility: hidden` -
   which holds its 26px and its gap, leaving a 32px hole between the WhatsApp square and the pill.
   The reference simply does not render the square on those rows.
   ⚠ MATCHED ON THE INLINE STYLE, DELIBERATELY. common-schedule.js:1056 toggles this square with
   `.css('visibility', ...)`, so the inline attribute is the only thing that says which state it is
   in. `display: none` on the WRAPPER rather than the square keeps that toggle working: the JS
   writes `visibility: visible` on the square, which stops matching, and the wrapper comes back. */
.slm-page.slm-page-opd .slm-section-table #calendar_followup_table .follow-up-status-dropdown-container > .makeApp:has(> .bookPatientAppointment[style*="visibility: hidden"]) {
    display: none;
}

/* The pill. The theme gives it a 13px face, 8px/20px padding and a 6px status dot; the reference
   is a 26px line with an 11px face, a phone mark and a chevron, so all three are replaced. */
.slm-page.slm-page-opd .slm-section-table #calendar_followup_table .follow-up-status-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 9px;
    border-radius: 8px;
    border: 1px solid transparent;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    box-shadow: none;
    transition: all .12s ease;
}
/* The phone mark, in place of the theme's dot. A mask rather than a background image, so the SVG
   inherits the pill's own status colour instead of needing six copies. */
.slm-page.slm-page-opd .slm-section-table #calendar_followup_table .follow-up-status-btn::before {
    content: "";
    flex: none;
    width: 12px;
    height: 12px;
    border-radius: 0;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.81.36 1.6.7 2.34a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.74-1.27a2 2 0 0 1 2.11-.45c.74.34 1.53.57 2.34.7A2 2 0 0 1 22 16.92Z'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.81.36 1.6.7 2.34a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.74-1.27a2 2 0 0 1 2.11-.45c.74.34 1.53.57 2.34.7A2 2 0 0 1 22 16.92Z'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
}
/* The chevron, which is what says the pill opens something. */
.slm-page.slm-page-opd .slm-section-table #calendar_followup_table .follow-up-status-btn::after {
    content: "";
    flex: none;
    width: 11px;
    height: 11px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 11px 11px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 11px 11px no-repeat;
}

/* Per-state colour, straight off the reference's STATUS_TONE table (face, ink, edge). Note that
   No Answer moves from the theme's blue to the reference's grey: the reference reserves colour
   for outcomes that mean something happened, and an unanswered phone is not one of them. */
.slm-page.slm-page-opd .slm-section-table #calendar_followup_table .follow-up-status-btn.fu-booked {
    background: #eaf8f0;
    border-color: #a8e3c0;
    color: #0b7a55 !important;
}
.slm-page.slm-page-opd .slm-section-table #calendar_followup_table .follow-up-status-btn.fu-callagain {
    background: #fef6ec;
    border-color: #f7d3a3;
    color: #b4610f !important;
}
.slm-page.slm-page-opd .slm-section-table #calendar_followup_table .follow-up-status-btn.fu-declined {
    background: #fdefee;
    border-color: #f6c4c0;
    color: #b4453c !important;
}
.slm-page.slm-page-opd .slm-section-table #calendar_followup_table .follow-up-status-btn.fu-noanswer,
.slm-page.slm-page-opd .slm-section-table #calendar_followup_table .follow-up-status-btn.fu-other {
    background: #f2f4f7;
    border-color: #d6dae1;
    color: #475467 !important;
}
/* "Follow Up" is our own state for a recall nobody has answered on yet, which is the reference's
   no-response-recorded tone: a plain white pill. */
.slm-page.slm-page-opd .slm-section-table #calendar_followup_table .follow-up-status-btn.fu-followup {
    background: #ffffff;
    border-color: #e0e5ec;
    color: #475467 !important;
}
/* Hover marks the pill as pressable without repainting it. The theme flooded it with the status
   colour and lifted it 1px, which at 26px read as the row jumping. */
.slm-page.slm-page-opd .slm-section-table #calendar_followup_table .follow-up-status-btn:hover {
    border-color: #0a9184;
    color: #0a9184 !important;
    transform: none;
}

/* 🔥 THE PILL MUST KEEP ITS FILL ON HOVER. The rule above changes only the border and the ink —
   which is exactly what the reference does (`style-hover="border-color:#0A9184; color:#0A9184;"`
   on the unset pill, and merely `filter:brightness(.97)` on the set ones; the fill never swaps).
   But because it declares NO background, the theme's
   `:is(.slm-page-opd, .slm-page-ipd) … .follow-up-status-btn.fu-followup:hover { background:#5E6278 }`
   was left unopposed — nothing in this block competes for that property — so hovering filled the
   pill DARK SLATE while the ink above went teal: teal on near-black, and off-palette besides.
   Specificity does not save us there; only a declaration does.
   Each state therefore restates its own resting fill for the hover case. The ID keeps these at
   (1,6,0) against the theme's (0,5,0).
   ⚠ Add an arm here whenever a new fu-* state is added, or that state will inherit the slate. */
.slm-page.slm-page-opd .slm-section-table #calendar_followup_table .follow-up-status-btn.fu-followup:hover  { background: #ffffff; }
.slm-page.slm-page-opd .slm-section-table #calendar_followup_table .follow-up-status-btn.fu-booked:hover    { background: #eaf8f0; }
.slm-page.slm-page-opd .slm-section-table #calendar_followup_table .follow-up-status-btn.fu-callagain:hover { background: #fef6ec; }
.slm-page.slm-page-opd .slm-section-table #calendar_followup_table .follow-up-status-btn.fu-declined:hover  { background: #fdefee; }
.slm-page.slm-page-opd .slm-section-table #calendar_followup_table .follow-up-status-btn.fu-noanswer:hover,
.slm-page.slm-page-opd .slm-section-table #calendar_followup_table .follow-up-status-btn.fu-other:hover     { background: #f2f4f7; }
.slm-page.slm-page-opd .slm-section-table #calendar_followup_table .follow-up-status-btn:hover::before,
.slm-page.slm-page-opd .slm-section-table #calendar_followup_table .follow-up-status-btn:hover::after {
    background: currentColor;
}

/* The response menu. The reference titles it, so the caption is a `content` string on the menu
   itself — the options are anchors the handler reads by text, and nothing may be inserted among
   them.
   ⚠ NOT SCOPED TO THE TABLE, AND IT CANNOT BE. Bootstrap DETACHES an open dropdown to the end of
   `<body>` (the open menu's parentElement is the body element, and it picks up a `.custom` class on
   the way), so `#calendar_followup_table ...` matches it while it is closed and stops matching the
   moment it opens — which is the only time it is visible. `body > .dropdown-menu.followup-dropdown-menu`
   is where it actually lives, and that class exists in exactly one place in the app
   (datatable-user-list.js:1708), so nothing else can pick these rules up. */
body > .dropdown-menu.followup-dropdown-menu {
    /* The reference's `width: 258px` — a fixed width, not a floor. It was `min-width: 208px`, so
       the menu sized to its longest label ("No answer / phone busy") and changed width between
       states. A fixed width keeps the popover the same shape wherever it opens. */
    width: 258px;
    min-width: 258px;
    padding: 6px;
    border-radius: 11px;
    /* ⚠ !important answers `.dropdown-menu { border: 0 !important }` in the base sheet — the same
       rule that had killed the "More" panel's border. Without it this declaration is inert and
       the popover floats with no edge at all against a white row. */
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 12px 32px rgba(16, 24, 40, .18);
}
body > .dropdown-menu.followup-dropdown-menu::before {
    content: "WHAT DID THE PATIENT SAY?";
    /* `display` is !important because the theme kills every dropdown's caret with a blanket
       `.dropdown-menu::after, .dropdown-menu::before { display: none !important }`, and that takes
       the caption with it. */
    display: block !important;
    padding: 6px 9px 4px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .05em;
    color: #98a2b3;
}
/* ⚠ THE OPTION'S OWN TEXT IS ITS SAVED VALUE, SO IT IS HIDDEN, NOT REWRITTEN. common-schedule.js:1049
   reads `$(this).text()` and then (a) writes it into the pill, (b) compares it to the literal
   "Booked" to decide whether the Book Appointment square appears, and (c) POSTs it to
   followupStatusChange as the new status. Editing these anchors would change what the app stores.
   So the short code value stays in the DOM at `font-size: 0` and the reference's sentence is drawn
   next to it as `::after` — the reference does the same split itself, keeping a long `label` for the
   menu and a short `short` for the pill.
   `gap` goes to 0 and the dot spaces itself: the collapsed text is still an anonymous flex item, so
   a 9px gap would have been charged on both sides of it and pushed the label 18px off the dot. */
body > .dropdown-menu.followup-dropdown-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 0;
    /* ⚠ `width: auto` UNDOES BOOTSTRAP'S `.dropdown-item { width: 100% }`, WHICH IS WHY THIS IS HERE
       AND NOT OPTIONAL. Once the menu became a flex column (for the reorder below) that percentage
       had nothing definite to resolve against, so the container's max-content came out as the
       viewport and the menu measured 1627px wide instead of 208px. `auto` lets each option
       contribute its own label width; stretch is the flex default, so they still span the menu. */
    width: auto;
    padding: 7px 9px;
    border-radius: 8px;
    font-size: 0;
    font-weight: 600;
    white-space: nowrap;
    transition: background .12s ease;
}
body > .dropdown-menu.followup-dropdown-menu .dropdown-item::after {
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}
body > .dropdown-menu.followup-dropdown-menu .dropdown-item[data-fu-class="fu-followup"]::after { content: "Not called yet"; }
body > .dropdown-menu.followup-dropdown-menu .dropdown-item[data-fu-class="fu-booked"]::after   { content: "Booked the review"; }
body > .dropdown-menu.followup-dropdown-menu .dropdown-item[data-fu-class="fu-callagain"]::after { content: "Call again later"; }
body > .dropdown-menu.followup-dropdown-menu .dropdown-item[data-fu-class="fu-noanswer"]::after { content: "No answer / phone busy"; }
body > .dropdown-menu.followup-dropdown-menu .dropdown-item[data-fu-class="fu-declined"]::after { content: "Declined the review"; }
body > .dropdown-menu.followup-dropdown-menu .dropdown-item[data-fu-class="fu-other"]::after    { content: "Other — see note"; }

/* The reference lists these Booked / Call again / No answer / Declined / Other; ours emits Declined
   third. Reordering here rather than in the template keeps the anchors untouched.
   ⚠ SCOPED TO `.show`, AND !important. Whatever opens this menu writes an INLINE `display: block`,
   which no stylesheet rule can outrank, so the flex context needs !important to exist at all. Tying
   it to `.show` is what keeps that safe: the class is only on the menu while it is open, so when it
   closes the rule stops matching and the normal hiding - inline or `.dropdown-menu { display: none }`
   - is untouched. Forcing flex unconditionally would have pinned every one of these menus open. */
body > .dropdown-menu.followup-dropdown-menu.show {
    display: flex !important;
    flex-direction: column;
}
body > .dropdown-menu.followup-dropdown-menu .dropdown-item[data-fu-class="fu-followup"]  { order: 1; }
body > .dropdown-menu.followup-dropdown-menu .dropdown-item[data-fu-class="fu-booked"]    { order: 2; }
body > .dropdown-menu.followup-dropdown-menu .dropdown-item[data-fu-class="fu-callagain"] { order: 3; }
body > .dropdown-menu.followup-dropdown-menu .dropdown-item[data-fu-class="fu-noanswer"]  { order: 4; }
body > .dropdown-menu.followup-dropdown-menu .dropdown-item[data-fu-class="fu-declined"]  { order: 5; }
body > .dropdown-menu.followup-dropdown-menu .dropdown-item[data-fu-class="fu-other"]     { order: 6; }
/* ⚠ THE HOVER FILL NEEDS !important AND ALL THREE STATES. The theme ships
   `.dropdown-item.active, .dropdown-item:active, .dropdown-item:focus, .dropdown-item:hover {
   color: #fff !important; background-color: var(--second-blue-color) !important }` - a blanket blue
   that flooded the hovered option and bleached its label. `:focus` matters as much as `:hover`
   here: the option stays focused after a click, so without it one row kept the blue after the menu
   reopened. Only the background is declared - each option's own ink is already set at (0,4,1) with
   !important, which outranks that rule on specificity, so it comes back by itself. */
body > .dropdown-menu.followup-dropdown-menu .dropdown-item:hover,
body > .dropdown-menu.followup-dropdown-menu .dropdown-item:focus,
body > .dropdown-menu.followup-dropdown-menu .dropdown-item:active,
body > .dropdown-menu.followup-dropdown-menu .dropdown-item.active {
    background: #f2fbf9 !important;
}
body > .dropdown-menu.followup-dropdown-menu .dropdown-item::before {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    margin-right: 9px;
    border-radius: 999px;
    background: #98a2b3;
}
/* ⚠ `!important` ON EVERY COLOUR HERE. The theme ships a bare `.dropdown-item { color:
   var(--font-black-color) !important }`, so an option's own colour cannot land without matching it -
   the dots above go through fine because nothing declares `background` on `.dropdown-item::before`. */
body > .dropdown-menu.followup-dropdown-menu .dropdown-item[data-fu-class="fu-booked"] {
    color: #0b7a55 !important;
}
body > .dropdown-menu.followup-dropdown-menu .dropdown-item[data-fu-class="fu-booked"]::before {
    background: #3fbf7f;
}
body > .dropdown-menu.followup-dropdown-menu .dropdown-item[data-fu-class="fu-callagain"] {
    color: #b4610f !important;
}
body > .dropdown-menu.followup-dropdown-menu .dropdown-item[data-fu-class="fu-callagain"]::before {
    background: #e8913a;
}
body > .dropdown-menu.followup-dropdown-menu .dropdown-item[data-fu-class="fu-declined"] {
    color: #b4453c !important;
}
body > .dropdown-menu.followup-dropdown-menu .dropdown-item[data-fu-class="fu-declined"]::before {
    background: #ef6f66;
}
body > .dropdown-menu.followup-dropdown-menu .dropdown-item[data-fu-class="fu-noanswer"],
body > .dropdown-menu.followup-dropdown-menu .dropdown-item[data-fu-class="fu-other"],
body > .dropdown-menu.followup-dropdown-menu .dropdown-item[data-fu-class="fu-followup"] {
    color: #475467 !important;
}

/* ---- The booked review slot, folded in under the pill. ----
   This date used to be a column of its own ("Next Appointment"). The reference has no such
   column: it prints the slot as a line inside Next Step, and gives the width back to Followup
   For, Last Visit and Followup Date, which were all being squeezed for it. Built by
   slmFuNextApptLine (datatable-user-list.js).
   `.slm-fu-step` is the new wrapper around the existing action row + this line; it is a plain
   column stack, so the action row keeps every rule above it unchanged. */
.slm-page.slm-page-opd .slm-section-table #calendar_followup_table .slm-fu-step {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    min-width: 0;
}
/* Aligned to the pill, not to the cell: the action row opens on an 8px inset (above), so without
   the same inset this line would start 8px to its left and the two would read as unrelated. */
.slm-page.slm-page-opd .slm-section-table #calendar_followup_table .slm-fu-nextappt {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    min-width: 0;
    padding-left: 8px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.2;
    color: #475467;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    cursor: help;
}
.slm-page.slm-page-opd .slm-section-table #calendar_followup_table .slm-fu-nextappt > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* The tick on the calendar is the whole signal that a review IS booked, so it carries the only
   colour on the line. */
.slm-page.slm-page-opd .slm-section-table #calendar_followup_table .slm-fu-nextappt > svg {
    flex: none;
    width: 12px;
    height: 12px;
    color: #0a9184;
}
/* Nothing booked yet. Said in the quiet meta grey rather than left blank — an empty cell here
   reads as missing data, and this is the one state the recall exists to change. */
.slm-page.slm-page-opd .slm-section-table #calendar_followup_table .slm-fu-nextappt.is-none {
    color: #98a2b3;
    font-weight: 500;
}
.slm-page.slm-page-opd .slm-section-table #calendar_followup_table .slm-fu-nextappt.is-none > svg {
    color: #cbd2dc;
}
/* ===== [opd-followup-nextstep-v3] END ===== */

/* ===== [opd-nextstep-indicator-squares-v3] BEGIN — the indicator strip under the Next Step
   button, given the reference's square-button shape.

   The reference's Scheduled cell puts a row of 26px squares under the button, each on a white face
   with a 1px edge and its own ink, hovering to teal. Ours held 22.75px pink tiles at 0.95rem — a
   different shape language in the same slot.

   ⚠ ONLY THE SHAPE CHANGES. Each control keeps what it means and what it does: both note icons stay
   red because they both say "there is a note on this patient", and the confirmation tick stays a
   tick you click, green once `.active`. Nothing here adds or reads data.

   ⚠ APPLIED TO ALL SIX TABLES, NOT JUST SCHEDULED. This strip is one component shared by every tab
   (slmNextStepCell* all emit it), so squaring it up on Scheduled alone would leave Waiting, Engaged,
   Checked Out and Laboratory showing the old pink tiles in the same column of the same table.

   The `.schedule-confirm` selectors are DESCENDANT, not child: `.table-indicator-icon > div` is
   `display: contents`, so the spans are flex items but still sit inside their wrapper div. ===== */

/* 6px to match the gap between the squares and the pill on Follow Up, so the two tabs' Next Step
   rows are spaced alike. */
.slm-page.slm-page-opd .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table) .schedule-detail-row .slm-nextstep-wrap .table-indicator-icon {
    gap: 6px;
}

/* The square. One geometry for all three, so they read as a row rather than three sizes. */
.slm-page.slm-page-opd .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table) .schedule-detail-row .slm-nextstep-wrap .table-indicator-icon .schedule-confirm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 26px;
    min-width: 26px;
    height: 26px;
    /* !important because these spans carry Bootstrap's `.mr-1`/`.pl-0`, which are themselves
       !important - the bell's 3.25px right margin was making the row read 35.2px apart where the
       strip's own 6px gap should be the only spacing. */
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid #e0e5ec;
    color: #475467;
    font-size: 13px;
    line-height: 1;
    transition: all .12s ease;
}
.slm-page.slm-page-opd .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table) .schedule-detail-row .slm-nextstep-wrap .table-indicator-icon .schedule-confirm > i {
    color: inherit;
    font-size: 13px;
    line-height: 1;
}
.slm-page.slm-page-opd .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table) .schedule-detail-row .slm-nextstep-wrap .table-indicator-icon .schedule-confirm svg {
    width: 14px;
    height: 14px;
    display: block;
    color: inherit;
}

/* The two note icons. Both mean "read this before you call the patient", so both take the
   reference's alert tone — the legacy #FF675D on #FDECEC is off that palette. */
.slm-page.slm-page-opd .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table) .schedule-detail-row .slm-nextstep-wrap .table-indicator-icon .schedule-confirm.reception-reminder-indicator,
.slm-page.slm-page-opd .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table) .schedule-detail-row .slm-nextstep-wrap .table-indicator-icon .schedule-confirm.slm-indicator-icon-note {
    background: #fdefee;
    border-color: #f6c4c0;
    /* !important because the reception-note span also carries Metronic's `.kt-font-danger`, which
       declares `color: #ff675d !important` and would otherwise keep the legacy red. */
    color: #b4453c !important;
}

/* The confirmation tick keeps the 26px footprint but NO face and NO edge, because `slmicon-check-mark`
   is already a filled rounded square with a tick in it — painting a bordered white box behind it
   double-boxed the control, which is what it looked like: a heavy dark chip beside two light ones.
   The glyph itself is the mark, so it is sized up to fill the square and takes the state colour.
   Still the same clickable span; only its face changed. */
.slm-page.slm-page-opd .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table) .schedule-detail-row .slm-nextstep-wrap .table-indicator-icon .schedule-confirm.appointment-confirmation {
    background: transparent;
    border-color: transparent;
    color: #98a2b3;
}
.slm-page.slm-page-opd .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table) .schedule-detail-row .slm-nextstep-wrap .table-indicator-icon .schedule-confirm.appointment-confirmation > i {
    font-size: 19px;
}
.slm-page.slm-page-opd .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table) .schedule-detail-row .slm-nextstep-wrap .table-indicator-icon .schedule-confirm.appointment-confirmation.active {
    color: #0b7a55;
}
.slm-page.slm-page-opd .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table) .schedule-detail-row .slm-nextstep-wrap .table-indicator-icon .schedule-confirm.appointment-confirmation:hover {
    background: transparent;
    border-color: transparent;
    color: #0a9184;
}

.slm-page.slm-page-opd .slm-section-table :is(#calendar_waiting_table, #calendar_engaged_table, #calendar_checkout_table, #calendar_laboratory_table, #calendar_schedule_table, #calendar_followup_table) .schedule-detail-row .slm-nextstep-wrap .table-indicator-icon .schedule-confirm:hover {
    background: #f2fbf9;
    border-color: #0a9184;
    color: #0a9184;
}
/* ===== [opd-nextstep-indicator-squares-v3] END ===== */

/* ===== [opd-scheduled-tick-inline] BEGIN — the controls sit UNDER the button, on reserved ground =====

   ⚠ THE BLOCK NAME IS NOW A MISNOMER, kept only so the tag stays greppable against its history.
   There is no tick here any more — it was removed on request 2026-09-01 — but the LAYOUT problem
   it uncovered is the reason every rule below exists, so the story is worth keeping.

   HISTORY. The row-action card is pinned at the row's `bottom: 7px` and is ~48px tall, so it owns
   the bottom ~55px of every row. The confirmation tick used to sit under the button, inside that
   band, and the card only appears WHILE the row is hovered — which is the only time the tick could
   be clicked. It was not awkward to hit, it was unreachable, so the tick was moved onto the
   button's own line and this wrap became a row.

   The reference's Appointments cell needs that ground back: it is a button with a QR/dial button
   and a response pill UNDER it, and those two do not fit beside a 148px button in this column. So
   the wrap is a column again — but this time the band is RESERVED rather than shared.
   `padding-bottom` holds open the card's 55px, the row grows to fit, and the controls land above
   it. Everything in the cell stays clickable while hovered.

   ⚠ THE PADDING IS THE WHOLE FIX. Take it away and the controls are back under the card, silently
   unclickable — the same bug, and one that only shows up when you actually try to hover and click,
   not when you look at a screenshot. If the card's height or its `bottom` ever change, this number
   moves with them.
   ⚠ It costs row height: Scheduled rows go from ~98px to ~127px. That is the reference's own
   proportion (its rows are two-line cells too) and it is scoped to this tab alone.

   ⚠ SCOPED TO #calendar_schedule_table AND NOTHING ELSE. `.slm-nextstep-wrap` is shared by every
   queue tab and by the IPD boards, and no other tab has a second line to put here. */
.slm-page.slm-page-opd .slm-section-table #calendar_schedule_table .schedule-detail-row .slm-nextstep-wrap {
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: nowrap;
    gap: 6px;
    padding-bottom: 58px;
}
/* 148px, not the 158px the other tabs use. It still clears this tab's longest label — "Move to
   Waiting" measures ~135px — so nothing truncates, and every button on the tab stays one width,
   which is what the shared floor was for. (It was originally 148 to leave the tick room on the
   button's line; the number is kept because the button no longer needs to grow.) */
.slm-page.slm-page-opd .slm-section-table #calendar_schedule_table .schedule-detail-row .slm-nextstep-btn.btn.btn-sm {
    min-width: 148px;
}
.slm-page.slm-page-opd .slm-section-table #calendar_schedule_table .schedule-detail-row .slm-nextstep-wrap .table-indicator-icon {
    flex: none;
}
/* ===== [opd-scheduled-tick-inline] END ===== */

/* ===== [opd-calendar-v3] BEGIN — the OPD Calendar tab, brought onto the queue table's design
   language. 2026-08-25.

   The Calendar tab (#calendar-wizard) is the other half of this page: same header, same toolbar,
   but everything under them was still on the pre-v3 palette — Metronic teal (#1BC5BD) on the
   "All doctors" card and the mini datepicker, FullCalendar's own #54B8AD on the active view button,
   a #FCF8E3 "today" wash and #DDD grid lines. Nothing here invents a look; every value is lifted
   from a rule that is already on the queue table two clicks away:

     card           1px #E5E7EB / 14px / 0 1px 2px rgba(16,24,40,.05)  [opd-table-v3] card
     column head    #E2EAF4 over 1px #CAD6E5; #64748B 11px/700 caps    [opd-table-v3] head
     row rule       #DDE3EC                                            [opd-table-v3-surface] 1
     button         white / 1px #E5E7EB / 10px / 36px / #344054        [opd-header-v3] toolbar
     selected       #0A9184 + 0 2px 10px rgba(14,124,107,.18)          [opd-header-v3] active tab
     hover          #F2F4F7 neutral, #F2FBF9 teal                      the reference's two hovers
     teal tint      #ECFAF7 fill, #0A9184 ink                          reference STATUS_TONE teal
     neutral tint   #F2F4F7 fill, #D6DAE1 border                       reference STATUS_TONE neutral

   ⚠ SCOPE — `.slm-page:is(.slm-page-opd, .slm-page-calendar-booking)` ON EVERY RULE, AND IT IS
   LOAD-BEARING. Those classes sit on #kt_content in newcalendar/index.blade.php:155 and
   newcalendar/calendar.blade.php:140 and nowhere else (patient details carries
   `.slm-page-opd-patient-details`, a different class token). It matters more here than it did on
   the table, because `#app-calendar`, `.doctor-list` and `.custom-block-calendar-stripes` are all
   SHARED widgets, rendered from the same JS on three screens.
   ⚠ THE THIRD SCREEN IS DELIBERATELY LEFT OUT. IPD Reception
   (ipd/schedule/reception_schedule_index.blade.php:626) renders the same markup and is NOT in this
   list — it has its own treatment and nobody has asked for it to move. Drop the prefix entirely
   and it changes with these two.
   ⚠ Calendar Booking was added on 2026-08-27, on request ("same changes needed in ipd calendar
   also" — /calendar?type=ipd is this page, not IPD Reception). It carries the same ids as the OPD
   tab (#calendar-wizard, #calendarFromDate, #kt_calendar_external_events, #app-calendar), so every
   rule below reached it unchanged.
   ⚠ ADDING A BRANCH TO `:is()` DOES NOT MOVE THE WEIGHT. `:is()` takes the specificity of its
   heaviest argument and all of these are classes, so `.slm-page:is(a, b)` is (0,2,0) exactly as
   `.slm-page.slm-page-opd` was — every specificity argument written below still holds. Do NOT add
   an id or a compound to one branch: that would raise the rule for the other one too.

   ⚠ SPECIFICITY, NOT SOURCE ORDER. style.css is slot 1 of theme-combine-styles.css and
   slm-theme-v1.css is slot 10, so a TIE against the theme is a LOSS from this file. Every selector
   below therefore carries an id (#calendar-wizard / #app-calendar / #calendarFromDate) or an extra
   class. Four declarations additionally need `!important` — each one is beating somebody else's
   `!important` or a JS-written inline style, never a specificity shortfall, and each is marked
   where it appears.

   EVENT COLOURS ARE DELIBERATELY UNTOUCHED. `.fc-event`'s fill and left border are the DOCTOR's
   colour, written inline by reception-schedule.js:317-327 from the event feed. That is data the
   user assigns per doctor, not chrome, so recolouring it would destroy the colour key.
   ===== */

/* ---- 1. The three cards — one datepicker, one doctor list, one calendar.
   `.kt-portlet` here is bare: no border, no shadow, 15px radius. The queue table's card is
   1px #E5E7EB / 14px / 0 1px 2px rgba(16,24,40,.05), so these take the same.
   ⚠ THE SHADOW NEEDS `!important` AND THE BORDER DOES NOT. `.slm-ui-theme-v1 .section-bg
   .kt-portlet` (slm-theme-v1.css) sets `box-shadow: none !important` and `.section-bg` is on the
   wizard's form wrapper, so the plain declaration was silently dropped — the cards came out flat
   while the border and radius took. Nothing sets the border or radius with `!important`. ---- */
.slm-page:is(.slm-page-opd, .slm-page-calendar-booking) #calendar-wizard .kt-portlet {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05) !important;
}

/* ---- 2. FullCalendar's toolbar → the page header's button language. ----
   Every button in the toolbar (prev, next, today, and the four view buttons) becomes the header's
   36px white square with a 10px radius, and the selected view button takes the active queue tab's
   fill. FullCalendar's own chrome — 2.75rem tall, transparent, square, text-shadowed — goes. */
.slm-page:is(.slm-page-opd, .slm-page-calendar-booking) #app-calendar .fc-toolbar.fc-header-toolbar {
    margin-bottom: 14px;
    align-items: center;
}

/* The title was 15.6px/500 near-black; the page's own section headings are #101828 at 700. */
.slm-page:is(.slm-page-opd, .slm-page-calendar-booking) #app-calendar .fc-toolbar h2 {
    font-size: 15px;
    font-weight: 700;
    color: #101828;
    letter-spacing: .01em;
    line-height: 36px;
}

.slm-page:is(.slm-page-opd, .slm-page-calendar-booking) #app-calendar .fc-toolbar .fc-button {
    height: 36px;
    padding: 0 14px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #ffffff;
    color: #344054;
    font-size: 12.5px;
    font-weight: 600;
    text-transform: none;
    text-shadow: none;
    box-shadow: none;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.slm-page:is(.slm-page-opd, .slm-page-calendar-booking) #app-calendar .fc-toolbar .fc-button:hover {
    background: #f2f4f7;
    border-color: #b6c0ce;
    color: #101828;
}

/* Pointer clicks leave no ring, keyboard focus does — the same split the row actions use. */
.slm-page:is(.slm-page-opd, .slm-page-calendar-booking) #app-calendar .fc-toolbar .fc-button:focus {
    box-shadow: none;
    outline: 0;
}
/* ⚠ `!important` because `.fc-unthemed .fc-toolbar .fc-button { box-shadow: none !important }`
   (fullcalendar.bundle.css) would otherwise erase the keyboard ring as well as the click ring. */
.slm-page:is(.slm-page-opd, .slm-page-calendar-booking) #app-calendar .fc-toolbar .fc-button:focus-visible {
    box-shadow: 0 0 0 2px rgba(10, 145, 132, .40) !important;
    outline: 0;
}

/* `today` is disabled while the view already shows today. FullCalendar's 0.65 opacity dims the
   whole button including its border; this states it as muted ink on the normal shell instead. */
.slm-page:is(.slm-page-opd, .slm-page-calendar-booking) #app-calendar .fc-toolbar .fc-button:disabled {
    opacity: 1;
    background: #ffffff;
    border-color: #eaecf0;
    color: #98a2b3;
}

/* Prev / next carry an icon, not a word, so they are square like the header's icon buttons. */
.slm-page:is(.slm-page-opd, .slm-page-calendar-booking) #app-calendar .fc-toolbar .fc-button.fc-prev-button,
.slm-page:is(.slm-page-opd, .slm-page-calendar-booking) #app-calendar .fc-toolbar .fc-button.fc-next-button {
    width: 36px;
    padding: 0;
}

/* Button GROUPS → the header's ALL/OPD/IPD segmented control, on request 2026-08-26 (they were
   separate 10px pills). The DOM already groups them the way the design wants: the calendar's
   header config is `left: 'prev,next today'` / `right: 'timeGridDay,timeGridWeek,dayGridMonth,
   listWeek'` (reception-schedule.js:217), and FullCalendar wraps each COMMA-joined run in one
   `.fc-button-group` — so prev+next weld into a pair, the four view buttons weld into a bar, and
   `today`, which is space-separated, stays its own pill. That is the same split the header above
   uses: a segmented group of modes, with a standalone button (Calendar) beside it.

   ⚠ NO `overflow: hidden`, which is how `.slm-button-group-sm` does the same job
   (slm-theme-v1.css:11730). It would clip the `:focus-visible` ring three rules up — a box-shadow,
   which an overflow-hidden parent cuts off — and lose the one affordance keyboard users have here.
   Rounding the end buttons instead reaches the identical shape with the ring intact. The 9px is
   the group's 10px minus its own 1px border, so the inner curve sits concentric with the outer. */
.slm-page:is(.slm-page-opd, .slm-page-calendar-booking) #app-calendar .fc-toolbar .fc-button-group {
    display: inline-flex;
    gap: 0;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #ffffff;
}
.slm-page:is(.slm-page-opd, .slm-page-calendar-booking) #app-calendar .fc-toolbar .fc-button-group > .fc-button {
    margin: 0;
    border: none;
    border-right: 1px solid #e5e7eb;
    border-radius: 0;
}
.slm-page:is(.slm-page-opd, .slm-page-calendar-booking) #app-calendar .fc-toolbar .fc-button-group > .fc-button:first-child {
    border-top-left-radius: 9px;
    border-bottom-left-radius: 9px;
}
.slm-page:is(.slm-page-opd, .slm-page-calendar-booking) #app-calendar .fc-toolbar .fc-button-group > .fc-button:last-child {
    border-right: none;
    border-top-right-radius: 9px;
    border-bottom-right-radius: 9px;
}

/* Selected view = the active queue tab and the active ALL/OPD/IPD segment: a flat #0A9184 block.
   `border-color` turns this button's own right-hand divider teal, so the fill runs flush into the
   next button instead of being fenced off by a grey hairline.
   ⚠ `!important` on the shadow because `.fc-unthemed .fc-toolbar .fc-button { box-shadow: none
   !important }` (fullcalendar.bundle.css) has to be answered either way — here to hold it AT none
   deliberately, matching the segmented group in the header, which carries no glow. */
.slm-page:is(.slm-page-opd, .slm-page-calendar-booking) #app-calendar .fc-toolbar .fc-button.fc-button-active,
.slm-page:is(.slm-page-opd, .slm-page-calendar-booking) #app-calendar .fc-toolbar .fc-button.fc-button-active:hover {
    background: #0a9184;
    border-color: #0a9184;
    color: #ffffff;
    box-shadow: none !important;
}

/* ---- 3. The day-header strip → the table's column header. ----
   ⚠ THE BAND IS PAINTED ON `.fc-head-container`, NOT ON `.fc-day-header`. In the time-grid views
   the header row is [time-axis th][day th…][scrollbar-gutter th]; only the middle ones are
   `.fc-day-header`, so painting those alone left a white notch at each end of an otherwise
   continuous band. The container td spans all three. The day cells keep the same fill so their
   vertical dividers still read, and give up their own bottom border to the container's. */
.slm-page:is(.slm-page-opd, .slm-page-calendar-booking, .slm-page-ipd) #app-calendar .fc-head .fc-head-container {
    background: #e2eaf4;
    border-bottom: 1px solid #cad6e5;
}
.slm-page:is(.slm-page-opd, .slm-page-calendar-booking, .slm-page-ipd) #app-calendar .fc-head .fc-day-header {
    background: #e2eaf4;
    border-bottom: 0;
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .55px;
    text-transform: uppercase;
    padding: 11px 8px;
}

/* ---- 4. Grid rules — FullCalendar's #DDD onto the table's separator. ---- */
.slm-page:is(.slm-page-opd, .slm-page-calendar-booking) #app-calendar td,
.slm-page:is(.slm-page-opd, .slm-page-calendar-booking) #app-calendar th,
.slm-page:is(.slm-page-opd, .slm-page-calendar-booking) #app-calendar .fc-row,
.slm-page:is(.slm-page-opd, .slm-page-calendar-booking) #app-calendar .fc-divider,
.slm-page:is(.slm-page-opd, .slm-page-calendar-booking) #app-calendar .fc-popover,
.slm-page:is(.slm-page-opd, .slm-page-calendar-booking) #app-calendar .fc-list-view {
    border-color: #dde3ec;
}
.slm-page:is(.slm-page-opd, .slm-page-calendar-booking) #app-calendar .fc-divider {
    background: #f2f4f7;
}

/* ---- 4b. The ADD VISIT menu's hover ink was still Metronic BLUE. ----
   Hovering an item turned its label and glyph `var(--second-blue-color)` (#1B78C5) — the pre-v3
   accent, the same class of leftover as the #0EB8A9 fills already corrected on this page. This
   menu was simply never in the v3 pass.

   ⚠ ONLY THE INK. Metronic also washes the row #CFEDFB on hover
   (`.kt-nav .calender-menu-schedule.kt-nav__item:hover…`, (0,6,0)) — but that never showed: the
   theme already answers it at (0,8,0) with a neutral #F1F5F9 (slm-theme-v1.css:11676), and hovers
   the icon TILE to white just below it. A background declaration here would be dead code; the fill
   is correct as it stands, and the two rules below are the whole fix.

   The ink is held at its own resting values rather than left to inherit — `color: inherit` is what
   darkened the More menu's items to near-black when that lesson was learned on the table. #2D3748
   and #4A6785 are restated from the resting rules at slm-theme-v1.css:11685 and :11697.

   ⚠ Specificity is why the blue won in the first place, and the numbers are tight. Metronic's
   hover-ink rule is (0,7,0) and the theme's RESTING ink rule is also (0,7,0) — an exact tie, so the
   hover won on nothing more than sitting later in the built bundle. Mirroring the resting selector
   and adding `:hover` to the item lands at (0,8,0), which beats it outright rather than by order.

   ⚠ This cannot be scoped to `.slm-page-opd`. The popover is emitted at the top of the content
   section, OUTSIDE `#kt_content` (index.blade.php:116 vs :155) — verified in the DOM, it is a
   sibling. `.schedule-patient-popover` is the tightest hook available and belongs to exactly two
   pages, this one and Calendar Booking (calendar.blade.php), which render the identical menu from
   the identical markup — so both move together, as they should. */
.slm-ui-theme-v1.popover.schedule-patient-popover .kt-nav.calendar-context-menu .kt-nav__item:hover > .kt-nav__link .kt-nav__link-text {
    color: #2d3748;
}
.slm-ui-theme-v1.popover.schedule-patient-popover .kt-nav.calendar-context-menu .kt-nav__item:hover > .kt-nav__link .kt-nav__link-icon {
    color: #4a6785;
}
/* …and the indicator strip that rides the hovered item, the third blue in this menu. It is a
   `::after` on the link — 5px wide, `opacity: 0` at rest and revealed on hover — and its colour is
   a HARD-CODED #1B78C5 rather than the `--second-blue-color` the ink used, which is why grepping
   for the token alone would not have found it (slm-theme-v1.css, `.kt-nav
   .calender-menu-schedule.kt-nav__item > .kt-nav__link::after`, (0,4,0)).
   Kept as an affordance, just in the v3 accent — the same #0A9184 as the rail's active tile, the
   queue's active tab and the Next Step button. */
.slm-ui-theme-v1.popover.schedule-patient-popover .kt-nav.calendar-context-menu .kt-nav__item > .kt-nav__link::after {
    background: #0a9184;
}

/* ---- 5. Today. ----
   FullCalendar's #FCF8E3 is a bootstrap-era yellow. Replaced by the reference's teal tint, which
   reads as a highlight at column width and as a whisper at cell width. The date itself carries the
   accent so the month grid still marks today even where the tint is subtle. */
.slm-page:is(.slm-page-opd, .slm-page-calendar-booking) #app-calendar td.fc-today {
    background: #ecfaf7;
}
/* …EXCEPT in the DAY view, where the surface goes back to the table's white.
   A "today" tint is a way of picking one column out of several. The day view has exactly one
   column and it is always today, so the tint had nothing to distinguish — it just painted the whole
   grid, and that single wash is what made this tab read as a different product from the queue
   table, whose rows are white. Verified against both views in the browser: the week view keeps the
   tint and still needs it (one lit column among seven), which is why this is scoped to the view
   rather than dropped outright.
   ⚠ Scoped by FullCalendar's own view class on `.fc-view` (`.fc-timeGridDay-view`), so it follows
   the user switching views without any JS. (1,4,1) beats the rule above it at (1,3,1). */
.slm-page:is(.slm-page-opd, .slm-page-calendar-booking) #app-calendar .fc-timeGridDay-view td.fc-today {
    background: #ffffff;
}
.slm-page:is(.slm-page-opd, .slm-page-calendar-booking) #app-calendar .fc-day-number {
    font-size: 12px;
    font-weight: 600;
    color: #344054;
}
.slm-page:is(.slm-page-opd, .slm-page-calendar-booking) #app-calendar .fc-day-top.fc-today .fc-day-number {
    color: #0a9184;
    font-weight: 700;
}
.slm-page:is(.slm-page-opd, .slm-page-calendar-booking) #app-calendar .fc-other-month .fc-day-number {
    color: #98a2b3;
}

/* ---- 6. The time axis was 14.6px/500 in near-black — heavier than the appointments beside it.
   Down to the table's meta line: 11px/600 #667085. The axis column narrows with it, which is why
   the grid gains a little width. ---- */
.slm-page:is(.slm-page-opd, .slm-page-calendar-booking) #app-calendar .fc-axis {
    color: #667085;
    font-size: 11px;
    font-weight: 600;
}

/* ---- 7. "+N more" is a link, so it takes the accent rather than body ink. ---- */
.slm-page:is(.slm-page-opd, .slm-page-calendar-booking) #app-calendar .fc-more {
    color: #0a9184;
    font-size: 11px;
    font-weight: 700;
}

/* ---- 8. List view. Its empty state was a full-card #EEE slab; the table's empty state is white
   with muted ink, and its date headings are the same band as the column header. ---- */
.slm-page:is(.slm-page-opd, .slm-page-calendar-booking) #app-calendar .fc-list-empty {
    background: #ffffff;
    color: #667085;
    font-size: 13px;
}
.slm-page:is(.slm-page-opd, .slm-page-calendar-booking) #app-calendar .fc-list-heading td {
    background: #e2eaf4;
    border-color: #cad6e5;
}
.slm-page:is(.slm-page-opd, .slm-page-calendar-booking) #app-calendar .fc-list-heading .fc-list-heading-main {
    color: #101828;
    font-size: 12px;
    font-weight: 700;
}
.slm-page:is(.slm-page-opd, .slm-page-calendar-booking) #app-calendar .fc-list-heading .fc-list-heading-alt {
    color: #667085;
    font-size: 12px;
    font-weight: 600;
}
.slm-page:is(.slm-page-opd, .slm-page-calendar-booking) #app-calendar .fc-list-item:hover td {
    background: #f2fbf9;
}

/* ---- 9. Blocked bands ("Outside Regular Hours" and friends). ----
   These are background events, and they were rgba(96, 109, 188, .3) — a periwinkle left over from
   the striped version of this rule (style.css:11408, still commented out above it). Against the
   retuned grid it was the loudest thing on the screen, for a band that means "nothing can happen
   here". The reference's neutral tone says that instead.
   ⚠ `!important` IS REQUIRED TWICE OVER HERE. `.custom-block-calendar-stripes` sets the fill with
   `!important` at (0,1,0), AND reception-schedule.js:321-327 then copies the computed colour back
   onto the element as an inline `background` plus a `border-left` — so the inline style has to be
   beaten as well. A flagged declaration outranks an unflagged inline one, which is why this works
   without touching the JS (and touching the JS would have recoloured Calendar Booking and IPD). */
.slm-page:is(.slm-page-opd, .slm-page-calendar-booking) #app-calendar .fc-bgevent.custom-block-calendar-stripes {
    background: #f2f4f7 !important;
    border-color: #d6dae1 !important;
    border-left-color: #d6dae1 !important;
}
.slm-page:is(.slm-page-opd, .slm-page-calendar-booking) #app-calendar .background-event-text {
    color: #475467;
    font-size: 11px;
    font-weight: 600;
}

/* ---- 10. The mini datepicker. ----
   Its head row is the table's column header in miniature, its days are body ink, and its two
   coloured states split the way the reference's tones do: TODAY is the teal TINT (a fact about the
   date), SELECTED is the SOLID accent (a choice the user made). They were the reverse of each
   other in weight before — a 70%-opacity teal for today and a full one for selected, two shades of
   the same colour that read as a rendering artifact when they sit side by side, which is exactly
   what happens on the day after today.
   ⚠ `!important` on both, and NOT for specificity: [datepicker-teal-v2] in slm-theme-v1.css sets
   `td.day.today` with `!important` (itself only there to beat the vendor bundle's `!important`),
   so the chain has to be continued. The selected arms are flagged for symmetry with it — the
   vendor rule they descend from is unflagged, and (1,3,3) would have won on its own. */
.slm-page:is(.slm-page-opd, .slm-page-calendar-booking) #calendarFromDate .datepicker th.datepicker-switch {
    color: #101828;
    font-size: 13px;
    font-weight: 700;
}
.slm-page:is(.slm-page-opd, .slm-page-calendar-booking) #calendarFromDate .datepicker th.prev,
.slm-page:is(.slm-page-opd, .slm-page-calendar-booking) #calendarFromDate .datepicker th.next {
    color: #475467;
    border-radius: 8px;
}
.slm-page:is(.slm-page-opd, .slm-page-calendar-booking) #calendarFromDate .datepicker th.prev:hover,
.slm-page:is(.slm-page-opd, .slm-page-calendar-booking) #calendarFromDate .datepicker th.next:hover {
    background: #f2f4f7;
}
.slm-page:is(.slm-page-opd, .slm-page-calendar-booking) #calendarFromDate .datepicker th.dow {
    color: #667085;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .55px;
    text-transform: uppercase;
}
.slm-page:is(.slm-page-opd, .slm-page-calendar-booking) #calendarFromDate .datepicker tbody td.day {
    color: #344054;
    font-size: 12.5px;
    font-weight: 500;
    border-radius: 8px;
}
.slm-page:is(.slm-page-opd, .slm-page-calendar-booking) #calendarFromDate .datepicker tbody td.day:hover {
    background: #f2f4f7;
}
.slm-page:is(.slm-page-opd, .slm-page-calendar-booking) #calendarFromDate .datepicker tbody td.day.old,
.slm-page:is(.slm-page-opd, .slm-page-calendar-booking) #calendarFromDate .datepicker tbody td.day.new {
    color: #98a2b3;
}
.slm-page:is(.slm-page-opd, .slm-page-calendar-booking) #calendarFromDate .datepicker tbody tr > td.day.today {
    background: #ecfaf7 !important;
    color: #0a9184 !important;
    font-weight: 700;
}
.slm-page:is(.slm-page-opd, .slm-page-calendar-booking) #calendarFromDate .datepicker tbody tr > td.day.active,
.slm-page:is(.slm-page-opd, .slm-page-calendar-booking) #calendarFromDate .datepicker tbody tr > td.day.active:hover,
.slm-page:is(.slm-page-opd, .slm-page-calendar-booking) #calendarFromDate .datepicker tbody tr > td.day.selected,
.slm-page:is(.slm-page-opd, .slm-page-calendar-booking) #calendarFromDate .datepicker tbody tr > td.day.selected:hover {
    background: #0a9184 !important;
    color: #ffffff !important;
    font-weight: 700;
}

/* ---- 11. The "All doctors" card. ----
   Its fill is `--doctor-color`, and reception-schedule.js:44 hard-codes #1BC5BD for this one card
   — Metronic's teal, not the page's. The other cards in the list take a REAL doctor's colour
   through the same variable, so the variable itself must not be touched; only the "all" card's
   painted result is overridden, and only on this page.
   (0,4,0) against the theme's (0,3,0) at slm-theme-v1.css:11193. ---- */
.slm-page:is(.slm-page-opd, .slm-page-calendar-booking) .doctor-list .slm-doctor-card--all .fc-content {
    background: #0a9184;
    border-color: #0a9184;
}
/* ===== [opd-calendar-v3] END ===== */

/* ===== [opd-calendar-v4-surface] BEGIN — a second pass on the Calendar tab's GRID, 2026-08-27.
   [opd-calendar-v3] above brought the tab's chrome onto the queue table's language — toolbar,
   card, axis, list view, datepicker. It did not touch the two things you actually look at: the
   appointment chip and the surface it sits on. Same rule as that block: nothing here invents a
   value, every one is already on the queue table.
   SCOPE IS SPLIT IN TWO HERE, and the split is the point:
     • THE CHIP rules also carry `.slm-page-ipd`. IPD Reception had the identical fault this block
       opens with — FullCalendar's `.fc-time` and the appended `.slm-chip-time` both printing the
       range, colliding on one line and clipped by the row — because it runs the same eventRender
       from the same bundle. Fixing the chip there was asked for on 2026-08-27 and is what these
       17 rules do.
     • THE SURFACE rules do NOT: the day-header band, slot rules, axis, now-indicator, rounded
       frame, list view, datepicker and toolbar arrows stay `:is(.slm-page-opd,
       .slm-page-calendar-booking)`. IPD Reception keeps its own grid; only the broken chip moves.
   If IPD is ever meant to take the whole pass, add the branch to the remaining rules rather than
   dropping the prefix — see the weight note at the top of v3. ===== */

/* ---- 1. The chip printed its time TWICE, on one line, over its own name.
   FullCalendar renders `.fc-time` from the event's start/end, and reception-schedule.js:463 then
   appends the SAME range again as `.slm-chip-time` — which had no CSS anywhere in the project, so
   it landed as inline text straight after the title. The chip read
   "10:05 - 10:50 | KOTECHA HARDIK NARENDRABHAI10:05 AM - 10:50 AM", with the overflow clipped by
   the row. FC's own copy goes; the appended one is kept because it is the formatted one
   (`h:mm A`) and the one the app controls. ---- */
.slm-page:is(.slm-page-opd, .slm-page-calendar-booking, .slm-page-ipd) #app-calendar .fc-timeGridDay-view .fc-time-grid-event .fc-time {
    display: none;
}

/* ⚠ DAY VIEW ONLY, AND THE OTHER THREE VIEWS EACH NEED THE OPPOSITE. The chip below reserves
   104px at its right for the appended range, which only exists because the day view's chip is the
   full width of the grid. Applied everywhere it would be wrong:
     • WEEK — seven columns, so a chip is ~180px; reserving 104px of it for a time leaves ~76px
       for a name. Week keeps FullCalendar's own compact `.fc-time` ("10:05a") inline instead and
       drops the appended range.
     • MONTH — one line per event in a day cell, and FC already prints "8:35a" in front of the
       title. The appended range was landing straight after the name with nothing between them
       ("KOTECHA HARDIK NARENDRABHAI8:35 AM - 9:05 AM"), the same collision this block fixes in the
       day view, in a box far too narrow to fix the same way.
     • LIST — renders `.fc-list-item-title`, not `.fc-title`, so eventRender's append finds
       nothing and there is nothing to undo. */
.slm-page:is(.slm-page-opd, .slm-page-calendar-booking, .slm-page-ipd) #app-calendar .fc-timeGridWeek-view .slm-chip-time,
.slm-page:is(.slm-page-opd, .slm-page-calendar-booking, .slm-page-ipd) #app-calendar .fc-dayGridMonth-view .slm-chip-time {
    display: none;
}

/* ONE line, which is what makes the chip immune to its own height. A stacked name-over-time chip
   needs ~38px and the shortest booking renders at `timeGridEventMinHeight: 30`
   (reception-schedule.js), so stacking would clip on any short appointment. */
.slm-page:is(.slm-page-opd, .slm-page-calendar-booking, .slm-page-ipd) #app-calendar .fc-time-grid-event .fc-content {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
    padding: 5px 9px;
    box-sizing: border-box;
}
/* BOTH time-grid views. `.fc-title` is the chip's row: badges, then the name, then the time —
   laid out the way 2g lays out its block (`display:flex; align-items:center; gap:8px`).
   ⚠ THE 104px RIGHT-HAND RESERVE IS GONE, and with it the dead gap it created. The time used to
   be pinned to the chip's far right because the name was a bare text node that could not be a
   flex item; eventRender now wraps it in `.slm-chip-name`, so the two can sit together and the
   name can still ellipsise. On a full-width day chip the old layout put the time a hand's width
   away from the patient it belonged to. */
.slm-page:is(.slm-page-opd, .slm-page-calendar-booking, .slm-page-ipd) #app-calendar .fc-time-grid-event .fc-title {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    color: #101828;
    overflow: hidden;
}
/* The name takes the free space and gives way first; everything else on the row is fixed. */
.slm-page:is(.slm-page-opd, .slm-page-calendar-booking, .slm-page-ipd) #app-calendar .fc-time-grid-event .fc-title .slm-chip-name {
    flex: 0 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* WEEK SHOWS THE NAME AND NOTHING ELSE, and the earlier attempt at this was wrong.
   It used to keep FullCalendar's compact time in front of the name, on the reasoning that a week
   chip is ~175px wide and has room for both. That is only true of a chip with no neighbours. As
   soon as two bookings overlap — the normal case on a real board, and the whole reason
   `slotEventOverlap: false` is set — the column splits into lanes and a chip is 40-60px. FC's
   time prefix measures 66.6px and was `flex: 0 0 auto`, so it took the whole chip and the NAME
   was squeezed to ZERO WIDTH. Measured at 1100px and 1400px: chip 42px and 56px, name 0px in
   both, with the time overflowing.
   The name is the only thing worth seeing at that size. The time is already given by the row the
   chip sits on — more precisely now that rows are 15 minutes — and by the appended range in the
   day view and the hover card everywhere. */
.slm-page:is(.slm-page-opd, .slm-page-calendar-booking, .slm-page-ipd) #app-calendar .fc-timeGridWeek-view .fc-time-grid-event .fc-time {
    display: none;
}
.slm-page:is(.slm-page-opd, .slm-page-calendar-booking, .slm-page-ipd) #app-calendar .fc-time-grid-event .slm-chip-time {
    /* 2g prints this as quiet meta beside the name rather than a second headline: 9px #7C8B8F
       against a 12px near-black name, 8px clear of it. A touch larger here because we do not have
       the reference's mono. */
    flex: 0 0 auto;
    font-size: 10px;
    font-weight: 500;
    line-height: 1;
    color: #7c8b8f;
    /* The times are the one place on this screen where figures line up column-wise. */
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* The chip box. ⚠ `border-radius` NEEDS THE FLAG: reception-schedule.js:325 writes
   `border-radius: 0` as an INLINE style in eventRender, and an inline declaration beats any
   selector without it. The 3px left accent it also writes inline is kept — it carries the
   status colour and is the only per-event colour on the chip. */
.slm-page:is(.slm-page-opd, .slm-page-calendar-booking, .slm-page-ipd) #app-calendar .fc-time-grid-event {
    /* 7px, off concept 2g's booking block. */
    border-radius: 7px !important;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .06);
}
/* A gap at the column's right edge so chips stop short of the grid line instead of welding to it. */
.slm-page:is(.slm-page-opd, .slm-page-calendar-booking, .slm-page-ipd) #app-calendar .fc-time-grid .fc-event-container {
    margin-right: 8px;
}
.slm-page:is(.slm-page-opd, .slm-page-calendar-booking, .slm-page-ipd) #app-calendar .fc-time-grid-event:hover {
    box-shadow: 0 2px 8px rgba(16, 24, 40, .12);
}

/* ---- 2. The day header was a solid #E2EAF4 slab over a #CAD6E5 rule — the heaviest band on the
   screen, sitting above the lightest surface. White with a single hairline, the way the queue
   table's own head reads once you are looking at a grid rather than a list.
   ⚠ THE HEADER RULES CARRY THE IPD BRANCH; THE REST OF THE SURFACE STILL DOES NOT. Added
   2026-08-27 so the header band reads the same on all three boards — it had landed on IPD in
   4595df522b while the cell around it kept FullCalendar's own styling, so the day name read
   "Thursday" there against "THURSDAY" everywhere else.
   ⚠ IT TAKES BOTH THIS RULE AND THE v3 ONE IT OVERRIDES. `text-transform: uppercase` and the
   700 weight live in [opd-calendar-v3]'s header rule; only the ground, the hairline, the colour,
   the size and the padding are restated here. Widening one without the other leaves the day name
   in sentence case, which is exactly what it looked like before this. ---- */
.slm-page:is(.slm-page-opd, .slm-page-calendar-booking, .slm-page-ipd) #app-calendar .fc-head .fc-head-container,
.slm-page:is(.slm-page-opd, .slm-page-calendar-booking, .slm-page-ipd) #app-calendar .fc-head .fc-day-header {
    background: #ffffff;
}
.slm-page:is(.slm-page-opd, .slm-page-calendar-booking, .slm-page-ipd) #app-calendar .fc-head .fc-head-container {
    border-bottom: 1px solid #e5e7eb;
}
.slm-page:is(.slm-page-opd, .slm-page-calendar-booking, .slm-page-ipd) #app-calendar .fc-head .fc-day-header {
    color: #667085;
    font-size: 10.5px;
    letter-spacing: .7px;
    padding: 12px 8px;
}

/* ---- 3. Slot rules, at concept 2g's weight. v3 painted every border in the grid the table's
   #DDE3EC, which on a time grid means thirty identical lines down an empty day. 2g draws its row
   rules at #F4F7F7 and the axis separator at #F0F4F4 — barely there, so the eye reads the column
   edge first and the slots as texture. Both values are read off the reference, not invented. ---- */
.slm-page:is(.slm-page-opd, .slm-page-calendar-booking) #app-calendar .fc-time-grid .fc-slats td {
    border-color: #f4f7f7;
}
.slm-page:is(.slm-page-opd, .slm-page-calendar-booking) #app-calendar .fc-time-grid .fc-slats .fc-axis {
    border-color: #f0f4f4;
}
/* The axis type follows it down: 2g sets 10.5px right-aligned in a 66px column, against v3's
   11px/600. Weight comes off it too — in 2g the hour labels read by position and colour, not by
   being bold. `tabular-nums` stands in for the reference's mono, which this project does not
   serve (see the font note in slm-theme-v1.css). */
.slm-page:is(.slm-page-opd, .slm-page-calendar-booking) #app-calendar .fc-axis {
    font-size: 10.5px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
}

/* ---- 4. "Now" — FullCalendar draws a 2px flat red bar edge to edge. Kept red (it is the one
   thing on the grid that should not be brand-coloured) but thinned, with the dot the arrow-less
   bar was missing. ---- */
.slm-page:is(.slm-page-opd, .slm-page-calendar-booking) #app-calendar .fc-now-indicator-line {
    border-top-width: 1.5px;
    border-color: #e5484d;
}
/* ⚠ THE ARROW IS A CSS TRIANGLE — RECOLOUR IT, NEVER RESIZE IT. FullCalendar draws it with
   `border-width: 5px 0 5px 6px` and transparent top/bottom, so only ONE border edge paints
   (opd-front-desk-combine.css; the `.fc-rtl` arm mirrors it to `5px 6px 5px 0`). A first cut here
   set `border-width: 5px` and the `border-color` SHORTHAND, which gave all four edges a width and
   a colour — the triangle became a solid 10px red SQUARE sitting in the axis gutter, and the RTL
   arm was flattened with it. Only the two side colours are named below; the widths and the
   transparent top/bottom stay FullCalendar's. */
.slm-page:is(.slm-page-opd, .slm-page-calendar-booking) #app-calendar .fc-now-indicator-arrow {
    border-left-color: #e5484d;
    border-right-color: #e5484d;
}

/* ---- 5. The case-type mark on the chip. reception-schedule.js prepends `.newPatient` into the
   title with one of four labels — N (new), I (IPD), Online, Visitor — and the only styling it has
   anywhere is a global rule at :3335: white background, #0ECCA6 ink, 9.1px, no radius, no vertical
   padding. On the tinted chip that renders as a pale 9px box welded to the first letter of the
   name, which is what it looked like before this: an artefact rather than a mark.
   A proper pill instead, sized off its own text so all four labels fit.
   ⚠ THIS ONE NOW REACHES IPD TOO, and deliberately. `.newPatient` is prepended by
   ipd/schedule/reception.js:573 onto the IPD board's chips as well, and the badge is part of the
   chip — leaving it on the global rule at :3335 would have fixed IPD's chip while leaving the pale
   9px box welded to the name inside it. The global rule still serves every other user of the
   class. ---- */
.slm-page:is(.slm-page-opd, .slm-page-calendar-booking, .slm-page-ipd) #app-calendar .fc-event .fc-title .newPatient {
    display: inline-block;
    padding: 1px 5px;
    margin-right: 6px;
    border-radius: 4px;
    background: #ffffff;
    color: #0a9184;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .3px;
    line-height: 1.5;
    vertical-align: 1px;
}

/* ---- 6. THE GREY DOT ON THE FIRST LETTER OF EVERY NAME.
   Metronic decorates every calendar event with a 10px dot —
   `.fc-unthemed .fc-event .fc-content::before { position:absolute; height:10px; width:10px;
   border-radius:50%; top:.7rem; left:.75rem }`, filled #E2E5EC on `.fc-start`
   (style.bundle.css). It was drawn for its own tall, stacked event block, where the dot sits
   above the text. On this chip — one line, text starting 12px in — it lands exactly on the
   name's first character and reads as a rendering fault: "NIRAV" came out as a pale blob
   followed by "IRAV".
   It goes rather than moves. The chip already carries the status colour as the 3px left accent
   that eventRender writes inline (reception-schedule.js:325), so a second status mark 12px away
   would be the same cue twice — the thing the rail's selected item and the queue's scorecards
   were both cut back for.
   (1,3,0) against Metronic's (0,3,0), so no `!important` is needed. ---- */
.slm-page:is(.slm-page-opd, .slm-page-calendar-booking, .slm-page-ipd) #app-calendar .fc-event .fc-content::before {
    display: none;
}

/* ---- 7. The grid's own corners. The card around it is 14px
   (`#calendar-wizard .kt-portlet`, [opd-calendar-v3] rule 1) but the grid inside it drew a hard
   square frame — the border lives on FullCalendar's own cells (`.fc-head-container` and the body
   cells), and `.fc-view-container` carries no border, no radius and no background of its own. The
   result was a square box sitting inside a rounded one.
   12px against the card's 14px: an inner frame reads as concentric when its radius is a little
   tighter than the one outside it, never when the two match.
   ⚠ `overflow: hidden` IS REQUIRED — the radius alone would do nothing, since the lines being
   rounded are drawn by descendants. The clipping it adds is all but free here, and that is checked
   rather than assumed: `.fc-time-grid-container` is ALREADY `overflow: hidden`
   (FullCalendar's own scroller), so everything inside the grid is clipped at a boundary 1px inside
   this one already. What this adds is the head row and the twelve rounded pixels at each corner.
   THE TWO THINGS THAT COULD HAVE BEEN CLIPPED, both checked in a browser rather than reasoned
   about, because the answers are not what they look like:
     • The appointment tooltip — SAFE, and not for the reason you would guess. It is a Bootstrap
       tooltip with no `container` option (reception-schedule.js:420), and Bootstrap 4 renders
       `container: false` by appending to <body>, NOT into the trigger's parent. Measured:
       `tip.parentElement` is BODY and `.fc-view-container.contains(tip)` is false, so nothing here
       can reach it.
     • The month view's "+N more" popover — clipped in principle: `.fc-popover` IS a child of
       `.fc-view`, inside this box. It survives because FullCalendar positions it to fit within the
       view container, which is the very box being clipped to. Measured with `eventLimit: 2` (the
       app's own setting, reception-schedule.js:255) on the month grid's LAST row, the worst case:
       the popover ended 200px above the container's bottom edge and hit-testing its bottom edge
       still returned its own content.
   If a future tip ever does get clipped, the fix is `container: 'body'` on that init, not dropping
   this rule. ---- */
.slm-page:is(.slm-page-opd, .slm-page-calendar-booking) #app-calendar .fc-view-container {
    border: 0.8px solid #dde3ec;
    border-radius: 12px;
    overflow: hidden;
    background: #ffffff;
}
/* ⚠ AND THE FRAME HAS TO COME OFF THE CELLS, or it is drawn twice and the corner stays square.
   A first cut set only `border-radius` + `overflow` here and it did NOT work: the lines being
   rounded are drawn by DESCENDANTS — exactly two of them, the `td.fc-head-container` in the outer
   table's <thead> and the `td.fc-widget-content` in its <tbody>, each carrying a 0.8px border on
   all four sides. Clipping a straight line at a rounded boundary does not curve it, it CUTS it:
   the corner came out as a square line ending in mid-air a few pixels short, which is what was
   reported. The border moves up to the rounded box and the two cells give up their outer edges.
   The head keeps its BOTTOM border — that is the rule under the day names, not part of the frame.
   Scoped `> table > thead|tbody > tr > td` so it reaches only those two outer cells and never the
   grid's own slat and axis lines nested inside them. */
.slm-page:is(.slm-page-opd, .slm-page-calendar-booking) #app-calendar .fc-view > table > thead > tr > td.fc-head-container {
    border-top: 0;
    border-left: 0;
    border-right: 0;
}
.slm-page:is(.slm-page-opd, .slm-page-calendar-booking) #app-calendar .fc-view > table > tbody > tr > td.fc-widget-content {
    border: 0;
}
/* List view brings its own bordered box (`.fc-list-view`, FullCalendar's own 1px), which would sit
   inside the frame above as a second line. The container is the frame in every view. */
.slm-page:is(.slm-page-opd, .slm-page-calendar-booking) #app-calendar .fc-list-view {
    border: 0;
}

/* ---- 8. OUT-OF-HOURS STAYS GREY — A ROUND TRIP, RECORDED SO IT IS NOT REPEATED.
   Concept 2g in "OPD Calendar Concepts.dc.html" calls for "a cream wash for out-of-hours instead
   of a grey slab", and it was applied here: band rgb(253,250,243), caption rgb(179,159,116) at
   9px/.9px tracking, both measured off the rendered reference. It was reverted on sight
   (2026-08-27): "this is gray before changes which is good to show disable".
   THE REFERENCE IS NOT WRONG, IT IS ANSWERING A DIFFERENT QUESTION. Cream reads as "closed" — a
   property of the schedule. Grey reads as "disabled" — a property of the CONTROL, i.e. you cannot
   book here. On this screen the band is a thing you click into, so the second meaning is the one
   that has to land, and grey is the app's own word for it: the same neutral it uses on every
   disabled control. The band therefore keeps the [opd-calendar-v3] values below.
   If a warm treatment is ever revisited, the caption's smaller uppercase setting is separable from
   the fill and was never the thing objected to. ---- */

/* ---- 9. The mini datepicker drew a SECOND frame inside its card.
   `.datepicker.datepicker-inline { border: 1px solid #ebedf2 }` (style.bundle.css) is Metronic's
   box for a datepicker that stands on its own. Here it does not: it sits inside a `.kt-portlet`
   that already supplies the card — border, 14px radius and the `.p-3` inset
   (newcalendar/index.blade.php:771-773) — so the two rendered as a rounded card with a square box
   ruled inside it, one hairline in from the edge on all four sides.
   The card is the frame; the datepicker is its contents. (1,4,0) against Metronic's (0,2,0), so no
   `!important`. ---- */
.slm-page:is(.slm-page-opd, .slm-page-calendar-booking) #calendarFromDate .datepicker.datepicker-inline {
    border: 0;
}

/* ---- 10. THE PREV ARROW VANISHED ONCE YOU CLICKED IT — white ink on a near-white button.
   Two rules in slm-theme-v1.css own the arrow's colour and neither knows about the v3 toolbar:
     `.fc-unthemed .fc-toolbar .fc-button .fc-icon { color: #a7abc3 }`   (resting)
     `.fc-button:hover .fc-icon { color: #fff !important }`             (hover)
   The white was correct when a hovered FullCalendar button went dark, which is what Metronic's own
   toolbar does. [opd-calendar-v3] made the hover `#F2F4F7` instead — near-white — and the icon
   rule was never brought with it, so hovering turned the chevron white on near-white. Clicking
   leaves the pointer on the button, so the arrow simply disappeared and stayed gone.
   `color: inherit` in BOTH states is the whole fix, and it is better than restating a value: the
   icon then follows whatever the button's own `color` is — #344054 resting, #101828 hovered,
   #98A2B3 disabled — so the three states can never drift apart again.
   ⚠ The hover arm needs `!important` to answer the theme's, and it wins on (1,5,0) against
   (0,2,0). The resting arm does not: (1,5,0) beats (0,4,0) outright.
   ⚠ THE GLYPHS THEMSELVES ARE FINE and come from SLMicon via `.fc-icon-*-single-arrow:before`
   in the theme, which also `display:none`s FullCalendar's own `:after` chevrons. Nothing here
   touches either — this is colour only. ---- */
.slm-page:is(.slm-page-opd, .slm-page-calendar-booking) #app-calendar .fc-toolbar .fc-button .fc-icon {
    color: inherit;
}
.slm-page:is(.slm-page-opd, .slm-page-calendar-booking) #app-calendar .fc-toolbar .fc-button:hover .fc-icon {
    color: inherit !important;
}

/* ---- 11. Month chips ellipsise too. The nowrap/ellipsis in rule 1 is scoped to
   `.fc-time-grid-event`, so a month cell — the narrowest box any chip lives in — was still
   cutting the name mid-word with no "…" to say so ("Kadivar Pratik" for
   "Kadivar Pratik Rameshbhai"). Same treatment, adapted: the time prefix FullCalendar prints in
   this view refuses to shrink and the name ellipsises around it. ---- */
.slm-page:is(.slm-page-opd, .slm-page-calendar-booking, .slm-page-ipd) #app-calendar .fc-day-grid-event .fc-content {
    display: flex;
    align-items: center;
    gap: 4px;
    overflow: hidden;
}
.slm-page:is(.slm-page-opd, .slm-page-calendar-booking, .slm-page-ipd) #app-calendar .fc-day-grid-event .fc-content .fc-time {
    flex: 0 0 auto;
}
.slm-page:is(.slm-page-opd, .slm-page-calendar-booking, .slm-page-ipd) #app-calendar .fc-day-grid-event .fc-content .fc-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* …AND ITS TYPE IS STATED OUTRIGHT rather than inherited. A month cell is the densest place a
       name appears — up to two chips plus a "+N more" in a box a few centimetres wide — so it
       wants LESS weight than the day view's chip, not the same. Reported as "too much bold"
       (2026-08-27).
       ⚠ SIZE, WEIGHT AND COLOUR ARE ALL NAMED ON PURPOSE. Left to inherit, this title picked up
       whatever won between FullCalendar's `.fc-event { font-size: .85em }`, the theme's
       `.fc-unthemed .fc-event .fc-title { font-size: .9rem; font-weight: 500 }` and Metronic's
       event ink — a chain that resolves differently depending on which bundles a page loads, and
       which is why the same markup measured 11.7px/500 in an isolated harness while reading far
       heavier and darker on the page. Naming all three ends that dependence.
       One step lighter than the day chip's 12px/600/#101828, deliberately: the day chip is a
       headline in its row, this one is an entry in a list. */
    font-size: 11.5px;
    font-weight: 500;
    color: #344054;
}
/* The time prefix FullCalendar puts in front of it stays quieter still — it is a label, not the
   subject, exactly as in the week view. */
.slm-page:is(.slm-page-opd, .slm-page-calendar-booking, .slm-page-ipd) #app-calendar .fc-day-grid-event .fc-content .fc-time {
    font-size: 11px;
    font-weight: 500;
    color: #667085;
    font-variant-numeric: tabular-nums;
}

/* ---- 12. The Online and Visitor tags keep a hue of their own.
   ⚠ THESE NO LONGER MATCH A LEFT BAR. They were introduced to agree with a type-coloured bar;
   that bar is the doctor's colour again, so these are simply two labelled tags that are tinted to
   tell them apart at a glance. They are safe because each one SAYS what it is — unlike a bare
   colour, a tinted word needs no key.
   Only the INK moves; the white pill, the radius and the 9px/700 stay the shared `.newPatient`
   recipe above, so the tags remain one family.
   ⚠ 'N' AND 'I' KEEP THE TEAL and are not in this list. They are CASE type (new patient, IPD
   referral), not VISIT type — a different fact that happens to share the pill. Colouring them by
   the same scale would imply a relationship to the bar that does not exist. ---- */
.slm-page:is(.slm-page-opd, .slm-page-calendar-booking, .slm-page-ipd) #app-calendar .fc-event .fc-title .newPatient.slm-type-tag--online {
    color: #3f6f9e;
}
.slm-page:is(.slm-page-opd, .slm-page-calendar-booking, .slm-page-ipd) #app-calendar .fc-event .fc-title .newPatient.slm-type-tag--visitor {
    color: #7a6f9e;
}

/* ---- 13. The day view's header band — day name, booking count, doctor scope, and the TYPE KEY.
   Concept 2g draws "TIME | THURSDAY · 38 BOOKINGS · ALL DOCTORS" with a key on the right, and
   the key is the reason this exists: the chip's left bar was given a meaning (teal appointment,
   amber walk-in, blue online) and a colour code nobody has been told about is decoration. This is
   the sentence that makes those bars readable. The text is built in reception-schedule.js.

   ⚠ THE CELL BECOMES A ROW, WHICH MOVES THE DAY NAME OFF CENTRE. That is 2g's layout, not an
   accident: the band reads left to right — day, then facts about it — with the key pushed to the
   far edge. Centring would leave nowhere for either.
   ⚠ DAY VIEW ONLY, and scoped by FullCalendar's own view class so it follows the user switching
   views with no JS. Week and month have seven of these cells; a count per column is a different
   design and 2g does not draw one.
   ⚠ ALL THREE BOARDS. OPD, Calendar Booking and IPD Reception all render into `#app-calendar`
   and all three now build the band from the same helper in common-function.js, so the scope has
   the IPD branch too. ---- */
.slm-page:is(.slm-page-opd, .slm-page-calendar-booking, .slm-page-ipd) #app-calendar .fc-timeGridDay-view .fc-head .fc-day-header {
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: left;
}
/* The count and scope are a footnote to the day, so they drop the caps and the tracking the day
   name carries and sit a step lighter. */
.slm-page:is(.slm-page-opd, .slm-page-calendar-booking, .slm-page-ipd) #app-calendar .fc-timeGridDay-view .slm-cal-head-meta {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .2px;
    text-transform: none;
    color: #98a2b3;
}
/* ⚠ THE TYPE KEY'S RULES WERE HERE AND ARE GONE. They styled a swatch-and-label key explaining a
   teal/amber/blue left bar; the bar went back to the DOCTOR'S colour on request (2026-08-27), so
   the key described nothing and was removed from reception-schedule.js. Deleted rather than left
   behind, so nothing here claims a colour code the chips do not use. */
/* 2g labels the axis column "TIME". It never changes, so it is `content` rather than markup. */
.slm-page:is(.slm-page-opd, .slm-page-calendar-booking, .slm-page-ipd) #app-calendar .fc-timeGridDay-view .fc-head .fc-axis::after {
    content: "Time";
    display: block;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #98a2b3;
    text-align: right;
    padding-right: 10px;
}
/* ===== [opd-calendar-v4-surface] END ===== */


/* ===== [calendar-blocked-tooltip] BEGIN — the blocked-band tooltip, down to the app's standard
   tooltip chip. 2026-08-25.

   WHY IT WAS HUGE. reception-schedule.js:359-420 builds the tooltip TEMPLATE itself, and it builds
   two different ones. The appointment tooltip got a purpose-made widget (`.slm-appt-card`,
   slm-theme-v1.css:12875). The "Outside Regular Hours" branch at :361 never did — it is still a
   whole generic Metronic card:
       .kt-portlet > .kt-portlet__body.bg-white > .row > .col-12 > .kt-user-card-v2
         > .kt-user-card-v2__details > .kt-user-card-v2__name.user-name-label
   So a one-word label was being rendered through the PATIENT NAME recipe (16.9px/600 black) inside
   a portlet body (10px 18px) inside a grid row, on white. 208x52px for two words. Nothing was
   wrong with the CSS; the label was simply wearing a patient card.
   This shrinks that card to the tooltip the rest of the app uses — the values are copied from
   `.tooltip .tooltip-inner` at style.css:6791: #111827, 11px/500, .2px tracking, 5px 10px, 8px
   radius, 240px cap, and the same shadow. Result 140x26px, and long reasons wrap at 240px instead
   of running off.

   ⚠ THIS IS THE ONE BLOCK ON THIS PAGE THAT CANNOT CARRY `.slm-page-opd`, AND THAT IS NOT AN
   OVERSIGHT. Bootstrap 4 appends a tooltip to `document.body` whenever `container` is false (the
   default, and reception-schedule.js:420 passes no container), so the tip is a sibling of
   #kt_content, not a descendant — no page-scoped ancestor selector can reach it, and `<body>`
   carries no per-page class to key off. The reach is therefore whatever loads
   reception-schedule.js, which is `opd-front-desk-combine.js`: THIS page (index.blade.php:1082) and
   Calendar Booking (calendar.blade.php:404). Both render the identical template from the identical
   branch, so both had the identical oversized tooltip — this fixes the same defect in both rather
   than making them diverge. IPD reception is NOT affected: it ships its own
   ipd/schedule/reception.js, which never emits `.calendar-tooltip`.
   To confine it to OPD later, the template in reception-schedule.js would have to carry a
   page-specific class — a JS change, and one that would have to be threaded through both callers.

   ⚠ `:not(:has(.slm-appt-card))` IS LOAD-BEARING. Both tooltips share `.calendar-tooltip`, so
   without the guard this would flatten the appointment card — a 360px widget with its own header,
   pills, grid and indicator stripe — into a dark chip. It mirrors the theme's existing
   `.calendar-tooltip:has(.slm-appt-card)` at slm-theme-v1.css:12877, which is the positive half of
   the same split. Verified after the change: the appointment tip still measures 360x192 on white.
   ===== */

/* Bootstrap's `.tooltip.show` sets opacity .9; a solid chip is what the rest of the app shows. */
.tooltip.calendar-tooltip:not(:has(.slm-appt-card)) {
    opacity: 1;
    max-width: 240px;
}

/* The portlet becomes the chip shell. `.calendar-tooltip .kt-portlet` at style.css:12307 puts a
   `border: 1px solid` on it (colourless, so it picks up currentColor) — that is the hairline
   visible around the old white box, and it goes with the white. */
.tooltip.calendar-tooltip:not(:has(.slm-appt-card)) .kt-portlet {
    margin: 0;
    border: 0;
    border-radius: 8px;
    background: #111827;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .25);
}

/* ⚠ `!important` here beats `.bg-white`, which the TEMPLATE hard-codes on this element and which
   Bootstrap declares `!important` — not a specificity crutch, (0,4,0) already outranks its (0,1,0). */
.tooltip.calendar-tooltip:not(:has(.slm-appt-card)) .kt-portlet__body {
    padding: 5px 10px;
    background: #111827 !important;
    border-radius: 8px;
}

/* The template wraps the label in a grid row for no reason; the row's -15px margins and the
   column's 15px padding are what set the old box's width floor. */
.tooltip.calendar-tooltip:not(:has(.slm-appt-card)) .row {
    margin: 0;
}
.tooltip.calendar-tooltip:not(:has(.slm-appt-card)) [class*="col-"] {
    padding: 0;
}

/* The label itself: patient-name recipe → tooltip text. `white-space: normal` rather than nowrap so
   a long blocked-reason wraps inside the 240px cap instead of running off the edge. */
.tooltip.calendar-tooltip:not(:has(.slm-appt-card)) .kt-user-card-v2__name {
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .2px;
    line-height: 1.45;
    color: #ffffff;
    white-space: normal;
}
/* ===== [calendar-blocked-tooltip] END ===== */

/* ===== [opd-table-skeleton] BEGIN — the queue table's loading state =====
   Replaces a centred spinner over the words "Please Wait" on an empty strip. That told the user
   only that SOMETHING was happening: the table went blank, then snapped back with rows, and on a
   list that reloads on every tab switch, filter change and poll, that flash was most of what they
   saw. This keeps the table's own shape on screen while it loads — the row grid, the columns, and
   roughly how much text each cell holds — so nothing jumps when the real rows arrive.

   The markup is built in common-schedule.js (slmTableSkeletonHtml); the column ratios there and the
   grid here are the same numbers, taken from the reference's `gridCols` for the queue tabs.
   ⚠ NOT SCOPED TO A PAGE CLASS, DELIBERATELY. Every selector here is under `.slm-tbl-skeleton`,
   which exists only in markup this file's own builder creates, so it cannot reach another screen.
   Scoping it to `.slm-page-opd` would in fact be the riskier choice — the same loader runs on the
   doctor's My Office view, which does not carry that class. */
.slm-tbl-skeleton {
    width: 100%;
    padding: 2px 0 0;
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
}
.slm-tbl-skeleton .slm-sk-row {
    display: grid;
    grid-template-columns: 42px 2.1fr 1fr 1.25fr 1.55fr 1.05fr 1.5fr;
    gap: 0 18px;
    align-items: start;
    padding: 16px 18px;
    border-bottom: 1px solid #eef1f5;
}
.slm-tbl-skeleton .slm-sk-row:last-child {
    border-bottom: 0;
}
.slm-tbl-skeleton .slm-sk-cell {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}
/* Billing is a right-aligned column in the real table, so its placeholder lines are too. */
.slm-tbl-skeleton .slm-sk-cell.is-right {
    align-items: flex-end;
}
.slm-tbl-skeleton .slm-sk-bar {
    height: 9px;
    border-radius: 999px;
    /* Three stops, not two: the pale band has to be able to travel ACROSS the bar, which needs
       ground on both sides of it. `background-size` is oversized for the same reason — the sweep is
       a background-position animation, so the gradient must be wider than the box it moves in. */
    background: linear-gradient(90deg, #eceff3 25%, #f6f8fa 37%, #eceff3 63%);
    background-size: 400% 100%;
    animation: slm-sk-shimmer 1.4s ease-in-out infinite;
}
/* The patient's name is the one line in the row that is set larger, so its placeholder is too —
   this is what stops the block reading as seven identical grey columns. */
.slm-tbl-skeleton .slm-sk-cell:nth-child(2) .slm-sk-bar:first-child {
    height: 12px;
}
/* Next Step is a button, not text: one solid 30px block at the button's own radius. */
.slm-tbl-skeleton .slm-sk-cell.is-action .slm-sk-bar {
    height: 30px;
    border-radius: 8px;
}
@keyframes slm-sk-shimmer {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}
/* A full-width sweep repeating every 1.4s is exactly the kind of motion that triggers vestibular
   symptoms, and it runs for as long as the load takes. The skeleton still does its job standing
   still — the shape is the message, the shimmer only says "not frozen". */
@media (prefers-reduced-motion: reduce) {
    .slm-tbl-skeleton .slm-sk-bar {
        animation: none;
    }
}
/* ===== [opd-table-skeleton] END ===== */
/* ==========================================================================
   Outward referral - WhatsApp recipient picker
   ========================================================================== */

.referral-whatsapp-hint {
    font-size: 0.85rem;
    color: #74788D;
    margin-bottom: 0.75rem;
}

.referral-whatsapp-list {
    display: flex;
    flex-direction: column;
}

.referral-whatsapp-recipient {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
    padding: 0.6rem 0.25rem;
    border-bottom: 1px solid #EBEDF2;
    cursor: pointer;
}

.referral-whatsapp-recipient:last-child {
    border-bottom: none;
}

.referral-whatsapp-name {
    flex: 1 1 auto;
    font-weight: 500;
    color: #48465B;
}

.referral-whatsapp-phone {
    flex: 0 0 auto;
    font-size: 0.8rem;
    color: #74788D;
}

/* A doctor with no number cannot be ticked, so say why rather than
   leaving a silently disabled row. */
.referral-whatsapp-phone.is-missing {
    color: #FD397A;
}

.referral-whatsapp-result {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid #EBEDF2;
}

.referral-whatsapp-result-row {
    font-size: 0.85rem;
    color: #0ABB87;
    padding: 0.15rem 0;
}

.referral-whatsapp-result-row.is-skipped {
    color: #FD397A;
}

/* ==========================================================================
   Upload count badge (doctor toolbar)
   Mirrors .online-appointment-source-badge, which is the existing pattern for
   a corner badge on a toolbar icon. The button needs overflow visible or the
   badge is clipped by the button box.
   ========================================================================== */

.upload-file-btn {
    position: relative;
    overflow: visible !important;
}

.upload-count-badge {
    font-size: 0.6rem;
    font-weight: 500;
    position: absolute;
    line-height: 1;
    top: -2px;
    right: -4px;
    z-index: 2;
    min-width: 15px;
    text-align: center;
    border-radius: 8px;
    background: var(--second-blue-color);
    color: #fff;
    padding: 3px;
    display: inline-block;
}

/* ==========================================================================
   Compare documents (before / after)
   ========================================================================== */

.compare-documents-modal .modal-dialog {
    max-width: 92vw;
}

.compare-documents-modal .compare-body {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: #ECECF3;
}

.compare-pane {
    flex: 1 1 50%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
}

.compare-pane-head,
.compare-pane-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
}

.compare-pane-head {
    border-bottom: 1px solid #EBEDF2;
}

.compare-pane-foot {
    border-top: 1px solid #EBEDF2;
}

.compare-tag {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    padding: 2px 8px;
    border-radius: 2px;
    color: #fff;
}

.compare-tag-before {
    background: #95A0B6;
}

.compare-tag-after {
    background: var(--second-blue-color);
}

.compare-date {
    font-size: 0.8rem;
    font-weight: 500;
    color: #48465B;
}

.compare-filename {
    font-size: 0.75rem;
    color: #74788D;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: 0.5rem;
}

.compare-pane-tools {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* Fixed height so both panes stay aligned regardless of image aspect ratio. */
.compare-stage {
    height: 62vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
    background: #1e1e2d;
}

.compare-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform 0.2s ease;
}

.compare-img.cursor-zoom-in {
    cursor: zoom-in;
}

.compare-img.cursor-zoom-out {
    cursor: zoom-out;
}

/* Rotation and zoom compose, so every combination needs an explicit rule —
   a bare .zoomed rule would otherwise clobber the rotation transform. */
.compare-img.zoomed {
    transform: scale(2);
}

.compare-img.rotate-90 {
    transform: rotate(90deg);
}

.compare-img.rotate-180 {
    transform: rotate(180deg);
}

.compare-img.rotate-270 {
    transform: rotate(270deg);
}

.compare-img.rotate-90.zoomed {
    transform: rotate(90deg) scale(2);
}

.compare-img.rotate-180.zoomed {
    transform: rotate(180deg) scale(2);
}

.compare-img.rotate-270.zoomed {
    transform: rotate(270deg) scale(2);
}

@media (max-width: 1024px) {
    .compare-documents-modal .compare-body {
        flex-direction: column;
    }

    .compare-stage {
        height: 40vh;
    }
}

/* ===== [lab-table-v3] BEGIN — the Laboratory order list, cut to the "Solomo360 Laboratory"
   reference design. 2026-08-31.

   The list was a stack of `.kt-portlet` cards, one per order, each an ad-hoc Bootstrap row of
   patient text on the left and three icon buttons on the right. The reference is a table: a single
   card holding a header band and one grid row per order, with the tests folding out underneath.

   ⚠ SCOPED TO `.slm-page-laboratory`, AND THAT IS NOT COSMETIC CAUTION — the same reason the
   [opd-header-v3] block gives at :12531. `.referral-portal-section-portlet` and its head are ALSO
   the markup of external_laboratory_index.blade.php, the standalone per-referral page a lab opens
   from an email link. That page is its own shell and never carries `.slm-page-laboratory`, so it
   keeps the card look it was designed with. Check that still holds before reusing these names.

   The seven grid tracks are the reference's own `gridCols`, verbatim:
     46px | minmax(230px,1.5fr) | minmax(210px,1.25fr) | minmax(150px,1fr) | 116px | minmax(0,.5fr) | 184px
   The sixth is an EMPTY SPACER the reference declares deliberately — it is what keeps NEXT STEP
   off the ORDERED column when the window is wide, and it collapses first when it is not. The blade
   renders an empty <div> for it; do not "tidy" that away or the last two columns shift.

   `min-width: 1330px` on the header and every row, with `overflow-x: auto` on the card, is also the
   reference's: below that width the row scrolls sideways rather than crushing the patient name. */

.slm-page.slm-page-laboratory .slm-lab-table {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
    overflow-x: auto;
    overflow-y: hidden;
}

.slm-page.slm-page-laboratory .slm-lab-thead,
.slm-page.slm-page-laboratory .slm-lab-row {
    display: grid;
    grid-template-columns: 46px minmax(230px, 1.5fr) minmax(210px, 1.25fr) minmax(150px, 1fr) 116px minmax(0, .5fr) 184px;
    gap: 14px;
    min-width: 1330px;
}

.slm-page.slm-page-laboratory .slm-lab-thead {
    padding: 11px 18px 11px 21px;
    background: #e2eaf4;
    border-bottom: 1px solid #cad6e5;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    color: #64748b;
    text-transform: uppercase;
}

/* ⚠ `.slm-lab-order` REPLACES `.kt-portlet` ON THE ROW WRAPPER, it does not sit next to it. The
   blade dropped that class: `.kt-portlet` is a white card with its own radius, margin and shadow
   (and `[content-panel-round]` rounds every one of them), so a row that kept it drew a card edge
   inside the table for every order. Nothing in laboratory.js selects `.kt-portlet` — it reaches
   the order through `.referral-portal-section-portlet` — so the class was style only. */
.slm-page.slm-page-laboratory .slm-lab-order {
    border-bottom: 1px solid #dde3ec;
    background: #ffffff;
}
/* ⚠ NO `:last-child` ARM HERE, AND THAT IS THE FIX, NOT AN OMISSION. The footer — not the last
   order — is the table's last child, so `.slm-lab-order:last-child` matched nothing and the last
   order's #DDE3EC border sat directly on top of the footer's own #EEF1F5 one: two 1px lines in two
   greys, 2px apart from the row above them. Every order keeps its border and the FOOTER gives its
   border-top up instead, which leaves exactly one rule under the last row. */
/* Zebra on the ODD orders, so the striping survives a filter that changes the row count. */
.slm-page.slm-page-laboratory .slm-lab-order:nth-child(odd) {
    background: #fcfdfe;
}

/* The head is the clickable row: laboratory.js toggles the order from a delegated click anywhere
   on it, so it takes the pointer and the hover wash across its whole width. */
.slm-page.slm-page-laboratory .slm-lab-row {
    padding: 10px 18px;
    align-items: flex-start;
    cursor: pointer;
    transition: background .12s ease;
}
.slm-page.slm-page-laboratory .slm-lab-order:hover .slm-lab-row {
    background: #f2fbf9;
}

/* ---- No. ---- */
.slm-page.slm-page-laboratory .slm-lab-cell-no {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}
.slm-page.slm-page-laboratory .slm-lab-token {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 22px;
    padding: 0 4px;
    border-radius: 7px;
    background: #f2f4f7;
    color: #475467;
    font-size: 12.5px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

/* ---- Patient ---- */
.slm-page.slm-page-laboratory .slm-lab-cell-patient {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.slm-page.slm-page-laboratory .slm-lab-name {
    font-size: 13.5px;
    font-weight: 600;
    color: #101828;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.slm-page.slm-page-laboratory .slm-lab-idline,
.slm-page.slm-page-laboratory .slm-lab-contactline {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-size: 11.5px;
    color: #667085;
    white-space: nowrap;
}
.slm-page.slm-page-laboratory .slm-lab-uhid {
    display: flex;
    align-items: baseline;
    gap: 4px;
    flex: none;
}
.slm-page.slm-page-laboratory .slm-lab-uhid-key {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .04em;
    color: #98a2b3;
}
.slm-page.slm-page-laboratory .slm-lab-uhid-val {
    font-weight: 600;
    color: #475467;
    font-variant-numeric: tabular-nums;
}
.slm-page.slm-page-laboratory .slm-lab-divider {
    width: 1px;
    height: 11px;
    background: #e5e7eb;
    flex: none;
}
.slm-page.slm-page-laboratory .slm-lab-contact-item {
    display: flex;
    align-items: center;
    gap: 5px;
    flex: none;
}
.slm-page.slm-page-laboratory .slm-lab-contact-item svg {
    flex: none;
}
/* City is the one thing here allowed to shrink — the phone number is fixed-width and the name
   above already ellipsizes. */
.slm-page.slm-page-laboratory .slm-lab-city {
    min-width: 0;
    overflow: hidden;
}
.slm-page.slm-page-laboratory .slm-lab-city > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.slm-page.slm-page-laboratory .slm-lab-num {
    font-variant-numeric: tabular-nums;
}
.slm-page.slm-page-laboratory .slm-lab-srcline {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}
.slm-page.slm-page-laboratory .slm-lab-src {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: none;
    height: 22px;
    padding: 0 7px;
    border-radius: 7px;
    border: 1px solid rgba(16, 24, 40, .09);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .03em;
    cursor: help;
}
.slm-page.slm-page-laboratory .slm-lab-src--opd {
    background: #e3f6f2;
    color: #0a7a6e;
}
.slm-page.slm-page-laboratory .slm-lab-src--ipd {
    background: #f0f1fe;
    color: #4338ca;
}

/* ---- Tests ---- */
.slm-page.slm-page-laboratory .slm-lab-cell-tests {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
/* The expander. It is `.laboratory-view-detail-btn`, so the <i> inside is the icon laboratory.js
   rewrites between chevron-right and chevron-down — the turn is the FONT GLYPH changing, not a
   transform, which is why there is no rotation to animate here. */
.slm-page.slm-page-laboratory .slm-lab-toggle {
    /* ⚠ inline-flex, NOT flex. This is an <a>, so a block-level flex container stretches to the
       whole TESTS column and the hover target becomes a 300px-wide invisible bar. */
    display: inline-flex;
    align-self: flex-start;
    max-width: 100%;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: color .12s ease;
    /* ⚠ BOTH FLAGS ANSWER ONE RULE, style.css:9607, which paints every `.laboratory-view-detail-btn`
       with a blue border and blue text under `!important` — from when this was an icon-square button
       on a card. `!important` is not outranked by specificity, so the scope alone loses and the
       expander rendered as a blue box across the column. */
    border: 0 !important;
    color: #101828 !important;
}
.slm-page.slm-page-laboratory .slm-lab-toggle:hover {
    color: #0a9184 !important;
    text-decoration: none;
}
.slm-page.slm-page-laboratory .slm-lab-toggle > i {
    font-size: 11px;
    line-height: 1;
    flex: none;
}
.slm-page.slm-page-laboratory .slm-lab-toggle > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.slm-page.slm-page-laboratory .slm-lab-chips {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    min-width: 0;
}
.slm-page.slm-page-laboratory .slm-lab-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 21px;
    padding: 0 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    cursor: help;
}

/* The five stage colours, from the reference's STATUS table. They are shared by the order chips,
   the per-test stage label and the footer legend, which is the point — one stage, one colour,
   wherever it appears on the screen. */
.slm-page.slm-page-laboratory .slm-lab-stage-queue     { background: #fef6ec; color: #b4610f; }
.slm-page.slm-page-laboratory .slm-lab-stage-progress  { background: #e7f0fe; color: #1d4ed8; }
.slm-page.slm-page-laboratory .slm-lab-stage-completed { background: #ecfaf7; color: #0a7a6e; }
.slm-page.slm-page-laboratory .slm-lab-stage-printed   { background: #f0f1fe; color: #4338ca; }
.slm-page.slm-page-laboratory .slm-lab-stage-delivered { background: #eaf8f0; color: #0b7a55; }

/* ---- Referred by / Lab ---- */
.slm-page.slm-page-laboratory .slm-lab-cell-lab {
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.slm-page.slm-page-laboratory .slm-lab-doctor {
    font-size: 12.5px;
    font-weight: 600;
    color: #101828;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.slm-page.slm-page-laboratory .slm-lab-labname {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 5px;
    min-width: 0;
    font-size: 11px;
    font-weight: 600;
    color: #0a9184;
}
.slm-page.slm-page-laboratory .slm-lab-labname svg {
    flex: none;
}
.slm-page.slm-page-laboratory .slm-lab-labname > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.slm-page.slm-page-laboratory .slm-lab-nolab {
    margin-top: 5px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .03em;
    color: #b4453c;
}

/* ---- Ordered ---- */
.slm-page.slm-page-laboratory .slm-lab-cell-ordered {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-variant-numeric: tabular-nums;
}
.slm-page.slm-page-laboratory .slm-lab-date {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #101828;
    white-space: nowrap;
}
.slm-page.slm-page-laboratory .slm-lab-time {
    font-size: 11.5px;
    font-weight: 600;
    color: #667085;
    white-space: nowrap;
}
.slm-page.slm-page-laboratory .slm-lab-ago {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    color: #475467;
    white-space: nowrap;
    cursor: help;
}
/* Eight hours open. The only red on the row, and it is the reference's turnaround warning. */
.slm-page.slm-page-laboratory .slm-lab-ago--late {
    color: #b4453c;
}
.slm-page.slm-page-laboratory .slm-lab-date svg,
.slm-page.slm-page-laboratory .slm-lab-ago svg {
    flex: none;
}

/* ---- Next step ----
   ⚠ A LABEL, NOT A BUTTON — and unlike the first cut, it no longer LOOKS like one. It states what
   the order is waiting for; the reference's version advances every test at the least-advanced stage
   in one click and we have no bulk endpoint for that, so a click here falls through to the head
   handler that opens the order, where the per-test controls live.

   It shipped as the reference's 172px solid-teal pill with a forward arrow — the strongest call to
   action on the page, attached to the one control that does nothing — and that is exactly how it
   was read. It is now a tinted chip in the stage's OWN colour, from the same five-tone palette as
   the TESTS chips, so "1 in progress" and "Complete tests" are the same blue and the row says one
   thing twice rather than two things once. Content width, not 172px: a chip sized to its text does
   not read as a control waiting to be pressed. */
.slm-page.slm-page-laboratory .slm-lab-cell-nextstep {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}
.slm-page.slm-page-laboratory .slm-lab-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    max-width: 100%;
    height: 26px;
    padding: 0 10px;
    /* 7px against the stage chips' 6px: same family, one step up, because this chip is 5px taller
       and 6px on 26px reads squarer than 6px on 21px. */
    border-radius: 7px;
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.slm-page.slm-page-laboratory .slm-lab-step svg {
    flex: none;
}

/* The order's own two controls. Same cluster recipe as the per-test buttons below (`.slm-lab-tact`)
   — one action language on the whole page rather than icon squares up here and captioned buttons
   down there. The reference's four order icons (open / WhatsApp / print / upload) are not built:
   only upload exists on this screen, and the other three have no endpoint. */
.slm-page.slm-page-laboratory .slm-lab-actions {
    display: flex;
    align-items: stretch;
    gap: 2px;
    margin-left: -2px;
}

.slm-page.slm-page-laboratory .slm-lab-statenote {
    max-width: 100%;
    font-size: 10.5px;
    font-weight: 500;
    color: #98a2b3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.slm-page.slm-page-laboratory .slm-lab-statenote--done {
    color: #0b7a55;
}

/* ---- Expanded test rows ----
   ⚠ THE SAME SEVEN 46px minmax(230px, 1.5fr) minmax(210px, 1.25fr) minmax(150px, 1fr) 116px minmax(0, .5fr) 184px AS THE ORDER ROW ABOVE, and that is the point. The reference lays these
   out as a flex row of fixed widths inside a 65px inset, which lines the test name up under PATIENT
   but leaves everything after it floating: the stage word landed ~120px left of the TESTS column it
   belongs to, and the stamps under nothing at all. On a real order the eye reads DOWN a column, so
   the row now shares the header's grid — name under PATIENT, stage and elapsed under TESTS, the
   stamps across REFERRED BY / ORDERED, the actions under NEXT STEP.
   Keep this declaration and the order row's identical: two grids that are supposed to line up must
   be edited together, and `gap`, `min-width` and the horizontal padding are all part of that. */
.slm-page.slm-page-laboratory .patient-timeline-portlet-body.lab-referral-investigation-data {
    min-width: 1330px;
    /* Horizontal padding is the ROW's now, not the container's — it has to sit inside the same
       18px the grid is measured from, or every track is offset by the difference. */
    padding: 2px 0 12px;
    background: #fbfcfe;
    border-top: 1px solid #eef1f5;
}
.slm-page.slm-page-laboratory .slm-lab-trow {
    display: grid;
    grid-template-columns: 46px minmax(230px, 1.5fr) minmax(210px, 1.25fr) minmax(150px, 1fr) 116px minmax(0, .5fr) 184px;
    gap: 14px;
    min-width: 1330px;
    padding: 9px 18px;
    align-items: center;
    transition: background .12s ease;
    /* ⚠ BOTH RESET THE LEGACY `.lab-item` RECIPE (:11214), which is still on these rows because the
       JS reads that class. It adds `border-bottom: 1px #EBEDF2` and `margin-bottom: .5rem` from the
       card layout, where the tests were a bulleted list inside a portlet. On a grid that gave every
       test row a hairline the reference does not have, plus 6.5px of dead space under it — the row
       hover is what separates these, exactly as in the reference. The shorthand `padding` above
       already answers its `padding-bottom`. */
    border-bottom: 0;
    margin-bottom: 0;
}
/* Full-bleed now, so no radius: a rounded band inside a square row reads as a card that is not
   there. The hover wash is the reference's. */
.slm-page.slm-page-laboratory .slm-lab-trow:hover {
    background: #f8fafc;
}
.slm-page.slm-page-laboratory .slm-lab-test-name {
    min-width: 0;
}
.slm-page.slm-page-laboratory .slm-lab-test-name > span {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12.5px;
    font-weight: 700;
    color: #101828;
}
.slm-page.slm-page-laboratory .slm-lab-test-stage {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
/* The stage word takes the stage's TEXT colour but none of its fill — the chips in the row above
   are the filled form, and two filled treatments of the same fact side by side read as two
   different facts. */
.slm-page.slm-page-laboratory .slm-lab-stagelabel {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    background: none !important;
}
.slm-page.slm-page-laboratory .slm-lab-dot {
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: currentColor;
}
.slm-page.slm-page-laboratory .slm-lab-elapsed {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    color: #98a2b3;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    cursor: help;
}
.slm-page.slm-page-laboratory .slm-lab-elapsed svg {
    flex: none;
}

/* Five stamps on a three-column grid — the reference's own shape, so QUEUE/START/DONE sit on one
   line and PRINT/DLVR under them. */
/* Two tracks wide: five stamps at the reference's 84px need 276px, and REFERRED BY / LAB alone is
   150px at its floor. Spanning it and ORDERED gives 332px at the same floor, so the stamp grid
   never reflows to two per line. */
.slm-page.slm-page-laboratory .slm-lab-stamps {
    grid-column: span 2;
    display: grid;
    grid-template-columns: repeat(3, 84px);
    gap: 2px 12px;
    font-variant-numeric: tabular-nums;
}
.slm-page.slm-page-laboratory .slm-lab-stamp {
    display: flex;
    align-items: baseline;
    gap: 5px;
    white-space: nowrap;
    cursor: help;
}
.slm-page.slm-page-laboratory .slm-lab-stamp-key {
    flex: none;
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: .06em;
    color: #98a2b3;
}
/* Stages still ahead of the test stay ghosted, so the row reads as a progress line. */
.slm-page.slm-page-laboratory .slm-lab-stamp-val {
    font-size: 11.5px;
    font-weight: 600;
    color: #c3cbd6;
}
.slm-page.slm-page-laboratory .slm-lab-stamp--done .slm-lab-stamp-val {
    color: #475467;
}
/* The slot. Always present, so the track stays occupied whether or not there is a note — see the
   note in investigationDataList.blade.php for what happened when the chip WAS the grid child. */
.slm-page.slm-page-laboratory .slm-lab-notecell {
    min-width: 0;
    display: flex;
    align-items: center;
}
.slm-page.slm-page-laboratory .slm-lab-notechip {
    max-width: 100%;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 7px;
    background: #f4f6f9;
    color: #667085;
    font-size: 10.5px;
    font-weight: 600;
    cursor: help;
}
.slm-page.slm-page-laboratory .slm-lab-notechip svg {
    flex: none;
}
.slm-page.slm-page-laboratory .slm-lab-notechip-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* THE PAGE'S ACTION BUTTON, used by the three per-test controls AND by the order row's two, in the
   OPD/IPD queue table's row-action language ([opd-table-v3] "Row actions", :15240): an icon over a
   9px caption, 60px wide, transparent until hovered.

   They were the reference's own 132 / 96 / 146px pills, and at that size three of them on every
   test line — five lines on a big order — read as fifteen competing calls to action, which is what
   the pills are for on a one-per-row design and wrong on a nested one. The OPD/IPD table already
   solved this exact problem for its own row actions; this borrows the answer rather than inventing
   a second one.

   3 x 60px + 2 x 2px gap = 184px, which is the NEXT STEP track exactly, so the cluster fills its
   column without a width of its own. If a fourth action is ever added, widen the track — do not
   shrink the buttons below 60px, or the captions wrap.

   ⚠ NO `.btn` CLASSES ON THESE ELEMENTS ANY MORE. The blade dropped `.btn.btn-icon.btn-sm
   .btn-label-brand` from the result button, which is what `.investigation-result-button.btn.
   btn-icon.btn-sm` (:10496, :11273) needs to match — those rules are inert here now, by design.
   `.laboratory-note-btn.active { color: #ff675d }` (:11252) is NOT inert: it is (0,2,0) and paints
   a noted test red. The `--note.active` rule below is (0,3,0) and wins on weight alone; no flag. */
.slm-page.slm-page-laboratory .slm-lab-test-actions {
    display: flex;
    align-items: stretch;
    gap: 2px;
    min-width: 0;
}
.slm-page.slm-page-laboratory .slm-lab-tact {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 3px;
    min-width: 60px;
    padding: 5px 2px 4px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #475467;
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
}
.slm-page.slm-page-laboratory .slm-lab-tact svg {
    flex: none;
}
/* The caption, at the OPD cluster's own 9px/700 and .78 opacity. */
.slm-page.slm-page-laboratory .slm-lab-tact-label {
    display: block;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0;
    white-space: nowrap;
    opacity: .78;
}
/* Hover tints the pad and nothing else — same as the OPD cluster, so an icon keeps its resting
   tone and the colour stays free to mean state. */
.slm-page.slm-page-laboratory .slm-lab-tact:hover {
    background: #f2f4f7;
}

/* Colour is the only signal left at this size, so it is spent on state, not on decoration:
   teal where the row is waiting for you, grey everywhere else. */
.slm-page.slm-page-laboratory .slm-lab-tact--act {
    color: #0a7a6e;
}
/* A result already entered, and a result the row is waiting for. */
.slm-page.slm-page-laboratory .slm-lab-tact--result.active,
.slm-page.slm-page-laboratory .slm-lab-tact--due {
    color: #0a7a6e;
}
.slm-page.slm-page-laboratory .slm-lab-tact--note.active {
    color: #0a7a6e;
}
/* ⚠ THE WAITING TOGGLE IS THE ONE BUTTON THAT TAKES A FILL WHEN ACTIVE, and the exception is the
   point: every other `.active` here means "this has something" (a note, a result) and is read while
   you are already looking at the row. "The patient is standing at the counter" has to be findable
   by scanning a list of thirty orders, and a colour change alone is not.
   It also answers `.lab-is-waiting-btn.btn-outline-dark` (:11262), a grey the old markup relied on —
   inert now that the blade drops the `.btn` classes, but the fill would beat it either way. */
.slm-page.slm-page-laboratory .slm-lab-tact--waiting.active {
    background: #ecfaf7;
    color: #0a7a6e;
}
.slm-page.slm-page-laboratory .slm-lab-tact--waiting.active:hover {
    background: #ddf3ef;
}
/* Delivered: a statement, not a control. Same 60px slot so the cluster's edge does not move
   between rows. */
.slm-page.slm-page-laboratory .slm-lab-tact--done {
    color: #0b7a55;
    cursor: default;
}
.slm-page.slm-page-laboratory .slm-lab-tact--done:hover {
    background: transparent;
}

/* ---- Empty state and footer ---- */
.slm-page.slm-page-laboratory .slm-lab-empty {
    padding: 44px 18px;
    text-align: center;
    font-size: 12.5px;
    font-weight: 600;
    color: #98a2b3;
}
.slm-page.slm-page-laboratory .slm-lab-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 18px;
    background: #ffffff;
    font-size: 11.5px;
    font-weight: 600;
    color: #667085;
}
.slm-page.slm-page-laboratory .slm-lab-legend {
    display: flex;
    align-items: center;
    gap: 14px;
}
/* The legend borrows each stage's TEXT colour and shows it as a dot, so it explains the chips
   above without repeating them as five more filled pills. */
.slm-page.slm-page-laboratory .slm-lab-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none !important;
    font-size: 11px;
    font-weight: 600;
}
.slm-page.slm-page-laboratory .slm-lab-legend-item::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: currentColor;
}

/* ===== [lab-table-v3] END ===== */

/* ===== [scheduled-call-outcome] BEGIN — the reminder call's answer, under the Next Step button.

   The reference's Appointments cell is the primary button, then a row holding a QR/dial button and
   a response pill, then two derived lines. Only the ROW is built: the "Confirmed / Running late /
   No reply" caption and the "N contacts" history link were both declined on 2026-09-01, and the
   second has no data behind it anyway — sms_log and whatsapp_log record what we SENT, never what
   the patient answered.

   The tones are the reference's STATUS_TONE rows verbatim (bg / text / border), so a Confirmed
   pill here is the same green as every other positive state in the design:
     neutral  #FFFFFF / #475467 / #E0E5EC      good  #ECFDF3 / #067A5E / #A6F4C5
     warn     #FFFAEB / #B54708 / #FEDF89      bad   #FEF3F2 / #B42318 / #FECDCA
     mute     #F2F4F7 / #475467 / #D6DAE1
   ⚠ Deliberately NOT re-toned to the app's teal. These are status colours, not brand: green means
   the patient said yes, and swapping it for #0A9184 would make "Confirmed" and the OPD's own
   chrome the same colour. The brand teal stays on the button above.

   Scoped to `#calendar_schedule_table` alone — no other tab has a booking to ring about. ===== */
.slm-page.slm-page-opd .slm-section-table #calendar_schedule_table .schedule-detail-row .slm-call-row {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    max-width: 100%;
}
/* The QR/dial button. A shell for now by agreement — the href dials, the QR itself is a
   developer's job (the app bundles html5-qrcode, which READS a code with the camera; drawing one
   needs a generator it does not have). Hang the popover off this class. */
.slm-page.slm-page-opd .slm-section-table #calendar_schedule_table .schedule-detail-row .slm-call-qr {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    color: #475467;
    text-decoration: none;
    transition: border-color .14s ease, color .14s ease;
}
.slm-page.slm-page-opd .slm-section-table #calendar_schedule_table .schedule-detail-row .slm-call-qr:hover {
    border-color: #0a9184;
    color: #0a9184;
}
.slm-page.slm-page-opd .slm-section-table #calendar_schedule_table .schedule-detail-row .slm-call-qr svg {
    width: 13px;
    height: 13px;
}
/* The hover QR. The reference's own card: centred column, 5px gap, 10px padding, a 12px radius and
   `pointer-events: none` so the code can never eat the hover that is drawing it.
   Body-hosted and fixed like the response menu, and for the same two reasons — the cell `<span>`
   is `overflow: hidden` and `.kt-datatable` carries `contain: layout`. */
body .slm-dial-qr {
    position: fixed;
    z-index: 1060;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 10px;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 14px 36px rgba(16, 24, 40, .18);
    pointer-events: none;
}
body .slm-dial-qr img {
    display: block;
    width: 92px;
    height: 92px;
    /* The PNG comes back at 184px and is drawn at 92, so the modules land on exact pixel pairs.
       `pixelated` is the reference's own choice: smoothing a QR at this size softens the module
       edges and is what makes a phone camera hunt for it. */
    image-rendering: pixelated;
}
body .slm-dial-qr-num {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .05em;
    color: #98a2b3;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
/* No number on the appointment: the button stays for alignment but reads as unavailable and its
   hover draws nothing (slmShowDialQr returns early on this class). */
.slm-page.slm-page-opd .slm-section-table #calendar_schedule_table .schedule-detail-row .slm-call-qr.is-empty {
    opacity: .45;
    pointer-events: none;
}

/* The pill and its menu share a positioning context so the menu hangs off the PILL — the row is
   the wrong anchor once the confirm tick is sitting in it. */
.slm-page.slm-page-opd .slm-section-table #calendar_schedule_table .schedule-detail-row .slm-call-pick {
    position: relative;
    min-width: 0;
}
.slm-page.slm-page-opd .slm-section-table #calendar_schedule_table .schedule-detail-row .slm-call-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    height: 26px;
    padding: 0 9px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    background: #ffffff;
    color: #475467;
    border: 1px solid #e0e5ec;
    transition: filter .12s ease;
}
.slm-page.slm-page-opd .slm-section-table #calendar_schedule_table .schedule-detail-row .slm-call-pill:hover {
    filter: brightness(.97);
}
.slm-page.slm-page-opd .slm-section-table #calendar_schedule_table .schedule-detail-row .slm-call-pill-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-variant-numeric: tabular-nums;
}
.slm-page.slm-page-opd .slm-section-table #calendar_schedule_table .schedule-detail-row .slm-call-pill-ico,
.slm-page.slm-page-opd .slm-section-table #calendar_schedule_table .schedule-detail-row .slm-call-pill-caret {
    flex: none;
    display: inline-flex;
}
.slm-page.slm-page-opd .slm-section-table #calendar_schedule_table .schedule-detail-row .slm-call-pill-ico svg {
    width: 12px;
    height: 12px;
}
.slm-page.slm-page-opd .slm-section-table #calendar_schedule_table .schedule-detail-row .slm-call-pill-caret svg {
    width: 11px;
    height: 11px;
}
.slm-page.slm-page-opd .slm-section-table #calendar_schedule_table .schedule-detail-row .slm-call-pill.is-good {
    background: #ecfdf3;
    color: #067a5e;
    border-color: #a6f4c5;
}
.slm-page.slm-page-opd .slm-section-table #calendar_schedule_table .schedule-detail-row .slm-call-pill.is-warn {
    background: #fffaeb;
    color: #b54708;
    border-color: #fedf89;
}
.slm-page.slm-page-opd .slm-section-table #calendar_schedule_table .schedule-detail-row .slm-call-pill.is-bad {
    background: #fef3f2;
    color: #b42318;
    border-color: #fecdca;
}
.slm-page.slm-page-opd .slm-section-table #calendar_schedule_table .schedule-detail-row .slm-call-pill.is-mute {
    background: #f2f4f7;
    color: #475467;
    border-color: #d6dae1;
}

/* The menu.
   ⚠ SELECTED AT `body` LEVEL BECAUSE IT LIVES THERE, not out of laziness — slmOpenCallMenu builds
   it into <body> on open and destroys it on close, so a selector scoped to the row or even to
   `.slm-page-opd` would match nothing. The reasoning for the portal is in that function; the short
   version is that KTDatatable's cell `<span>` is `overflow: hidden` and `.kt-datatable` carries
   `contain: layout`, which captures `position: fixed` descendants too.
   The panel only exists while open, so there is no `display: none` state to write.
   ⚠ The rows are NOT `.btn`. `.slm-qa-menu .btn` carries a document-level click handler that
   closes the action rail's menu; matching it here would put two handlers on the same click. */
/* ⚠ EVERY NUMBER AND COLOUR BELOW IS THE FOLLOW UP MENU'S, NOT A SECOND SET. That menu
   (`body > .dropdown-menu.followup-dropdown-menu`, ~2400 lines up) asks the desk the same question
   about the same phone call, and the two sit two tabs apart — 258px, 6px padding, an 11px radius,
   12.5px/600 rows on a 8px dot with a 9px gap, and the #f2fbf9 fill. Change one, change both, or
   they drift into looking like two different features.
   The ink is that menu's too: green #0B7A55 on a #3FBF7F dot, amber #B4610F on #E8913A, red
   #B4453C on #EF6F66, grey #475467 on #98A2B3. Those are the app's softened take on the
   reference's STATUS_TONE, already agreed once on Follow Up.
   No `!important` anywhere here, unlike over there: these rows are plain buttons, not Bootstrap
   `.dropdown-item`s, so there is no blanket theme rule to out-rank. */
body .slm-call-menu {
    position: fixed;
    z-index: 1060;
    width: 258px;
    padding: 6px;
    border-radius: 11px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 12px 32px rgba(16, 24, 40, .18);
    text-align: left;
}
body .slm-call-menu-title {
    padding: 6px 9px 4px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .05em;
    color: #98a2b3;
}
body .slm-call-opt {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 7px 9px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #475467;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.2;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
    transition: background .12s ease;
}
body .slm-call-opt:hover,
body .slm-call-opt:focus {
    background: #f2fbf9;
}
/* The answer already on record. Tinted rather than re-inked, so the row keeps its own colour and
   the tick is the background — the same way Follow Up marks its active option. */
body .slm-call-opt.is-picked {
    background: #f2fbf9;
    font-weight: 700;
}
body .slm-call-dot {
    flex: none;
    width: 8px;
    height: 8px;
    margin-right: 9px;
    border-radius: 999px;
    background: #98a2b3;
}
body .slm-call-opt.is-good {
    color: #0b7a55;
}
body .slm-call-opt.is-good .slm-call-dot {
    background: #3fbf7f;
}
body .slm-call-opt.is-warn {
    color: #b4610f;
}
body .slm-call-opt.is-warn .slm-call-dot {
    background: #e8913a;
}
body .slm-call-opt.is-bad {
    color: #b4453c;
}
body .slm-call-opt.is-bad .slm-call-dot {
    background: #ef6f66;
}
/* Clear leads the list, above a rule — the reference's own order. It takes the alarm colour and a
   cross instead of a dot, so it cannot be mistaken for a seventh answer. */
body .slm-call-clear {
    color: #b4453c;
}
body .slm-call-clear svg {
    flex: none;
    width: 11px;
    height: 11px;
    margin-right: 8px;
}
body .slm-call-clear:hover,
body .slm-call-clear:focus {
    background: #fef3f2;
}
body .slm-call-sep {
    height: 1px;
    margin: 5px 9px;
    background: #eef1f5;
}
/* ===== [scheduled-call-outcome] END ===== */

/* ===== [page-titlerow] BEGIN — a title with something ON its line, inside a flipped header.
   2026-09-07.

   [opd-header-v3] flips `.kt-subheader__main.breadcrumb-header` to a COLUMN so a subtitle can sit
   under the H1. Every page that does this has a bare H1 — except Expense, which shows a ₹ total
   chip beside the title. The chip cannot be a child of the flipped column (it would stack under the
   title) and it cannot stay a SIBLING of `.kt-subheader` either: the column's width becomes the
   width of its widest child, which is now the subtitle sentence, so the chip was pushed ~370px to
   the right of the title it belongs to. Measured, before and after, in the same harness:
   chip x:122 before the subtitle existed, x:492 after.
   This row is the third option — an inner flex row that owns the title AND the chip, so the column
   holds exactly two children: this row, then the subtitle.

   ⚠ SCOPED TO `.slm-page-expense` because it is the only page with a title-adjacent chip today.
   Widen the `:is()` if another page grows one; the recipe is page-agnostic, only its scope is not.
   ⚠ `align-items: center` NOT `baseline`: the chip is a pill with its own padding, and baseline
   alignment sits it low against a 22px title. ===== */
.slm-page.slm-page-expense .slm-page-titlerow {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
/* The H1 keeps its own margins from the base rule; the row must not add more. */
.slm-page.slm-page-expense .slm-page-titlerow > .kt-subheader__title {
    margin-bottom: 0;
}
/* ===== [page-titlerow] END ===== */

/* ===== [patient-list-v3] BEGIN — the Patient List table, brought onto the OPD/IPD reference
   design language. 2026-09-07.

   ⚠ THIS BLOCK NOW SERVES THE EXPENSE PAGE AS WELL (2026-09-07). It keeps its name because the
   tag is greppable against the history; read it as "the v2 list-view pages on the v3 palette".
   Expense renders the identical shape — a `.slm-data-table` KTDatatable under a `.slm-tab-toolbar`
   command card — and was still on the same green-grey palette with the same legacy teal head
   underline, so it needed no new values, only the existing ones widened:
       `.slm-data-table-patient-list`   ->  `:is(…-patient-list, …-expense)`
       `.slm-tab-toolbar--patient-list` ->  `:is(…--patient-list, …--expense-filter)`
   ⚠ THE WIDENING IS SPECIFICITY-NEUTRAL, which is the only reason it is safe to do in place:
   `.slm-page.slm-page-patient-list .slm-data-table-patient-list` scores (0,3,0) and
   `.slm-page:is(a, b) :is(c, d)` scores exactly the same — `:is()` contributes only its heaviest
   argument. Every specificity count written below still holds, and Patient List is untouched.
   ⚠ AND IT NOW SERVES THE WHOLE SETTINGS SURFACE TOO (2026-09-07) — all 26 section tables at once,
   not one page. That is why the two `:is()` lists above COLLAPSED instead of growing a third arm:
   `.slm-data-table` and `.slm-tab-toolbar` are the CONTRACT classes, and Patient List, Expense and
   every Settings section already carry them beside their own modifier
   (`class="slm-data-table slm-data-table-cc"`, `"slm-tab-toolbar slm-tab-toolbar--cc"`, …). So
       `:is(.slm-data-table-patient-list, .slm-data-table-expense)`   ->  `.slm-data-table`
       `:is(.slm-tab-toolbar--patient-list, .slm-tab-toolbar--…)`     ->  `.slm-tab-toolbar`
   matches exactly the same two elements it did before on those two pages — verified, not assumed:
   both blades put the pair on ONE element (patient_list.blade.php:68/:181,
   expense/index.blade.php:211) — and reaches 26 more under the new `.slm-page-setting` arm.
   Specificity is unchanged again at (0,3,0): `:is()` contributed only its heaviest argument, and a
   bare class weighs the same as the `:is()` it replaced.
   ⚠ THE PAGE ARM IS STILL THE WHOLE GATE. `.slm-data-table` on its own is ~60 rules of
   [master-table-v2] serving surfaces that have NOT moved; the three-page `:is()` in front of it is
   the only thing keeping this palette off them. Never drop it.
   ⚠ AND THE SETTINGS MODALS ARE OUT OF REACH BY CONSTRUCTION, which is worth knowing before
   someone "fixes" it: the split layout yields `section_modals` OUTSIDE `#kt_content`
   (settings/layout.blade.php), so a `.slm-data-table` inside a settings modal has no
   `.slm-page-setting` ancestor and keeps the v2 treatment. Nothing here reaches it.

   🔥 RULE 11 — THE TYPE RAMP — IS DELIBERATELY *NOT* WIDENED TO SETTINGS, and that is the one place
   this block stops short of the reference. The ramp gates the subject column on
   `[data-field="name"]`, and only 12 of the 26 settings tables declare that field; the other 14 call
   their subject `levelOneName`, `title`, `medicineName` and so on. Widening it would print a
   subject in 12 sections and flatten the other 14 to one ink — worse than the uniform 13.5px/#0A0A0A
   they have now, because the inconsistency would be BETWEEN sections of the same screen. Nor can it
   be gated on `:first-child`: the nested sections (Chief Complaints, Diagnosis, Investigation,
   Procedure, Billing) open with a subtable-toggle column, so the first cell is a chevron, not a
   name. Doing this properly means naming the subject field per section, which is a JS change in 26
   files and a separate piece of work.
   The em-dash and GENDER arms under rule 11 are excluded for the same reason plus a simpler one:
   no settings table has a gender column.

   ⚠ NESTED TABLES INHERIT THE HEAD BAND, AND THAT IS INTENDED. Rules 3, 5, 6, 8 and 9 use
   descendant combinators, so a Chief Complaints L2/L3 subtable gets the same #E2EAF4 band and
   #DDE3EC rules as its parent — which is what makes a three-level grid read as one table. Rule 2 is
   the exception and does NOT cascade: it keys on `.kt-datatable1`, a class only the outer grid
   carries, so nested cards keep the radius and shadow the section's own `<style>` gives them.
   The nested heads DO keep the legacy 2px teal underline, because the hairline rule keys on
   `.masterDataTable.kt-table-header-background` and the nested layouts are classed
   `chiefComplaintLevelTwoTitle` / `kt-dataTable-second-level-title` instead. Left as-is: the teal
   line is the level marker inside a nested grid, and taking it away there would remove the only
   thing separating an L2 head from an L1 body row.

   ⚠ THE SKELETON (rule 12) DELIBERATELY DOES NOT REACH EXPENSE. It keys on
   `.slm-tbl-skeleton--patient-list`, markup only that page's blade emits; Expense has no loading
   state to dress.
   ⚠ THE SUBJECT ARM OF THE TYPE RAMP DOES REACH IT, AND THAT IS INTENDED — CHECKED, NOT ASSUMED.
   Rule 11 gates on `[data-field="name"]`, and Expense declares exactly that field
   (expense_management.js:100), titled "Expense By". So the person who raised the expense takes the
   subject ink (13.5px/600 #101828) and the other eleven columns take the attribute ink, which is
   the same reading as a patient's name on the list next door. If that column is ever renamed in the
   JS, this page silently flattens to one weight — the same coupling rule 11 already warns about.
   ⚠ EXPENSE HAS A TOTALS `__foot`, WHICH NOTHING HERE TOUCHES — every rule below keys on
   `.kt-datatable__body`. The foot keeps [master-table-v2]'s treatment on purpose; it is a summary
   band, not a row, and giving it the body's ink would flatten the distinction.

   Patient List was the last list-view screen still wearing [master-table-v2]'s GREEN-GREY palette
   (#607773 caps over an #F4F8F7 band, a #D8E3E0 card at 12px, an #F1F5F4 row rule) while OPD and
   IPD had moved to the reference's BLUE-GREY one. Side by side the two read as two products, which
   is the whole complaint. Nothing here is invented: every value is lifted from a rule that is
   already on the OPD queue table, exactly as [opd-calendar-v3] did for the Calendar tab.

     card         1px #E5E7EB / 14px / 0 1px 2px rgba(16,24,40,.05)   [opd-table-v3] card
     column head  #E2EAF4 over 1px #CAD6E5                            [opd-table-v3] head
     head caps    #64748B 11px/700, .05em, uppercase                  [opd-table-v3] head labels
     row rule     #DDE3EC                                             [opd-table-v3-surface] 1
     zebra        #FCFDFE on the odd row, white on the even           [opd-table-v3] zebra
     hover        #F2FBF9                                             [opd-table-v3] hover
     neutral tint #F2F4F7 fill / #F9FAFB soft                         reference STATUS_TONE neutral
     ink          #101828 body, #344054 mid, #98A2B3 faint            reference type ramp

   ⚠ SCOPE — `.slm-page.slm-page-patient-list` ON EVERY RULE, AND IT IS LOAD-BEARING.
   [master-table-v2] (`.slm-data-table`) is a SHARED recipe: ~60 rules serving every Settings tab,
   the Expense page and this one. Drop the page prefix from the token block below and all of them
   turn blue-grey at once. `.slm-page-patient-list` sits on #kt_content in
   patient/patient_list.blade.php:10 and nowhere else.
   THE ONE EXCEPTION IS RULE 12, the skeleton, and it is exempt for the same reason
   [opd-table-skeleton] is: every selector there is under `.slm-tbl-skeleton--patient-list`, a
   modifier that exists in exactly one loader element in this page's blade, so a page prefix would
   add nothing but noise. Scope comes from the markup there, not from the page class.

   ⚠ SPECIFICITY, NOT SOURCE ORDER. webpack.mix.js concatenates style.css at slot 7 and
   slm-theme-v1.css at slot 16, so a TIE against the theme is a LOSS from this file. Every selector
   below therefore carries the two page classes PLUS the `.slm-data-table-patient-list` wrapper,
   which puts it at least one class above the theme rule it is retuning. The counts are written out
   on each rule that is close.

   ⚠ THE TEAL HEAD UNDERLINE IS DELIBERATELY REPLACED, not lost. That 2px rule comes from LEGACY
   css — `.masterDataTable.kt-table-header-background thead th { border-bottom: 2px solid
   var(--main-green-color) }` (style.css:4531) — and slm-theme-v1.css:19928 notes it is "what makes
   a Settings/EDD table recognisable". It still is: that rule is untouched and every OTHER table
   wearing the class pair keeps it. Only this page trades it for the reference's #CAD6E5 hairline,
   because the reference's head is a BAND and a 2px teal line under a blue-grey band reads as two
   competing edges.

   ⚠ THE PAGE HEADER IS NOT IN THIS BLOCK. The subtitle line added under the breadcrumb on
   2026-09-07 rides [opd-header-v3] instead — `.slm-page-patient-list` was added to that block's
   two `:is()` lists (the `.slm-page-subtitle` typography and the `.kt-subheader__main` column
   flip) rather than the values being copied down here, so there stays ONE definition of what a
   page subtitle looks like across the five screens that carry one. Reverting the table does not
   revert the subtitle and vice versa; each is documented at its own end.

   REVERT: delete this block, and drop `.slm-page-patient-list` from the two `:is()` lists in
   [opd-header-v3] plus the subtitle div in the blade if the header is going back too. Rule 12 also
   has markup behind it — the `#patient_list_loader` skeleton in the blade, which replaced a spinner
   — so reverting the CSS alone would leave that markup unstyled. Nothing in patient-list.js
   changed by any of it: the loader is still shown and hidden by the same `.patient-list-loaded`
   class on the same `kt-datatable--on-layout-updated` hook it always used. ===== */

/* ---- 1. The tokens. [master-table-v2] declares `--slm-mt-*` on `.slm-data-table` itself
   (slm-theme-v1.css:18923), so re-declaring them on the page's own wrapper moves the card border,
   the row rule, every muted grey and the pager onto the reference palette in one place, without
   duplicating the ~60 rules that consume them.

   ⚠ `--slm-mt-surface-2` IS THREE ROLES AT ONCE — the head band, the row hover AND the search
   field's fill — and the reference gives those three DIFFERENT values (#E2EAF4 / #F2FBF9 /
   near-white). So the token takes the field's neutral and rules 3 and 6 below re-state the other
   two explicitly. Retuning the token alone would paint the head the colour of an input.

   ⚠ `--slm-mt-primary` IS NOT TOUCHED. It is the brand teal, and it drives the Search button
   here and the Advanced Search button in the subheader — which is NOT token-driven (it rides the
   global `.slm-ctrl-btn--solid` recipe). Moving one and not the other would put two different
   teals 40px apart. Palette work on the brand colour is an app-wide decision, not a page one.

   ⚠ BOTH `.slm-data-table-patient-list` ELEMENTS INHERIT THIS. The blade puts the class on the
   toolbar wrapper (:59) and again on the table wrapper (:135), which is what carries the retune
   across the command card as well as the table — they have to move together or the page ends up
   half green. ---- */
.slm-page:is(.slm-page-patient-list, .slm-page-expense, .slm-page-setting) .slm-data-table {
    --slm-mt-surface-2: #f9fafb;
    --slm-mt-surface-3: #f2f4f7;
    --slm-mt-border: #e5e7eb;
    --slm-mt-border-strong: #cad6e5;
    --slm-mt-border-soft: #dde3ec;
    --slm-mt-fg-1: #101828;
    --slm-mt-fg-2: #344054;
    --slm-mt-fg-3: #64748b;
    --slm-mt-fg-4: #98a2b3;
}

/* ---- 2. The card. The border colour already moved with `--slm-mt-border` above; the radius and
   the shadow are hard-coded in the theme, so they are re-stated here. v2 draws 12px and a doubled
   green-tinted shadow (`0 1px 2px rgba(13,40,38,.04), 0 1px 1px rgba(13,40,38,.04)`); the
   reference draws 14px and a single neutral `0 1px 2px rgba(16,24,40,.05)`.
   Theme rule is (0,5,0); this is (0,6,0). ---- */
.slm-page:is(.slm-page-patient-list, .slm-page-expense, .slm-page-setting) .slm-data-table .kt-datatable1.kt-datatable--default > .kt-datatable__table {
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
}

/* ---- 3. The column header BAND. Painted on the `<thead>`, not on the cells, because legacy css
   pins every `th` transparent with `background: none !important`
   (`.masterDataTable.kt-datatable.kt-table-header-background thead th`, style.css:4530) — a
   background written on the cell here is silently dropped. The theme paints the same element at
   (0,2,0); this is (0,4,0). ---- */
.slm-page:is(.slm-page-patient-list, .slm-page-expense, .slm-page-setting) .slm-data-table .kt-datatable__head {
    background: #e2eaf4;
}

/* The band's lower edge: the reference's #CAD6E5 hairline in place of the legacy 2px brand rule.
   Legacy selector is (0,3,1) with no `!important`, so (0,5,1) is enough — see the block header for
   why this one page trades the teal away. */
.slm-page:is(.slm-page-patient-list, .slm-page-expense, .slm-page-setting) .slm-data-table .masterDataTable.kt-table-header-background thead th {
    border-bottom: 1px solid #cad6e5;
}

/* Head caps: the colour arrived with `--slm-mt-fg-3` (the theme sets it from the token, with
   `!important`, so it re-resolves on its own). Only the tracking differs — v2 sets .04em, the OPD
   head .05em — and the size is already 11px on both.
   ⚠ Mirror the theme's SIX-class chain (`.masterDataTable.kt-table-header-background
   .kt-datatable__head .kt-datatable__row > .kt-datatable__cell > span`), not a short selector: a
   shorter one ties or loses and the tracking silently stays at .04em. This is (0,9,0). */
.slm-page:is(.slm-page-patient-list, .slm-page-expense, .slm-page-setting) .slm-data-table .masterDataTable.kt-table-header-background .kt-datatable__head .kt-datatable__row > .kt-datatable__cell > span {
    letter-spacing: .05em;
}

/* ---- 4. Row rhythm. `.no-action-table td { padding-top: 8px !important; padding-bottom: 8px
   !important }` (style.css:4514) is what the rows are actually running on — v2's own
   `padding: 11px 7px` has been losing to it since the page was built, which is why the rows sit
   tighter than every other v2 list. The reference's rows are airier still; 11px restores what v2
   asked for and lands the row height the reference draws.
   ⚠ `!important` IS BEATING AN `!important`, NOT A SPECIFICITY SHORTFALL — (0,6,0) already
   out-ranks the legacy (0,1,1) on its own. ---- */
.slm-page:is(.slm-page-patient-list, .slm-page-expense, .slm-page-setting) .slm-data-table .kt-datatable__body .kt-datatable__row > .kt-datatable__cell {
    padding-top: 11px !important;
    padding-bottom: 11px !important;
}

/* ---- 5. Zebra, the reference's `i % 2 === 0 ? '#FFFFFF' : '#FCFDFE'`. One row per record here —
   unlike OPD, where a patient is a summary row plus a detail row and the stripe has to be counted
   in fours — so KTDatatable's own `--even` class is exactly the odd-indexed row the reference
   tints, and no `:nth-child()` arithmetic is needed. Even rows keep the card's white, so this is
   the only rule. (0,5,0). ---- */
.slm-page:is(.slm-page-patient-list, .slm-page-expense, .slm-page-setting) .slm-data-table .kt-datatable__body .kt-datatable__row--even {
    background: #fcfdfe;
}

/* ---- 6. Hover, the reference's `.prow:hover`. Two jobs: move off v2's green-grey
   (`--slm-mt-surface-2`, which rule 1 just repointed at an input fill) onto #F2FBF9, and out-rank
   the stripe above so a striped row still lights under the cursor.
   ⚠ THE LADDER IS DELIBERATE, the same one [opd-table-v3] documents: white (card, 0 rules) →
   stripe (0,5,0) → hover (0,6,0). Shortening this selector to match the theme's own three-class
   hover would tie the stripe and lose on source order, and every other row would light while the
   striped ones stayed dead. ---- */
.slm-page:is(.slm-page-patient-list, .slm-page-expense, .slm-page-setting) .slm-data-table .kt-datatable__body .kt-datatable__row:hover,
.slm-page:is(.slm-page-patient-list, .slm-page-expense, .slm-page-setting) .slm-data-table .kt-datatable__body .kt-datatable__row.kt-datatable__row--hover {
    background: #f2fbf9;
}

/* ---- 7. The command card above the table. Same trade as rule 2 — 12px and the green-tinted
   doubled shadow for the reference's 14px and one neutral one — so the two blocks on the page
   read as one set. The border and the field fill already moved with the tokens.
   Theme rule is (0,2,0); this is (0,3,0). ---- */
.slm-page:is(.slm-page-patient-list, .slm-page-expense, .slm-page-setting) .slm-tab-toolbar {
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
}

/* ---- 8. The DOUBLED rule under the header. The datatable draws `1px solid #D4D4D4` on every
   `.kt-datatable__row` including the head's, so rule 3's #CAD6E5 hairline on the `th` landed 1px
   above a second grey line and the band closed with a muddy 2px edge. It was invisible before this
   block only because the legacy 2px teal sat on top of it.
   The `th` border is the one the reference draws, so the row's is dropped. Theme arm is (0,4,0);
   this is (0,5,0). ---- */
.slm-page:is(.slm-page-patient-list, .slm-page-expense, .slm-page-setting) .slm-data-table .kt-datatable__head .kt-datatable__row {
    border-bottom: 0;
}

/* ---- 9. And the doubled rule under the LAST row — the same defect [opd-v3-last-row] records,
   but the OPPOSITE fix, because the two tables hang their card on different elements.
   On OPD the card is the OUTER `.kt-datatable` and the inner `<table>`'s chrome is stripped, so
   the table's stray bottom border could simply be dropped. Here the card IS the inner `<table>`
   (`.kt-datatable1` leaves the root transparent so the pager sits outside the card,
   slm-theme-v1.css:19366) — dropping ITS border would open the bottom of the card. So the row
   separator gives way instead and the card's own edge closes the list, exactly as the sibling
   `.slm-table` recipe already does ("no rule under the last row", slm-theme-v1.css:19956).
   (0,5,0), over the theme separator's (0,4,0). ---- */
.slm-page:is(.slm-page-patient-list, .slm-page-expense, .slm-page-setting) .slm-data-table .kt-datatable__body .kt-datatable__row:last-child {
    border-bottom: 0;
}

/* ---- 10. Let the header bar GROW for the subtitle.
   🔥 THE THEME'S `height: auto` ARM HAS NEVER WON, and its own comment believes it has:
   `:is(.slm-page-setting, .slm-page-patient-list) .kt-subheader.slm-subheader { height: auto }`
   (slm-theme-v1.css) scores (0,3,0), while `.kt-header--fixed.kt-subheader--fixed
   .kt-subheader.kt-subheader { height: 48px }` (style.css:10555) scores (0,4,0) and both body
   classes are always present. So the bar has been pinned to 48px the whole time — invisible while
   the header was one line of ~28px, and only exposed by the subtitle, which took the content to
   almost exactly 48px and left the bar with no slack at all. One narrower viewport, one wrapped
   subtitle, and the second line would have been clipped by the bar's own box.
   (0,5,0) here, over the 48px rule's (0,4,0). The doubled `.slm-subheader` is what buys the extra
   class — the same trick style.css:10555 itself uses on `.kt-subheader`.
   ⚠ SCOPED TO THIS PAGE ONLY, NOT FIXED IN THE THEME ARM. Raising that arm would un-pin the
   SETTINGS pages' bar too, and they have no subtitle to make room for — their header would simply
   shrink from 48px to its ~28px of content and move every settings page up 20px. That is a
   separate change, and nobody has asked for it. ---- */
.slm-page.slm-page-patient-list .kt-subheader.slm-subheader.slm-subheader {
    height: auto;
    min-height: auto;
}

/* ---- 11. THE TYPE RAMP. Every cell in this table printed at one size and one ink — 13.5px
   #0A0A0A — so the patient's NAME carried exactly as much weight as their date of birth, and there
   was nothing for the eye to run down. OPD does not do that: it sets the patient 13.5px/600 in
   #101828 (slm-theme-v1.css `.kt-user-card-v2__name.user-name-label`) and every other line in the
   row smaller and greyer (12.5px #475467 on the No. chip, 11.5px #667085 on the meta lines). That
   ramp is what this table was missing, and it translates directly: NAME is the row's subject, the
   other eight columns are its attributes.

   ⚠ WHAT IS ACTUALLY BEING BEATEN is `.kt-datatable.kt-datatable--default > .kt-datatable__table >
   .kt-datatable__body .kt-datatable__row > .kt-datatable__cell > span { color: #0a0a0a }` at
   (0,6,0) — which is ALSO why [master-table-v2]'s own `color: var(--slm-mt-fg-1)` has never landed
   on any `.slm-data-table` (it is (0,5,0)) and the token has been inert here since the page was
   built. Both rules below are (0,7,0), so they win outright; NOTHING here is marked `!important`
   and nothing needs to be.

   ⚠ THE SECOND RULE MUST NOT REACH THE NAME. `[data-field]` is stamped on the cell by KTDatatable
   from the `columns` array in patient-list.js, so `:not([data-field="name"])` is the whole gate —
   rename that column there and the name silently drops to attribute type. `:not()` contributes its
   argument's weight, which is what keeps the two rules level at (0,7,0): they are one ramp, and
   neither should be able to win over the other by accident. ---- */
.slm-page:is(.slm-page-patient-list, .slm-page-expense) :is(.slm-data-table-patient-list, .slm-data-table-expense) .kt-datatable__body .kt-datatable__row > .kt-datatable__cell[data-field="name"] > span {
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: -.1px;
    color: #101828;
}
.slm-page:is(.slm-page-patient-list, .slm-page-expense) :is(.slm-data-table-patient-list, .slm-data-table-expense) .kt-datatable__body .kt-datatable__row > .kt-datatable__cell:not([data-field="name"]) > span {
    font-size: 12.5px;
    color: #475467;
}

/* The em-dash a cell prints when it has no value. It is an ABSENCE, not a value, so it takes the
   reference's faintest grey — the same #98A2B3 [opd-table-v3] puts on the "UHID:" caption. It was
   #A7ABC3, a lavender-grey from the old palette that read as real content at 12.5px.
   The dash span is nested INSIDE the cell's span, so it inherits the size from rule 11 and only the
   colour is restated.
   ⚠ `!important` HERE IS UNAVOIDABLE, unlike rule 11: `.text-muted { color: #a7abc3 !important }`
   is a utility, and no amount of specificity beats an `!important` without one. */
.slm-page:is(.slm-page-patient-list, .slm-page-expense) :is(.slm-data-table-patient-list, .slm-data-table-expense) .kt-datatable__body .kt-datatable__cell > span > .text-muted {
    color: #98a2b3 !important;
}
/* And the GENDER column joins the ramp instead of standing outside it. It printed "Female" in
   #FD397A and "Male" in the second blue — the two loudest inks on the page, on a column that is an
   attribute like any other, so the eye was pulled to the middle of every row before it reached the
   name.
   ⚠ THIS IS WHAT OPD DOES, not a departure from it. The queue table used to colour sex the same
   way and the reference dropped it: every `genderTextColor = " datatable-female-text-color"` /
   `" kt-font-brand"` pair in datatable-user-list.js is COMMENTED OUT (:77, :228, :376, :645, :920,
   :1168, :1447), and sex now prints inside the identity meta line in the same grey as the UHID
   beside it. Doing it in CSS rather than by deleting the classes in patient-list.js keeps the
   change revertible and leaves the two class names — which a dozen other screens still emit — alone.
   `color: inherit` rather than a literal #475467: the cell's own span already carries the attribute
   ink from the rule above, so gender tracks the ramp automatically if that value ever moves.
   ⚠ `!important` IS REQUIRED. `.kt-font-brand { color: var(--second-blue-color) !important }` is a
   bare-class utility with the flag on, so specificity alone cannot reach it —
   `.datatable-female-text-color { color: #fd397a }` has no flag and would have lost to weight
   anyway, but the two must move together or the column ends up half recoloured.
   ⚠ THE TWO CLASS NAMES ARE THE CONTRACT WITH patient-list.js:228, which picks between them. Change
   them there and this rule goes inert — the pink comes straight back. */
.slm-page:is(.slm-page-patient-list, .slm-page-expense) :is(.slm-data-table-patient-list, .slm-data-table-expense) .kt-datatable__body .kt-datatable__cell[data-field="gender"] > span > :is(.datatable-female-text-color, .kt-font-brand) {
    color: inherit !important;
}


/* ---- 12. The loading skeleton, re-cut for this table.
   The recipe itself is [opd-table-skeleton] further up — shared on purpose, keyed only on
   `.slm-tbl-skeleton`, and NOT page-scoped. Only the numbers that describe a particular table live
   here: the column grid, the row rhythm, and a header band the OPD one has no need of.

   ⚠ THE GRID IS THE `columns` ARRAY IN patient-list.js, NOT A GUESS. Those nine columns are sized
   `calcWidth('', 15…), calcWidth('', 10…)` and so on — percentages of the portlet body — so the
   same nine numbers as `fr` units reproduce the real column edges at any width, which is the whole
   point of a skeleton: nothing may move when the real rows replace it. If a column is added,
   removed or resized there, these nine `fr` values and the two width arrays in the blade move with
   it.
   ⚠ AND THE ROW COUNT IS EIGHT, not the recipe's default six: at ~42px a row that is roughly the
   fold on a laptop, so the placeholder fills the same band of screen the first page of results
   will. ---- */
.slm-tbl-skeleton.slm-tbl-skeleton--patient-list {
    padding: 0;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
}

/* Nine columns, reproducing `calcWidth()` LITERALLY rather than approximating it.
   🔥 TWO EARLIER CUTS WERE BOTH WRONG, and the reason is worth keeping, because the obvious
   translation of `calcWidth` is not the right one:
     • `15fr 10fr 10fr 4fr 8fr 4fr 7fr 14fr 7fr` — the raw percentages — drifted up to 15px per
       column, because `calcWidth` is `(parentWidth * pct / 100) - offset` and the OFFSETS differ
       (5,5,5,6,10,5,5,10,5); `fr` can carry the percentage but not the pixel subtraction. A 14px
       `gap` made it worse, removing 112px from the row before any of it was shared out — the real
       table has no gutter at all, its columns touch and the air between them is CELL PADDING.
     • `calc(15% - 5px) …` — the literal formula — was worse still, 400px short at the last column.
       Those nine widths sum to only 72% of the parent MINUS 56px of offsets, i.e. ~1300px in an
       1872px card. KTDatatable does not use them as written: `adjustCellsWidth` NORMALISES them to
       fill the table, so what actually renders is every column scaled by ~1.32. `calc()` reproduces
       the input to that function, not its output, and the output is what a skeleton has to match.
   So the ratios below are the RENDERED widths, measured off the real table at 1900px:
   361 235 236 99 184 101 168 319 169, summing to the card's 1872px inner width. As `fr` they refill
   whatever width the card has, which is exactly what the normaliser does.
   ⚠ MEASURED, NOT DERIVED — so re-measure rather than recompute if a column changes in
   patient-list.js. Nothing checks these against that file. */
.slm-tbl-skeleton.slm-tbl-skeleton--patient-list .slm-sk-row {
    grid-template-columns: 361fr 235fr 236fr 99fr 184fr 101fr 168fr 319fr 169fr;
    gap: 0;
    /* 9px lands the skeleton row on the real row's measured 43.3px. It is NOT rule 4's 11px: the
       real row adds a ~20px line box on top of its padding, this one an 11-13px bar. Heights are
       what must match, not paddings. */
    padding: 9px 0;
    align-items: center;
    border-bottom: 1px solid #dde3ec;
}

/* The air between columns, taken from the real cells rather than from a grid gutter: every
   `.kt-datatable__cell` here computes `padding: 11px 7px`, and the first one 18px on the left.
   Measured, not assumed — the real span offsets from their cell edges are exactly 18,7,7,7,7,7,7,7,7. */
.slm-tbl-skeleton.slm-tbl-skeleton--patient-list .slm-sk-cell {
    padding: 0 7px;
    /* One line per cell here, so the recipe's 8px gap between stacked bars is dead weight. */
    gap: 0;
}
.slm-tbl-skeleton.slm-tbl-skeleton--patient-list .slm-sk-cell:first-child {
    padding-left: 18px;
}
.slm-tbl-skeleton.slm-tbl-skeleton--patient-list .slm-sk-cell:last-child {
    padding-right: 18px;
}

/* The header band. OPD's skeleton has none — it is prepended above a container that still shows its
   own head — but this loader stands in for the WHOLE card, head included, so without it the
   skeleton is a card with no top and the real header band drops in as a visible jump. Same two
   values as rule 3. */
.slm-tbl-skeleton.slm-tbl-skeleton--patient-list .slm-sk-head {
    padding: 15px 0;
    background: #e2eaf4;
    border-bottom: 1px solid #cad6e5;
}

.slm-tbl-skeleton.slm-tbl-skeleton--patient-list .slm-sk-cell.is-center {
    align-items: center;
}

.slm-tbl-skeleton.slm-tbl-skeleton--patient-list .slm-sk-bar {
    height: 11px;
}
/* 🔥 NEUTRALISING THE RECIPE'S OWN "BIG FIRST BAR", WHICH IS ON THE WRONG COLUMN HERE.
   `.slm-tbl-skeleton .slm-sk-cell:nth-child(2) .slm-sk-bar:first-child { height: 12px }` marks the
   patient's name — column TWO on the OPD queue, because that table opens with a No. track. This
   table has no No. column, so the name is column ONE, and the recipe was quietly fattening the ABHA
   Address placeholder instead. Both arms are needed: one to take it away, one to put it back.
   (0,5,0) over the recipe's (0,4,0) — the doubled class is there so this wins on weight and not on
   sitting further down the same file. */
.slm-tbl-skeleton.slm-tbl-skeleton--patient-list .slm-sk-cell:nth-child(2) .slm-sk-bar:first-child {
    height: 11px;
}
.slm-tbl-skeleton.slm-tbl-skeleton--patient-list .slm-sk-row:not(.slm-sk-head) .slm-sk-cell:nth-child(1) .slm-sk-bar {
    height: 13px;
}
/* Header caps are the smallest type on the table, so their placeholders are the shortest bars. */
.slm-tbl-skeleton.slm-tbl-skeleton--patient-list .slm-sk-head .slm-sk-bar {
    height: 8px;
}
/* The row's only action is a `btn-xs`, not OPD's full-height Next Step button. */
.slm-tbl-skeleton.slm-tbl-skeleton--patient-list .slm-sk-cell.is-action .slm-sk-bar {
    height: 24px;
    border-radius: 6px;
}
/* ===== [patient-list-v3] END ===== */

/* ===== [abdm-rail-mark] BEGIN — the ABDM mark's SIZE exception. 2026-09-07.

   🔥 THE COLOUR EXCEPTION THAT USED TO LIVE HERE IS GONE, and the empty space is the point. This
   block once pinned the mark to `--slm-chrome-fg-bright` so it rested WHITE in both states, while
   the rail's ten other icons rest at `--slm-chrome-fg-muted` (#93A0B5) and go white only when their
   item is active. That was asked for, and then asked back: white-at-rest made ABDM the one loud
   entry in a rail whose whole idea is "quiet entries with one lit one", and at 22px the near-closed
   outer arc read as a white badge sitting among plain line icons.

   ⚠ NOTHING REPLACED IT, WHICH IS WHY THERE IS NO `color` RULE BELOW. The mark is drawn entirely in
   `currentColor` — one stroke group and six fills, sidebar.blade.php — and the rail sets `color` on
   the PARENT `.kt-menu__link-icon`: muted at rest (slm-theme-v1.css:21936), bright on the active
   item, which also gets a teal disc behind it. Deleting the pin lets that inheritance through, so
   the mark now follows every state the other ten follow — resting, active, hover, open, here —
   without this file naming any of them. Re-adding a `color` here to "match the muted grey" would
   restate a token the element already inherits and would silently break the active and hover states
   the moment either token moved.
   ⚠ AN INHERITED VALUE LOSES TO ANY DECLARATION ON THE ELEMENT ITSELF, whatever the specificity.
   That is why the old one-class rule beat the theme's eight-class chain, and it is why nothing
   needs to out-rank anything now that it is gone. If the mark ever goes the wrong colour again,
   look for a rule targeting the `svg` DIRECTLY — not for a heavier ancestor.

   ⚠ THE SIZE EXCEPTION STAYS, and it is unrelated to colour — see the note on it below. `full icon
   in same color` was the ask; the 22/26px was chosen separately and for a legibility reason that
   still holds.

   REVERT: drop `slm-abdm-mark` from the svg's class list and the mark also takes its neighbours'
   17/21px, matching them completely. ===== */
/* ---- The mark is BIGGER than its neighbours: 22px resting, 26px active, against the rail's 17/21.
   Also a deliberate exception, chosen on 2026-09-07 with the alternatives rendered side by side at
   true pixels.

   🔥 THE REASON IS DENSITY, NOT TASTE, and it is worth writing down because "just make it 17px like
   the others" is the obvious instinct and it does not work. abdm-logo.svg packs NINE shapes into a
   64-unit box — three concentric arcs, five overlapping leaves and a seated figure. At 17px those
   land in roughly 12px of height, the shapes merge, and the mark renders as a grey blob. That is
   independent of colour: it was a blob in brand colour, in muted grey and in white. A line icon
   with four or five strokes survives 17px; this artwork does not. 22px is the smallest size at
   which the ring and the leaf cluster read as separate things.
   The alternative was a simplified glyph that IS crisp at 17px — rejected, because it would not be
   the ABDM mark. Legibility was traded for the size match, knowingly.

   ⚠ THE SPECIFICITY HERE IS DELICATE — BOTH THEME RULES CARRY `!important`, so `!important` alone
   settles nothing and the selectors have to out-rank them. style.css is concatenated BEFORE
   slm-theme-v1.css, so a TIE is a LOSS.
     theme resting  (slm-theme-v1.css:21924)  (0,7,2)   ->  ours below  (0,8,2)  ✓
     theme active   (slm-theme-v1.css:21997)  (0,8,2)   ->  ours below  (0,9,2)  ✓
   ⚠ AND THE TWO OURS MUST NOT BE COLLAPSED INTO ONE. The resting selector matches an ACTIVE item
   too (`.kt-menu__item` is on it either way), so at (0,8,2) it would tie the theme's active rule and
   lose — pinning the active mark to 21px. The active arm exists to win that at (0,9,2), and it is
   why `.kt-menu__item.kt-menu__item--active` is written as a compound rather than the shorter
   `.kt-menu__item--active`: it mirrors the theme's own chain so the +1 is unambiguous. ---- */
body.slm-ui-theme-dark .slm-menu-opts-sidebar .kt-aside-menu .kt-menu__nav > .kt-menu__item > .kt-menu__link .kt-menu__link-icon svg.slm-abdm-mark {
    width: 22px !important;
    height: 22px !important;
}
body.slm-ui-theme-dark .slm-menu-opts-sidebar .kt-aside-menu .kt-menu__nav > .kt-menu__item.kt-menu__item--active > .kt-menu__link .kt-menu__link-icon svg.slm-abdm-mark {
    width: 26px !important;
    height: 26px !important;
}
/* ===== [abdm-rail-mark] END ===== */

/* ===== [settings-rail-v3] BEGIN — the Settings surface as TWO PANES: a vertical section rail on
   the left, the section's own content on the right. 2026-09-07.

   WHAT THIS REPLACES. Settings used to hang 12 top-level tabs across the top of one portlet, three
   of which opened dropdowns and three of those a second level of flyout — so reaching Laboratory
   was a hover, a hover and a click, and nothing on screen said where you were except the
   breadcrumb. The 31 sections are now all visible at once in a scrolling rail, grouped by the
   breadcrumb trail they already declare in config/settings_nav.php.

   ⚠ EVERY GROUP LABEL IS A `trail` SEGMENT IN config/settings_nav.php, which is the same string
   the breadcrumb above the pane prints — so the rail and the breadcrumb cannot say different things
   about where a section lives. That was NOT true for one stretch: the rail shipped with three
   groups the mockup invented for the ten previously-ungrouped sections ("Billing & Insurance",
   "Communication", "Doctors & Access") while those slugs still declared `trail => []`. The trails
   were added on 2026-09-07 and the two agree again.
   ⚠ THIS NOTE ITSELF HAS BEEN WRONG TWICE, so check the config before trusting it: it once
   described a single "General" group that no longer exists, and then described those three as
   having no trail after they had been given one.

   🔥 THE WHOLE BLOCK WORKS WITHOUT A SINGLE `!important`, AND THAT IS BOUGHT IN THE MARKUP, NOT
   HERE. style.css:3692 is
       `.nav-tabs.master-navigation .nav-item .nav-link.active,
        .nav-tabs.master-navigation .nav-item .nav-link:hover
        { border-color: …; color: var(--second-blue-color) !important }`
   — legacy, flagged, and it would paint every active and hovered rail row blue past any weight a
   new rule can reach. The nav partial therefore DROPS `nav-tabs` (and `nav-tabs-line-2x`,
   `master-menu`, `slm-ctrl-tab-settings-nav`) from the <ul> while KEEPING `master-navigation`,
   which is a live JS hook (validation.js:4316/:4327 reads
   `$(".master-navigation .nav-link.active")`). Put `nav-tabs` back on that element and the rail
   turns blue on hover with no other symptom.

   ⚠ THE OLD HORIZONTAL NAV'S CSS IS NOT DELETED, IT IS ORPHANED. [settings-nav-v2]
   (slm-theme-v1.css:21194) keys everything on `.slm-ctrl-tab-settings-nav` and
   `.kt-portlet__head.master-portlet-head`; neither element exists any more, so all of it is inert.
   It is left in place because two rules inside that block are NOT nav rules and are still load-
   bearing app-wide: `[datatable-no-bottom-margin]` (`.kt-datatable.kt-datatable--default
   { margin-bottom: 0 }`, 138 datatables) and `[settings-card-border]`, whose
   `.setting-main-container .kt-portlet--tabs` arm is what rules 7 and 8 below retune rather than
   remove. Deleting the block wholesale takes those two with it.

   ⚠ SPECIFICITY, NOT SOURCE ORDER. webpack.mix.js concatenates this file at slot 7 and
   slm-theme-v1.css at slot 16, so a TIE against the theme is a LOSS from here. Every selector below
   carries `.slm-page.slm-page-setting` — two classes that sit on the same element as
   `.setting-main-container` (layout.blade.php) — which puts each rule at least one class above the
   theme rule it retunes. The counts are written out where it is close.

   Palette is the reference's, the same set [patient-list-v3] uses:
     card         1px #E5E7EB / 14px / 0 1px 2px rgba(16,24,40,.05)
     group caps   #98A2B3 10.5px/700, .06em
     row ink      #475467 -> #101828 on hover
     active       #E8F7F5 fill / #0A9184 ink / 600
     hover fill   #F3F6F8   (the v2 page ground, so a hovered row reads as a notch, not a chip)

   REVERT: delete this block and restore partials/nav.blade.php + the `.slm-settings-split` wrapper
   in layout.blade.php from git history. [settings-nav-v2] needs no change to come back to life —
   it only wants its two class names back on the markup. ===== */

/* ---- 1. The split. `align-items: flex-start` is LOAD-BEARING, not cosmetic: a flex item that
   stretches to the row's height has no slack for `position: sticky` to move within, so rule 2's
   sticky rail would simply never stick. `min-width: 0` on the pane is the other half — flex items
   default to `min-width: auto`, and a KTDatatable measuring a 12-column table would then push the
   row wider than the panel, which `.slm-ui-theme-v1.slm-page { overflow-x: hidden }` would clip
   rather than scroll. ---- */
.slm-page.slm-page-setting .slm-settings-split {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

/* ---- 2. The rail. 240px is the widest label ("IPD Admission Form" at 12.5px) plus its padding, so
   nothing in the list ever wraps to a second line.

   ⚠ THIS IS THE FIRST `position: sticky` INSIDE A v2 PAGE, and [content-panel-round]
   (slm-theme-v1.css:22519) records that as a precondition it checked when it made
   `.slm-ui-theme-v1.slm-page` a `height: calc(100vh - 56px); overflow-y: auto` scroll container —
   "no `position: sticky|fixed` lives inside a v2 page (nothing re-anchors)". That is no longer
   true, and it is fine: sticky resolves against the nearest scrollport, which IS that panel, so the
   rail pins to the panel rather than to the viewport and stays below the fixed 56px chrome by
   construction. It is only worth knowing because the reverse — someone removing the panel's
   `overflow-y` — would silently re-anchor this to the window.

   The rail is TALLER THAN THE VIEWPORT with all 31 sections shown (~1270px), so it carries its own
   `overflow-y` as well. Two nested scroll areas is the intent: the rail scrolls to reach Location,
   the panel scrolls to reach the bottom of a long section.

   ⚠ `100vh - 80px`, AND THE 80 IS NOT THE STICKY OFFSET. It is the scrollport's own
   `.slm-kt-content-padding` — ~12px top and ~12px bottom — plus the 56px chrome the panel starts
   below. The rail begins at the top padding edge, so anything larger than `100vh - 80px` pushes it
   past the bottom padding edge and the whole PAGE gains a scrollbar even though nothing is
   visually cut off. It was briefly cut to `- 72px` on the theory that the 8px went with the sticky
   `top` when that dropped to 0; it did not, and the result was a permanent 8px page scroll
   (measured: split bottom 635 against a 639 viewport with 11.7px of bottom padding). At 80 the rail
   ends level with the pane's own content, which is also what makes the two columns finish together.

   ⚠ `top` IS 0, NOT 8px, AND THAT IS LOAD-BEARING FOR THE ALIGNMENT.
   It was 8px, which pushed the rail 8px BELOW the pane's first card — reported as "why both not
   start with same alignment", and measured at rest (scrollTop 0): pane card top 68, rail top 76.
   `top` on a sticky box is measured from the SCROLLPORT'S PADDING BOX, and this scrollport is
   #kt_content, whose own `.slm-kt-content-padding` already insets the content by ~12px. So the 8px
   was double-counting a gap that the padding had already provided, and it bought nothing: with
   `top: 0` the pinned rail still clears the fixed 56px chrome by that same ~12px (measured: pinned
   railTop 68 against a scrollport top of 56). Raising it again re-opens the misalignment. ---- */
.slm-page.slm-page-setting .slm-settings-rail {
    flex: 0 0 240px;
    width: 240px;
    position: sticky;
    top: 0;
    max-height: calc(100vh - 80px);
    /* ⚠ THE RAIL CLIPS, THE NAV SCROLLS — do not put `overflow-y: auto` back here.
       It used to be the scroll container itself, which meant the "Find a setting"
       box scrolled away with the list: the fastest route to a named section
       disappeared exactly when the list got long enough to need it. It is now a
       flex column that clips, with the scrolling moved down onto
       `.slm-settings-rail__nav`, so the find box and the no-match line stay put
       and only the sections move. The nav needs `min-height: 0` for that (a flex
       item will not shrink below its content otherwise, and would push the rail
       taller than max-height instead of scrolling). */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 6px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
}

/* ---- 3. THE FIND BOX. Built to the supplied mockup, and it earns its space: the rail is 31
   sections deep and the fastest way to a named one is to type it. Filtering itself is
   `slmSettingsRail` in custom/settings/common.js — matched on each link's own text, so it follows
   the labels SettingsNav hands the blade and needs no separate index.
   The fill is the same #F9FAFB / #E5E7EB pair the section toolbars use for their search, so the two
   search fields on the screen read as one control at two sizes. ---- */
.slm-page.slm-page-setting .slm-settings-rail__find {
    flex: none;
    position: relative;
    display: flex;
    align-items: center;
    gap: 7px;
    height: 34px;
    margin: 2px 2px 8px;
    padding: 0 10px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 9px;
    transition: border-color .12s, background .12s;
}
.slm-page.slm-page-setting .slm-settings-rail__find:focus-within {
    background: #ffffff;
    border-color: #0a9184;
}
.slm-page.slm-page-setting .slm-settings-rail__findlead {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    color: #98a2b3;
}
.slm-page.slm-page-setting .slm-settings-rail__findinput {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    padding: 0;
    background: none;
    border: 0;
    outline: none;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 12.5px;
    color: #101828;
}
.slm-page.slm-page-setting .slm-settings-rail__findinput::placeholder {
    color: #98a2b3;
}
/* The clear button only exists once there is something to clear — the script puts `has-value` on
   the wrapper — so an empty field is a clean two-element control. */
.slm-page.slm-page-setting .slm-settings-rail__findclear {
    display: none;
    padding: 0;
    background: none;
    border: 0;
    color: #98a2b3;
    cursor: pointer;
}
.slm-page.slm-page-setting .slm-settings-rail__find.has-value .slm-settings-rail__findclear {
    display: grid;
    place-items: center;
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
}
.slm-page.slm-page-setting .slm-settings-rail__findclear svg {
    width: 9px;
    height: 9px;
    display: block;
}
.slm-page.slm-page-setting .slm-settings-rail__findclear:hover {
    color: #475467;
}

/* ---- 4. The list. `display: block` beats Bootstrap's `.nav { display: flex; flex-wrap: wrap }` —
   left alone, the groups would wrap into a paragraph. (0,3,0) against the vendor's (0,1,0). ---- */
.slm-page.slm-page-setting .slm-settings-rail__nav,
.slm-page.slm-page-setting .slm-settings-rail__grouplist,
.slm-page.slm-page-setting .slm-settings-rail__subnav {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ---- 4a. THE GROUP HEADING, which is a BUTTON now and not a caption.
   🔥 THE FIRST TWO CUTS OF THIS RAIL BOTH FAILED ON HIERARCHY, in opposite ways, and the mockup
   settles it. The first printed 31 links under six flat captions — "too simple, no proper submenu
   identify". The second nested the submenus behind an indent and a rail line, which fixed the
   nesting but left every one of the 31 rows on screen at once, so the rail still read as one long
   list. The answer in the mockup is that BOTH levels COLLAPSE: a group is a control, its chevron
   says whether it is open, and the rail is as short as the reader wants it.
   ⚠ THE HEADING IS TEAL WHEN IT HOLDS THE OPEN SECTION (`.is-current`, set server-side in the
   blade) and #98A2B3 otherwise. That is the only thing telling you where you are when a group is
   collapsed and its highlighted row is not on screen — without it, collapsing the current group
   makes the rail forget which section is open. ---- */
.slm-page.slm-page-setting .slm-settings-rail__group {
    margin: 0 0 2px;
}
.slm-page.slm-page-setting .slm-settings-rail__grouphead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 11px 10px 6px;
    background: none;
    border: 0;
    text-align: left;
    cursor: pointer;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #475467;
    transition: color .12s;
}
.slm-page.slm-page-setting .slm-settings-rail__grouphead:hover {
    color: #101828;
}
/* ⚠ THE CATEGORY LINE IS THE ONE THAT CARRIES THE COLOUR, and it was too faint to be that. It sat
   at #98A2B3 — the ink this file uses for an ABSENCE, the em-dash in an empty cell, a placeholder —
   so the five lines naming the rail's top level were the palest text on it, fainter than the
   sections they head. #475467 is the sections' own ink; what separates a heading from them is not
   the colour but 10.5px/700 uppercase at .06em tracking, and at that treatment it needs a real ink
   to read at all.
   ⚠ AND THE TEAL STAYS RESERVED FOR "YOU ARE HERE". It marks the one group holding the open section
   and nothing else — which is exactly why the other four had to move up to a heading ink rather
   than the teal being spread across all five. */
.slm-page.slm-page-setting .slm-settings-rail__group.is-current .slm-settings-rail__grouphead,
.slm-page.slm-page-setting .slm-settings-rail__group.is-current .slm-settings-rail__grouphead:hover {
    color: #0a9184;
}

/* The group MARK. `currentColor` and nothing else — it inherits #475467 from the heading and turns
   teal with it on the group holding the open section, so the "you are here" signal gains a second
   carrier for free instead of needing its own rule.
   ⚠ ICONS STOP AT THIS LEVEL, DELIBERATELY. An earlier cut put one on the three submenu rows and it
   read as a mark belonging to no level — three rows out of thirty-six wearing something nobody else
   had. One mark per top-level group is a rule the eye can state: an icon means "category". The
   submenus keep their weight-and-ink distinction and the sections stay plain. */
.slm-page.slm-page-setting .slm-settings-rail__grouplabel {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.slm-page.slm-page-setting .slm-settings-rail__groupicon {
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
}

/* One chevron for both levels; the open state is the rotation, and it is driven by the same
   `data-slm-open` attribute the script writes, so the mark can never disagree with the list under
   it. Collapsed points right (the mockup's ›), open points down. */
.slm-page.slm-page-setting .slm-settings-rail__chev {
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
    transform: rotate(-90deg);
    transition: transform .16s ease;
}
.slm-page.slm-page-setting [data-slm-open="1"] > .slm-settings-rail__grouphead > .slm-settings-rail__chev,
.slm-page.slm-page-setting [data-slm-open="1"] > .slm-settings-rail__subhead > .slm-settings-rail__chev {
    transform: rotate(0deg);
}
/* Collapse by attribute rather than by a class, so the blade's server-rendered state and the
   script's stored one are the same switch. `display: none` and not a height transition on purpose:
   these lists are 2 to 12 rows of unknown height, and an animated max-height guess either clips the
   long ones or lands late on the short ones. */
.slm-page.slm-page-setting [data-slm-open="0"] > .slm-settings-rail__grouplist,
.slm-page.slm-page-setting [data-slm-open="0"] > .slm-settings-rail__subnav {
    display: none;
}

/* ---- 4b. THE SUBMENUS — Investigation, Prescription, Notes — which are not siblings of Clinical
   Data but children of it: config/settings_nav.php gives Laboratory the trail
   ['Clinical Data', 'Investigation'], two segments deep, and the old nav made them a second level
   of flyout. They render INLINE at the position the old dropdown listed them in, as collapsible
   rows that look like a section row rather than like a second group heading — which is what the
   mockup draws, and what keeps the two levels of heading (group vs submenu) from competing. ---- */
.slm-page.slm-page-setting .slm-settings-rail__subhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 7px 10px;
    background: none;
    border: 0;
    border-radius: 8px;
    text-align: left;
    cursor: pointer;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -.005em;
    color: #101828;
    transition: background-color .12s, color .12s;
}
.slm-page.slm-page-setting .slm-settings-rail__subhead:hover {
    background-color: #f3f6f8;
}

/* 🔥 THE CHEVRON ON ITS OWN WAS NOT ENOUGH TO SAY "THIS IS A CATEGORY". Prescription and Notes sat
   in the list looking exactly like Advise and Certificate beside them, because the only thing
   separating them was a 13px mark at the FAR RIGHT of a 240px row — 200px from the word it
   qualifies, and the last thing the eye reaches on a line it has already finished reading. A
   collapsed submenu shows no children at all, so if the row does not announce itself there is
   nothing else on screen that will. The distinction is therefore in the TYPE — 600/#101828 against
   the sections' 500/#475467 — and in the chevron, which keeps saying open-vs-shut.
   ⚠ A LEADING FOLDER ICON WAS TRIED HERE AND REMOVED ON REQUEST. Nothing else in this rail carries
   an icon, so it read as a mark belonging to no level rather than as a category cue; the weight and
   the ink do the same work without introducing one.
   ⚠ IT GOES TEAL WHEN THE OPEN SECTION IS INSIDE IT — `.is-current`, set server-side from the same
   `$holds()` call that sets `data-slm-open`, so the colour and the open state cannot disagree. That
   closes a real gap: with Laboratory open the rail marked its GROUP and the row itself, but the
   submenu between them — the one part of the path that collapses, and therefore the only one that
   can hide the pill — was left unmarked. */
.slm-page.slm-page-setting .slm-settings-rail__sublabel {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.slm-page.slm-page-setting .slm-settings-rail__sub.is-current .slm-settings-rail__subhead {
    color: #0a9184;
}
/* Sub-items hang under their heading behind a dot, indented one step. The dot is the mockup's, and
   it does a real job: at this indent, without it a submenu's children are only 12px from their
   parent and read as siblings of it. */
/* ⚠ THE RAIL CLASS IS IN THIS SELECTOR TO WIN A TIE, NOT FOR SCOPE. Rule 5 sets the shorthand
   `padding: 7px 10px` on `.slm-page.slm-page-setting .slm-settings-rail__nav .nav-link` at (0,4,0)
   and sits BELOW this one in the file, so a matching (0,4,0) here loses on source order and the
   indent silently does not happen — measured: sub-items landed at the same x as their parent with
   the dot overlapping the first letter. (0,5,0) wins wherever it sits. */
.slm-page.slm-page-setting .slm-settings-rail__nav .slm-settings-rail__subnav .nav-link {
    position: relative;
    padding-left: 46px;
}
.slm-page.slm-page-setting .slm-settings-rail__subnav .nav-link::before {
    content: "";
    position: absolute;
    left: 34px;
    top: 50%;
    width: 4px;
    height: 4px;
    margin-top: -2px;
    border-radius: 50%;
    background: #cbd5e1;
}
.slm-page.slm-page-setting .slm-settings-rail__subnav .nav-link.active::before {
    background: #ffffff;
}

.slm-page.slm-page-setting .slm-settings-rail__nav .nav-item {
    margin: 0;
}

/* ---- 4c. THE INDENT, WHICH IS THE MARK'S SECOND JOB. A 13px icon plus its 7px gap moves the
   heading's TEXT to 30px while the rows under it started at 10px — so the heading would have read
   further right than everything it heads, which is the wrong way round and looks like a mistake
   rather than a level. The rows and the submenu heads move to 30px to hang off the label, and the
   icon sits alone in the 20px gutter that opens to their left. Sub-items take one more step.
   ⚠ IT STILL FITS. The longest label is "IPD Admission Form" at ~115px in 12.5px Inter; 30 + 115
   + 10 of right padding + 12 of card padding = 167px inside a 240px rail. The longest sub-item,
   "Nursing Note", lands at ~146px. Neither truncates — but both are close enough that a much
   longer section name would, and the rows carry `text-overflow: ellipsis` for that. ---- */
.slm-page.slm-page-setting .slm-settings-rail__nav .slm-settings-rail__grouplist > .nav-item > .nav-link,
.slm-page.slm-page-setting .slm-settings-rail__subhead {
    padding-left: 30px;
}

/* ---- 5. The rows. `border: 0` clears the `nav-tabs` chrome KingAdmin puts on `.nav-link`.
   ⚠ THE OPEN SECTION IS A SOLID PILL, NOT A TINT, and that is a change from the previous cut.
   A #E8F7F5 wash with teal text was legible while every row was on screen; with the groups
   collapsible it has to survive being the one thing you scan for, and the mockup draws it solid.
   It is the brand teal — the app's actual primary, and the same fill the left chrome rail puts
   behind the active Settings icon — NOT the darker green in the mockup, which was cut against the
   older teal chrome that went navy in Aug 2026. ---- */
.slm-page.slm-page-setting .slm-settings-rail__nav .nav-link {
    display: block;
    padding: 7px 10px;
    border: 0;
    border-radius: 8px;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: -.005em;
    color: #475467;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background-color .12s, color .12s;
}
.slm-page.slm-page-setting .slm-settings-rail__nav .nav-link:hover {
    background-color: #f3f6f8;
    color: #101828;
}
.slm-page.slm-page-setting .slm-settings-rail__nav .nav-link.active,
.slm-page.slm-page-setting .slm-settings-rail__nav .nav-link.active:hover {
    background-color: #0a9184;
    color: #ffffff;
    font-weight: 600;
}

/* ---- 5a. THE FILTER'S OUTPUT. `is-hidden` is written by the script onto items, submenus and
   groups that do not match; while it is filtering the tree is also force-expanded, which is why
   `.is-filtering` has to out-rank the `data-slm-open="0"` collapse above — otherwise typing into
   the box would hide matches inside a group the user had closed. Both are (0,3,0) at the
   `.slm-page.slm-page-setting` prefix, so the arm below adds the rail class to win on weight rather
   than on sitting further down the file. ---- */
.slm-page.slm-page-setting .slm-settings-rail__nav .is-hidden {
    display: none;
}
.slm-page.slm-page-setting .slm-settings-rail__nav.is-filtering [data-slm-open="0"] > .slm-settings-rail__grouplist,
.slm-page.slm-page-setting .slm-settings-rail__nav.is-filtering [data-slm-open="0"] > .slm-settings-rail__subnav {
    display: block;
}
/* A collapsed chevron pointing right above an expanded list would be a lie, so while filtering
   every chevron reads open. */
.slm-page.slm-page-setting .slm-settings-rail__nav.is-filtering .slm-settings-rail__chev {
    transform: rotate(0deg);
}
.slm-page.slm-page-setting .slm-settings-rail__empty {
    flex: none;
    padding: 14px 10px;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 12px;
    color: #98a2b3;
}

/* ---- 5b. The rail's scrollbar. It is a nested scroll area inside the page panel's own, so an
   overlay scrollbar that only appears mid-gesture leaves no sign the list continues past the fold —
   the mockup draws a permanent track. Firefox takes the two-value shorthand; WebKit needs the
   pseudo-elements, and they are additive, so both are given. ---- */
.slm-page.slm-page-setting .slm-settings-rail__nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #d7dee8 transparent;
}
.slm-page.slm-page-setting .slm-settings-rail__nav::-webkit-scrollbar {
    width: 6px;
}
.slm-page.slm-page-setting .slm-settings-rail__nav::-webkit-scrollbar-thumb {
    background: #d7dee8;
    border-radius: 3px;
}
.slm-page.slm-page-setting .slm-settings-rail__nav::-webkit-scrollbar-thumb:hover {
    background: #b9c4d2;
}
.slm-page.slm-page-setting .slm-settings-rail__nav::-webkit-scrollbar-track {
    background: transparent;
}

/* ---- 6. The pane. `min-width: 0` is explained in rule 1. The margin is KingAdmin's own 20px on
   `.kt-portlet`, which inside a flex row is just a gap hanging off the bottom of the card. ---- */
.slm-page.slm-page-setting .slm-settings-pane {
    flex: 1 1 auto;
    min-width: 0;
    margin-bottom: 0;
}

/* ---- 7. THE PANE IS NOT A CARD, AND THIS RULE IS HERE TO STOP IT BEING ONE.
   🔥 IT WAS A CARD FOR ONE COMMIT AND THE TABLE INSIDE IT READ AS OVER-ROUNDED. Reported as
   "table have too much round radius / for table follow opd table style", and the radius was not
   the fault: at 14px it was already OPD's exact value ([opd-table-v3] rule 5 —
   `1px #E5E7EB / 14px / 0 1px 2px rgba(16,24,40,.05)` on `.kt-datatable.custom-kt-datatable`).
   What was wrong was that there were TWO cards. A white 14px pane card wrapping a white 14px table
   card is invisible as nesting — both surfaces are #FFF — so all the eye gets is a tinted head band
   curving inside a border a few pixels away from another border, and it reads as one very round
   object. OPD has no outer card: its table sits straight on the #F3F6F8 page ground. So the pane
   gives up its chrome and the section's own cards become the only cards on that side, which is what
   makes this table identical to the OPD one instead of merely sharing its values.
   [settings-card-border]'s `2px solid #c2d0cc` at 12px is what is being cleared — theme arm
   `.setting-main-container .kt-portlet--tabs` is (0,2,0), this is (0,4,0) — along with the base
   `.kt-portlet` background and lavender `0 0 13px rgba(82,63,105,.05)` shadow at (0,1,0).
   ⚠ `.kt-portlet.kt-portlet--tabs` IS STILL ON THE ELEMENT and should stay: 32 section views are
   written against the portlet's structure. This strips its LOOK, not its markup contract. ---- */
.slm-page.slm-page-setting .slm-settings-pane.kt-portlet--tabs {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/* And the body inside it. The theme paints `#f0f5f4` there — a green-grey ground that existed so
   the white datatable card would stand off the portlet under the tab strip. There is no strip and
   no card now, so the body is a bare container: transparent, and with KingAdmin's 25px padding
   dropped so a section's first card starts at the pane's own left edge, level with the rail's top
   and with the page ground running behind everything between the cards — exactly OPD's arrangement.
   Theme background arm is (0,3,0) and the base padding (0,2,0); this is (0,5,0). ---- */
.slm-page.slm-page-setting .slm-settings-pane.kt-portlet--tabs > .kt-portlet__body {
    background: transparent;
    padding: 0;
}

/* ---- 8. Narrow viewports: stop being two columns. Below 1024px the rail would take a quarter of
   the width and leave the tables unreadable, so it becomes a normal block above the pane with a
   capped height of its own.
   ⚠ 1024px IS THE BREAKPOINT THE CHROME ITSELF CHANGES AT — `.kt-header` is 56px above it and the
   mobile header 42px below (slm-theme-v1.css:13168 / style.bundle.css:39695) — which is also why
   `position: static` here matters: rule 2's sticky offset is measured against the desktop chrome.
   ---- */
@media (max-width: 1024px) {
    .slm-page.slm-page-setting .slm-settings-split {
        display: block;
    }
    .slm-page.slm-page-setting .slm-settings-rail {
        position: static;
        width: auto;
        max-height: 300px;
        margin-bottom: 16px;
    }
}

/* ---- 9. THE AJAX-INJECTED FORM VIEWS, which rule 7 left standing on the bare page ground.
   🔥 THIS IS A REGRESSION FROM RULE 7 AND IT ONLY SHOWS AFTER A CLICK, which is why the sweep of
   all 31 sections missed it. Taking the pane's card away is right for every section that arrives
   with its own cards — a toolbar and a table, or a stack of portlets — and that is all 31 of them
   ON LOAD. The Diagnosis Template builder is not a section: it is a form the section REPLACES
   itself with when you pick Create Template, server-rendered into `#addTempAjax` / `#editTempAjax`
   by diagnosis.js:386/:634, and it brings no card of its own. It used to sit on the pane portlet's
   white body; with that body transparent and unpadded it sat on #F3F6F8 with 40 inputs floating
   loose on it.
   ⚠ THESE TWO IDS ARE THE ONLY HOSTS OF THEIR KIND — every settings blade was swept for an
   AJAX-injected view and Diagnosis is the only section with one. If another is ever added, it needs
   an arm here or it will land in the same bare state, and again only after a click.
   ⚠ `:not(:empty)` IS LOAD-BEARING. Both hosts are always in the DOM and are emptied with
   `.html('')` when the builder closes (diagnosis.js:385/:565/:632) — which leaves them genuinely
   empty, so the guard holds — but without it the page would show two stray white boxes under the
   table whenever the builder is not open.
   The padding pairs with the injected root's own Bootstrap `.px-2` (6.5px), landing ~20px of air on
   all four sides. (1,2,0), so nothing competes. ---- */
.slm-page.slm-page-setting :is(#addTempAjax, #editTempAjax):not(:empty) {
    padding: 20px 14px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
}

/* ---- 10. AND THE BUILDER'S OWN FIELDS, WHICH DISAGREE WITH EACH OTHER.
   The card in rule 9 stopped the form floating; this is what it was floating with. Measured inside
   one row of the Diagnosis Template builder:

       input / textarea .form-control   35px   3px radius   0.8px #BFCBD9   transparent
       select2 beside it                40px   8px radius   0.8px #D7DBEC   #FFFFFF

   Four properties, all different, on two controls that sit side by side under paired labels —
   "Diagnosis Template Name" next to "Shorthand Name", "Select Diagnosis" next to "Diagnosis Note".
   The select2s were reskinned by [select2-v2] (settings.css) when the settings split was done; the
   raw `.form-control`s were not, so they are still on KingAdmin's base chrome. That is the whole of
   what makes this view look unfinished.

   ⚠ THE TARGET IS THE SELECT2 SITTING NEXT TO THEM, NOT THE v3 NEUTRAL. #D7DBEC is a lavender-grey
   and #E5E7EB is what the tables and cards on this surface now use, so the "correct" palette answer
   would be to move both. But `[select2-v2]` is a SHARED settings recipe — every section's pickers
   ride it — so moving it is a settings-wide change, not a fix for the page that was reported.
   Matching the neighbour makes this row internally consistent today and leaves that decision whole.

   ⚠ BORDER-WIDTH IS DELIBERATELY NOT SET. Both controls already compute 0.8px; writing `1px` here
   would make the input's edge heavier than the select2's it is being matched to. Only the colour,
   the radius and the fill move.

   ⚠ HEIGHT IS SET ON `input` ONLY. The textareas are 90px against the select2-multiple's 93px, and
   forcing those to agree means pinning a number that belongs to select2's internal line-height —
   a 3px difference is not worth that coupling. Single-line inputs go to 40px because that IS the
   select2 single's height, and those two share a row twice.

   Scoped to the two AJAX hosts, NOT to `.slm-page-setting`: `.form-control` is a Bootstrap base
   class with hundreds of instances across the settings modals alone, and this is a fix for one
   reported view. (1,3,0). ---- */
.slm-page.slm-page-setting :is(#addTempAjax, #editTempAjax) :is(input, textarea).form-control {
    background-color: #ffffff;
    border-color: #d7dbec;
    border-radius: 8px;
}
.slm-page.slm-page-setting :is(#addTempAjax, #editTempAjax) input.form-control {
    height: 40px;
}
/* ===== [settings-rail-v3] END ===== */

/* ===== [settings-grid-v3] BEGIN — the five Settings sections that DO NOT use a KTDatatable,
   brought onto the same OPD/v3 palette as the other twenty-six. 2026-09-07.

   Clinical Exam, Certificate, Discharge Card, SMS & Email and Print render a hand-rolled
   `.certificate-row` grid under `.slm-bootstrap-grid-table` instead of a `.slm-data-table`
   KTDatatable. [patient-list-v3] keys every rule on `.slm-data-table`, so when that block was
   widened to Settings it reached 26 sections and silently skipped these five — found by walking all
   31 in a browser and reading each head band: 26 computed #E2EAF4 and five computed #F4F8F7. Side
   by side inside the SAME screen, which is worse than the original complaint.

   ⚠ THIS IS A PALETTE MOVE ONLY, AND IT IS DELIBERATELY NOT [patient-list-v3] WIDENED AGAIN.
   The two recipes share token NAMES but not a single selector — `.certificate-header` versus
   `.kt-datatable__head`, `.certificate-row` versus `.kt-datatable__row` — so there is nothing to
   widen. What IS shared is the token contract: [bootstrap-grid-table-v2] declares `--slm-mt-*` on
   `.slm-bootstrap-grid-table` itself (slm-theme-v1.css:21346), exactly as [master-table-v2] does on
   `.slm-data-table`, so re-declaring them on this page moves the card border, the row rule and
   every muted grey in one place — the same move rule 1 of [patient-list-v3] makes, with the same
   values.

   ⚠ `--slm-mt-surface-2` IS TWO ROLES HERE — the head band AND the row hover — and the reference
   gives them different values (#E2EAF4 / #F2FBF9). So the token takes the neutral and both are
   restated below, the same split [patient-list-v3] documents.

   ⚠ THE TOOLBAR ON THESE FIVE IS NOT TOUCHED, and it is the one thing still visibly different: the
   other 26 sections put their search and Add button inside a `.slm-tab-toolbar` CARD, while these
   five leave a 420px search pill floating at the left with the button at the right and no card
   around either. That is a layout change, not a palette one, and nobody has asked for it —
   recorded here so the difference is known rather than missed.

   ⚠ SCOPE — `.slm-page.slm-page-setting` ON EVERY RULE. `.slm-bootstrap-grid-table` is a SHARED
   recipe; the class is designed to be adopted by any hand-rolled grid anywhere in the app. Drop the
   page prefix and every future adopter turns blue-grey with it. (0,3,0) against the theme's (0,1,0)
   on the tokens, and one class above the theme on each rule below.

   REVERT: delete this block. Nothing in any blade or JS changed for it. ===== */

/* ---- 1. The tokens. Same nine values as [patient-list-v3] rule 1. ---- */
.slm-page.slm-page-setting .slm-bootstrap-grid-table {
    --slm-mt-surface-2: #f9fafb;
    --slm-mt-surface-3: #f2f4f7;
    --slm-mt-border: #e5e7eb;
    --slm-mt-border-soft: #dde3ec;
    --slm-mt-fg-1: #101828;
    --slm-mt-fg-3: #64748b;
}

/* ---- 2. The card. The border colour moved with the token above; the radius and the shadow are
   hard-coded in the theme — 12px and a doubled green-tinted shadow — so they are restated to the
   reference's 14px and one neutral shadow, matching the datatable card next door.
   Theme rule is (0,1,0); this is (0,3,0). ---- */
.slm-page.slm-page-setting .slm-bootstrap-grid-table {
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
}

/* ---- 3. The column header BAND and its lower edge, the reference's #E2EAF4 over #CAD6E5. Both
   are stated literally rather than left to `--slm-mt-surface-2`, because that token is also the row
   hover — see the block header. Theme rule is (0,2,0); this is (0,4,0). ---- */
.slm-page.slm-page-setting .slm-bootstrap-grid-table .certificate-header {
    background: #e2eaf4;
    border-bottom: 1px solid #cad6e5;
}

/* Head caps: the colour arrives with `--slm-mt-fg-3`, so only the TRACKING is set here — this
   recipe uses .04em and the OPD head .05em.
   ⚠ THE SIZE IS DELIBERATELY LEFT ALONE, AND A px VALUE WAS TRIED HERE AND REVERTED. Both recipes
   already size their caps in rem off the same root, so they track each other for free: measured in
   one browser on the same day, the grid heads and the datatable heads both computed 10.152px.
   Pinning this one to 11px made it the ONLY head on the surface that could not follow the root, and
   it immediately drifted 0.85px larger than the twenty-six beside it. If these ever need resizing,
   move the rem in [bootstrap-grid-table-v2] and [master-table-v2] together — not this rule.
   Theme rule is (0,3,0); this is (0,5,0). */
.slm-page.slm-page-setting .slm-bootstrap-grid-table .certificate-header .certificate-title {
    letter-spacing: .05em;
}

/* ---- 4. Row hover, the reference's #F2FBF9, off the green-grey the token used to carry.
   Theme rule is (0,4,0) including the `:not()`; this is (0,6,0). ---- */
.slm-page.slm-page-setting .slm-bootstrap-grid-table .certificate-row:not(.certificate-header):hover {
    background: #f2fbf9;
}

/* ---- 5. The row's subject, onto the datatable's ink. `.certificate-data` is these grids' name
   column and it already reads its colour from `--slm-mt-fg-1`, which rule 1 just moved to #101828 —
   so only the SIZE is restated here. 1.038rem is 13.5px at the 13px root, which is what the
   `[data-field="name"]` arm of [patient-list-v3] sets on the other 26; they were already equal, and
   this rule exists to say so rather than to change it. Left in place because the two are a pair: if
   one moves, a reader needs to find the other. ---- */
.slm-page.slm-page-setting .slm-bootstrap-grid-table .certificate-data {
    font-size: 13.5px;
}

/* ---- 6. THE COMMAND BAR, onto the one the other 26 sections use.
   ⚠ IT WAS ALREADY A CARD — the difference was never a missing container. The theme gives
   `.slm-bootstrap-grid-table__toolbar` white, a 1px border, 12px and a shadow
   (slm-theme-v1.css:21548), exactly like `.slm-tab-toolbar`. What made the two read as different
   objects was the SEARCH inside it: `max-width: 420px` (settings.css [grid-table-search]) stops the
   field a third of the way across, so the rest of the card is empty white and the eye sees a small
   pill floating beside a button rather than a command bar. The datatable toolbar's field has no cap
   — its `.slm-tab-toolbar__inner` is `grid-template-columns: 1fr auto`, so the field takes
   everything the button does not.
   So this is the same grid, the cap lifted, and the card's chrome moved to the v3 values the rest
   of the surface now uses. Theme rule is (0,1,0); these are (0,3,0).

   ⚠ THE GRID IS GATED ON `:has(> …__search)`, KEEPING [grid-table-search]'s OWN GUARD. The base
   toolbar is `flex` + `justify-content: flex-end` so a LONE Add pill sits right; under an
   ungated `1fr auto` a single child would land in column ONE and jump to the left edge. All three
   sections that use this today do have a search, but the recipe is shared and meant to be adopted,
   so the guard travels with the rule that needs it. ---- */
.slm-page.slm-page-setting .slm-bootstrap-grid-table__toolbar {
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
}
.slm-page.slm-page-setting .slm-bootstrap-grid-table__toolbar:has(> .slm-bootstrap-grid-table__search) {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 14px;
    align-items: center;
}

/* ---- 7. The search field: the cap lifted, and the same nine tokens as rule 1.
   ⚠ IT CARRIES ITS OWN TOKEN COPIES BECAUSE IT SITS OUTSIDE THE CARD. `--slm-mt-*` are declared on
   `.slm-bootstrap-grid-table`, and this field is a child of the TOOLBAR, which is a sibling of that
   card — so it inherits nothing from rule 1 and [grid-table-search] gives it its own set
   (settings.css:1050). Those are the green-grey originals; these are the same values rule 1 uses,
   so the field, the card below it and the datatable fields on the other 26 sections all land on one
   palette. Miss this and the bar stays green-grey under a blue-grey table.
   `--slm-mt-primary` is NOT among them: it is the brand teal on the focus ring and the Add pill,
   and moving it is an app-wide decision. ---- */
.slm-page.slm-page-setting .slm-bootstrap-grid-table__search {
    max-width: none;
    --slm-mt-surface-2: #f9fafb;
    --slm-mt-surface-3: #f2f4f7;
    --slm-mt-border: #e5e7eb;
    --slm-mt-fg-1: #101828;
    --slm-mt-fg-3: #64748b;
    --slm-mt-fg-4: #98a2b3;
}

/* ---- 8. The Add pill's leading MARK, which was the last difference between the two bars.
   These three drew `<i class="slmicon-plus">` — a font glyph that renders a FILLED CIRCLE-plus —
   while the other 26 draw an inline `<svg>` thin cross. Same size, same teal, same position, but
   not the same mark, and on a screen where the two bars sit one click apart that is the kind of
   difference that reads as two different products. The three blades now emit the SAME SVG the
   datatable toolbar does, so there is one plus on the surface.
   ⚠ THE THEME SIZES `> i`, NOT `> svg`, so the swap needs this rule or the mark renders at whatever
   the SVG's intrinsic box happens to be. 14px is what `.slm-data-table .slm-tab-toolbar__add svg` uses (slm-theme-v1.css:19100) — checked, not
   guessed at 12.
   ⚠ `slmicon-plus` IS STILL USED ELSEWHERE — it is a shared icon font class, not this button's — so
   nothing was removed from the font, only from these three buttons. ---- */
.slm-page.slm-page-setting .slm-bootstrap-grid-table__add > svg {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
}
/* ===== [settings-grid-v3] END ===== */