@import "/app/css-custom-variables.css";

.OnlineBookingModule .OnlineTable > div{margin:10px;}
.OnlineBookingModule .OnlineButton a{padding:10px 20px;text-transform:uppercase;}

.onlineBooking.overlayItemSettings {
    overflow: visible !important;
}

booking-calendar .select {
  display:flex;
  flex-direction: column;
  position:relative;
  width:100%;
  margin-left: 2px;
  height:40px;
}

booking-calendar .select .option {
  padding:0 30px 0 10px;
  min-height:40px;
  display:flex;
  align-items:center;
  background: #fff;
  border: #eee solid 1px;
  position:absolute;
  top:0;
  width: 100%;
  pointer-events:none;
  order:2;
  z-index:1;
  transition:background .4s ease-in-out;
  box-sizing:border-box;
  overflow:hidden;
  white-space:nowrap;
  color: #000;
}

booking-calendar .select .option:hover {
  background:#eee;
}

booking-calendar .select:focus .option {
  position:relative;
  pointer-events:all;
}

booking-calendar .select input {
  opacity:0;
  position:absolute;
  left:-99999px;
}

booking-calendar .select input.selected + label {
  order: 1;
  z-index:2;
  background:#fff;
  border-top:none;
  position:relative;
}

booking-calendar .select span {
  pointer-events:none;
}

booking-calendar .select label.selected {
  order: 1;
  z-index:2;
  background:#fff;
  border-top:none;
  position:relative;
}

booking-calendar .select label {
  margin-bottom: 0px;
}

booking-calendar .select:after {
  content:'';
  width: 0; 
	height: 0; 
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 5px solid white;
  position:absolute;
  right:14px;
  top:calc(50% - 2.5px);
  pointer-events:none;
  z-index: 9999;
}

booking-calendar .select:before {
  position:absolute;
  right:0;
  height: 40px;
  width: 40px;
  content: '';
  background:#bbb;
  z-index:9999;
}

/* hide return dropdown for cruises */
.VIKCRU .OnlineBookingReturn, .THNDAN .OnlineBookingReturn, .THNISL .OnlineBookingReturn {display: none !important;}

/* show only Theme trips for .fo */
booking-calendar .dropdownRuta .THNDAN, booking-calendar .dropdownRuta .THNISL {display: none !important;}
booking-calendar[locale="fo"] .dropdownRuta .THNDAN, booking-calendar[locale="fo"] .dropdownRuta .THNISL {display: flex !important;}

/* hide VIKCRU from .fo and .is */
booking-calendar[locale="fo"] .VIKCRU,booking-calendar[locale="is"] .VIKCRU {display: none !important;}

/* hide FARDAN and DANFAR for .is */
booking-calendar[locale="is"] .dropdownRuta .FARDAN, booking-calendar[locale="is"] .dropdownRuta .DANFAR {display: none!important;}

.dropdownRuta {
    z-index: 999;
}

/*************************************************************************
******************************** Default *********************************/

/* from bootstrap-adjustments.css - start */


/* datepicker adjustments */
.ui-datepicker .ui-state-active, .ui-datepicker .ui-widget-content .ui-state-active, .ui-datepicker .ui-widget-header .ui-state-active,.ui-datepicker a.ui-button:active, .ui-datepicker .ui-button:active, .ui-datepicker .ui-button.ui-state-active:hover{background-color:#00abdf;background-color:var(--hover-bg,#00abdf);border-color:#00abdf;border-color:var(--hover-bg,#00abdf);}
.ui-datepicker .ui-widget-header{background:linear-gradient(to bottom, rgba(72,94,92,1) 0%,rgba(27,51,54,1) 100%);background:var(--panel-heading-bg,rgba(72,94,92,1));}
.ui-datepicker .ui-datepicker-title span{color:#fff;color:var(--panel-heading-text,#fff);}
.ui-datepicker{z-index:100;width:auto!important;}
.ui-datepicker .ui-datepicker-group{width:calc(33.33% - 10px)!important;margin:5px;margin-bottom:0;}
.ui-datepicker .ui-datepicker-header,.ui-datepicker .ui-datepicker-calendar{border:0;margin:0;}
.ui-datepicker .ui-state-disabled span.ui-state-default {border-width:0px;}
.ui-datepicker .ui-datepicker-calendar .outboundDateOnCalendar {opacity: 1;}
.ui-datepicker .ui-datepicker-calendar .outboundDateOnCalendar span {
        background: #aed4a8;background: var(--calendar-date-selected-bg,#aed4a8);
        background-image: url(/Content/images/ferry-arr-30px-white.png);background-image: var(--calendar-selected-date-icon,url(/Content/images/ferry-arr-30px-white.png));
        background-size: calc(100% - 6px);
        background-repeat: no-repeat;
        background-position: 50%;
        color: #fff;color: var(--calendar-date-selected-text,#fff);
    }
.ui-datepicker .ui-state-default, .ui-datepicker .ui-widget-content .ui-state-default, .ui-datepicker .ui-widget-header .ui-state-default, .ui-datepicker .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {background:#f6f6f6;background: var(--calendar-date-default-bg,#f6f6f6);color: #333;color: var(--calendar-date-available-text,#333);border:0;padding:5px;text-align:center;}
.ui-datepicker td, .ui-datepicker td:hover{padding:2px;border:0!important;}
.ui-datepicker td span, .ui-datepicker td a{padding:3px 6px;}
.ui-datepicker table{border-color:#ccc;border-color:var(--border-color-weak,#ccc);}
.ui-datepicker-calendar td:not(.ui-state-disabled):hover a{background:rgba(0,0,0,0.25);background:var(--action-color,rgba(0,0,0,0.25));}


/* arrows */
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {background-color: var(--action-color);color:#fff;top:0;width:auto;height:100%;padding:13px;}
.ui-datepicker .ui-datepicker-prev{left:0;border-top-right-radius:0;border-bottom-right-radius:0;}
.ui-datepicker .ui-datepicker-next{right:0;border-top-left-radius:0;border-bottom-left-radius:0;}
.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span {display: block;position: absolute;left: 50%;top: 50%;background-image:initial;background-color:initial;border-radius:initial;border: 3px solid #fff;border-width: 0 3px 3px 0;display: inline-block;padding: 3px;}
.ui-datepicker .ui-datepicker-prev:hover, .ui-datepicker .ui-datepicker-next:hover {cursor:pointer;border:initial;background-color:var(--hover-bg);}
.ui-datepicker .ui-datepicker-prev:hover span, .ui-datepicker .ui-datepicker-next:hover span{color: #fff;}
.ui-datepicker .ui-datepicker-next span {transform: rotate(-45deg);margin-left:-10px;}
.ui-datepicker .ui-datepicker-prev span {transform: rotate(135deg);margin-left:-5px;}
/* from bootstrap-adjustments.css - end*/

/* calendar date colors */
    .ui-datepicker .regular-priced-cabin .legend-item-icon:after, .ui-datepicker .regular-priced-cabin a {background: gray;background:var(--calendar-date-default-bg,gray);color:#333;color:var(--calendar-date-available-text,#333);}
    .ui-datepicker .no-cabins .legend-item-icon:after,.ui-datepicker .no-cabins a {content: "\274c";padding: 0 7px;}

/* calendarLegend */
    .CalendarLegend{padding:0;width:100%;margin:15px 7.5px;display:block;}
    .CalendarLegendContainer{padding:10px;}
    .CalendarLegend h3{font-size:14px;font-weight:normal;text-transform:uppercase;color:#00abdf;margin:0;}
    .CalendarLegend ul{display:flex;flex-direction:column;list-style-type:none;list-style-image:none;margin:0;padding:5px 0;}
    .CalendarLegend li{content:'';display:flex;margin-bottom:5px;overflow:hidden;width:33%;margin:1px;width:inherit;}
    .CalendarLegend li.date-selected{display:none;}
    .CalendarLegend li .legend-item-icon,.CalendarLegend li .legend-item-icon:after{content:'';}
    .CalendarLegend li .legend-item-icon:after{content:'';padding:0 15px;margin-right:5px;border:1px solid #333}
    .CalendarLegend li .legend-item-name,.CalendarLegend li .legend-item-name:after{display:none;content:'';}
    .CalendarLegend li .legend-item-name:after{width:50px;display:inline-block;}
    .CalendarLegend li span{padding:2px;}
    .CalendarLegend .cabinspace-icon{background:#eee;width:30px;text-align:center;margin-right:5px;}
    .CalendarLegend .cabinspace-text{line-height:1em;padding-top:4px;} 

/* calendarinfocard */
    #CalendarInfoCard {display: none;position: absolute;z-index: 999999;padding: 10px;background:rgba(255,255,255,0.85);border-radius: 5px;box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.5);}
    .calendar-cabins-info-table{display:table;overflow:hidden;width:250px;opacity:1;background:#fff}
    .calendar-cabins-info-table div{white-space:nowrap;padding:3px 6px;text-align:center;min-width:calc(25% - 16px);}
    .calendar-cabins-info-table div.cabin-types{text-align:left;max-width:50%;}
    .calendar-cabins-info-table .table-row-header div{font-weight:bold;}
    .calendar-cabins-info-table .table-row-group{display:table-row-group;}
    .calendar-cabins-info-table .table-row{display:table-row;}
    .calendar-cabins-info-table .table-row > div{display:table-cell;border:1px solid #ccc;background:#fff;}
    .calendar-cabins-info-table .cabinspace-text{display:none;}
    .calendar-cabins-info-table .cabinspace-status.ok .cabinspace-icon i{color:#aed4a8;}
    .calendar-cabins-info-table .last-update{clear:both;margin:10px 5px 0 5px;display:block;}
    .calendar-cabins-info-table .last-update span{text-transform:capitalize;color:#aaa;font-size:11px;white-space:nowrap;font-style:italic;line-height:1em;}
    .calendar-cabins-info-table .table-row.couchette-compartment > div{border-top:1px solid #000;}
    .calendar-cabins-info-table .table-row.couchette-compartment > div,.calendar-cabins-info-table .table-row.berths > div{color:#333}

    /* only show cheap-info for office="fo" and tarif="SMDF" */
    .ui-datepicker .cheap,.ui-datepicker .CalendarLegend li[class*="cheap"]{display:none;}
    .ui-datepicker.fo.SMDF .cheap{display:table-cell;}
    .ui-datepicker.fo.SMDF .CalendarLegend li[class*="cheap"]{display:flex;}

    .ui-datepicker.fo .cheap-berth .legend-item-icon:after, .ui-datepicker.fo .cheap-berth a {background: yellow;color:gray;color:var(--font-color,#333);}
    .ui-datepicker.fo .cheap-cabin .legend-item-icon::after, .ui-datepicker.fo .cheap-cabin a {background: orange;color:gray;color:var(--font-color,#333);}

/* adjustments to cabinspace popup when on departurespage */
.cabinspace-modal .modal-body{display:flex;flex-wrap:wrap;}
.cabinspace-modal .modal-body > div{margin:20px 0;flex:1 0 auto;background:#eee;}
.calendar-cabins-info-table.departuresinfo{width:100%;}
.calendar-cabins-info-table.departuresinfo .table-row-header div{text-align:left;font-size:110%}
.calendar-cabins-info-table.departuresinfo .cabin-types{width:50%;}
.calendar-cabins-info-table.departuresinfo .table-row div {min-width:25%;padding: 2.5px 10px;height:2.5em;border-width:1px 0 0 1px;vertical-align:middle;}
.calendar-cabins-info-table.departuresinfo .table-row-header div{border-top-width:0;}
.calendar-cabins-info-table.departuresinfo .table-row div:first-of-type {border-left-width:0;}
.calendar-cabins-info-table.departuresinfo .table-row.couchette-compartment div{border-top-color:#ccc!important;}
.calendar-cabins-info-table.departuresinfo .cabinspace-status{padding-left:0!important;display:flex;align-items:center;}
.calendar-cabins-info-table.departuresinfo .cabinspace-icon{width:35px;font-size:30px;}
.calendar-cabins-info-table.departuresinfo .cabinspace-text{display:inherit;margin-left:15px;}
.cabinspace-modal .departuresinfo .last-update{padding:0 10px;}
/*
.cabinspace-modal .CalendarLegend.departuresinfo{display:flex;flex-direction:column;}
.cabinspace-modal .CalendarLegend.departuresinfo:before{content:'';display:block;flex:1 0 auto;background:red;}
*/