@charset "UTF-8";

/* SkyBook.css CSS Document */
/* Development Project*/
@import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700,300italic);

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0-modified | 20110126
   License: none (public domain)
*/

:root {
    --main-backgroundcolor: white;
    --main-barcolor: #fbab50;
    --main-fontcolor: #444444; /* Should be the same across all properties */
    --main-topheadercolor: #1b4f79;
    --main-buttoncolorlight: #96c3e8;
    --main-buttoncolordark: #82b7e3; /* One Shade Darker than the buttoncolorlight */
    --main-buttonmatchingcolor: #d5e7f6; /* Three shades lighter than the buttoncolorlight*/
    --main-tabmatchingcolor: #eaf3fb; /* Four shades lighter than the buttoncolorlight*/
    --main-loadercolor: #4394d6; /* Four shaedes darker than the buttoncolorlight */
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* make sure to set some focus styles for accessibility */
:focus {
    outline: 0;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

/*
 What was this in the body statement    ?
*/

/* Used for the SkyAlert Pop-Up Box*/
.ui-widget-overlay.ui-front { 
    opacity: .50;
}


body {
    background-color: var(--main-backgroundcolor);
    color: var(--main-fontcolor);
    font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    width: 100%;
    margin: 0 auto;
    overflow-x: hidden;
    font-size: 16px;
}

input, select { font-size: 100%; }

.PageTop {
    background-color: var(--main-topheadercolor);
    width: 100%;
    border: 0px;
}

.PageBottom {
    text-align:center;
}

.HelpButton {
    cursor:pointer;
    position: absolute;
    float: right;
    top: 5px;
    right: 5px;
    z-index: 10;
    *-webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05);
}
.SignInButton {
    cursor: pointer;
    position: absolute;
    float: right;
    top: 5px;
    right: 58px;
    z-index: 10;
    *-webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05);
}
/* Reservations Bar */

.ResvInfo {
    background-color: var(--main-barcolor);
    width: 100%;
    padding-top: 5px;
    padding-bottom: 5px;
    margin: auto;
    align-items: center;
    justify-content: center;
    display: flex;
    flex-flow: row wrap;
    /*position: -webkit-sticky;
    position: sticky;*/
    top: 0;
    /*z-index: 2;*/
}

.ResvInfoRow {
    display: flex;
    flex-flow: row wrap;
}

.ResvInfoGrid {
    width: 350px;
    display: grid;
    border: 2px solid transparent;
    grid-template-areas: 'column1 column2';
}
.BarBox {
    display:flex;
    border-radius: 4px;
    border: 1px solid gray;
    align-items:center;
    padding: 5px;
}
    .BarBox::placeholder {
        color: gray;
        opacity: 1;
    }

.BarBoxDate {
    display: flex;
    padding: 5px;
    float: left;
    height: 21px;
    background-color: white;
    width: 100%;
    border-radius: 4px;
    display: flex;
    flex-direction: row;
    align-items: center;
    border: 1px solid gray;
    cursor: text;
}
.TextBoxDate {
    all: unset;
    color: black;
    height: 100%;
    width: 100%;
    text-align: left;
}
.TextBoxDateIcon {
    color: #fff;
    fill: gray;
    width: 18px;
    height: 18px;
    padding: 10px;
}

.ResvInfoColumn1 {
    grid-area: column1;
    width: 100px;
    padding-right: 5px;
    padding-top: 3px;
    display: flex;
    justify-content: right; /* Horizontal center */
    align-items: center; /* Vertical center */
}

.ResvInfoColumn2 {
    grid-area: column2;
    text-align:left;
    min-width:250px;
}

.RVRow {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content: center;
    border-bottom: 2px solid var(--main-barcolor);
    padding-top: 5px;
    padding-bottom: 5px;
    background-color: #f2f2f2;
}

.RVGrid {
    display: grid;
    padding: 2px;
    grid-template-areas: 'column1 column2 column3';
    width: 100%;
}

.RVColumn1 {
    grid-area: column1;
    text-align: right;
    padding-right: 5px;
    white-space:nowrap;
}

.RVColumn2 {
    grid-area: column2;
    text-align: left;
}

.RVColumn3 {
    grid-area: column3;
    text-align: right;
    white-space:nowrap;
}

#divRoomExtras {
    font-size:13px;
    text-align: center;
    padding: 3px;
}
.divExtra {
    display: flex;
    flex-flow: row wrap;
}
.divExtraCell {
    width:50%;
}

/* Modal Pop-up */
.ModalInfo {
    background-color: var(--main-barcolor);
    width: 100%;
    border: 5px solid transparent;
    margin: auto;
    align-items: center;
    justify-content: center;
}

.GuestsGrid {
    display: grid;
    padding: 6px;
    grid-template-columns: max-content max-content;
    grid-template-areas: 'rooms1 rooms2' 'adults1 adults2' 'youths1 youths2' 'children1 children2' 'pets1 pets2';
    justify-content:center;
}
.actGrid
{
    padding-left:30px;
}
.actCheckBox {
}

.Rooms1 {
    grid-area: rooms1;
    text-align: right;
    padding: 4px;
    white-space:nowrap;
}

.Rooms2 {
    grid-area: rooms2;
    text-align: left;
    padding: 4px;
}

.Adults1 {
    grid-area: adults1;
    text-align: right;
    padding: 2px;
    white-space: nowrap;
}

.Adults2 {
    grid-area: adults2;
    text-align: left;
    padding: 2px;
}

.Youths1 {
    grid-area: youths1;
    text-align: right;
    padding: 2px;
    white-space: nowrap;
}

.Youths2 {
    grid-area: youths2;
    text-align: left;
    padding: 2px;
}

.Children1 {
    grid-area: children1;
    text-align: right;
    padding: 2px;
    white-space: nowrap;
}

.Children2 {
    grid-area: children2;
    text-align: left;
    padding: 2px;
}
.Pets1 {
    grid-area: pets1;
    text-align: right;
    padding: 2px;
    white-space: nowrap;
}
.Pets2 {
    grid-area: pets2;
    text-align: left;
    padding: 2px;
}

.GuestsDone {
    padding: 13px;
    text-align: center;
    vertical-align: bottom;
}

.ResvBody {
    display: flex;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    flex-flow: row wrap;
    border: 0px;
    margin: auto;
    justify-content: center;
    z-index: 1;
    min-width: 400px;
    background-color: #f2f2f2;
}

.ResvTabs {
    min-width: 400px;
    /*max-width: 600px;$$$*/
    position: relative;
    /*flex: 1;
    -ms-flex: 1; 
    -moz-box-flex: 1;
    -webkit-flex: 1;
    align-items: baseline;*/
    border-bottom: 3px solid transparent;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
}
.TabRow {
    padding-top: 10px;
    padding-bottom: 10px;
}
.ErrorText {
    font-weight: bold;
    color: red !important;
}

.Itinerary {
    padding: 10px;
}

.ItineraryBody {
    margin: 0px;
    padding: 0px;
    background-color: #FFFFFF;
    font-size: 15px;
    color: var(--main-fontcolor);
    min-width: 300px;
    border-radius: 4px;
}


.ItineraryTitle {
    margin: 0px;
    font-size: 13px;
    background-color: var(--main-buttoncolorlight);
    color: var(--main-fontcolor);
    font-weight: bold;
    text-align: center;
    line-height: 25px;
    border-width: 1px;
    border-color: #A2A2A2;
    border-top-style: solid;
    border-right-style: solid;
    border-left-style: solid;
    white-space: nowrap;
    vertical-align: bottom;
    border-radius: 4px 4px 0px 0px;
}
.ItineraryCell {
    display: grid;
    grid-template-columns: max-content auto;
    grid-template-areas: 'CellTitleA CellDetailA' 'CellTitleD CellDetailD' 'CellTitleN CellDetailN' 'CellTitleAdults CellDetailAdults' 'CellTitleYouths CellDetailYouths' 'CellTitleChildren CellDetailChildren' 'CellTitlePets CellDetailPets' 'CellTitleRoom CellDetailRoom' 'CellTitleTotal CellDetailTotal';
}

.ItineraryCellTitleA {
    grid-area: CellTitleA;
    padding: 5px;
}

.ItineraryCellDetailA {
    grid-area: CellDetailA;
    padding: 5px;
    font-weight: bold;
}

.ItineraryCellTitleD {
    grid-area: CellTitleD;
    padding: 5px;
}

.ItineraryCellDetailD {
    grid-area: CellDetailD;
    padding: 5px;
    font-weight: bold;
}

.ItineraryCellTitleN {
    grid-area: CellTitleN;
    padding: 5px;
}

.ItineraryCellDetailN {
    grid-area: CellDetailN;
    padding: 5px;
    font-weight: bold;
}

.ItineraryCellTitleAdults {
    grid-area: CellTitleAdults;
    padding: 5px;
}

.ItineraryCellDetailAdults {
    grid-area: CellDetailAdults;
    padding: 5px;
    font-weight: bold;
}

.ItineraryCellTitleYouths {
    grid-area: CellTitleYouths;
    padding: 5px;
}

.ItineraryCellDetailYouths {
    grid-area: CellDetailYouths;
    padding: 5px;
    font-weight: bold;
}

.ItineraryCellTitleChildren {
    grid-area: CellTitleChildren;
    padding: 5px;
}

.ItineraryCellDetailChildren {
    grid-area: CellDetailChildren;
    padding: 5px;
    font-weight: bold;
}
.ItineraryCellTitlePets {
    grid-area: CellTitlePets;
    padding: 5px;
}

.ItineraryCellDetailPets {
    grid-area: CellDetailPets;
    padding: 5px;
    font-weight: bold;
}
.ItineraryCellTitleRoom {
    grid-area: CellTitleRoom;
    padding: 5px;
}

.ItineraryCellDetailRoom {
    grid-area: CellDetailRoom;
    padding: 5px;
    font-weight: bold;
}
.ItineraryCellTitleTotal {
    grid-area: CellTitleTotal;
    padding: 5px;
}

.ItineraryCellDetailTotal {
    grid-area: CellDetailTotal;
    padding: 5px;
    font-weight: bold;
}

.ItineraryCellFullName {
    width: 100%;
    text-align: center;
    font-weight: bold;
    border-bottom: 2px solid var(--main-buttonmatchingcolor);
    padding-top: 5px;
    padding-bottom: 5px;
}

.ConfCell {
    display: inline-block;
    border: 3px solid transparent;
    text-align: center;
    width: 100%;
}

.ConfCellDetail {
    font-weight: bold;
    display: inline-block;
    border: 3px solid transparent;
    text-align: center;
    width:100%;
}
.ConfCellResv {
    font-weight: bold;
    display: inline-block;
    padding-top: 20px;
    padding-bottom:10px;
    text-align: center;
    width: 100%;
}
.GeneralCell {
    display: inline-block;
    border: 3px solid transparent;
    width: 100%;
}
.GeneralCellBookIt {
    background-color: var(--main-barcolor);
    align-items: center;
    justify-content: center;
    text-align: center;
    position: fixed;
    width: 100%;
    left: 0px;
    bottom: 0px;
    z-index: 2;
    padding-top: 5px;
    padding-bottom: 5px;
}
.GeneralCellComments {
    width: 100%;
    text-align: center;
    padding-bottom:5px;
}
#SkyBook_txtComments {
    font-size: 13px;
    width: 95%;
    height: 50px;
}

.GeneralLine {
    height: 2px;
    border-width: 0;
    color: var(--main-buttonmatchingcolor);
    background-color: var(--main-buttonmatchingcolor);
}

.ItineraryText {
    font-size: 13px;
    font-style: italic;
}

.ChevronLeft {
    position: absolute;
    top: 45%;
    left: 5%;
    cursor: pointer;
}

.ChevronRight {
    position: absolute;
    top: 45%;
    left: 90%;
    cursor: pointer;
}

.ImagePopUp {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover; /* or object-fit: contain; */
}

.ImageDone {
    position: absolute;
    padding: 13px;
    width: 100%;
    text-align: center;
    top: 0px;
}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    z-index: 4;
}

/* Modal Content */
.modal-content {
    background-color: var(--main-backgroundcolor);
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 300px;
}

/* Modal Content */
.modal-content-rooms {
    position: relative;
    margin: auto;
    max-height: 70%;
    width: 80%;
    height: 80%;
    border:solid 2px white;
}

.modal-projected {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 50px; /* Location of the box */
    padding-bottom: 50px;
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    z-index: 4;
}

.modal-content-projected {
    background-color: var(--main-backgroundcolor);
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 90%;
    height: 500px;
    overflow: auto; /* Enable scroll if needed */
}

.modal-calendar {
    display: none;
    position: fixed; /* Stay in place */
    float: left;
    left: 5px;
    top: 10px;
    z-index: 10; /* Sit on top */
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
}

.modal-content-calendar {
    background-color: #FFFFFF;
    margin: auto;
    border: 1px solid #888;
    position: fixed;
    overflow: auto; /* Enable scroll if needed */
    z-index: 5;
    width: 350px;
}

.modal-site {
    display: none;
    position: fixed; /* Stay in place */
    float: left;
    left: 5px;
    top: 10px;
    z-index: 10; /* Sit on top */
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
}

.modal-content-site {
    background-color: #FFFFFF;
    margin: auto;
    border: 1px solid #888;
    /*position: fixed;*/
    overflow: auto; /* Enable scroll if needed */
    z-index: 5;
    /*width: 350px;*/

    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

.SiteBook {
    padding: 5px;
    text-align: center;
    vertical-align: bottom;
}

.calendar-header-table {
    background-color: #d9d9d9;
    width: 100%;
    border-spacing: 2px;
    border-collapse: separate;
    padding: 2px;
}
.calendar-header-cell {
    padding-left: 5px;
    padding-right: 5px;
    cursor:pointer;
}
.calendar-header-cell-middle {
    text-align: center;
    font-weight: bold;
}

.calendar-table {
    border-spacing: 2px;
    border-collapse: separate;
}
.calendar-Day-Header {
    font-size:larger;
    padding-top: 5px;
    padding-bottom:5px;
    text-align:center;
    background-color: silver;

}
.calendar-DOW-Header {
    width: 48px;
    text-align:center;
    font-weight:bold;
}
.calendar-DOW-Avail {
    text-align: right;
    border: 1px solid silver;
    padding: 2px;
    cursor: pointer;
    height: 32px;
}
.calendar-DOW-NotAvail {
    text-align: right;
    border: 1px solid silver;
    padding: 2px;
    height: 32px;
    background: linear-gradient(to top left, rgba(0,0,0,0) 0%, rgba(0,0,0,0) calc(50% - 0.8px), rgba(0,0,0,0.3) 50%, rgba(0,0,0,0) calc(50% + 0.8px), rgba(0,0,0,0) 100%), linear-gradient(to top right, rgba(0,0,0,0) 0%, rgba(0,0,0,0) calc(50% - 0.8px), rgba(0,0,0,0.3) 50%, rgba(0,0,0,0) calc(50% + 0.8px), rgba(0,0,0,0) 100%);
    }
.calendar-Rate {
    font-size: 8pt;
    font-style:italic;
}
.calendar-DOW-Outside {
    text-align: right;
    border: 1px solid silver;
    padding: 2px;
    color: gray;
}
.calendar-Done-table {
    border-spacing: 5px;
    border-collapse: separate;
}
.calendar-Done-button {
    height: 22px;
    font-weight:bold;
}
.calendar-Caption {
    font-size: 8pt;
    font-style: italic;
    text-align:center;
}
.calendar-Clear-button {
    height: 22px;
    width: 50px;
}
.calendar-Today-button {
    height: 22px;
    width: 50px;
}

.projGrid {
    font-size: 10pt;
}

/* The Close Button */
.close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

    .close:hover,
    .close:focus {
        color: #000;
        text-decoration: none;
        cursor: pointer;
    }

.AvailBuilding {
    padding-top: 5px;
    padding-bottom: 5px;
    text-align: center;
    border-bottom: 2px solid var(--main-barcolor);
}
.AvailTable {
    border-collapse: collapse;
    background-color: #f2f2f2;
    /*    border: 5px solid transparent;
*/
}
.AvailTR {
    display: flex;
    flex-flow: row wrap;
    background-color: white;
    /*display: flex;
    flex-flow: column wrap; $$$*/

    grid-template-columns: auto auto;
    grid-template-areas: 'td1 td2';
    font-size: 15px;
    color: var(--main-fontcolor);
/*    border-bottom: 2px solid var(--main-buttonmatchingcolor);
*/    width: 100%;
    border-radius: 4px;
}
.AvailMultiButton {
    background-color: var(--main-barcolor);
    align-items: center;
    justify-content: center;
    text-align: center;
    position: fixed;
    width: 100%;
    left: 0px;
    bottom: 0px;
    z-index: 2;
    padding-top: 5px;
    padding-bottom: 5px;
}
.AvailTD1 {
    grid-area: td1;
    max-width:600px; 
    background-color: white;
    border-radius: 4px 0px 0px 4px;
}
.AvailTD2 {
    grid-area: td2;
    padding-left: 3px;
    padding-right: 3px;
    padding-top: 3px;
    max-width: 600px; 
    background-color: white;
    border-radius: 0px 4px 4px 0px;
    width: 100%;
}

.AvailTH {
    background-color: silver;
    padding: 2px;
}
.AvailImage {
    object-fit: contain;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    border-radius: 4px 0px 0px 4px;
}
.AvailCellMinNights {
    font-size: 10pt;
    font-style: italic;
    color: darkred;
    vertical-align: bottom;
    padding: 3px;
    text-align: right;
    padding-right: 10px;
}
.AvailCellRoomInfo {
    font-size:13px;
    grid-area: roominfo;
    padding-bottom: 8px;
    padding-left: 5px;
    color: gray;
}
.AvailCellADR {
    font-size: 13px;
    padding-left: 10px;
    font-weight:bold;
}
.AvailCellRoomName {
    grid-area: roomname;
    align-self: end;
    font-size:18px;
    padding-left: 5px;
}
.AvailCellRoomDescript {
    font-size: 13px;
    padding-bottom: 5px;
    padding-left: 5px;
    color: #4d4d4d;
}
.AvailCellRoomFeatLoc {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding-left: 5px;
}
.AvailCellRoomFeatLocCol {
    display:flex;
    align-items: center;
    font-size: 13px;
    color: #4d4d4d;
}
.AvailCellRateDescript {
    font-size: 9px;
    font-style: italic;
    padding-bottom: 5px;
    text-align: right;
}
.AvailCellTotalLine {
    display: flex;
    flex-flow: column wrap;
    justify-content: flex-end;
    align-content: flex-end;
    height: 25px;
    border-top: 2px solid #f2f2f2;
    padding-bottom: 5px;
    padding-top: 5px;
}
.AvailCellTotal {
    vertical-align: bottom;
    padding: 3px;
    text-align: right;
    padding-right: 10px;
}
.AvailCellTotalDescription {
    color: #666666;
}
.AvailCellTotalADR {
    font-weight: bold;
    color: #1a1a1a;
}
.AvailCellRoomNum {
    font-size:13px;
    vertical-align: bottom;
    padding: 1px;
    text-align: right;
    padding-right: 10px;
}
.AvailCellButton {
    text-align: center;
}
.ShowMoreRates {
    width:100%;
    text-align:right;
    cursor: pointer;
}
.ShowMoreRatesText {
    font-size:10px;
    color:darkblue;
}
.TabUDFBody {
    margin: 0px;
    padding: 0px;
/*    border: 3px solid #C0C0C0;
*/    background-color: #FFFFFF;
    font-size: 15px;
    color: var(--main-fontcolor);
    min-width: 300px;
    /*max-width: 600px;$$$*/
}

.TabUDFActive {
/*    border-width: 1px;
    border-color: #A2A2A2;
*/    margin: 0px;
    font-size: 13px;
    background-color: var(--main-buttoncolorlight);
    color: var(--main-fontcolor);
    font-weight: bold;
    text-align: center;
    line-height: 25px;
    border-top-style: solid;
    border-right-style: solid;
    border-left-style: solid;
    white-space: nowrap;
    vertical-align: bottom;
}

.TabUDFInActive {
/*    border-width: 1px;
    border-color: #C0C0C0;
*/    margin: 0px;
    cursor: pointer;
    font-size: 11px;
    background-color: var(--main-buttonmatchingcolor);
    color: var(--main-fontcolor);
    text-align: center;
    line-height: 25px;
    white-space: nowrap;
    border-top-style: solid;
    border-right-style: inset;
    border-left-style: outset;
    box-shadow: 0px 12px 5px 1px var(--main-tabmatchingcolor) inset;
    vertical-align: bottom;
}

.TabUDF {
}

#pnlAvail {
}
#pnlAmenity {
}
#pnlGeneral {
}
#pnlConf {
}

.WebButton {
    font-size: 13px;
    font-family: Helvetica, Arial, Verdana, sans-serif;
    border-bottom: 0 none #b3b3b3;
    display: inline-block;
    *display: inline;
    /* IE7 inline-block hack */
    *zoom: 1;
    padding: 4px 13px;
    line-height: 15px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    color: black;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    background-color: var(--main-buttoncolorlight);
    background-repeat: repeat-x;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    *-webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    margin-left: .3em;
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05);
    background-image: linear-gradient(to bottom, var(--main-buttoncolordark), var(--main-buttoncolorlight));
    /* Darken IE7 buttons by default so they stand out more given they won't have borders */
    /*border-left-style: none;*/
    border-left-color: inherit;
    border-left-width: 0;
    border-right-style: none;
    border-right-color: inherit;
    border-right-width: 0;
    border-top-style: none;
    border-top-color: inherit;
    border-top-width: 0;
    margin-right: 0;
    margin-top: 0;
    margin-bottom: 0;
}

.WebButtonLarge {
    font-size: 20px;
    font-family: Helvetica, Arial, Verdana, sans-serif;
    border-bottom: 0 none #b3b3b3;
    display: inline-block;
    *display: inline;
    /* IE7 inline-block hack */
    *zoom: 1;
    padding: 4px 13px;
    line-height: 15px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    color: black;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    background-color: var(--main-buttoncolorlight);
    background-repeat: repeat-x;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    *-webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    margin-left: .3em;
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05);
    background-image: linear-gradient(to bottom, var(--main-buttoncolordark), var(--main-buttoncolorlight));
    /* Darken IE7 buttons by default so they stand out more given they won't have borders */
    /*border-left-style: none;*/
    border-left-color: inherit;
    border-left-width: 0;
    border-right-style: none;
    border-right-color: inherit;
    border-right-width: 0;
    border-top-style: none;
    border-top-color: inherit;
    border-top-width: 0;
    margin-right: 0;
    margin-top: 0;
    margin-bottom: 0;
}

/*Loader*/
.loader {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid var(--main-loadercolor);
    width: 120px;
    height: 120px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

.NoRoomsMessage {
    padding:5px;
}
table {
    border-collapse: collapse;
}
.divAmenity {
    display: inline-block;
    overflow: auto;
    width: 100%;
}
.AmenityTable {
    width:100%;
}
.AmenityTRTitle {
}

.AmenityTR {
}

.AmenityTRGroup {
    text-align: center;
    font-style: italic;
    cursor: pointer;
    padding: 5px;
}
.AmenityTR:nth-child(even) {
    background-color: #f2f2f2;
}

.AmenityTDTitle {
    text-align: left;
    padding: 5px;
    border-bottom: 2px solid var(--main-barcolor);
    vertical-align: bottom;
}
.AmenityTDTitleDates {
    text-align: center;
    padding: 5px;
    border-bottom: 2px solid var(--main-barcolor);
    vertical-align: bottom;
}
.AmenityTDDescript {
    display:inline-block;
    padding:5px;
    min-width: 200px;
}
.AmenityTD {
    padding:5px;
    text-align: left;
    text-align:center;
    vertical-align:top;
}

.ActivityRadio {
    text-align: center;
    white-space: nowrap;
    font-family: arial;
    font-size: 9pt;
    padding-top: 2px;
    padding-left: 2px;
}
.ActivityTable {
    width: 100%;
}
.ActivityTR {
}
.ActivityTRTitle {
}

.ActivityTDTitle {
    text-align: left;
    padding: 5px;
    border-bottom: 2px solid var(--main-barcolor);
    vertical-align: bottom;
}
.ActivityTDTitleDates {
    text-align: center;
    padding: 5px;
    border-bottom: 2px solid var(--main-barcolor);
    vertical-align: bottom;
}
.ActivityName {
    cursor: pointer;
    padding: 5px;
    min-width: 200px;
}

.ActivityNameSelected {
    padding: 5px;
    min-width: 200px;
    text-align: left;
    vertical-align: bottom;
    border-bottom: 2px solid var(--main-barcolor);
}
.ActivityNameSelectedNoAppt {
    padding: 5px;
    min-width: 200px;
    text-align: left;
    vertical-align: bottom;
}

.divActivity {
    display: inline-block;
    overflow: auto;
    width: 100%;
}
.divActivityAll {
}
.divActivityAll > div:nth-child(even) {
    background-color: #f2f2f2;
}

/* Check-In Stuff*/
.divFind {
    display: inline-block;
    width: 100%;
    text-align:center;
}
.divVerify {
    width: 100%;
    text-align: center;
}
.divConfirmation {
    display: inline-block;
    width: 100%;
    text-align: center;
}
.VerifyCol {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.GeneralCellRight {
    border: 5px solid transparent;
    width: 100%;
    text-align: left;
    font-weight: bold;
}

.GeneralCellLeft {
    border: 5px solid transparent;
    width: 100%;
    text-align: right;
    font-style: italic;
}


/* Safari */
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}