#checkAvail{
    width: 100vw;
    max-width: 100%;
    background-color: #0f2453;
    box-sizing: border-box;
    padding: 16px;
    text-transform: uppercase;
}    
#checkAvail form{
    margin-bottom: 0 !important;
}
#checkAvail span{
    display: inline-block;
    width: auto;
}

#checkAvail form, #checkAvail span:nth-of-type(1){
    display: inline-block;
}

#checkAvail span:nth-of-type(1)
{
    margin-right: 10px;
}
#checkAvail input
{
    width: 15vw;
    margin-right: 15px;
}

#checkAvail select
{
    width: 10vw;
    margin-right: 15px;
}

#checkAvail select option{
    background-color: #043156bf;
    font-weight: bold;
    outline: 2px solid rgb(240, 232, 234);
}
#checkAvail i{
    color: #fff;
}

#checkAvail button{
    border: 2px solid #fff;
    background-color: transparent;
    color: #fafafa;
    border-radius: 0;
    font-weight: bolder;
    font-size: 0.8em;
    width: auto;
    min-width: auto;
}

#checkAvail button:hover{    
    background-color: #fafafa;
    color: #0d47a1;
}

#checkAvail p{
    color: #fff;
    /* margin: 10px auto 0; */
    font-family: 'Open Sans',sans-serif;
}


#checkAvailInfoBox{
    background-color: #0f2453;
    padding: 0.5in;
    display: none;
}

#checkAvailError{
    margin: 0 auto;
    background-color: #e4192a;
    display: none;
}
/* #checkAvailInfoBox > div, #checkAvailError>div{
    width: 80%;
    margin: 15px auto;
} */
#checkAvailInfoBox > div:nth-of-type(1){
    display: flex;
    justify-content: space-between;
}
#checkAvailInfoBox > div:nth-of-type(1) p{
    color: #eee;
    font-size: 1.1em;
}

#checkAvailInfoBox > div:nth-of-type(1) p {
    color: #eee;
    font-size: 1.1em;
}

#checkAvailInfoBox>div:nth-of-type(3){
    display: flex;
    justify-content: center;
    padding: 20px 0 0;
}

.bookBtn {
    background-color: #f5c430;
    color: #fff;
    text-transform: uppercase;
    font-size: 1em;
    border-radius: 0;
    border: none;
    width: max-content;
    padding: 8px 25px
}

.bookBtn:hover{
    background-color: goldenrod;
}

#checkAvailError > div{
    text-align: center;
    color: #eee;
    padding: 5px;
}

#checkAvailError  div p{
    margin: 0;
}

#checkAvailError  div p:nth-of-type(1){
    font-size: 1.1em;
}
#checkAvailError  div p:nth-of-type(2){
    font-size: 0.9em;
}

#availRooms p {
    color: #000;
    margin: 5px 10px;
}

#availRooms h3 {
    margin: 10px 0;
}
#availRooms{
    display: grid;
    grid-gap: 20px;
    grid-template-areas: "one two three four";
    grid-auto-columns: 1fr, 1fr, 1fr, 1fr;
    margin: 0 auto;
}
#availRooms > div{
    background-color: #eee;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 10px;
}
#stdRooms{
    grid-area: one;
}
#deluxRooms{
    grid-area: two;
}
#superDeluxRooms{
    grid-area: three;
}

#executiveRooms{
    grid-area: four;
}

#resetbtn{
    display: none;
}


#checkAvail input::placeholder{
    color: #000 !important;
}
#checkAvail input{
    line-height: inherit !important
}

.menuItem{
    position: relative;
}

#menuItem{
    position: absolute;
    top: 100%;
    z-index: 23;
    width: 200px;
    display: none;
    transition: all 1s ease-in-out;
    text-transform: uppercase;
}

.menuItem:hover #menuItem{
    display: block
}
#menuItem:hover{
    display: block;
}

@media screen and (max-width: 640px){
    #checkAvail form{
        margin-top: 10px;
        display: block;
    }

    #checkAvail input{
        width: 40%;
    }
    #checkbtn,#resetbtn{
        margin-top: 10px 
    }
    #availRooms{
        grid-template-areas: 
        "one"
        "two"
        "three";
    }
    #availRooms p{
        margin: 0;
        display: inline-block;
        width: 30%;
    }
    #availRooms h3{
        font-weight: 100;
        font-size: 18px;
    }
    #availRooms > div{
        padding: 10px 20px
    }
}

@media screen and (max-width: 400px){
    #checkAvail form{
        margin-top: 10px
    }
    #checkAvail form *{
        margin: 5px auto;
    }
    #checkAvail input{
        width: 60%;
        margin-right: 0;
    }
    #checkAvail span:nth-of-type(1){
        display: block
    }
    #availRooms p{
        width: 100%;
    }

}

@media screen and (min-width: 640px){
    #checkAvail{
        padding: 2.5em
    }
}


.amenitiesPopup{
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    height: 100vh;
    width: 100vw;
    background-color: #000000cf;
    z-index: 100;
    display: grid;
    justify-content: center;
    align-items: center;
    transition: all 0.5s ease-in-out;
    transform: scale(0)
}

.amenitiesPopupInfo{
    background-color: #fff;
    padding: 0.5in;
    border: 2px solid #112850;
    outline: 5px solid #FFF;
}

.amenitiesPopupInfo ul{
    list-style-type: circle;
    columns: 2;
    column-gap: 100px;
}

.amenitiesPopupInfo li{
    font-size: 1.2em
}

.amenitiesPopupInfo h3{
    text-align: left;
}

#rules{
    padding: 20vh 20vw;
}

#rules .amenitiesPopupInfo{
    width: 60vw;
    height: 60vh;
}

#rules li{
    font-size: 20px;
    line-height: 33px;
    letter-spacing: 0.5px;
}

#rules ul{
    columns: 1;
}

.amenitiesBtn{
    font-size: 1em;
    color: #fff;
    padding: 0.2em 1em;
    background: #0f2453d1;
    border: 1px solid #0f2453;
    width: fit-content;
    margin: 10px auto;
    box-shadow: 3px 4px 20px 0 rgba(46,61,73,.15);
}

.amenitiesBtn:hover{
    box-shadow: -1px 2px 8px 0 rgba(46,61,73,.2);
}