/* Basic reset for styling consistency */
/* Button colors when not selected */
button[data-product-type="RBC"] {
    background-color: rgb(250, 205,205);
    border: 2px solid rgb(250, 205, 205);
}

button[data-product-type="Platelet"] {
    background-color: rgb(255, 220, 180);
    border: 2px solid rgb(255, 220, 180);
}

button[data-product-type="Plasma"] {
    background-color: rgb(140, 245, 168);
    border: 2px solid rgb(140, 245, 168);
}
s
button[data-product-type="Plasma"]:hover {
    background-color: rgb(57, 181, 74); /* same as selected color */
    border: 2px solid rgb(52, 160, 65); /* same as selected border */
}


button[data-product-type="Albumin"] {
    background-color: rgb(180, 190, 190);
    border: 2px solid rgb(180, 190, 190);
}

/* Button colors when selected */
button.selected[data-product-type="RBC"] {
    background-color: rgb(237, 28, 36);
    border: 2px solid rgb(240, 100, 100);
}

button.selected[data-product-type="Platelet"] {
    background-color: rgb(252, 175, 23);
    border: 2px solid rgb(255, 150, 50);
}

button.selected[data-product-type="Plasma"] {
    background-color: rgb(57, 181, 74);
    border: 2px solid rgb(52, 160, 65);
}

button.selected[data-product-type="Albumin"] {
    background-color:rgb(0, 0, 0);
    border: 2px solid rgb(20, 30, 30);
}
/* General button styling */
button {
    color: rgb(57, 86, 179); /* Adjust text color for better contrast if needed */
    border: none;
   /* padding: 10px 20px;*/
    margin: 5px;
    cursor: pointer;
    font-style: bold;
}

button[data-product-type] {
    color: rgb(57, 86, 179) !important;
    border: none;
    margin: 5px;
    cursor: pointer;
    font-style: bold;
}


button.selected {
    color: rgb(57, 86, 179); /* Adjust text color for better contrast if needed */
}

button.selected[data-product-type] {
    color: rgb(57, 86, 179) !important;
}

button[data-product-type]:hover {
    color: rgb(57, 86, 179) !important;
}

/* ---------------------     */

#.gray-area {
#background: whitesmoke;
#border-radius: 5%;
#}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    color: #333;
    overflow-x: hidden;
}


.content-area {
    padding: 1rem;
}

.sections-container {
    display: flex;
    justify-content: space-around;
    align-items: start;
    padding: 20px;
    background: white;
    border-radius: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.analysis-container {
    display: flex;
    /* Aligns children (sections) in a row */
    justify-content: space-around;
    /* Distributes space around sections */
    align-items: start;
    /* Aligns items at the start of the container */
    padding: 20px;
    background: white;
    /* Background color for the container */
    border-radius: 20px;
    /* Rounded corners */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    /* Shadow for the container */
    margin-top: 2rem;
}



.utilization-count,
.dial-plot-container,
.line-graph {
    margin-top: 10px;
    border-radius: 8px;
    text-align: center;
}

.guidelines,
.actions,
.learns,
#learn-more {
    background: #e6e6e6;
    padding: 15px;
    padding-bottom: 0 !important;
    margin-top: 10px;
    border-radius: 8px;
}


.right-sidebar {
    background: #f4f4f4;
    padding: 1rem;
    margin-top: 17px;
    margin-bottom: 17px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}



.guidelines ul,
.actions ul,
.learns ul,
#learn-more ul {
    list-style-type: none;
    padding: 0;
}

.guidelines li,
.actions li,
.learns ul,
#learn-more li {
    margin-bottom: 5px;
}

a {
    color: #004d99;
    /* Link color */
    text-decoration: none;
    /* No underline */
}

a:hover {
    text-decoration: underline;
    /* Underline on hover */
}


.extra-small {
    font-size: 1rem !important;
    /* Adjust the size as needed */
    color: #6c757d;
    /* This matches the Bootstrap 'text-muted' color */
}


.navbar-nav .btn {
    width: 100%;
    height: 100%;
    padding: 10px 0;
    font-size: 1rem;
    font-weight: bold;
}

.navbar-nav {
    display: flex;
    align-items: center;
    height: 100%;
}

#transfusion-select {
    display: none;
    /* Hide the select menu by default */
}

/* Show the select menu and hide buttons on smaller screens */
@media (max-width: 700px) {
    .navbar .btn {
        display: none;
        /* Hide buttons */
    }

    #transfusion-select {
        display: block;
        /* Show the select menu */
        width: 30%;
        height: 100%;
        margin-left: auto;
    }
}

@media(max-width: 768px) {
    h5 {
        font-size: 40px;
    }

    .section-header h5 {
        margin-top: 1.5rem;
    }
}

select {
    padding: 0.5rem;
    border-radius: 10px;
    font-size: smaller;
    height: 30px;
}

.albumin-switch {
    position: absolute; /* Removes it from the document flow to avoid affecting the line */
    right: 0; /* Positions the dropdown to the far right */
    top: 0; /* Adjust this as needed */
    margin-top:-5px; /* Adjust margin to ensure proper vertical alignment */
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position:relative;
}

.section-header h5 {
    flex-grow: 1;
    border-bottom: 2px solid #004d99;
    padding-bottom: 5px;
    margin-right: 0px;
}


.hospital-icon {
    width: 200px;
    height: 200px;
    object-fit: contain;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 3px;
    margin-top:0px;
}

.hospital-grid .row {
    margin-top: 10px;
}


.hospital-icon-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr); /* 6 columns */
  grid-gap: 10px;
  justify-items: center;
  align-items: center;
  padding: 10px;
}

.hospital-icon.highlighted {
    border: 2px solid #ff9900;
    transform: scale(1.25);
    z-index: 1;
}

.hospital-rank-number {
    font-size: 0.7em;
    font-weight: bold;
    margin-top: 4px;
    color: #333;
}

.hospital-id-label {
  font-weight: bold;
  margin-bottom: 4px;
  font-size: 0.6em;
}