@import "reset.css";

@import url('https://fonts.googleapis.com/css?family=Poppins&display=swap');

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}

body, input, select, textarea, button, div.jqi .jqititle, div.jqi .jqimessage, div.jqi .jqibuttons, .ui-widget { /* input does not pick up css declared for body, as browser tends to implement platform specific styling */
    font-family: 'Poppins', sans-serif !important;
    line-height: 1.4;
}

body {
    background: var(--bgClr);
    color: var(--txtClr);

    /* @see http://kyleschaeffer.com/user-experience/css-font-size-em-vs-px-vs-pt-vs/ */
    font-size: 62.5% !important;
    -webkit-font-smoothing: antialiased;
    height: 100vh;
    width: 100vw;
    width: 100%;
    height: 100%;
}

a {
    color: var(--txtClr);
    text-decoration: none;
    border-bottom: 1px solid;
    border-color: var(--txtClr);
    transition: all linear .2s;
    -webkit-transition: all linear .2s;
    -moz-transition: all linear .2s;
    -ms-transition: all linear .2s;
    -o-transition: all linear .2s;
}

a:hover {
    color: var(--highClr);
    border-color: var(--highClr);
    transition: all linear .2s;
    -webkit-transition: all linear .2s;
    -moz-transition: all linear .2s;
    -ms-transition: all linear .2s;
    -o-transition: all linear .2s;
}

a.image {
    border: 0;
}

a.fa {
    border: 0 !important;
}

a:focus,
input[type="button"],
button {
    outline: none;
}

/* style 'read-ony' like disabled */
input[type="text"]:read-only {
    background: #f4f4f4 !important;
}
input[type="text"]:read-only:hover {
    cursor: not-allowed;
}

select:disabled, textarea:disabled, input:disabled {
    background: #f4f4f4 !important;
}
select:disabled:hover, textarea:disabled:hover, input:disabled:hover {
    cursor: not-allowed;
}

p {
    margin-bottom: 1.4em;
}

.large {
    font-size: 1.2em;
}

.small {
    margin: 5px 0;
    color: #333;
    font-size: 0.8em;
    font-style: italic;
}

p.large {
    margin-bottom: 15px;
}

h3.sub-header {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--txtClr);
    font-weight: bold;
}

h3.sub-header.short {
    max-width: 50%;
}

.hidden {
    display: none !important;
}

.page-title {
    font-size: 25px;
    text-transform: uppercase;
    padding-bottom: var(--pad);
}
.page-title .push-right {
    line-height: 35px;
}

.lined {
    border-bottom: 1px solid;
    border-color: var(--midClr);
    padding: 10px 0;
}

.sub-title {
    color: #999;
    font-size: 18px;
    margin-top: var(--pad);
    padding-bottom: var(--pad);
}

.stay-details {
    padding-top: 30px;
}

.reservation-section {
    padding: 0 20px 30px 20px;
}

.pad {
    padding: var(--pad);
}

/* Deliberately duplicated these rather than replaced so they don't mess with non-Foundation stuff elsewhere  */
.push-right,
.float-right {
    float: right;
    line-height: 21px;
    font-size: 13px;
}

.big-right .push-right,
.big-right .float-right {
    font-size: 15px;
}

.module__header .push-right .button,
.module__header .float-right .button {
    margin: -10px -7px;
}


.box img,
.table img {
    max-width: 100%;
    width: 100%;
}

.flexslider {
    border: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    -ms-box-shadow: none !important;
    -o-box-shadow: none !important;
}

.flexslider,
.flexslider li {
    margin: 0 !important;
}



.fa.float-left {
    margin-right: .3em;
}




/* =================== */
/* Horizontal Menu */
/* =================== */

ul.horizontal_options,
ul.pagination {
    display: inline-block; /* prevents unnecessary expansion */
    background: var(--lowClr);
    border: 1px solid var(--lowTxtClr);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

ul.horizontal_options li,
ul.pagination li {
    display: inline-block;
}

ul.horizontal_options a,
ul.horizontal_options span,
ul.pagination a,
ul.pagination span {
    display: block;
    border: 0; /* disable border-bottom which is used for underlining */
    padding: 5px;
    font-size: 13px;
    text-transform: uppercase;
    font-weight: bold;
    color: var(--lowTxtClr);
}

ul.horizontal_options li.active > a,
ul.horizontal_options li.active > span,
ul.pagination li.active > a,
ul.pagination li.active > span{
    color: var(--highClr);
}


/* =================== */
/* Modules */
/* =================== */


/*
 * Header Module
 * - Sets up the header of the site
 */
div.header {
    height: 210px;
    background-color: var(--lowClr);
    border-top: 10px solid var(--highClr);
    color: var(--lowTxtClr);
    margin-bottom: var(--pad);
    font-size: 16px;
    background-position: center 20px;
}

div.header.short {
    height: 150px;
}

div.header a {
    color: var(--lowTxtClr);
}

div.header a:hover {
    color: var(--highClr);
}

.header__inner {
    /*width: 90%; Caused menu to break onto two lines on iPad, etc*/
    max-width: 1300px;
    margin: 0 auto;
    position: relative;
}

.header__logo {
    float: left;
    border: none;
}

.header__logo:hover {
    border: none;
}

.header__menu li {
    line-height: 22px;
}

/* Drop Down Menu */
.header__menu ul {
    z-index: 10; /* appear over font-awesome icons */
    list-style-type: none;
}
.header__menu li.parent-of-active > a {
    color: var(--highClr);
}
.header__menu a {
    text-align: left; /* override .header__menu */
}
.header__menu ul ul {
    display: none;
    position: absolute; /* allows menu to expand/display without expanding the parent li border etc (i.e. like floating off it) */
    margin-left: 0;
    margin-top: -1px; /* move 1px up so border lines up nicely */
    white-space: nowrap;
    background: var(--lowClr);
    border: 1px solid var(--lowTxtClr);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    box-shadow: 0 0 10px 0 rgba(0,0,0,.7);
    -webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,.7);
    -moz-box-shadow: 0 0 10px 0 rgba(0,0,0,.7);
    -ms-box-shadow: 0 0 10px 0 rgba(0,0,0,.7);
    -o-box-shadow: 0 0 10px 0 rgba(0,0,0,.7);
}
/*.header__menu ul li a.hover ~ ul,  javascript implementation for touch devices */
.header__menu ul li:hover > ul {
    display: block; /* visibility: visible; opacity: 1; */
}
.header__menu ul ul li {
    display: list-item; /* cancel .horizontal_options li.display = inline-block */
    position: relative; /* forces sub-sub-menus to appear at correct height */
    white-space: normal; /* Firefox fix, @see https://github.com/highlevelsoftware/hotel/pull/893 */
}
.header__menu ul ul ul {
    left: 100%;
    top: 0;
}

body > header {
    background-color: var(--lowClr);
    text-align: center;
    color: var(--lowTxtClr);
    border-top: 10px solid var(--highClr);
    font-size: 16px;
    padding: 1rem 0;
    z-index: 50;
    position: relative;
}

body > header a {
    color: var(--lowTxtClr);
}

body > header a:hover {
    color: var(--highClr);
}

body > header img {
    margin: 1.3rem;
}

.header__user {
    text-align: right;
    font-size: 14px;
    padding-right: 5px;
}

.footer {
    background-color: var(--lowClr);
    border-bottom: 10px solid;
    border-color:  var(--highClr);
    color: var(--lowTxtClr);
    font-size: 16px;
    margin-top: var(--pad);
    text-align: center;
}


/*
 * Module Module
 * - Some generic classes that can be used across modules
 * - Do not need a module root
 */
.module__header,
table tr.module__header th {
    background: var(--lowClr);
    -webkit-border-top-left-radius: 5px;
    -moz-border-radius-topleft: 5px;
    border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topright: 5px;
    border-top-right-radius: 5px;
    color: var(--lowTxtClr);
    overflow: hidden;
    padding: 10px;
    text-transform: uppercase;
    font-size: 1em;
    font-weight: bold;
}

.module__header a {
    color: var(--lowTxtClr);
    border-bottom: 1px solid;
    border-color: var(--lowTxtClr);

}

.module__header a.icon {
    border: 0;
}

.module__header a:hover {
    color: var(--highClr);
    border-color: var(--highClr);
}

.module__header--centre {
    text-align: center;
}

.module__header--inline {
    border-top-right-radius: 0;
    border-top-left-radius: 0;
}

/* The above causes each table header cell to each be rounded... we only want first/last to be appropriately rounded */
table tr.module__header th,
table th.module__header {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}

table tr.module__header th:first-child,
table th.module__header:first-child {
    -webkit-border-top-left-radius: 5px;
    -moz-border-radius-topleft: 5px;
    border-top-left-radius: 5px;
}

table tr.module__header th:last-child,
table th.module__header:last-child {
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topright: 5px;
    border-top-right-radius: 5px;
}

.module__sub-header  {
    background: var(--highClr);
    color: var(--highTxtClr);
    font-weight: bold;
    padding: 10px 20px;
}

.module__sub-header a:hover {
    color: var(--bgShadeClr);
    border-color: var(--bgShadeClr);
}

.module__sub-sub-header {
    background: var(--midClr);
    color: var(--midTxtClr);
    font-weight: bold;
    padding: 10px 20px;
}

/*
 * Section Module
 * - Internal sections of other modules
 */

.section {
    padding-bottom: 10px;
}

.section--main {
    padding-bottom: var(--pad);
}

.section__inner {
    padding-left: 50px;
}

.section__header {
    font-size: 20px;
    font-weight: bold;
    text-transform: uppercase;
    padding-bottom: 10px;
}

.section__sub-header {
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    padding-bottom: 10px;
}

/*
 * Box Module
 * - Gives a rounded box around content that can contain photos and details
 */
.box {
    background: var(--bgShadeClr);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin-bottom: 15px;
    display:inline-block;
    width: 100%;
}

.box a:not(.button) {
    word-break: break-all;
    word-break: break-word; /* Non-standard but using break-all in webkit is dangerous */
    -ms-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
    /*display: inline-block;*/
}

table.box {
    display: table; /* override .box { display: inline-block; } */
    border-collapse: separate; /* makes the rounded border appear nicely & properly */
}

.box__details {
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 15px;
    word-break: break-word;
}

/* Exempt Foundation grid */
.box__details:not(.columns):not(.row) {
    padding: 10px;
}

.box__details ul:last-of-type,
.box__details ul:last-of-type li:last-of-type{
    margin-bottom: 0;
    padding-bottom: 0;
}

.box__contents {}

.box__photos {
    width: 30%;
    float: left;
    padding: 15px 15px 15px 20px;
}

.box__photos li{
    margin-bottom: 0;
}

.has-photos {
    overflow: hidden;
}

.box__contents.has-photos .box__details {
    width: 70%;
    float: right;
}

.box__photo.is-vertical {
    padding: 20px 20px 0 20px;
}

.box__details .list--lined li {
    padding: 10px 0;
}

.box__expandable .box__contents {
    position: relative;
}

.box__expandable .box__details {
    max-height: 120px;
    overflow: hidden;
}

.box__expandable .readmore {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding-top: 2rem;
    padding-bottom: 0.5rem;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    /* Safari hates the transparent keyword in gradients, so need to use rgba here */
    background: linear-gradient(rgba(var(--bgShadeClrRed), var(--bgShadeClrGreen), var(--bgShadeClrBlue), 0), var(--bgShadeClr) 50%);
    font-weight: bold;
    text-align: center;
    cursor: pointer;
}

/*
 * Inner box modifier
 * - A box module that is used best inside another module
 */

.box--inner {
    margin: var(--pad);
}

.box--inner .box__contents {
    border: 1px solid;
    border-color: var(--midClr);
}

.box--inner .description {
    margin: var(--pad) 0;
    color: #333;
}

.box , .table  {
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
    -ms-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
    -o-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
}

.overflow-table {
    overflow: auto;
}

.numeric {
    text-align: right;
    white-space: nowrap;
}

.total {
    font-weight: bold;
}

/*
 * Table Module
 * - Gives a table module to be used on a <table> element
 * - An h2 or similar should be placed directly above it with a class of .module__header
 */

.modal-body table,
.table{
    width: 100%;
}

.modal-body .table__content,
.table__content {
    background-color: var(--bgShadeClr);
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-bottomright: 5px;
border-bottom-right-radius: 5px;
    width: 100%;
}

.modal-body table th,
.modal-body td,
.table th,
.table td {
    padding: 10px;
}

.modal-body th {
  font-size: 16px;
}

.modal-body th,
.table th {
    background: var(--midClr);
    color: var(--midTxtClr);
    text-align: left;
}

.modal-body table th a,
.table th a {
    color: var(--midTxtClr);
    border-bottom: 1px solid;
    border-color: var(--midTxtClr);
}

.modal-body table td,
.table td {
    border-top: 1px solid;
    border-color: var(--midClr);
    font-size: 16px;
}

.modal-body table td.pair-start, .modal-body table th.pair-start,
.table td.pair-start, .table th.pair-start {
    border-left: 1px solid var(--midClr);
}

.modal-body table th,
.table th {
    border-left: 1px solid var(--bgShadeClr);
    border-right: 1px solid var(--bgShadeClr);
}
.modal-body table th:last-child,
.table th:last-child {
    border-right: none;
}
.modal-body table th:first-child,
.table th:first-child {
    border-left: none;
}

.modal-body table.sortable-table.dataTable thead th.sorting:after,
table.sortable-table.dataTable thead th.sorting:after {
    color: var(--midTxtClr);
    opacity: 0.5;
}

.sortable > .ui-sortable-helper {
    display: block;
}

/*
 * Buttons Module
 * - Gives a base button style with a variety of modifiers, modifiers can be combined
 * - Size modifiers .button--{small | large}  defaults to a medium size
 * - Quiet modifier turns the button to an off, disabled, or less visual version
 */

.container .button, .button {
    background: var(--highClr);
    border: 1px solid;
    border-color: var(--highClr);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    cursor: pointer;
    color: var(--highTxtClr);
    display: inline-block;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    padding: 8px 12px;
    margin-bottom: auto;
    white-space: normal;
    transition: all linear .2s;
    -webkit-transition: all linear .2s;
    -moz-transition: all linear .2s;
    -ms-transition: all linear .2s;
    -o-transition: all linear .2s;
    box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.2);
    -moz-box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.2);
    -ms-box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.2);
    -o-box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.2);
}

.container a.button {
    margin-bottom: 5px;
}

.button:hover,
.button:focus {
    background: var(--lowClr);
    border-color: var(--lowClr);
    color: var(--lowTxtClr);
    transition: all linear .2s;
    -webkit-transition: all linear .2s;
    -moz-transition: all linear .2s;
    -ms-transition: all linear .2s;
    -o-transition: all linear .2s;
}

.button--small,
.button--pill {
    font-size: 10px;
    padding: 5px 10px;
}

.button--large {
    font-size: 18px;
    padding: 15px 30px;
}

.button--quiet {
    background: var(--midClr);
    border-color: var(--midClr);
    color: var(--bgShadeTxtClr);
}

.button.large {
    font-size: 1.063rem;
}

.button.full {
    width: 100%;
}

.button.disabled,
.button.disabled:focus,
.button.disabled:hover,
.button[disabled],
.button[disabled]:focus,
.button[disabled]:hover {
    /*background: var(--highClr);*/
    border-color: darkgrey;
    background: lightgrey;
    color: var(--highTxtClr);
    cursor: not-allowed;
}

.button.inactive {
	pointer-events: none;
	opacity: 0.5;
}

.button--outline,
.roomtypes .button:focus {
    border-color: var(--bgTxtClr);
    background: transparent;
    text-transform: none;
    color: var(--bgTxtClr);
}
.button--outline:hover {
    background: var(--bgTxtClr);
    color: var(--bgClr);
}

.button--invert {
    border-color: var(--bgTxtClr);
    background: var(--bgShadeClr);
    text-transform: none;
    color: var(--bgTxtClr);
}

/* Prevent 'sticky hovers' for devices that support CSS4 Media Queries */
@media (hover:none) {
    .button:hover {
        background: var(--highClr);
        color: var(--highTxtClr);
    }

    .button--outline:hover {
        background: transparent;
        color: var(--bgTxtClr);
    }

    .button--invert:hover {
        background: var(--bgShadeClr);
        color: var(--bgTxtClr);
    }
}

/*
 * Form Module
 * - Gives some base styles for forms
 * - .form--standalone modifier puts the form in the middle of a page
 * -- intended to be used in situations such as a login form
 * - .form--quiet cuts back on styling for when a for is intended to be a small part of a page
 */

.form {
    background: var(--bgShadeClr);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.form__contents {
    padding: 20px;
}

.form ul,
.form ol {
    list-style: none;
}

.form li {
    margin-bottom: 15px;
}

.form--standalone {
    width: 100%;
    margin: 0 auto;
}

.form--standalone .form__contents {
    width: 100%;
    max-width: 50%;
    margin: 0 auto;
}

input[type=checkbox],
input[type=file],
input[type=radio],
input[type=email],
input[type=number],
input[type=password],
input[type=search],
input[type=tel],
input[type=text],
input[type=date],
input[type=time],
input[type=url],
textarea,
select,
.input-group-label {
    margin-bottom: 0;
}

input[type=text],
input[type=tel],
input[type=password],
input[type=date],
input[type=time],
input[type=email],
input[type="number"],
input[type=url],
textarea,
.input-group-label {
    background: var(--bgShadeClr);
    width: 100%;
    display: inline-block;
    padding: 10px;
    font-size: 14px;
    border: 3px solid;
    border-color: var(--midClr);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    color: var(--txtClr);
    font-size: 13px;
    cursor: pointer;
    padding: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
    background-color: var(--bgShadeClr);
    border: 1px solid var(--midClr);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    max-width: 200px;
    width: 100%;
    background-image: linear-gradient(45deg, transparent 50%, var(--txtClr) 50%), linear-gradient(135deg, var(--txtClr) 50%, transparent 50%);
    background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px), calc(100% - 2.5em) 0.5em;
    background-size: 5px 5px, 5px 5px, 1px 1.5em;
    background-repeat: no-repeat;
}

input[disabled],
textarea[disabled],
select[disabled],
select.disabled {
    opacity: 0.7;
}

input[type=text]:focus,
input[type=tel]:focus,
input[type=password]:focus,
input[type=email]:focus,
input[type="number"]:focus,
textarea:focus,
input:focus + .input-group-label {
    border-color: var(--highClr);
    outline: none;
}

.checkbox label,
.radio label {
    display: inline-block; /* as opposed to block, which is generally set for form elements to appear underneath */
}

.checkbox .options,
.radio .options {
    line-height: 13px; /* bring options closer together, same value as input width/height only for consistency */
}

.checkbox input,
.radio input {
    width: 13px;
    height: 13px;
    padding: 0;
    *overflow: hidden;
}

input[type="text"],
input[type=tel],
input[type="password"],
input[type=date],
input[type=time],
input[type=email],
input[type="number"],
input[type=url],
textarea,
select,
.input-group-label {
    font-size: 13px;
    border: 1px solid;
    border-color: var(--midClr);
}


textarea {
    max-width: 100%;
    min-width: 100%;
}

input.branded[type="radio"] + label span {
    position: relative;
    border: 1px solid var(--lowClr);
}

input.branded[type="radio"]:checked + label span:after {
    background: var(--lowClr);
}


label, span.label {
    font-size: 15px;
    margin-bottom: 5px;
    display: block;
}

/* Input controls */
.number-controls .controls {
    border: 0;
    min-width: 0;
    padding: 0.5rem 1rem;
    font-size: 1.125rem;
    background-color: var(--lowClr);
    cursor: pointer;
    color: var(--lowTxtClr);
}

.number-controls input[type="number"] {
    text-align: center;
}

.input-group-button input {
    height: 100%;
}


.input-group-label {
    width: auto;
    color: #000;
    font-weight: 400;
    line-height: 1.4;
}

.input-group-label--left {
    padding-right: 0;
    border-right: 0;
    border-radius: 5px 0 0 5px;
}

.input-group-label--right {
    padding-left: 0;
    border-left: 0;
    border-radius: 0 5px 5px 0;
}

input.input-group-field--left{
    padding-right: 5px;
    border-radius: 5px 0 0 5px;
    border-right: none;
}

input.input-group-field--right{
    padding-left: 5px;
    border-radius: 0 5px 5px 0;
    border-left: none;
}


.enhance-add-all input,
.enhance-quantity,
.enhance-check {
    border: 1px solid var(--txtClr);
}

.enhance-quantity.selected,
.enhance-check input:checked + label {
    background-color: var(--txtClr);
    color: var(--bgClr);
    transition: 500ms;
}

.enhance-quantity.selected input {
    color: var(--bgClr);
    transition: 500ms;
}

/*
 * List Module
 * - Gives some base styles for lists
 */
.list {
    background-color: var(--bgShadeClr);
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-bottomright: 5px;
border-bottom-right-radius: 5px;
    width: 100%;
}

.list li {
    display: block;
    font-size: 15px;
}

.list--clean {
    list-style-type: none;
    margin-left: 0;
}

.list--clean ul,
.list--clean li {
    margin-left: 0;
    list-style-type: none;
}

.list--clean li {
    margin-bottom: 0;
    clear:both;
}

.list--clean-pad li {
    margin-bottom: 0.5em;
}

.list--clean-pad li:last-of-type {
    margin-bottom: 0;
}

.list--lined {
    list-style-type: none;
    margin-left: 0;
    margin-bottom: 0;
}

.list--lined li {
    border-bottom: 1px solid;
    border-color: var(--midClr);
    margin: 0;
    padding: 10px 20px;
}

.list--lined li:last-of-type {
    border-bottom: none;
}

.list--inner {
    padding-left: 20px;
    margin-bottom: 0;
}

.list--inner li.absorbed {
    margin-left: 1rem;
    border-left: 1px solid #2B3440;;
    padding-left: 5px;
}

.list--inline {
    margin: 0 auto 10px auto;
    list-style: none;
}

.list--inline li {
    float: left;
    margin-right: 10px;
}

.list--clean ul.list--inner li {
    margin-bottom: 2px;
}

#calendar .fc-widget-header.fc-first {
-webkit-border-top-left-radius: 5px;
-moz-border-radius-topleft: 5px;
border-top-left-radius: 5px;
}
#calendar .fc-widget-header.fc-last {
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topright: 5px;
border-top-right-radius: 5px;
}
#calendar td.fc-widget-header {
-webkit-border-top-left-radius: 5px;
-moz-border-radius-topleft: 5px;
border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topright: 5px;
border-top-right-radius: 5px;
    border: 0;
    background: var(--lowClr);
    color: var(--lowTxtClr);
}
#calendar .fc-view-container {
-webkit-border-top-left-radius: 5px;
-moz-border-radius-topleft: 5px;
border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topright: 5px;
border-top-right-radius: 5px;
    box-shadow: 0 0 10px 0 rgba(0,0,0,.7);
    -webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,.7);
    -moz-box-shadow: 0 0 10px 0 rgba(0,0,0,.7);
    -ms-box-shadow: 0 0 10px 0 rgba(0,0,0,.7);
    -o-box-shadow: 0 0 10px 0 rgba(0,0,0,.7);
}

.fc-event-title {
    word-wrap: break-word;
}

/*
 * Messages Module
 * - A variety of settings for messages
 */

.message,
.callout {
    border-style: solid;
    border-width: 3px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 1.4em;
    padding: 10px;
}

.callout .fa {
    margin-left: 1rem;
}

.callout p:last-of-type {
    margin-bottom: 0;
}

form li.message {
    padding: 8px;
}

.errors {
    margin-left: 0;
}

input.error,
.error {
    background-color: #f2dede;
    border-color: #eed3d7;
    color: #b94a48;
}

input.success, /* override the input[type=text] selector above */
.success {
    background-color: #dff0d8;
    border-color: #d6e9c6;
    color: #468847;
}

.warning {
    background-color: #d9edf7;
    border-color: #bce8f1;
    color: #3a87ad;
}

.info {
    background-color: #fced9a;
    border-color: #FAE257;
    color: #c6aa0a;
}

.highlight {
    background: var(--highClr);
    color: var(--highTxtClr);
}

#suppressMessage:hover {
    cursor:pointer;
}



/**
 * jQuery UI Styling overrides
 */
.ui-tooltip {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    background-color: var(--bgShadeClr);
    border-color: var(--highClr);
    box-shadow: 0 0 7px var(--lowClr);
    padding-left: 15px;
}
.ui-tooltip i.fa {
    color: var(--highClr);
    width: 25px;
}


/**
 * Room Type /Venue Letter Icons
 */
.letter {
    border: 3px solid;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
    font-weight: bolder;
    padding: 2px 5px;
    display: inline-block;
}

.letter.primary {
    border: 3px solid;
    text-decoration: underline;
}

.rounded {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}



div.breakdown .module__header .fa.active {
    color: var(--highClr);
}

.breakdown a {
    cursor: pointer;
}


/* Prevent iOS adding rounding to INPUT buttons */
.ipod input[type=submit],
.ipad input[type=submit],
.iphone input[type=submit] {
    -webkit-appearance: none;
}

/* Date picker shows over other elements */
.ui-datepicker {
    z-index: 10;
}

.text-uppercase {
    text-transform: uppercase;
}

.pagination a:hover,
.pagination button:hover {
    background: none;
}

.ui-datepicker-title select {
    height: auto;
    padding: .25rem 1.5rem .25rem .25rem;
}

.pagination a:hover,
.pagination button:hover {
    background: none;
}

@media screen and (max-width: 39.9375em) {

    .module-container--two-halves,
    .module-container--three-col {
        margin-left: 0;
        padding-right: .625rem;
        padding-left: .625rem;
    }

    .module-container--three-col .box,
    .container--three-col .col {
        width: 100%;
        margin-left: 0;
    }

    input[type=checkbox],
    input[type=file],
    input[type=radio],
    input[type=email],
    input[type=number],
    input[type=password],
    input[type=search],
    input[type=tel],
    input[type=text],
    input[type=number],
    input[type=date],
    input[type=time],
    textarea,
    select {
        font-size: 16px;
    }

    .form--standalone .form__contents {
        max-width: 100%;
    }

    .badge {
        width: 100%;
    }

    h3.sub-header.short {
        max-width: 100%;
    }
}

/* Fixes IE / Edge bug with icons that don't stop spinning after fa-spin is removed */
.fa:not(.fa-spin) {
    animation: none;
}


.hotel-logo {
    height: 86px;
}

/* Foundation Orbits */
.orbit-bullets button {
    background-color: var(--bgShadeTxtClr);
}

.orbit-bullets button.is-active,
.orbit-bullets button:hover {
    background-color:  var(--highClr);
}

/* Tabs */
.tabs-title>a:focus,
.tabs-title>a[aria-selected=true],
.tabs-panel {
    background-color: var(--bgClr);
}

.tabs-title>a,
.tabs-title>a:focus,
.tabs-title>a[aria-selected=true] {
    border-bottom: none;
    font-weight: bold;
    color: var(--txtClr);
}

.grid-x.rates {
    border: 1px solid var(--bgTxtClr);
    background-color: var(--bgShadeClr);
}

/* Accordion */
.box a.accordion-title {
    border-color: var(--bgClr);
    color: var(--txtClr);
}

.accordion-content,
.accordion-title:focus,
.accordion-title:hover {
    background-color: var(--bgShadeClr);
}

.heading {
    font-size: 1.375rem;
    font-weight: bold;
    text-transform: uppercase;
}

.badge {
    border-radius: 0;
    background-color: var(--lowClr);
    font-size: 0.8rem;
    color: var(--lowTxtClr);
}

.badge.block {
    display: block;
}

/* Last room ribbon */
.last-room {
    background-color: var(--lowClr);
    color: var(--lowTxtClr);
}

/* Bring the last column to the left */
.column:last-child:not(:first-child),
.columns:last-child:not(:first-child) {
    float: left;
}

.booking-topbar {
    background-color: var(--bgTxtClr);
}

/* Progress bar */
.progress-bar .item div {
    border: 1px solid var(--lowClr);
    color: var(--lowClr);
    background: var(--highTxtClr);
}

.progress-bar .item.active div {
    background: var(--highClr);
    color: var(--highTxtClr);
}

.callout {
    color: var(--txtClr);
}

.enhance-controls .item:not(.slick-current):not(.current) h4 {
    background-color: var(--bgClr);
}

/*
.enhance-controls .item.slick-current h4,
.enhance-controls .item.current h4 {
    background-color: var(--lowClr);
    color: var(--lowTxtClr);
}
*/

.summary-room .room-price {
    border-bottom: 1px solid var(--lowClr);
}

.toast {
    position: fixed;
    z-index: 1;
    right: 0;
    bottom: 10px;
    margin-right: 20px;
    margin-left: -100px;
    box-shadow: 0px 0px 24px -1px rgba(56, 56, 56, 1);
    border-radius: 2px;
    width:200px;
    height:auto;
    padding:10px;
    background-color: #383838;
    font-size: 1.2rem;
    text-align:center;
    color: #fff;
}

.toast strong {
    color: orange;
}

.toast .fa-close {
    cursor: pointer;
}

/* Table code for reservations page, perhaps for all tables */
.reservation-table thead tr th {
    background: #D9DADC;
}

.reservation-table tbody tr td {
    padding: 15px;
    border-top: 1px  solid #e6e6e6;
}

.reservation-table tbody tr:nth-child(odd) {
    background: #f3f3f3;
}

.reservation-table thead tr .booking-id,
.reservation-table tbody tr .booking-id {
    text-align: right;
}

.reservation-table tbody tr a {
    border: none;
}

.reservation-table tbody tr a,
.reservation-table tbody tr .editReservation {
    color: #0954AB;
}
.reservation-table tbody tr .editReservation div{
    text-align: center;
}
.reservation-table tbody tr a:hover,
.reservation-table tbody tr .editReservation div:hover {
    border-bottom: 1px solid #2B3440;
}

.reservation-table tbody tr:hover {
    background: #F5F8FC;
}

.reservation-table .status-1 {
    color: #2a4826;
    padding: 3px 6px;
    border-radius: 10px;
    background-color: #d2f0cd;
    text-align: center;
}

.reservation-table .status-0 {
    color: #ffe0e0;
    padding: 3px 6px;
    border-radius: 10px;
    background-color: #6f2323;
    text-align: center;
}


.lightbox {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 50;
    background: rgba(0, 0, 0, .5);
}

/* add a blur effect for pop-ups */
.blur {
    filter: blur(4px);
    transition: filter .5s ease-in-out;
}

.modal,
.modal .loader-wrapper {
    background: var(--bgClr);
}

.modal .titlebar,
.modal .titlebar .close-wrapper,
.modal .titlebar .refund-back-btn-wrapper {
    background: var(--lowClr);
    color: var(--lowClr);
}

.loader .ball {
    background: var(--lowClr);
}

.modal .titlebar .title,
.step.transactions button.disabled,
.step.transactions button.disabled,
.step .successful .success-img,
.step .failure .failure-img {
    color: var(--lowTxtClr);
}

.step-button:hover,
.refund-button:hover {
    background: rgba(37, 46, 55, .2);
    color: #333;
}

#ui-datepicker-div {
    z-index: 505 !important;
}

.password-box {
	margin-bottom: 20px;
}

.password-box > ul,
.password-box > ul li {
    list-style-type: square;
    margin-left: 15px;
    margin-bottom: 6px;
    font-size: 14px;
}

.export button {
    width: 100%;
}



.context-menu-list{
    font-size: 1rem !important;
}

/* Status tags */
.status-tag {
    /*border: 1px solid;*/
    border-radius: 10px;
    padding: 4px 10px;
    text-align: center;
    font-weight: bold;
}

/** Good, Active, Success etc **/
.status-tag.active, .status-tag.creating, .status-tag.verified {
    color: #6fa968;
    border-color: #6fa968;
    background-color: #d2f0cd;
}

/** Bad, Deleted, Failure, Cancelled etc **/
.status-tag.deleting, .status-tag.deleted, .status-tag.cancelled, .status-tag.unverified {
    color: #a96868;
    border-color: #a96868;
    background-color: #f0cdcd;
}

/** No-show etc **/
.status-tag.no-show {
    color: #a7a940;
    border-color: #a7a940;
    background-color: #f9ffa2;
}


/************************
 * Media Manager form
 ************************/

.media-manager__form {
    display: inline-block;
}

.media-manager__add-button {
    display: block;
    text-align: right;
    cursor: pointer;
}

.media-manager__add-button--box {
    color: var(--midTxtClr);
    text-indent: -9999em;
    border: 2px solid var(--midTxtClr);
    opacity: .7;
    overflow: hidden;
}

.media-manager__add-button--box:hover{
    opacity: 1;
}

.media-manager__add-button--box,
.media-manager__item {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin: .1em 0;
    padding: 0;
    width: var(--attachmentSize);
    height: var(--attachmentSize);
    font-size: var(--attachmentFontSize);
    text-align: center;
    background-color: var(--midClr);
    transition: all .25s ease-in-out;
}

.media-manager__add-button--box .icon,
.media-manager__item .icon{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-indent: 0;
}

.media-manager__items {
    list-style: none;
    display: inline-block;
    margin: 0;
    padding: 0;
}

.media-manager__item {
    margin-left: .1rem;
    margin-right: .1rem;
    cursor: pointer;
}

.media-manager__item--deleted,
.media-manager__item--deleted * {
    cursor: not-allowed;
}

.media-manager__item--deleted:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(218, 0, 0, .5);
}

.media-manager__item--deleted .media-manager__item-options-button{
    display: none;
}

.media-manager__item:hover .media-manager__item-options-button {
    opacity: 1;
}

.media-manager__item-options-button {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    min-width: 2em;
    max-width: 100%;
    text-align:center;
    background-color: #fff;
    border-radius: 2px;
    box-shadow: -1px 1px 5px rgba(0, 0, 0, .5);
    opacity: 0;
    transition: all .25s ease-in-out;
}

.media-manager__item-options-button:hover .media-manager__item-options {
    opacity: 1;
    top: 100%;
    left: auto;
    right: 0;
}

.media-manager__item-options {
    position: absolute;
    top: -9999em;
    left: -9999em;
    opacity: 0;
    margin: 0;
    padding: 0 .5em;
    text-align: left;
    background-color: #fff;
    box-shadow: -3px 3px 3px rgba(0, 0, 0, .5), 3px 3px 3px rgba(0, 0, 0, .5);
    transition: opacity .25s ease-in-out;
    list-style-type: none;
    white-space: nowrap;
}

.media-manager__item-options li {
    margin: 1em 0;
    padding: 0;
}

.media-manager__item-thumbnail {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.media-manager__item-thumbnail img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    max-width: none;
    height: 100%;
}

.media-manager__item-thumbnail--portrait img {
    width: 100%;
    height: auto;
}

.media-manager__preview {
    font-size: 1rem;
    text-align: center;
}

.media-manager__preview img {
    display: block;
    margin: 0 auto;
    padding: 0;
    max-width: 100%;
    height: auto;
}

.media-manager__preview .icon{
    margin-bottom: 1rem;
    font-size: 10rem;
}

.alert-subtle {
    padding: 1rem;
    text-align: center;
    border: 1px solid;
    background-color: rgba(var(--txtClrRed), var(--txtClrGreen), var(--txtClrBlue), .05);
    border-color: rgba(var(--txtClrRed), var(--txtClrGreen), var(--txtClrBlue),.1);
    color: rgba(var(--txtClrRed), var(--txtClrGreen), var(--txtClrBlue),.5);
}

/* reduce spacing for buttons on events modal */
div.jqi .jqibuttons button {
    padding:15px 15px !important;
}

.headline {
    text-align: center;
    margin-bottom: 1.4em;
}

.postfix {
    margin-top: 1em;
}

/* Group Hotel Settings */
.group-settings {
    /*background-color: #eaeaea;*/
}
.group-settings p {
    margin-bottom: 0;
}
.group-settings .pad20 {
    padding: 20px;
}

i.disabled {
    color: var(--bgClr);
}