* {
/*    font-family:Arial, sans-serif;*/
}

body, button, input, select, textarea,
.dropdown-menu, label, .dropdown-item,
.navbar, .sidebar, .content-wrapper, .main-footer {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    /*font-family: 'IBM Plex Sans', sans-serif !important;*/
    /*    font-family: Arial !important;*/
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;

}
body{
    background-color:white !important;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

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

body {
    margin-bottom: 30px;
    font-family:inherit;
}


.text-light {
    color: #f8f9fa !important;
    background-color: #343a40 !important; 
    font-weight: bold; 
}


/*.select2-selection__arrow {
    display: inline-block !important;
    visibility: visible !important;
    height: auto !important;
    width: auto !important;
}
*/


/* force select control to not blow out container */
/*.select2-container {
    width: 100% !important;
    box-sizing: border-box;
}*/

/* limit dropdown width to viewport and hide horizontal overflow */
/*.select2-container--open .select2-dropdown {
    max-width: 95vw !important;
    overflow-x: hidden !important;
    box-sizing: border-box;
}*/



/*--------login----------------------*/
/* Style for the active button */
.btn-check:checked + .btn {
    background-color: white !important;
    color: black !important;
    border-color: black; 
}

/* Rounded corners for the first button when active */
#option_a1:checked + .btn {
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0; 
}

#option_a1 + .btn {
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

#option_a3:checked + .btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 15px; 
    border-bottom-right-radius: 15px; 
}

#option_a3 + .btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 15px; 
    border-bottom-right-radius: 15px;
}

/*---------selct-----------*/
/*.form-control-sm {
    font-size: 14px !important;   
    height: calc(1.5em + 0.75rem + 2px);   
    padding: 0.25rem 0.5rem;
   
}*/

/* Default button style */
.btn {
    transition: background-color 0.3s, color 0.3s;
}


/*::placeholder {
    color: #A1A1A1 !important;
}
*/
.card {
    border: none !important;
    box-shadow: none;
}
.cont {
    border: none;
    padding: 10px;
    padding-bottom: 0px;
    /* border-radius: 12px; */
    /* box-shadow: 0 4px 10px rgba(0,0,0,0.03);  */
}
.paragraph {
    font-size: 13px;
/*    font-family: Arial, Helvetica, sans-serif;*/
    font-weight: 400;
    color: #A3A3A3 !important;
   
   
}

.bttn {
    margin-left: 10px;
}

.Logo-text {
    font-size: 20px;
    line-height: 0.7;
    /*	color: black;*/
    color:#343a40;
}
 
	.Logo-text .version {
		font-size: 16px;
		margin-top: 0%;
		line-height: 0;
	}
 
	/* Hover State */
	.Logo-text:hover .version {
		line-height: 0.7;
	}
/*
-------------------sidebar----------------*/
.sidebar {
    width: 250px;
    height: auto;
   
    /*font-family:Arial, sans-serif;*/
    /*    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;*/
    display: flex;
    flex-direction: column;
    padding: 10px;
}

/* Sidebar Footer Styles */
.sidebar-custom {
    padding: 10px 0;
    margin-bottom: 0;
    margin-top: auto;
    border: none !important; 
   
   
}

.main-sidebar {
    border-right: 1px solid #dee2e6 ;
    overflow-x:hidden;
}


.text-light {
    color: #f8f9fa !important;
    background-color: #343a40 !important;
    font-weight: bold;
}

.sidebar-light-info .nav-link {
    color: black !important;
}

.sidebar-light-info .nav-treeview .nav-link.active .nav-icon {
    color: #000 !important; 
}

.sidebar-light-info .nav-link.active {
    background-color: #008080 !important;
    color: white !important;
    border-radius: 4px; 
}

    .sidebar-light-info .nav-link.active i {
        color: white !important; 
    }

/* Selected main menu item */
.sidebar-light-info > .nav > .nav-item > .nav-link.active {
    background-color: #008080 !important;
    color: white !important;
}

/* Selected submenu item */
.sidebar-light-info .nav-treeview .nav-link.active {
    background-color: #dcdcdc !important;
    color: #000 !important;
}

/* submenu unselected  */
.sidebar-light-info .nav-treeview .nav-link {
    background-color: transparent !important; 
    color: inherit !important;
}


body.sidebar-collapse .main-sidebar .nav-sidebar .nav-item:hover > .nav-treeview {
    display: none !important;
    position: static !important;
    background: none !important;
    box-shadow: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    
}


/*scroll--------------*/
/* Sidebar Menu Styling */
.sidebar .sidebar-menu {
    height: calc(100vh - 70px);
    overflow-y: auto;
    overflow-x: hidden;
}

    /* Hide scrollbar in WebKit browsers */
    .sidebar .sidebar-menu::-webkit-scrollbar {
        width: 0;
    }

/* Firefox */
.sidebar .sidebar-menu {
    scrollbar-width: none; 
    -ms-overflow-style: none;
}

.nav-sidebar .nav-treeview {
    display: none;
    padding-left: 1.5rem;
}


.nav-sidebar .nav-item > .nav-link.active + .nav-treeview {
    display: block;
}


.nav-sidebar .nav-treeview .nav-treeview {
    padding-left: 2rem;
}


.nav-sidebar .nav-item > .nav-link .fas.fa-angle-right {
    position: absolute;
    right: 1rem;
}


.nav-sidebar .nav-treeview .nav-item > .nav-link .fas.fa-angle-right {
    right: 2.5rem;
}


.nav-sidebar .nav-item > .nav-link.active + .nav-treeview {
    display: block;
}

.icon-img {
    filter: none;
    transition: filter 0.3s ease;
}


.nav-link.active .icon-img {
    filter: brightness(100%) saturate(0%) invert(100%) !important;
}

/* 1. Force-hide ALL treeview submenus in collapsed state */
body.sidebar-collapse .main-sidebar .nav-sidebar .nav-treeview,
body.sidebar-collapse .main-sidebar .nav-sidebar .menu-open > .nav-treeview {
    display: none !important;
}

/* 2. Prevent pointer events & hover styles when collapsed */
body.sidebar-collapse .main-sidebar .nav-sidebar .nav-link:hover,
body.sidebar-collapse .main-sidebar .nav-sidebar .nav-link:focus {
    /* background-color: transparent !important; */
    /* color: inherit !important; */
    box-shadow: none !important;
    cursor: default !important;
}

/* 3. Optional: prevent hover-triggered behavior on parent nav items */
body.sidebar-collapse .main-sidebar .nav-sidebar .has-treeview:hover > .nav-link {
    /* background: transparent !important; */
}




/* Allow long menu names to wrap instead of truncate */


/*..................product logo--------------*/

.brand-text {
    font-size: 22px;
    line-height: 0.7;
}

    .brand-text .version {
        font-size: 14px;
        line-height: 0; 
    }

    /* Hover State */
    .brand-text:hover .version {
        line-height: 0.7; 
    }



   /* ------------for small screen-------------*/

/* On small screens, make the logo visible but not fixed at the bottom */
@media (max-width: 576px) {
    .brand-link {
        position: static; 
        border:none !important;
    }
}

/* On larger screens, keep the logo fixed at the bottom */
@media (min-width: 577px) {
    .brand-link.fixed-bottom {
        position: fixed; 
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 999;
    }
}
/*.form-label{
    font-weight:498 !important;
    color:#000000;
}*/

/*grid*/
table.compact th,
table.compact td {
    padding: 2px !important;
    font-size: 14px;
}

.act_style{
    width:20%;
}


/*for text field*/

.input-contol {
    /* padding: 0px 8px;  */
    font-size: 14px;
    height: 29px;
}

.button {
    font-size: 14px; /* Equivalent to btn-xs for smaller buttons */
    padding-left: 1rem; /* px-3: 3 * 0.25rem = 1rem */
    padding-right: 1rem; /* px-3: Same as above */
    padding-top: 1px; /* pt-0: No top padding */
    padding-bottom: 1px;
    border-radius: 2.5px;
}

.select-control {
/*    font-size: 12px;*/
    height: 29px;
    color: #A1A1A1;
    border-radius:3px;
}
/* Custom height for the pagination container */
.pagination {
    height: 29px; /* Set the desired height */
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top:13px;
   
    
}
/*thead th {
    background-color: #008080 !important;
    color: white !important;
    height: 29px;
    text-align: center
}*/
.btn-info {
    background-color: #008080 !important;
    color: white !important;
}

h1,h5 {
    color:#343a40;
}

/*//data table*/


input[type="radio"] {
    appearance: none;
    border: 1px solid #263652;
    border-radius: 50%;
    outline: none;
    cursor: pointer;
}

input[type="checkbox"] {
    appearance: none;
    border: 1px solid #263652;
    outline: none;
    cursor: pointer;
}
#loadingOverlay {
    position: absolute; /* or fixed depending on your layout */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.5); /* dark background */
    z-index: 9999;
}

.wide-col {
    min-width: 110px;
    white-space: nowrap;
}



/*multi tenant page */


/*<style >
body {
    background-color: white;
    padding: 40px;
}*/

.card-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
}

.hospital-link {
    text-decoration: none;
    color: inherit;
}

.hospital-card {
    border: 1px solid #ddd;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    background-color: #fff;
    width: 180px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .hospital-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
    }

.hospital-image {
    max-width: 100px;
    height: auto;
    margin-bottom: 10px;
}

.hospital-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: #333;
}

.hospital-link {
    text-decoration: none;
    color: inherit;
}

.hospital-card {
    background: linear-gradient(to bottom right, #f0f4ff, #ffffff);
    border-radius: 16px;
    padding: 25px 15px;
    text-align: center;
    width: 200px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border: none;
}

    .hospital-card:hover {
        transform: translateY(-7px);
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
        background: linear-gradient(to bottom right, #e6f0ff, #fefefe);
    }

.hospital-image-wrapper {
    background: #ffffff;
    border-radius: 50%;
    padding: 10px;
    margin-bottom: 15px;
    display: inline-block;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/*  .hospital-image {
            width: 80px;
            height: 80px;
            object-fit: cover;
            border-radius: 50%;
            transition: transform 0.3s ease;
        } */

.hospital-image {
    width: 80px;
    height: 80px;
    object-fit: contain; /* Show full logo without cutting */
    border-radius: 50%;
    transition: transform 0.3s ease;
    background-color: #fff; /* Optional: Add background to fill empty areas */
}


.hospital-card:hover .hospital-image {
    transform: scale(1.1);
}

.hospital-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1f3b8e;
    transition: color 0.3s ease;
}

.hospital-card:hover .hospital-name {
    color: #0d47a1;
}

.glass-card {
    background: linear-gradient( to bottom left, rgba(200, 200, 200, 0.45), rgba(255, 255, 255, 0.4) 50%, /* middle highlight */
    rgba(255, 255, 255, 0.05) );
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 20px;
    padding: 25px 15px;
    width: 220px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2);
}

/*////selct2///*/
/*.select2-container .select2-selection--single {
    height: calc(1.8125rem + 2px);*/ /* Bootstrap input height */
    /*border: 1px solid #ced4da;*/
    /*    border: 1px solid #fb5858;*/
    /*border-radius: 0.2rem;
    padding: 0.25rem 0.5rem;
    display: flex;
    align-items: center;*/
    /*width: 100%;*/
    /*color: #808080 !important;*/
/*}
.select2-container--valid .select2-selection--single {
    border-color: #28a745 !important;*/ /* Bootstrap green */
    /*color: #808080 !important;*/
/*}*/
    /* Properly position the text inside */
/*.select2-container .select2-selection--single .select2-selection__rendered {
    padding-left: 0;*/ /* Optional: aligns text left */
    /*margin-top: 0;*/ /* Reset any negative margins */
    /*line-height: 1.5;
    color: #808080 !important;
   
}



.select2-container--default .select2-selection--single.invalid-select2 {
    box-shadow: -4px 0 0 0 #F5F5F5,*/ /* gap, matches page background */
    /*-6px 0 0 0 #FFA726 !important;
    border-radius: 0.375rem;
    color: #808080 !important;
    margin-left: 6px;
}

.select2-container.invalid .select2-selection {
    box-shadow: -4px 0 0 0 #F5F5F5,*/ /* gap, matches page background */
    /*-6px 0 0 0 #FFA726 !important;
    color: #808080 !important;
    margin-left: 6px;
}*/

/* Responsive Select2 */
/*.select2-container {*/
    /*min-width: 100%;*/
    /*width: !important;*/
   /* border: none !important;
    color: #808080 !important;
    box-sizing: border-box !important;*/ /* REQUIRED */
/*}*/
    


/*.select2-selection--single {
    width: 100% !important;
}

.select2-selection--multiple {
    width: 100% !important;
   
}*/

    /*.select2-selection--multiple .select2-selection__choice {
        color: #7d7d7d !important;
        background-color: #65b9e0 !important;*/ /* Optional soft background */
        /*border: 1px solid #009688 !important;
    }

    
    .select2-selection--multiple .select2-search__field::placeholder {
        color: #666 !important;
    }


.select2-results__option {
    color: #000 !important;
}

.select2-results__option--selected {
    background-color: #e0f2f1 !important;
    color: #000 !important;
}*/


/* Append these rules at the end of site.css (or near other select2 rules) */

/* Prevent select2 dropdown from expanding page width and hide any horizontal overflow */
/*.select2-container--open .select2-dropdown {
    box-sizing: border-box;
    max-width: calc(100vw - 40px) !important;*/ /* leave some viewport padding */
    /*overflow-x: hidden !important;
}*/

/* Make results scroll within viewport height when many items exist */
.select2-container--open .select2-results {
    max-height: calc(100vh - 200px);
    overflow-y: auto;
    font-size:0.8rem !important;
   
}











/* Hide dropdown when "Internal" is selected */
#internal:checked ~ .col-md-6 #IdChannelname {
    display: none;
}

/* Show dropdown when "External" is selected */
#external:checked ~ .col-md-6 #IdChannelname {
    display: block;
}

/*#myTable thead th {
    font-size: 14px;
    font-weight: bold;
    vertical-align: middle !important;*/
    /*text-align: center;*/
    /*height: 35px;
    padding: 8px;
    background-color: #B5B5B5;
}

#myTable thead tr {
    height: 45px;
    
}*/


/*.jquerytable thead th {
    font-size: 0.86rem !important;
    font-weight: 700;
    vertical-align: middle !important;*/
    /*text-align: center;*/
    /*height: 25px;*/
/*    padding: 8px;*/
    /*background-color: #B5B5B5;
}
.jquerytable thead tr {
    height: 30px;
}
.jquerytable tbody td {
    font-size: 0.75rem !important;
}*/

table.dataTable tbody tr td {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    vertical-align: middle !important;
    font-size: 0.75rem !important;
}
.dataTables_filter label, .dataTables_length label {
    font-size: 0.81rem !important;
    color: #5a5c69 !important;
    font-weight: 550 !important;
}

table.dataTable thead th {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    font-size: 0.86rem !important;
    font-weight: 700;
    vertical-align: middle !important;
    /*text-align: center;*/
    height: 25px;
    /*    padding: 8px;*/
    /*background-color: #B5B5B5;*/
    
}
table.dataTable {
    font-size: 0.75rem !important;
}
table thead th {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    font-size: 0.86rem !important;
    font-weight: 700;
    vertical-align: middle !important;
    /*text-align: center;*/
    height: 25px;
    /*    padding: 8px;*/
    background-color: #B5B5B5 !important;
   /* color: #1f2937;
    background: linear-gradient(180deg, #eef2f7, #eef2f7)*/
}



table.dataTable .form-control-sm {
    height: 12px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    /*    font-size: 12px;*/
    font-size: 0.75rem !important;
    line-height: 1;
}

card-alert {
    border: 1px solid #cecbcb !important;
}
/*.card-light {
    border: 1px solid #cecbcb !important;
}*/

button:disabled {
    background-color: #6c757d !important; /* Bootstrap secondary color */
    border-color: #6c757d !important;
    color: white !important;
    cursor: not-allowed;
}


/* Mandatory field setup css ------------- */
/*.require {
    width: 100%;*/
    /* padding: 8px; */
    /* margin-top: 5px; */
    /*border: 2px solid red !important;*/
    /* border-radius: 4px; */
    /*box-sizing: border-box;
    transition: border-color 0.3s;
}*/
/*.require {
    box-shadow: -4px 0 0 0 white, -6px 0 0 0 red !important;*/ /* force always visible */
/*}

    .require:focus {
        box-shadow: -2px 0 0 0 white,
            -4px 0 0 0 red !important;*/ /* maintain on focus */
    /*}*/
/*#F5F5F5*/


/* Remove Bootstrap's green/red borders and background icons */
.was-validated .form-control:valid,
.was-validated .form-control:invalid,
.form-control.is-valid,
.form-control.is-invalid {
    border-color: #ced4da !important; /* normal border */
    background-image: none !important; /* remove icons */
    padding-right: 0.75rem !important; /* reset padding */
}

/* Same for select dropdowns */
.was-validated .form-select:valid,
.was-validated .form-select:invalid,
.form-select.is-valid,
.form-select.is-invalid {
    border-color: #ced4da !important;
    background-image: none !important;
    padding-right: 0.75rem !important;
}











.require {
    box-shadow: -4px 0 0 0 #FFFFFF, /* gap, matches page background */
    -6px 0 0 0 #FFA726 !important; /* sharp red bar on the left */
    margin-left: 6px;
}

.require-disable {
    box-shadow: -4px 0 0 0 #FFFFFF, /* gap, matches page background */
    -6px 0 0 0 grey !important; /* sharp red bar on the left */
    margin-left: 6px;
}


.require.invalid,
.select2-container--bootstrap-5.invalid .select2-selection {
    box-shadow: -4px 0 0 0 #F5F5F5, /* 6px gap matching page background */
    -6px 0 0 0 #FFA726;
    margin-left: 6px;
}

.require.valid,
.select2-container--bootstrap-5.valid .select2-selection {
    box-shadow: -4px 0 0 0 #F5F5F5, /* 6px gap matching page background */
    -6px 0 0 0 #FFA726;
    margin-left: 6px;
}

    .tooltip {
      position: fixed;
      background-color: #d60000;
      color: white;
      padding: 5px 10px;
      border-radius: 5px;
      font-size: 13px;
      pointer-events: none;
      z-index: 1000;
      display: none;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }



@media (max-width: 768px) {
    .card, .cont, .container, .container-fluid {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    .card-body, .card-header {
        padding: 10px !important;
    }

    .form-group, .col-md-3, .col-md-6, .col-md-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .row {
        margin-left: 0;
        margin-right: 0;
    }
}
/*.table-responsive-custom {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
*/

/*.table-responsive-custom {
    width: 100%;
    overflow-x: auto;*/ /* horizontal scroll only for table */
    /*-webkit-overflow-scrolling: touch;
}

    .table-responsive-custom table {
        min-width: 600px;*/ /* adjust based on number of columns */
    /*}*/

/*.main-sidebar, .content-wrapper {
    transition: none !important;
}*/

/*.table-responsive-custom {
    width: 100%;
    overflow-x: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    max-height: 400px;*/ /* adjust as needed */
/*}*/

    /* Make the header sticky while tbody scrolls */
    /*.table-responsive-custom thead th {
        position: sticky;
        top: 0;
        background: #fff;*/ /* match your theme */
        /*z-index: 2;
    }*/


/*gkgulsgul*/
/*input.form-control:focus {
    box-shadow: none !important;
    outline: none !important;
    border-color: #80bdff;
}

select.form-select:focus {
    box-shadow: none !important;
    outline: none !important;
   
}*/
input.form-control:focus,
select.form-select:focus {
    box-shadow: none !important; /* clears Bootstrap glow */
    outline: none !important;
    border-color: #80bdff;
/*    border-radius: 0;*/
}

/* Reapply your red marker on focus */
input.form-control.require:focus,
select.form-select.require:focus {
    box-shadow: -4px 0 0 0 #F5F5F5, -6px 0 0 0 #FFA726 !important; /* reapplied marker on focus */
    margin-left: 6px;
}
.card-header {
    /* background: #f8f9fc !important; */
    border-bottom: 1px solid #e3e6f0 !important;
    font-weight: 600;
    /* color: #4e73df !important; */
    letter-spacing: 0.5px;
    font-size: 1rem;
}

.card-title {
    font-size: 1.05rem !important;
    /* color: #4e73df !important; */
    font-weight: 600 !important;
    letter-spacing: 0.5px;
/*    font-size: 1rem !important;*/
}

/* Form labels and controls */
.form-label {
    font-size: 0.81rem !important;
    color: #5a5c69 !important;
    font-weight: 550 !important;
    margin-bottom: 0.18rem !important;
    /*    color:black !important;*/
}
.form-check-label {
    font-size: 0.81rem !important;
    color: #5a5c69 !important;
/*    font-weight: 550 !important;*/
    margin-bottom: 0.18rem !important;
}
/*.form-control,
.form-select,
.select2-selection--single,
.select2-selection--multiple {*/
    /*    border-radius: 0.3rem !important;*/
    /*    border: 1px solid #d1d3e2 !important;*/
    /*    background: #f8f9fc !important;*/
    /*font-size: 0.80rem !important;
    color: #808080 !important;
    transition: border-color 0.2s;
}*/





/*//select2//*/
/* --------------------------
   BASE SELECT2 CONTAINER
--------------------------- */
.select2-container {
    /*width: 100% !important;*/ /* FIXED WIDTH ALWAYS 100% */
    /*min-width: 100% !important;*/
    max-width: 100% !important;
    box-sizing: border-box !important;
}

    /* Prevent width changing during dropdown open */
    .select2-container .select2-selection--single,
    .select2-container .select2-selection--multiple {
        width: 100% !important;
    }

    /* --------------------------
   SINGLE SELECTION
--------------------------- */
    .select2-container .select2-selection--single {
        height: calc(1.8125rem + 2px);
        border: 1px solid #ced4da;
        border-radius: 0.2rem;
        padding: 0.25rem 0.5rem;
        display: flex;
        align-items: center;
        background: #fff;
    }

        /* Text inside */
        .select2-container .select2-selection--single .select2-selection__rendered {
            padding-left: 0;
            margin-top: 0;
            line-height: 1.4;
            color: #808080 !important;
        }

        /* Arrow alignment */
        .select2-container .select2-selection--single .select2-selection__arrow {
            height: 100%;
        }

/* --------------------------
   MULTIPLE SELECTION
--------------------------- */
.select2-selection--multiple .select2-selection__choice {
    color: #000 !important;
    background-color: #c3e4e8 !important;
    border: 1px solid #c3e4e8 !important;
}

/* Placeholder inside multi-select */
.select2-selection--multiple .select2-search__field::placeholder {
    color: #666 !important;
}

/* --------------------------
   DROPDOWN RESULTS
--------------------------- */
.select2-results__option {
    color: #000 !important;
    padding: 6px 10px;
}

/* Highlighted option (HOVER FIX) */
.select2-results__option--highlighted {
    background-color: #3660ad !important;
    color: #fff !important;
}

/* Selected option */
.select2-results__option--selected {
    background-color: #e0f2f1 !important;
    color: #000 !important;
}

/* Dropdown max height */
.select2-container--open .select2-results {
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

/* --------------------------
   VALIDATION (ERROR / SUCCESS)
--------------------------- */
.select2-container.invalid .select2-selection,
.select2-container--bootstrap-5.invalid .select2-selection {
    box-shadow: -4px 0 0 0 #F5F5F5, -6px 0 0 0 #FFA726;
    margin-left: 6px;
}

.select2-container.valid .select2-selection,
.select2-container--bootstrap-5.valid .select2-selection {
    box-shadow: -4px 0 0 0 #F5F5F5, -6px 0 0 0 #28a745;
    margin-left: 6px;
}

/* --------------------------
   GENERAL FORM CONTROL ALIGNMENT
--------------------------- */
.form-control,
.form-select,
.select2-selection--single,
.select2-selection--multiple {
    font-size: 0.80rem !important;
    color: #808080 !important;
}

/*//select2//*/


















.btn-primary {
    background: #009688 !important;
    border-color: #009688 !important;
}

    .btn-primary:hover,
    .btn-primary:focus {
        background: #009688 !important;
        border-color: #009688 !important;
    }


/*.main-header {*/
    /*    background: linear-gradient(to bottom right, #f0f4ff, #ffffff) !important;*/
    /*background-color: #1976D2 !important;
   
}
.Logo-text {
    color: white !important;
}
.nav-profile{
    color: white !important;
}*/


.dropdown-item i {
    color: white !important;
}
/*.white-icon {
    color: white !important;
}*/ 
.content-wrapper {
/*    background-color:white;*/
}


    /*    min-height:100vh;
    width:100%;*/
/*}
.card-header, .card-body, .container {
    background-color: #F5F5F5 !important;
}

.card {
    border: none !important;
    box-shadow: none;
    border-radius: 0;
}*/



/*    //////////////////patient details css///////////////////*/
.patient-card {
    border: 1px solid #ceddde;
    border-radius: 0.5rem;
    padding: 1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.card-body {
    font-size: 0.85rem !important;
}

/*.card-header {
    color: blue !important;
}*/



.tab-menu-bg {
    background: #e3e7ee;
    padding: 0;
}

.tab-btn {
    background: transparent;
    border: none;
    outline: none;
    color: #556080;
    /* font-weight: 600; */
    /* font-size: 1.15rem; */
    padding: 1px 2.5rem;
    transition: background .15s, color .15s;
}

    .tab-btn.active, .tab-btn:focus {
        background: #fff;
        box-shadow: 0 1px 6px 0 rgba(30,40,60,0.06);
        color: #273355;
        /* font-weight: 600; */
    }



/* //trend */


.trend-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 22px;
}

.trend-card {
    border-radius: 9px;
    background: #f4f8fb;
    padding: 12px 10px 10px 15px;
    min-height: 68px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1.5px solid transparent;
}

.trend-blue {
    border-color: #b6d2ff;
    background: #eaf2fe;
}

.trend-green {
    border-color: #c8f5d1;
    background: #e9fbef;
}

.trend-orange {
    border-color: #fdeccc;
    background: #fff7e6;
}

.trend-teal {
    border-color: #c2f3ed;
    background: #eafffa;
}

.trend-title {
    font-weight: 600;
    /* font-size: 16px; */
    margin-bottom: 3px;
}

.trend-blue .trend-title {
    color: #1771e6;
}

.trend-green .trend-title {
    color: #14b067;
}

.trend-orange .trend-title {
    color: #e3912d;
}

.trend-teal .trend-title {
    color: #10aea2;
}

.trend-status {
    display: flex;
    align-items: center;
    font-size: 15px;
    gap: 7px;
}

    .trend-status .circle {
        width: 11px;
        height: 11px;
        border-radius: 50%;
        display: inline-block;
    }

.trend-green .circle, .trend-teal .circle {
    background: #14b067;
}

.trend-blue .circle, .trend-orange .circle {
    display: none;
}

.trend-status .trend-arrow {
    font-size: 16px;
    vertical-align: middle;
}

.trend-orange .trend-arrow, .trend-blue .trend-arrow {
    color: #e3912d;
}

.trend-actions {
    display: flex;
    gap: 10px;
    margin-top: 8px;
}

/*preview*/


  





/*.phonescreen {
    background: #ffffff;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    padding: 8px 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    margin-top: 5px;*/
/*   min-height:350px;*/
    /*color: #333;
    font-size: 14px;
    line-height: 1.5;
}*/

/* Inner screen */
/*.preview {
    width: 100%;
    background: #fff;
    border-radius: 15px;
    overflow-y: auto;
    padding: 12px;
    max-height: 300px;
    overflow-y: auto;
}






.preview-screen-scroll {
    max-height: 450px;*/
    /*  max-height: calc(100vh - 50vh);*/
    /*overflow-y: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;*/ /* auto | thin | none */
    /*scrollbar-color: #cdcdcd88 #ffffff;
}

@media (max-width: 991.98px) {
    .preview-screen-scroll {
        max-height: none !important;
        overflow-y: auto;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;*/ /* auto | thin | none */
        /*scrollbar-color: #cdcdcd88 #ffffff;
    }
}*/



/*.preview-screen-scroll {
    max-height: none;
    overflow-y: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #cdcdcd88 #ffffff;
}
*/
@media (max-width: 991.98px) {
    .sidebar-sticky {
        position: static !important;
        height: auto !important;
        overflow: visible !important;
        padding-right: 0 !important;
    }

    .phonescreen {
        max-height: none !important;
        min-height: auto !important;
    }

    .preview-screen-scroll {
        max-height: none !important;
        overflow: visible !important;
    }
}


/*.preview {
    width: 100%;
    background: #fff;
    border-radius: 15px;
    overflow-y: auto;
    padding: 12px;
    max-height: 350px;
}*/

/*.phonescreen {
    background: #ffffff;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    padding: 8px 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    margin-top: 5px;
    min-height: 350px;
    color: #333;
    font-size: 14px;
    line-height: 1.5;
    max-height: 400px;
}*/


/* DataTable body rows */
table tbody tr {
    height: 30px; 
}

/* Vertically center text inside cells */
table tbody td {
    vertical-align: middle;
    line-height: 1.2rem; /* adjust text spacing */
    padding-top: 8px; /* extra spacing */
    padding-bottom: 8px;
}

/* Optional: header row same height */
table thead tr {
    height: 30px;
}

.dataTables_wrapper .dataTables_paginate {
    margin-top:12px !important;
}


/* patient details */
.patient-card-emr {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
}

.pc-left {
    display: flex;
    gap: 12px;
    width: 75%;
}

/* Avatar now shows proper icon */
.avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: #009688;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

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

.name {
    font-size: 16px;
    font-weight: 700;
    color: #0a4a8b;
}

.meta {
    font-size: 12.5px;
    color: #444;
    margin-bottom: 4px;
}

    .meta span {
        margin-right: 12px;
    }

.details-grid {
    font-size: 11.5px;
    display: grid;
    grid-template-columns: repeat(3, minmax(120px, 1fr));
    gap: 2px 80px;
}

.label {
    font-weight: 600;
    color: #444;
}

.value {
    font-weight: 500;
    color: #111;
}

.pc-right {
    text-align: right;
    min-width: 110px;
}

.badge-small {
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 10.5px;
    display: inline-block;
    margin-bottom: 4px;
    font-weight: 600;
    color: #fff;
}

/* Badge colors */
.ip {
    background: rgba(29, 78, 216, 0.15); /* light transparent blue */
    color: #1d4ed8;
}

.op {
    background: rgba(29, 78, 216, 0.15); /* light transparent blue */
    color: #1d4ed8;
}




.alert {
    background: #dc3545;
}

.vip {
    background: rgb(110, 5, 178, 0.15);
    color: #a855f7 ;
}

.mlc {
    background: transparent;
    color: #d97706;
    border: 1px solid #d97706;
}


.warning {
    background:  #6ee7b7;
    
    color: #000;
}

.reg {
    background: #1e93fa;
}

.last-visit {
    font-size: 11px;
    color: #555;
    margin-top: 5px;
}
.tag-international {
    background: transparent;
    color: black;
    border: 1px solid blue;
}

/* Small value next to badges */
.value-small {
    font-size: 10px;
    font-weight: 500;
    color: #333;
    margin-left: 3px;
}

/* Compact line for diagnosis / allergy / mlc */
.small-line {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 3px;
    margin-bottom: 3px;
}

.name-row {
    display: flex;
    align-items: center;
    gap: 8px; /* spacing between name & badge */
}

.name {
    font-size: 15px;
    font-weight: 700;
    color: #0a4a8b;
}



/*timelien*/
@media (max-width: 1024px) {
    .patient-header {
        grid-template-columns: 2fr 1.5fr;
        row-gap: 12px;
    }

    .content {
        grid-template-columns: 1fr;
    }

    .details-card,
    .timeline-container {
        max-height: none;
    }
}

@media (max-width: 720px) {
    body {
        padding: 10px;
    }

    .app-shell {
        border-radius: 18px;
    }

    .patient-header {
        grid-template-columns: 1fr;
    }
}



@media (max-width: 991.98px) {
    .timeline-container, .details-card {
        max-height: none;
    }
}


/*///shift management*/

.shift-fieldset {
    border: 1.5px solid #bdbdbd;
    border-radius: 8px;
    padding: 25px 15px 15px 15px;
    position: relative;
    background: #ffffff;
    margin-top:15px;
    margin-bottom:15px;

}

    .shift-fieldset legend {
        display: inline-block !important; /* stop full-width behavior */
        width: auto !important; /* shrink to text width */
        padding: 0 6px;
        background: #fff; /* hide border behind text */
        position: absolute;
        top: -12px;
        left: 15px;
        font-size: 13px;
        font-weight: 600;
        color: blue;
    }

.fieldset {
    border: 1.5px solid #bdbdbd;
    border-radius: 8px;
    padding: 25px 15px 15px 15px;
    position: relative;
    background: #ffffff;
    margin-top: 15px;
    margin-bottom: 15px;
}

.fieldset-legend {
    display: inline-block !important; 
    width: auto !important; 
    padding: 0 6px;
    background: #fff; 
    position: absolute;
    top: -12px;
    left: 15px;
    font-size: 13px;
    font-weight: 600;
    color: blue;
}

/*shift management */

.shift-legend-title {
    font-size: 0.9rem;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.shift-legend-item {
    font-size: 0.85rem;
    line-height: 1.3;
}

.shift-legend-color {
    width: 10px;
    height: 10px;
    border-radius: 30px;
    margin-right: 8px;
    border: 1px solid rgba(0,0,0,0.15);
}

/*.legend-text {
    font-weight: 500;
}*/

.shift-legend-items {
    display: flex;
    flex-wrap: wrap;
}

 /*Desktop: always full width table with NO scroll*/ 
.dataTables_wrapper {
    width: 100% !important;
/*    overflow: ;*/
}

 /*Table always maintains same width*/ 
table.dataTable {
    width: 100% !important;
    table-layout: auto !important;
}

 /*Enable scroll ONLY on small screens*/ 
/*@media (max-width: 991px) {
    .dataTables_wrapper {
        overflow-x: auto !important;
    }
}
*/

 /*Fix header-body width mismatch when horizontal scroll enabled*/ 
.dataTables_scrollHead table,
.dataTables_scrollBody table {
/*    width: 100% !important;*/
    table-layout: auto !important;
}

 /*Ensure header cells and body cells align properly*/ 
/*.dataTables_scrollHead th,*/
/*.dataTables_scrollBody td {
    white-space: nowrap !important;
    box-sizing: border-box !important;
}*/

 /*Maintain equal width sync*/ 
.dataTables_scrollHeadInner,
.dataTables_scrollBodyInner {
    width: 100% !important;
}



/*
@media (max-width: 1200px) {
    .dataTables_wrapper {
        overflow-x: auto !important;
    }

    table.dataTable {
        table-layout:auto !important;
        white-space: nowrap !important;
    }
}*/