/* ✅ Custom Font */
@font-face {
    font-family: myFirstFont;
    src: url('../fonts/bpg_nino_mtavruli_bold.ttf') format('truetype');
}

@font-face {
    font-family: myRegularFont;
    src: url('../fonts/bpg_dejavu_sans.otf') format('truetype');
}




html, body {
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
}

body {
    font-family: 'myRegularFont', sans-serif;
    font-size: 18px;
    min-height: 100vh;
}

h1, h2, h3, h4 {
    font-family: 'myFirstFont', sans-serif;
    text-transform: uppercase;
}

input, select, textarea {
    font-family: 'myRegularFont', sans-serif;
}

button {
    font-family: 'myFirstFont', sans-serif;
}

/* ✅ Base Styles */
/* body {
    font-family: myFirstFont, sans-serif;
    font-size: 18px;
    min-height: 100vh;
} */

.content-wrapper {
    flex: 1;
}

/* ✅ Footer Styling */
footer {
    background-color: #f8f9fa;
    text-align: center;
    padding: 1rem 0;
    border-top: 1px solid #dee2e6;
    font-size: 0.9rem;
    color: #6c757d;
}

h4 {
    color: #37474F;
}

/* ✅ Utility Classes */
.center {
    padding: 40px 0;
    text-align: center;
}

.underline {
    text-decoration: underline;
}

.superscript {
    vertical-align: super;
    font-size: 10px;
}

.cursor-pointer, .fa-eraser {
    cursor: pointer;
}

.green {
    color: green;

}

.red {
    color: red;
    font-weight: bold;
}

/* ✅ Form Inputs */
.flatpickr-input {
    background-color: #fff !important;
}

/* ✅ Navigation Menu */
.nav-link {
    color: #5875a1;
}

.navbar .nav-link:hover,
.navbar .nav-link.active {
    color: #CC5500 !important;
}

.navbar .nav-link.active {
    font-weight: bold;
}

.menu-item:hover {
    text-decoration: underline;
}

/* ✅ Hide Blocks by Default */
#dptOther, #HFhistoryYes2, #HFhistoryYes,
#HyperCardio, #ValveDesease, #EtiologyOther,
#HFReasonOther, #DepartmentBlock, #HFReasonBlock,
#PeriOedemaYesBlock, #PulmonaryRaleYesBlock {
    display: none;
}

/* ✅ Layout Background Helpers */
.header-bg {
    background-color: #deeffd;
}

.navbar-bg, .full-width-bg {
    background-color: #e1e8ed;
    width: 100%;
}


#clinicTable_filter, #userTable_filter {
    margin-bottom: 1rem;
  }

  #clinicTable_filter input, #userTable_filter input {
    border: 1px solid #ced4da;
    padding: 0.375rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 1rem;
    outline: none;
  }

  .btn-outline-secondary img {
    vertical-align: middle;
}

  .status-button {
    background-color: #d7d7d7; /* bg-light */
    border: 1px solid #afafaf;
    border-radius: 8px;
    padding: 5px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #212529;
    text-decoration: none;
    transition: background-color 0.2s ease;
  }

  .status-button:hover {
    background-color: #afafaf;
    text-decoration: none;
    color: #212529;
  }
  
.subtab-heading {
    color: rgb(67, 131, 91);
    text-decoration: underline;
}

.eraser {
    cursor:pointer;
    width: 18px;
    padding: 0px !important;
}


#baseline-subtabs .nav-link.active {
    background-color: #d3d3d3 !important;  
    color: #000 !important;               
}

.hidden-block {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 15px;
    margin-bottom: 15px;
    transition: all 0.3s ease-in-out;
}

.inactive-block {
    background-color: #f8f9fa; /* light gray */
    opacity: 0.3;
    pointer-events: none;
}

.active-block {

    background-color: #ffffff;
    opacity: 1;
    pointer-events: auto;
}

h5 {
    color: #3b72dc;
    font-size: 18px;
    text-decoration: underline;
}

.badge {
    font-size: 16px;
    font-weight: normal;
}


.disabled-row .form-check-label,
.disabled-row .input-group-text {
    color: #999 !important;
    opacity: 0.6;
    pointer-events: none;
}

.disabled-row label.text-muted {
    color: #999 !important;
    opacity: 0.6;
}


#subtab-med thead {
    background-color: #1468e6 !important;
    color: #000; /* Optional: change text color */
}


#subtab-med td, #subtab-nonmed  td {
    vertical-align: top;
}

 #subtab-med td.radio-inline > div > div, 
#subtab-nonmed td.radio-inline > div > div  {
    display: inline-block !important;
    margin-right: 20px;
    vertical-align: middle;
  }

.toggle-group, .medic-table.disabled, .nonmedic-table.disabled {
  opacity: 0.4;
  pointer-events: none;  /* disables interaction */
}

.toggle-group.active, .medic-table.active, .nonmedic-table.active {
  opacity: 1;
  pointer-events: auto;
}

/* success message hide */
.fade-out {
  transition: opacity 0.5s ease;
  opacity: 0;
}

.invalid-group { 
    border: 1px solid #dc3545; 
    border-radius: .5rem; 
    /* padding: .5rem;  */
    /* outline-offset: 2px;  */
}


td.invalid-group {
    outline: 1px solid #dc3545; /* red */

}