/* NOTE: Styling for the MIEMSS page
 * This CSS is specifically for the MIEMSS widget and should not be used elsewhere.
 * It is designed to be responsive and work on all screen sizes.
 *
 * The col12 class is used if the widget is the only one on the screen.
 * When there are two or three widgets on the screen, the layout will use the non-col12 classes.
 */
 
.theme-logo-background {
	background-image: url('logo1.png'); /* pre-faded */
	background-repeat: no-repeat;
	background-position: center;
	background-size: 300px auto;
}

.col12 .facility_row {
    display: flex;
    flex-direction: row;
    /* make it horizontal */
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    /* allows wrapping on smaller screens */
    gap: 15px;
}

.col12 .facility_main {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15px;
}

.col12 .facility_name {
    font-weight: bold;
    font-size: 30px;
    color: white;
    margin-right: 15px;
    width: 550px
}

.col12 .facility_alerts {
    width: 375px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.col12 .facility_info {
    width: 350px;
    font-size: 22px;
    color: white;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.col12 .facility_length {
    width: 350px;
    font-size: 24px;
    color: white;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.col12 .hospital-units {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.facility_row {
    display: flex;
    flex-direction: column;
    margin-bottom: 12px;
    width: 100%;
}

.facility_main {
    display: flex;
    align-items: center;
    /* center vertically */
    gap: 12px;
    flex-wrap: wrap;
    /* Just in case */
}

.facility_name {
    font-weight: bold;
    font-size: 30px;
    color: white;
}

.facility_alerts {
    display: flex;
    gap: 8px;
}

.badge {
    padding: 5px 10px;
    border-radius: 12px;
    font-size: 22px;
    font-weight: bold;
    white-space: nowrap;
}

.hospital-badge-danger {
    background-color: red;
    color: white;
}

.hospital-badge-warning {
    background-color: yellow;
    color: black;
}

.hospital-badge-success {
    background-color: white;
    color: black;
}

.hospital-badge-reroute {
    background-color: orange;
    color: black;
}

.hospital-badge-bypass {
    background-color: purple;
    color: white;
}

.hospital-badge-capacity {
    background-color: lightslategray;
    color: black;
}

.hospital-badge-disaster {
    background-color: green;
    color: white;
}

.facility_info {
    margin-top: 4px;
    font-size: 26px;
    color: white;
    padding-left: 5px;
}

.facility_length {
    margin-top: 4px;
    font-size: 26px;
    color: white;
    padding-left: 5px;
}

.hospital-unit-badge {
    display: inline-block;
    background-color: blue;
    /* Bootstrap primary color */
    color: white;
    padding: 5px 10px;
    margin: 2px;
    border-radius: 15px;
    font-size: 22px;
}