/* common elements for this Skin */

* {font-family:Arial,sans-serif;}

body {
    background-color: #f0ede6;
    margin:0 auto;
}

h1 {
    text-align: center;
    font-size: 18pt;
}

h2 {
    text-align: center;
    font-size: 16pt;
}

h3 {text-align:center;
    font-size:14pt;
}

p {margin:5px;}

.InputError {
    border: 2px solid red !important;
}

.ValidatorCallout {
    display: none;
}

.divFlexContainer {
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.divHeader {
    width: 100%;
    background-color: #beb292;
    font-size: 12pt;
    font-weight: bold;
    color: #465c71;
}

.divMain {
    overflow-y: scroll;
    flex-grow: 2;
}

.divFooter {
    width: 100%;
    background-color: #beb292;
    font-size: 12pt;
    font-weight: bold;
    color: #465c71;
}

.divHeaderInstructions {
    text-align: center;
    font-size: 9pt;
    font-style: italic;
    margin: 5px;
}

.divHeaderInstructionsHighlighted {
    text-align: center;
    font-size: 10pt;
    font-weight: bold;
    color: green;
    font-style: italic;
    margin: 5px;
}

.divInstructions {
    display:table;
    margin: 10px auto;
    max-width: 600px;
}

.button1 {
    width: 50px;
    text-align: center;
    padding: 5px;
    font-style: italic;
    font-weight: bold;
}

.divError1 {
    display: table;
    margin: 0 auto;
    width: 95%;
    animation: 1s ease-out 0s 1 slideInFromTop;
    font-size: 10pt;
    text-align: center;
    padding: 10px 0;
    font-style: italic;
}

@keyframes slideInFromTop {
    0% {
        transform: translateY(-100%);
    }

    100% {
        transform: translateY(0);
    }
}

.divActionFooter1 {
    width: 100%;
    padding: 5px 0;
    background-color: #beb292;
}

.btnCancel1 {
    float: left;
    background-color: #acb5af;
    margin: 0 20px;
    font-size: 10pt;
    padding: 5px;
    transition: linear 0.2s;
}

    .btnCancel1:hover {
        background-color: #dee2df;
    }

.btnSave1 {
    float: right;
    background-color: #164923;
    border-color: black;
    margin: 0 20px;
    font-size: 12pt;
    color: #FFF;
    font-weight: bold;
    padding: 5px;
    transition: linear 0.2s;
}

    .btnSave1:hover {
        background-color: #529764;
    }

.btnPay1 {
    display: table;
    background-color: #164923;
    border:none;
    margin: 0 auto;
    font-size: 12pt;
    color: #FFF;
    font-style: italic;
    font-weight: bold;
    padding: 5px;
    transition: linear 0.2s;
    border-radius: 6px;
    padding:5px 20px;
}

    .btnPay1:hover {
        background-color: #529764;
    }

.btnPay1disabled {
    width: 50px;
    display: table;
    border-color: black;
    margin: 0 auto;
    font-size: 10pt;
    font-style: italic;
    padding: 5px;
    border-radius: 4px;
}

.btnPay2 {
    display: table;
    background-color: #164923;
    border-color: black;
    margin: 0 auto;
    font-size: 14pt;
    color: #FFF;
    font-style: italic;
    padding: 5px 10px;
    transition: linear 0.2s;
    border-radius: 4px;
}

    .btnPay2:hover {
        background-color: #529764;
    }

.btnPay3 {
    background-color: #164923;
    border-color: black;
    font-size: 10pt;
    color: #FFF;
    font-style: italic;
    padding: 5px 15px;
    transition: linear 0.2s;
    border-radius: 4px;
}

    .btnPay3:hover {
        background-color: #529764;
    }

.lbtEdit1 {
    display:table;
    margin:0 auto;
    font-size:12pt;
    font-style:italic;
}

.btnCancel3 {
    font-size: 10pt;
    color: #000;
    font-style: italic;
    padding: 5px 15px;
    border-radius: 4px;
}

    .btnCancel3:hover {
        background-color: #dee2df;
    }

.btnPay4 {
    display: table;
    background-color: #164923;
    border-color: black;
    margin: 15px auto;
    font-size: 12pt;
    font-weight: bold;
    color: #FFF;
    font-style: italic;
    padding: 5px 20px;
    transition: linear 0.2s;
    border-radius: 4px;
}

    .btnPay4:hover {
        background-color: #529764;
    }

.divPhotoGalleryLink {
    font-style:italic;
    font-size:9pt;
    text-align:center;
}

.tblRatesMobile {
    margin:0 auto;
    font-size:12pt;
}
    .tblRatesMobile td {
        padding: 10px;
    }
.tblRates {
    margin: 10px auto;
    font-size: 10pt;
}

    .tblRates tr {
        vertical-align: top;
    }

    .tblRates th {
        padding: 2px 5px;
    }

    .tblRates td {
        padding: 2px 5px;
    }

.tblPaymentSchedule {
    margin: 10px auto;
    font-size: 14pt;
}

    .tblPaymentSchedule tr {
        vertical-align: top;
    }

    .tblPaymentSchedule th {
        padding: 2px 5px;
        text-align: left;
    }

    .tblPaymentSchedule td {
        padding: 2px 5px;
        text-align: right;
    }

::placeholder {
    color: #aea277;
}

.imgLoading {
    width: 80px;
    height: auto;
}

#loadingmsg {
    left: 0;
    top: 45%;
    width: 100%;
    color: black;
    text-align: center;
    background: #fff;
    padding: 10px;
    position: fixed;
    z-index: 100;
    font-family: arpona, serif;
    text-transform: uppercase;
}

#loadingover {
    background: black;
    z-index: 99;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    filter: alpha(opacity=80);
    -moz-opacity: 0.8;
    -khtml-opacity: 0.8;
    opacity: 0.8;
}

/* elements for BookRooms3 */

.tblRooms {
    margin: 0 auto;
}

.tblHeader {
    margin: 0 auto;
}

    .tblHeader td {
        text-align: center;
    }


.divImageFrame {
    margin:0 auto;
    width:300px;
    height:225px;
    border:1px solid #666;
    background-color: #CCC;
    text-align: center;
}

.imgRoom {
    width: auto;
    height: 225px;
    max-width: 300px;
}

.imgGuide {
    width: auto;
    max-width: 300px;
    height: 225px;
    border-radius: 10px 10px 0 0;
    margin-top: 3px;
}

.divGuideImageFrame {
    width: 300px;
    height: 225px;
    background-color: #CCC;
    text-align: center;
    border-radius:10px;
}

.imgDest {
    width: auto;
    max-width: 240px;
    height: 180px;
    border-radius: 10px 10px 0 0;
    margin-top: 3px;
}

.divDestImageFrame {
    width: 240px;
    height: 180px;
    background-color: #CCC;
    text-align: center;
    border-radius: 10px;
}

.tbNights {
    width: 100px;
    text-align: center;
    padding: 5px;
}

.tbDateRange {
    width: 130px;
    text-align: left;
    padding: 5px;
    font-size: 14pt;
    font-weight: bold;
    background: #FFFFFF url('calendar-icon3.png') no-repeat;
    background-size: 30px;
    background-position: right;
    cursor: pointer;
}

.divHeaderTitle {
    font-size: 11pt;
}

.divRoomTitleRight {
    font-weight: bold;
    font-size: 14pt;
    margin-bottom: 10px;
}

.divRoomDescriptionRight {
    font-weight: normal;
    font-size: 12pt;
    margin-bottom: 10px;
    width:300px;
}

.divRoomTitleTop {
    font-weight: bold;
    font-size: 14pt;
    margin-bottom: 10px;
}

.divRoomDescriptionTop {
    font-weight: normal;
    font-size: 12pt;
    margin-bottom: 10px;
}

.divRate {
    margin-top:10px;
    font-weight: bold;
    font-size: 12pt;
    text-align:center;
}

.ddNumGuests {
    font-size: 12pt;
    font-weight: normal;
    text-transform: uppercase;
    margin-top: 10px;
    line-height: 30px;
}

input[type=checkbox] {
    transform: scale(1.75);
    margin-right:15px;
}

/* elements for OBCheckout */

.tbPhoneSearch {
    width: 200px;
    text-align: center;
    padding: 5px;
    font-size: 18pt;
}

.tbVerify {
    width: 200px;
    text-align: center;
    padding: 5px;
    font-size: 18pt;
    letter-spacing:5px;
}

.tblAddTrip {
    width: 90%;
    margin: 0 auto;
    max-width: 550px;
}

    .tblAddTrip tr {
    }

    .tblAddTrip th {
        display: block;
        text-transform: uppercase;
        text-align: left;
        padding: 20px 0 5px 5px;
        color: #263a17;
        font-size: 12pt;
        letter-spacing: 1px;
    }

    .tblAddTrip td {
        display: block;
    }

        .tblAddTrip td select {
            box-sizing: border-box;
            border: 2px solid #aea277;
            width: 100%;
            font-size: 10pt;
            height: 40px;
            vertical-align: middle;
            text-transform: uppercase;
            padding-left: 10px;
            color: #aea277;
            font-weight: bold;
            letter-spacing: 1px;
        }

            .tblAddTrip td select:disabled {
                color: #aea277;
                -webkit-text-fill-color: #aea277;
                opacity: 1;
                background-color: lightgray;
            }

        .tblAddTrip td input[type=text] {
            box-sizing: border-box;
            border: 2px solid #aea277;
            width: 100%;
            font-size: 10pt;
            height: 40px;
            vertical-align: middle;
            text-transform: uppercase;
            padding-left: 10px;
            color: #aea277;
            font-weight: bold;
        }

        .tblAddTrip td input[type=number] {
            box-sizing: border-box;
            border: 2px solid #aea277;
            width: 100%;
            font-size: 10pt;
            height: 40px;
            vertical-align: middle;
            text-transform: uppercase;
            padding-left: 10px;
            color: #aea277;
            font-weight: bold;
        }

        .tblAddTrip td input[type=date] {
            box-sizing: border-box;
            border: 2px solid #aea277;
            width: 100%;
            font-size: 10pt;
            height: 40px;
            vertical-align: middle;
            text-transform: uppercase;
            padding-left: 10px;
            color: #aea277;
            background-color: transparent;
            font-weight: bold;
        }

        .tblAddTrip td input[type=text]:disabled {
            color: #000;
            opacity: 1;
            background-color: lightgray;
        }

        .tblAddTrip td textarea {
            box-sizing: border-box;
            border: 2px solid #aea277;
            width: 100%;
            font-size: 10pt;
            height: 100px;
            vertical-align: middle;
            text-transform: uppercase;
            padding: 10px;
            color: #aea277;
            font-weight: bold;
            letter-spacing: 1px;
        }

.tblAddTrip td select:active {
    background-color: #FFF;
}
.tblAddTrip td input:active {
    background-color: #FFF;
}

.tblHeader2 {
    width:100%;
    font-size:10pt;
    border-collapse:collapse;
}

    .tblHeader2 tr {vertical-align:top;}

    .tblHeader2 th {
        line-height: 27px;
        font-weight: normal;
        padding: 0 5px;
    }

    .tblHeader2 td {
        font-weight:normal;
        padding:5px;
    }

.tblInvoice {
    margin: 5px auto 2px auto;
    border-collapse: collapse;
    font-size: 8pt;
}
.tblInvoice tr {vertical-align:top;
}
.tblInvoice th {
    border:1px solid #CCC;
    padding:2px 5px;
}
    .tblInvoice td {
        border: 1px solid #CCC;
        padding: 2px 5px;
    }

.tblNotes {
    margin: 5px auto 2px auto;
    font-size: 12pt;
}

    .tblNotes tr {
        vertical-align: top;
    }

    .tblNotes td {
        padding: 2px 5px;
    }

.divCentered {
    display: table;
    margin: 20px auto;
    max-width: 600px;
    font-size: 16pt;
    text-align: center;
    color: #000;
    font-weight: bold;
}

.divCenteredOK {
    display: table;
    margin: 20px auto;
    max-width: 600px;
    font-size: 16pt;
    text-align: center;
    color: green;
    font-weight: bold;
}

.divSuccess {display:table;margin:10px auto;color:green;text-align:center;}

.g-recaptcha {display:table;margin:5px auto;}

/* bookrooms4 */

.divLogo {
    display: table;
    margin: 10px auto;
}

.btnPlus {
    box-sizing: border-box;
    border: 2px solid #aea277;
    font-size: 10pt;
    height: 40px;
    vertical-align: middle;
    text-transform: uppercase;
    padding-left: 10px;
    color: #aea277;
    background-color: transparent;
    font-weight: bold;
    letter-spacing: 1px;
}

.tblAssigned {
    margin: 5px auto;
}

    .tblAssigned tr {
        vertical-align: middle;
    }

    .tblAssigned th {
        padding: 2px 5px;
        display: table-cell;
    }

    .tblAssigned td {
        padding: 5px 0;
        display: table-cell;
    }

        .tblAssigned td input[type=text] {
            box-sizing: border-box;
            height: 40px !important;
            text-align: center;
            padding: 0 !important;
        }


/* mobile */

@media only screen and (min-width:0px) and (max-width: 599px) {
    /* common */

    .tblHeader th {
        display: none;
    }

    .tblHeader td {
    }

    /* bookrooms3 */

    .divRoomTitleTop {
        display: block;
    }
    .divRoomDescriptionTop {
        display: block;
    }
    .divRoomTitleRight {
        display: none;
    }
    .divRoomDescriptionRight {
        display: none;
    }
    .tblRooms th, .tblRooms td {display:block;}

    .divCheckBoxes {display:table;margin:0 auto;}

    .divRate {
        margin-top: 10px;
        font-weight: bold;
        font-size: 14pt;
        text-align: center;
    }

    .tblRates {
        display: none;
    }
    .tblRatesMobile {
        display: table;
    }

    /* checkout */

    .tblHeader2 td, .tblHeader2 th {
        display: block;
        text-align: center;
        line-height: 20px;
        padding: 0 5px;
    }
    .logo1 {display:none;}

    .divInstructions {
        display: table;
        margin: 10px;
        max-width: 600px;
    }

    .divProgressBar {
        display: table;
        margin: 5px auto 10px auto;
        border-collapse: collapse;
    }

    .divActiveStep, .divOtherStep {display: table-cell;width:80px;padding: 2px 5px;border: 2px solid #CCC;}
    .divOtherStep {background-color: #FFF;color:#000;}
    .divActiveStep {background-color: darkkhaki;color:#FFF;}
    .spanStepTitle {display: block;font-size: 8pt;font-weight: bold;}
    .spanStepInfo {display: block;font-size: 9pt;}

    .divProgressBar {
        display: table;
        font-size: 9pt;
        text-transform: uppercase;
        font-weight: bold;
        margin-bottom: 10px;
    }

    .divProgressBarItem:first-child {
        display: table-cell;
    }

    .divProgressBarItem:not(:first-child) {
        display: table-cell;
        padding-left: 10px;
    }

    .divProgressBarItem:not(:last-child):after {
        content: ' >';
        color: #8b9681;
    }

    .spanActiveStep {
        color: green;
        margin-right: 10px;
    }

    .spanOtherStep {
        color: #263a17;
        margin-right: 10px;
    }


}

/* desktop */

@media only screen and (min-width:600px) {
    /* common */

    .btnPay1 {
        width: 100px;
        font-size: 14pt;
    }

    .btnPay1disabled {
        width: 75px;
        font-size: 14pt;
    }

    .divFooter {
        display: none;
    }

    .btnPay3 {
        font-size: 14pt;
    }

    .btnCancel3 {
        font-size: 14pt;
    }

    /* bookrooms3 */

    .divRoomTitleTop {
        display: none;
    }

    .divRoomDescriptionTop {
        display: none;
    }

    .divRoomTitleRight {
        display: block;
    }

    .divRoomDescriptionRight {
        display: block;
    }

    .tblRooms {
        width:500px;
    }

    .tblRooms tr {
        vertical-align: top;
    }

    .tblRooms th {width:300px;}

    .divRate {
        text-align: left;
    }

    .divImageFrame {margin-right:15px;}

    .divHeaderTitle {
        font-size: 10pt;
    }

   .tbNights {
        width: 75px;
        text-align: center;
        font-size:14pt;
        padding: 5px;
    }

    .tbDateRange {

    }

    .tblRates {
        display:table;
        margin: 10px auto;
        font-size: 12pt;
    }

    .tblRatesMobile {
        display:none;
    }

    /* bookrooms3 */

    .divEventList {
        display:table;
        margin:0 auto;
    }

    /* bookrooms4 */

    .divSum {
        display:table;
        margin:10px auto;
        text-align: center;
        font-size: 10pt;
    }

    .tblNG {
        margin-left: 15px;
    }

        .tblNG tr {
            vertical-align: middle;
        }

        .tblNG th {
            padding: 2px 5px;
            display: table-cell;
        }

        .tblNG td {
            padding: 5px;
            display: table-cell;
        }

            .tblNG td input[type=text] {
                box-sizing: border-box;
                height: 40px !important;
                text-align: center;
                padding: 0 !important;
            }

            .tblNG td input[type=submit] {
                box-sizing: border-box;
                height: 40px;
                text-align: center;
            }

    .tblInv {
        margin: 5px auto;
        font-size: 9pt;
        border-collapse: collapse;
    }

        .tblInv tr {
            vertical-align: top;
        }

        .tblInv th {
            padding: 2px 5px;
            display: table-cell;
            border: 1px solid #CCC;
        }

        .tblInv td {
            padding: 2px 5px;
            display: table-cell;
            border: 1px solid #CCC;
        }


    /* checkout */

    .tblHeader2 {font-size:12pt;}
    .tblHeader2 td {
        text-align: right;
        width:33.3333%;
    }

        .tblHeader2 th {
            text-align: left;
            width: 33.3333%;
        }

    .tblInvoice {
        font-size:12pt;
    }
    .tdLogo {text-align:center;}
    .logo1 {height:70px;width:auto;display:table;margin:0 auto;}

    .divProgressBar {
        display:table;
        margin: 5px auto;
        border-collapse: collapse;
    }

    
    .divActiveStep, .divOtherStep {display: table-cell;width:150px;padding: 2px 5px;border: 2px solid #CCC;}
    .divOtherStep {background-color: #FFF;color:#000;}
    .divActiveStep {background-color: darkkhaki;color:#FFF;}
    .spanStepTitle {display: block;font-size: 10pt;font-weight: bold;}
    .spanStepInfo {display: block;font-size: 12pt;}

    .divProgressBar {
        display: table;
        font-size: 12pt;
        text-transform: uppercase;
        font-weight: bold;
        margin-bottom: 20px;
    }

    .divProgressBarItem:first-child {
        display: table-cell;
    }

    .divProgressBarItem:not(:first-child) {
        display: table-cell;
        padding-left: 15px;
    }

    .divProgressBarItem:not(:last-child):after {
        content: ' >';
        color: #8b9681;
    }

    .spanActiveStep {
        color: green;
        margin-right: 15px;
    }

    .spanOtherStep {
        color: #263a17;
        margin-right: 15px;
    }

}


/* bookrooms6 */

.tbDateRange6 {
    width: 160px;
    text-align: left;
    padding: 5px;
    font-size: 14pt;
    font-weight: bold;
    background: #FFFFFF url('calendar-icon3.png') no-repeat;
    background-size: 30px;
    background-position: right;
    cursor: pointer;
    height: 35px;
}

.tbNights6 {
    width: 100px;
    text-align: center;
    font-size: 14pt;
    padding: 5px;
    height: 35px;
}

.divRoomAmenities6 {
    font-weight: normal;
    font-size: 10pt;
    margin-top: 8px;
}

.divRoomContainer6 {
    display: flex;
    max-width: 90%;
    margin: 15px auto;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

.divRoomItem6 {
    margin: 10px 10px;
    border-radius: 8px;
    background-color: #FFF;
}

.imgRoom6 {
    width: auto;
    height: 225px;
    max-width: 300px;
    border-radius: 8px;
}

.imgPrimaryRoom6 {
    display: table;
    margin: 20px auto;
    width: auto;
    height: 450px;
    max-width: 800px;
    border-radius: 8px;
}

.divRoomText6 {
    margin: 15px;
}

.divRoomTitle6 {
    font-weight: bold;
    font-size: 14pt;
}

.divRoomCapacity6 {
    font-weight: normal;
    font-size: 10pt;
    margin-top: 8px;
}

.divRoomRate6 {
    font-weight: normal;
    font-size: 10pt;
    margin-top: 8px;
}

.divSingleRoomContainer6 {
    display: table;
    margin: 0 auto;
}

.divRoomDescription6 {
    max-width: 800px;
}

.btnBookNow6disabled {
    display: table;
    border-color: black;
    margin: 0 auto;
    font-size: 10pt;
    font-style: italic;
    padding: 5px;
    border-radius: 4px;
    height:35px;
}

.btnBookNow6 {
    display: table;
    background-color: #164923;
    border: none;
    margin: 0 auto;
    font-size: 12pt;
    color: #FFF;
    font-style: italic;
    font-weight: bold;
    padding: 5px;
    transition: linear 0.2s;
    border-radius: 6px;
    padding: 5px 20px;
    height: 35px;
}

    .btnBookNow6:hover {
        background-color: #529764;
    }

@media only screen and (min-width:0px) and (max-width: 599px) {
    .imgPrimaryRoom6 {
        display: table;
        margin: 20px auto;
        width: 90%;
        height: auto;
        border-radius: 8px;
    }

    .divRoomDescription6 {
        max-width: 90%;
    }
}