@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

.studyRoomSearch__error {
    color: red;
}

#roomSearch__container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

#roomSearch__container .isClosed {
    display: none !important;
}

.wysiwyg-content {
    position: relative;
    top: -12px;
}

.studyRoomSearch__header {
    display: flex;
    width: 1440px;
    padding: 48px 100px;
    flex-direction: column;
    align-items: flex-start;
    gap: 31px;
    width: 100%;
    background-color: #E6E6E6;
    flex-direction: column;
    justify-content: flex-start;
}

.studyRoomSearch__headerText h1 {
    color: #0A162F;
    font-family: "PT Serif";
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    padding: 0px;
    margin: 0px;
}

.studyRoomSearch__headerContent {
    display: flex;
    flex-direction: column;
    gap: 31px;
}

.studyRoomSearch__headerText {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.studyRoomSearch__helpText {
    color: #0A162F;
    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.studyRoomSearch__helpText a {
    color: #256EC1;
    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.studyRoomSearch__resultsInitContainer,
.studyRoomSearch__resultsLoadingContainer,
.studyRoomSearch__noRoomsContainer,
.studyRoomSearch__resultsContainer {
    display: flex;
    min-height: 400px;
    align-self: stretch;
    align-items: center;
}

.studyRoomSearch__resultsInitContainer,
.studyRoomSearch__resultsLoadingContainer {
    flex-direction: column;
    gap: 24px;
    justify-content: center;
}

.studyRoomSearch__noRoomsContainer {
    flex-direction: column;
    padding: 48px 100px;
    gap: 32px;
}

.studyRoomSearch__pickNewSearchContainer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 24px;
}

.studyRoomSearch__pickNewSearchContainer p {
    font-size: 16px;
    line-height: 1;
}

.studyRoomSearch__resultsContainer {
    flex-wrap: wrap;
    justify-content: flex-start;
    padding: 48px 100px;
    gap: 24px;
    align-content: center;
}

.studyRoomSearch__resultsNum {
    width: 100%;
    font-size: 20px;
}

.studyRoomSearch__resultsContainer p.searchText {
    width: 100%;
    text-align: center;
    padding-top: 16px;
}

.studyRoomSearch__card {
    display: flex;
    width: 228.8px;
    min-width: 200px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 2px;
    border: 1px solid #E1E1E2;
    background: #FFF;
}

.studyRoomSearch__card img {
    width: 228.8px;
    height: 180px;
}

.studyRoomSearch__cardContent {
    display: flex;
    padding: 16px 12px 12px 12px;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;
}

.studyRoomSearch__cardDetails {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;
    justify-content: space-between;
}

.studyRoomSearch__card .title {
    font-weight: 700;
}

.studyRoomSearch__cardDetailsCapacity {
    color: #000A;
}

.studyRoomSearch__reservationButton {
    display: flex;
    padding: 16px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    border: 1px solid #C6C7C9;
    color: #256EC1;
    font-size: 14px;
    font-weight: 500;
    background-color: transparent;
    cursor: pointer;
}

.studyRoomSearch__reservationButton:hover {
    text-decoration: underline;
    font-weight: 700;
    border: 1px solid #256EC1;
}

.studyRoomSearch__formTag {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
}

.studyRoomSearch__item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: relative;
}

.studyRoomSearch__item label,
.studyRoomSearch__itemLabel {
    color: #000;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-left: 1px;
}

.studyRoomSearch__item input,
.studyRoomSearch__item select {
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 2px;
    height: 48px;
}

/* We can use this to hide the input incon if we want to wrap the input in a div and add our own custom icon, but it does git rid of the functionality of the clock icon */
/* input[type="time"]::-webkit-calendar-picker-indicator {
    display: none;
} */

.studyRoomSearch__item select {
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    pointer-events: auto;
    background-color: white;
    width: 100%;
    min-width: 70px;
}

select.studyRoomSearch__length {
    min-width: 165px;
}

.studyRoomSearch__item select::-ms-expand {
    display: none;
}

.submitRoomSearch__btn {
    background-color: #256EC1;
    color: white;
    padding: 16px 20px;
    border: 0;
    cursor: pointer;
    align-self: flex-end;
    margin-top: 0px;
    border-radius: 2px;
}

.submitRoomSearch__btn:hover {
    background-color: #0056b3;
}

.studyRoomSelect__wrap {
    pointer-events: none;
    display: flex;
    position: relative;
}

.studyRoomSelect__wrap svg {
    position: absolute;
    right: .5em;
    top: 1.3em;
    width: 24px;
    height: 24px;
}

.studyRoomSearch__item input[type='date'],
.studyRoomSearch__numPeople {
    min-width: 160px;
}

.studyRoomSearch__item select.dateSelect {
    min-width: 245px;
}

.altOptionLinkBtn {
    color: #256EC1;
    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-decoration-line: underline;
    background-color: unset;
    cursor: pointer;
}

.altOptionLinkBtn:hover {
    font-weight: 600;
}
.gsr__reserveEventNameInst {
    font-size: 14px;
}
.gsr__reserveLoadingDots {
    bottom: 15px;
}
.gsr__success {
    padding: 2rem;
}
.gsr__successIcon {
    width: 100px;
    height: auto;
}
.gsr__successHeading {
    font-size: 32px;
    font-family: 'PT Serif', 'serif';
    padding-bottom: 1.5rem;
}
.gsr__successCloseBtn {
    width: 100%;
    margin-top: 5rem;
}

@media (max-width: 768px) {
    .studyRoomSearch__item {
        flex: 1 1 100%;
        margin-bottom: 10px;
    }

    .submitRoomSearch__btn {
        align-self: center;
        margin-top: 20px;
    }

    .studyRoomSearch__header {
        padding: 40px 16px;
    }

    .studyRoomSearch__cardContent {
        min-width: 200px;
    }

    .studyRoomSearch__card img {
        height: auto;
        width: 50%;
    }
    
    .studyRoomSearch__resultsInitContainer {
        padding: 0px 16px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 24px;
        align-self: stretch;
    }

    .studyRoomSearch__resultsContainer {
        padding: 48px 16px;
    }
    .studyRoomSearch__card {
        flex-direction: row;
        width: unset;
    }
    .studyRoomSearch__cardDetails {
        flex-direction: column;
    }
}

@media (max-width: 400px) {
    .studyRoomSearch__cardContent {
        min-width: unset;
    }
}

/* Room Count Styles */
.studyRoom__page {
    background-color: #0A162F;
    height: 100vh;
    width: 100vw;
    color: white;
    font-family: 'PT Serif', sans-serif;
}

.studyRoom__pageContent {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
    align-items: center;
    height: 100vh;
    padding-top: 6rem;
    padding-bottom: 6rem;
}

.studyRoom__header {
    font-weight: 700;
    font-size: 60px;
}

.studyRoom__countBox {
    height: 300px;
    width: 320px;
    border-radius: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.studyRoom__countBox--success {
    background: #087F29;
}

.studyRoom__countBox--warning {
    background: #B26000;
}

.studyRoom__countBox--error {
    background: #A02424;
}

.studyRoom__count {
    font-family: 'Roboto', sans-serif;
    font-size: 200px;
    font-weight: 700;
}

.studyRoom__bottomText {
    font-size: 45px;
    font-weight: 700;
}

.studyRoom__logo {
    width: 420px;
}

@media (min-width: 2000px) {
    .studyRoom__header {
        font-size: 100px;
    }
    .studyRoom__countBox {
        height: 550px;
        width: 550px;
    }
    .studyRoom__count {
        font-size: 300px;
    }
    .studyRoom__bottomText {
        font-size: 75px;
    }
    .studyRoom__logo {
        width: 600px;
    }
}

/* Scaled Styles */
.jfl25live_countScaledStyles .studyRoom__pageContent {
    justify-content: space-evenly;
    padding: 20px 0px;
    gap: 10px;
}

.jfl25live_countScaledStyles .studyRoom__header {
    font-size: 5rem;
}

.jfl25live_countScaledStyles .studyRoom__countBox {
    max-height: 300px;
    max-width: 320px;
    height: 100%;
    width: 100%;
}

.jfl25live_countScaledStyles .studyRoom__count {
    font-size: 20rem;
}

.jfl25live_countScaledStyles .studyRoom__bottomText {
    font-size: 4rem;
}

.jfl25live_countScaledStyles .studyRoom__logo {
    width: 100%;
    max-width: 420px;
}

@media(max-height: 550px) {
    .jfl25live_countScaledStyles .studyRoom__count {
        font-size: 18rem;
    }
    .jfl25live_countScaledStyles .studyRoom__countBox {
        max-height: 175px;
        max-width: 300px;
    }
    .jfl25live_countScaledStyles .studyRoom__logo {
        width: 100%;
        max-width: 350px;
    }
}

@media(max-width: 650px) {
    .jfl25live_countScaledStyles .studyRoom__logo {
        width: 100%;
        max-width: 400px;
    }
}

@media(max-width: 600px) {
    .jfl25live_countScaledStyles .studyRoom__page {
        margin-top: -70px;
    }
    .jfl25live_countScaledStyles .studyRoom__count {
        font-size: 18rem;
    }
    .jfl25live_countScaledStyles .studyRoom__countBox {
        max-height: 175px;
        max-width: 300px;
    }
    .jfl25live_countScaledStyles .studyRoom__logo {
        width: 100%;
        max-width: 350px;
    }
}