body {
  font-family: Arial, sans-serif;
}


.dha-ctn {
  width: 100%;
  margin-left: 10px;
  border-style: solid;
  border-width: 2px;
  border-color: #006BB6;
  border-radius: 8px;
  box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.25);
  display: block;
}
.dha-title-row {
height: 50px;
}
.dha-title-text {
  display: inline-block;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: 0.1px;
  color: #14377D;
  margin-left: 28px;
  margin-right: 4px;
  margin-top: 20px;
  margin-bottom: 0;
}
hr {
height: 1px;
background-color: #828282;
border-color: black;
margin-top: 8px;
margin-bottom: 0px;
}
.dha-btn {
border-radius: 6px;
font-style: normal;
font-weight: 700;
font-size: 20px;
line-height: 28px;
margin-left: 0px;
margin-top: 20px;
margin-bottom: 20px;
margin-right: 20px;
width: 200px;
}
.dha-btn:hover {
background-color: #00205c;
color: #fff;
}
.dha-btn-primary {
background-color: #14377D; /* TRICARE Dark Blue Primary Color */
border: 2px solid #14377D; /* TRICARE Dark Blue Primary Color */
color: white;
}
.dha-btn-primary:disabled {
  background-color: #14377D; /* Ensures disabled state has the same background color */
  border: 2px solid #14377D; /* Ensures disabled state has the same border */
  color: white; /* Ensures text color remains the same */
  opacity: 0.5; /* Override any default browser opacity changes for disabled buttons */
}
.dha-btn-secondary {
background-color: white;
color: #545456; /* Gray (Text) */
border: 2px solid #006BB6; /* TRICARE Medium Blue Primary Color */
}
.dha-btn-secondary:disabled {
background-color: white;
color: #545456; /* Gray (Text) */
border: 2px solid #006BB6; /* TRICARE Medium Blue Primary Color */
opacity: 0.5; /* Override any default browser opacity changes for disabled buttons */
}
.dha-btn-primary-light {
background-color: #0071BB;
border: 2px solid #0071BB;
color: white;
} 
.dha-btn-secondary-light {
background-color: white;
color: #0071BB; /* Light blue text */
border: 2px solid #0071BB; /* Light blue outline */
}
.dha-container {
display: flex;
flex-direction: column;
align-items: stretch; /* Ensures columns stretch to fill the container */
width: 100%;
}

.header-ctn {
display: flex; /* Enables Flexbox */
align-items: center; /* Vertically centers the items */
justify-content: space-between;
margin-top: 20px;
}

.header-images-ctn {
display: flex;
align-items: center;
margin-left: 36px;
}

.search-ctn {
display: flex;
justify-content: space-between;
align-items: center;
margin-right: 20px;
}
.search-box {
width: 367px;
height: 50px;
}

.dhanav {
  border-top: 2px solid #006BB6;
  border-bottom: 2px solid #006BB6;
  height: 68px;
  margin-top: 20px;
  background-color: white;
  color: #14377d;
}
.dhanav-content {
  display: flex;
  justify-content: space-between;
  color: #14377d;
  width: 100%;
  padding-left: 28px;
  padding-right: 28px;
}
.dhanav-item {
margin-top: 10px;
}

.dhanav-item.active {
color: #14377D;
font-weight: 700;
transition: 0.2 ease-in-out;
}

.navlink.active {
color: #14377D;
font-weight: 700;
transition: 0.2 ease-in-out;
}

a.navlink {
display: inline-block; /* Adds height and allows padding to be effective */
font-size: 16px;
padding-top: 10px; /* Top padding */
color: rgba(84, 84, 86, 1);
text-decoration: none; /* Removes the underline */
padding-bottom: 16px;
}
a.navlink:focus {
border-bottom: 4px solid #14377D;
color: #14377D;
font-weight: 700;
}
a.navlink:hover {
border-bottom: 4px solid #14377D;
text-decoration: none !important;
}
a.navlink:active {
border-bottom: 4px solid #14377D;
text-decoration: none !important;
color: #14377D;
font-weight: 700;
}

.footer {
background-color: #ececec;
margin-top: 20px;
padding-left: 36px; padding-right: 36px;
width: 100%;
height: 112px;
display: flex;
justify-content: center;
align-items: center;
bottom: 0;
position: relative; /* Change to 'fixed' for a sticky footer */
}
.footer-links {
display: flex;
justify-content: space-between;
align-items: center;
}

.footer-icons {
display: flex;
justify-content: space-between;
align-items: flex-end;
} 
.footer-item {
margin: 0 10px; /* This creates a 20px gap between images */
}
.footer-icon {
width: 24px;
height: 24px;
}

.breadcrumb {
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #14377D;
}
.breadcrumb > li a {
  color: #14377D;
text-decoration: none;
}
.breadcrumb > li a:hover {
  color: #14377D;
}
.breadcrumb-item + .breadcrumb-item::before {
  content: ">";
}
.breadcrumb > li a:active {
  color: #006BB6;
}
.breadcrumb-item.active {
    font-weight: 600;
    color: #006BB6;
}

.spinner-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent background */
z-index: 1050; /* Make sure it covers other content */
flex-direction: column; /* Ensure spinner and "Loading" text are stacked */
}
.spinner-loading-text {
margin-top: 1rem; /* Adjust the space between the spinner and the text as needed */
font-size: 1.25rem;
color: #007bff; /* Match the spinner color */
}
.spinner-small {
width: 1.25rem;
height: 1.25rem;
}
.spinner-loading-text-small {
margin-top: 0.5rem; /* Adjust the space between the spinner and the text as needed */
font-size: 1.0rem;
color: #007bff; /* Match the spinner color */
}

.content-container {
position: relative; /* Make this a reference point for the spinner container. */
width: 100%;
}

/* Classes to handle placing search icon inside input box. */
.input-with-icon {
  position: relative;
}
.input-with-icon input {
  border-radius: 6px; /* Curved border */
  padding-right: 2.5rem; /* Space for the magnifying glass icon */
}
.input-with-icon .icon {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: gray;
  pointer-events: none; /* Ensure the icon does not interfere with input */
}
.was-validated .input-with-icon input:invalid {
  border-color: red;
}
.was-validated .input-with-icon input:valid {
  border-color: green;
}
.input-with-icon .invalid-feedback {
position: absolute;
width: 100%;
top: 100%;
left: 0;
}
/* If the input field is either valid or invalid, the validation icon will show and needs to be
* movedto the left.
*/
.was-validated .input-with-icon .form-control:invalid, .was-validated .input-with-icon .form-control:valid {
  padding-right: 2.5rem; /* Keep the original padding */
  background-position: calc(100% - 2.5rem) center; /* Move the validation icon left */
}

.search-results {
border: 1px solid #d4d4d4;
border-top: none;
max-height: 200px; /* Optional: set a max height for results */
overflow-y: auto; /* Optional: add scroll to results */
background: white;
margin-bottom: 8px;
}
.search-results div {
padding: 10px;
cursor: pointer;
}
.search-results div:hover {
background-color: #f1f1f1;
}

.module-container {
  width: 100%;
  color: var(--gray);font-size: 1rem;
  margin: 8px;
}

.module-header {
	font-weight: 400;
	color: var(--tcDarkBlue);
	padding: 0px 20px;
	font-size: 2rem;
	text-transform: none;
}
 
.module-content {
	padding: 10px 20px;
}

.error-popup-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: RGBA(255, 255, 255, 0.75);
}
.btn-tertiary {
    padding: 0;
    height: fit-content;
    border: none;
    background: transparent;
    color: #006bb6;
    font-weight: 400
}