.booking-panel {
    margin-bottom: 50px;
    position: relative;
}
.booking-panel .panel-body {
    background-color: #ECF0F1;
    padding: 15px 15px 20px;
}
.booking-panel .dual-calendar {
    display: inline-block;
    width: 70%;
    padding: 0 15px 0 0;
}
.booking-panel .details {
    display: inline-block;
    width: 29.5%;
    vertical-align: top;
}

/* calendar */
.booking-panel .dual-cal-inner {
    border: 1px solid #E1E2E4;
    border-radius: 3px;
    background-color: white;
    min-height: 250px;
    vertical-align: top;
    padding: 0 15px;
    position: relative; /*for highlight*/
}
.booking-panel .single-cal-wrapper {
    width: 45%;
    width: calc(99.9% / 2 - 18px);
    display: inline-block;
}
.booking-panel .left {
    margin-right: 30px;
}

/* customize my-calendar */
.booking-panel-cal .range-name {
    font-size: 14px;
}
.booking-panel-cal .grid {
    border-spacing: 0;
    border-collapse: collapse;
}
.chrome .booking-panel-cal .grid th,
.chrome .booking-panel-cal .grid td {
    /* workaround: default 'background-clip: content-box;' produces extra white padding in Chrome */
    /* chromium bug #1000600 , also see https://stackoverflow.com/q/57776106/2648197 */
    background-clip: border-box;
}
.booking-panel-cal .grid th {
    background-color: #efefef;
    font-size: 11px;
    border: 1px solid #e2e2e2;
}
.booking-panel-cal .grid td {
    text-align: right;
    vertical-align: top;
    padding: 1px 3px 1px 1px;
    position: relative;
    font-size: 15px;
    height: 38px;
}
.booking-panel-cal .grid td:not(.d) {
    background-color: #e4e4e4;
    border: 1px solid #d6d6d6;
}
.booking-panel-cal .grid td.past {
    background-color: #d8d8d8;
    border: 1px solid #dadada;
}
.booking-panel-cal .grid td.today {
    outline: none;
}
.booking-panel-cal .grid td.weekend {
    color: #c10000 !important;
}
.booking-panel-cal .grid td.selected {
    /*box-shadow: inset 0 0 0 2px #009de2;*/
    /*border-color: transparent;
    outline: 2px solid #009de2;*/
    /*background-color: white;
    color: #333;
    border-color: #009de2;
    box-shadow: 0 0 3px 0 #009de2;*/
    color: black;
    border-color: #DDDDDD;
}
.booking-panel-cal .grid td.selected:not(.selected-last) {
    background-color: #fea;
}
.booking-panel-cal .status {
    display: none;
}

/* price-specific */
.booking-panel-cal .d .price {
    position: absolute;
    left: 2px;
    bottom: 1px;
    font-size: 9px;
    font-weight: normal;
    /*font-family: Verdana, Helvetica, Arial, sans-serif;*/
    color: #009208;
    margin: 0;
    opacity: 1;
}
.booking-panel-cal .d.selected .price {
    /*color: #d2f2ff;*/
}
.booking-panel-cal .d.OCCUPIED .price {
    display: none;
}
.booking-panel-cal .d.NOT_SET .price {
    font-size: 11px;
    color: gray;
    left: 5px;
}
.booking-panel-cal .d .price .currency {
    font-weight: normal;
    margin-left: 1px;
    font-size: 7px;
}

/* hide booking id info */
.booking-panel-cal .d .booked-icon {
    display: none;
}

/* colors */
.booking-panel-cal .grid .d.AVAILABLE {
    /*color: white !important;*/
    background-color: white;
    /*border-color: #519a5b !important;*/
}
.booking-panel-cal .grid .d.OCCUPIED {
    /*color: white !important;*/
    background-color: #e69292;
    /*border-color: #e69292 !important;*/
}
.booking-panel-cal .grid .d.NOT_SET {
    /*color: #c5c5c5 !important;*/
    background-color: #f1f1f1;
    border-color: #d6d6d6 !important;
}

/* selection */
/*.booking-panel-cal .d.selected {
    font-weight: bold;
}
.booking-panel-cal .d.selected.AVAILABLE {
    background-color: #1d6f22;
    border-color: transparent !important;
}
.booking-panel-cal .d.selected.OCCUPIED {
    background-color: #902d2d;
    border-color: transparent !important;

}
.booking-panel-cal .d.selected.NOT_SET {
    color: black !important;
    background-color: #e3e3e3;
    border-color: #d4d4d4 !important;
}*/

/* morning marker */
.booking-panel-cal .grid td.morning:before,
.booking-panel-cal .grid td.selected-last:before {
    position: absolute;
    content: "";
    top: 0; left: 0; width: 0; height: 0;
    border-style: solid;
    border-width: 0 0 38px 24px;
    background-color: transparent;
}
.booking-panel-cal .grid td.morning.MORNING_OCCUPIED:before {
    border-color: #e69292 #e69292 transparent #e69292;
}
.booking-panel-cal .grid td.morning.MORNING_AVAILABLE:before {
    border-color: white white transparent white;
}
.booking-panel-cal .grid td.morning.MORNING_NOT_SET:before {
    border-color: #DDDDDD #DDDDDD transparent #DDDDDD;
}
.booking-panel-cal .grid td.selected-last:before {
    border-color: #fea #fea transparent #fea !important;
}

/* legend */
.dual-calendar .legend {
    padding: 10px 0 10px 0;
}
.dual-calendar .legend ul {
    padding: 0;
    margin: 0;
}
.dual-calendar .legend ul li {
    margin: 0 15px 6px 0;
    display: inline-block;
    font-size: 12px;
}
.dual-calendar .legend ul li:last-child {
    margin-right: 0;
}
.dual-calendar .legend ul li em {
    display: inline-block;
    border: 1px solid #E7E7E5;
    min-width: 19px;
    min-height: 19px;
    font-style: normal;
    margin-right: 6px;
}
.dual-calendar .legend ul li.available em {
    background-color: white;
}
.dual-calendar .legend ul li.occupied em,
.dual-calendar .legend ul li.morning-available em {
    background-color: #e69292;
    border-color: #e69292;
    position: relative;
}
.dual-calendar .legend ul li.morning-available em:before {
    position: absolute;
    content: "";
    top: 0; left: 0; width: 0; height: 0;
    border-style: solid;
    border-width: 0 0 17px 13px;
    background-color: transparent;
    border-color: white white transparent white;
}
.dual-calendar .legend ul li.not-set em {
    background-color: #e4e4e4;
    border-color: #dcdcdc;
}
.dual-calendar .legend ul li.selected em {
    /*background-color: #009de2;
    border-color: #009de2;*/
    /*background-color: white;
    border-color: #009de2;
    box-shadow: 0 0 3px 0 #009de2;*/
    background-color: #fea;
}
.dual-calendar .legend ul li.not-set em .q {
    font-size: 9px;
    line-height: 17px;
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    color: gray;
}
.dual-calendar .legend ul li.base em,
.dual-calendar .legend ul li.override em {
    padding: 1px 3px;
}
.dual-calendar .legend ul li.override em {
    font-weight: bold;
}

/* hint */
.dual-calendar .cal-prices-hint {
    font-size: 11px;
    /*color: gray;*/
    margin: 6px 0 0 2px;
}

/* details */
.booking-panel .details .title {
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 6px;
}
.booking-panel .details .type {
    margin-bottom: -2px;
    color: #000000;
    font-size: 15px;
}
.booking-panel .details .type:first-letter {
    text-transform: capitalize;
}
.booking-panel .details .addr {
    margin-bottom: 12px;
    color: #28586d;
}
.booking-panel .details .dates {
    margin-bottom: 10px;
}
.booking-panel .details .date {
    width: 47%;
    display: inline-block;
    /*padding-right: 8px;*/
}
.booking-panel .details .form-control {
    height: 34px;
    padding: 1px 7px;
    box-shadow: none;
    -webkit-box-shadow: none;
    color: #333;
    cursor: pointer;
}
.booking-panel .details .date input[type=text] {
    width: 100%;
    position: relative;
    background: white url(/img/custom-inputs/calendar-icon.png) 94% center no-repeat no-repeat;
    background-size: 16px;
    /*background-position: right 13px center;*/
}
.booking-panel .details .guests {
    margin-bottom: 12px;
}
.booking-panel .details .checkboxes {

}
.booking-panel .details .chk {
    display: inline-block;
    margin-bottom: 6px;
}
.booking-panel .details .prices {
    margin-top: 10px;
}
.booking-panel .details .prices > * {
    margin-bottom: -1px;
}
.booking-panel .details .prices label {
    display: inline-block;
    width: 30%;
    font-weight: bold;
    color: gray;
}
.booking-panel .details .prices em {
    font-style: normal;
    width: 69.9%;
    text-align: right;
    display: inline-block;
    margin-bottom: 0;
}
.booking-panel .details .price-row em {
    font-size: 14px;
    font-weight: bold;
    color: #444;
}
.booking-panel .details .nights-row em {
    color: #333;
}
.booking-panel .details .total-row {
    margin-top: 6px;
    border-top: 1px solid #D6D6D6;
    padding-top: 3px;
}
.booking-panel .details .total-row em {
    font-size: 22px;
}
.booking-panel .details button {
    width: 100%;
    margin-top: 10px;
    height: 42px;
}
.booking-panel .details .seller-contacts {
    /*margin: 10px 0;
    border-top: 1px solid #cccccc;
    padding-top: 12px;*/
    margin: 15px -5px 10px;
    padding: 7px 7px;
    border-radius: 3px;
    /*border: 1px solid #ffffff;*/
    border: 1px solid #e0e0e0;
    border: #ffcc00 2px dashed;
    background-color: white;
}
.booking-panel .details .seller-contacts .seller-name {
    font-weight: bold;
}

.booking-panel .details .captcha {
    text-align: left;
    margin: 15px 0 -10px;
}
.booking-panel .details .captcha > div {
    display: inline-block;
    transform: scale(0.92);
    transform-origin: 0 0;
}

.booking-panel .details .btn-show-contacts {
    font-size: 15px;
}
.booking-panel .details .btn-show-contacts span:nth-child(1) {
    width: 20px;
    display: inline-block;
}
.booking-panel .details .btn-show-contacts span:nth-child(2) {
    text-transform: none;
    font-size: 11px;
    opacity: 0.5;
}

.booking-panel .details .view-contacts-hint {
    color: #b90000;
    font-size: 11px;
    margin: 3px 0 0;
    font-weight: bold;
}
.booking-panel .details .view-contacts-hint.inactive {
    /*color: #d6d6d6; confuses*/
    visibility: hidden;
}

/* ".contacts-shown" toggles contacts panel */
.booking-panel .details.contacts-shown .captcha,
.booking-panel .details.contacts-shown .btn-show-contacts,
.booking-panel .details.contacts-shown .view-contacts-hint,
.booking-panel .details:not(.contacts-shown) .seller-contacts {
    display: none !important;
}

.booking-panel .details .create-request-hint {
    font-size: 11px;
    color: #aaa;
    margin-top: 10px;
}
.booking-panel .details .faq-link {
    font-size: 12px;
    text-decoration: underline !important;
    color: #666;
    font-weight: bold;
}

.booking-panel .expand-wrapper {
    display: none;
}

/* first breakpoint: dual calendar with details panel at bottom */
/*@media (max-width: 1000px) {
    .booking-panel {
        width: 650px;
    }
    .booking-panel .panel-body {
        background-color: transparent;
        padding: 0;
    }
    .booking-panel .dual-calendar {
        display: block;
        width: 100%;
        background-color: #ECF0F1;
        padding: 15px 15px 20px;
    }
    .booking-panel .details {
        display: block;
        width: 300px;
        margin-top: 30px;
        background-color: #ECF0F1;
        padding: 15px 15px 20px;
    }
}*/

/* first breakpoint (admin width): single calendar on the left and details panel on the right side */
@media (max-width: 979px) {
    .booking-panel .dual-calendar {
        width: 60%;
    }
    .booking-panel .single-cal-wrapper.left {
        display: block;
        margin: 0;
        width: 100%;
    }
    .booking-panel .single-cal-wrapper.right {
        display: none;
    }
    .booking-panel .dual-calendar .next {
        display: block !important;
    }
    .booking-panel .details {
        width: 39.3%;
    }
    .booking-panel .details .captcha > div {
        transform: scale(1);
    }
}

/* intermediate breakpoint for Captcha only */
@media (max-width: 840px) {
    .booking-panel .details .captcha > div {
        transform: scale(0.85);
    }
}

@media (max-width: 675px) {
    .booking-panel .panel-body {
        background-color: transparent;
        padding: 0;
    }
    .booking-panel .booking-panel-title {
        display: none;
    }
    .booking-panel .dual-calendar {
        width: 100%;
        padding: 0;
    }
    .booking-panel .dual-cal-inner {
        padding: 0;
         border: none;
    }
    .booking-panel-cal .range-name {
        font-size: 16px;
    }
    .dual-calendar .cal-prices-hint {
        margin-top: -2px;
    }
    .booking-panel .details {
        width: 100%;
        margin-top: 30px;
        background-color: #ECF0F1;
        padding: 15px 15px 20px;
    }
    /* collapsed */
    /*
    .booking-panel:not(.shown) .cal-prices-hint,
    .booking-panel:not(.shown) .details {
        display: none;
    }
    .booking-panel:not(.shown) .expand-wrapper {
        display: block;
        text-align: center;
        background-color: #def2f7;
        padding: 12px 0;
    }
    */
    .booking-panel .details .captcha > div {
        transform: scale(1);
    }
}