﻿/* Extra small devices (phones, less than 768px) */
body {
    font-family: 'Roboto', sans-serif;
}

.navbar-default {
    border: none;
    /*border-radius:4px;*/
    background: transparent url("/images/header-bg.jpg") no-repeat top left;
    /*background-image:url(~/imgs/header-bg.png);*/
}


a.logo.navbar-btn {
    width: 100%;
    text-align: center;
}

a.name.navbar-brand {
    color: #fff;
    font-weight: bold;
    font-size: 2em;
    text-align: center;
    width: 100%;
}

    a.name.navbar-brand:hover {
        color: #fff;
    }

.page-reservation-wizard h1.page-header {
    /*font-size: 1.6em;*/
    /*text-align: center;*/
}

ul.list-inline.sek-wizard-navigation-list {
    margin-left: 0px;
    text-align: center;
    margin-bottom: 0px;
}

    ul.list-inline.sek-wizard-navigation-list li {
        padding-right: 0px;
        padding-left: 0px;
        margin-bottom: 10px;
    }

        ul.list-inline.sek-wizard-navigation-list li span.label {
            font-size: 90%;
        }

.reservation-current-selections {
    padding: 5px 15px;
}

.instructions-wrapper {
    color: #444;
    font-weight: bold;
    font-size: 1.2em;
    text-align: left;
    padding: 15px 15px;
}

.navbar.container, .navbar.container-fluid {
    margin-top: 0px;
}

.reservation-period-selector-wrapper,
.accommodation-selector-wrapper {
    margin: 20px 0px;
    box-shadow: 0px 0px 10px #1a2f70;
    border: 2px solid #1a2f70;
    padding-bottom: 20px;
}

.appartment-card.active,
.reservation-period-selector-wrapper.active,
.accommodation-selector-wrapper.active {
    cursor: pointer;
    /*border-color: #027b2d;
    box-shadow: 0px 0px 10px #027b2d;*/
}

.reservation-period-selector-wrapper h2 {
    font-size: 24px;
    text-align: center;
}

.reservation-period-body {
    text-align: center;
    padding: 0px 10px 15px 10px;
}

.reservation-period-dates {
    text-align: center;
    font-weight: 800;
    font-size: 15px;
}

.reservation-period-selector-wrapper img {
    width: 100%;
}

#sek-reservation-wizard-form #edit-next {
    float: none !important;
    margin: 0 auto;
    width: 50%;
    display: block;
    margin-bottom: 40px;
}

.reservation-current-selections ul {
    list-style-type: none;
    padding-left: 10px;
}

    .reservation-current-selections ul span.glyphicon {
        padding-right: 10px;
        color: #337ab7;
    }

#sek-reservation-wizard-form .form-type-date-popup label {
    display: block;
}

.sortable-order {
    text-align: center;
    font-size: 2em;
    font-weight: bold;
    color: green;
    min-height: 40px;
}

#sortable .inactive-option {
    opacity: 0.5;
}

.date-range-selector-wrapper {
    text-align: center;
}

    .date-range-selector-wrapper h2 {
        font-size: 1em;
    }

    .date-range-selector-wrapper .date-selection-range-sep {
        display: block;
    }

.node-type-accommodation .field-name-field-main-image {
    display: block;
    width: 100%;
    margin-bottom: 10px;
}

.node-type-accommodation .field-name-body {
    display: block;
    width: 100%;
}

.node-type-accommodation .field-name-field-gallery .field-item {
    display: inline-block;
    width: 50%;
    padding: 0px 3px;
}

.field-name-field-gallery {
    margin-top: 10px;
}

.field-name-field-address, .field-name-field-manager, .field-name-field-phone, .field-name-field-fax {
    margin: 10px 0px;
}

.accommodation-selector-wrapper h2 {
    font-size: 20px;
    padding: 5px;
    text-align: center;
    font-weight: 800;
    min-height: auto;
}

.accommodation-selector-wrapper .accommodation-body {
    min-height: auto;
    text-align: center;
    font-size: 15px;
}

.reservation-current-selections li {
    border-bottom: 1px solid #ddd;
    padding-bottom: 5px;
    margin-bottom: 5px;
}

    .reservation-current-selections li:last-child {
        border-bottom: 0px solid #ddd;
    }

.accommodation-details {
    padding: 5px 0px;
    font-size: 16px;
    font-weight: 800;
}

.container-inline-date .form-item {
    width: 100%;
}

.container-inline-date .date-padding {
    float: left;
    width: 100%;
    margin-bottom: 10px;
}

.container-inline-date .form-item input {
    width: 100%;
}

.stoyntio {
    border: 2px solid #1a2f70;
    box-shadow: 0px 0px 10px #1a2f70;
    padding: 10px;
    margin-bottom: 10px;
}

  /*  .stoyntio.active {
        border-color: #027b2d;
        box-shadow: 0px 0px 10px #027b2d;
    }*/

.apartment-bubble.stoyntio {
    background-image: url("../images/step5/mono-bg.png");
    background-repeat: no-repeat;
    background-position: center top;
    border: 0px solid;
    height: 42px;
    box-shadow: 0px 0px;
}

.stoyntio h2 {
    margin: 5px 0px 5px 0px;
    font-size: 20px;
    font-weight: 800;
    text-align: center;
}

.apartment-count {
    padding: 5px 0px 10px;
    text-align: center;
    font-weight: 600;
}

.apartment-body ul {
    padding-left: 20px;
}

.stoyntio .form-type-checkbox {
    text-align: center;
}

.apartment-non-available {
    filter: grayscale(100%);
    opacity: 0.4;
}

    .apartment-non-available .form-type-checkbox {
        text-align: center;
        display: none;
    }

.mono .form-type-checkbox {
    text-align: center;
}

.mono h2 {
    margin: 5px 0px 5px 0px;
    font-size: 20px;
    font-weight: 800;
    text-align: center;
}

.apartment-bubble.mono {
    background-image: url("/images/step5/mono-bg.png");
    background-repeat: no-repeat;
    background-position: center top;
    border: 0px solid;
    height: 42px;
    box-shadow: 0px 0px;
}

.mono {
    border: 2px solid #1a2f70;
    box-shadow: 0px 0px 10px #1a2f70;
    padding: 10px;
    margin-bottom: 10px;
}

    /*.mono.active {
        border-color: #027b2d;
        box-shadow: 0px 0px 10px #027b2d;
    }*/

.mono-tropopoiimeno .form-type-checkbox {
    text-align: center;
}

.mono-tropopoiimeno h2 {
    margin: 5px 0px 5px 0px;
    font-size: 20px;
    font-weight: 800;
    text-align: center;
}

.apartment-bubble.mono-tropopoiimeno {
    background-image: url("../images/mono-tropopoiimeno.png");
    background-repeat: no-repeat;
    background-position: center top;
    border: 0px solid;
    height: 42px;
    box-shadow: 0px 0px;
}

.mono-tropopoiimeno {
    border: 2px solid #1a2f70;
    box-shadow: 0px 0px 10px #1a2f70;
    padding: 10px;
    margin-bottom: 10px;
}

    /*.mono-tropopoiimeno.active {
        border-color: #027b2d;
        box-shadow: 0px 0px 10px #027b2d;
    }*/

.diplo .form-type-checkbox {
    text-align: center;
}

.diplo h2 {
    margin: 5px 0px 5px 0px;
    font-size: 20px;
    font-weight: 800;
    text-align: center;
}

.apartment-bubble.diplo {
    background-image: url("/images/step5/diplo-bg.png");
    background-repeat: no-repeat;
    background-position: center top;
    border: 0px solid;
    height: 42px;
    box-shadow: 0px 0px;
}

.diplo {
    border: 2px solid #1a2f70;
    box-shadow: 0px 0px 10px #1a2f70;
    padding: 10px;
    margin-bottom: 10px;
}

    /*.diplo.active {
        border-color: #027b2d;
        box-shadow: 0px 0px 10px #027b2d;
    }*/

.diplo-tropopoiimeno .form-type-checkbox {
    text-align: center;
}

.diplo-tropopoiimeno h2 {
    margin: 5px 0px 5px 0px;
    font-size: 20px;
    font-weight: 800;
    text-align: center;
}

.apartment-bubble.diplo-tropopoiimeno {
    background-image: url("/images/step5/dipla-tropopoiimeno.png");
    background-repeat: no-repeat;
    background-position: center top;
    border: 0px solid;
    height: 42px;
    box-shadow: 0px 0px;
}

.diplo-tropopoiimeno {
    border: 2px solid #1a2f70;
    box-shadow: 0px 0px 10px #1a2f70;
    padding: 10px;
    margin-bottom: 10px;
}

   /* .diplo-tropopoiimeno.active {
        border-color: #027b2d;
        box-shadow: 0px 0px 10px #027b2d;
    }*/

.triplo .form-type-checkbox {
    text-align: center;
}

.triplo h2 {
    margin: 5px 0px 5px 0px;
    font-size: 20px;
    font-weight: 800;
    text-align: center;
}

.apartment-bubble.triplo {
    background-image: url("../images/triplo-bg.png");
    background-repeat: no-repeat;
    background-position: center top;
    border: 0px solid;
    height: 42px;
    box-shadow: 0px 0px;
}

.triplo {
    border: 2px solid #1a2f70;
    box-shadow: 0px 0px 10px #1a2f70;
    padding: 10px;
    margin-bottom: 10px;
}

    /*.triplo.active {
        border-color: #027b2d;
        box-shadow: 0px 0px 10px #027b2d;
    }*/

.form-item {
    margin-bottom: 15px !important;
}

#address-wrapper .address-title {
    margin-bottom: 10px;
    margin-left: 15px;
    font-size: 19px;
    font-weight: 600;
}

.review-info .review-row {
    padding: 10px;
}

.review-info .review-value {
    padding-left: 0px;
    font-weight: 800;
}

.review-info .review-label {
    width: 100%;
    display: inline-block;
}

.review-info .review-row.review-price {
    background-color: #337ab7;
    color: #fff;
    font-size: 16px;
}

.form-item-payment-method {
    margin-top: 20px;
}

.payment-method-jcc {
    background-image: url("../images/jcc-logo.png");
    background-repeat: no-repeat;
    padding-top: 50px;
}

.payment-method-sek {
    background-image: url("../images/sek-logo-payment.png");
    margin-top: 20px;
    padding-top: 48px;
    background-repeat: no-repeat;
    background-position: 10px top;
}

.form-item-payment-method #edit-payment-method {
    margin-top: 10px;
}

.form-item-payment-method .control-label {
    font-size: 16px;
}

.form-item-payment-method .payment-method-jcc .control-label, .form-item-payment-method .payment-method-sek .control-label {
    font-size: 14px;
}

.review-info .review-row {
    border-bottom: 1px solid #ddd;
}

.node-type-reservation span.reservation-label {
    font-weight: bold;
}

.node-type-reservation h1 {
    text-align: center;
}

.language-switcher-locale-url {
    list-style: none;
    display: inline-block;
    padding-left: 0px;
}

.language-switcher-locale-url .el {
    display: inline-block;
    float: left;
    margin-right: 5px;
}

.language-switcher-locale-url .el img {
    width: 18px;
}

.language-switcher-locale-url .en-cy {
    display: inline-block;
    float: left;
}

.language-switcher-locale-url .en-cy img {
    width: 18px;
}

.apartment-selector-wrapper.disabled,
.appartment-card.disabled,
.reservation-period-selector-wrapper.disabled {
    filter: grayscale(100%);
    opacity: 0.5;
}

.accommodation-selector-wrapper.disabled {
    filter: grayscale(100%);
    opacity: 0.5;
}

#adults-wrapper .adults-title {
    margin-bottom: 10px;
    margin-left: 15px;
    font-size: 19px;
    font-weight: 600;
}

#minors-wrapper .minors-title {
    margin-bottom: 10px;
    margin-left: 15px;
    font-size: 19px;
    font-weight: 600;
}

#babies-wrapper .babies-title {
    margin-bottom: 10px;
    margin-left: 15px;
    font-size: 19px;
    font-weight: 600;
}

#adults-wrapper, #minors-wrapper, #babies-wrapper {
    margin-top: 15px;
}

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
    a.logo.navbar-btn {
        width: auto;
        text-align: left;
    }

    a.name.navbar-brand {
        font-size: 3em;
        margin-top: 45px;
        text-align: left;
        width: auto;
    }

    .page-reservation-wizard h1.page-header {
        font-size: 2.4em;
    }

    ul.list-inline.sek-wizard-navigation-list {
        margin-left: 0;
    }

        ul.list-inline.sek-wizard-navigation-list li {
            padding-right: 5px;
            padding-left: 5px;
        }

            ul.list-inline.sek-wizard-navigation-list li span.label {
                font-size: 90%;
            }

    .instructions-wrapper {
        font-size: 1.5em;
    }

    .reservation-period-selector-wrapper {
        margin-top: 20px;
        padding-bottom: 30px;
    }

        .reservation-period-selector-wrapper img {
            width: auto;
        }

    #sek-reservation-wizard-form #edit-next {
        float: right !important;
        margin: inherit;
        width: auto;
        display: inline-block;
        margin-bottom: 40px;
    }

    ul.ui-sortable li {
    }

    .node-type-accommodation .field-name-field-main-image {
        display: inline-block;
        width: 50%;
        padding-right: 15px;
    }

    .node-type-accommodation .field-name-body {
        display: inline-block;
        width: 50%;
        vertical-align: top;
    }

    .accommodation-selector-wrapper h2 {
        min-height: 60px;
    }

    .review-info .review-label {
        width: auto;
        display: inline-block;
    }

    .review-info .review-value {
        padding-left: 10px;
    }

    .payment-method-jcc {
        padding-top: 10px;
        padding-left: 80px;
        padding-bottom: 15px;
    }

    .payment-method-sek {
        margin-top: 5px;
        padding-top: 11px;
        padding-bottom: 10px;
        padding-left: 80px;
    }
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
    ul.list-inline.sek-wizard-navigation-list li {
        padding-right: 8px;
        padding-left: 8px;
    }

        ul.list-inline.sek-wizard-navigation-list li span.label {
            font-size: 100%;
        }

    .node-type-accommodation .field-name-field-gallery .field-item {
        width: 33%;
    }
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    ul.list-inline.sek-wizard-navigation-list li {
        padding-right: 10px;
        padding-left: 10px;
    }

    .node-type-accommodation .field-name-field-gallery .field-item {
        width: 25%;
    }

    .stoyntio {
        margin-top: 20px;
    }

    .mono {
        margin-top: 20px;
    }

    .mono-tropopoiimeno {
        margin-top: 20px;
    }

    .diplo {
        margin-top: 20px;
    }

    .diplo-tropopoiimeno {
        margin-top: 20px;
    }

    .triplo {
        margin-top: 20px;
    }

    .apartment-selector-wrapper {
        height: 464px;
    }
}
