html {
    width: 100%;
    height: 100%;
}

body {
    padding-top: 50px;
    padding-bottom: 20px;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    background: rgb(255,255,255);
    background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(254,254,254,1) 43%, rgba(227,227,227,1) 100%);
}

/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Carousel */
.carousel-caption p {
    font-size: 20px;
    line-height: 1.4;
}

/* Make .svg files in the carousel display properly in older browsers */
.carousel-inner .item img[src$=".svg"] {
    width: 100%;
}

/* QR code generator */
#qrCode {
    margin: 15px;
}


ul {
    padding: 0;
}


#HotelSelectorFormCh {
    margin-top: 30px;
}



.top-Img {
    width: 400px;
    height: 200px;
    margin: auto;
}







/* Hide/rearrange for smaller screens */
@media screen and (max-width: 767px) {
    /* Hide captions */
    .carousel-caption {
        display: none;
    }
}


.icnsCnt {
    width: 70%;
    margin: 30px 0 0 15%;
}


    .icnsCnt img {
        width: 70px;
        margin-top: 20px;
    }



.hmIcn {
    float: left;
    width: 110px;
    height: 110px;
    border-radius: 110px;
    background-color: #FFFFFF;
    margin: 10px 0 0 40px;
    box-shadow: 0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19) !important;
}



#SearchForHotel {
    float: left;
    width: 85%;
    height: 34px;
    line-height: 34px;
    border-radius: 5px;
    padding: 3px;
    background-color: #fff9e2;
    border: 1px dotted #dedede;
    box-shadow: 0 5px 8px 0 rgba(0,0,0,0.2),0 3px 10px 0 rgba(0,0,0,0.19) !important;
}

#btnLocateHotel {
    float: left;
    width: 12%;
    height: 36px;
    line-height: 24px;
    margin: 0 0 0 10px;
    border-radius: 5px;
    padding: 3px;
    background-color: #757575;
    border: 1px dotted #dedede;
    color: #FFFFFF;
    box-shadow: 0 5px 8px 0 rgba(0,0,0,0.2),0 3px 10px 0 rgba(0,0,0,0.19) !important;
}



@media screen and (max-width: 1200px) {
    .icnsCnt {
        width: 80%;
        margin: 30px 0 0 10%;
    }

    .hmIcn {
        width: 110px;
        height: 110px;
        border-radius: 110px;
        margin: 10px 0 0 25px;
    }

    .icnsCnt img {
        width: 65%;
        margin-top: 17%;
    }

    #HotelSelectorFormCh {
        margin-top: 80px;
    }
}




@media screen and (max-width: 1000px) {
    .icnsCnt {
        width: 80%;
        margin: 30px 0 0 10%;
    }

    .hmIcn {
        width: 80px;
        height: 80px;
        border-radius: 80px;
        margin: 10px 0 0 25px;
    }

    .icnsCnt img {
        width: 65%;
        margin-top: 17%;
    }

    #HotelSelectorFormCh {
        margin-top: 80px;
    }
}



@media screen and (max-width: 775px) {
    .icnsCnt {
        width: 84%;
        margin: 30px 0 0 8%;
    }

    .hmIcn {
        width: 60px;
        height: 60px;
        border-radius: 60px;
        margin: 10px 0 0 23px;
    }

    .icnsCnt img {
        width: 65%;
        margin-top: 17%;
    }

    #HotelSelectorFormCh {
        margin-top: 80px;
    }
}




@media screen and (max-width: 550px) {
    .icnsCnt {
        width: 90%;
        margin: 30px 0 0 5%;
    }

    .hmIcn {
        width: 50px;
        height: 50px;
        border-radius: 50px;
        margin: 10px 0 0 22px;
    }

    .hmIcn1 {
        margin-left: 28px;
    }

    .icnsCnt img {
        width: 65%;
        margin-top: 17%;
    }

    #HotelSelectorFormCh {
        margin-top: 80px;
    }
}




@media screen and (max-width: 490px) {
    .icnsCnt {
        width: 90%;
        margin: 30px 0 0 5%;
    }

    .hmIcn {
        width: 50px;
        height: 50px;
        border-radius: 50px;
        margin: 10px 0 0 15px;
    }

    .hmIcn1 {
        margin-left: 28px;
    }

    .icnsCnt img {
        width: 65%;
        margin-top: 17%;
    }

    #HotelSelectorFormCh {
        margin-top: 80px;
    }
}




@media screen and (max-width: 440px) {
    .icnsCnt {
        width: 94%;
        margin: 30px 0 0 3%;
    }

    .hmIcn {
        width: 50px;
        height: 50px;
        border-radius: 50px;
        margin: 10px 0 0 15px;
    }

    .hmIcn1 {
        margin-left: 28px;
    }

    .icnsCnt img {
        width: 65%;
        margin-top: 17%;
    }

    #HotelSelectorFormCh {
        margin-top: 80px;
    }
}



@media screen and (max-width: 390px) {
    .icnsCnt {
        width: 96%;
        margin: 30px 0 0 2%;
    }

    .hmIcn {
        width: 43px;
        height: 43px;
        border-radius: 50px;
        margin: 10px 0 0 18px;
    }

    .hmIcn1 {
        margin-left: 10px;
    }

    .icnsCnt img {
        width: 65%;
        margin-top: 17%;
    }

    #SearchForHotel {
        width: 71%;
    }

    #btnLocateHotel {
        width: 25%;
    }

    #HotelSelectorFormCh {
        margin-top: 80px;
    }
}


@media screen and (max-width: 340px) {
    .icnsCnt {
        width: 100%;
        margin: 30px 0 0 0;
    }

    .hmIcn {
        width: 40px;
        height: 40px;
        border-radius: 50px;
        margin: 10px 0 0 10px;
    }



    .icnsCnt {
        width: 90%;
        margin-left: 5%;
    }

        .icnsCnt img {
            width: 65%;
            margin-top: 17%;
        }

    #SearchForHotel {
        width: 70%;
    }

    #btnLocateHotel {
        width: 25%;
    }

    #HotelSelectorFormCh {
        margin-top: 80px;
    }

    .hot-sel-col {
        display: none;
    }

    .hot-main-col {
        width: 100%;
    }

    .container {
        margin: 0;
        padding: 0;
        padding-left: 8px;
        width: 100%;
    }

    .enterHotelCode {
        font-size: 25px;
    }
}







input[type='text'] {
    height: 26px;
}


#MainFormCh {
    margin-top: 30px;
    background-color: #FFFFFF;
    border: 1px dotted #BCBCBC;
    padding: 40px;
    box-shadow: 0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19) !important;
}

#StartOverBtn {
    float: left;
    margin: -20px 0 0 -20px;
    padding: 5px 25px 5px 25px;
    background-color: #787878;
    color: #FFFFFF;
    border: none;
    border-radius: 3px;
}




.msLogo {
    float: left;
    margin: 2% 0 0 30%;
    width: 40%;
}

.hotel-icn-ch {
    float: left;
    width: 7%;
    margin: 0 0 0 2%;
    text-align: center;
}

.hotel-name-ch {
    float: left;
    width: 60%;
    line-height: 50px;
    margin: 0 0 0 2%;
    padding-left: 10px;
    padding-top: 5px;
}

.hotel-disclaimer {
    border-radius: 5px;
    border-style: solid;
    border-width: 1px;
    border-color: darkgray;
    padding: 10px;
    margin-top: 20px;
    text-align: justify;
    text-justify: inter-word;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


.cnt-lmt {
    float: left;
    width: 60%;
}


.top-Img {
    height: 180px;
    background-color: #FFF !important;
    box-shadow: 0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19) !important;
    border-radius: 3px;
    border: 14px solid #FFF;
    margin: auto;
}



@media screen and (max-width: 1200px) {
    .cnt-lmt {
        width: 80%;
    }
}

@media screen and (max-width: 980px) {

    .cnt-lmt {
        width: 60%;
        margin-left: 17%;
    }
}




@media screen and (max-width: 800px) {
    .msLogo {
        float: left;
        margin: 7% 0 0 15%;
        width: 70%;
    }

    .hotel-icn-ch {
        float: left;
        width: 13%;
        margin: 0 0 0 2%;
    }


    #MainFormCh {
        padding: 20px;
    }

    #StartOverBtn {
        margin: -10px 0 0 -10px;
    }

    .cnt-lmt {
        width: 70%;
        margin-left: 5%;
    }
}


@media screen and (max-width: 560px) {

    .cnt-lmt {
        width: 100%;
        margin-left: 0%;
    }
}


@media screen and (max-width: 500px) {

    .msLogo {
        float: left;
        margin: 12% 0 0 5%;
        width: 90%;
    }

    .hotel-icn-ch {
        float: left;
        width: 30%;
        margin: 0 0 0 0;
    }


    .hotel-name-ch {
        line-height: 23px;
        padding-left: 10px;
    }

    .cnt-lmt {
        width: 100%;
        margin-left: 0%;
    }

    .top-Img {
        width: 90%;
        height: 200px;
        margin: 5% 5%;
    }
}



@media screen and (max-with: 400px) {
    .top-Img {
        width: 80%;
        height: 170px;
        margin: 5% 10%;
    }
}







/* ---- HOMEPAGE-----*/
.lostReqItem {
    width: 100%;
    line-height: 24px;
    text-align: left;
    margin: 3px 1px 1px 1px;
}




textarea {
    outline: none;
    border: 0.5px solid #aeaeae;
    color: #094b83;
    padding: 0 5px 0 5px;
}

    textarea:focus, input:focus {
        outline: none;
        border: 0.5px solid #aeaeae;
        color: #094b83;
        padding: 0 5px 0 5px;
    }

input[type=text] {
    color: #094b83;
    border: 0.5px solid #aeaeae;
    padding: 0 5px 0 5px;
}




.lostReqItem span {
    color: #CC0000;
}

.ui-autocomplete {
    max-height: 210px;
    overflow: hidden;
}

/*----HOME PAGE-----*/









/*--------POPUP ITEMS----------*/

.popup-item {
    float: left;
    width: 100%;
    height: 27px;
    line-height: 27px;
    cursor: pointer;
    border-bottom: 1px solid #f2f2f2;
    padding: 1px 1px 1px 10px;
}

/*--------POPUP ITEMS----------*/


div.ui-datepicker {
    font-size: 12px;
}

.lostReqItem > .iti {
    float: right;
}

.payment-method-div {
    color: rgba(0, 0, 0, 0.55);
    background: rgba(0, 0, 0, 0.1);
    height: 1px;
    width: 100%;
    margin: 30px 0;
    font-size: 12px;
    line-height: 20px;
    text-transform: uppercase;
    position: relative;
}

.payment-method-span {
    position: absolute;
    top: -10px;
    background: #ffffff;
    padding: 0 10px;
    left: calc(50% - 1em - 5px);
}

.apple-pay-button {
    height: 48px;
    width: 100%;
    display: inline-block;
    -webkit-appearance: -apple-pay-button;
    -apple-pay-button-type: plain;
    -apple-pay-button-style: black;
}

.square-payment {
    text-align: center;
}

#error-message {
    color: red;
}

.address-input {
    border: 0.5px solid #aeaeae;
    padding: 0 5px 0 5px;
}

/* ---------- Item management ---------- */

.item-management-text {
    vertical-align: central;
    /* This prevents the selection of the text with the mouse. */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.item-management-container {
    border-radius: 10px;
    border-style: solid;
    border-width: 1px;
    border-color: darkgray;
    padding: 10px;
    background-color: white;
    overflow: auto;
}

.item-category {
    display: flex;
    flex-direction: row;
    padding-left: 10px;
    padding-top: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
    cursor: pointer;
    background-color: #FFFFFF;
}

    .item-category:hover {
        background-color: #E8E8E8;
    }

.item-management-add-button {
    border-radius: 5px;
    border-style: solid;
    border-width: 1px;
    border-color: darkgray;
    background-color: #44A4F0;
    color: #FFFFFF;
    padding: 5px;
    /* This prevents the selection of the text with the mouse. */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    .item-management-add-button:disabled {
        background-color: #F9F9F9;
        color: #AFAFAF;
    }

.item-management-checkbox {
    width: 24px;
    height: 24px;
    border-width: 1px;
    border-color: darkgray
}

.item-management-error-text {
    vertical-align: central;
    height: 100%;
    color: #CA1426;
    display: flex;
    align-items: center;
}

.item-disclaimer {
    display: flex;
    flex-direction: row;
    padding-left: 10px;
    padding-top: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
}