/* CALENDAR */

.tile.downtime {
    background-color: rgba(0,0,0,0.5) !important;
}

#legend {
    max-width: 530px;
    background: #F7F7F7;
    padding: 0rem 1rem 1rem 1rem;
}


    #legend div:not(.d-flex) {
        text-align: center;
        padding-left: 0;
        width: 30px !important;
        height: 30px !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }

.calendar {
    max-width: 530px;
    /*background: #F7F7F7;*/
    padding: 1rem 1rem 1rem 1rem;
}

.calendar.double {
    max-width:1060px;
}

    .calendar.double .out {
        visibility: hidden !important;
    }

    .calendar:not(.availability) {
        background: #F7F7F7;
    }

    .calendar .c7 {
        background: white;
    }

        .calendar .c7:nth-child(7n+1) {
            margin: 0.1rem 0.1rem 0.1rem 0rem !important;
        }

        .calendar .c7:nth-child(n+1) {
            margin: 0.1rem 0.1rem;
        }

    .calendar .c7 {
        flex: 1 0 calc(14.2857% - 0.2rem);
        max-width: 14.2857%;
        margin-left: 0;
        width: 63px;
        height: 63px;
        cursor: pointer;
        padding-left: 0;
    }

    .calendar.picker .c7 {
        height: 43px;
        width: 43px;
    }

    .calendar > .monthNav {
        align-items: center;
    }

.monthNav img {
    cursor: pointer;
}

.monthNav > span {
    text-align: center;
    font-size: 22px;
    font-family: 'TitilliumWebBold';
}

.dName {
    display: flex;
    flex-wrap: wrap;
}

    .dName > .c7 {
        text-align: center;
        display: flex;
        background: transparent;
    }

    .dName span {
        font-size: 18px;
        font-family: 'TitilliumWebBold';
        margin: auto;
    }

.dElements {
    display: flex;
    flex-wrap: wrap;
}

    .dElements > .c7 {
        text-align: center;
        display: flex;
    }

        .dElements > .c7 span {
            margin: auto;
            font-size: 18px;
        }

        .dElements > .c7:hover {
            background: rgba(255, 165, 0,0.4);
        }

.daysBetween {
    background: rgba(255, 165, 0,0.4) !important;
}


.sDay, .eDay {
    background: #FFA500 !important;
}
/* CALENDAR */



/* AVAILABILITY CALENDAR */

.calendar.availability {
    width: 100%;
    max-width: unset;
    padding: 0;
}

    .calendar.availability .sDay, .calendar.availability .daysBetween.eDay, .calendar.availability .eDay {
        background: #0557C7 !important;
    }


    .calendar.availability .daysBetween {
        background: rgba(5, 87, 199,0.4) !important;
    }

    .calendar.availability .c7:hover {
        background: rgba(5, 87, 199,0.4) !important;
    }




    .calendar.availability .sDay span, .calendar.availability .eDay span, .calendar.availability .daysBetween span {
        color: #fff;
    }


    .calendar.availability .c7 {
        min-width: 100px !important;
        min-height: 100px !important;
        padding: 1rem;
    }

.calendar .c7.out {
    background: #ededed;
}

    .calendar .c7.out.unavailable {
        background: #CBCBCB;
        cursor: default;
    }

.calendar .c7.unavailable {
    background: #CBCBCB;
    cursor: default;
}

.calendar.availability .dName .c7 {
    width: unset;
    height: unset;
    padding: 0.1rem 1rem;
    background: #fff;
    min-width: unset !important;
    min-height: unset !important;
}


.calendar.availability .number {
    flex: 1;
    text-align: left;
    font-size: 14px;
    font-family: 'TitilliumWebBold';
    color: #05C771;
}

.calendar.availability .day {
    flex: 1;
    text-align: left;
    font-size: 18px;
    color: #000000;
}

.calendar.availability .price {
    flex: 1;
    text-align: right;
    font-size: 14px;
    color: black;
}

.availability .dElements > .c7 span {
    margin: unset;
}

.c7.availability {
    padding: 1rem;
}

/* AVAILABILITY CALENDAR */

/* MODE 2 */
.c7.canEnd.disabled, .c7.canStart.disabled {
    background: linear-gradient(131deg, rgb(230, 230, 230) 48%, rgba(255,255,255) 50%, rgb(230, 230, 230) 52%);
}

.available.disabled.cantEnd {
    background: linear-gradient(131deg, rgba(255, 165, 0, 0.4) 48%, rgba(255,255,255) 50%, rgba(255, 165, 0, 0.4) 52%) !important;
}

.available.tDisabled.cantEnd {
    background: linear-gradient(131deg, rgba(255, 165, 0, 0.4) 48%, rgba(255,255,255) 50%, rgba(255, 165, 0, 0.4) 52%) !important;
}




.available.disabled, .available.disabled.out {
    background: linear-gradient(131deg, rgb(230, 230, 230) 48%, rgba(255,255,255) 50%, rgb(230, 230, 230) 52%);
}

.c7.available.includes, .c7.available.disabled.includes {
    background: rgba(255, 165, 0, 0.4);
}

.notIncludes {
    background: #CBCBCB !important;
    cursor: default !important;
}

.c7.disabled.toPick {
    background: #FFFFFF;
}

.calendar .c7.toPick.includes.sDay, .calendar .c7.toPick.includes.eDay {
    background: #FFA500 !important;
}



/*HMS*/
.room-nav .room-name {
    white-space: nowrap;
    display: inline-block;
    overflow: visible;
    margin: 0 !important;
    font-weight:bold;
}

.packet-calendar .room-nav .room-name {
    white-space: pre-wrap !important;
}

.packet-calendar .room-nav .shares .share {
    min-height:50px;
}

.packet-calendar .tile {
    min-width:50px;
}

.packet-calendar .set-packetprice {
   display:block !important;
}

.packet-calendar .set-packetprice > div {
    display: flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
}

.packet-calendar .set-packetprice .bR50 {
    width:10px;
    height:10px;
    margin-right:2px;
}


.hms-calendar:not(.SPA, .planning) .HMSbody:not(.roomtype) .room-nav .room-name {
    /*    writing-mode: vertical-rl;
    transform: rotate(180deg);*/
    width: 50px;
    text-align: center;
    padding: 0 0.2rem;
}

.hms-calendar.SPA .HMSbody:not(.roomtype) .room-nav .room-name {
    width: 45px;
    text-align: center;
}

.HMSbody.roomtype .room-nav .room-name, .HMSbody.planning .room-nav .room-name {
    padding: 0 3px;
}

.HMSbody .room-nav .status-dot {
    position: absolute;
    left: 0;
    top: calc(100% - 9px);
    left: 71%;
    height: 7px;
    width: 7px;
}



.room-nav > div {
    align-items: center;
    margin-top: 0.2rem;
}


.summary-tiles.share {
    margin-top: 0.21rem;
}

.reception .room-nav > div {
    align-items: center;
    margin-top: 0.1rem;
}

.room-nav .shares > .share .tile, .summary-nav .shares > .share .tile {
    background-color: #EDEDED;
    border-left: .5px solid rgba(220, 220, 220, 1);
    border-right: .5px solid rgba(220, 220, 220, 1);
    border-bottom: .5px solid rgba(220, 220, 220, 1);
}

.shares.flex1.chm {
    margin-top: 0.05rem;
}

.chm-labels {
    font-size: 12px;
    height: 100%;
    line-height: 12px;
}

.chm-labels > div {
    height: 33%;
    display: flex;
    align-items: center;
    padding: 0 8px;
}

.chm-labels img {
    max-width:16px;
    display:block;
    margin:auto;
}

.share.room-type .tile {
    display: flex;
    justify-content: center;
    align-items: center;
}

.shares:not(.real-availability) .share.room-type .tile.zero, .shares:not(.real-availability) .share.room-type .tile.zero.weekend {
    background-color: red !important;
}

.shares:not(.real-availability) .share.room-type .tile.low, .shares:not(.real-availability) .share.room-type .tile.low.weekend {
    background-color: orange !important;
}

.shares:not(.real-availability) .share.room-type .tile.medium, .shares:not(.real-availability) .share.room-type .tile.medium.weekend {
    background-color: #daeb46 !important;
}

.shares:not(.real-availability) .share.room-type .tile.good, .shares:not(.real-availability) .share.room-type .tile.good.weekend {
    background-color: green !important;
}

/*.shares.real-availability {
    border-bottom:2px solid black;
}
*/
.shares.real-availability .share.room-type .tile span, .shares.real-availability .share.room-type .tile.weekend span {
    padding:3px 6px;
    border-radius:50%;
    color:white;
    min-width:80%;
    text-align:center;
}

.shares.real-availability .share.room-type .tile.zero span, .shares.real-availability .share.room-type .tile.zero.weekend span {
    background-color: red !important;
}

.shares.real-availability .share.room-type .tile.low span, .shares.real-availability .share.room-type .tile.low.weekend span {
    background-color: orange !important;
}

.shares.real-availability .share.room-type .tile.medium span, .shares.real-availability .share.room-type .tile.medium.weekend span {
    background-color: #daeb46 !important;
}

.shares.real-availability .share.room-type .tile.good span, .shares.real-availability .share.room-type .tile.good.weekend span {
    background-color: green !important;
}

#HMSCalendar.planning .share.room-type .tile.planned, .share.room-type .tile.planned, .summary-shares .tile.planned {
    background-color: rgba(228, 247, 151,0.5) !important;
}

#HMSCalendar.planning .share.room-type .tile.failed, .share.room-type .tile.failed, .summary-shares .tile.failed {
    background-color: #fa5a5a !important;
}

#HMSCalendar.planning .share.room-type .tile.appointed, .share.room-type .tile.appointed, .summary-shares .tile.appointed {
    background-color: rgba(133, 255, 161,0.5) !important;
}

.planning .room-name {
    cursor: pointer;
    white-space: break-spaces;
}

.room-nav .shares .share,
.summary-nav .share {
    min-height: 35px;
}

.room-nav .shares .share.notFullHour {
    min-height: 35px;
}

.reception .room-nav .shares .share.notFullHour {
    min-height:25px !important;
}

.reception .room-nav .shares .share {
    min-height: 25px;
}

.reception .room-name {
    font-size:13px;
}

.SPA .room-nav .shares .share {
    min-height: 20px;
}

.SPA .room-nav .shares .share.notFullHour {
    min-height: 20px;
}

.SPA.shortened .room-nav .shares .share.notFullHour {
    min-height: 3px;
}

.SPA.shortened .room-nav > div {
    margin-top:.05rem;
}

.SPA.shortened .spareservation span {
    font-size:13px;
    line-height:1;
}

.SPA.shortened .spareservation > div {
    padding:1.5px;
}

.SPA.shortened .spareservation {
    margin: 1px 2px !important;
}


.tile {
    /*    min-height:70px;*/
    min-width: 35px;
    /*    background-color:*/
    position: relative;
}

.planning .tile > span{
    font-size:13.5px;
}

.tile.excluded {
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 100 100'><path d='M100 0 L0 100 ' stroke='black' stroke-width='1'/><path d='M0 0 L100 100' stroke='black' stroke-width='1'/></svg>");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%, auto;
    background-color: rgba(0,0,0,0.5) !important;
}

    .tile.weekend {
        background-color: #D6D6D6 !important;
    }

        .tile.weekend.downtime {
            background-color: rgba(0,0,0,0.5) !important
        }

.day-nav span:not(.d-block) {
    font-weight:bold;
    font-size:12px;
}

.day-nav.float, .availability-nav.float {
    position: absolute;
    background-color: white;
    z-index: 2005;
}

.day-nav {
    text-align: center;
}

.month-nav span {
    font-weight:bold;
    font-size:16px;
}



.room-nav .reservation {
/*    border-top: 3px solid #e0e0e0;
    border-bottom: 3px solid #e0e0e0;*/
}

.room-nav .reservation {
    display:flex;
    position:relative;
}

    .room-nav .reservation.backed:not(.backed-short) .reservation-item  {
        left: 0;
        width: calc(100% + 17px);
    }

    .room-nav .reservation.backed-short .reservation-item {
        left: 0 !important;
        width: 21px !important;
    }

    .room-nav .reservation .reservation-item {
        position: absolute;
        left: 22px;
        width: calc(100% - 5px);
        height: 70%;
        background-color: #215CA8;
        margin: 0px 0px 0px 0px;
        top: 6.5%;
        bottom: 0;
        display: flex;
        align-items: center;
    }

    .room-nav .reservation.backed-forward .reservation-item {
        width: calc(100% - -12px) !important;
    }

    .room-nav .reservation .reservation-item span {
        width: 100%;
        text-align: right;
        display: block;
        font-size: 12px;
        padding-right: 0.5rem;
        padding-left: 0.5rem;
        white-space: nowrap;
        overflow-x: hidden;
        text-align: center;
    }


.room-nav .reservation .reservation-item > div.extrabeds {
    padding-left: 0.5rem;
    display: flex;
    height: 10px;
    top: 2px;
    position: absolute;
    right: 10px;
}

.room-nav .reservation .reservation-item > div.previous, .room-nav .reservation .reservation-item > div.next  {
    display: flex;
    height:calc(100% - 4px);
    top: 2px;
    position: absolute;
    padding-left: 0 !important;
    align-items:center;
}

.room-nav .reservation .reservation-item > div.previous {
    left: 1px;
    
}

.room-nav .reservation .reservation-item > div.next {
    right: 1px;
    text-align:center;
}

.room-nav .reservation .reservation-item > div.next i, .room-nav .reservation .reservation-item > div.previous i {
    font-size: 6px;
    color: gold;
    width: 10px;
    z-index: 9999;
    line-height: 100%;
    padding-left: 0 !important;
}

.extrabed-calendar {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin: 0 1px;
}

.reservation-item.dark > span {
    color: white !important;
}

.room-nav .reservation .reservation-item > div > i {
    padding-left: 0.2rem
}

.hms-calendar {
    background-color: #FFF;
    padding: .5rem 2rem 1rem 1rem;
    position: relative;
}

.reservation.advance-not-paid .reservation-item {
    background-color: #000 !important;
    color: #FFF !important;
}

.hms-calendar .room-left-label {
    position: sticky;
    right: -1.8rem !important;
    display:none !important;
}
/*SPA calendar*/
.SPA .day-nav > div {
    flex: 1;
}

.SPA .shares .tile {
    flex:1;
    position:relative;
}

.spareservation {
    position: absolute;
    width: calc(100% - 8px);
    margin: 4px 4px;
    background: repeating-linear-gradient( 45deg, #e0e0e0, #e0e0e0 2px, #b0aeae 2px, #b0aeae 4px );
    border-radius: 5px;
    border: 1px dashed black;
    z-index: 998;
}

    .spareservation.group {
        background: repeating-linear-gradient( 45deg, #e0e0e0, #e0e0e0 2px, #b0aeae 2px, #5da4e3 4px ) !important;
    }



.spareservation.break {
    background: repeating-linear-gradient( 45deg, orange, #e0e0e0 2px, #b0aeae 2px, #b0aeae 4px ) !important;
}

.spareservation span {
    line-height:1.1;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    font-weight:bold;
}

.spareservation .hour {
    width:100%;
}
.spareservation .guestname {
    display:block;
}

.spareservation .servicename, .spareservation .guestname {
    font-size: 12px;
}

.spareservation .servicename {
    line-height:16px;
}

.spareservation > div {
    background-color: rgba(255,255,255,0.3);
    height: 100%;
    padding: 4px;
}

.tile .chm-price {
    position:absolute;
    bottom:0;
    right:2px;
    font-size:10px;
    line-height:10px;
}

/*
.calendar.spa {
    width: 80%;
    margin: 3rem auto auto auto;
}*/

.spareservation.break.active {
    background:red !important;
    color:white !important;
}

.calendar-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    margin-right: 2px;
    cursor: pointer;
    padding: 5px 0;
    font-weight: bold;
}

.location {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    width: 26px;
    border-left: 2px solid #ccc;
}

.calendar-tab.date {
    padding: 0 5px;
    border-bottom: 2px solid #ccc;
}

.calendar-tab.active {
    background-color: #ffb733;
    color: white;
}

.location:not(:first-child) {
    margin-top:3px;
}

.reservation-item .details, .tile .selected-period {
    position: absolute;
    top: calc(100% + 5px);
    background: white;
    min-width: 300px;
    border-radius: 5px;
    display: none;
}

.reservation-item .details span {
    text-align: left !important;
    width: unset !important;
    padding-left:0 !important;
    padding-right:0 !important;
    color:black !important;
    white-space:break-spaces !important;
}

.reservation-item .details div {
    display:flex;
    flex-wrap:wrap;
}
    .reservation-item .details div span:first-child {
        min-width: 80px;
    }

.reservation-item .details div span:last-child {
    font-weight:bold;
}

.reservation-item .details .res-details-title, .tile .selected-period .res-details-title {
    font-weight:bold;
    font-size:14px !important;

}

.selected-period span {
    color: black !important;
}

.reservation.active {
    z-index: 2500 !important;
}

.reservation-item.active .details, .tile .selected-period {
    display: block;
    z-index:2501;
    border:2px solid lightgray;
    padding:5px 8px;
}

.calendar-month-tabs > div {
    min-width:70px;
    height:23px;
}

.calendar-month-tabs {
    overflow:auto;
    flex-wrap:nowrap !important;
}

.app-body .calendar-month-tabs::-webkit-scrollbar {
    width: 6px !important;
    height: 6px !important;
}

.summary-tiles {
    position:sticky;
    right:0;
}

.planning .tile {
    cursor: pointer;
}

.planning-label {
    display: flex !important;
    align-items: center;
    line-height: 1;
}

.planning-label .gray-btn {
    padding: .2rem 0.3rem !important;
}

.reservation-item.search-mark, .reservation-item.active {
    border: 2px solid yellow;
}

.room-details-subcontainer {
    margin-top: -7px;
    padding: .1rem 0;
}

.selected-period > div:not(:last-child) {
    border-bottom: 1px solid lightgray;
}

.room-details-subcontainer {
    
}

.room-details-subcontainer span {
    font-size:12px;
    padding-right:10px;
}

.room-details-room-name {
    font-weight: bold;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    line-height: 1;
}

.room-details-room-name > div {
    width:10px;
    height:10px;
    margin-right:3px;
}

.holiday-mark {
    background-color: red;
    border-radius: 5px;
    color: white;
    padding: 0 0.25rem;
}

.tile.excluded-availability {
    background-color: red !important;
    color: white !important;
}

.tile.set-packetprice {
    background-color: #94ffb0 !important;
    color:black !important;
    font-size:12px !important;
}

#HMSCalendar .shares .share .tile.today.menuInitiated{
    background-color: yellow !important;
}

.day-nav .calendar-day {
    background-color: #ddd;
    border-top: 1px solid darkgray;
    border-bottom: 1px solid darkgray;
    border-right: 1px solid darkgray;
}

.day-nav .calendar-day:first-child {
    border-left: 1px solid darkgray;
}

#HMSCalendar.SPA {
    overflow:hidden !important;
}