*
{
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

button
{
    font: inherit;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    border: none;
    background: transparent;
}

html
{
    --container: 1392px;
    --scrollbarWidth: 17px;
    --c-surface-accent: #215056;
    --c-text-accent: #215056;
    --c-surface-accent-hovered: #A37555;
    --c-text-accent-hovered: #A37555;
    --c-surface-primary: #EDF4F4;
    --c-surface-subdued: #e9eeee;
    --c-surface-subdued-hovered: #a4b7ba;
    --c-surfice-accent-opacity: #d9c6b9;
    --c-surface-primary-hovered: #d9c6b9;
    --c-surface-default: #fff;
    --c-text-dark: #202e2c;
    --c-text-white: #fff;
    --transition: .18s ease-in-out;
}

@font-face
{
    font-family: 'icomoon';
    font-weight: normal;
    font-style: normal;

    src: url('../fonts/icomoon/icomoon.eot');
    src: url('../fonts/icomoon/icomoon.eot') format('embedded-opentype'), url('../fonts/icomoon/icomoon.ttf') format('truetype'), url('../fonts/icomoon/icomoon.woff') format('woff'), url('../fonts/icomoon/icomoon.svg') format('svg');
    font-display: block;
}

[class^='icon-'],
[class*=' icon-']
{
    font-family: 'icomoon' !important;
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    line-height: 1;

    text-transform: none;

    speak: never;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-ic24-plus:before
{
    content: '\e9ba';
}

.icon-ic24-minus:before
{
    content: '\e99d';
}

a[href],
.button
{
    cursor: pointer;
    -webkit-transition: .3s ease-out;
    -o-transition: .3s ease-out;
    transition: .3s ease-out;

    -webkit-text-decoration-skip-ink: none;
    text-decoration-skip-ink: none;
}


/* Common styles for button */
.button
{
    font-size: 16px;
    font-weight: 500;
    line-height: 1.1;

    position: relative;
    z-index: 1;

    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    overflow: hidden;

    width: -webkit-fit-content;
    width:    -moz-fit-content;
    width:         fit-content;
    padding: 12px 24px;

    cursor: pointer;
    -webkit-transition: var(--transition);
    -o-transition: var(--transition);
    transition: var(--transition);

    border: 2px solid transparent;

    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: .4em;
}
@media(max-width: 768px){
    .button {
        padding: 8px 12px;
    }
}
.button span
{
    font-weight: 400;
    line-height: 1.1;

    position: relative;
    z-index: 2;

    -webkit-transition: var(--transition);
    -o-transition: var(--transition);
    transition: var(--transition);
    text-align: center;
    white-space: nowrap;

    color: inherit;
}
.button span[class^='icon-'],
.button span[class*=' icon-'],
.button svg[class^='icon']
{
    line-height: 1.1;

    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: center;

    width: 1.1em;
    height: 1.1em;

    -webkit-transition: var(--transition);
    -o-transition: var(--transition);
    transition: var(--transition);

    color: inherit;

    aspect-ratio: 1 / 1;
}
.button span[class^='icon-']:only-child,
.button span[class*=' icon-']:only-child,
.button svg[class^='icon']:only-child
{
    margin: 0 -11px;
}
@media(max-width: 768px){
    .button span[class^='icon-']:only-child,
    .button span[class*=' icon-']:only-child,
    .button svg[class^='icon']:only-child {
        margin: 0 -6px;
    }
}

/* Button appearance */
.button.button-filled
{
    position: relative;

    color: var(--filled-c-base);
    border-color: var(--filled-bc-base);
    border-radius: var(--border-corner);
    background: var(--filled-bgc-base);
}
.button.button-filled:hover,
.button.button-filled:focus,
.button.button-filled:active
{
    color: var(--filled-c-hover);
    border-color: var(--filled-bc-hover);
    background: var(--filled-bgc-hover);
}

.button.button-outlined
{
    color: var(--outlined-c-base);
    border-color: var(--outlined-bc-base);
    border-radius: var(--border-corner);
    /*border-radius: 12px;*/
    background-color: transparent;
}
.button.button-outlined:hover,
.button.button-outlined:focus,
.button.button-outlined:active
{
    color: var(--outlined-c-hover);
    border-color: var(--outlined-bc-hover);
    background-color: var(--outlined-bgc-hover);
}

.button.button-link
{
    color: var(--link-c-base);
    /*border-color: var(--c-surface-default);*/
    border-radius: var(--border-corner);
    background: transparent;

    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}
.button.button-link:visited
{
    opacity: .8;
}
.button.button-link:hover,
.button.button-link:focus,
.button.button-link:active
{
    color: var(--link-c-hover);
}

/* Button  colors  */
.button.button-accent
{
    --filled-bgc-base: var(--c-surface-accent);
    --filled-bc-base: var(--c-surface-accent);
    --filled-c-base: var(--c-text-white);
    --filled-bgc-hover: var(--c-surface-accent-hovered);
    --filled-bc-hover: var(--c-surface-accent-hovered);
    --filled-c-hover: var(--c-text-white);
    --outlined-bc-base: var(--c-surface-primary);
    --outlined-c-base: var(--c-surface-accent);
    --outlined-bgc-hover: var(--c-surface-accent);
    --outlined-bc-hover: var(--c-surface-accent);
    --outlined-c-hover: var(--c-text-white);
    --link-bgc-hover: var(--c-surface-default);
    --link-bc-hover: var(--c-surface-default);
    --link-c-base: var(--c-text-accent);
    --link-c-hover: var(--c-text-accent-hovered);
}
.button.button-primary
{
    --filled-bgc-base: var(--c-surface-subdued);
    --filled-bc-base: var(--c-surface-subdued);
    --filled-c-base: var(--c-text-dark);
    --filled-bgc-hover: var(--c-surface-subdued-hovered);
    --filled-bc-hover: var(--c-surface-subdued-hovered);
    --filled-c-hover: var(--c-text-dark);
    --outlined-bc-base: var(--c-surface-primary);
    --outlined-c-base: var(--c-text-dark);
    --outlined-bgc-hover: var(--c-surface-subdued-hovered);
    --outlined-bc-hover: var(--c-surface-subdued-hovered);
    --outlined-c-hover: var(--c-text-dark);
    --link-bgc-hover: var(--c-surface-default);
    --link-bc-hover: var(--c-surface-default);
    --link-c-base: var(--c-text-dark);
    --link-c-hover: var(--c-text-disabled);
}

.booking
{
    position: relative;

    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    padding: 8px;

    border: solid 1px rgba(255, 255, 255, .15);
    border-radius: var(--border-corner);
    background-color: var(--c-surface-default);
    -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, .2), 0 26px 80px rgba(0, 0, 0, .2);
    box-shadow: 0 0 1px rgba(0, 0, 0, .2), 0 26px 80px rgba(0, 0, 0, .2);

    gap: 8px;
}
@media (max-width: 992px)
{
    .booking
    {
        flex-direction: column;

        max-width: calc(100vw);
        margin: var(--g-content) auto;

        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        -webkit-box-align: stretch;
        -ms-flex-align: stretch;
        align-items: stretch;
        box-shadow: none;
        -webkit-box-shadow: none;
    }
}
.booking input
{
    border: none;
    outline: none;
}
.booking input[type='number']
{
    -webkit-appearance: textarea;
    -moz-appearance: textfield;
}
.booking input::-webkit-outer-spin-button,
.booking input::-webkit-inner-spin-button
{
    margin: 0;

    -webkit-appearance: none;
}
@media (min-width: 992px)
{
    .booking .booking__button
    {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 fit-content;
        flex: 0 0 fit-content;
    }
    .booking .booking__room
    {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 30%;
        flex: 1 1 30%;
    }
    .booking .booking__calendar
    {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 50%;
        flex: 1 1 50%;
    }
}
.booking__calendar
{
    position: relative;

    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    gap: 8px;
}
.booking__calendar-item
{
    font-weight: 400;

    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    width: 100%;
    min-height: 100%;
    padding: 12px 16px;

    cursor: pointer;

    border-radius: var(--border-corner);
    background-color: var(--c-surface-subdued);

    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}
.booking .booking__button .button
{
    width: 100%;
}

.booking__guests{
    position: relative;
    flex-shrink: 1;
    flex-grow: 1;
}
.booking__guests-popover{
    position: absolute;
    display: none;
    background-color: var(--c-surface-default);
    border-radius: var(--border-corner);
    padding: 12px;
    -webkit-box-shadow: 0 3px 6px -3px rgba(23, 24, 24, .08), 0 8px 20px -4px rgba(23, 24, 24, .12);
    box-shadow: 0 3px 6px -3px rgba(23, 24, 24, .08), 0 8px 20px -4px rgba(23, 24, 24, .12);
    z-index: 10;
}
.litepicker .container__months {
    -webkit-box-shadow: 0 3px 6px -3px rgba(23, 24, 24, .08), 0 8px 20px -4px rgba(23, 24, 24, .12);
    box-shadow: 0 3px 6px -3px rgba(23, 24, 24, .08), 0 8px 20px -4px rgba(23, 24, 24, .12);
}
.booking__guests-popover.is_active {
    display: block;
}
.booking__guests-input{
    font-weight: 400;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    min-height: 100%;
    padding: 12px 16px;
    cursor: pointer;
    border-radius: var(--border-corner);
    background-color: var(--c-surface-subdued);
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    text-overflow: ellipsis;
    overflow: hidden;
    color: var(--c-text-subdued);

}
#booking__guests_input {
    color: var(--c-text-default);
}
.booking__guests-popover-input{
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
}

.booking__guests-popover-input-number{
    width: 4em;
    text-align: center;
}
.booking__guests-popover-item{
    margin-bottom: 16px;
}
#booking__guests_input{
    margin: 0 1em ;
    width: 4em;
}
.booking__guests-popover-children.is_hidden {
    display: none;
}
.booking__guests-popover-children{
    margin: 16px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.booking__guests-popover-children-select-item {
    font-weight: 400;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    min-height: 100%;
    padding: 12px 16px;
    cursor: pointer;
    border-radius: var(--border-corner);
    /*background-color: var(--c-surface-subdued);*/
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    text-overflow: ellipsis;
    overflow: hidden;
    outline: none;
    border: none;
    flex-grow: 1;
}
.booking__guests-popover-children-select {
    display: flex;
    align-items: center;
    gap: 12px;
}
.booking__guests-popover-children-selects{
    display: flex;
    flex-direction: column;
    gap: 10px
}
.booking__guests-popover-children-select span {
    white-space: nowrap;
}

.booking__calendar-promocode{
    padding:0;
}

.booking__guests-count{
    color:#777;
}