/*
octotable.css
Copyright (C) 2017 Octorate srl, all rights reserved.
*/

/* ------------- common ------------- */

.gray {
    color: #999
}

.red {
    color: #F44336
}

.green {
    color: #4AA564
}

.white {
    color: #fff
}

.blue {
    color: #0071bc
}

.orange {
    color: #fe875d !important
}

.purple {
    color: #9f4488 !important
}

.orange-back {
    background-color: #fe875d
}

.purple-back {
    background-color: #9f4488
}

.blue-back {
    background-color: #0071bc
}

.green-back {
    background-color: #4AA564
}

.red-back {
    background-color: #F44336
}

.white-back {
    background-color: rgba(255, 255, 255, 0.7)
}

.yellow {
    color: #FBCE60
}

.icon-gray {
    color: #252c36;
    font-size: 22px
}

.float-l {
    float: left
}

.float-r {
    float: right
}

.ov-auto {
    overflow: auto
}

.text-r {
    text-align: right
}

.text-c {
    text-align: center
}

.mar-0 {
    margin: 0 !important
}

.mar-t-5 {
    margin-top: 5px !important
}

.mar-t-10 {
    margin-top: 10px !important
}

.mar-t-16 {
    margin-top: 16px !important
}

.mar-t-20 {
    margin-top: 20px !important
}

.mar-b-5 {
    margin-bottom: 5px !important
}

.mar-r-5 {
    margin-right: 5px !important
}

.mar-r-10 {
    margin-right: 10px !important
}

.mar-r-20 {
    margin-right: 20px !important
}

.mar-l-5 {
    margin-left: 5px
}

.hei-20 {
    height: 20px
}

.hei-30 {
    height: 30px
}

.hei-100 {
    height: 100px
}

.hei-200 {
    height: 200px
}

.pad-10 {
    padding: 10px !important
}

.pad-l-5 {
    padding-left: 5px;
}
.pad-t-10 {
    padding-top: 10px;
}

.padv10 {
    padding: 10px 0 !important
}

.wid-10 {
    width: 10px
}

.wid-20 {
    width: 20px
}

.wid-30 {
    width: 30px
}

.wid-40 {
    width: 40px
}

.wid-60 {
    width: 60px
}

.wid-70 {
    width: 70px
}

.wid-80 {
    width: 80px
}

.wid-90 {
    width: 90px
}

.wid-100 {
    width: 100px
}

.wid-120 {
    width: 120px
}

.wid-140 {
    width: 140px
}

.wid-200 {
    width: 200px
}

.wid-300 {
    width: 300px
}

.wid-400 {
    width: 400px
}

.wid-full {
    width: 100%
}

.max-w-400 {
    max-width: 400px
}

.font-b {
    font-weight: bold
}

.font-i {
    font-style: italic
}

.stroke {
    text-decoration: line-through
}

.fs-12 {
    font-size: 12px
}

.fs-18 {
    font-size: 18px
}

.fs-24 {
    font-size: 24px
}

.fs-32 {
    font-size: 32px
}

.fs-40 {
    font-size: 40px
}

.display-no {
    display: none
}

.display-block {
    display: block
}

.inline-block {
    display: inline-block
}

.lh-28 {
    line-height: 28px
}

.valign-mid {
    vertical-align: middle
}

.valign-top {
    vertical-align: top
}

.ajax-status {
    position: fixed;
    z-index: 999999;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.2)
}

.position-a {
    position: absolute !important
}

.ajax-status svg {
    position: absolute;
    bottom: 30px;
    right: 30px
}

.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}

/* ------------- components ------------- */

.ui-fluid .ui-selectonemenu {
    min-width: auto !important
}

.ui-selectonemenu-panel .ui-selectonemenu-items-wrapper {
    overflow-y: auto;
    overflow-x: hidden
}

.ui-inputnumber.text-c input {
    text-align: center
}

.ui-button.red-btn {
    background-color: #F44336;
    border-color: #F44336;
    color: #ffffff
}

.ui-button.red-btn.ui-state-hover {
    background-color: #C62828;
    border-color: #C62828
}

.ui-button.red-btn.ui-state-focus {
    outline: 0 none;
    background-color: #f77066;
    border-color: #f77066
}

.ui-accordion .ui-accordion-content {
    margin-bottom: 8px !important
}

.ui-selectonemenu .ui-selectonemenu-label {
    font-size: large
}

body .ui-button.green-btn {
    border: 1px solid #4AA564
}

body .ui-widget,
body .ui-widget .ui-widget {
    font-size: large
}

body .ui-inputfield {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px
}

body .ui-corner-all {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px
}

body .ui-button {
    color: #ffffff;
    background-color: #b45706;
    border: 1px solid #b45706;
    border-radius: 5px;
    font-size: 18px;
    font-weight: 400;
    text-transform: uppercase;
}

body .ui-button.ui-state-hover,
body .ui-button.ui-state-focus {
    background-color: #d96805;
    border-color: #d96805
}

body .ui-selectmanymenu.smallcheck .ui-selectlistbox-item > td:first-child {
    width: 28px;
    padding-right: 0
}

/* ------------- site ------------- */
.ui-datepicker-calendar td.C a {
    background: #ae0d0d !important;
    color: #6a0404
}

.ui-datepicker-calendar td.L a {
    background: #e89a07 !important;
    color: #6a0404
}

.ui-datepicker-calendar td span {
    text-align: center !important
}

body {
    font-size: 18px;
    color: #252c36;
    min-width: 360px;
    background-color: transparent !important;
}

body a {
    color: #252c36
}

.card {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: #fff;
    padding: 16px;
}

.header {
}

.welcome {
}

.selection {
}

.reservation-summary {
}

.reservation-unavailable {
}

.room-selection {
}

.room-summary {
}

.order-summary {
}

.customer {
}

.room-payment {
}

.delivery-payment {
}

.special-request {
}

.reservation-confirm {

}

.card h1 {
    margin-top: 0 !important
}

.card-map {
    overflow-x: scroll;
    padding: 0
}

.card-map > div {
    position: relative;
    overflow: hidden
}

.card-map .tb {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    bottom: 0;
    right: 0;
    background-size: 100% 100%;
    box-sizing: border-box;
}

.card-map .tb.off {
    opacity: 0.4
}

.card-map .tb .title {
    position: absolute;
    top: 50%;
    left: 5px;
    right: 5px;
    text-align: center;
    transform: translateY(-50%);
    font-size: 0.8em;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    border-radius: 5px
}

.card-map .tb.off > .title {
    font-style: italic;
    background-color: rgba(150, 150, 150, 0.6)
}

.card-map .bg {
    display: block;
    box-sizing: border-box
}

.card-map .bg:hover,
.card-map .bg.sel {
    background-color: rgba(223, 190, 9, 0.8);
    border-radius: 20px
}

.card-map .bg:hover .title,
.card-map .bg.sel .title {
    background-color: #DFBE09;
    color: #000
}

.zoom25, .zoom25 .title {
    font-size: 0.2rem !important
}

.zoom50, .zoom50 .title {
    font-size: 0.5rem !important
}

.zoom75, .zoom75 .title {
    font-size: 0.8rem !important
}

.wait-msg {
    background-color: #666;
    border-radius: 3px;
    color: #fff;
    padding: 5px
}

.site-topbar {
    padding: 10px;
    height: 53px;
    box-sizing: border-box
}

.site-main {
    min-width: 360px;
    position: absolute;
    top: 5%;
    left: 0;
    right: 0
}

.site-main > .ui-g {
    margin-bottom: 5px
}

.fixed-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0 20px;
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 0 0 10px #000;
}

.fixed-bottom > button {
    margin: 10px;
    padding: 20px !important
}

.logo {
    padding: 9px 0 5px 0;
    min-height: 38px;
    box-sizing: border-box
}

.logo img {
    height: 20px
}

.prop-logo {
    float: right;
    max-width: 200px;
    max-height: 120px
}

.menu-img {
    max-width: 50px;
    max-height: 50px
}

.status-box {
    padding: 5px;
    border-radius: 10px
}

td.bord {
    border-bottom: 1px dotted #aaa
}

.bord-round {
    border-radius: 5px;
    box-shadow: inset 2px 2px 3px #333
}

.price {
    font-size: 0.8em;
    color: #b45706
}

.card-menu td {
    padding-bottom: 10px;
    vertical-align: top
}

.delivery-legend {
    display: inline-block;
    margin: 0 20px 10px 0;
    font-size: 0.8em
}

.delivery-legend i {
    display: inline-block;
    width: 20px
}

.allergens {
    margin: 0
}

.allergens > div {
    display: inline-block;
    margin: 20px 0 0 20px;
    font-size: 0.8em
}

.allergens img {
    height: 15px;
    vertical-align: middle
}

.card-menu .article-img {
    float: left;
    border-radius: 5px;
    height: 40px;
    width: 40px;
    margin-right: 5px
}

.card-menu .cat-img {
    border-radius: 5px;
    height: 40px;
    width: 40px;
    margin-right: 5px;
    vertical-align: middle
}

body .ui-dialog.article-dialog {
    top: 20px !important
}

.article-descr {
    width: 400px
}

.article-descr .article-bg {
    background-size: cover
}

.article-descr h1 {
    margin: 0;
    padding: 0;
    font-size: 1.5em
}

.article-descr .allergens > div {
    margin: 10px 10px 0 0
}

.article-descr .price {
    font-size: 1.5em
}

.article-descr .article-photo {
    max-height: 250px;
    max-width: 100%
}

/*.article-close {position:absolute;bottom:10px;left:10px}*/

.table-empty {
    border-spacing: 0;
    border-collapse: collapse
}

.fright {
    float: right
}

.image-bg {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent;
}

body.widget-no .image-bg {
    background-image: url(/otb/resources/common/images/background.jpg)
}

body.widget-no .card {
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 10px #000
}

body .card-menu .ui-accordion .ui-accordion-content {
    padding-right: 0
}

body .ui-growl {
    top: 20px
}

body .ui-growl .ui-growl-item-container.ui-growl-info {
    background-color: #0071bc;
    color: #fff
}

.Lang {
    width: 16px;
    height: 11px;
    display: inline-block;
    background-image: url(/otb/resources/common/images/langs.jpg);
    background-repeat: no-repeat;
    padding: 0;
    margin: 0 10px 0 0;
}

LangIT {
    background-position: 0 0
}

.LangEN {
    background-position: -16px 0
}

.LangFR {
    background-position: -32px 0
}

.LangES {
    background-position: -48px 0
}

.LangDE {
    background-position: -64px 0
}

.LangRU {
    background-position: -80px 0
}

.LangPT {
    background-position: -96px 0
}

.LangNL {
    background-position: -112px 0
}

.LangJA {
    background-position: -128px 0
}

.LangEL {
    background-position: -144px 0
}

.LangTR {
    background-position: -160px 0
}

.LangZH {
    background-position: -176px 0
}

.LangCA {
    background-position: -192px 0
}

.LangRO {
    background-position: -208px 0
}

@media (max-width: 500px) {
    body .ui-dialog.article-dialog {
        top: 10px !important;
        right: 10px !important;
        left: 10px !important;
        bottom: 10px !important;
    }

    .article-descr {
        width: 100%
    }
}

@media (max-width: 999px) {
    body .card-menu .ui-accordion .ui-accordion-content {
        padding-left: 0
    }

    .prop-logo {
        max-width: 100px;
        max-height: 60px
    }

    .fixed-bottom {
        padding: 0 10px
    }

    .fixed-bottom > button {
        margin: 10px 0;
        padding: 10px 0 !important
    }

    /*.article-img {display:none}*/
    .card {
        padding: 8px !important
    }

    .card-map {
        padding: 0 !important
    }
}

@media (min-width: 1000px) {
    body.widget-no .card {
        background: rgba(255, 255, 255, 0.7)
    }

    body.widget-no .site-main {
        left: 20%;
        right: 20%
    }
}

@media (min-width: 1200px) {
    body.widget-no .site-main {
        left: 5%;
        right: 45%
    }
}

.GreenBack {
    background-color: #2BB673 !important;
}

/** Credit Cards **/
.credit-card {
    width: 300px;
    height: 200px;
    background-color: #1e449f;
    border-radius: 10px;
    padding: 20px;
    color: #ffffff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.card-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.card-brand,
.card-type {
    font-size: 24px;
    font-weight: bold;
}

.card-issuer {
    font-size: 18px;
    margin-bottom: 15px;
}

.card-number {
    font-size: 20px;
    letter-spacing: 2px;
    margin-bottom: 15px;
}

.card-info {
    display: flex;
    justify-content: space-between;
}

.card-holder,
.card-expiry {
    font-size: 16px;
    font-weight: bold;
}

.card-cvc {
    display: flex;
    align-items: center;
}

.mar-auto {
    margin: auto;
}

/** End Credit Cards **/