﻿html{
    width:100%;
    height:100%;
}

body {
    padding-top: 50px;
    padding-bottom: 20px;
    font-family: 'Roboto', sans-serif;


    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;
}



.lostReqItem {
    float: left;
    margin-top: 20px;
}




.g-recaptcha {
    float: left;
    margin: 20px 0 0 10px;
}


.privacyCH {
    float:right; 
    margin:60px 20px 0 20px;
}


#FormSubmitBtn {
    float: right;
    height: 30px;
    line-height: 25px;
    margin: 55px 0 0 10px;
    padding: 5px 55px 5px 55px;
    background-color: #094b83;
    color: #FFFFFF;
    border: none;
    border-radius: 3px;
}


#FormCancelBtn {
    float: right;
    height:30px;
    line-height:25px;
    margin: 55px 10px 0 10px;
    padding: 5px 55px 5px 55px;
    background-color: #878787;
    color: #FFFFFF;
    border: none;
    border-radius: 3px;
}


#FormPreSubmitBtn {
    float: right;
    margin: 55px 10px 0 10px;
    padding: 5px 55px 5px 55px;
    background-color: #094b83;
    color: #FFFFFF;
    border: none;
    border-radius: 3px;
}



#ClearSigBtn {
    float:right; 
    height:25px; 
    line-height:20px; 
    width:70px;
}



@media screen and (max-width:400px)
{
    .main-cont-ch {
        padding: 0px;
    }
}




/*
.container {
    width: 80%;
    margin-left:10%;
}

@media (min-width: 1200px) {
    .container {
        width: 1170px;
    }
}*/
/* 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;
}

/* Hide/rearrange for smaller screens */
@media screen and (max-width: 767px) {
    /* Hide captions */
    .carousel-caption {
        display: none;
    }
}


input[type='text']
{
    height:26px;
}


#MainFormCh {
    width:80%;
    margin-left:10%;
    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;
}




.cnt-lmt {
    float: left;
    width: 80%;
}


.top-Img {
    width:400px;
    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;
}



@media screen and (max-width: 1200px) {
    .cnt-lmt {
        width: 80%;
    }
}

@media screen and (max-width: 980px) {

    .cnt-lmt {
        width: 80%;
        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) {

    #MainFormCh
    {
        width:100%;
        margin-left:0;
    }


    .cnt-lmt {
        width: 100%;
        margin-left: 0%;
    }

    .top-Img {
        width: 80%;
        height: 180px;
        margin: 5% 5%;
    }



    #FormSubmitBtn {
        width: 40%;
        margin: 20px 5px 0 5px;
        padding: 3px;
    }

    #FormCancelBtn {
        width: 40%;
        margin: 20px 5px 0 5px;
        padding: 3px;
    }



    .lostReqItem
    {
        margin:80px 0 0 0;
    }




}


@media screen and (max-width: 500px) {

    #MainFormCh {
        width: 100%;
        margin-left: 0;
    }

    .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:80%;
        height:180px;
        margin:5% 5%;
    }

    .g-recaptcha
    {
        margin:0 0 0 -10px;
    }

    .privacyCH
    {
        float:left;
        width:45%;
        margin:30px 0 0 0;
        padding:0;
    }


    #FormSubmitBtn {
        width: 40%;
        margin: 20px 0 0 0;
        padding: 0;
    }

    .lostReqItem {
        margin: 80px 0 0 0;
    }
}






/* ---- HOMEPAGE-----*/
.lostReqItem {
    float: left;
    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;
}




.verifCodeInput {
    float:right; 
    width:130px; 
    background-color:#FCF088;
}

#ResendCodeBtn {
    float:right; height:25px; line-height:20px; width:85px; padding:3px 0;
}


.input-maxl {
    width: 280px;
}


@media screen and (max-width:500px){

    .input-maxl {
        width:215px;
    }

    .verifCodeInput {
        width: 100px;
    }

}




.loading-box-cont 
{
    margin-top:250px;
}


.btnQ {
    background-color: #CDCDCD;
    padding: 5px 20px;
}


.sign-block {
    width:40%; 
    max-width:700px;
}


@media screen and (max-width:700px) {

    .loading-box-cont {
        margin-top: 50px;
    }

    .sign-block {
        width: 96%;
        margin-left:2%;
        max-width: 700px;
    }

}