/* Make all the list items the same height. */
ul li span {
    height: 40px;
    display: table-cell;
    vertical-align: middle;
}


[data-role="popup"] {
    margin-top: 10px;
    position: relative;
    height: 490px;
    overflow-y: scroll;
    margin-bottom: 10px;
}

/* This parent can be any width and height */
.block {
    text-align: center;
}

    /* The ghost, nudged to maintain perfect centering */
    .block:before {
        content: '';
        display: inline-block;
        height: 100%;
        vertical-align: middle;
        margin-right: -0.25em; /* Adjusts for spacing */
    }

/* The element to be centered, can
   also be of any width and height */
.centered {
    /* display: inline-block; */
    vertical-align: middle;
    /* horizontal-align: middle; */
    width: 300px;
}

.ui-header .ui-title {
    margin-right: 10%;
    margin-left: 10%;
}

a {
    white-space: normal !important;
}

a:hover {
    color: #cee0f5
}

h2 {
    margin-top: 0px;
}

.gradientBackground {
    /* fallback */
    background-color: #0066cc;
    /* Safari 4-5, Chrome 1-9 */
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#003366), to(#0066cc)) !important;
    /* Safari 5.1, Chrome 10+ */
    background: -webkit-linear-gradient(top, #0066cc, #003366) !important;
    /* Firefox 3.6+ */
    background: -moz-linear-gradient(top, #0066cc, #003366) !important;
    /* IE 10 */
    background: -ms-linear-gradient(top, #0066cc, #003366) !important;
    /* Opera 11.10+ */
    background: -o-linear-gradient(top, #0066cc, #003366) !important;
}

/* styles used by the "Cerebrovascular Team" pages... */
.physicianImage {
    float: left;
    vertical-align: middle;
    margin-right: 20px;
}

    .physicianImage img {
        vertical-align: middle;
        width: 175px;
    }

.physicianContact {
    font-family: 'Open Sans', sans-serif;
    padding-top: 25px;
    vertical-align: middle;
}

.physicianCustomContact {
    float: left;
    padding: 20px;
    padding-left: 0;
}

.physicianCustomEmail {
    float: left;
    padding: 20px;
    padding-left: 0;
}

.physicianTitle {
    font-size: .9em;
    padding-bottom: 10px;
}

.physicianName {
    font-weight: bold;
    padding: 0;
    margin: 0;
}

.physicianPA_NP {
    font-size: .6em;
    padding-bottom: 5px;
}

.physicianPhone {
    font-size: .8em;
    font-weight: normal;
}

.globalHeaderText {
    font-family: 'Open Sans', sans-serif;
}

.ui-icon-phoneIcon:after {
    background: url("/mobile-apps/ecmo/images/phone_icon.png");
    width: 50px;
    height: 50px;
    top: 45%;
}

/* styles used by index page */
.mainMenuItem {
    padding-top: 5px !important;
    padding-bottom: 5px;
}

    .mainMenuItem img {
        vertical-align: center;
        margin-top: 5px;
        margin-left: 5px;
    }

body {
    font-family: 'Open Sans', sans-serif;
}

/* iPhone only stuff... */
@media only screen and (max-width: 500px) {
    .physicianImage {
        margin-right: 20px;
        width: 85px;
    }

        .physicianImage img {
            height: 120px;
            margin-left: -5px;
            width: auto;
            !important
        }

    .physicianContact {
        font-family: 'Open Sans Condensed', sans-serif;
        padding-top: 5px;
        font-weight: 200;
        width: 115%;
        position: absolute;
        left: 115px;
        top: 2px;
    }

    .physicianCustomContact {
        z-index: 1200;
        position: absolute;
        padding: 0;
        right: 10px;
        top: 25px;
    }

    .physicianCustomEmail {
        z-index: 1200;
        position: absolute;
        padding: 0;
        right: 10px;
        top: 85px;
    }

    .programContact {
        font-family: 'Open Sans', sans-serif;
        padding-top: 5px;
        font-weight: 200;
        width: 115%;
        left: 115px;
        top: 2px;
    }

    .physicianName {
        font-size: .95em;
        font-weight: 700;
    }

    .physicianTitle {
        font-size: .9em;
        padding-bottom: 5px;
    }

    .physicianPA_NP {
        font-size: .8em;
        padding-bottom: 5px;
        font-weight: bold;
    }

    .physicianPhone {
        font-size: 1em;
        font-weight: normal;
    }

    .globalHeaderText {
        text-align: left;
    }

    .ui-header .ui-title {
        margin-left: 10px;
    }

    .guidelineList li {
        font-size: .9em;
    }

    .guidelineText {
        font-size: .9em;
    }
}

.guidelineAnswer {
    font-size: 1.2em;
    font-weight: bold;
}

.transfer-guidelines {
    margin-top: 10px;
    margin-left: 25px;
    border: 1px solid white;
    padding: 10px;
    width: -moz-fit-content;
    width: fit-content;
}

/* Styles used by the cardiogenic shock and lung rescue pages */

.pdf-chart-container {
    --urmc-blue: rgb(0,69,125);
    --red-orange: rgb(238,55,51);
    --border-width: 3px;
    padding: 20px;
    display: grid;
    gap: .75em;
    background-color: white;
    color: black;
    border-radius: .3125em;
    max-width: 1200px;
    margin: auto; 
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto;
    font-size: clamp(.5rem, 2.5vw, 2rem);
    box-sizing: border-box;
}

@media (max-width: 900px) {
    .pdf-chart-container {
        --border-width: 2px;
    }
}

@media (max-width: 475px) {
    .pdf-chart-container {
        --border-width: 1px;
        margin-left: -15px;
        margin-right: -15px;
    }
}

.pdf-chart-container ul {
    margin: 0px;
    padding-left: 1em;
}

.pdf-chart-container ul ul li {
    font-style: italic;
}

.pdf-chart-main-title {
    font-size: clamp(1rem, 5vw, 4rem);
    color: var(--urmc-blue);
    margin-bottom: 5px;
}

.cardiogenic-shock-chart {
    --chart-color: var(--red-orange);
    --shaded-bg-color: rgb(252, 213, 198);
}

.lung-rescue-chart {
    --chart-color: var(--urmc-blue);
    --shaded-bg-color: rgb(218, 225, 238);
}

.pdf-chart-header-card {
    background-color: var(--chart-color);
    color: white;
    padding: .5em 1em;
}

.pdf-chart-card {
    border: var(--border-width) solid var(--chart-color);
    padding: .75em 1em;
}

.pdf-chart-card + .pdf-chart-card {
    margin-top: .75em;
}

.pdf-chart-shaded-background {
    background-color: var(--shaded-bg-color);
}

.pdf-chart-full-width {
    grid-column: 1 / -1;
}

.pdf-chart-left {
    grid-column: 1;
}

.pdf-chart-right {
    grid-column: 2 / span 2;
}

.pdf-chart-double-column {
    margin-top: .75em;
    display: grid;
    gap: .75em;
    grid-template-columns: 1fr 1fr;
}

.pdf-chart-double-column .pdf-chart-card {
    margin-top: 0px;
    align-self: start;
}

.pdf-flowchart {
    --chart-color: var(--urmc-blue);
    margin-top: 20px;
    padding: 20px;
    grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
    column-gap: 1em;
    row-gap: 0px;
    font-size: clamp(.5rem, 1.5vw, 1.75rem);
}

.mb-20 {
    margin-bottom: 20px;
}

.pdf-flowchart-yes {
    background-color: var(--red-orange);
    color: white;
    padding: .5em 1em;
    font-weight: bold;
    text-align: center;
}

.pdf-flowchart-no {
    padding: .5em 1em;
    font-weight: bold;
    text-align: center;
}

.pdf-flowchart-yes-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: .75em;
}

.text-centered {
    text-align: center;
}

.not-centered {
    text-align: left;
}

.pdf-flowchart-arrow {
    width: 4.5ch;
}

.pdf-flowchart-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* styles used by the ECMO team page */

.team-container {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    padding: 20px;
    color: rgb(0, 70, 158);
    background-color: white;
    text-align: center;
    border-radius: .3125em;
    text-wrap: balance;
}

@media (max-width: 475px) {
    .team-container {
        margin-left: -15px;
        margin-right: -15px;
    }
}

.team-container h2 {
    color: rgb(71, 142, 201);
    margin-bottom: 10px;
}

.team-top-text {
    margin-left: auto;
    margin-right: auto;
    max-width: 400px;
    font-weight: bold;
    color: rgb(0, 70, 126);
}

.team-top-text a {
    color: rgb(0, 70, 126) !important;
}

.team-member {
    margin-top: 10px;
}

.team-member-info {
    max-width: 400px;
    margin: auto;
    font-style: italic;
}

/* styles used by the About Us page */

.about-us-container {
    --about-us-blue: rgb(71, 142, 201);
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    padding: 35px;
    color: black;
    background-color: white;
    font-family: Helvetica, Arial, sans-serif;
    font-size: clamp(1rem, 2.5vw, 2rem);
    border-radius: .3125em;
}

@media (max-width: 475px) {
    .about-us-container {
        margin-left: -15px;
        margin-right: -15px;
    }
}

.about-us-container h2 {
    font-size: clamp(1.5rem, 4vw, 3.5rem);
    color: rgb(0, 69, 125);
    margin-bottom: 20px;
}

.about-us-top-text {
    margin-left: auto;
    margin-right: auto;
    font-size: clamp(1rem, 3vw, 2.5rem);
    max-width: 50ch;
}

.about-us-grid {
    margin-top: 20px;
    display: grid;
    grid-column-gap: 20px;
    grid-row-gap: clamp(2rem, 6vw, 5rem);
    grid-template-columns: auto auto;
}

@media (max-width: 399px) {
    .about-us-grid {
        grid-template-columns: auto;
        grid-row-gap: 10px;
    }
}

.about-us-left-column {
    font-size: clamp(2rem, 6vw, 5rem);
    font-weight: 900;
    color: var(--about-us-blue);
    margin-left: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.about-us-right-column {
    border-left: 6px solid var(--about-us-blue);
    max-width: 40ch;
    padding-left: 15px;
}

.about-us-pics {
    margin-top: 30px;
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
}

.about-us-pics img {
    align-self: center;
}

.about-us-pdf-link {
    margin-top: 25px;
    text-align: center;
}

.about-us-pdf-link a {
    color: rgb(0, 69, 125) !important;
}