/* CSS Document */

/* Import boxes.css */
@import url('boxes.css'); 

/* Import tables.css */
@import url('tables.css');

/* Import rainbows.css */
@import url('rainbows.css');

main {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 80px);
}

/* ICD code chip (used in provider authorizations list)
     Lightweight, neutral pill that doesn’t depend on the ICD11 selector bundle. */
.icd-chip {
    display: inline-block;
    background: #f1f3f5; /* light gray */
    color: #333;
    border: 1px solid #d0d5da;
    border-radius: 12px;
    padding: 3px 8px;
    font-size: 0.85em;
    line-height: 1;
    white-space: nowrap;
    vertical-align: middle;
}

.main-container {
    flex: 1;
    padding:40px;

}

.sticky {
    position: -webkit-sticky; /* For Safari */
    position: sticky;
    top: 0; /* Stick to the top of the viewport */
    background-color: white;; 
    z-index: 1000; 
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
  }


.grid-column { }

@media (max-width: 600px) {
    .main-container {padding:20px;}
}





.thirds-section { padding:10px;}

.shrink-text {
    white-space: nowrap;  /* Prevent text wrapping */
    overflow: hidden;     /* Hide overflow */
    text-overflow: ellipsis;  /* Display ellipsis (...) if text overflows */
    display: block;       /* Ensure the element behaves like a block element */
    width: 100%;          /* Ensure the element takes full width */
    font-size: calc(100% - 0.5vw); /* Adjust font size dynamically */
}

.split {
    display: flex;
    justify-content: space-between;
}

.inline-no-margin {
    margin: 0;
    display: inline;
}

/* Some buttons */
/* ########################################### */

.main-button  {
    background-color: #0066cc;
    border: none;
    border-radius: 4px;
    color: white;
    cursor: pointer;
    margin:0;
}

.main-button:hover {
    background-color: #003a78;
    color: white;
}

.main-button:focus {
    background-color: #003a78;
    color: white;
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.5);
}

.main-button:active {
    background-color: #002347;
    color: white;
}

.button-white {
    background-color: white !important;
    color: gray !important;
    border: 1px solid gray !important;
    margin: 0;
}

.button-white:hover {
    background-color: #0066cc !important;
    color: white !important;
    border: 1px solid gray !important;
}

.button-green {
    background-color: rgb(22, 150, 17) !important;
    color: rgb(255, 255, 255) !important;
    border: 1px solid rgb(21, 83, 19) !important;
    margin: 0;
}

.button-green:hover {
    background-color: #0066cc !important;
    color: white !important;
    border: 1px solid gray !important;
}


/* Define the back-arrow class using Font Awesome */
.icon::before {
    font-family: 'Font Awesome 6 Free';
    font-size: 14px;
    font-weight: 900;  /* Necessary for solid icons */
    display: inline-block;
    vertical-align: middle;
    line-height: 1.2;  /* Align the arrow with the text */
    content: "";
    position: relative;
    top: -1px;
    left: -10px;
}

.icon-left-arrow::before {
    content: '\f04a';
    color: #fc0352;
}
.icon-previous::before {
    content: '\f104';
    color: #fc0352;
}
.icon-list::before {
    content: '\f03a';
    color: #350b55;
}

.icon-edit::before {
    content: '\f044';
    color: rgb(214, 85, 240);
}
.icon-add::before {
    content: '\f0fe';
    color: #3e70f9;
}

.icon-delete::before {
    content: '\f2d3';
    color: #b00707;
}

.icon-view::before {
    content: '\f06e';
    color: rgb(60, 220, 122);
}

.icon-search::before {
    content: '\f002';
    color: rgb(242, 178, 39);
}

.icon-camera::before {
    content: '\f030';
    color: gray;
}

.icon-profile::before {
    content: '\f007';
    color: gray;
}

.icon-table::before {
    content: '\f0ce';
    color: rgb(7, 27, 96);
}

.icon-table::before {
    content: '\f00a';
    color: gray;
}

.icon-column::before {
    content: '\f0db';
    color: gray;
}

.icon-download::before {
    content: '\f0ed';
    color: rgb(27, 159, 240);
}

.icon-import::before {
    content: '\f56f';
    color: rgb(12, 149, 92);
}

.icon-filter::before {
    content: '\f0b0';
    color: gray;
}

.icon-tag::before {
    content: '\f02c';
    color: #f59e0b;
}

.icon-settings::before {
    content: '\f013';
    color: rgb(0, 0, 0);
}

.icon-order::before {
    content: '\f0dc';
    color: rgb(32, 186, 225);
}

.icon-sync::before {
    content: '\f2f1';
    color: rgb(32, 186, 225);
}

.icon-notification::before {
    content: '\f0f3';
    color: rgb(248, 37, 90);
}

.icon-next::after {
    font-family: 'Font Awesome 6 Free';
    font-size: 14px;
    font-weight: 900;  /* Necessary for solid icons */
    display: inline-block;
    vertical-align: middle;
    line-height: 1.2;  /* Align the arrow with the text */
    content: '\f105';
    color: #fc0352;
    position: relative;
    top: -1px;
    left: 15px; /* Adjust the position to your liking */
}

.icon-next::after {
    content: '\f105';
    color: #fc0352;
}

.icon-newwindow::after {
    content: '\f14c';
    color: #000000;
    font-size: 30px;;
}

.icon-simple {
    background: none; /* Remove background */
    border: none; /* Remove border */
    padding: 0; /* Remove padding */
    margin: 0; /* Optional: remove margins */
    display: inline-flex; /* Align icon correctly */
    align-items: center;
    height:fit-content;
    line-height: 1;
    justify-content: center;
    font-family: 'Font Awesome 6 Free';
    font-size: 1.5rem;
    cursor: pointer; /* Indicate it's clickable */
}

.icon-simple.icon-delete::before {
    content: '\f2d3'; /* Your icon's Unicode */
    color: #b00707;    
}

.icon-simple.icon-add::before {
    content: '\f0fe';
    color: #3e70f9;
}


.main-button.icon-next::after {
    content: '\f105';
    color: white;
}


/* Drag handle styles */
/* Keep the grab cursor when hovering over the handle */
.drag-handle {
    cursor: grab;
}

/* Ensure the grabbing cursor appears when dragging */
tr[draggable="true"] {
    cursor: grab;
}

/* Styling for the dragging row (hidden) */
.dragging {
    opacity: 0; /* Optionally lower opacity instead of hiding */
    cursor: grabbing;
}
/* Force the cursor to stay in grabbing mode during the drag operation */
tr[draggable="true"] * {
    cursor: grabbing !important; /* Closed hand cursor while dragging */
}

/* Font Colors */
.red {color: #fc0352;}




/* POPOVERS*/

/* Darken background */
#overlay {
    position: fixed; /* Stay in place */
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7); /* Black background with transparency */
    z-index: 999; /* Sit on top */
    display: flex; /* Flex to center */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
}

/* Popover content */
#confirmation-popup {
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center;   
    background: rgb(224, 245, 255);
    padding: 40px;
    border-radius: 10px;
    z-index: 1000; /* Sit on top of the overlay */
    max-width: 500px;
    width: 80%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    flex-wrap: wrap;
}


/* Full-page on mobile */
@media (max-width: 768px) {
    #confirmation-popup {
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: none;
        border-radius: 0;
        flex-direction: column;
    }
}







 .login-container {
background-color: #ffffff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 350px;
}
.login-container h2 {
    margin-bottom: 20px;
    color: #333;
}

.login-container h5 {
    margin-bottom: 0px;
}


.login-container label {
    display: inline;
    margin-bottom: 5px;
    color: #333;
}

.login-container label span {
    color: red;
}

.login-container input[type="text"],
.login-container input[type="password"],
.login-container input[type="email"]
 {
    width: 100%;
    padding: 8px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}
.login-container input[type="checkbox"] {
    margin-right: 5px;
}
.login-container .actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.login-container .actions a {
    color: #0066cc;
    text-decoration: none;
}
.login-container .actions a:hover {
    text-decoration: underline;
}
.login-container button {
    width: 100%;
	height: 60px;
    padding: 10px;
    background-color: #0066cc;
    border: none;
    border-radius: 4px;
    color: white;
    font-size: 16px;
    cursor: pointer;
}
.login-container button:hover {
    background-color: #005bb5;
}
.login-container .register-link {
    text-align: center;
    margin-top: 15px;
}



.bigger-font-block {
    font-size:1.2em;
    font-weight:300;
}
		

.data-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table th,
.data-table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

.data-table th {
    background-color: #f2f2f2;
}

.data-table tr:nth-child(even) {
    background-color: #f9f9f9;
}

.data-table tr:hover {
    background-color: #e8f5e9;
}



.form-group {
    display: flex;
	max-width: 300px;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}


/* TABS */
.tab-container {
    width: 100%;
    max-width: 600px;
    background-color: #fff;
   
	display: block;
}

.tabs {
    display: flex;
    
}

.tab {
    flex: 1;
    text-align: center;
    cursor: pointer;
    border: none;
    background-color: #f9f9f9;
    outline: none;
    transition: background-color 0.3s;
	font-size: 1.3em;
	font-weight: 300;
	 box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

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

.tab.active {
    background-color: #fff;
    border-bottom: 2px solid #007bff;
}

.tab-content {
    padding: 20px;
}

.tab-content-item {
    display: none;
}

.tab-content-item.active {
    display: block;
}



/* Helptext */
.helptext ul  {
    border: 1px solid #1d4d73;
    background-color: #e3f3ff;
    color: black;
    padding: 20px 20px 20px 30px;
    list-style: circle;
    line-height: 18px;
    border-radius: 5px;
    font-size: 0.85em;
}


/* Error styles */
.error {
    border: 1px solid red;
    background-color: #fdd;
    color: #d00;
    padding: 10px;
    list-style-type: none;
    margin: 0 0 20px 0;
    border-radius: 5px;
}

.success {
    border: 1px solid green;
    background-color: #deffec;
    color: darkgreen;
    padding: 10px;
    list-style-type: none;
    margin: 0 0 20px 0;
    border-radius: 5px;
    text-align: center;
}

.success h5 {
    margin: 0;
    font-weight: 400;
    text-align: center;
}

.info {
    background-color: #def0ff; padding:20px; border-radius: 10px;
}

/* Define a keyframe that toggles opacity */
@keyframes flash {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

/* Apply the animation to your message list items */
.flash-messages li {
  /* control duration and repeat count here */
  animation: flash 1s ease-in-out 3;
}

/* Optional: add some padding, border, background */
.flash-messages {
  list-style: none;
  margin: 1em 0;
  padding: 0;
}
.flash-messages li {
  padding: 0.75em 1em;
  border-radius: 4px;
  background-color: #e0ffe0;  /* light green */
  border: 1px solid #0a0;     /* darker green */
  margin-bottom: 0.5em;
}


.email-validated  {
    color:green !important;
    float:right;
    font-weight:400;
}



/* Base style for the error list */
.errorlist {
    border: 1px solid red;
    background-color: #fdd;
    color: #d00;
    padding: 10px;
    list-style-type: none;
    margin: 0 0 20px 0;
    border-radius: 5px;
}

.errorlist ul {
    margin-bottom: 0;
    padding-left: 20px; /* Indent the list items */
    list-style-type: disc; /* Optional: specify the bullet style */
    list-style-position: outside; /* Ensure bullets are outside the padding */
}

/* Style for individual error messages */
.errorlist li {
    margin: 5px 0;
    font-weight: normal;
}

/* Special style for when there's only one error */
.errorlist li:only-child {
    margin: 0;
    list-style-type: none;
}



/* REGISTRATION */
.terms-label {
    font-size: 15px;
    color: #333;
    font-weight: 300;
    vertical-align: middle;
    margin-top: -4px;
}

.terms-link {
    color: #007bff;
    text-decoration: none;
}

.terms-link:hover {
    text-decoration: underline;
}


/* DASHBOARD */
/* #########################################################*/

/* Two-Column Responsive Layout */
.two-column-layout {
    display: flex;
    flex-wrap: wrap; /* Allows wrapping for smaller screens */
    gap: 20px; /* Spacing between columns */
}

.two-column-layout > div:first-child {
    flex: 1; /* 25% width - right column (keepup/help) */
    box-sizing: border-box;
}

.two-column-layout__left {
    flex: 3; /* 75% width - left column (kits) */
    box-sizing: border-box;
}

.two-column-layout__right {
    flex: 1; /* 25% width */
    box-sizing: border-box;
}

/* Responsive Behavior for Smaller Screens */
@media (max-width: 800px) {
    .two-column-layout {
        flex-direction: column; /* Stacks columns vertically */
    }

    .two-column-layout > div:first-child,
    .two-column-layout__left, 
    .two-column-layout__right {
        flex: 1 1 100% !important; /* Both take full width */
        width: 100% !important;
        max-width: 100% !important;
    }
}

.lc_button {
    background-color: #ffffff;
    color: rgb(12, 9, 61);
    border: 1px solid #4c81af;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    font-size:0.9em;
    font-weight: 400;
    padding: 0 10px;
}
.lc_button a {
    text-decoration: none;

}

/* PROFILE */
/* #########################################################*/

.profile-container {
    max-width: 1000px;
    margin: 0;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* 1) Ensure all grid cells stretch equally on desktop */
.three-col {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;       /* mobile: 1 col */
}
@media (min-width: 850px) {
  .three-col {
    grid-template-columns: repeat(3, 1fr);  /* desktop: 3 equal cols */
    grid-auto-rows: 1fr;                    /* make all rows equal height */
  }
}

/* 2) Inside each cell, stack children and push the anchor to the bottom */
.three-col > div {
  display: flex;
  flex-direction: column;
}

/* target the <a> wrapper so it flex‐grows and pushes the button down */
.three-col > div > a {
  margin-top: auto;
  /* optional: center the button anchor if you like */
  text-align: center;
}





/* KITS */
/* #########################################################*/



/*.register-kit-btn {
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    font-size:0.9em;
    font-weight: 400;
    padding: 0 10px;

}

.register-kit-btn:hover {
    background-color: #0056b3;
    color: white;

}

.register-kit-btn span {
    font-size:2em;
    vertical-align: sub;
    font-weight: 300;
}
*/











/* KIT DETAILS */

.kit-details-container {
    max-width:600px;
}

.kit-header {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 10px;
}

.kit-icon {
    width: 120px;
    height: 120px;
    object-fit: contain;
    flex-shrink: 0;
}

.kit-header-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 6px;
    height: 120px;
    max-height: 120px;
    overflow: hidden;
}

.kit-title {
    margin: 0;
}

@media (max-width: 640px) {
    .kit-title {
        font-size: 1.5em;
        line-height: 1.2;
    }
}

.kit-followup-label {
    font-size: 22px;
    font-weight: 500;
    color: #919191;
    margin: 0;
    line-height: 1.1;
}

.kit-info {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 0;
}

.kit-info-row {
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #aeaeae;
    border-radius: 5px;
    padding: 4px 10px;
    background-color: #f5f5f5;
    line-height: 1.2;
}

.kit-info-label {
    font-weight: 600;
}

.kit-info-value {
    font-weight: 400;
    color: #333;
}

.insurance-packet-link {
    text-decoration: none;
    font-size: 0.6em;
}

.insurance-packet-button {
    line-height: 1.3;
    min-height: 30px;
    height: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 4px 10px;
    text-align: center;
    white-space: normal;
    max-width: 100%;
}

.insurance-packet-button span {
    display: inline;
}

.kit-checklist ul {
    list-style-type: none;
    font-size: 1.4em;
    font-weight: 300;
    padding-left: 0; /* no default indent */
    margin: 0;
}

.kit-checklist li {
    position: relative;
    padding-left: 28px; /* space for the icon */
    margin-bottom: 8px;
    line-height: 1.3;
}

.kit-checklist li > i {
    position: absolute;
    left: 0;
    top: 0.1em; /* align icon vertically with text */
}









/* QUESTIONNAIRE */

.questionnaire-container p {
    line-height: 1.2em;
    margin-bottom: 1rem;
}

.questionnaire-page-title {
    font-size:1.9em;
    line-height: 1.4em  !important;
    font-weight: 300;
    margin-bottom: 40px  !important;

}

.questionnaire-description {
    font-size:1.2em;
    line-height: 1.5em !important;
    font-weight: 300;
    margin-bottom: 40px !important;
}

.progress-container {
    position: relative;
    width: 100%;
    background-color: #f3f3f3;
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 15px;
}

.progress-bar {
    height: 25px;
    background-color: #a3f79c;
    width: 0%;
    transition: width 0.3s;
}

.progress-text {
    position: absolute;
    width: 100%;
    text-align: center;
    line-height: 25px;
    top: 0;
    color: darkgreen;
    text-shadow: 
        0px 0px 4px white;  /* White shadow with blur */
        
}



/* BUTTONS */


.questionnaire-buttons {
    display: flex;
    align-items: center;
    align-items: center;
    padding-top: 20px;
}

.questionnaire-buttons .back-button {
    width:150px;
    background-color: transparent;
    color: gray;
    border: 1px solid gray;
    margin-right: 10px;
}

.questionnaire-buttons .next-button {
    width: 100%;
}


.questionnaire-container .question {
    font-size: 1.4em;
    font-weight:300;
    margin-top: 40px;
}

.answer-note {
    font-size: 16px;
    font-weight:300;
    margin-left:5px;
}




/* RADIO FIELDS */

.answer-radio {
    margin-top: 1em;
    margin-left: 0;
    font-weight:300;
}

.answer-radio input[type="radio"] {
    transform: scale(1.4);
    margin-right: 20px;
    margin-bottom: 0;
}

.answer-radio label {
    display: flex;
    align-items: stretch;
    border: 1px solid silver;
    border-radius: 5px;
    padding: 10px 5px 10px 20px;
    font-weight: 300;
    margin: 10px 0 0 0;
    line-height: 1.1em;
}

.answer-radio li {
    list-style-type: none;
    margin-bottom: 0.4em;
    font-size: 1.1em;
    font-weight: 300;
}

.answer-radio .answer-note {
   margin: 0 0 30px 0;
}



/* SELECT FIELDS */

.answer-select {
    font-size: 1.1em;
    font-weight:300;
    margin-bottom: 2em;
}

.answer-select select {
    font-size: 1em;
    font-weight:300;
    margin-bottom: 5px
}




/* CHECKBOX FIELDS */

.answer-checkbox {
    margin-top: 1em;
    margin-left: 0;
    font-weight:300;
}

.answer-checkbox input[type="checkbox"] {
    transform: scale(1.4);
    margin-right: 20px;
    margin-bottom: 0;
}

.answer-checkbox label {
    display: flex;
    align-items: stretch;
    border: 1px solid silver;
    border-radius: 5px;
    padding: 10px 5px 10px 20px;
    font-weight: 300;
    margin: 10px 0 0 0;
    line-height: 1.1em;
}

.answer-checkbox label span {
    color:black;
    display: inline-block;
    vertical-align: top;
    line-height: 1.33em;
}


.answer-checkbox li {
    list-style-type: none;
    margin-bottom: 0.4em;
    font-size: 1.1em;
    font-weight: 300;
}


/* TEXT FIELDS */

.answer-text {
    font-size: 1.4em;
    font-weight:300;
    margin-bottom: 2em;
}
.answer-text input[type="text"] {
    margin-bottom: 5px;
    font-size: 16px;
    font-weight: 300;
}

.answer-text .auto-expand-textarea {
    width: 100%;
    margin-bottom: 5px;
    font-size: 16px;
    font-weight: 300;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    resize: none;
    overflow: hidden;
    min-height: 40px;
    max-height: 200px;
    line-height: 1.4;
    font-family: inherit;
}



/* PRODUCTS */

.product-container {
    padding:40px 10px 0 10px;

}


.product-column {
    display: flex;
    align-content: stretch;
    justify-content: space-around;
}

@media (max-width: 768px) {
    .product-column {
        margin-bottom: 25px;
    }
}


/* PASSWORD VALIDATOR */

.password-container {
    position: relative;
}

.field-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-100%);
    
    cursor: pointer;
    color:silver;
}

#password-requirements {
	background-color: #ecf3ff;
	padding: 20px;
	border-radius: 3px;
	margin-bottom: 10px;
    border-radius: 10px;
    display: none; /* Hide by default */
}

#password-requirements p {
	margin: 0 0 10px 0;
	font-weight: 400;
    font-size: 1em;
}

#password-requirements ul {
    list-style-type: circle;
    padding: 0;
    margin: 0px 0 0 20px;
    line-height: initial;
    font-size: 0.9em;
}

#password-requirements li {
	margin-bottom: 5px;
}

#password-requirements li.valid {
	color: green;
}

#password-requirements li.invalid {
	color: red;
}



.checkbox-container {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    background-color: #edffe5;
    padding:10px;
    font-weight: 300;
    border-radius: 6px;
}

.checkbox-container input[type="checkbox"] {
    margin: 0 20px 0 10px;
    margin-bottom: 0;
    transform: scale(1.5);
}

.checkbox-container label {
    margin: 0;
    font-weight: 400;
    line-height: 1.3em;
}
.checkbox-container label a {
    text-decoration: none;
    color: #1F67C5;
    font-weight: 400;
}



/* Modal container */
.modal {
	display: none;
	position: fixed;
	z-index: 1;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgb(0,0,0);
	background-color: rgba(0,0,0,0.4);
    
}

/* Modal content */
.modal-content {
	background-color: #fefefe;
	margin: 15% auto;
	padding: 40px;
	border: 1px solid #888;
	width: 80%;
	max-width: 1000px;
    border-radius: 10px;
}

/* Close button */
.close {
	color: #aaa;
	float: right;
	font-size: 28px;
	font-weight: bold;
    position: relative;
    top:-50px;
    font-size: 50px;;

}
/* Full page modal on mobile */
@media (max-width: 600px) {
    .modal-content {
        width: 90%;
        height: 100%;
        margin: 0;
        padding: 20px;
        border: none;
        border-radius: 0;
        box-shadow: none;
    }

    .modal-content .terms-content {
        max-height: calc(100% - 60px); /* Adjust according to padding and other elements */
        overflow-y: auto;
    }

    .modal-content h2 {
        margin-top: 0;
    }
    .close {
        top:-30px;
    }
}

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

/* Content within the modal */
.terms-content {
	max-height: 600px;
	overflow-y: auto;
}



/*PROVIDERS*/
/* ******************************************************* */

.provider-logo {
    max-width: 100%;   /* Ensures the image won't be larger than its container */
    height: auto;      /* Maintains the aspect ratio */
    display: block;    /* Removes the inline block space */
   max-height: 40px;  /* Ensures the logo shrinks to fit the container's height if necessary */
}
@media (max-width: 800px) {
    .provider-logo {
        max-width: 300px;
    }
}

input.provider-form[type="text"],
input.provider-form[type="email"],
input.provider-form[type="url"] {
    width: 100%;
}

.review-test-textarea {
    width: 100%;
    height: 300px;
    resize: vertical; 
}

/* Container for the word and its footnote */
.footnote {
    display: inline-block;
    position: relative;
    vertical-align: baseline; /* Align with the rest of the text */
}

/* Footnote text styling */
.footnote-text {
    display: block;
    font-family:sans-serif;
    font-size: 0.4em; /* Smaller font size for the footnote */
    position: absolute;
    left: 0px; 
    top:-12px;/* Align to the left of the parent element */
    white-space: nowrap; /* Prevents the footnote text from wrapping */
    color: gray;
}

h3 .footnote-text  {
    font-size: 0.45em;
}

.patient-name {
    font-family: Georgia, 'Times New Roman', Times, serif;
}
.patient-name a {
    color:#003a78;
    font-size: 18px;;
    text-decoration: none;;
}
.patient-name a:hover {
    color:#04b0ff;
}

.info-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.6rem;
}

.info-header h4 {
    margin: 0; /* Remove default margin for better alignment */
}

.navigation-buttons a {
    text-decoration: none;
}

.status-date {
    font-size: 0.8em;
    color: #555;
}

.provider-kit-list-filter {
    display: flex;
    justify-content:space-between;
    align-items: center;
    margin-bottom: 20px;
}

.provider-kit-list-filter a {
    border: 1px solid rgb(205, 205, 205);
    padding:5px;
    margin:5px;
    border-radius: 5px;
    text-decoration: none;
}


/* TOGGLES */
/* #########################################################*/

/* Styles for the toggle */
.toggle {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 20px;
}
.toggle input {
    display: none;
}
.toggle .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.4s;
    border-radius: 20px;
}
.toggle input:checked + .slider {
    background-color: #4caf50;
}
.toggle .slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.4s;
    border-radius: 50%;
}
.toggle input:checked + .slider:before {
    transform: translateX(20px);
}


/* Utility: a wrapping row of chips */
.chip-row {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
}

/* Compact button for tight table/action cells */
.btn-compact {
        font-size: 0.8em;
        padding: 4px 8px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        line-height: 1.2;
}

/* Status badges for provider authorizations list */
.status-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-weight: bold;
        white-space: nowrap;
}
.status-badge--signed { color: green; }
.status-badge--pending { color: orange; }
.status-badge--claimed { color: #007cba; font-weight: bold; }

/* Provider Authorization: scoped form styles (avoid global collisions) */
.provider-auth-form .form-section { background:#f8f9fa; padding:20px; border-radius:8px; margin-bottom:25px; border:1px solid #e9ecef; }
.provider-auth-form .form-row { display:flex; flex-direction:column; gap:12px; }
.provider-auth-form .form-row.horizontal { display:flex; flex-direction:row; gap:15px; }
.provider-auth-form .form-field { display:flex; flex-direction:column; width:100%; max-width:400px; margin-bottom:20px; }
.provider-auth-form .form-row.horizontal .form-field { flex:1; max-width:250px; }
.provider-auth-form .form-field label { font-weight:bold; margin-bottom:5px; color:#495057; }
/* Override max-width for patient search field to allow full width */
.provider-auth-form .form-field:has(#patient_search) { max-width: 100%; }
.provider-auth-form .form-field label[for="patient_search"] { max-width: 100%; }
/* Override max-width for kit type field to allow full width for long names */
.provider-auth-form .form-field:has(input[name="kit_type"]) { max-width: 100%; }
.provider-auth-form .form-field:has(.radio-group) { max-width: 100%; }
.provider-auth-form .form-control,
.provider-auth-form .form-field input[type="text"],
.provider-auth-form .form-field input[type="email"],
.provider-auth-form .form-field input[type="tel"],
.provider-auth-form .form-field input[type="date"],
.provider-auth-form .form-field select,
.provider-auth-form .form-field textarea { width:100%; max-width:100%; padding:8px 12px; border:1px solid #ced4da; border-radius:4px; font-size:14px; margin-bottom:0; }
.provider-auth-form .form-control:focus,
.provider-auth-form .form-field input[type="text"]:focus,
.provider-auth-form .form-field input[type="email"]:focus,
.provider-auth-form .form-field input[type="tel"]:focus,
.provider-auth-form .form-field input[type="date"]:focus,
.provider-auth-form .form-field select:focus,
.provider-auth-form .form-field textarea:focus { border-color:#80bdff; outline:0; box-shadow:0 0 0 0.2rem rgba(0,123,255,.25); }

/* Field state visuals (scoped) - exclude radio groups since they have their own styling */
.provider-auth-form .field-populated:not(.radio-group) { background-color:#f2fff6 !important; border-color:#28a745 !important; }
.provider-auth-form .field-required-empty:not(.radio-group) { background-color:#fcf0f1 !important; border-color:#dc3545 !important; border-width:1px !important; box-shadow:0 0 0 0.2rem rgba(220,53,69,.25) !important; }
.provider-auth-form .field-required-empty:not(.radio-group):focus { border-color:#dc3545 !important; box-shadow:0 0 0 0.2rem rgba(220,53,69,.25) !important; }
.provider-auth-form .field-optional-empty { background-color:#f8f9fa !important; border-color:#ced4da !important; }
.provider-auth-form .field-error-message { color:#dc3545; font-size:12px; margin-top:4px; }

/* ICD-11 container error styling */
#provider-order-icd11-container.field-required-empty { border:2px solid #dc3545 !important; background-color:#fcf0f1 !important; border-radius:6px; padding:15px; }
#provider-order-icd11-container.field-required-empty .icd11-search-box input { border-color:#dc3545 !important; background-color:#fcf0f1 !important; }

/* Radio button groups for provider authorization form */
.provider-auth-form .radio-group { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 0px; }
.provider-auth-form .radio-group > div { display: flex; gap: 8px; flex-wrap: nowrap; align-items: center; }
.provider-auth-form .radio-group ul { list-style: none; padding: 0; margin: 0; display: flex; gap: 8px; flex-wrap: nowrap; align-items: center; }
/* Allow kit type radio group to wrap for long names */
.provider-auth-form .radio-group ul:has(input[name="kit_type"]) { flex-wrap: wrap; }
/* More specific rule for kit type wrapping (fallback for browsers without :has support) */
.provider-auth-form input[name="kit_type"] { flex-wrap: wrap !important; }
.provider-auth-form div:has(input[name="kit_type"]) { flex-wrap: wrap !important; }
/* Force kit type container to allow wrapping */
.provider-auth-form .radio-group:has(input[name="kit_type"]) { flex-wrap: wrap !important; }
.provider-auth-form .radio-group:has(input[name="kit_type"]) ul { flex-wrap: wrap !important; }
/* Specific styling for kit type radio group */
.provider-auth-form .kit-type-radio-group { flex-wrap: wrap !important; }
.provider-auth-form .kit-type-radio-group ul { flex-wrap: wrap !important; }
.provider-auth-form .kit-type-radio-group > div { flex-wrap: wrap !important; }
.provider-auth-form .radio-group li { margin: 0; }
.provider-auth-form .radio-group > div > div { margin: 0; display: inline-block; }
.provider-auth-form .radio-group label { font-weight: normal !important; margin-bottom: 0 !important; display: flex; align-items: center; cursor: pointer; padding: 6px 10px; border: 1px solid #ced4da; border-radius: 4px; background-color: #fff; transition: all 0.2s ease; white-space: nowrap; min-width: auto; margin-right: 5px; line-height: 1.2; }
.provider-auth-form .radio-group input[type="radio"] { margin: 0 6px 0 0; vertical-align: middle; }
.provider-auth-form .radio-group label:hover { background-color: #f8f9fa; border-color: #80bdff; }
.provider-auth-form .radio-group input[type="radio"]:checked + span,
.provider-auth-form .radio-group label:has(input[type="radio"]:checked) { background-color: #e7f3ff; border-color: #007bff; font-weight: 500; }
/* Radio button validation styling */
.provider-auth-form .radio-group.field-required-empty label { border-color: #dc3545 !important; background-color: #fcf0f1 !important; }
.provider-auth-form .radio-group.field-required-empty div label { border-color: #dc3545 !important; background-color: #fcf0f1 !important; }
.provider-auth-form .radio-group.field-populated label:has(input[type="radio"]:checked) { background-color: #f2fff6 !important; border-color: #28a745 !important; }
.provider-auth-form .radio-group.field-populated div label:has(input[type="radio"]:checked) { background-color: #f2fff6 !important; border-color: #28a745 !important; }
/* Hide Django's default radio choice dashes and ensure horizontal layout */
.provider-auth-form .radio-group ul li::before { display: none !important; }
.provider-auth-form .radio-group ul li::after { display: none !important; }
.provider-auth-form .radio-group #id_patient_gender { display: flex !important; flex-direction: row !important; gap: 8px; }
.provider-auth-form .radio-group #id_patient_gender > div { display: inline-block !important; margin-right: 5px; }
.provider-auth-form .radio-group #id_kit_type { display: flex !important; flex-direction: row !important; gap: 8px; }
.provider-auth-form .radio-group #id_kit_type > div { display: inline-block !important; margin-right: 5px; }
.provider-auth-form .radio-group #id_billing_type { display: flex !important; flex-direction: row !important; gap: 8px; }
.provider-auth-form .radio-group #id_billing_type > div { display: inline-block !important; margin-right: 5px; }

/* Provider info fields when editable */
.provider-auth-form .provider-field-read-only { background-color:#f8f9fa !important; border-color:#6c757d !important; cursor:not-allowed; opacity:.8; }
.provider-auth-form .provider-field-missing { background-color:#fcf0f1 !important; border-color:#dc3545 !important; }
.provider-auth-form .provider-info-label { font-weight:bold; margin-bottom:5px; color:#495057; display:block; }
.provider-auth-form .provider-info-label.required-missing { color:#dc3545; }

/* Patient search overrides on small screens */
@media (max-width: 640px) {
    .provider-auth-form .form-row { flex-direction: column; }
    .provider-auth-form .form-row.horizontal { flex-direction: column; }
    .provider-auth-form .form-field { width:100%; max-width:100%; }
    .provider-auth-form .form-row.horizontal .form-field { max-width:100%; }
    /* Override inline widths for patient search on small screens */
    #patient_search, #patient_search_results { width: 100% !important; max-width: 100% !important; }
}

/* Confirmation page signature + actions */
.auth-signature-fields { display:flex; flex-wrap:wrap; gap:12px; align-items:flex-start; }
.auth-actions-bottom { margin-top:25px; display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
@media (max-width: 640px) {
    .auth-signature-fields { flex-direction: column; align-items: stretch !important; }
    .auth-signature-fields > div { min-width: 100% !important; }
    .auth-actions-bottom { flex-direction: column; align-items: stretch !important; }
    .auth-actions-bottom form,
    .auth-actions-bottom a,
    .auth-actions-bottom button { width: 100%; }
}

/* Provider section icon (unified gray styling) */
.provider-section-icon { color:#a9aaac; font-size:30px; }

/* Detailed ICD chip (code + title) for confirmation page */
.icd-chip-detail {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f1f3f5;
    color: #333;
    border: 1px solid #d0d5da;
    border-radius: 12px;
    padding: 6px 10px;
    font-size: 0.85em;
    line-height: 1.2;
    white-space: normal; /* allow wrapping if very long */
    max-width: 340px;
}
.icd-chip-detail strong { font-weight:600; }

/* Signature field alignment helpers */
.auth-signature-field { flex:1; min-width:260px; display:flex; flex-direction:column; }
.auth-signature-date { min-width:220px; display:flex; flex-direction:column; }
.auth-date-display { padding:8px 10px; border:1px solid #ccc; border-radius:4px; background:#fff; white-space:nowrap; display:flex; align-items:center; line-height:1.2; }

/* Signature confirmation box styling */
.auth-signed-confirmation {
    text-align: center;
}
.auth-signed-confirmation h4 {
    text-align: center;
    justify-content: center;
}
.auth-signed-confirmation p {
    text-align: center;
    font-size: 18px !important;
}

/* Provider authorization confirm page specific header centering */
.auth-page-header-centered {
    text-align: center;
}
.auth-page-header-centered .footnote {
    display: block;
    text-align: center;
}


/* Provider Authorization layout width constraint */
.provider-auth-container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}
@media (max-width: 1240px) {
    .provider-auth-container { padding-left: 10px; padding-right: 10px; }
}

/* Lab header: logo centered above two columns; columns side-by-side on desktop, stacked on small screens */
.auth-lab-header { display:flex; flex-direction:column; align-items:flex-start; margin:0 0 30px 0; }
.auth-lab-header__logo { width:100%; display:flex; justify-content:center; margin-bottom:0; }
.auth-lab-header__logo img { max-width:140px; height:auto; display:block; }
.auth-lab-header__columns { width:100%; display:flex; flex-wrap:wrap; gap:24px; justify-content:flex-start; }
.auth-lab-header__col { flex:1 1 300px; font-size:14px; line-height:1.5; min-width:260px; display:flex; flex-direction:column; }
/* Desktop: keep three columns on one row */
@media (min-width: 821px) {
    .auth-lab-header__columns { flex-wrap:nowrap; justify-content:space-between; }
    .auth-lab-header__col { flex:1 1 0; min-width:0; }
    /* Bottom align columns 2 and 3 */
    .auth-lab-header__columns .auth-lab-header__col:nth-child(2),
    .auth-lab-header__columns .auth-lab-header__col:nth-child(3) { justify-content:flex-end; }
    /* Horizontal alignment tweaks */
    .auth-lab-header__columns .auth-lab-header__col:nth-child(2) { text-align:center; }
    .auth-lab-header__columns .auth-lab-header__col:nth-child(3) { text-align:right; }
}
.auth-lab-header__address { font-size:16px; line-height:1.55; }
.auth-lab-header__address b { display:inline-block; margin-bottom:4px; }
.auth-lab-header__accreditation {  font-size:16px; line-height:1.55; }
.auth-lab-header__accreditation a { color:#003a78; text-decoration:none; font-weight:normal; font-size:16px; }
.auth-lab-header__accreditation a:hover, .auth-lab-header__accreditation a:focus { color:#005bb5; text-decoration:none; }
.auth-lab-header__copyright { font-size:11px; color:#666; margin-top:10px; }
@media (max-width: 820px) { .auth-lab-header__columns { flex-direction:column; gap:24px; } .auth-lab-header__col { flex:1 1 auto; } .auth-lab-header__copyright { text-align:center; } }