@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;900&display=swap');

html {
    scroll-behavior: smooth;
}

fieldset.MaD_radio-wrapper a.MaD-skip-to-results-link {
    text-decoration: none;
    font-family: inherit;
    line-height: 1;
    margin: 0 0 0 10px;
}

.sr-only {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

:root {
    --tileWidth: calc((100vw - (100vw - 100%)) * .2);
}

#scrollToTop {
    position: fixed;
    bottom: 5.3rem;
    right: 1rem;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    font-weight: bold;
    background-color: var(--color-rosette);
    color: #f7f5f36e;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    z-index: 1000;
    box-shadow: 3px 3px 6px 0px rgb(0 0 0 / 24%), inset -2px -3px 6px 0px rgb(0 0 0 / 26%), inset 1px 1px 6px 0px rgb(255 255 255 / 97%);
    transition: opacity 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

#scrollToTop:hover {
    background-color: var(--color-coast);
}

@media screen and (min-width: 280px) {

    .program-container img, legend {
        margin: 0;
        padding: 0;
    }

    .MaD-Search-Wrapper, .MaD-CBXs {
        border: none;
        margin: 0 auto;
        padding: 0 2rem;
    }

    .MaD_radio-wrapper {
        /* 'letter' buttons */
        border: none;
        padding: 0;
    }

    .program-container ul {
        margin: 0 0 0 -20px;
    }

    .program-container li {
        margin: 0 0 0 0;
    }

    main img {
        height: auto;
        max-width: 100%;
        -ms-interpolation-mode: bicubic;
    }

    .program-container.hide, .resultsMessage.hide, .CBXhide {
        display: none !important;
    }

    main {
        height: 100%;
        overflow: hidden;
    }
    /* .randomImage.imageXX and .noResultsImage [no results] background images 
        Moved into page layout to allow for T4 image management */

    /*#region Programs */
    #results {
        align-content: center;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        margin-bottom: 2rem;
        width: calc( 100vw - ( 100vw - 100% ) );
    }

    #results p#noResultsMessage {
        padding: 20px;
    }

    #results p#noResultsMessage, .program-container.randomImage.noResultsImage {
        align-items: center;
        background-color: var(--color-pillars);
        display: flex;
        margin: 0;
        max-width: 360px;
    }

    .program-container.randomImage {
        aspect-ratio: 1 / 1;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        border: none;
    }

    .program-container.randomImage.noResultsImage {
    }

    #results p.resultsMessage {
        margin: 0;
    }

    .college-of-business.hovered {
        border-color: #3c7295;
    }

    .college-of-education-and-health-professions.hovered {
        border-color: #0e423f;
    }

    .college-of-liberal-arts-and-social-sciences.hovered {
        border-color: #57c4c0;
    }

    .college-of-natural-and-applied-science.hovered {
        border-color: #8dc63f;
    }

    .program .program-college, .program h2.program-heading {
        font-size: 1.2rem;
        font-weight: 500;
        letter-spacing: 1px;
        line-height: 1;
        margin-bottom: 1rem;
        margin-top: 0;
        text-transform: capitalize;
    }

    .program {
        position: relative;
        padding: 10px;
        top: 200px;
        transition: top 0.3s ease-in-out;
    }

    .program h2.program-heading a {
        color: var(--color-rosette);
        text-decoration: none;
    }

    .program-container {
        border-color: transparent;
        border-style: solid;
        border-width: 5px;
        /*        float: left;
*/ height: 360px;
        max-height: 360px;
        max-width: 360px;
        min-width: 259.8px;
        overflow: hidden;
    }

    .program-container.hovered .program, .program:focus a.hovered {
        top: 0;
    }

    .program-container.hovered .program-college {
        color: var(--color-rosette);
    }

    .program-container.hovered .program-heading a {
        color: var(--color-coast);
        text-decoration: underline;
    }

    .program-container.hovered .program-summary {
        top: 0;
    }

    .program-container.hovered {
        background-color: #f7f5f36e;
        outline: none;
    }



    .program-container:not(.hide):not(.CBXhide):not(.randomImage).hovered {
        background-color: #f7f5f36e;
    }

    /*.program-container:not(.hide):not(.CBXhide):not(.randomImage):nth-of-type(odd) { border: 1px var(--color-1973) solid;
    }*/

    .program-summary {
        line-height: 1.5;
        margin: 0 0;
        position: relative;
        top: 100px;
        transition: top 0.4s ease-out;
        transition-delay: .1s;
    }
    /*#endregion */

    /*#region Letter Search */
    .letterSquare {
        align-items: center;
        background-color: var(--color-rosette);
        color: #f7f5f36e;
        cursor: pointer;
        display: flex;
        font-size: 35px;
        height: 60px;
        justify-content: center;
        margin: 1px;
        user-select: none;
        width: 60px;
    }

    .letterSquare:active, .letterSquare:focus {
        outline: 3px dotted #4778d9;
    }

    .letterSquare.selected {
        background-color: var(--color-spots);
    }

    .letterSquare:hover, .letterSquare:focus {
        outline: 2px solid blue;
        color: var(--color-spots);
    }

    .MaD_radio-wrapper a#letters-ship-to-results {
        align-content: center;
        align-self: flex-start;
        background-color: var(--color-rosette);
        border: 1px var(--color-rosette) solid;
        border-radius: 5px;
        color: var(--white);
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        font-size: 1rem;
        height: 2.5rem;
        justify-content: center;
        text-decoration: none;
        text-transform: uppercase;
        width: 12rem;
    }

    .MaD_radio-wrapper legend { font-size: 1.2rem; font-weight: 500; text-align: center; margin-bottom: 0.5em;width:100%; }

    .MaD_radio-wrapper input {
        opacity: 0;
    }

    .MaD_radio-wrapper label {
        align-items: inherit;
        color: var(--color-rosette);
        cursor: pointer;
        display: flex;
        font-size: 1.5rem;
        font-weight: 500;
        height: 40px;
        justify-content: inherit;
        line-height: 40px;
        margin: 1px;
        text-align: center;
        -webkit-align-items: inherit;
        -webkit-justify-content: inherit;
        width: 40px;
    }

    .MaD_radio-wrapper label:hover {
        border: 2px var(--color-rosette) solid;
        border-radius: 5px;
    }

    .MaD_radio-wrapper label#letters-clear-results.selected { background-color: var(--color-spots); font-weight: normal }

    .MaD_radio-wrapper label#letters-clear-results {
        background-color: var(--color-rosette);
        border: none;
        border-radius: 5px;
        color: var(--white);
        flex-direction: row;
        flex-wrap: wrap;
        font-size: 1rem;
        padding: 0 1rem;
        text-transform: uppercase;
        width: fit-content;
    }

    .MaD_radio-wrapper input:checked + label {
        border: 2px var(--color-rosette) solid;
        border-radius: 5px;
    }

    .MaD_radio-wrapper input:checked + label#letters-clear-results {
        background-color: var(--color-spots);
        color: var(--white);
    }

    .MaD_radio-wrapper input:disabled + label {
        display: none;
    }

    .MaD_radio-wrapper input:not(.Clear-Radios):disabled {
        display: none;
    }

    .MaD_radio-wrapper input:focus-visible + label, .MaD_radio-wrapper input:active + label {
        outline-width: 2px;
        outline-style: solid;
        outline-color: var(--color-rosette);
        outline-offset: 0;
    }
    /*#endregion */

    /*#region CheckBox Search */
    .MaD-CBXs {
        align-items: flex-start;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        max-width: 1714px;
    }

    .MaD-CBXs .checkbox-item {
        align-items: center;
        display: flex;
        margin-bottom: 15px;
    }

    .MaD-CBXs .checkbox-label {
        display: inline-block;
        line-height: 1.3;
        margin-left: 41px;
        text-indent: -41px;
    }

    .MaD-CBXs .MaD-CBX-Col {
        align-items: flex-start;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        margin-bottom: 20px;
    }

    .MaD-CBXs .MaD-CBX-Col-Heading {
        color: var(--color-rosette);
        font-size: 1.5rem;
        font-weight: 500;
        line-height: 1;
        margin-bottom: 10px;
        margin-right: 20px;
    }

    .MaD-CBXs .MaD-CBX-group {
        font-size: 1.2rem;
    }

    .MaD-CBXs input[type="checkbox"] {
        height: 25px;
        margin: 0;
        padding: 0;
        position: relative;
        top: 4px;
        width: 30px;
    }
    /*#endregion */
}

/*@media screen and (min-width: 769px) and (max-width: 1023px) {
    .program-container {
        min-width: 340px;
    }

    .program-container, .program-container:not(.hide):not(.CBXhide):not(.randomImage):nth-of-type(odd) {
        background-color: unset;
    }

    .program-container:nth-child(4n+0),
    .program-container:nth-child(4n+3) {
        background-color: var(--GrayBG);
    }

    .program-container:nth-child(4n+1),
    .program-container:nth-child(4n+2) {
        background-color: #f7f5f36e;
    }

    .program .program-college, .program h2.program-heading {
        text-transform: capitalize;
        font-weight: 500;
        margin-top: 0;
        margin-bottom: 1rem;
        letter-spacing: 1px;
        line-height: 1;
    }
}

@media screen and (min-width: 1024px) and (max-width: 1699px) {
    .program-container {
        min-width: 370px;
    }

    .program-container,
    .program-container:not(.hide):not(.CBXhide):not(.randomImage):nth-of-type(odd) {
        background-color: unset;
    }

    .program-container:nth-child(8n+0),
    .program-container:nth-child(8n+3),
    .program-container:nth-child(8n+5),
    .program-container:nth-child(8n+6),
    .program-container:nth-child(8n+8) {
        background-color: var(--color-1973);
    }

    .program-container:nth-child(8n+1),
    .program-container:nth-child(8n+2),
    .program-container:nth-child(8n+4),
    .program-container:nth-child(8n+7) {
        background-color: var(--color-pillars);
    }

    .program-summary {
        line-height: 1.3;
        font-size: 0.9em;
    }

    .program .program-college, .program h2.program-heading {
        font-weight: 500;
        font-size: 1rem;
        margin-bottom: 1rem;
    }
}*/

@media screen and (min-width: 769px) and (max-width: 1023px) {
    /* Layout & Typography Only */
    .program-container {
        min-width: 340px;
    }

    .program .program-college,
    .program h2.program-heading {
        text-transform: capitalize;
        font-weight: 500;
        margin-top: 0;
        margin-bottom: 1rem;
        letter-spacing: 1px;
        line-height: 1;
    }
}

@media screen and (min-width: 1024px) and (max-width: 1699px) {
    /* Layout & Typography Only */
    .program .program-college,
    .program h2.program-heading {
        font-weight: 500;
        font-size: 1rem;
        margin-bottom: 1rem;
    }

    /*    .program-container {
        min-width: 370px;
    }*/

    .program-summary {
        line-height: 1.3;
        font-size: 0.9em;
    }
}

.program-container {
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
    margin: 8px;
}

.program-container.BGC1 {
    background-color: var(--color-1973);
}

.program-container.BGC2 {
    background-color: var(--platinum-light);
}


@media only screen and (max-width : 767px) {
    .MaD_radio-wrapper {
        display: none;
    }

    .MaD-CBXs {
        justify-content: flex-start;
    }

    .MaD_ClearSearch, .MaD-skip-to-results-link {
        max-width: 300px;
        margin: initial;
    }

    .MaD-CBXs .MaD-CBX-Col-Heading {
       
        margin-bottom: 10px;
        margin-right: 20px;
    }

    .program-summary {
        position: relative;
        top: 100px;
        transition: top 0.4s ease-out;
        transition-delay: .1s;
        line-height: 1.5;
    }

    .program .program-college, .program h2.program-heading {
        margin-bottom: 0.5rem;
    }

    .program-container {
    }
}

@media only screen and (min-width : 768px) {
    .MaD_radio-wrapper {
        position: relative;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        flex-direction: row;
        margin: 0 auto 4rem auto;
        justify-content: center;
        max-width: 1714px;
    }
}

@media screen and (min-width: 768px) and (max-width: 1699px) {
    .MaD-CBXs .MaD-CBX-Col-Heading {
        
    }

    .MaD_radio-wrapper legend {
    }
}

@media only screen and (min-width : 375px) and (max-width : 667px) and (orientation : landscape) {
    .MaD-CBXs .MaD-CBX-Col-Heading {
        font-size: 2rem;
        margin-bottom: 10px;
        margin-right: 20px;
    }

    .MaD-Search-Wrapper, .MaD-CBXs {
        border: none;
        margin: 0 auto;
        padding: 0 2rem;
    }

    .program-container {
        width: 100%;
        max-height: 57vh;
        min-height: calc(100vh - 72px);
        max-width: 100%;
    }

    .MaD-CBXs .checkbox-label {
        display: inline-block;
        line-height: 1.3;
        margin-left: 41px;
        text-indent: -41px;
    }

    section.grey.container.padding {
        background-size: unset !important;
    }

    section.grey.container.padding p {
        padding: 0;
        margin: initial;
        line-height: 1.5;
    }

    .program {
        position: relative;
        padding: 10px;
        top: 100px;
        transition: top 0.3s ease-in-out;
    }

    .program-summary p {
        margin: 0 0;
    }

    .program-container.randomImage {
        background-size: contain;
    }
}

@media only screen and (min-width : 280px) and (max-width : 667px) and (orientation : portrait) {
    .MaD-CBXs .MaD-CBX-Col-Heading {
        
        margin-bottom: 10px;
        margin-right: 0;
    }

    .MaD-Search-Wrapper, .MaD-CBXs {
        border: none;
        margin: 0 auto;
        padding: 0 1rem;
    }

    .program-container {
        width: 100%;
    }

    .MaD-CBXs .checkbox-label {
        display: inline-block;
        line-height: 1.3;
        margin-left: 41px;
        text-indent: -41px;
    }

    section.grey.container.padding {
        padding: 1rem;
    }

    section.grey.container.padding p {
        padding: 0;
        margin: initial;
        line-height: 1.5;
        font-size: 1rem;
    }

    .program {
    }

    .program-container.randomImage {
        max-height: 100vw;
    }

    .program-summary {
        line-height: 1.5;
    }
}

@media only screen and (min-width : 360px) and (max-width : 780px) and (orientation : landscape) {
    .MaD-CBXs .MaD-CBX-Col-Heading {
        font-size: 2rem;
        margin-bottom: 10px;
        margin-right: 20px;
    }

    .MaD-Search-Wrapper, .MaD-CBXs {
        border: none;
        margin: 0 auto;
        padding: 0 2rem;
    }

    .program-container {
        width: 100%;
        max-height: 57vh;
        min-height: calc(100vh - 72px);
        max-width: 100%;
    }

    .MaD-CBXs .checkbox-label {
        display: inline-block;
        line-height: 1.3;
        margin-left: 41px;
        text-indent: -41px;
    }

    section.grey.container.padding {
        background-size: unset !important;
    }

    section.grey.container.padding p {
        padding: 0;
        margin: initial;
        line-height: 1.5;
    }

    .program {
        position: relative;
        padding: 10px;
        top: 100px;
        transition: top 0.3s ease-in-out;
    }

    .program-summary p {
        margin: 0 0;
    }

    .program-container.randomImage {
        background-size: contain;
    }

    .program h2.program-heading a {
        text-decoration: none;
        color: var(--color-rosette);
        font-size: 1rem;
    }

    .program .program-college, .program h2.program-heading {
        text-transform: capitalize;
        font-weight: 500;
        margin-top: 0;
        margin-bottom: 0.5rem;
        letter-spacing: 1px;
        line-height: 1;
    }
}

@media only screen and (min-width : 360px) and (max-width : 780px) and (orientation : portrait) {
    .MaD-CBXs .MaD-CBX-Col-Heading {
        margin-bottom: 10px;
        margin-right: 0;
    }

    .MaD-Search-Wrapper, .MaD-CBXs {
        border: none;
        margin: 0 auto;
    }

    .program-container {
        min-width: 50vw;
    }

    .MaD-CBXs .checkbox-label {
        display: inline-block;
        line-height: 1.3;
        margin-left: 41px;
        text-indent: -41px;
    }

    section.grey.container.padding {
        padding: 1rem;
    }

    section.grey.container.padding p {
        padding: 0;
        margin: initial;
        line-height: 1.5;
        font-size: 1rem;
    }

    .program {
    }

    .program-container.randomImage {
        background-size: cover;
        max-height: 100vw;
    }

    .program-summary {
        position: relative;
        font-size: 1rem;
        top: 100px;
        transition: top 0.4s ease-out;
        transition-delay: .1s;
        line-height: 1.5;
        margin: 0 0;
    }

    .program h2.program-heading a {
        text-decoration: none;
        color: var(--color-rosette);
    }

    .program .program-college, .program h2.program-heading {
        font-size: 1.2rem;
    }
}

@media only screen and (max-width : 667px) and (orientaion: lanscape) {
    .MaD_radio-wrapper {
        display: nome !important;
    }
}


.MaD_radio-wrapper label:focus-within {
    outline: 2px dashed #005fcc;
    outline-offset: 4px;
}

input[type="radio"].sr-only:checked + label {
    background-color: #AE0000;
    color: #fff;
    font-weight: bold;
    border-radius: 4px;
    padding: 0.25em 0.5em;
}

.MaD_radio-wrapper label.selected {
    background-color: #AE0000;
    color: #fff;
    font-weight: bold;
}

/*.program-container.randomImage {
    background-size: cover;
    transition: background-size 0.3s ease;
}

.program-container.randomImage:hover {
    background-size: contain;
}*/