.flatpickr-calendar{background:transparent;opacity:0;display:none;text-align:center;visibility:hidden;padding:0;-webkit-animation:none;animation:none;direction:ltr;border:0;font-size:14px;line-height:24px;border-radius:5px;position:absolute;width:307.875px;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-touch-action:manipulation;touch-action:manipulation;background:#fff;-webkit-box-shadow:1px 0 0 #e6e6e6,-1px 0 0 #e6e6e6,0 1px 0 #e6e6e6,0 -1px 0 #e6e6e6,0 3px 13px rgba(0,0,0,0.08);box-shadow:1px 0 0 #e6e6e6,-1px 0 0 #e6e6e6,0 1px 0 #e6e6e6,0 -1px 0 #e6e6e6,0 3px 13px rgba(0,0,0,0.08)}.flatpickr-calendar.open,.flatpickr-calendar.inline{opacity:1;max-height:640px;visibility:visible}.flatpickr-calendar.open{display:inline-block;z-index:99999}.flatpickr-calendar.animate.open{-webkit-animation:fpFadeInDown 300ms cubic-bezier(.23,1,.32,1);animation:fpFadeInDown 300ms cubic-bezier(.23,1,.32,1)}.flatpickr-calendar.inline{display:block;position:relative;top:2px}.flatpickr-calendar.static{position:absolute;top:calc(100% + 2px)}.flatpickr-calendar.static.open{z-index:999;display:block}.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7){-webkit-box-shadow:none !important;box-shadow:none !important}.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1){-webkit-box-shadow:-2px 0 0 #e6e6e6,5px 0 0 #e6e6e6;box-shadow:-2px 0 0 #e6e6e6,5px 0 0 #e6e6e6}.flatpickr-calendar .hasWeeks .dayContainer,.flatpickr-calendar .hasTime .dayContainer{border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.flatpickr-calendar .hasWeeks .dayContainer{border-left:0}.flatpickr-calendar.hasTime .flatpickr-time{height:40px;border-top:1px solid #e6e6e6}.flatpickr-calendar.noCalendar.hasTime .flatpickr-time{height:auto}.flatpickr-calendar:before,.flatpickr-calendar:after{position:absolute;display:block;pointer-events:none;border:solid transparent;content:'';height:0;width:0;left:22px}.flatpickr-calendar.rightMost:before,.flatpickr-calendar.arrowRight:before,.flatpickr-calendar.rightMost:after,.flatpickr-calendar.arrowRight:after{left:auto;right:22px}.flatpickr-calendar.arrowCenter:before,.flatpickr-calendar.arrowCenter:after{left:50%;right:50%}.flatpickr-calendar:before{border-width:5px;margin:0 -5px}.flatpickr-calendar:after{border-width:4px;margin:0 -4px}.flatpickr-calendar.arrowTop:before,.flatpickr-calendar.arrowTop:after{bottom:100%}.flatpickr-calendar.arrowTop:before{border-bottom-color:#e6e6e6}.flatpickr-calendar.arrowTop:after{border-bottom-color:#fff}.flatpickr-calendar.arrowBottom:before,.flatpickr-calendar.arrowBottom:after{top:100%}.flatpickr-calendar.arrowBottom:before{border-top-color:#e6e6e6}.flatpickr-calendar.arrowBottom:after{border-top-color:#fff}.flatpickr-calendar:focus{outline:0}.flatpickr-wrapper{position:relative;display:inline-block}.flatpickr-months{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.flatpickr-months .flatpickr-month{background:transparent;color:rgba(0,0,0,0.9);fill:rgba(0,0,0,0.9);height:34px;line-height:1;text-align:center;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;overflow:hidden;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}.flatpickr-months .flatpickr-prev-month,.flatpickr-months .flatpickr-next-month{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-decoration:none;cursor:pointer;position:absolute;top:0;height:34px;padding:10px;z-index:3;color:rgba(0,0,0,0.9);fill:rgba(0,0,0,0.9)}.flatpickr-months .flatpickr-prev-month.flatpickr-disabled,.flatpickr-months .flatpickr-next-month.flatpickr-disabled{display:none}.flatpickr-months .flatpickr-prev-month i,.flatpickr-months .flatpickr-next-month i{position:relative}.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,.flatpickr-months .flatpickr-next-month.flatpickr-prev-month{/* /*rtl:begin:ignore*/left:0/* /*rtl:end:ignore*/}/* /*rtl:begin:ignore*/ /* /*rtl:end:ignore*/ .flatpickr-months .flatpickr-prev-month.flatpickr-next-month,.flatpickr-months .flatpickr-next-month.flatpickr-next-month{/* /*rtl:begin:ignore*/right:0/* /*rtl:end:ignore*/}/* /*rtl:begin:ignore*/ /* /*rtl:end:ignore*/ .flatpickr-months .flatpickr-prev-month:hover,.flatpickr-months .flatpickr-next-month:hover{color:#959ea9}.flatpickr-months .flatpickr-prev-month:hover svg,.flatpickr-months .flatpickr-next-month:hover svg{fill:#f64747}.flatpickr-months .flatpickr-prev-month svg,.flatpickr-months .flatpickr-next-month svg{width:14px;height:14px}.flatpickr-months .flatpickr-prev-month svg path,.flatpickr-months .flatpickr-next-month svg path{-webkit-transition:fill .1s;transition:fill .1s;fill:inherit}.numInputWrapper{position:relative;height:auto}.numInputWrapper input,.numInputWrapper span{display:inline-block}.numInputWrapper input{width:100%}.numInputWrapper input::-ms-clear{display:none}.numInputWrapper input::-webkit-outer-spin-button,.numInputWrapper input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}.numInputWrapper span{position:absolute;right:0;width:14px;padding:0 4px 0 2px;height:50%;line-height:50%;opacity:0;cursor:pointer;border:1px solid rgba(57,57,57,0.15);-webkit-box-sizing:border-box;box-sizing:border-box}.numInputWrapper span:hover{background:rgba(0,0,0,0.1)}.numInputWrapper span:active{background:rgba(0,0,0,0.2)}.numInputWrapper span:after{display:block;content:"";position:absolute}.numInputWrapper span.arrowUp{top:0;border-bottom:0}.numInputWrapper span.arrowUp:after{border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:4px solid rgba(57,57,57,0.6);top:26%}.numInputWrapper span.arrowDown{top:50%}.numInputWrapper span.arrowDown:after{border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid rgba(57,57,57,0.6);top:40%}.numInputWrapper span svg{width:inherit;height:auto}.numInputWrapper span svg path{fill:rgba(0,0,0,0.5)}.numInputWrapper:hover{background:rgba(0,0,0,0.05)}.numInputWrapper:hover span{opacity:1}.flatpickr-current-month{font-size:135%;line-height:inherit;font-weight:300;color:inherit;position:absolute;width:75%;left:12.5%;padding:7.48px 0 0 0;line-height:1;height:34px;display:inline-block;text-align:center;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.flatpickr-current-month span.cur-month{font-family:inherit;font-weight:700;color:inherit;display:inline-block;margin-left:.5ch;padding:0}.flatpickr-current-month span.cur-month:hover{background:rgba(0,0,0,0.05)}.flatpickr-current-month .numInputWrapper{width:6ch;width:7ch\0;display:inline-block}.flatpickr-current-month .numInputWrapper span.arrowUp:after{border-bottom-color:rgba(0,0,0,0.9)}.flatpickr-current-month .numInputWrapper span.arrowDown:after{border-top-color:rgba(0,0,0,0.9)}.flatpickr-current-month input.cur-year{background:transparent;-webkit-box-sizing:border-box;box-sizing:border-box;color:inherit;cursor:text;padding:0 0 0 .5ch;margin:0;display:inline-block;font-size:inherit;font-family:inherit;font-weight:300;line-height:inherit;height:auto;border:0;border-radius:0;vertical-align:initial;-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.flatpickr-current-month input.cur-year:focus{outline:0}.flatpickr-current-month input.cur-year[disabled],.flatpickr-current-month input.cur-year[disabled]:hover{font-size:100%;color:rgba(0,0,0,0.5);background:transparent;pointer-events:none}.flatpickr-current-month .flatpickr-monthDropdown-months{appearance:menulist;background:transparent;border:none;border-radius:0;box-sizing:border-box;color:inherit;cursor:pointer;font-size:inherit;font-family:inherit;font-weight:300;height:auto;line-height:inherit;margin:-1px 0 0 0;outline:none;padding:0 0 0 .5ch;position:relative;vertical-align:initial;-webkit-box-sizing:border-box;-webkit-appearance:menulist;-moz-appearance:menulist;width:auto}.flatpickr-current-month .flatpickr-monthDropdown-months:focus,.flatpickr-current-month .flatpickr-monthDropdown-months:active{outline:none}.flatpickr-current-month .flatpickr-monthDropdown-months:hover{background:rgba(0,0,0,0.05)}.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month{background-color:transparent;outline:none;padding:0}.flatpickr-weekdays{background:transparent;text-align:center;overflow:hidden;width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;height:28px}.flatpickr-weekdays .flatpickr-weekdaycontainer{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}span.flatpickr-weekday{cursor:default;font-size:90%;background:transparent;color:rgba(0,0,0,0.54);line-height:1;margin:0;text-align:center;display:block;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;font-weight:bolder}.dayContainer,.flatpickr-weeks{padding:1px 0 0 0}.flatpickr-days{position:relative;overflow:hidden;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start;width:307.875px}.flatpickr-days:focus{outline:0}.dayContainer{padding:0;outline:0;text-align:left;width:307.875px;min-width:307.875px;max-width:307.875px;-webkit-box-sizing:border-box;box-sizing:border-box;display:inline-block;display:-ms-flexbox;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-wrap:wrap;-ms-flex-pack:justify;-webkit-justify-content:space-around;justify-content:space-around;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}.dayContainer + .dayContainer{-webkit-box-shadow:-1px 0 0 #e6e6e6;box-shadow:-1px 0 0 #e6e6e6}.flatpickr-day{background:none;border:1px solid transparent;border-radius:150px;-webkit-box-sizing:border-box;box-sizing:border-box;color:#393939;cursor:pointer;font-weight:400;width:14.2857143%;-webkit-flex-basis:14.2857143%;-ms-flex-preferred-size:14.2857143%;flex-basis:14.2857143%;max-width:39px;height:39px;line-height:39px;margin:0;display:inline-block;position:relative;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center}.flatpickr-day.inRange,.flatpickr-day.prevMonthDay.inRange,.flatpickr-day.nextMonthDay.inRange,.flatpickr-day.today.inRange,.flatpickr-day.prevMonthDay.today.inRange,.flatpickr-day.nextMonthDay.today.inRange,.flatpickr-day:hover,.flatpickr-day.prevMonthDay:hover,.flatpickr-day.nextMonthDay:hover,.flatpickr-day:focus,.flatpickr-day.prevMonthDay:focus,.flatpickr-day.nextMonthDay:focus{cursor:pointer;outline:0;background:#e6e6e6;border-color:#e6e6e6}.flatpickr-day.today{border-color:#959ea9}.flatpickr-day.today:hover,.flatpickr-day.today:focus{border-color:#959ea9;background:#959ea9;color:#fff}.flatpickr-day.selected,.flatpickr-day.startRange,.flatpickr-day.endRange,.flatpickr-day.selected.inRange,.flatpickr-day.startRange.inRange,.flatpickr-day.endRange.inRange,.flatpickr-day.selected:focus,.flatpickr-day.startRange:focus,.flatpickr-day.endRange:focus,.flatpickr-day.selected:hover,.flatpickr-day.startRange:hover,.flatpickr-day.endRange:hover,.flatpickr-day.selected.prevMonthDay,.flatpickr-day.startRange.prevMonthDay,.flatpickr-day.endRange.prevMonthDay,.flatpickr-day.selected.nextMonthDay,.flatpickr-day.startRange.nextMonthDay,.flatpickr-day.endRange.nextMonthDay{background:#569ff7;-webkit-box-shadow:none;box-shadow:none;color:#fff;border-color:#569ff7}.flatpickr-day.selected.startRange,.flatpickr-day.startRange.startRange,.flatpickr-day.endRange.startRange{border-radius:50px 0 0 50px}.flatpickr-day.selected.endRange,.flatpickr-day.startRange.endRange,.flatpickr-day.endRange.endRange{border-radius:0 50px 50px 0}.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)){-webkit-box-shadow:-10px 0 0 #569ff7;box-shadow:-10px 0 0 #569ff7}.flatpickr-day.selected.startRange.endRange,.flatpickr-day.startRange.startRange.endRange,.flatpickr-day.endRange.startRange.endRange{border-radius:50px}.flatpickr-day.inRange{border-radius:0;-webkit-box-shadow:-5px 0 0 #e6e6e6,5px 0 0 #e6e6e6;box-shadow:-5px 0 0 #e6e6e6,5px 0 0 #e6e6e6}.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover,.flatpickr-day.prevMonthDay,.flatpickr-day.nextMonthDay,.flatpickr-day.notAllowed,.flatpickr-day.notAllowed.prevMonthDay,.flatpickr-day.notAllowed.nextMonthDay{color:rgba(57,57,57,0.3);background:transparent;border-color:transparent;cursor:default}.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover{cursor:not-allowed;color:rgba(57,57,57,0.1)}.flatpickr-day.week.selected{border-radius:0;-webkit-box-shadow:-5px 0 0 #569ff7,5px 0 0 #569ff7;box-shadow:-5px 0 0 #569ff7,5px 0 0 #569ff7}.flatpickr-day.hidden{visibility:hidden}.rangeMode .flatpickr-day{margin-top:1px}.flatpickr-weekwrapper{float:left}.flatpickr-weekwrapper .flatpickr-weeks{padding:0 12px;-webkit-box-shadow:1px 0 0 #e6e6e6;box-shadow:1px 0 0 #e6e6e6}.flatpickr-weekwrapper .flatpickr-weekday{float:none;width:100%;line-height:28px}.flatpickr-weekwrapper span.flatpickr-day,.flatpickr-weekwrapper span.flatpickr-day:hover{display:block;width:100%;max-width:none;color:rgba(57,57,57,0.3);background:transparent;cursor:default;border:none}.flatpickr-innerContainer{display:block;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden}.flatpickr-rContainer{display:inline-block;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box}.flatpickr-time{text-align:center;outline:0;display:block;height:0;line-height:40px;max-height:40px;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.flatpickr-time:after{content:"";display:table;clear:both}.flatpickr-time .numInputWrapper{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;width:40%;height:40px;float:left}.flatpickr-time .numInputWrapper span.arrowUp:after{border-bottom-color:#393939}.flatpickr-time .numInputWrapper span.arrowDown:after{border-top-color:#393939}.flatpickr-time.hasSeconds .numInputWrapper{width:26%}.flatpickr-time.time24hr .numInputWrapper{width:49%}.flatpickr-time input{background:transparent;-webkit-box-shadow:none;box-shadow:none;border:0;border-radius:0;text-align:center;margin:0;padding:0;height:inherit;line-height:inherit;color:#393939;font-size:14px;position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.flatpickr-time input.flatpickr-hour{font-weight:bold}.flatpickr-time input.flatpickr-minute,.flatpickr-time input.flatpickr-second{font-weight:400}.flatpickr-time input:focus{outline:0;border:0}.flatpickr-time .flatpickr-time-separator,.flatpickr-time .flatpickr-am-pm{height:inherit;float:left;line-height:inherit;color:#393939;font-weight:bold;width:2%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-align-self:center;-ms-flex-item-align:center;align-self:center}.flatpickr-time .flatpickr-am-pm{outline:0;width:18%;cursor:pointer;text-align:center;font-weight:400}.flatpickr-time input:hover,.flatpickr-time .flatpickr-am-pm:hover,.flatpickr-time input:focus,.flatpickr-time .flatpickr-am-pm:focus{background:#eee}.flatpickr-input[readonly]{cursor:pointer}@-webkit-keyframes fpFadeInDown{from{opacity:0;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes fpFadeInDown{from{opacity:0;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.ct-double-octave:after,.ct-golden-section:after,.ct-major-eleventh:after,.ct-major-second:after,.ct-major-seventh:after,.ct-major-sixth:after,.ct-major-tenth:after,.ct-major-third:after,.ct-major-twelfth:after,.ct-minor-second:after,.ct-minor-seventh:after,.ct-minor-sixth:after,.ct-minor-third:after,.ct-octave:after,.ct-perfect-fifth:after,.ct-perfect-fourth:after,.ct-square:after{content:"";clear:both}.ct-label{fill:rgba(0,0,0,.4);color:rgba(0,0,0,.4);font-size:.75rem;line-height:1}.ct-chart-bar .ct-label,.ct-chart-line .ct-label{display:block;display:flex}.ct-chart-donut .ct-label,.ct-chart-pie .ct-label{dominant-baseline:central}.ct-label.ct-horizontal.ct-start{align-items:flex-end;justify-content:flex-start;text-align:left;text-anchor:start}.ct-label.ct-horizontal.ct-end{align-items:flex-start;justify-content:flex-start;text-align:left;text-anchor:start}.ct-label.ct-vertical.ct-start{align-items:flex-end;justify-content:flex-end;text-align:right;text-anchor:end}.ct-label.ct-vertical.ct-end{align-items:flex-end;justify-content:flex-start;text-align:left;text-anchor:start}.ct-chart-bar .ct-label.ct-horizontal.ct-start{align-items:flex-end;justify-content:center;text-align:center;text-anchor:start}.ct-chart-bar .ct-label.ct-horizontal.ct-end{align-items:flex-start;justify-content:center;text-align:center;text-anchor:start}.ct-chart-bar.ct-horizontal-bars .ct-label.ct-horizontal.ct-start{align-items:flex-end;justify-content:flex-start;text-align:left;text-anchor:start}.ct-chart-bar.ct-horizontal-bars .ct-label.ct-horizontal.ct-end{align-items:flex-start;justify-content:flex-start;text-align:left;text-anchor:start}.ct-chart-bar.ct-horizontal-bars .ct-label.ct-vertical.ct-start{align-items:center;justify-content:flex-end;text-align:right;text-anchor:end}.ct-chart-bar.ct-horizontal-bars .ct-label.ct-vertical.ct-end{align-items:center;justify-content:flex-start;text-align:left;text-anchor:end}.ct-grid{stroke:rgba(0,0,0,.2);stroke-width:1px;stroke-dasharray:2px}.ct-grid-background{fill:none}.ct-point{stroke-width:10px;stroke-linecap:round}.ct-line{fill:none;stroke-width:4px}.ct-area{stroke:none;fill-opacity:.1}.ct-bar{fill:none;stroke-width:10px}.ct-slice-donut{fill:none;stroke-width:60px}.ct-series-a .ct-bar,.ct-series-a .ct-line,.ct-series-a .ct-point,.ct-series-a .ct-slice-donut{stroke:#d70206}.ct-series-a .ct-area,.ct-series-a .ct-slice-donut-solid,.ct-series-a .ct-slice-pie{fill:#d70206}.ct-series-b .ct-bar,.ct-series-b .ct-line,.ct-series-b .ct-point,.ct-series-b .ct-slice-donut{stroke:#f05b4f}.ct-series-b .ct-area,.ct-series-b .ct-slice-donut-solid,.ct-series-b .ct-slice-pie{fill:#f05b4f}.ct-series-c .ct-bar,.ct-series-c .ct-line,.ct-series-c .ct-point,.ct-series-c .ct-slice-donut{stroke:#f4c63d}.ct-series-c .ct-area,.ct-series-c .ct-slice-donut-solid,.ct-series-c .ct-slice-pie{fill:#f4c63d}.ct-series-d .ct-bar,.ct-series-d .ct-line,.ct-series-d .ct-point,.ct-series-d .ct-slice-donut{stroke:#d17905}.ct-series-d .ct-area,.ct-series-d .ct-slice-donut-solid,.ct-series-d .ct-slice-pie{fill:#d17905}.ct-series-e .ct-bar,.ct-series-e .ct-line,.ct-series-e .ct-point,.ct-series-e .ct-slice-donut{stroke:#453d3f}.ct-series-e .ct-area,.ct-series-e .ct-slice-donut-solid,.ct-series-e .ct-slice-pie{fill:#453d3f}.ct-series-f .ct-bar,.ct-series-f .ct-line,.ct-series-f .ct-point,.ct-series-f .ct-slice-donut{stroke:#59922b}.ct-series-f .ct-area,.ct-series-f .ct-slice-donut-solid,.ct-series-f .ct-slice-pie{fill:#59922b}.ct-series-g .ct-bar,.ct-series-g .ct-line,.ct-series-g .ct-point,.ct-series-g .ct-slice-donut{stroke:#0544d3}.ct-series-g .ct-area,.ct-series-g .ct-slice-donut-solid,.ct-series-g .ct-slice-pie{fill:#0544d3}.ct-series-h .ct-bar,.ct-series-h .ct-line,.ct-series-h .ct-point,.ct-series-h .ct-slice-donut{stroke:#6b0392}.ct-series-h .ct-area,.ct-series-h .ct-slice-donut-solid,.ct-series-h .ct-slice-pie{fill:#6b0392}.ct-series-i .ct-bar,.ct-series-i .ct-line,.ct-series-i .ct-point,.ct-series-i .ct-slice-donut{stroke:#f05b4f}.ct-series-i .ct-area,.ct-series-i .ct-slice-donut-solid,.ct-series-i .ct-slice-pie{fill:#f05b4f}.ct-series-j .ct-bar,.ct-series-j .ct-line,.ct-series-j .ct-point,.ct-series-j .ct-slice-donut{stroke:#dda458}.ct-series-j .ct-area,.ct-series-j .ct-slice-donut-solid,.ct-series-j .ct-slice-pie{fill:#dda458}.ct-series-k .ct-bar,.ct-series-k .ct-line,.ct-series-k .ct-point,.ct-series-k .ct-slice-donut{stroke:#eacf7d}.ct-series-k .ct-area,.ct-series-k .ct-slice-donut-solid,.ct-series-k .ct-slice-pie{fill:#eacf7d}.ct-series-l .ct-bar,.ct-series-l .ct-line,.ct-series-l .ct-point,.ct-series-l .ct-slice-donut{stroke:#86797d}.ct-series-l .ct-area,.ct-series-l .ct-slice-donut-solid,.ct-series-l .ct-slice-pie{fill:#86797d}.ct-series-m .ct-bar,.ct-series-m .ct-line,.ct-series-m .ct-point,.ct-series-m .ct-slice-donut{stroke:#b2c326}.ct-series-m .ct-area,.ct-series-m .ct-slice-donut-solid,.ct-series-m .ct-slice-pie{fill:#b2c326}.ct-series-n .ct-bar,.ct-series-n .ct-line,.ct-series-n .ct-point,.ct-series-n .ct-slice-donut{stroke:#6188e2}.ct-series-n .ct-area,.ct-series-n .ct-slice-donut-solid,.ct-series-n .ct-slice-pie{fill:#6188e2}.ct-series-o .ct-bar,.ct-series-o .ct-line,.ct-series-o .ct-point,.ct-series-o .ct-slice-donut{stroke:#a748ca}.ct-series-o .ct-area,.ct-series-o .ct-slice-donut-solid,.ct-series-o .ct-slice-pie{fill:#a748ca}.ct-square{display:block;position:relative;width:100%}.ct-square:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:100%}.ct-square:after{display:table}.ct-square>svg{display:block;position:absolute;top:0;left:0}.ct-minor-second{display:block;position:relative;width:100%}.ct-minor-second:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:93.75%}.ct-minor-second:after{display:table}.ct-minor-second>svg{display:block;position:absolute;top:0;left:0}.ct-major-second{display:block;position:relative;width:100%}.ct-major-second:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:88.8888888889%}.ct-major-second:after{display:table}.ct-major-second>svg{display:block;position:absolute;top:0;left:0}.ct-minor-third{display:block;position:relative;width:100%}.ct-minor-third:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:83.3333333333%}.ct-minor-third:after{display:table}.ct-minor-third>svg{display:block;position:absolute;top:0;left:0}.ct-major-third{display:block;position:relative;width:100%}.ct-major-third:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:80%}.ct-major-third:after{display:table}.ct-major-third>svg{display:block;position:absolute;top:0;left:0}.ct-perfect-fourth{display:block;position:relative;width:100%}.ct-perfect-fourth:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:75%}.ct-perfect-fourth:after{display:table}.ct-perfect-fourth>svg{display:block;position:absolute;top:0;left:0}.ct-perfect-fifth{display:block;position:relative;width:100%}.ct-perfect-fifth:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:66.6666666667%}.ct-perfect-fifth:after{display:table}.ct-perfect-fifth>svg{display:block;position:absolute;top:0;left:0}.ct-minor-sixth{display:block;position:relative;width:100%}.ct-minor-sixth:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:62.5%}.ct-minor-sixth:after{display:table}.ct-minor-sixth>svg{display:block;position:absolute;top:0;left:0}.ct-golden-section{display:block;position:relative;width:100%}.ct-golden-section:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:61.804697157%}.ct-golden-section:after{display:table}.ct-golden-section>svg{display:block;position:absolute;top:0;left:0}.ct-major-sixth{display:block;position:relative;width:100%}.ct-major-sixth:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:60%}.ct-major-sixth:after{display:table}.ct-major-sixth>svg{display:block;position:absolute;top:0;left:0}.ct-minor-seventh{display:block;position:relative;width:100%}.ct-minor-seventh:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:56.25%}.ct-minor-seventh:after{display:table}.ct-minor-seventh>svg{display:block;position:absolute;top:0;left:0}.ct-major-seventh{display:block;position:relative;width:100%}.ct-major-seventh:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:53.3333333333%}.ct-major-seventh:after{display:table}.ct-major-seventh>svg{display:block;position:absolute;top:0;left:0}.ct-octave{display:block;position:relative;width:100%}.ct-octave:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:50%}.ct-octave:after{display:table}.ct-octave>svg{display:block;position:absolute;top:0;left:0}.ct-major-tenth{display:block;position:relative;width:100%}.ct-major-tenth:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:40%}.ct-major-tenth:after{display:table}.ct-major-tenth>svg{display:block;position:absolute;top:0;left:0}.ct-major-eleventh{display:block;position:relative;width:100%}.ct-major-eleventh:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:37.5%}.ct-major-eleventh:after{display:table}.ct-major-eleventh>svg{display:block;position:absolute;top:0;left:0}.ct-major-twelfth{display:block;position:relative;width:100%}.ct-major-twelfth:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:33.3333333333%}.ct-major-twelfth:after{display:table}.ct-major-twelfth>svg{display:block;position:absolute;top:0;left:0}.ct-double-octave{display:block;position:relative;width:100%}.ct-double-octave:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:25%}.ct-double-octave:after{display:table}.ct-double-octave>svg{display:block;position:absolute;top:0;left:0}/*! normalize.css v3.0.2 | MIT License | git.io/normalize */ /** * 1. Set default font family to sans-serif. * 2. Prevent iOS text size adjust after orientation change, without disabling * user zoom. */ html { font-family: sans-serif; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ } /** * Remove default margin. */ body { margin: 0; } /* HTML5 display definitions ========================================================================== */ /** * Correct `block` display not defined for any HTML5 element in IE 8/9. * Correct `block` display not defined for `details` or `summary` in IE 10/11 * and Firefox. * Correct `block` display not defined for `main` in IE 11. */ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; } /** * 1. Correct `inline-block` display not defined in IE 8/9. * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. */ audio, canvas, progress, video { display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ } /** * Prevent modern browsers from displaying `audio` without controls. * Remove excess height in iOS 5 devices. */ audio:not([controls]) { display: none; height: 0; } /** * Address `[hidden]` styling not present in IE 8/9/10. * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. */ [hidden], template { display: none; } /* Links ========================================================================== */ /** * Remove the gray background color from active links in IE 10. */ a { color: #fff; background-color: transparent; } /** * Improve readability when focused and also mouse hovered in all browsers. */ a:active, a:hover { outline: 0; } /* Text-level semantics ========================================================================== */ /** * Address styling not present in IE 8/9/10/11, Safari, and Chrome. */ abbr[title] { border-bottom: 1px dotted; } /** * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. */ b, strong { font-weight: bold; } /** * Address styling not present in Safari and Chrome. */ dfn { font-style: italic; } /** * Address variable `h1` font-size and margin within `section` and `article` * contexts in Firefox 4+, Safari, and Chrome. */ h1 { font-size: 2em; margin: 0.67em 0; } /** * Address styling not present in IE 8/9. */ mark { background: #ff0; color: #000; } /** * Address inconsistent and variable font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` affecting `line-height` in all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } /* Embedded content ========================================================================== */ /** * Remove border when inside `a` element in IE 8/9/10. */ img { border: 0; } /** * Correct overflow not hidden in IE 9/10/11. */ svg:not(:root) { overflow: hidden; } /* Grouping content ========================================================================== */ /** * Address margin not present in IE 8/9 and Safari. */ figure { margin: 1em 40px; } /** * Address differences between Firefox and other browsers. */ hr { box-sizing: content-box; height: 0; } /** * Contain overflow in all browsers. */ pre { overflow: auto; } /** * Address odd `em`-unit font size rendering in all browsers. */ code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; } /* Forms ========================================================================== */ /** * Known limitation: by default, Chrome and Safari on OS X allow very limited * styling of `select`, unless a `border` property is set. */ /** * 1. Correct color not being inherited. * Known issue: affects color of disabled elements. * 2. Correct font properties not being inherited. * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. */ button, input, optgroup, select, textarea { color: inherit; /* 1 */ font: inherit; /* 2 */ margin: 0; /* 3 */ } /** * Address `overflow` set to `hidden` in IE 8/9/10/11. */ button { overflow: visible; } /** * Address inconsistent `text-transform` inheritance for `button` and `select`. * All other form control elements do not inherit `text-transform` values. * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. * Correct `select` style inheritance in Firefox. */ button, select { text-transform: none; } /** * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` * and `video` controls. * 2. Correct inability to style clickable `input` types in iOS. * 3. Improve usability and consistency of cursor style between image-type * `input` and others. */ button, html input[type=button], input[type=reset], input[type=submit] { -webkit-appearance: button; /* 2 */ cursor: pointer; /* 3 */ } /** * Re-set default cursor for disabled elements. */ button[disabled], html input[disabled] { cursor: default; } /** * Remove inner padding and border in Firefox 4+. */ button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } /** * Address Firefox 4+ setting `line-height` on `input` using `!important` in * the UA stylesheet. */ input { line-height: normal; } /** * It's recommended that you don't attempt to style these elements. * Firefox's implementation doesn't respect box-sizing, padding, or width. * * 1. Address box sizing set to `content-box` in IE 8/9/10. * 2. Remove excess padding in IE 8/9/10. */ input[type=checkbox], input[type=radio] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * Fix the cursor style for Chrome's increment/decrement buttons. For certain * `font-size` values of the `input`, it causes the cursor style of the * decrement button to change from `default` to `text`. */ input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { height: auto; } /** * 1. Address `appearance` set to `searchfield` in Safari and Chrome. * 2. Address `box-sizing` set to `border-box` in Safari and Chrome * (include `-moz` to future-proof). */ input[type=search] { -webkit-appearance: textfield; /* 1 */ /* 2 */ box-sizing: content-box; } /** * Remove inner padding and search cancel button in Safari and Chrome on OS X. * Safari (but not Chrome) clips the cancel button when the search input has * padding (and `textfield` appearance). */ input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration { -webkit-appearance: none; } /** * Define consistent border, margin, and padding. */ fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } /** * 1. Correct `color` not being inherited in IE 8/9/10/11. * 2. Remove padding so people aren't caught out if they zero out fieldsets. */ legend { border: 0; /* 1 */ padding: 0; /* 2 */ } /** * Remove default vertical scrollbar in IE 8/9/10/11. */ textarea { overflow: auto; } /** * Don't inherit the `font-weight` (applied by a rule above). * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. */ optgroup { font-weight: bold; } /* Tables ========================================================================== */ /** * Remove most spacing between table cells. */ table { border-collapse: collapse; border-spacing: 0; } td, th { padding: 0; } /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; position: relative; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none; } table { border-collapse: collapse; border-spacing: 0; } .slick-slide * { outline: none; } /* ----- Colors ----- */ /*============================================= = FONTS = =============================================*/ @font-face { font-family: "Geogrotesque"; src: url(/fonts/Geogrotesque-Thin.woff2?7e00fef78c22cfca29e3f9e2628ae704) format("woff2"), url(/fonts/Geogrotesque-Thin.woff?53ff036517b5fa4a1a8768176f2ae793) format("woff"); font-weight: 100; font-style: normal; } @font-face { font-family: "Geogrotesque"; src: url(/fonts/Geogrotesque-ThinItalic.woff2?562c80922873ca73db47ba583520f4fc) format("woff2"), url(/fonts/Geogrotesque-ThinItalic.woff?df6ea27615d2b54f0c0afdc6502591d4) format("woff"); font-weight: 100; font-style: italic; } @font-face { font-family: "Geogrotesque"; src: url(/fonts/Geogrotesque-UltraLight.woff2?5b4e2bece9d77ef05658011edf51978f) format("woff2"), url(/fonts/Geogrotesque-UltraLight.woff?5e963a3ff58b58d493cb5877a4a5d358) format("woff"); font-weight: 200; font-style: normal; } @font-face { font-family: "Geogrotesque"; src: url(/fonts/Geogrotesque-UltraLightItalic.woff2?c603ca7d8a86b6b0e816839e4d79055d) format("woff2"), url(/fonts/Geogrotesque-UltraLightItalic.woff?a81103cfb69affa5ecde2bc283f52ca2) format("woff"); font-weight: 200; font-style: italic; } @font-face { font-family: "Geogrotesque"; src: url(/fonts/Geogrotesque-Light.woff2?0b0eeaaf7c21d9e8fb02a3791f0c22cd) format("woff2"), url(/fonts/Geogrotesque-Light.woff?85e76cbde79dcb9e426feb31921d06b7) format("woff"); font-weight: 300; font-style: normal; } @font-face { font-family: "Geogrotesque"; src: url(/fonts/Geogrotesque-LightItalic.woff2?b83ab32e58f253dcbb57f8149dc28f74) format("woff2"), url(/fonts/Geogrotesque-LightItalic.woff?ed285186f107883ffb0c398bd74d32d6) format("woff"); font-weight: 300; font-style: italic; } @font-face { font-family: "Geogrotesque"; src: url(/fonts/Geogrotesque-Regular.woff2?c24ce5d812a187f4dc37c5d8c1808dc7) format("woff2"), url(/fonts/Geogrotesque-Regular.woff?622732c3d1a9ce18023bd348817b7226) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "Geogrotesque"; src: url(/fonts/Geogrotesque-RegularItalic.woff2?112364ac4cab79f1b872e6c15af70581) format("woff2"), url(/fonts/Geogrotesque-RegularItalic.woff?2b1af32c530012a1a3fece5bc2151493) format("woff"); font-weight: normal; font-style: italic; } @font-face { font-family: "Geogrotesque"; src: url(/fonts/Geogrotesque-Medium.woff2?bacfd34de9c1f8ff29cc847f0d3aa86a) format("woff2"), url(/fonts/Geogrotesque-Medium.woff?1a57b8937aa2427cae52547ef3ef909b) format("woff"); font-weight: 500; font-style: normal; } @font-face { font-family: "Geogrotesque"; src: url(/fonts/Geogrotesque-MediumItalic.woff2?b8fa44bee54127c4018557d9b5eb6e37) format("woff2"), url(/fonts/Geogrotesque-MediumItalic.woff?3bd5ed472766331dd468cd342dd5f702) format("woff"); font-weight: 500; font-style: italic; } @font-face { font-family: "Geogrotesque"; src: url(/fonts/Geogrotesque-SemiBold.woff2?9ecb4a6df5a916f6d808e005706ada42) format("woff2"), url(/fonts/Geogrotesque-SemiBold.woff?c616772a77fee1b8f14fd276d77093f0) format("woff"); font-weight: 600; font-style: normal; } @font-face { font-family: "Geogrotesque"; src: url(/fonts/Geogrotesque-SemiBoldItalic.woff2?50806bcac9d0f40090fa3e31eba22884) format("woff2"), url(/fonts/Geogrotesque-SemiBoldItalic.woff?a21d10c2812d4c45fd5e7b59d74b5f63) format("woff"); font-weight: 600; font-style: italic; } @font-face { font-family: "Geogrotesque"; src: url(/fonts/Geogrotesque-Bold.woff2?3f58a5a3ea3ac579b16b093501fc41d5) format("woff2"), url(/fonts/Geogrotesque-Bold.woff?4af84ca7ed4527857f0311ffc1f5c6c9) format("woff"); font-weight: bold; font-style: normal; } @font-face { font-family: "Geogrotesque"; src: url(/fonts/Geogrotesque-BoldItalic.woff2?8d3527d5635bddfe35ddf8db3f415b18) format("woff2"), url(/fonts/Geogrotesque-BoldItalic.woff?35fa1b350711937e2d1385153c9aedaf) format("woff"); font-weight: bold; font-style: italic; } /*============================================= = Font Smoothing = =============================================*/ /*============================================= = MEDIA QUERIES = =============================================*/ :root { font-size: 10px; } * { font-family: "Geogrotesque", sans-serif; color: #17324f; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } *.left-align { text-align: left; } *.center-align { text-align: center; } *.right-align { text-align: right; } h1, .h1-title { color: #0f3863; font-size: 2.8rem; font-weight: bold; line-height: 3rem; letter-spacing: 0.039rem; text-transform: uppercase; } h2 { color: #0f3863; font-family: "Geogrotesque", sans-serif; font-weight: 500; font-size: 2.1rem; letter-spacing: 0.015rem; line-height: 2.5rem; } h3, h4, h5, h6, .h3-title { color: #17324f; font-family: "Geogrotesque", sans-serif; font-weight: normal; font-size: 2.4rem; letter-spacing: 0; line-height: 2.6rem; } h1.alt, h2.alt, h3.alt, h4.alt, h5.alt, h6.alt { color: #fff; } h1.home-title, h2.home-title, h3.home-title, h4.home-title, h5.home-title, h6.home-title { margin: 0; color: #17324f; font-family: "Geogrotesque", sans-serif; font-size: 7.8rem; font-weight: bold; line-height: 7rem; letter-spacing: 0.1rem; text-transform: uppercase; } @media only screen and (max-width: 1000px) { h1.home-title, h2.home-title, h3.home-title, h4.home-title, h5.home-title, h6.home-title { font-size: 6.8rem; line-height: 6rem; } } h1.home-title.alt, h2.home-title.alt, h3.home-title.alt, h4.home-title.alt, h5.home-title.alt, h6.home-title.alt { color: #fff; } h1.home-subtitle, h2.home-subtitle, h3.home-subtitle, h4.home-subtitle, h5.home-subtitle, h6.home-subtitle { color: #9bc4cd; font-family: "Geogrotesque", sans-serif; font-weight: bold; font-size: 1.4rem; letter-spacing: 0.1rem; line-height: 1.7rem; } ul { margin: 0; padding: 0; } p, a, li, span { font-family: "Geogrotesque", sans-serif; font-weight: normal; font-size: 15px; color: #17324f; letter-spacing: 0; } p.alt, a.alt, li.alt, span.alt { color: #fff; } p.subtext, a.subtext, li.subtext, span.subtext { color: #6f8591; font-size: 1.4rem; font-weight: 600; line-height: 1.6rem; letter-spacing: 0.086rem; text-transform: uppercase; } a { text-decoration: none; } .amount { color: #fff; font-size: 1.3rem; font-weight: bold; line-height: 1.7rem; letter-spacing: 0.041rem; min-width: 3.3rem; width: 3.3rem; height: 3.3rem; display: flex; align-items: center; justify-content: center; background-color: rgba(255, 255, 255, 0.15); border-radius: 0.5rem; border: 1px solid rgba(255, 255, 255, 0.05); box-shadow: inset 0px 1px 4px 0px rgba(255, 255, 255, 0.1); } /* Form */ label { display: block; width: 100%; margin: 2.5rem 0 0 1rem; color: #5e7a97; font-size: 1.4rem; font-weight: 500; line-height: 1.7rem; letter-spacing: 0.02rem; } span.invalid-feedback { margin: 0.5rem 0 0 0; color: #bc0d26; font-size: 1.1rem; font-weight: 600; line-height: 1.7rem; letter-spacing: 0.02rem; } select { -webkit-appearance: none; -moz-appearance: none; appearance: none; font-family: "Geogrotesque", sans-serif; } /* Table */ .accent, table.table--trajecten .name, table.table--storingen tbody .category, table.table--stewards .full_name, table.table--schepen .name, table.table--scheepsmodellen .name, table.table--planningen .name, table.table--meldingen tbody .created_at_readable, table.table--kapiteins .full_name, table.table--haltes .name, table.table--gebruikers .full_name, table.table--dienstregelingen .name { color: #0e3762; font-size: 1.4rem; font-weight: 600; line-height: 1.7rem; letter-spacing: 0.02rem; } .info, table.table--trajecten .flights, table.table--trajecten .from_to_end { color: #7e99a6; font-size: 1.4rem; font-weight: 500; line-height: 1.7rem; letter-spacing: 0.02rem; } div.block--checkbox--dashboard.form-item-urgent label { pointer-events: none; } div.block--checkbox--dashboard.form-item-urgent div.wrap { position: relative; padding: 2rem 2.5rem; border: 0.1rem solid rgba(0, 0, 0, 0.09); border-radius: 0.4rem; box-shadow: inset 0.3rem -0.3rem 0px 0px rgba(0, 0, 0, 0.01); display: flex; } div.block--checkbox--dashboard.form-item-urgent div.content { padding: 0.7rem 0 0 1.5rem; } div.block--checkbox--dashboard.form-item-urgent p { color: #0e3761; font-size: 1.6rem; font-weight: 500; line-height: 1.8rem; letter-spacing: 0.023rem; } div.block--checkbox--dashboard.form-item-urgent small { margin: 0.5rem 0 0 0; display: flex; align-items: center; color: #6f8591; font-size: 1.4rem; font-weight: 500; line-height: 1.7rem; letter-spacing: 0; } div.block--checkbox--dashboard.form-item-urgent small svg { margin: 0 0.8rem 0 0; } div.black--checkboxes--dashboard label { pointer-events: none; } div.black--checkboxes--dashboard div.wrap { border: 0.1rem solid rgba(0, 0, 0, 0.09); border-radius: 0.4rem; box-shadow: inset 0.3rem -0.3rem 0px 0px rgba(0, 0, 0, 0.01); } div.black--checkboxes--dashboard div.option-wrap { position: relative; padding: 2rem 2.5rem; display: flex; } div.black--checkboxes--dashboard div.option-wrap + div.option-wrap { border-top: 1px solid #f6f6f6; } div.black--checkboxes--dashboard div.content { width: 100%; margin: 0 0 0 1.5rem; display: flex; justify-content: space-between; align-items: center; } div.black--checkboxes--dashboard p { color: #0e3761; font-size: 1.6rem; font-weight: 500; line-height: 1.8rem; letter-spacing: 0.023rem; } div.black--checkboxes--dashboard span.extra { color: #6f8591; font-size: 14px; font-weight: 500; letter-spacing: 0px; } div.black--checkboxes--dashboard span.extra svg { max-width: 15px; max-height: 10px; } div.block--contactinformatie { display: flex; flex-wrap: wrap; justify-content: space-between; } @media only screen and (max-width: 850px) { div.block--contactinformatie .form-item { width: 100% !important; } } div.block--contactinformatie .form-item:nth-of-type(1) { width: 100%; } div.block--contactinformatie .form-item:nth-of-type(2) { width: calc(40% - 2.5rem); } div.block--contactinformatie .form-item:nth-of-type(3) { width: calc(60% - 2.5rem); } div.block--contactinformatie .form-item:nth-of-type(4), div.block--contactinformatie .form-item:nth-of-type(5), div.block--contactinformatie .form-item:nth-of-type(6) { width: calc(50% - 2.5rem); } div.block--geavanceerd.field { display: flex; flex-wrap: wrap; align-items: center; } div.block--geavanceerd.field .form-item:nth-of-type(1) { width: 12.5%; } div.block--geavanceerd.field .form-item:nth-of-type(2) { margin-top: 0 !important; margin-left: 2.5rem; width: 40%; } div.block--geavanceerd.field .form-item:nth-of-type(3), div.block--geavanceerd.field .form-item:nth-of-type(5), div.block--geavanceerd.field .form-item:nth-of-type(6), div.block--geavanceerd.field .form-item:nth-of-type(4) { margin-top: 0 !important; margin-left: 5rem; } div.block--geavanceerd.field .form-item:nth-of-type(3) .block--checkbox--dashboard div.wrap, div.block--geavanceerd.field .form-item:nth-of-type(5) .block--checkbox--dashboard div.wrap, div.block--geavanceerd.field .form-item:nth-of-type(6) .block--checkbox--dashboard div.wrap, div.block--geavanceerd.field .form-item:nth-of-type(4) .block--checkbox--dashboard div.wrap { position: relative; height: 6rem; width: 6rem; border: none; display: flex; } div.block--geavanceerd.field .form-item:nth-of-type(3) .block--checkbox--dashboard div.wrap .checkbox--dashboard, div.block--geavanceerd.field .form-item:nth-of-type(5) .block--checkbox--dashboard div.wrap .checkbox--dashboard, div.block--geavanceerd.field .form-item:nth-of-type(6) .block--checkbox--dashboard div.wrap .checkbox--dashboard, div.block--geavanceerd.field .form-item:nth-of-type(4) .block--checkbox--dashboard div.wrap .checkbox--dashboard { width: 100%; height: 100%; } div.block--geavanceerd.field .form-item:nth-of-type(3) .block--checkbox--dashboard div.wrap .checkbox--dashboard .checker, div.block--geavanceerd.field .form-item:nth-of-type(3) .block--checkbox--dashboard div.wrap .checkbox--dashboard input, div.block--geavanceerd.field .form-item:nth-of-type(5) .block--checkbox--dashboard div.wrap .checkbox--dashboard .checker, div.block--geavanceerd.field .form-item:nth-of-type(5) .block--checkbox--dashboard div.wrap .checkbox--dashboard input, div.block--geavanceerd.field .form-item:nth-of-type(6) .block--checkbox--dashboard div.wrap .checkbox--dashboard .checker, div.block--geavanceerd.field .form-item:nth-of-type(6) .block--checkbox--dashboard div.wrap .checkbox--dashboard input, div.block--geavanceerd.field .form-item:nth-of-type(4) .block--checkbox--dashboard div.wrap .checkbox--dashboard .checker, div.block--geavanceerd.field .form-item:nth-of-type(4) .block--checkbox--dashboard div.wrap .checkbox--dashboard input { width: 100%; height: 100%; top: 0; left: 0; } div.block--geavanceerd.field .form-item:nth-of-type(3) .block--checkbox--dashboard div.wrap .checkbox--dashboard .checker svg, div.block--geavanceerd.field .form-item:nth-of-type(3) .block--checkbox--dashboard div.wrap .checkbox--dashboard input svg, div.block--geavanceerd.field .form-item:nth-of-type(5) .block--checkbox--dashboard div.wrap .checkbox--dashboard .checker svg, div.block--geavanceerd.field .form-item:nth-of-type(5) .block--checkbox--dashboard div.wrap .checkbox--dashboard input svg, div.block--geavanceerd.field .form-item:nth-of-type(6) .block--checkbox--dashboard div.wrap .checkbox--dashboard .checker svg, div.block--geavanceerd.field .form-item:nth-of-type(6) .block--checkbox--dashboard div.wrap .checkbox--dashboard input svg, div.block--geavanceerd.field .form-item:nth-of-type(4) .block--checkbox--dashboard div.wrap .checkbox--dashboard .checker svg, div.block--geavanceerd.field .form-item:nth-of-type(4) .block--checkbox--dashboard div.wrap .checkbox--dashboard input svg { transform: scale(1.5); } div.block--geavanceerd.field .form-item:nth-of-type(3) .block--checkbox--dashboard div.wrap .checkbox--dashboard input, div.block--geavanceerd.field .form-item:nth-of-type(5) .block--checkbox--dashboard div.wrap .checkbox--dashboard input, div.block--geavanceerd.field .form-item:nth-of-type(6) .block--checkbox--dashboard div.wrap .checkbox--dashboard input, div.block--geavanceerd.field .form-item:nth-of-type(4) .block--checkbox--dashboard div.wrap .checkbox--dashboard input { top: 4px; left: 4px; } div.block--haltes { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; } div.block--haltes .form-item { margin-top: 0 !important; width: calc(50% - 0.5rem); } div.block--hidden_intro { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; } div.block--hidden_intro .form-item:nth-of-type(1) { width: 12.5%; } div.block--hidden_intro .form-item:nth-of-type(2) { margin-top: 0 !important; width: calc(100% - 2.5rem - 12.5%); } div.block--hidden_zone_intro { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; } div.block--hidden_zone_intro .form-item:nth-of-type(2) { margin-top: 0 !important; width: calc(100% - 2.5rem - 14rem); } div.block--informatie.field { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; } div.block--informatie.field .form-item:nth-of-type(1) { width: 40%; } div.block--informatie.field .form-item:nth-of-type(2) { margin-top: 0 !important; width: calc(100% - 2.5rem - 40%); } div.block--informatie.field .form-item:nth-of-type(3) { width: 100%; } div.block--informatie.type { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; } div.block--informatie.type .form-item:nth-of-type(1) { margin-top: 0 !important; width: 45%; } div.block--informatie.type .form-item:nth-of-type(2) { margin-top: 1rem !important; width: calc(100% - 5rem - 45%); } div.block--pincode .form-item { display: flex; justify-content: space-between; } @media only screen and (max-width: 850px) { div.block--pincode .form-item { display: block; } } div.block--pincode .form-item div { width: calc(50% - 2.5rem); } @media only screen and (max-width: 850px) { div.block--pincode .form-item div { width: 100%; } div.block--pincode .form-item div:nth-of-type(2) { margin-top: 3rem; } } div.block--veiligheid { display: flex; align-items: center; justify-content: space-between; } div.block--veiligheid .form-item { margin: 0 !important; flex: 0 0 32%; } div.block--wachtwoord .form-item:nth-of-type(2) { display: flex; justify-content: space-between; } @media only screen and (max-width: 850px) { div.block--wachtwoord .form-item:nth-of-type(2) { display: block; } } div.block--wachtwoord .form-item:nth-of-type(2) div { width: calc(50% - 2.5rem); } @media only screen and (max-width: 850px) { div.block--wachtwoord .form-item:nth-of-type(2) div { width: 100%; } div.block--wachtwoord .form-item:nth-of-type(2) div:nth-child(2) { margin-top: 3rem; } } main.concession-dashboard section.flights, .livewire--flights section.flights { margin-bottom: 3rem; } main.concession-dashboard section.flights #map-markers, .livewire--flights section.flights #map-markers { display: none; } main.concession-dashboard section.flights #map, .livewire--flights section.flights #map { height: 250px; background-color: rgba(12, 55, 100, 0.95); border-radius: 8px 8px 0 0; border-left: 2px solid rgba(0, 0, 0, 0.05); border-right: 2px solid rgba(0, 0, 0, 0.05); background-clip: padding-box; } main.concession-dashboard section.flights #map .mapboxgl-ctrl-bottom-left, main.concession-dashboard section.flights #map .mapboxgl-ctrl-bottom-right, .livewire--flights section.flights #map .mapboxgl-ctrl-bottom-left, .livewire--flights section.flights #map .mapboxgl-ctrl-bottom-right { display: none !important; } main.concession-dashboard section.flights ul, .livewire--flights section.flights ul { background-color: rgba(12, 55, 100, 0.95); padding: 1rem 0; border-left: 2px solid rgba(0, 0, 0, 0.05); border-right: 2px solid rgba(0, 0, 0, 0.05); background-clip: padding-box; } main.concession-dashboard section.flights ul li, .livewire--flights section.flights ul li { display: flex; align-items: center; justify-content: space-between; padding: 1rem 2rem; } main.concession-dashboard section.flights ul li + li, .livewire--flights section.flights ul li + li { border-top: 1px solid #153C65; } main.concession-dashboard section.flights ul li > div, .livewire--flights section.flights ul li > div { flex: 1 1 auto; display: flex; align-items: center; } main.concession-dashboard section.flights ul li > div:last-child, .livewire--flights section.flights ul li > div:last-child { justify-content: flex-end; } main.concession-dashboard section.flights ul li > div p.ship, .livewire--flights section.flights ul li > div p.ship { background: #fff; border-radius: 4px; padding: 1rem; display: flex; align-items: center; } main.concession-dashboard section.flights ul li > div p.ship span, .livewire--flights section.flights ul li > div p.ship span { margin-left: 1rem; font-size: 14px; color: #0c3764; letter-spacing: 0.2px; font-weight: 600; } main.concession-dashboard section.flights ul li > div p.shift, main.concession-dashboard section.flights ul li > div p.track, .livewire--flights section.flights ul li > div p.shift, .livewire--flights section.flights ul li > div p.track { margin-left: 3rem; display: flex; align-items: center; white-space: nowrap; text-overflow: ellipsis; } main.concession-dashboard section.flights ul li > div p.shift span, main.concession-dashboard section.flights ul li > div p.track span, .livewire--flights section.flights ul li > div p.shift span, .livewire--flights section.flights ul li > div p.track span { margin-left: 1rem; font-size: 14px; color: #fff; letter-spacing: 0.2px; font-weight: 600; } @media only screen and (max-width: 1000px) { main.concession-dashboard section.flights ul li > div p.track, .livewire--flights section.flights ul li > div p.track { display: none; } } main.concession-dashboard section.flights ul li > div a.malfunctions, .livewire--flights section.flights ul li > div a.malfunctions { display: flex; align-items: center; background-color: rgba(255, 255, 255, 0.05); border-radius: 4px; padding: 1.1rem 1rem; margin-right: 0.5rem; } main.concession-dashboard section.flights ul li > div a.malfunctions span, .livewire--flights section.flights ul li > div a.malfunctions span { color: #fff; font-size: 14px; font-weight: 500; letter-spacing: 0.2px; margin-left: 1rem; } main.concession-dashboard section.flights > a, .livewire--flights section.flights > a { display: block; padding: 2rem 0; color: #fff; font-size: 14px; font-weight: bold; text-transform: uppercase; letter-spacing: 1.5px; background-color: #0f3863; text-align: center; border: 2px solid rgba(0, 0, 0, 0.05); border-top: none; border-radius: 0 0 8px 8px; background-clip: padding-box; } main.concession-dashboard section.flights .empty, .livewire--flights section.flights .empty { height: 330px; background-color: rgba(12, 55, 100, 0.95); border-radius: 8px; border-left: 2px solid rgba(0, 0, 0, 0.05); border-right: 2px solid rgba(0, 0, 0, 0.05); background-clip: padding-box; display: flex; align-items: center; justify-content: center; } main.concession-dashboard section.flights .empty div, .livewire--flights section.flights .empty div { max-width: 275px; } main.concession-dashboard section.flights .empty div svg, .livewire--flights section.flights .empty div svg { display: block; margin: 0 auto; } main.concession-dashboard section.flights .empty div h6, .livewire--flights section.flights .empty div h6 { color: #fff; font-size: 21px; font-weight: bold; text-transform: uppercase; text-align: center; margin: 1.5rem 0 0.3rem 0; } main.concession-dashboard section.flights .empty div p, .livewire--flights section.flights .empty div p { color: #fff; font-size: 16px; font-weight: 500; text-align: center; letter-spacing: 0.23px; } main.concession-dashboard .malfunctions ul { border: 2px solid rgba(0, 0, 0, 0.05); border-bottom: none; border-radius: 8px; } main.concession-dashboard .malfunctions ul li { padding: 2.5rem; } main.concession-dashboard .malfunctions ul li + li { border-top: 1px solid #fcfcfc; } main.concession-dashboard .malfunctions ul li:first-child { border-radius: 8px 8px 0 0; } main.concession-dashboard .malfunctions ul li:nth-child(odd) { background-color: #fff; } main.concession-dashboard .malfunctions ul li:nth-child(even) { background-color: #fcfcfc; } main.concession-dashboard .malfunctions ul li h6 { color: #0e3762; font-size: 18px; font-weight: 600; letter-spacing: 0.32px; margin-bottom: 1rem; } main.concession-dashboard .malfunctions ul li div.info, main.concession-dashboard .malfunctions ul li table.table--trajecten div.flights, table.table--trajecten main.concession-dashboard .malfunctions ul li div.flights, main.concession-dashboard .malfunctions ul li table.table--trajecten div.from_to_end, table.table--trajecten main.concession-dashboard .malfunctions ul li div.from_to_end { margin-bottom: 1.5rem; } main.concession-dashboard .malfunctions ul li div.info div, main.concession-dashboard .malfunctions ul li table.table--trajecten div.flights div, table.table--trajecten main.concession-dashboard .malfunctions ul li div.flights div, main.concession-dashboard .malfunctions ul li table.table--trajecten div.from_to_end div, table.table--trajecten main.concession-dashboard .malfunctions ul li div.from_to_end div { background: #fcfcfc; border: 1px solid #F5F5F5; border-radius: 4px; display: inline-flex; align-items: center; padding: 1rem; } main.concession-dashboard .malfunctions ul li div.info div + div, main.concession-dashboard .malfunctions ul li table.table--trajecten div.flights div + div, table.table--trajecten main.concession-dashboard .malfunctions ul li div.flights div + div, main.concession-dashboard .malfunctions ul li table.table--trajecten div.from_to_end div + div, table.table--trajecten main.concession-dashboard .malfunctions ul li div.from_to_end div + div { margin-left: 0.5rem; } main.concession-dashboard .malfunctions ul li div.info div p, main.concession-dashboard .malfunctions ul li table.table--trajecten div.flights div p, table.table--trajecten main.concession-dashboard .malfunctions ul li div.flights div p, main.concession-dashboard .malfunctions ul li table.table--trajecten div.from_to_end div p, table.table--trajecten main.concession-dashboard .malfunctions ul li div.from_to_end div p { margin-left: 1rem; color: #0c3764; font-size: 12px; font-weight: 600; letter-spacing: 0.25px; } main.concession-dashboard .malfunctions ul li p { color: #7b94a0; font-size: 14px; font-weight: 500; letter-spacing: 0.2px; } main.concession-dashboard .malfunctions a { display: block; padding: 2rem 0; color: #fff; font-size: 14px; font-weight: bold; text-transform: uppercase; letter-spacing: 1.5px; background-color: #0f3863; text-align: center; border: 2px solid rgba(0, 0, 0, 0.05); border-top: none; border-radius: 0 0 8px 8px; background-clip: padding-box; } main.concession-dashboard .malfunctions .empty { height: 330px; background-color: rgba(255, 255, 255, 0.95); border-radius: 8px; border-left: 2px solid rgba(0, 0, 0, 0.05); border-right: 2px solid rgba(0, 0, 0, 0.05); background-clip: padding-box; display: flex; align-items: center; justify-content: center; } main.concession-dashboard .malfunctions .empty div { max-width: 275px; } main.concession-dashboard .malfunctions .empty div svg { display: block; margin: 0 auto; } main.concession-dashboard .malfunctions .empty div h6 { color: #17324f; font-size: 21px; font-weight: bold; text-transform: uppercase; text-align: center; margin: 1.5rem 0 0.3rem 0; } main.concession-dashboard .malfunctions .empty div p { color: #6f8591; font-size: 16px; font-weight: 500; text-align: center; letter-spacing: 0.23px; } @media only screen and (max-width: 1400px) { main.concession-dashboard section.notifications { margin-bottom: 3rem; } } main.concession-dashboard section.notifications div.head { border-top: 2px solid rgba(0, 0, 0, 0.05); border-left: 2px solid rgba(0, 0, 0, 0.05); border-right: 2px solid rgba(0, 0, 0, 0.05); background-clip: padding-box; border-bottom: 1px solid #f6f6f6; border-radius: 8px 8px 0 0; background-color: #fff; padding: 2rem 5rem 2rem 2.5rem; display: flex; align-items: center; } main.concession-dashboard section.notifications div.head p { flex: 1 1 auto; color: #7e99a6; font-size: 12px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.75px; line-height: 14px; } main.concession-dashboard section.notifications div.head p:last-child { flex: 0 0 30%; } main.concession-dashboard section.notifications ul li { display: flex; align-items: center; justify-content: space-between; padding: 1.5rem 2rem; border-left: 2px solid rgba(0, 0, 0, 0.05); border-right: 2px solid rgba(0, 0, 0, 0.05); background-clip: padding-box; } main.concession-dashboard section.notifications ul li + li { border-top: 1px solid #f6f6f6; } main.concession-dashboard section.notifications ul li:nth-child(odd) { background-color: #fcfcfc; } main.concession-dashboard section.notifications ul li:nth-child(even) { background-color: #fff; } main.concession-dashboard section.notifications ul li > div { flex: 1 1 auto; display: flex; align-items: center; justify-content: space-between; } main.concession-dashboard section.notifications ul li > div p:first-child { color: #0e3762; font-size: 14px; font-weight: 500; letter-spacing: 0.2px; flex: 0 0 70%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } main.concession-dashboard section.notifications ul li > div p:last-child { color: #0e3762; font-size: 14px; font-weight: 600; letter-spacing: 0.2px; flex: 1 1 30%; } main.concession-dashboard section.notifications > a { display: block; padding: 2rem 0; color: #fff; font-size: 14px; font-weight: bold; text-transform: uppercase; letter-spacing: 1.5px; background-color: #0f3863; text-align: center; border: 2px solid rgba(0, 0, 0, 0.05); border-top: none; border-radius: 0 0 8px 8px; background-clip: padding-box; } main.concession-dashboard section.notifications .empty { height: 330px; background-color: rgba(255, 255, 255, 0.95); border-radius: 8px; border-left: 2px solid rgba(0, 0, 0, 0.05); border-right: 2px solid rgba(0, 0, 0, 0.05); background-clip: padding-box; display: flex; align-items: center; justify-content: center; } main.concession-dashboard section.notifications .empty div { max-width: 275px; } main.concession-dashboard section.notifications .empty div > svg { display: block; margin: 0 auto; } main.concession-dashboard section.notifications .empty div h6 { color: #17324f; font-size: 21px; font-weight: bold; text-transform: uppercase; text-align: center; margin: 1.5rem 0 0.3rem 0; } main.concession-dashboard section.notifications .empty div p { color: #6f8591; font-size: 16px; font-weight: 500; text-align: center; letter-spacing: 0.23px; } main.concession-dashboard section.notifications .empty div a { margin: 2rem auto 0 auto; max-width: 130px; } main.concession-dashboard .tiles { margin-bottom: 3rem; } main.concession-dashboard .tiles ul { background-color: rgba(12, 55, 100, 0.08); border-radius: 20px; padding: 1rem; display: flex; align-items: center; overflow: scroll; } main.concession-dashboard .tiles ul li + li { margin-left: 1rem; } main.concession-dashboard .tiles ul a { box-sizing: border-box; position: relative; width: 175px; height: 175px; background-color: #fff; border-radius: 8px; padding: 1rem 1rem 1rem 2rem; display: flex; align-items: flex-end; flex-direction: row; transition: all 0.3s ease; } main.concession-dashboard .tiles ul a:hover { background-color: #f2f2f2; } main.concession-dashboard .tiles ul .count { position: absolute; background: #143f6a; border-radius: 12px; padding: 1rem; height: 35px; width: 35px; box-sizing: border-box; text-align: center; color: #fff; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.09px; top: 10px; right: 10px; } main.concession-dashboard .tiles ul p { margin-top: 1rem; color: #0c3764; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.75px; } .cta--small, .cta--view, .cta--logout, .cta--wrapper .cta--dropdown, .cta--delete, .cta--blue, .cta--add, .cta--add--center { position: relative; outline: none; min-height: 4.3px; height: 4.3rem; padding: 0 2.5rem; border-radius: 0.6rem; display: flex; justify-content: center; align-items: center; color: #fff; text-transform: uppercase; font-size: 1.2rem; font-weight: bold; line-height: 1.5rem; letter-spacing: 0.08rem; } .cta--small:after, .cta--view:after, .cta--logout:after, .cta--wrapper .cta--dropdown:after, .cta--delete:after, .cta--blue:after, .cta--add:after, .cta--add--center:after { content: ""; pointer-events: none; display: block; position: absolute; width: 100%; border-radius: 0.7rem; border: 2px solid rgba(0, 0, 0, 0.05); top: -0.2rem; bottom: -0.2rem; left: -0.2rem; right: -0.2rem; } .cta--small span, .cta--view span, .cta--logout span, .cta--wrapper .cta--dropdown span, .cta--delete span, .cta--blue span, .cta--add span, .cta--add--center span { color: #fff; text-transform: uppercase; font-size: 1.2rem; font-weight: bold; line-height: 1.5rem; letter-spacing: 0.08rem; } .cta--add, .cta--add--center { position: relative; background-color: #bc0d26; box-shadow: inset 0 0.1rem 1.3rem 0 rgba(0, 0, 0, 0.1); } .cta--add:hover svg, .cta--add--center:hover svg { transform: scale(1.1); } .cta--add svg, .cta--add--center svg { margin: 0 1rem 0 0; transition: transform 0.3s ease; } .cta--add--center { padding: 0 5rem; } .cta--blue { background-color: #08223d; border: 1px solid rgba(0, 0, 0, 0.1); box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.1); transition: background-color 0.3s ease; } .cta--blue:hover { background-color: #000; } .cta--delete { background-color: #7e99a6; border: 1px solid rgba(76, 108, 121, 0.1); box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.1); transition: background-color 0.3s ease; } .cta--delete.transparent { background-color: rgba(126, 153, 166, 0.7); } .cta--delete:hover { background-color: #bc0d26; } .cta--delete svg { margin: 0 1rem 0 0; } .cta--wrapper { position: relative; } .cta--wrapper .cta--dropdown { display: flex; align-items: center; justify-content: space-between; cursor: pointer; background-color: #062240; border: 2px solid rgba(0, 0, 0, 0.05); box-shadow: inset 0px 1px 13px 0px rgba(0, 0, 0, 0.1); } .cta--wrapper .cta--dropdown:hover { box-shadow: 0 0 0.2rem 0.1rem rgba(0, 0, 0, 0.2); transition: all 0.3s ease; } .cta--wrapper .cta--dropdown span { margin: 0 0 0 1rem; min-width: 10rem; width: 100%; } .cta--wrapper .cta--dropdown span + svg { margin: 0 0 0 1rem; } .cta--wrapper .cta--dropdown.active { border-radius: 0.6rem 0.6rem 0 0; transition: border-radius 0.3s ease 0.1s; } .cta--wrapper .cta--dropdown.active svg:nth-of-type(2) { transform: scaleY(-1); } .cta--wrapper .cta--dropdown.active svg:nth-of-type(2) g path { fill: #fff; } .cta--wrapper .cta--dropdown svg:nth-of-type(1) { min-width: 14px; } .cta--wrapper .cta--dropdown svg:nth-of-type(2) { transition: transform 0.3s ease; } .cta--wrapper .cta--dropdown svg:nth-of-type(2) g path { transition: all 0.3s ease; } .cta--wrapper ul.items { overflow: hidden; position: absolute; z-index: 1; width: 100%; background-color: #0a2c50; border-radius: 0 0 0.6rem 0.6rem; } .cta--wrapper ul.items.active li.item { margin-top: 0%; transition: margin-top 0.5s ease; } .cta--wrapper ul.items li.item { margin-top: -100%; border-top: 1px solid #0a2c50; } .cta--wrapper ul.items li.item + li.item { border-top: 1px solid #11355c; } .cta--wrapper ul.items li.item a { cursor: pointer; display: flex; align-items: center; padding: 1.5rem 2.5rem; color: rgba(255, 255, 255, 0.7); font-size: 1.2rem; font-weight: bold; line-height: 1.5rem; letter-spacing: 0.08rem; text-transform: uppercase; transition: color 0.3s ease; } .cta--wrapper ul.items li.item a:hover { color: #bfdde4; } .cta--wrapper ul.items li.item a:hover svg g path { fill: #bfdde4; } .cta--wrapper ul.items li.item svg { margin: 0 1rem 0 0; } .cta--wrapper ul.items li.item svg g path { transition: fill 0.3s ease; } .filter .customSelect { position: relative; } .filter .customSelect select { display: none; /*hide original SELECT element: */ } .filter .customSelect.is-open .custom-select-opener { border-radius: 6px 6px 0 0; } .filter .customSelect.is-open .custom-select-opener:after { transform: translateY(-50%) scaleY(-1); } .filter .customSelect.is-open .custom-select-panel div { margin-top: 0%; transition: margin-top 0.5s ease; } .filter .customSelect .custom-select-opener { display: block; background-color: #08223d; min-width: 15rem; margin: 0 0 0 1.5rem; cursor: pointer; padding: 1.1rem 2rem; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; user-select: none; outline: none; border-radius: 0.6rem; box-shadow: inset 0px 1px 4px 0px rgba(0, 0, 0, 0.1); } .filter .customSelect .custom-select-opener span { color: rgba(255, 255, 255, 0.7); font-size: 1.4rem; font-weight: 600; line-height: 1.7rem; letter-spacing: 0.02rem; transition: all 0.3s ease; } .filter .customSelect .custom-select-opener:hover span { color: white; } .filter .customSelect .custom-select-opener:after { background-image: url(/images/icon--dropdown.svg?e82528ef595593cb10890dfe53574279); background-size: auto; background-repeat: no-repeat; background-position: center; position: absolute; content: ""; top: 50%; transform: translateY(-50%); right: 2rem; width: 5px; height: 3px; transition: all 0.3s ease; } .filter .customSelect .custom-select-panel { position: absolute; overflow: hidden; background-color: #0a2c50; top: 100%; left: 0; right: 0; z-index: 99; min-width: 15rem; margin: 0 0 0 1.5rem; border-radius: 0 0 6px 6px; } .filter .customSelect .custom-select-panel div { margin-top: -100%; padding: 1.1rem 2rem; cursor: pointer; color: #fff; font-size: 14px; font-weight: 600; letter-spacing: 0.2px; transition: color 0.3s ease; } .filter .customSelect .custom-select-panel div + div { border-top: 1px solid #11355c; } .filter .customSelect .custom-select-panel div:hover { background-color: rgba(0, 0, 0, 0.1); } .cta--logout { width: 4.3rem; padding: 0; background-color: rgba(0, 0, 0, 0.5); border: 2px solid rgba(0, 0, 0, 0.05); box-shadow: inset 0px 1px 13px 0px rgba(0, 0, 0, 0.5); transition: box-shadow 0.3s ease; } .cta--logout:hover { box-shadow: 0 0 0.2rem 0.1rem rgba(0, 0, 0, 0.2); } .cta--logout:hover #Icon--Logout--Arrow { transform: translateX(1.75px); } .cta--logout #Icon--Logout--Arrow { z-index: 1; transition: transform 0.3s ease; } .cta--view { background-color: #0f3863; border: 1px solid rgba(0, 0, 0, 0.1); box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.1); transition: background-color 0.3s ease; } .cta--view:hover { background-color: #124579; } .cta--view svg { margin: 0 1rem 0 0; } section.detail--checklist > main { margin-top: 1.5rem; display: flex; align-items: stretch; } section.detail--checklist > main > .left { flex: 0 0 30%; background-color: #eff8fa; border-radius: 0.6rem 0 0 0.6rem; padding: 5rem; } section.detail--checklist > main > .left .item + .item { margin-top: 3rem; } section.detail--checklist > main > .left .item p { color: #0f3863; font-size: 16px; font-weight: 500; letter-spacing: 0px; } section.detail--checklist > main > .left .item p.label { margin-bottom: 0.5rem; display: flex; align-items: center; } section.detail--checklist > main > .left .item p.label svg { margin-right: 1.5rem; width: 15px; } section.detail--checklist > main > .left .item p.label span { color: #7e99a6; font-size: 12px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.75px; line-height: 31.52px; margin-left: 0; } section.detail--checklist > main > .left .item p.title { font-size: 28px; letter-spacing: 0.39px; } section.detail--checklist > main > .left .item p > span { margin-left: 3rem; } section.detail--checklist > main > .left .item p > span.number { margin-left: 1rem; color: #3a5260; font-size: 24px; font-weight: 600; text-align: right; letter-spacing: 0.34px; } section.detail--checklist > main > .left .item .passengers { display: flex; align-items: center; justify-content: space-between; width: 80%; } section.detail--checklist > main > .right { flex: 1 1 auto; background-color: #fff; border-radius: 0 0.6rem 0.6rem 0; padding: 4rem 2.5rem 4rem 2.5rem; } section.detail--checklist > main > .right .category + .category { margin-top: 3rem; } section.detail--checklist > main > .right .category > .title { color: #0f3863; font-size: 28px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.39px; margin-bottom: 2rem; } section.detail--checklist > main > .right .category > .subcategory + .subcategory { margin-top: 3rem; } section.detail--checklist > main > .right .category > .subcategory > .label { color: #0f3863; font-size: 12px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.75px; margin-bottom: 1rem; } section.detail--checklist > main > .right .category > .subcategory > .fields { border: 1px solid rgba(14, 55, 97, 0.05); border-radius: 6px; padding: 1rem 2rem; } section.detail--checklist > main > .right .category > .subcategory > .fields li { padding: 1rem; display: flex; align-items: center; justify-content: space-between; } section.detail--checklist > main > .right .category > .subcategory > .fields li + li { border-top: 1px solid #edf0f3; } section.detail--checklist > main > .right .category > .subcategory > .fields li .column { color: #7e99a6; font-size: 12px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.75px; line-height: 31.52px; } section.detail--checklist > main > .right .category > .subcategory > .fields li .right { display: flex; align-items: center; } section.detail--checklist > main > .right .category > .subcategory > .fields li .right a { background: #7e99a6; border: 1px solid rgba(76, 108, 121, 0.1); border-radius: 5px; padding: 1rem 1.5rem; margin-right: 2rem; } section.detail--checklist > main > .right .category > .subcategory > .fields li .right a svg { margin-right: 1rem; } section.detail--checklist > main > .right .category > .subcategory > .fields li .right a span { color: #fff; font-size: 14px; font-weight: 500; letter-spacing: 0.2px; } section.detail--checklist > main > .right .category > .subcategory > .fields li .right .value { color: #0e3762; font-size: 14px; font-weight: 500; letter-spacing: 0.2px; } section.detail--checklist > main > .right .category > .subcategory > .fields li .right > svg { margin-left: 2rem; } section.detail--crew { background-color: #0e3761; border-radius: 8px; margin-top: 1rem; display: flex; align-items: center; padding: 5rem; } section.detail--crew .left { margin-left: 12rem; margin-right: 17rem; } @media only screen and (max-width: 1400px) { section.detail--crew .left { margin: 0 5rem; } } section.detail--crew .left .photo { border-radius: 8rem; border: 1px solid rgba(151, 151, 151, 0.15); width: 150px; height: 150px; background-repeat: no-repeat; background-position: center; background-size: cover; } section.detail--crew .left h6 { margin-top: 2rem; color: #fff; font-size: 21px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.29px; text-align: center; } section.detail--crew .right { flex: 1 1 auto; } section.detail--crew .right .top { display: flex; align-items: center; margin-bottom: 3rem; } section.detail--crew .right .top p { color: #fff; font-size: 18px; font-weight: 500; letter-spacing: 0.26px; } section.detail--crew .right .top p.label { color: rgba(255, 255, 255, 0.4); font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: 1.25px; margin-bottom: 0.5rem; } section.detail--crew .right .bottom { background: #0c2b4b; border: 2px solid rgba(0, 0, 0, 0.05); box-shadow: inset 0px 1px 13px 0px rgba(0, 0, 0, 0.1); border-radius: 7px; padding: 4rem; display: flex; align-items: flex-end; justify-content: space-between; } @media only screen and (max-width: 1000px) { section.detail--crew .right .bottom { justify-content: center; } } section.detail--crew .right .bottom .flights p, section.detail--crew .right .bottom .flights-by-track p { color: #fff; font-size: 96px; font-weight: 600; text-transform: uppercase; letter-spacing: -2px; } section.detail--crew .right .bottom .flights p.label, section.detail--crew .right .bottom .flights-by-track p.label { color: #bfdde4; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.86px; line-height: 14px; } section.detail--crew .right .bottom .flights p.label strong, section.detail--crew .right .bottom .flights-by-track p.label strong { font-size: 14px; color: inherit; text-transform: inherit; } section.detail--crew .right .bottom .flights-by-track { display: flex; } @media only screen and (max-width: 1000px) { section.detail--crew .right .bottom .flights-by-track { display: none; } } section.detail--crew .right .bottom .flights-by-track .track { padding-right: 2.5rem; } section.detail--crew .right .bottom .flights-by-track .track + .track { padding-left: 2.5rem; border-left: 1px solid #163658; } section.detail--crew .right .bottom .flights-by-track .track:last-child { padding-right: 0; } section.detail--crew .right .bottom .flights-by-track p { font-size: 56px; font-weight: 300; } section.detail--captain > a, section.detail--steward > a { margin-top: 2rem; font-size: 14px; line-height: 16px; font-weight: bold; text-transform: uppercase; letter-spacing: 1.5px; max-width: 200px; padding: 2rem 0rem; height: initial; background-color: #0f3863; } section.detail--entry > main { margin-top: 1.5rem; display: flex; align-items: stretch; } section.detail--entry > main > .left { flex: 0 0 30%; background-color: #eff8fa; border-radius: 0.6rem 0 0 0.6rem; padding: 5rem; } section.detail--entry > main > .left .item + .item { margin-top: 3rem; } section.detail--entry > main > .left .item p { color: #0f3863; font-size: 16px; font-weight: 500; letter-spacing: 0px; } section.detail--entry > main > .left .item p.label { margin-bottom: 0.5rem; display: flex; align-items: center; } section.detail--entry > main > .left .item p.label svg { margin-right: 1.5rem; width: 15px; } section.detail--entry > main > .left .item p.label span { color: #7e99a6; font-size: 12px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.75px; line-height: 31.52px; margin-left: 0; } section.detail--entry > main > .left .item p.title { font-size: 28px; letter-spacing: 0.39px; } section.detail--entry > main > .left .item p > span { margin-left: 3rem; } section.detail--entry > main > .left .item p > span.number { margin-left: 1rem; color: #3a5260; font-size: 24px; font-weight: 600; text-align: right; letter-spacing: 0.34px; } section.detail--entry > main > .left .item .passengers { display: flex; align-items: center; justify-content: space-between; width: 80%; } section.detail--entry > main > .right { flex: 1 1 auto; background-color: #fff; border-radius: 0 0.6rem 0.6rem 0; padding: 4rem 2.5rem 4rem 2.5rem; } section.detail--entry > main > .right h2 { color: #0f3863; font-size: 28px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.39px; } section.detail--entry > main > .right small { color: #7e99a6; font-size: 12px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.75px; line-height: 31.52px; } section.detail--entry > main > .right .wrap { border: 1px solid rgba(14, 55, 97, 0.05); border-radius: 6px; padding: 2.5rem 3rem; } section.detail--entry > main > .right .wrap .label { color: #0e355e; font-size: 12px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.75px; line-height: 31.52px; } section.detail--entry > main > .right .wrap .inner { background: #faf9f9; border: 1px solid rgba(0, 0, 0, 0.09); box-shadow: inset 3px -3px 0px 0px rgba(0, 0, 0, 0.01); border-radius: 4px; padding: 2.5rem; } section.detail--entry > main > .right .wrap .inner p { color: #708790; font-size: 16px; font-weight: 500; letter-spacing: 0.23px; } section.detail--entry > main > .right .wrap .image { margin-top: 2rem; height: 400px; width: 100%; border-radius: 4px; background-size: cover; background-position: center; background-repeat: no-repeat; position: relative; display: flex; align-items: center; justify-content: center; cursor: pointer; } section.detail--entry > main > .right .wrap .image:hover::before, section.detail--entry > main > .right .wrap .image:hover svg { opacity: 1; } section.detail--entry > main > .right .wrap .image::before { content: ""; background-color: rgba(0, 0, 0, 0.1); position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; transition: opacity 0.3s ease; } section.detail--entry > main > .right .wrap .image svg { opacity: 0; transition: opacity 0.3s ease; } section.detail--flight > main { margin-top: 1.5rem; display: flex; align-items: stretch; } section.detail--flight > main > .left { flex: 0 0 30%; background-color: #eff8fa; border-radius: 0.6rem 0 0 0.6rem; padding: 5rem; } section.detail--flight > main > .left .item + .item { margin-top: 3rem; } section.detail--flight > main > .left .item p { color: #0f3863; font-size: 16px; font-weight: 500; letter-spacing: 0px; } section.detail--flight > main > .left .item p.label { margin-bottom: 0.5rem; display: flex; align-items: center; } section.detail--flight > main > .left .item p.label svg { margin-right: 1.5rem; width: 15px; } section.detail--flight > main > .left .item p.label span { color: #7e99a6; font-size: 12px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.75px; line-height: 31.52px; margin-left: 0; } section.detail--flight > main > .left .item p.title { font-size: 28px; letter-spacing: 0.39px; } section.detail--flight > main > .left .item p > span { margin-left: 3rem; } section.detail--flight > main > .left .item p > span.number { margin-left: 1rem; color: #3a5260; font-size: 24px; font-weight: 600; text-align: right; letter-spacing: 0.34px; } section.detail--flight > main > .left .item .passengers { display: flex; align-items: center; justify-content: space-between; width: 80%; } section.detail--flight > main > .right { flex: 1 1 auto; background-color: #fff; border-radius: 0 0.6rem 0.6rem 0; padding: 2.5rem 5rem; } section.detail--flight > main > .right .item + .item { margin-top: 3rem; } section.detail--flight > main > .right .item .label { color: #7e99a6; font-size: 12px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.75px; line-height: 31.52px; margin-left: 0; } section.detail--flight > main > .right .item ul { border: 1px solid rgba(0, 0, 0, 0.09); box-shadow: inset 3px -3px 0 0 rgba(0, 0, 0, 0.01); border-radius: 4px; } section.detail--flight > main > .right .item ul.stops { background-color: #0c3764; } section.detail--flight > main > .right .item ul.stops li { padding: 1rem 2.5rem; } section.detail--flight > main > .right .item ul.stops li + li { border-top: 1px solid #173c62; } section.detail--flight > main > .right .item ul.stops li > div p span.title { color: #fff; } section.detail--flight > main > .right .item ul.stops li > div p span.hour { color: #fff; font-size: 14px; } section.detail--flight > main > .right .item ul.stops li > div p span.gap { color: #66839f; font-size: 14px; font-weight: 500; text-align: center; text-transform: uppercase; letter-spacing: 0.33px; line-height: 29px; margin-right: 1rem; } section.detail--flight > main > .right .item ul.stops li > div p span.gap.early { color: #27AB6A; } section.detail--flight > main > .right .item ul.stops li > div p span.gap.delay { color: #ab2727; } section.detail--flight > main > .right .item ul.stops li > div p span.skipped { color: #66839f; font-size: 14px; font-weight: 500; text-align: center; letter-spacing: 0.5px; line-height: 29px; margin-right: 1rem; } section.detail--flight > main > .right .item ul li { display: flex; align-items: center; justify-content: space-between; padding: 1.5rem 2.5rem; } section.detail--flight > main > .right .item ul li + li { border-top: 1px solid #f8f8f8; } section.detail--flight > main > .right .item ul li > div { display: flex; align-items: center; } section.detail--flight > main > .right .item ul li > div p { display: flex; align-items: center; } section.detail--flight > main > .right .item ul li > div p svg { margin-right: 1rem; } section.detail--flight > main > .right .item ul li > div p span.hour { color: #0e365f; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.75px; margin-right: 2rem; } section.detail--flight > main > .right .item ul li > div p span.notes { color: #7e99a6; font-size: 14px; font-weight: 500; letter-spacing: 0.2px; margin-right: 2rem; } section.detail--flight > main > .right .item ul li > div p span.title { color: #0e3761; font-size: 16px; font-weight: 500; letter-spacing: 0.23px; } section.detail--item > main { margin-top: 1.5rem; display: flex; align-items: stretch; } section.detail--item > main > .left { flex: 0 0 30%; background-color: #eff8fa; border-radius: 0.6rem 0 0 0.6rem; padding: 5rem; } section.detail--item > main > .left .item + .item { margin-top: 3rem; } section.detail--item > main > .left .item p { color: #0f3863; font-size: 16px; font-weight: 500; letter-spacing: 0px; } section.detail--item > main > .left .item p.label { margin-bottom: 0.5rem; display: flex; align-items: center; } section.detail--item > main > .left .item p.label svg { margin-right: 1.5rem; width: 15px; } section.detail--item > main > .left .item p.label span { color: #7e99a6; font-size: 12px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.75px; line-height: 31.52px; margin-left: 0; } section.detail--item > main > .left .item p.title { font-size: 28px; letter-spacing: 0.39px; } section.detail--item > main > .left .item p > span { margin-left: 3rem; } section.detail--item > main > .left .item p > span.number { margin-left: 1rem; color: #3a5260; font-size: 24px; font-weight: 600; text-align: right; letter-spacing: 0.34px; } section.detail--item > main > .left .item .passengers { display: flex; align-items: center; justify-content: space-between; width: 80%; } section.detail--item > main > .right { flex: 1 1 auto; background-color: #fff; border-radius: 0 0.6rem 0.6rem 0; padding: 8rem 2.5rem 5rem 2.5rem; } section.detail--item > main > .right h2 { color: #0f3863; font-size: 28px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.39px; } section.detail--item > main > .right small { color: #7e99a6; font-size: 12px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.75px; line-height: 31.52px; } section.detail--item > main > .right .skip { border: 1px solid rgba(14, 55, 97, 0.05); border-radius: 6px; padding: 2rem 2.5rem; } section.detail--item > main > .right .skip .label { color: #0f3863; font-size: 12px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.75px; margin-bottom: 1rem; } section.detail--item > main > .right .skip .inner { background: #faf9f9; border: 1px solid rgba(0, 0, 0, 0.09); box-shadow: inset 3px -3px 0px 0px rgba(0, 0, 0, 0.01); border-radius: 4px; padding: 2.5rem; } section.detail--item > main > .right .skip .inner p { color: #708790; font-size: 16px; font-weight: 500; letter-spacing: 0.23px; } section.detail--item > main > .right .item:nth-of-type(1) { margin-top: 2rem; } section.detail--item > main > .right .item + .item { margin-top: 3rem; } section.detail--item > main > .right .item .label { color: #0f3863; font-size: 12px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.75px; margin-bottom: 1rem; } section.detail--item > main > .right .item ul { border: 1px solid rgba(14, 55, 97, 0.05); border-radius: 6px; padding: 1rem 2rem; } section.detail--item > main > .right .item ul li { padding: 1rem; display: flex; align-items: center; justify-content: space-between; } section.detail--item > main > .right .item ul li + li { border-top: 1px solid #edf0f3; } section.detail--item > main > .right .item ul li .column { color: #7e99a6; font-size: 12px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.75px; line-height: 31.52px; } section.detail--item > main > .right .item ul li .gap { color: #66839f; font-size: 14px; font-weight: 500; text-align: center; text-transform: uppercase; letter-spacing: 0.33px; line-height: 29px; margin-right: 1rem; } section.detail--item > main > .right .item ul li .gap.early { color: #27AB6A; } section.detail--item > main > .right .item ul li .gap.delay { color: #ab2727; } section.detail--item > main > .right .item ul li .value { color: #0e3762; font-size: 14px; font-weight: 600; letter-spacing: 0.2px; } section.detail--notification header, section.detail--malfunction header { margin-top: 1.5rem; background-color: #0e3761; padding: 2rem 3.5rem; border-radius: 0.6rem 0.6rem 0 0; display: flex; align-items: center; } section.detail--notification header div, section.detail--malfunction header div { padding: 1.5rem; border-radius: 5px; } section.detail--notification header div + div, section.detail--malfunction header div + div { margin-left: 6rem; } @media only screen and (max-width: 1000px) { section.detail--notification header div + div, section.detail--malfunction header div + div { margin: 0; } } section.detail--notification header div.urgent, section.detail--malfunction header div.urgent { background-color: #ab2727; } section.detail--notification header div.urgent p.label, section.detail--malfunction header div.urgent p.label { color: rgba(0, 0, 0, 0.6); } section.detail--notification header div.urgent svg #Shape, section.detail--malfunction header div.urgent svg #Shape { fill: #fff; } section.detail--notification header div.urgent svg #Path, section.detail--malfunction header div.urgent svg #Path { fill: #ab2727; } section.detail--notification header div p, section.detail--malfunction header div p { color: #fff; font-size: 18px; font-weight: 500; letter-spacing: 0.26px; } section.detail--notification header div p.label, section.detail--malfunction header div p.label { color: rgba(255, 255, 255, 0.4); font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: 1.25px; margin-bottom: 0.5rem; } section.detail--notification main, section.detail--malfunction main { padding: 3rem; background-color: #fff; border-radius: 0 0 0.6rem 0.6rem; } section.detail--notification main .item + .item, section.detail--malfunction main .item + .item { margin-top: 3rem; } section.detail--notification main .item .label, section.detail--malfunction main .item .label { font-size: 12px; color: #7e99a6; letter-spacing: 0.75px; line-height: 31.52px; text-transform: uppercase; font-weight: bold; } section.detail--notification main .item .content, section.detail--malfunction main .item .content { background: rgba(45, 113, 159, 0); border: 1px solid rgba(14, 55, 97, 0.05); border-radius: 6px; padding: 2.5rem; } section.detail--notification main .item .content.prior, section.detail--malfunction main .item .content.prior { background-color: rgba(45, 113, 159, 0.04); border: 1px solid rgba(14, 55, 97, 0.18); } section.detail--notification main .item .content.prior p, section.detail--malfunction main .item .content.prior p { font-weight: 600; } section.detail--notification main .item .content p, section.detail--malfunction main .item .content p { color: #0f3863; font-size: 16px; font-weight: 500; letter-spacing: 0.23px; line-height: 21px; } section.detail--notification main .item .tracks, section.detail--malfunction main .item .tracks { background: rgba(45, 113, 159, 0); border: 1px solid rgba(14, 55, 97, 0.05); border-radius: 6px; max-width: 1000px; margin-bottom: 2rem; } section.detail--notification main .item .tracks .track, section.detail--malfunction main .item .tracks .track { padding: 2.5rem 5rem 2.5rem 2.5rem; display: flex; align-items: center; justify-content: space-between; } section.detail--notification main .item .tracks .track + .track, section.detail--malfunction main .item .tracks .track + .track { border-top: 1px solid #f8f8f8; } section.detail--notification main .item .tracks .track p, section.detail--malfunction main .item .tracks .track p { color: #0e3761; font-size: 16px; font-weight: 500; letter-spacing: 0.23px; } section.detail--notification main .item .tracks .track .extra, section.detail--malfunction main .item .tracks .track .extra { display: flex; align-items: center; color: #6f8591; font-size: 14px; font-weight: 500; letter-spacing: 0px; } section.detail--notification main .item .tracks .track .extra svg, section.detail--malfunction main .item .tracks .track .extra svg { margin-right: 1rem; width: 13px; height: 11px; } section.detail--notification .links, section.detail--malfunction .links { margin-top: 2rem; display: flex; align-items: center; } section.detail--notification .links > a, section.detail--malfunction .links > a { display: inline-flex; max-width: 170px; } section.detail--notification .links > a + a, section.detail--malfunction .links > a + a { margin-left: 1rem; } section.detail--shift .head { margin-top: 2rem; display: flex; align-items: center; justify-content: space-between; } section.detail--shift .head > div { display: flex; align-items: center; } section.detail--shift .head > div ul.planning-tabs { display: flex; } section.detail--shift .head > div ul.planning-tabs li:last-child a { border-radius: 0 6px 0 0; } section.detail--shift .head > div ul.planning-tabs li:first-child a { border-radius: 6px 0 0 0; } section.detail--shift .head > div ul.planning-tabs li a { text-align: center; display: block; padding: 0rem 2.5rem; height: 45px; line-height: 45px; background: rgba(15, 35, 54, 0.05); box-shadow: inset 0px -5px 3px 0px rgba(0, 0, 0, 0.01); border-radius: 0px; color: #0e3761; font-size: 12px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.75px; } section.detail--shift .head > div ul.planning-tabs li a.active { margin-top: -3px; background-color: #072543; color: #fff; border-top: 3px solid #072543; border-radius: 6px 6px 0px 0px; } section.detail--shift .head > div .cta--wrapper { position: relative; } section.detail--shift .head > div .cta--wrapper .cta--dropdown { transition: border-radius 0.1s ease 0.1s; padding: 0 1.5rem; height: 4rem; } section.detail--shift .head > div .reverse { background: rgba(96, 132, 150, 0.4); border: 1px solid rgba(0, 0, 0, 0.05); box-shadow: inset 0px 1px 5px 0px rgba(0, 0, 0, 0.1); border-radius: 6px; padding: 1.5rem 2rem; display: flex; align-items: center; margin-left: 1rem; } section.detail--shift .head > div .reverse span { margin-left: 1rem; color: #fff; font-size: 12px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.8px; } section.detail--shift .head > div:first-child { margin-bottom: -0.5rem; } section.detail--shift .head > div:last-child { padding-bottom: 0.5rem; } section.detail--shift .body form { width: 100%; overflow: hidden; } section.detail--shift .body form > div { display: flex; align-items: flex-start; } section.detail--shift .body form > div table { flex: 1 1 auto; padding-bottom: 2.5rem; } section.detail--shift .body form > div table thead { background-color: #0e3761; } section.detail--shift .body form > div table tbody tr { padding: 1rem 0 1rem 2.5rem; } section.detail--shift .body form > div table tbody tr:nth-child(odd) { background-color: #fcfcfc; } section.detail--shift .body form > div table tbody tr:nth-child(even) { background-color: #fff; } section.detail--shift .body form > div table tbody tr + tr { border-top: 1px solid #f6f6f6; } section.detail--shift .body form > div table tr { display: flex; align-items: center; padding-left: 2.5rem; } section.detail--shift .body form > div table tr td, section.detail--shift .body form > div table tr th { flex: 0 0 16.66%; } section.detail--shift .body form > div table tr th { text-align: left; padding: 2rem 0; color: #fff; font-size: 12px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.75px; } section.detail--shift .body form > div table tr td.faded input { color: #e5e5e5; } section.detail--shift .body form > div table tr td input { background: #fff; border: 1px solid rgba(0, 0, 0, 0.09); box-shadow: inset 3px -3px 0px 0px rgba(0, 0, 0, 0.01); border-radius: 4px; padding: 1.5rem; color: #0e3762; font-size: 14px; font-weight: 500; letter-spacing: 0.2px; outline: none; } section.detail--shift .body form > div .actions .scroll { padding: 0.75rem 0; background-color: #0e3761; border-radius: 0 6px 0 0; display: flex; align-items: center; justify-content: space-between; width: 100%; } section.detail--shift .body form > div .actions .scroll a { width: 35px; height: 35px; background: #07213b; border: 1px solid rgba(76, 108, 121, 0.1); box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.5); border-radius: 5px; display: flex; align-items: center; justify-content: center; cursor: pointer; } section.detail--shift .body form > div .actions .scroll a:last-child { margin-left: 0.5rem; margin-right: 2.5rem; } section.detail--shift .body form > div .actions .action { padding: 1.8rem 0; display: flex; align-items: center; } section.detail--shift .body form > div .actions .action + .action { border-top: 1px solid #f6f6f6; } section.detail--shift .body form > div .actions .action:nth-child(odd) { background-color: #fff; } section.detail--shift .body form > div .actions .action:nth-child(even) { background-color: #fcfcfc; } section.detail--shift .body form > div .actions .action a { display: flex; justify-content: center; align-items: center; width: 35px; height: 35px; background: #07213b; border: 1px solid rgba(76, 108, 121, 0.1); box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.5); border-radius: 5px; } section.detail--shift .body form > div .actions .action a:first-child { background: rgba(255, 255, 255, 0.3); border: 1px solid rgba(0, 0, 0, 0.05); box-shadow: inset 0px 1px 13px 0px rgba(0, 0, 0, 0); border-radius: 5px; } section.detail--shift .body form > div .actions .action a:last-child { background: #0e365f; border: 1px solid rgba(76, 108, 121, 0.1); box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.5); margin-left: 0.5rem; margin-right: 2.5rem; } section.detail--shift .body form .paginator { margin-bottom: 2rem; } section.detail--track > main { margin-top: 1.5rem; display: flex; align-items: stretch; } @media only screen and (max-width: 1000px) { section.detail--track > main { flex-direction: column-reverse; } } section.detail--track > main .label { color: #7e99a6; font-size: 12px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.75px; line-height: 31.52px; margin-bottom: 0.5rem; } section.detail--track > main .left { flex: 0 0 30%; background-color: #eff8fa; border-radius: 0.6rem 0 0 0.6rem; padding: 2.5rem 3rem; } @media only screen and (max-width: 1000px) { section.detail--track > main .left { border-radius: 0 0 0.6rem 0.6rem; } } section.detail--track > main .left ul { background-color: #fff; border-radius: 0.6rem; margin-bottom: 3rem; } section.detail--track > main .left ul.stops { padding: 0 0; } section.detail--track > main .left ul.stops li { padding: 2rem 2.5rem; display: flex; align-items: center; } section.detail--track > main .left ul.stops li + li { border-top: 1px solid #f6f6f6; } section.detail--track > main .left ul.stops li span { margin-left: 1rem; color: #0e3762; font-size: 16px; font-weight: 500; letter-spacing: 0.2px; } section.detail--track > main .left ul.zones { padding: 2.5rem 2.5rem 2rem 2.5rem; } section.detail--track > main .left ul.zones li { display: inline-block; padding: 1rem 2rem; color: #fff; border-radius: 4px; font-size: 14px; font-weight: 600; letter-spacing: 0.2px; margin-bottom: 0.5rem; } section.detail--track .right { flex: 1 1 auto; background-color: #0c3764; border-radius: 0 0.6rem 0.6rem 0; padding: 2.5rem 5rem; } @media only screen and (max-width: 1000px) { section.detail--track .right { border-radius: 0.6rem 0.6rem 0 0; } } section.detail--track .right .label { color: rgba(255, 255, 255, 0.3); font-size: 12px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.75px; line-height: 31.52px; margin-bottom: 2rem; } section.detail--track .right ul li + li { margin-top: 6rem; } section.detail--track .right ul li header { display: flex; align-items: center; justify-content: space-between; } section.detail--track .right ul li header div { display: flex; align-items: center; } section.detail--track .right ul li header div p.title { color: #fff; font-size: 21px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.5px; margin-right: 1.5rem; } section.detail--track .right ul li header div p.shift span { margin-left: 1rem; color: #fff; font-size: 14px; font-weight: 500; letter-spacing: 0px; } section.detail--track .right ul li header div p.malfunctions { border-radius: 4px; padding: 1rem 1.5rem; background-color: #c4271e; display: flex; align-items: center; } section.detail--track .right ul li header div p.malfunctions svg #Shape { fill: #690a04; } section.detail--track .right ul li header div p.malfunctions span { margin-left: 1rem; color: #fff; font-size: 14px; font-weight: 500; letter-spacing: 0.2px; } section.detail--track .right ul li main { margin-top: 1rem; background-color: #0c2b4b; padding: 2rem 3rem; border: 2px solid rgba(0, 0, 0, 0.05); border-radius: 8px; } section.detail--track .right ul li main .stops { display: flex; justify-content: space-between; align-items: center; width: 100%; } section.detail--track .right ul li main .stops .stop.active .label { color: #bddbe2; text-align: center; } section.detail--track .right ul li main .stops .stop .hour { color: #fff; font-size: 32px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.44px; line-height: 32px; } section.detail--track .right ul li main .progress { position: relative; height: 15px; display: flex; align-items: center; } section.detail--track .right ul li main .progress progress { -webkit-appearance: none; -moz-appearance: none; appearance: none; height: 3px; width: 100%; border-radius: 7px; } section.detail--track .right ul li main .progress progress::-webkit-progress-bar { background-color: #16395d; } section.detail--track .right ul li main .progress progress::-webkit-progress-value { background-color: #bfdde4; } section.detail--track .right ul li main .progress svg { position: absolute; top: 50%; transform: translateY(-50%); } section.detail--track .links { margin-top: 2rem; display: flex; align-items: center; } section.detail--track .links > a { display: inline-flex; max-width: 170px; } section.detail--track .links > a + a { margin-left: 1rem; } div.checkbox--dashboard { position: relative; width: 3.2rem; height: 3.2rem; } div.checkbox--dashboard input[type=checkbox] { cursor: pointer; opacity: 0; z-index: 1; position: absolute; width: 3rem; height: 3rem; top: 0; left: 0; } div.checkbox--dashboard input[type=checkbox]:checked + div.checker { border: 1px solid rgba(14, 55, 98, 0.5); transition: border 0.3s ease; } div.checkbox--dashboard input[type=checkbox]:checked + div.checker svg { opacity: 1; transition: opacity 0.3s ease; } div.checkbox--dashboard input[type=checkbox]:hover + div.checker { border: 1px solid rgba(14, 55, 98, 0.5); transition: border 0.3s ease; } div.checkbox--dashboard div.checker { position: absolute; width: 2.4rem; height: 2.4rem; top: 0.3rem; left: 0.3rem; border-radius: 0.4rem; border: 1px solid rgba(30, 49, 57, 0.1); display: flex; align-items: center; justify-content: center; } div.checkbox--dashboard div.checker:after { content: ""; position: absolute; display: block; width: 100%; border-radius: 0.4rem; border: 0.3rem solid rgba(0, 0, 0, 0.03); top: -0.3rem; left: -0.3rem; bottom: -0.3rem; right: -0.3rem; } div.checkbox--dashboard div.checker svg { opacity: 0; margin: 0; } .form-item-dates_json #add-date { padding: 2.5rem 2.5rem 2.5rem 5rem; display: block; margin-top: 2rem; background: #7e99a6; border: 1px solid rgba(76, 108, 121, 0.1); box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.1); border-radius: 6px; width: 100%; color: #fff; font-size: 14px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.93px; position: relative; box-sizing: border-box; cursor: pointer; } .form-item-dates_json #add-date:hover { background: #62808f; } .form-item-dates_json #add-date svg { position: absolute; top: 50%; transform: translateY(-50%); left: 2.5rem; } .form-item-dates_json > input { width: calc(97.5% - 66px) !important; } .form-item-dates_json > span.delete { border-radius: 4px; vertical-align: top; display: inline-block; width: 66px; height: 66px; margin-left: 2.5%; background-image: url(/images/icon--delete.svg?cff1c8471aa485478742730ab3d550a1); background-color: #bc0d26; background-position: center; background-size: 13px 16px; background-repeat: no-repeat; cursor: pointer; transition: all 0.3s ease; } .form-item-dates_json > span.delete:hover { background-color: #8c0a1c; } .form-item-dates_json > span.delete + input { margin-top: 1rem; } .form-item-dates_json > span.delete + input + span { margin-top: 1rem; } div.image--dashboard div.wrapper, div.file--dashboard div.wrapper, div.svg--dashboard div.wrapper { position: relative; padding: 0 0 0 9rem; height: 7rem; display: flex; flex-direction: column; justify-content: center; } div.image--dashboard div.wrapper.is-empty div.icon, div.file--dashboard div.wrapper.is-empty div.icon, div.svg--dashboard div.wrapper.is-empty div.icon { background-image: none !important; } div.image--dashboard div.wrapper.is-empty div.icon svg, div.file--dashboard div.wrapper.is-empty div.icon svg, div.svg--dashboard div.wrapper.is-empty div.icon svg { display: block; } div.image--dashboard div.wrapper.is-empty label.delete, div.file--dashboard div.wrapper.is-empty label.delete, div.svg--dashboard div.wrapper.is-empty label.delete { display: none; } div.image--dashboard div.wrapper.is-empty > p, div.file--dashboard div.wrapper.is-empty > p, div.svg--dashboard div.wrapper.is-empty > p { display: block; } div.image--dashboard div.wrapper.is-empty > input, div.file--dashboard div.wrapper.is-empty > input, div.svg--dashboard div.wrapper.is-empty > input { display: block; } div.image--dashboard div.wrapper label.delete, div.file--dashboard div.wrapper label.delete, div.svg--dashboard div.wrapper label.delete { margin: 0; top: 50%; transform: translateY(-50%); position: absolute; background: #0e365f; border: 2px solid rgba(0, 0, 0, 0.05); box-shadow: inset 0px 1px 13px 0px rgba(0, 0, 0, 0.1); border-radius: 6px; padding: 1.3rem 2.5rem; display: inline-flex; align-items: center; max-width: 105px; cursor: pointer; transition: all 0.3s ease; } div.image--dashboard div.wrapper label.delete span, div.file--dashboard div.wrapper label.delete span, div.svg--dashboard div.wrapper label.delete span { margin-left: 1rem; color: #fff; font-size: 12px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.8px; } div.image--dashboard div.wrapper label.delete:hover, div.file--dashboard div.wrapper label.delete:hover, div.svg--dashboard div.wrapper label.delete:hover { background-color: #bc0d26; } div.image--dashboard div.button, div.file--dashboard div.button, div.svg--dashboard div.button { position: absolute; top: 0; left: 0; width: 6.7rem; height: 6.7rem; } div.image--dashboard div.button div.icon, div.file--dashboard div.button div.icon, div.svg--dashboard div.button div.icon { position: absolute; width: 100%; border-radius: 4rem; border: 1px solid rgba(151, 151, 151, 0.15); top: -0.1rem; left: -0.1rem; right: -0.1rem; bottom: -0.1rem; display: flex; align-items: center; justify-content: center; transition: border 0.3s ease; background-repeat: no-repeat; background-position: center; background-size: cover; } div.image--dashboard div.button div.icon svg, div.file--dashboard div.button div.icon svg, div.svg--dashboard div.button div.icon svg { display: none; } div.image--dashboard div.button:after, div.file--dashboard div.button:after, div.svg--dashboard div.button:after { position: absolute; content: ""; display: block; width: 100%; border-radius: 4rem; border: 3px solid rgba(0, 0, 0, 0.03); top: -0.3rem; left: -0.3rem; right: -0.3rem; bottom: -0.3rem; } div.image--dashboard div.button label, div.file--dashboard div.button label, div.svg--dashboard div.button label { z-index: 1; cursor: pointer; margin: 0; position: absolute; width: 100%; border-radius: 4rem; top: 0; bottom: 0; left: 0; right: 0; opacity: 0; } div.image--dashboard div.button label:hover + div.icon, div.file--dashboard div.button label:hover + div.icon, div.svg--dashboard div.button label:hover + div.icon { border: 1px solid rgba(14, 55, 98, 0.5); } div.image--dashboard input[type=file], div.file--dashboard input[type=file], div.svg--dashboard input[type=file] { margin: 1rem 0 0 0; outline: none; cursor: pointer; display: none; } div.image--dashboard input[type=file]:focus + div.button div.icon, div.image--dashboard input[type=file]:hover + div.button div.icon, div.file--dashboard input[type=file]:focus + div.button div.icon, div.file--dashboard input[type=file]:hover + div.button div.icon, div.svg--dashboard input[type=file]:focus + div.button div.icon, div.svg--dashboard input[type=file]:hover + div.button div.icon { border: 1px solid rgba(14, 55, 98, 0.5); } div.image--dashboard input[type=checkbox], div.file--dashboard input[type=checkbox], div.svg--dashboard input[type=checkbox] { display: none !important; } div.image--dashboard p, div.file--dashboard p, div.svg--dashboard p { width: 100%; color: #6f8591; font-size: 1.4rem; font-weight: 600; letter-spacing: 0.02rem; line-height: 1.6rem; display: none; } div.input--dashboard { width: 100%; display: flex; flex-wrap: wrap; } div.input--dashboard.has-error input { border-color: rgba(151, 4, 4, 0.3); color: #d00000; } div.input--dashboard.has-error input::-moz-placeholder { color: #d00000; } div.input--dashboard.has-error input::placeholder { color: #d00000; } div.input--dashboard small { color: #6f8591; font-size: 14px; font-weight: 500; letter-spacing: 0px; margin: 0 0 1rem 0.5rem; } div.input--dashboard input { cursor: pointer; position: relative; padding: 2rem 2.5rem; width: 100%; background-color: #faf9f9; border: 1px solid rgba(0, 0, 0, 0.09); border-radius: 0.4rem; box-sizing: border-box; outline: none; color: #6f8591; font-size: 1.6rem; font-weight: 500; line-height: 1.8rem; letter-spacing: 0.023rem; } div.input--dashboard input:hover, div.input--dashboard input:focus { box-shadow: 0 0 0.2rem 0.1rem rgba(145, 160, 176, 0.2); } div.input--dashboard.color--type { margin: 0; max-width: 14rem; position: relative; } div.input--dashboard.color--type input { padding: 2rem 2.5rem 2rem 5.4rem; } div.input--dashboard.color--type span { position: absolute; left: 4.5rem; bottom: 2.1rem; color: #6f8591; font-size: 1.6rem; font-weight: 500; line-height: 1.8rem; letter-spacing: 0.023rem; } div.input--dashboard.color--type > div { display: block; width: 0.9rem; height: 0.9rem; border-radius: 0.3rem; background-color: #000; position: absolute; bottom: 2.5rem; left: 2.5rem; transition: background-color 0.3s ease; } input.input--home { position: relative; cursor: pointer; display: block; width: 100%; margin: 0.7rem 0 0 0; outline: none; padding: 2.2rem; border-radius: 0.5rem; border: 1px solid #e6e6e6; background-color: #fff; color: #0f3863; font-size: 1.4rem; font-weight: 600; line-height: 1.7rem; letter-spacing: 0.02rem; transition: border 0.3s ease; } input.input--home:hover, input.input--home:focus { box-shadow: 0 0 0.2rem 0.1rem rgba(145, 160, 176, 0.2); } input.input--home.has-error { border-color: rgba(151, 4, 4, 0.3); color: #d00000; } input.input--home.has-error::-moz-placeholder { color: #d00000; } input.input--home.has-error::placeholder { color: #d00000; } input.input--home.input-bg { padding: 2.2rem 2.2rem 2.2rem 5rem; background-position: 2.4rem center; background-size: auto; background-repeat: no-repeat; } input.input--home.email { background-image: url(/images/icon--email.svg?98f3fb8ef458f4df9a59536a759f02ea); } input.input--home.email.has-error { background-image: url(/images/icon--email--error.svg?0449daa289c18e595c931d87387764c6); } input.input--home.email.last { margin-bottom: 2.5rem; } input.input--home.password { background-image: url(/images/icon--password.svg?ad8a22849018ad442ba114873c185c8e); } input.input--home.password.last { margin-bottom: 2.5rem; } input.input--home.password.has-error { background-image: url(/images/icon--password--error.svg?caef8553d64851fe9dffd3f80abafd34); } input.input--home.concession { background-image: url(/images/icon--concession.svg?57feabf52f2c298cb8310b0cc569a395); margin-bottom: 2.5rem; } input.input--home.concession.has-error { background-image: url(/images/icon--concession--error.svg?59da74711ba628a18142e96a72e39c41); } input.input--home::-moz-placeholder { color: #0f3863; opacity: 0.4; text-transform: initial; } input.input--home::placeholder { color: #0f3863; opacity: 0.4; text-transform: initial; } .label--dashboard { width: 100%; margin: 0 0 0 0.5rem; color: #0e355e; text-transform: uppercase; font-size: 1.2rem; font-weight: bold; line-height: 3.1rem; letter-spacing: 0.075rem; } .label--dashboard.form-group-label, .label--dashboard[for=notifications_categories] { color: #7e99a6; } .label--dashboard.form-group-label + div.form-items, .label--dashboard[for=notifications_categories] + div.form-items { padding: 2.5rem; border-radius: 0.4rem; border: 1px solid rgba(14, 55, 97, 0.05); } div.select--dashboard { display: flex; flex-wrap: wrap; } div.select--dashboard .customSelect { position: relative; width: 100%; } div.select--dashboard .customSelect select { display: none; /*hide original SELECT element: */ } div.select--dashboard .customSelect.is-open .custom-select-opener { background-color: #0e3762; border-radius: 4px 4px 0 0; } div.select--dashboard .customSelect.is-open .custom-select-opener span { color: #fff; } div.select--dashboard .customSelect.is-open .custom-select-opener:after { transform: translateY(-50%) scaleY(-1); background-image: url(/images/icon--dropdown.svg?e82528ef595593cb10890dfe53574279); } div.select--dashboard .customSelect.is-open .custom-select-panel div { margin-top: 0%; transition: margin-top 0.5s ease, color 0.3s ease, background-color 0.3s ease; } div.select--dashboard .customSelect .custom-select-opener { position: relative; cursor: pointer; width: 100%; min-width: 7rem; padding: 2rem 2.5rem 2rem 2.5rem; background-color: rgba(45, 113, 159, 0.04); outline: none; border-radius: 0.4rem; border: 1px solid rgba(14, 55, 97, 0.18); transition: all 0.3s ease; display: inline-block; box-sizing: border-box; box-shadow: inset 0px 1px 4px 0px rgba(0, 0, 0, 0.1); } div.select--dashboard .customSelect .custom-select-opener:hover, div.select--dashboard .customSelect .custom-select-opener:focus { box-shadow: 0 0 0.2rem 0.1rem rgba(145, 160, 176, 0.2); } div.select--dashboard .customSelect .custom-select-opener span { color: #0f3863; font-size: 1.6rem; font-weight: 500; line-height: 1.8rem; letter-spacing: 0.023rem; } div.select--dashboard .customSelect .custom-select-opener:after { background-image: url(/images/icon--dropdown--grey.svg?3cc7a70c768d4c156117fc700dc1daa7); background-size: auto; background-repeat: no-repeat; background-position: center; position: absolute; content: ""; top: 50%; transform: translateY(-50%); right: 2rem; width: 5px; height: 3px; transition: all 0.3s ease; } div.select--dashboard .customSelect .custom-select-panel { position: absolute; overflow: hidden; background-color: #f4f7f8; top: 100%; left: 0; right: 0; min-width: 7rem; z-index: 99; border-radius: 0 0 4px 4px; } div.select--dashboard .customSelect .custom-select-panel div { margin-top: -100%; padding: 2rem 2.5rem; cursor: pointer; color: #6f8591; font-size: 16px; font-weight: 500; letter-spacing: 0.23px; } div.select--dashboard .customSelect .custom-select-panel div + div { border-top: 1px solid #ebeef1; } div.select--dashboard .customSelect .custom-select-panel div:hover { background-color: rgba(0, 0, 0, 0.05); } div.select--dashboard .customSelect .custom-select-panel div.is-selected { color: #0f3863; } div.select--dashboard.form-item-type .custom-select-opener { background-image: url(/images/icon--ships--blue.svg?ea99dd668fb10712a6411b87ceab7dbb); background-repeat: no-repeat; background-size: auto; background-position: 2.5rem center; padding: 2rem 2.5rem 2rem 5rem; } div.select--dashboard.form-item-type .is-open .custom-select-opener { background-image: url(/images/icon--ships--lighter.svg?c278b9f7185189496aba148bda8d52cf); } div.select--dashboard.form-item-start .custom-select-opener, div.select--dashboard.form-item-end .custom-select-opener { background-image: url(/images/icon--stop--blue.svg?27a293d3f2df02486ec27e2ad1f06f51); background-repeat: no-repeat; background-size: auto; background-position: 2.5rem center; padding: 2rem 2.5rem 2rem 5rem; } div.select--dashboard.form-item-start .is-open .custom-select-opener, div.select--dashboard.form-item-end .is-open .custom-select-opener { background-image: url(/images/icon--stop--lighter.svg?6cbefdb32849603808652fd6a3c0942f); } div.form-item-ships ul.ships li { margin-bottom: 1rem; background: rgba(45, 113, 159, 0.04); border: 1px solid rgba(14, 55, 97, 0.18); border-radius: 4px; padding: 0 2.5rem; height: 57px; display: inline-flex; align-items: center; } div.form-item-ships ul.ships li + li { margin-left: 1rem; } div.form-item-ships ul.ships li span { color: #0e3762; font-size: 14px; font-weight: 600; letter-spacing: 0.2px; margin-right: 1.5rem; } div.form-item-ships ul.ships li a #Concessies-Overzicht { transition: opacity 0.3s ease; } div.form-item-ships ul.ships li a:hover #Concessies-Overzicht { opacity: 1; } div.stops--tracks { width: 100%; padding: 2.5rem; display: flex; border-bottom: 1px solid #f6f6f6; } div.stops--tracks:nth-of-type(even) { background-color: #fcfcfc; } div.stops--tracks select { cursor: pointer; outline: none; width: 10rem; height: 6rem; padding: 2rem 2.5rem; border-radius: 0.4rem; border: 1px solid rgba(14, 55, 97, 0.18); background-color: rgba(45, 113, 159, 0.04); background-image: url(/images/icon--dropdown--blue.svg?007bdcbc3f8eb52a534d5b6686578a85); background-repeat: no-repeat; background-position: 7rem center; display: flex; align-items: center; color: #0f3863; font-size: 1.6rem; font-weight: 500; line-height: 1.8rem; letter-spacing: 0.02rem; } div.stops--tracks select:hover, div.stops--tracks select:focus { box-shadow: 0 0 0.2rem 0.1rem rgba(145, 160, 176, 0.2); } div.stops--tracks input { cursor: pointer; position: relative; padding: 2rem 2.5rem; width: 100%; background-color: #faf9f9; border: 1px solid rgba(0, 0, 0, 0.09); border-radius: 0.4rem; outline: none; color: #6f8591; font-size: 1.6rem; font-weight: 500; line-height: 1.8rem; letter-spacing: 0.023rem; } div.stops--tracks input:hover, div.stops--tracks input:focus { box-shadow: 0 0 0.2rem 0.1rem rgba(145, 160, 176, 0.2); } div.stops--tracks .form-item + .form-item { margin: 0 0 0 1.5rem; width: 100%; display: flex; flex-wrap: wrap; } div.textarea--dashboard { width: 100%; display: flex; flex-wrap: wrap; } div.textarea--dashboard textarea { width: 100%; min-height: 20rem; padding: 2.5rem; background-color: #faf9f9; outline: none; border-radius: 0.4rem; border: 1.25px solid rgba(0, 0, 0, 0.09); color: #708790; font-size: 1.6rem; font-weight: 500; line-height: 1.8rem; letter-spacing: 0.023rem; } div.zone--tracks { width: 100%; padding: 2.5rem; display: flex; flex-wrap: wrap; border-bottom: 1px solid #f6f6f6; } div.zone--tracks:nth-of-type(even) { background-color: #fcfcfc; } div.zone--tracks .zone-item { display: flex; width: 100%; } div.zone--tracks .zone-item .form-item { width: 100%; margin: 0 0 0 3rem; } div.zone--tracks .zone-item .form-item:first-of-type { margin: 0; max-width: 14rem; position: relative; } div.zone--tracks .zone-item .form-item:first-of-type input { padding: 2rem 2.5rem 2rem 5.4rem; } div.zone--tracks .zone-item .form-item:first-of-type span { position: absolute; left: 4.5rem; bottom: 2.1rem; color: #6f8591; font-size: 1.6rem; font-weight: 500; line-height: 1.8rem; letter-spacing: 0.023rem; } div.zone--tracks .zone-color { display: block; width: 0.9rem; height: 0.9rem; border-radius: 0.3rem; background-color: #000; position: absolute; bottom: 2.5rem; left: 2.5rem; transition: background-color 0.3s ease; } div.zone--tracks select { cursor: pointer; outline: none; width: 100%; height: 6rem; padding: 2rem 2.5rem; border-radius: 0.4rem; border: 1px solid rgba(14, 55, 97, 0.18); background-color: rgba(45, 113, 159, 0.04); background-image: url(/images/icon--dropdown--blue.svg?007bdcbc3f8eb52a534d5b6686578a85); background-repeat: no-repeat; background-position: calc(100% - 2.5rem) center; display: flex; align-items: center; color: #0f3863; font-size: 1.6rem; font-weight: 500; line-height: 1.8rem; letter-spacing: 0.02rem; } div.zone--tracks select:hover, div.zone--tracks select:focus { box-shadow: 0 0 0.2rem 0.1rem rgba(145, 160, 176, 0.2); } .alert { border-radius: 8px; padding: 2.5rem; margin-top: 1.4rem; width: 100%; box-sizing: border-box; } .alert .text { display: flex; } .alert .text + .text { margin-top: 1rem; } .alert .text p { margin: 0 0 0 1.5rem; color: #fff; font-weight: 500; } .alert.success { background-color: #27AB6A; } .alert.success.home { margin-bottom: 1.5rem; max-width: 35rem; } .alert.error { background-color: #ab2727; } form.form--dashboard { margin: 1.5rem 0 0 0; display: flex; flex-wrap: wrap; } form.form--dashboard div.items { margin: 0 0.5rem; width: 100%; padding: 5rem; background-color: #fff; border-radius: 0.6rem; } @media only screen and (max-width: 1000px) { form.form--dashboard div.items { padding: 2.5rem; } } form.form--dashboard div.item + div.item { margin: 3rem 0 0 0; } form.form--dashboard div.item.hide { display: none; } form.form--dashboard button { margin: 2rem 0.5rem 0 0.5rem; } form.form--dashboard > a { margin: 2rem 0.5rem 0 0.5rem; } form.form--dashboard span.form-group-title { margin: 0 0 0 1rem; color: #7e99a6; font-size: 1.2rem; font-weight: bold; line-height: 3.2rem; letter-spacing: 0.075rem; text-transform: uppercase; } form.form--dashboard div.form-items { padding: 3rem; border: 1px solid rgba(14, 55, 97, 0.05); border-radius: 0.6rem; } form.form--dashboard div.form-items.no-border { border: none; padding: 0; } form.form--dashboard div.form-item + div.form-item { margin: 3rem 0 0 0; } form.form--home { margin: 2.5rem 0 0 0; display: flex; flex-wrap: wrap; } form.form--home .cta-red { margin: 1rem 0 0 0; } form.form--home .cta-blue { margin: 1rem 0 0 0; } form.form--home .cta-grey { margin: 1rem 0 0 0; } form.form--home label { color: #5e7a97; font-size: 1.4rem; font-weight: 500; line-height: 1.7rem; letter-spacing: 0.2px; } form.form--home label.has-error { color: #d00000; } form.form--home span.invalid-feedback { margin: 1.5rem 0 0 0; } form.form--search { margin: 0; padding: 1.5rem 2.5rem; display: flex; align-items: center; justify-content: space-between; min-height: 47px; /* Filters */ /* Select */ /* Search */ } @media only screen and (max-width: 1400px) { form.form--search { justify-content: flex-end; } } form.form--search div.filters { display: flex; align-items: center; } @media only screen and (max-width: 1400px) { form.form--search div.filters label { display: none; } } @media only screen and (max-width: 1200px) { form.form--search div.filters .filter:nth-child(2) { display: none; } } @media only screen and (max-width: 1000px) { form.form--search div.filters { display: none; } } form.form--search div.filter { display: flex; align-items: center; } form.form--search div.filter + div.filter { margin: 0 0 0 4rem; } @media only screen and (max-width: 1200px) { form.form--search div.filter + div.filter { margin: 0 0 0 1rem; } } form.form--search div.icon { display: block; min-width: 1.7rem; width: 1.7rem; height: 1.7rem; background-repeat: no-repeat; background-position: center; background-size: contain; } form.form--search div.icon.active, form.form--search div.icon.complete { background-image: url(/images/icon--active.svg?5f253f5cfb6b8ec48456b4e751526de1); } form.form--search div.icon.category { background-image: url(/images/icon--settings.svg?1f431a6405e4b08a11a8970ff3225650); } form.form--search div.icon.currentShift { background-image: url(/images/icon--planning.svg?548209641aad0ed77bdde465563b5d7b); } form.form--search div.icon.currentShip, form.form--search div.icon.ship, form.form--search div.icon.type { background-image: url(/images/icon--ships.svg?ce9c2a95c28c106e09856a3ffdb4dc8a); } form.form--search div.icon.tracks { background-image: url(/images/icon--tracks.svg?783478119e5f71d32cc7aced956f0fb3); } form.form--search div.icon.concessions { background-image: url(/images/icon--concessions.svg?1844dd422c03285c61188d3356bb291b); } form.form--search div.icon.zones_computed { background-image: url(/images/icon--zones.svg?02ee3c048430bbd135fbcae084968e1e); } form.form--search label { margin: 0 0 0 0.7rem; width: auto; color: #fff; text-transform: uppercase; font-size: 1.2rem; font-weight: bold; letter-spacing: 0.1rem; line-height: 1.4rem; } form.form--search select { cursor: pointer; min-width: 15rem; height: 4rem; margin: 0 0 0 1.5rem; -webkit-appearance: none; -moz-appearance: none; appearance: none; padding: 0 2rem; background-color: #08223d; background-image: url(/images/icon--dropdown.svg?e82528ef595593cb10890dfe53574279); background-size: auto; background-repeat: no-repeat; background-position: 12.5rem center; outline: none; border: none; border-radius: 0.6rem; box-shadow: inset 0px 1px 4px 0px rgba(0, 0, 0, 0.1); color: rgba(255, 255, 255, 0.7); font-size: 1.4rem; font-weight: 600; line-height: 1.7rem; letter-spacing: 0.02rem; transition: color 0.3s ease; } form.form--search select:hover { color: white; } form.form--search div.search { position: relative; display: flex; } form.form--search div.search svg { position: absolute; left: 4rem; top: 50%; transform: translateY(-50%); } form.form--search input { position: relative; margin: 0 0 0 1.5rem; padding: 0 1rem 0 4.5rem; width: 16rem; height: 4rem; background-color: rgba(255, 255, 255, 0.1); border-radius: 0.6rem; outline: none; border: 1px solid rgba(0, 0, 0, 0.05); box-shadow: inset 0px 1px 4px 0px rgba(0, 0, 0, 0.1); color: #fff; font-size: 1.4rem; font-weight: 500; line-height: 1.7rem; letter-spacing: 0.02rem; transition: box-shadow 0.3s ease; } form.form--search input:hover, form.form--search input:focus { box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.2); } form.form--search input::-moz-placeholder { color: rgba(255, 255, 255, 0.7); } form.form--search input::placeholder { color: rgba(255, 255, 255, 0.7); } form.form--search button { margin: 0 0 0 1rem; } form.form--tracks { display: flex; flex-wrap: wrap; } form.form--tracks div.items { width: 100%; padding: 2.5rem; background-color: #fff; border-radius: 0 0 0.6rem 0.6rem; } form.form--tracks div.items.stops { padding: 0; display: flex; flex-wrap: wrap; } form.form--tracks div.items.stops button { margin: 2rem 2.5rem; } form.form--tracks button { margin: 1.5rem 0 0 0; } header.header--main { height: 4.7rem; margin: 0 0.5rem; display: flex; align-items: center; justify-content: space-between; } header.header--main .wrapper { display: flex; } @media only screen and (max-width: 1000px) { header.header--main .wrapper { flex-wrap: wrap; } } header.header--main .wrapper h2 { margin: 0.15rem 0 0 0.5rem; } header.header--main .cta-small-light-blue:hover svg { transform: translateX(-0.5rem); transition: transform 0.3s ease; } header.header--tracks { background-color: rgba(0, 0, 0, 0.1); border-radius: 0.6rem 0.6rem 0 0; margin: 1.5rem 0 0 0; padding: 2rem 0; display: flex; align-items: center; justify-content: center; } header.header--tracks ul.items { display: flex; } header.header--tracks li.item { display: flex; align-items: center; } header.header--tracks span.number { width: 2.6rem; height: 2.6rem; border-radius: 1rem; border: 1px solid rgba(0, 0, 0, 0.02); background-color: #143f6a; display: flex; align-items: center; justify-content: center; color: #bcdae1; font-size: 1.25rem; font-weight: bold; line-height: 1.4rem; letter-spacing: 0.1rem; } header.header--tracks span.title { margin: 0 0 0 1rem; color: #0f3863; font-size: 1.2rem; font-weight: bold; line-height: 1.4rem; letter-spacing: 0.07rem; text-transform: uppercase; } header.header--tracks svg { margin: 0 1.5rem; } header.prefiltered-clean { padding: 3rem 5rem 2rem 5rem; } .table--overview.table--concessies .add-concession-to-user { display: none; } .table--overview.table--concessies .add-concession-to-user.show { display: flex; } .table--overview.table--concessies .add-concession-to-user td { overflow: visible; } .table--overview.table--concessies .add-concession-to-user td form { position: relative; padding: 0 0 0 5rem; } .table--overview.table--concessies .add-concession-to-user td form:after { content: ""; position: absolute; background-image: url(/images/icon--concessions--blue.svg); background-repeat: no-repeat; background-size: auto; width: 16px; height: 14px; top: 50%; left: 7rem; transform: translateY(-50%); } .table--overview.table--concessies .add-concession-to-user td form .customSelect { position: relative; width: 100%; } .table--overview.table--concessies .add-concession-to-user td form .customSelect select { display: none; /*hide original SELECT element: */ } .table--overview.table--concessies .add-concession-to-user td form .customSelect.is-open .custom-select-opener { border-radius: 4px 4px 0 0; } .table--overview.table--concessies .add-concession-to-user td form .customSelect.is-open .custom-select-opener:after { transform: translateY(-50%) scaleY(-1); } .table--overview.table--concessies .add-concession-to-user td form .customSelect.is-open .custom-select-panel div { margin-top: 0%; } .table--overview.table--concessies .add-concession-to-user td form .customSelect .custom-select-opener { display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; user-select: none; outline: none; cursor: pointer; padding: 1rem 3rem 1rem 5rem; background-color: rgba(45, 113, 159, 0.04); border-radius: 0.4rem; border: 1px solid rgba(14, 55, 97, 0.18); transition: all 0.3s ease; } .table--overview.table--concessies .add-concession-to-user td form .customSelect .custom-select-opener span { color: #0f3863; font-size: 1.4rem; font-weight: 500; line-height: 1.8rem; letter-spacing: 0.023rem; transition: all 0.3s ease; } .table--overview.table--concessies .add-concession-to-user td form .customSelect .custom-select-opener:hover { background-color: rgba(45, 113, 159, 0.1); } .table--overview.table--concessies .add-concession-to-user td form .customSelect .custom-select-opener:after { background-image: url(/images/icon--dropdown--grey.svg?3cc7a70c768d4c156117fc700dc1daa7); background-size: auto; background-repeat: no-repeat; background-position: center; position: absolute; content: ""; top: 50%; transform: translateY(-50%); right: 2rem; width: 5px; height: 3px; transition: all 0.3s ease; } .table--overview.table--concessies .add-concession-to-user td form .customSelect .custom-select-panel { position: absolute; overflow: hidden; background-color: #F7FAFB; top: 100%; left: 0; right: 0; z-index: 99; width: calc(100% - 2px); border-radius: 0 0 6px 6px; border-left: 1px solid rgba(14, 55, 97, 0.1); border-right: 1px solid rgba(14, 55, 97, 0.1); } .table--overview.table--concessies .add-concession-to-user td form .customSelect .custom-select-panel div { width: 100%; margin-top: -100%; padding: 1rem 2rem; color: #0f3863; font-size: 1.4rem; font-weight: 500; line-height: 1.8rem; letter-spacing: 0.023rem; transition: margin-top 0.5s ease, color 0.3s ease, background-color 0.3s ease; box-sizing: border-box; cursor: pointer; text-align: left; } .table--overview.table--concessies .add-concession-to-user td form .customSelect .custom-select-panel div + div { border-top: 1px solid rgba(14, 55, 97, 0.1); } .table--overview.table--concessies .add-concession-to-user td form .customSelect .custom-select-panel div:last-child { border-bottom: 1px solid rgba(14, 55, 97, 0.1); } .table--overview.table--concessies .add-concession-to-user td form .customSelect .custom-select-panel div:hover { background-color: rgba(0, 0, 0, 0.1); } .table--overview.table--haltes .add-stop { display: none; } .table--overview.table--haltes .add-stop.show { display: flex; } .table--overview.table--haltes .add-stop td { overflow: visible; } .table--overview.table--haltes .add-stop td form { display: flex; align-items: center; } .table--overview.table--haltes .add-stop td form input { margin-left: 3rem; background: rgba(229, 229, 229, 0.04); border: 1px solid rgba(14, 55, 97, 0.18); border-radius: 4px; padding: 1.5rem 2.5rem; color: #0f3863; font-size: 16px; font-weight: 500; letter-spacing: 0.23px; flex: 1 1 auto; outline: none; } .fullimage { position: fixed; z-index: 5; background-color: rgba(0, 0, 0, 0.5); height: 100vh; width: 100%; display: flex; justify-content: center; align-items: center; } .fullimage.hide { pointer-events: none; display: none; } .fullimage #close { position: fixed; top: 1.5rem; right: 1.5rem; width: 40px; height: 40px; background: #fff; border: 1px solid rgba(76, 108, 121, 0.1); border-radius: 10px; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: background-color 0.3s ease; } .fullimage #close:hover { background-color: #e6e6e6; } .fullimage img { height: auto; width: 75%; } .modal { position: fixed; z-index: 5; background-color: rgba(0, 0, 0, 0.5); height: 100vh; width: 100%; display: flex; justify-content: center; align-items: center; } .modal.hide { pointer-events: none; display: none; } .modal #close { position: fixed; top: 1.5rem; right: 1.5rem; width: 40px; height: 40px; background: #fff; border: 1px solid rgba(76, 108, 121, 0.1); border-radius: 10px; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: background-color 0.3s ease; } .modal #close:hover { background-color: #e6e6e6; } .modal .inner { padding: 2.5rem; width: 40%; min-width: 30rem; background-color: #fff; border-radius: 6px; } .modal .inner h6 { color: #0f3863; font-size: 28px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.39px; margin-bottom: 1rem; } .modal .inner p { color: #708790; font-size: 16px; font-weight: 500; letter-spacing: 0.23px; margin-bottom: 5rem; } .modal .inner a, .modal .inner span { display: inline-flex; cursor: pointer; } .modal .inner a:last-child, .modal .inner span:last-child { margin-left: 1rem; } .not-wide-enough { position: fixed; z-index: 5; background-color: rgba(0, 0, 0, 0.8); height: 100vh; width: 100%; display: none; justify-content: center; align-items: center; /* At this point no content should be shown anymore */ } @media only screen and (max-width: 700px) { .not-wide-enough { display: flex; } } .not-wide-enough .inner { padding: 7rem 5rem; width: 65%; background-color: #fff; border-radius: 6px; } .not-wide-enough .inner * { display: block; margin: 0 auto; text-align: center; } .not-wide-enough .inner h6 { color: #0f3863; font-size: 28px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.39px; margin-top: 2rem; margin-bottom: 0.5rem; } .not-wide-enough .inner p { color: #708790; font-size: 16px; line-height: 18px; font-weight: 500; text-align: center; letter-spacing: 0.23px; } section.livewire--flights { margin: 5rem 0 0 0; display: flex; flex-direction: column; } section.livewire--flights .flatpicker--container { position: relative; width: 250px; display: flex; align-self: flex-end; } section.livewire--flights .flatpicker--container:hover .flatpicker--content { box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.1); background: rgba(96, 132, 150, 0.6); transition: all 0.3s ease; } section.livewire--flights .flatpicker--container .flatpicker { opacity: 0; cursor: pointer; width: 25rem; height: 4rem; } section.livewire--flights .flatpicker--container .flatpicker--content { position: absolute; pointer-events: none; height: 4.05rem; border: 2px solid rgba(255, 255, 255, 0.1); background: rgba(96, 132, 150, 0.6); box-shadow: inset 0px 1px 5px 0px rgba(0, 0, 0, 0.1); display: flex; align-items: center; justify-content: space-between; top: 0; left: 0; right: 0; bottom: 0; } section.livewire--flights .flatpicker--container .flatpicker--content > svg { position: initial; transform: initial; } section.livewire--flights .flatpicker--container .flatpicker--content > svg:first-of-type { margin: 0 1rem 0 0; opacity: 0.5; } section.livewire--flights .flatpicker--container .flatpicker--content > svg:last-of-type { margin: 0 0 0 1rem; } section.livewire--flights .flatpicker--container .flatpicker--text { font-size: 1.25rem; font-weight: 600; line-height: 1.5rem; letter-spacing: 0.5px; } section.livewire--flights .flights { margin: -4rem 0 0 0; } section.livewire--flights .flights .flights-list, section.livewire--flights .flights .empty { margin: 1.5rem 0 0 0; border-radius: 0.8rem 0.8rem 0 0; border: none; } section.livewire--flights .flights .flights-list + a, section.livewire--flights .flights .empty + a { display: none; } section.livewire--malfunctions { margin: 5rem 0 0 0; } section.livewire--malfunctions .malfunctions--header { display: flex; align-items: center; justify-content: space-between; } section.livewire--malfunctions .flatpicker--container { position: relative; width: 250px; display: flex; align-self: flex-end; } section.livewire--malfunctions .flatpicker--container:hover .flatpicker--content { box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.1); background: rgba(96, 132, 150, 0.6); transition: all 0.3s ease; } section.livewire--malfunctions .flatpicker--container .flatpicker { opacity: 0; cursor: pointer; width: 25rem; height: 4rem; } section.livewire--malfunctions .flatpicker--container .flatpicker--content { position: absolute; pointer-events: none; height: 4.05rem; border: 2px solid rgba(255, 255, 255, 0.1); background: rgba(96, 132, 150, 0.6); box-shadow: inset 0px 1px 5px 0px rgba(0, 0, 0, 0.1); display: flex; align-items: center; justify-content: space-between; top: 0; left: 0; right: 0; bottom: 0; } section.livewire--malfunctions .flatpicker--container .flatpicker--content > svg { position: initial; transform: initial; } section.livewire--malfunctions .flatpicker--container .flatpicker--content > svg:first-of-type { margin: 0 1rem 0 0; opacity: 0.5; } section.livewire--malfunctions .flatpicker--container .flatpicker--content > svg:last-of-type { margin: 0 0 0 1rem; } section.livewire--malfunctions .flatpicker--container .flatpicker--text { font-size: 1.25rem; font-weight: 600; line-height: 1.5rem; letter-spacing: 0.5px; } section.livewire--malfunctions .malfunctions--container { position: relative; padding: 5rem; margin: 1rem 0 0 0; background-color: #fff; border: 2px outset rgba(0, 0, 0, 0.05); border-radius: 0.8rem 0.8rem 0 0; } @media only screen and (max-width: 1400px) { section.livewire--malfunctions .malfunctions--container { display: flex; justify-content: space-between; align-items: flex-end; } section.livewire--malfunctions .malfunctions--container .malfunctions--content, section.livewire--malfunctions .malfunctions--container .ct-chart-malfunctions { width: calc(50% - 50px); } section.livewire--malfunctions .malfunctions--container .malfunctions--date { display: none; } } section.livewire--malfunctions .malfunctions--container .ct-perfect-fourth:before { padding-bottom: 100%; } section.livewire--malfunctions .malfunctions--container .ct-series-a .ct-slice-donut { stroke: #1d456f; } section.livewire--malfunctions .malfunctions--container .ct-series-b .ct-slice-donut { stroke: #a4bac6; } section.livewire--malfunctions .malfunctions--container .ct-series-c .ct-slice-donut { stroke: #f4f4f4; } section.livewire--malfunctions .malfunctions--container .ct-slice-donut { cursor: pointer; } section.livewire--malfunctions .malfunctions--container .tooltip-malfunctions { position: absolute; pointer-events: none; z-index: 1; opacity: 1; padding: 1rem 1.5rem; background-color: #fff; border: 1px solid rgba(212, 220, 227, 0.4); border-radius: 5px; display: flex; flex-direction: column; transition: opacity 0.3s ease-out; } section.livewire--malfunctions .malfunctions--container .tooltip-malfunctions:after { content: ""; display: block; position: absolute; width: 0.8rem; height: 0.8rem; left: -0.4rem; top: calc(50% - 0.5rem); transform: rotate(45deg); background-color: #fff; border: 1px solid rgba(212, 220, 227, 0.4); border-radius: 2px; border-right: none; border-top: none; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05); } section.livewire--malfunctions .malfunctions--container .tooltip-malfunctions span { color: #0e3761; font-size: 1rem; font-weight: bold; letter-spacing: 0.063rem; line-height: 1.3rem; text-transform: uppercase; } section.livewire--malfunctions .malfunctions--container .tooltip-malfunctions span:last-of-type { font-size: 1.8rem; font-weight: 600; line-height: 2.2rem; } section.livewire--malfunctions .malfunctions--container .tooltip-hidden { opacity: 0; } section.livewire--malfunctions .malfunctions--date { margin: 2rem 0 0 0; color: #3a5260; font-size: 1.2rem; font-weight: bold; line-height: 1.5rem; letter-spacing: 0.075rem; } section.livewire--malfunctions .malfunctions--total { margin: 1rem 0 0 0; display: flex; align-items: center; } section.livewire--malfunctions .malfunctions--total span { margin: 0 0 0 1rem; color: #3a5260; font-size: 2.4rem; font-weight: 600; line-height: 2.8rem; letter-spacing: 0.034rem; } section.livewire--malfunctions .malfunctions--items { margin: 2rem 0 0 0; } section.livewire--malfunctions .malfunctions--item { width: 100%; display: flex; align-items: center; justify-content: space-between; } section.livewire--malfunctions .malfunctions--item span { color: #7e99a6; font-size: 1.2rem; font-weight: bold; letter-spacing: 0.075rem; line-height: 3.15rem; text-transform: uppercase; } section.livewire--malfunctions .malfunctions--item span:last-of-type { color: #3a5260; } section.livewire--malfunctions .malfunctions--link { display: block; padding: 2rem 0; color: #fff; font-size: 14px; font-weight: bold; text-transform: uppercase; letter-spacing: 1.5px; background-color: #0f3863; text-align: center; border: 2px solid rgba(0, 0, 0, 0.05); border-top: none; border-radius: 0 0 8px 8px; background-clip: padding-box; } section.livewire--passengers header .filters p { font-size: 1.5rem; font-weight: bold; line-height: 1.9rem; text-transform: uppercase; } section.livewire--passengers header .cta--blue { text-transform: capitalize; opacity: 0.6; } section.livewire--passengers header .cta--blue:hover { opacity: 1; transition: opacity 0.3s ease; } section.livewire--passengers header .flatpicker--container { position: relative; margin: 0 0 0 1.5rem; } section.livewire--passengers header .flatpicker--container:hover .flatpicker--content { background-color: #000; } section.livewire--passengers header .flatpicker--container .flatpicker { opacity: 0; cursor: pointer; } section.livewire--passengers header .flatpicker--container .flatpicker--content { position: absolute; pointer-events: none; height: 4.05rem; display: flex; align-items: center; justify-content: space-between; top: 0; left: 0; right: 0; bottom: 0; } section.livewire--passengers header .flatpicker--container .flatpicker--content > svg { position: initial; transform: initial; } section.livewire--passengers header .flatpicker--container .flatpicker--content > svg:first-of-type { margin: 0 1rem 0 0; opacity: 0.5; } section.livewire--passengers header .flatpicker--container .flatpicker--content > svg:last-of-type { margin: 0 0 0 1rem; } section.livewire--passengers header .flatpicker--container .flatpicker--text { font-size: 1.25rem; font-weight: 600; line-height: 1.5rem; letter-spacing: 0.5px; } section.livewire--passengers header .flatpicker--container .cta--blue { opacity: 1; } section.livewire--passengers main { padding: 2.5rem 6rem 5rem 2rem; background-color: #fff; border-radius: 0 0 0.8rem 0.8rem; } section.livewire--passengers .passengers--container { padding: 0 0 0 4rem; display: flex; align-items: center; justify-content: space-between; } @media only screen and (max-width: 1400px) { section.livewire--passengers .passengers--container { flex-wrap: wrap; } } section.livewire--passengers .passengers--information { display: flex; } section.livewire--passengers .passengers--information .passengers--information--item + .passengers--information--item { margin: 0 0 0 7.5rem; } section.livewire--passengers .passengers--information .passengers--information--wrapper { display: flex; align-items: center; } section.livewire--passengers .passengers--information .passengers--information--amount { margin: 0 0 0 1rem; font-weight: 600; } section.livewire--passengers .passengers--information .passengers--information--container { display: flex; } section.livewire--passengers .passengers--information .passengers--information--container .passengers--information--wrapper + .passengers--information--wrapper { margin: 0 0 0 3rem; } section.livewire--passengers .passengers--dropdown { position: relative; } @media only screen and (max-width: 1400px) { section.livewire--passengers .passengers--dropdown { margin: 20px 0 0 0; } } section.livewire--passengers .passengers--dropdown select { display: none; } section.livewire--passengers .passengers--dropdown .is-open .custom-select-opener, section.livewire--passengers .passengers--dropdown:hover .custom-select-opener { border-radius: 6px 6px 0 0; background-color: #0e3762; transition: background-color 0.3s ease; } section.livewire--passengers .passengers--dropdown .is-open .custom-select-opener span, section.livewire--passengers .passengers--dropdown:hover .custom-select-opener span { color: #fff; transition: color 0.3s ease; } section.livewire--passengers .passengers--dropdown .is-open .custom-select-opener:after, section.livewire--passengers .passengers--dropdown:hover .custom-select-opener:after { transform: translateY(-50%) scaleY(-1); background-image: url(/images/icon--dropdown.svg?e82528ef595593cb10890dfe53574279); transition: transform 0.3s ease; } section.livewire--passengers .passengers--dropdown .is-open .custom-select-opener:before, section.livewire--passengers .passengers--dropdown:hover .custom-select-opener:before { background-image: url(/images/icon--chart--transparent.svg?0610918c3addb56d0638a35e2a7fc110); } section.livewire--passengers .passengers--dropdown .is-open .custom-select-panel div, section.livewire--passengers .passengers--dropdown:hover .custom-select-panel div { margin-top: 0; transition: margin-top 0.5s ease; } section.livewire--passengers .passengers--dropdown .custom-select-opener { cursor: pointer; width: 270px; height: 60px; padding: 0 2.5rem; background-color: rgba(45, 113, 159, 0.04); border: 1px solid rgba(14, 55, 97, 0.18); border-radius: 0.6rem; outline: none; display: flex; align-items: center; justify-content: space-between; } section.livewire--passengers .passengers--dropdown .custom-select-opener span { width: 100%; color: #0f3863; font-size: 1.6rem; font-weight: 500; line-height: 1.7rem; letter-spacing: 0.02rem; transition: all 0.3s ease; } section.livewire--passengers .passengers--dropdown .custom-select-opener:before { content: ""; display: block; width: 17px; height: 16px; margin: 0 1rem 0 0; background-image: url(/images/icon--chart.svg?7f855c0f57cc50a54d9993fdf1cc615e); background-size: auto; background-repeat: no-repeat; background-position: center; } section.livewire--passengers .passengers--dropdown .custom-select-opener:after { content: ""; display: block; width: 5px; height: 3px; margin: 0 0 0 1rem; background-image: url(/images/icon--dropdown--grey.svg?3cc7a70c768d4c156117fc700dc1daa7); background-size: auto; background-repeat: no-repeat; background-position: center; } section.livewire--passengers .passengers--dropdown .custom-select-panel { position: absolute; overflow: hidden; background-color: #f4f7f8; top: 100%; left: 0; right: 0; z-index: 99; min-width: 15rem; margin: 0; border-radius: 0 0 6px 6px; } section.livewire--passengers .passengers--dropdown .custom-select-panel div { margin-top: -100%; } section.livewire--passengers .passengers--dropdown .custom-select-option { cursor: pointer; height: 6rem; padding: 0 2.5rem; color: #6f8591; font-size: 16px; font-weight: 600; line-height: 19px; letter-spacing: 0.2px; display: flex; align-items: center; } section.livewire--passengers .passengers--dropdown .custom-select-option + .custom-select-option { border-top: 1px solid #ebeef1; } section.livewire--passengers .passengers--dropdown .custom-select-option:hover { background-color: rgba(0, 0, 0, 0.05); } section.livewire--passengers .passengers--statistics { margin: 50px 0 0 0; position: relative; height: 350px; } section.livewire--passengers .passengers--statistics .ct-perfect-fourth { max-height: 350px; } section.livewire--passengers .passengers--statistics .ct-chart-passengers-lines { position: absolute; pointer-events: none; top: 0; left: 0; right: 0; bottom: 0; } section.livewire--passengers .passengers--statistics .ct-chart-passengers-lines .ct-grids { display: none; } section.livewire--passengers .passengers--statistics .ct-chart-passengers-lines .ct-line { stroke: #e13c3c; } section.livewire--passengers .passengers--statistics .ct-chart-passengers-lines .ct-point { stroke: #e13c3c; } section.livewire--passengers .passengers--statistics .ct-perfect-fourth:before { padding-bottom: 100%; } section.livewire--passengers .passengers--statistics .ct-label { color: #6f8591; font-size: 16px; font-weight: 500; height: 19px; letter-spacing: 0.23px; text-align: center; } section.livewire--passengers .passengers--statistics .ct-bar { cursor: pointer; } section.livewire--passengers .passengers--statistics .ct-series-a line { stroke: #1d456f; } section.livewire--passengers .passengers--statistics .ct-series-b line { stroke: #a4bac6; } section.livewire--passengers .passengers--statistics .tooltip-passengers { position: absolute; z-index: 1; opacity: 1; padding: 1rem 1.5rem; background-color: #fff; border: 1px solid rgba(212, 220, 227, 0.4); border-radius: 5px; display: flex; flex-direction: column; transition: opacity 0.3s ease-out; } section.livewire--passengers .passengers--statistics .tooltip-passengers:after { content: ""; display: block; position: absolute; width: 0.8rem; height: 0.8rem; left: -0.4rem; top: calc(50% - 0.5rem); transform: rotate(45deg); background-color: #fff; border: 1px solid rgba(212, 220, 227, 0.4); border-radius: 2px; border-right: none; border-top: none; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05); } section.livewire--passengers .passengers--statistics .tooltip-passengers span { color: #0e3761; font-size: 1rem; font-weight: bold; letter-spacing: 0.063rem; line-height: 1.3rem; text-transform: uppercase; } section.livewire--passengers .passengers--statistics .tooltip-passengers span.tooltip-amount { font-size: 1.8rem; font-weight: 600; line-height: 2.2rem; } section.livewire--passengers .passengers--statistics .tooltip-passengers span.tooltip-degrees { color: #d81e1e; font-weight: 600; font-size: 1.5rem; line-height: 1.8rem; padding: 0.6rem 0 0 0; margin: 0.6rem 0 0 0; border-top: 1px dashed #e3e2e2; } section.livewire--passengers .passengers--statistics .tooltip-hidden { opacity: 0; } .cta--full { width: 100%; text-align: left; border: 1px solid rgba(76, 108, 121, 0.1); outline: none; border-radius: 0.6rem; padding: 2.5rem 3rem; background-color: #7e99a6; box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.1); color: #fff; font-size: 1.4rem; font-weight: bold; line-height: 1.7rem; letter-spacing: 0.1rem; text-transform: uppercase; display: flex; align-items: center; transition: all 0.3s ease; } .cta--full:hover { box-shadow: 0 0 0.2rem 0.1rem rgba(0, 0, 0, 0.2); background-color: #0f3863; } .cta--full svg { margin: 0 1rem 0 0; } .cta-small, .cta-small-light-gray, .cta-small-grey, .cta-small-red, .cta-small-light-blue, .cta-small-blue, .cta-small-icon-white, .cta-small-icon-text-blue, .cta-small-icon-blue, .cta-small-icon { min-height: 4.3px; height: 4.3rem; padding: 0 2.5rem; background-color: rgba(23, 50, 79, 0.5); border-radius: 6px; outline: none; border: 2px solid rgba(0, 0, 0, 0.05); box-shadow: inset 0px 1px 13px 0px rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; color: #fff; text-transform: uppercase; font-size: 1.2rem; font-weight: bold; line-height: 1.5rem; letter-spacing: 0.08rem; transition: background 0.3s ease; } .cta-small.hidden, .hidden.cta-small-light-gray, .hidden.cta-small-grey, .hidden.cta-small-red, .hidden.cta-small-light-blue, .hidden.cta-small-blue, .hidden.cta-small-icon-white, .hidden.cta-small-icon-text-blue, .hidden.cta-small-icon-blue, .hidden.cta-small-icon { opacity: 0; pointer-events: none; } .cta-small:hover, .cta-small-light-gray:hover, .cta-small-grey:hover, .cta-small-red:hover, .cta-small-light-blue:hover, .cta-small-blue:hover, .cta-small-icon-white:hover, .cta-small-icon-text-blue:hover, .cta-small-icon-blue:hover, .cta-small-icon:hover { background-color: #17324f; } .cta-small.icon-left svg, .icon-left.cta-small-light-gray svg, .icon-left.cta-small-grey svg, .icon-left.cta-small-red svg, .icon-left.cta-small-light-blue svg, .icon-left.cta-small-blue svg, .icon-left.cta-small-icon-white svg, .icon-left.cta-small-icon-text-blue svg, .icon-left.cta-small-icon-blue svg, .icon-left.cta-small-icon svg { margin: 0 1rem 0 0; transition: transform 0.3s ease; } .cta-small.back:hover svg, .back.cta-small-light-gray:hover svg, .back.cta-small-grey:hover svg, .back.cta-small-red:hover svg, .back.cta-small-light-blue:hover svg, .back.cta-small-blue:hover svg, .back.cta-small-icon-white:hover svg, .back.cta-small-icon-text-blue:hover svg, .back.cta-small-icon-blue:hover svg, .back.cta-small-icon:hover svg { transform: translateX(-0.5rem); } .cta-small-icon { width: 4.3rem; padding: 0; } .cta-small-icon-blue { width: 3.5rem; height: 3.5rem; padding: 0; background-color: #0e365f; border: 1px solid rgba(76, 108, 121, 0.1); box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.5); } .cta-small-icon-blue:hover { background-color: #5e7a97; border: 1px solid #5e7a97; transition: background-color 0.3s ease-in-out, border 0.3S ease-in-out; } button.cta-small-icon-blue { width: 3.7rem; height: 3.7rem; } .cta-small-icon-text-blue { width: 8.5rem; height: 3.5rem; padding: 0; background-color: #0e365f; border: 1px solid rgba(76, 108, 121, 0.1); box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.5); transition: background-color 0.3s ease-in-out, border 0.3S ease-in-out; } .cta-small-icon-text-blue svg { margin-right: 0.5rem; } .cta-small-icon-text-blue:hover { background-color: #5e7a97; border: 1px solid #5e7a97; } .cta-small-icon-white { width: 3.5rem; height: 3.5rem; padding: 0; background-color: #fff; border: 1px solid rgba(76, 108, 121, 0.1); box-shadow: none; transition: background-color 0.3s ease-in-out, border 0.3S ease-in-out; } .cta-small-icon-white svg { margin: 0 !important; } .cta-small-icon-white:hover { background-color: #e6e6e6; border: 1px solid rgba(76, 108, 121, 0.2); } .cta-small-blue { background: #062240; border: 2px solid rgba(0, 0, 0, 0.05); box-shadow: inset 0px 1px 13px 0px rgba(0, 0, 0, 0.1); } .cta-small-blue:hover { background: #000; } .cta-small-blue:hover svg { transform: translateX(0rem); } .cta-small-blue.icon-right svg { margin: 0 0 0 1rem; transition: transform 0.3s ease; } .cta-small-blue.icon-right.next:hover svg { transform: translateX(0.5rem); } .cta-small-light-blue { border: 2px solid rgba(255, 255, 255, 0.1); background: rgba(96, 132, 150, 0.6); box-shadow: inset 0px 1px 5px 0px rgba(0, 0, 0, 0.1); } .cta-small-light-blue:hover { box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.1); background: rgba(96, 132, 150, 0.6); transition: all 0.3s ease; } .cta-small-red { background-color: #bc0d26; border: 2px solid rgba(0, 0, 0, 0.05); box-shadow: inset 0 0.1rem 1.3rem 0 rgba(0, 0, 0, 0.1); transition: opacity 0.3s ease; } .cta-small-red:hover { background-color: #bc0d26; opacity: 0.8; } .cta-small-grey { background: rgba(104, 104, 104, 0.4); border: 1px solid rgba(0, 0, 0, 0.05); box-shadow: inset 0px 1px 5px 0px rgba(0, 0, 0, 0.1); } .cta-small-grey:hover { background: #686868; } .cta-small-light-gray { background: rgba(96, 132, 150, 0.15); border: 2px solid transparent; box-shadow: none; color: #708790; } .cta-small-light-gray:hover { background: rgba(96, 132, 150, 0.3); } /* CTA */ .cta, .cta-black-transparent, .cta-blue, .cta-grey, .cta-red { position: relative; outline: none; width: 100%; padding: 2.5rem; border: none; border-radius: 0.8rem; background-color: #17324f; color: #fff; text-align: center; font-size: 1.6rem; font-weight: bold; letter-spacing: 0.15rem; line-height: 1.9rem; text-transform: uppercase; } .cta-red { background-color: #bc0d26; display: flex; align-items: center; justify-content: center; transition: opacity 0.3s ease; } .cta-red:after { position: absolute; content: ""; display: block; width: 1.2rem; height: 1rem; right: 4rem; background-image: url(/images/icon--arrow--right.svg?e5e9d0af6af83d2404578f9254191c86); background-repeat: no-repeat; background-size: contain; transition: transform 0.3s ease; } .cta-red:hover { opacity: 0.9; } .cta-red:hover:after { transform: translateX(0.5rem); } .cta-grey { background-color: #fbfbfb; color: #5d5d5d; font-size: 1.2rem; transition: background-color 0.3s ease, color 0.3s ease; } .cta-grey:hover { color: #fff; background-color: #91a0b0; } .cta-blue { display: flex; align-items: center; justify-content: center; transition: opacity 0.3s ease; } .cta-blue:after { position: absolute; content: ""; display: block; width: 1.2rem; height: 1rem; right: 4rem; background-image: url(/images/icon--arrow--right--white.svg?fc8dd77a65a527482d33dd2489e8c07c); background-repeat: no-repeat; background-size: contain; transition: transform 0.3s ease; } .cta-blue:hover { opacity: 0.9; } .cta-blue:hover:after { transform: translateX(0.5rem); } .cta-black-transparent { background-color: rgba(0, 0, 0, 0.6); transition: background-color 0.3s ease; } .cta-black-transparent:hover { background-color: black; } .cta-icon { display: flex; align-items: center; justify-content: center; } .cta-icon svg { margin: 0 1rem 0 0; } .prefiltered-ship { display: flex; align-items: center; justify-content: flex-start; } .prefiltered-ship .left { display: flex; align-items: center; justify-content: center; } .prefiltered-ship .left svg { margin-right: 1.5rem; width: 21px; height: 16px; } .prefiltered-ship .left svg path { fill: rgba(255, 255, 255, 0.4); } .prefiltered-ship .left h2 { color: #fff; font-size: 21px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.29px; } .prefiltered-ship .left p { color: rgba(255, 255, 255, 0.4); font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: 1.25px; line-height: 15px; } .prefiltered-user { display: flex; align-items: center; justify-content: space-between; } .prefiltered-user .left { display: flex; align-items: center; justify-content: center; } .prefiltered-user .left .photo { border-radius: 4rem; border: 1px solid rgba(151, 151, 151, 0.15); width: 64px; height: 65px; background-repeat: no-repeat; background-position: center; background-size: cover; margin-right: 15px; } .prefiltered-user .left h2 { color: #fff; font-size: 21px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.29px; } .prefiltered-user .right { display: flex; align-items: center; justify-content: center; } .prefiltered-user .right div + div { margin-left: 5rem; } .prefiltered-user .right div p { color: #fff; font-size: 18px; font-weight: 500; letter-spacing: 0.26px; } .prefiltered-user .right div p.label { color: rgba(255, 255, 255, 0.4); font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: 1.25px; margin-bottom: 0.5rem; } section.section--actions { min-height: 5.3rem; margin: 0 1rem 0 0; display: flex; justify-content: space-between; align-items: flex-end; /* Group */ /* Sort */ } @media only screen and (max-width: 1000px) { section.section--actions { margin: 3rem 0 0 0; } } section.section--actions .group { min-height: 4.3rem; display: flex; align-items: center; flex: 0 0 45%; } section.section--actions .group:last-child { justify-content: flex-end; } section.section--actions .sort label.sort-label { margin: 0; color: #fff; font-size: 1.4rem; line-height: 1.7rem; letter-spacing: 0.02rem; font-weight: 500; flex: 0 0 75px; } section.section--actions .sort .customSelect { position: relative; margin-left: 1rem; width: 20rem; } section.section--actions .sort .customSelect select { display: none; /*hide original SELECT element: */ } section.section--actions .sort .customSelect.is-open .custom-select-opener { background-color: #062240; border-radius: 4px 4px 0 0; box-shadow: inset 0px 1px 13px 0px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; } section.section--actions .sort .customSelect.is-open .custom-select-opener span { color: #fff; } section.section--actions .sort .customSelect.is-open .custom-select-opener:after { transform: translateY(-50%) scaleY(-1); background-image: url(/images/icon--dropdown.svg?e82528ef595593cb10890dfe53574279); } section.section--actions .sort .customSelect.is-open .custom-select-panel div { margin-top: 0%; transition: margin-top 0.5s ease, color 0.3s ease; } section.section--actions .sort .customSelect .custom-select-opener { height: 47px; position: relative; cursor: pointer; width: 100%; padding: 1rem 2.5rem 1rem 2rem; background-color: transparent; outline: none; border-radius: 0.4rem; display: inline-flex; box-sizing: border-box; align-items: center; } @media only screen and (max-width: 1000px) { section.section--actions .sort .customSelect .custom-select-opener { padding: 1rem; } } section.section--actions .sort .customSelect .custom-select-opener span { color: #fff; font-size: 1.4rem; line-height: 1.7rem; letter-spacing: 0.02rem; font-weight: 600; } section.section--actions .sort .customSelect .custom-select-opener:after { background-image: url(/images/icon--dropdown.svg?e82528ef595593cb10890dfe53574279); background-size: auto; background-repeat: no-repeat; background-position: center; position: absolute; content: ""; top: 50%; transform: translateY(-50%); right: 2rem; width: 5px; height: 3px; transition: all 0.3s ease; } section.section--actions .sort .customSelect .custom-select-panel { position: absolute; overflow: hidden; background-color: #0a2c50; top: 100%; left: 0; right: 0; z-index: 99; border-radius: 0 0 4px 4px; } section.section--actions .sort .customSelect .custom-select-panel div { margin-top: -100%; padding: 1.5rem 2.5rem; cursor: pointer; color: #fff; font-size: 1.4rem; line-height: 1.7rem; letter-spacing: 0.02rem; font-weight: 600; } section.section--actions .sort .customSelect .custom-select-panel div + div { border-top: 1px solid #0a2c50; } section.section--actions .sort .customSelect .custom-select-panel div:hover, section.section--actions .sort .customSelect .custom-select-panel div.is-selected { color: #bfdde4; } section.section--actions .cta--logout { margin: 0 0 0 1rem; } section.section--bulk { overflow: hidden; } section.section--bulk .container { margin-top: -6.5rem; height: 6.5rem; background-color: #07213c; display: flex; align-items: center; justify-content: center; } section.section--bulk .container.active { margin-top: 0; transition: margin-top 0.7s ease; } section.section--bulk p, section.section--bulk span { color: #fff; font-size: 1.2rem; font-weight: bold; line-height: 1.4rem; letter-spacing: 0.1rem; text-transform: uppercase; display: flex; align-items: center; justify-content: center; } section.section--bulk .cta--delete { margin: 0 0 0 2.5rem; } section.section--concessions { width: 100%; height: 100%; /* Concessions List */ /* Default -- List */ /* Tile */ } @media only screen and (max-width: 1000px) { section.section--concessions { overflow: scroll; width: auto; height: calc(100vh - 50rem); padding: 2.5rem; } } section.section--concessions .concessions { padding: 0 0 8rem 0; display: flex; flex-wrap: wrap; } @media only screen and (max-width: 1000px) { section.section--concessions .concessions { padding: 0; } } section.section--concessions .concession { width: 100%; display: flex; position: relative; } section.section--concessions .concession + .concession { margin: 1.5rem 0 0 0; } section.section--concessions .link { position: relative; width: calc(100% - 3rem); display: flex; padding: 2.5rem 6rem 2.5rem 3rem; background-color: #fefefe; border: 1px solid #e6e6e6; border-radius: 0.4rem; } section.section--concessions .link:hover { background-color: #0f3863; border: 1px solid #667c93; transition: all 0.3s ease; } section.section--concessions .link:hover span { color: #fff; } section.section--concessions .link:hover svg g path { fill: #fff; } section.section--concessions .link:after { z-index: 0; position: absolute; content: ""; display: block; width: 100%; border-radius: 0.4rem; border: 4px solid rgba(0, 0, 0, 0.02); top: -0.4rem; left: -0.4rem; bottom: -0.4rem; right: -0.4rem; } section.section--concessions .link svg:nth-of-type(2) { display: none; } section.section--concessions .link span { margin: 0 0 0 1rem; } section.section--concessions .link div { display: flex; align-items: center; } section.section--concessions .name { width: 100%; } section.section--concessions .name span { color: #0f3863; font-size: 1.6rem; font-weight: 600; line-height: 1.9rem; letter-spacing: 0.022rem; text-transform: initial; transition: color 0.3s ease; } section.section--concessions .notifications, section.section--concessions .malfunctions { margin: 0 0 0 2.5rem; min-width: 10rem; } section.section--concessions .notifications span, section.section--concessions .malfunctions span { color: #bc0d26; font-size: 1.4rem; font-weight: 600; line-height: 1.7rem; letter-spacing: 0; transition: color 0.3s ease; } section.section--concessions svg g path { transition: fill 0.3s ease; } section.section--concessions .malfunctions { min-width: 15rem; } section.section--concessions .malfunctions span { color: #6f8591; } section.section--concessions .edit { position: absolute; right: 3rem; bottom: 3rem; cursor: pointer; } section.section--concessions .edit #Icon--Dots--Three { transition: fill 0.3s ease; } section.section--concessions .edit:hover #Icon--Dots--Three { fill: #11263b; } @media only screen and (min-width: 1000px) { section.section--concessions .tile { padding: 0; } section.section--concessions .tile .concession { width: calc(50% - 0.5rem); height: calc(33.3333333333vh - 6.5rem); margin-left: 0; margin-right: 0.5rem; } section.section--concessions .tile .concession + .concession { margin-top: 1rem; } section.section--concessions .tile .concession:nth-of-type(even) { margin-left: 0.5rem; margin-right: 0; } section.section--concessions .tile .concession:nth-of-type(2) { margin-top: 0; } section.section--concessions .tile .link { padding: 2rem 2.5rem; flex-direction: column; justify-content: space-between; } section.section--concessions .tile .name { width: 100%; align-items: flex-start; } section.section--concessions .tile .name svg:nth-of-type(1) { min-width: 1.6rem; margin: 0.9rem 0 0 0; } section.section--concessions .tile .name svg:nth-of-type(2) { display: initial; margin: 1rem 0 0 1rem; } section.section--concessions .tile .name span { width: 100%; font-size: 2.6rem; font-weight: 600; line-height: 3rem; } section.section--concessions .tile .info, section.section--concessions .tile table.table--trajecten .flights, table.table--trajecten section.section--concessions .tile .flights, section.section--concessions .tile table.table--trajecten .from_to_end, table.table--trajecten section.section--concessions .tile .from_to_end { width: calc(100% - 3rem); display: flex; flex-wrap: wrap; } section.section--concessions .tile .notifications, section.section--concessions .tile .malfunctions { width: 100%; margin: 1rem 0 0 0; } section.section--concessions .tile .edit { right: 2.5rem; bottom: 3rem; } } section.section--dashboard--empty { margin: 1.5rem 0 0 0; height: 41rem; display: flex; align-items: center; justify-content: center; background-color: rgba(0, 0, 0, 0.1); border-radius: 0.6rem; } section.section--dashboard--empty div.wrapper { max-width: 48rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; } section.section--dashboard--empty div.icon { display: block; width: 100%; height: 5.5rem; background-image: url(/images/icon--ships--category.svg?a9269cb9f082ee46b2142653fd55dfb0); background-repeat: no-repeat; background-position: center bottom; } section.section--dashboard--empty h2, section.section--dashboard--empty p, section.section--dashboard--empty a { margin: 2rem 0 0 0; } section.section--dashboard--empty h2, section.section--dashboard--empty p { width: 100%; text-align: center; } main.concession-dashboard p.label { margin-left: 1rem; color: #537586; font-size: 12px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.75px; line-height: 31.52px; } main.concession-dashboard .bottom { display: flex; align-items: flex-start; justify-content: space-between; } @media only screen and (max-width: 1400px) { main.concession-dashboard .bottom { display: block; } } main.concession-dashboard .bottom .left { flex: 0 0 60%; } main.concession-dashboard .bottom .right { flex: 0 0 35%; } section.section--home--empty { width: 100%; max-width: 50rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; } section.section--home--empty h1, section.section--home--empty p { width: 100%; margin: 2rem 0 0 0; text-align: center; } section.section--home--empty p { color: #6f8591; } section.section--home--empty .cta--add, section.section--home--empty .cta--add--center { margin: 2rem 0 0 0; } section.section--home { width: 100%; max-width: 40rem; background-color: #fff; border-radius: 4px; padding: 4rem; } @media only screen and (max-width: 1000px) { section.section--home { max-width: 48rem; } } section.section--home h1 { color: #17324f; text-transform: initial; font-size: 4.8rem; font-weight: 300; line-height: 5rem; } section.section--home p { margin: 1rem 0 0 0; } section.section--main { margin: 1.5rem 0 0 0; border-radius: 0.8rem; overflow: visible; } section.section--main header { background-color: #0e3761; border-radius: 0.8rem 0.8rem 0 0; } section.paginator { display: flex; justify-content: space-between; align-items: center; padding: 1.5rem; background-color: rgba(0, 0, 0, 0.1); border-radius: 0 0 8px 8px; position: relative; min-height: 40px; } section.paginator .left a { display: flex; height: 40px; background: rgba(0, 0, 0, 0.3); border: 2px solid rgba(0, 0, 0, 0.05); border-radius: 5px; padding: 0 2rem; align-items: center; transition: background-color 0.3s ease; } section.paginator .left a:hover { background: rgba(0, 0, 0, 0.5); } section.paginator .left a span { color: #fff; font-size: 12px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.8px; margin-left: 1rem; } section.paginator div.resultset { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } section.paginator div.resultset p { color: #142d39; font-size: 14px; letter-spacing: 0.2px; opacity: 0.7; } section.paginator div.resultset p strong { font-weight: bold; } section.paginator nav .pagination { display: flex; align-items: center; } section.paginator nav .pagination li.current { margin: 0 0.5rem; } section.paginator nav .pagination li.current span { background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 14px; font-weight: 600; letter-spacing: 0.25px; } section.paginator nav .pagination li span, section.paginator nav .pagination li a { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.3); border: 2px solid rgba(0, 0, 0, 0.05); box-shadow: inset 0px 1px 13px 0px rgba(0, 0, 0, 0); border-radius: 5px; transition: background-color 0.3s ease; } section.paginator nav .pagination li span svg, section.paginator nav .pagination li a svg { width: 10px; height: 10px; transition: all 0.3s ease; } section.paginator nav .pagination li a:hover { background-color: rgba(0, 0, 0, 0.4); } section.paginator nav .pagination li a:hover.next svg { transform: translateX(2px); } section.paginator nav .pagination li a:hover.prev svg { transform: translateX(-2px); } section.section--sidebar { padding: 7rem 0 0 0; opacity: 0; /* * Mobile styling below */ /* Info */ } section.section--sidebar.show { opacity: 1; transition: opacity 0.5s ease; } section.section--sidebar.mobile { overflow: hidden; } section.section--sidebar.mobile .info, section.section--sidebar.mobile table.table--trajecten .flights, table.table--trajecten section.section--sidebar.mobile .flights, section.section--sidebar.mobile table.table--trajecten .from_to_end, table.table--trajecten section.section--sidebar.mobile .from_to_end { width: 100%; } section.section--sidebar.mobile .info .logo, section.section--sidebar.mobile table.table--trajecten .flights .logo, table.table--trajecten section.section--sidebar.mobile .flights .logo, section.section--sidebar.mobile table.table--trajecten .from_to_end .logo, table.table--trajecten section.section--sidebar.mobile .from_to_end .logo { width: 100%; height: 4rem; } section.section--sidebar.mobile .info .logo svg#svg-logo, section.section--sidebar.mobile table.table--trajecten .flights .logo svg#svg-logo, table.table--trajecten section.section--sidebar.mobile .flights .logo svg#svg-logo, section.section--sidebar.mobile table.table--trajecten .from_to_end .logo svg#svg-logo, table.table--trajecten section.section--sidebar.mobile .from_to_end .logo svg#svg-logo { opacity: 0; transition: opacity 0s ease; } section.section--sidebar.mobile .info .logo svg#svg-logo--small, section.section--sidebar.mobile table.table--trajecten .flights .logo svg#svg-logo--small, table.table--trajecten section.section--sidebar.mobile .flights .logo svg#svg-logo--small, section.section--sidebar.mobile table.table--trajecten .from_to_end .logo svg#svg-logo--small, table.table--trajecten section.section--sidebar.mobile .from_to_end .logo svg#svg-logo--small { opacity: 1; transition: opacity 0.6s ease 0.2s; } section.section--sidebar.mobile .cta--wrapper .cta--dropdown { padding: 0 2rem; } section.section--sidebar.mobile .cta--wrapper .cta--dropdown span, section.section--sidebar.mobile .cta--wrapper svg:last-of-type { display: none; } section.section--sidebar.mobile > ul.items > li.item { margin: 0 1rem; } section.section--sidebar.mobile > ul.items > li.item .child { height: 0px; } section.section--sidebar.mobile .link { padding: 2rem; display: inline-flex; overflow: hidden; } section.section--sidebar.mobile .link svg#svg-logout { width: 1.7rem; } section.section--sidebar.mobile .link span.link-title { display: none; } section.section--sidebar.mobile .link span.amount { display: none; } section.section--sidebar .info, section.section--sidebar table.table--trajecten .flights, table.table--trajecten section.section--sidebar .flights, section.section--sidebar table.table--trajecten .from_to_end, table.table--trajecten section.section--sidebar .from_to_end { width: 16rem; margin: 0 auto; } section.section--sidebar .info span, section.section--sidebar table.table--trajecten .flights span, table.table--trajecten section.section--sidebar .flights span, section.section--sidebar table.table--trajecten .from_to_end span, table.table--trajecten section.section--sidebar .from_to_end span { display: block; font-size: 1.2rem; font-weight: bold; line-height: 1.5rem; letter-spacing: 0.125rem; } section.section--sidebar .logo { height: 4rem; width: 16rem; display: block; position: relative; } section.section--sidebar .logo svg { position: absolute; width: 100%; height: 100%; } section.section--sidebar .logo svg#svg-logo { opacity: 1; height: 4rem; width: 16rem; transition: opacity 0.6s ease 0.4s; } section.section--sidebar .logo svg#svg-logo--small { opacity: 0; transition: opacity 0.3s ease; } section.section--sidebar .cta--wrapper { width: calc(100% - 2rem); margin: 2rem 1rem 0 1rem; } section.section--sidebar > ul.items { margin: 4rem 0 0 0; } section.section--sidebar > ul.items li.item { position: relative; margin: 0 1rem; border-radius: 8px; border: 1px solid rgba(0, 0, 0, 0); background: rgba(0, 0, 0, 0); transition: background 0.5s ease; } section.section--sidebar > ul.items li.item:hover .link span, section.section--sidebar > ul.items li.item.active .link span { color: #bfdde4; } section.section--sidebar > ul.items li.item:hover path, section.section--sidebar > ul.items li.item.active path { fill: #bfdde4; } section.section--sidebar > ul.items li.item:hover:before, section.section--sidebar > ul.items li.item.active:before { opacity: 1; } section.section--sidebar > ul.items li.item:hover .link span { color: #bfdde4; transition: color 0.3s ease; } section.section--sidebar > ul.items li.item.open { background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(0, 0, 0, 0.05); transition: background 0.5s ease 0.3s; } section.section--sidebar > ul.items li.item.open ul.child { overflow-y: auto; max-height: 150px; transition: max-height 1s ease 0.5s; } section.section--sidebar > ul.items li.item:not(.open) ul.child { max-height: 0px; } section.section--sidebar > ul.items li.item.child { transition: background 0s ease; } section.section--sidebar > ul.items li.item.child ul.child { transition: max-height 0s ease; } section.section--sidebar > ul.items li.item:before { opacity: 0; position: absolute; content: ""; display: block; border-radius: 0px 2px 2px 0px; background-color: #bfdde4; width: 0.3rem; top: 0.5rem; bottom: 0.5rem; left: -1rem; transition: opacity 0.3s ease; } section.section--sidebar > ul.items path { transition: fill 0.3s ease; } section.section--sidebar > ul.items .link { cursor: pointer; padding: 1rem 1rem 1rem 2rem; height: 35px; display: flex; align-items: center; justify-content: space-between; } section.section--sidebar > ul.items .link svg { min-width: 15px; } section.section--sidebar > ul.items .link .link-title { width: 100%; } section.section--sidebar > ul.items .link span { color: #fff; margin: 0 0 0 1.5rem; font-size: 1.6rem; font-weight: 500; line-height: 1.9rem; } section.section--sidebar > ul.items ul.child { height: auto; overflow-y: auto; transition: max-height 0.2s ease; } section.section--sidebar > ul.items li.child-item { padding: 0.5rem 3rem 0.5rem 5rem; opacity: 0.4; transition: opacity 0.3s ease; } section.section--sidebar > ul.items li.child-item:last-of-type { padding: 0.5rem 3rem 2.5rem 5rem; } section.section--sidebar > ul.items li.child-item.active ul.child-nested { max-height: 100px; transition: max-height 1s ease 0.5s; } section.section--sidebar > ul.items li.child-item a { color: #fff; font-weight: 500; } section.section--sidebar > ul.items li.child-item:hover, section.section--sidebar > ul.items li.child-item.active { opacity: 1; } section.section--sidebar > ul.items ul.child-nested { height: auto; max-height: 0; overflow-y: auto; transition: max-height 0.3s ease; } section.section--sidebar > ul.items ul.child-nested li { position: relative; padding: 0.5rem 0 0.5rem 1rem; } section.section--sidebar > ul.items ul.child-nested li:first-of-type { margin: 1.5rem 0 0 0; padding: 0 0 0.5rem 1rem; } section.section--sidebar > ul.items ul.child-nested li:last-of-type { margin: 0 0 1.5rem 0; padding: 0.5rem 0 0 1rem; } section.section--sidebar > ul.items ul.child-nested li:hover a, section.section--sidebar > ul.items ul.child-nested li.active a { opacity: 1; transition: opacity 0.3s ease; } section.section--sidebar > ul.items ul.child-nested li:after { position: absolute; content: ""; display: block; width: 0.1rem; opacity: 0.4; background-color: #fff; left: 0; top: 0; bottom: 0; } section.section--sidebar > ul.items ul.child-nested li a { opacity: 0.4; } section.section--statistics .statistics--container { display: flex; justify-content: space-between; } @media only screen and (max-width: 1400px) { section.section--statistics .statistics--container { display: block; } } section.section--statistics .statistics--flights { width: 100%; } section.section--statistics .statistics--malfunctions { margin: 0 0 0 5rem; max-width: 37rem; min-width: 37rem; width: 50%; } @media only screen and (max-width: 1400px) { section.section--statistics .statistics--malfunctions { width: 100%; max-width: 100%; margin: 0; } } section.section--statistics .label { margin-left: 1rem; color: #537586; font-size: 12px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.75px; line-height: 31.52px; } table.table--overview { width: 100%; background-color: #fff; display: block; /* Default table styling */ /* Table header styling*/ /* Table row styling */ } table.table--overview tbody, table.table--overview thead { display: flex; flex-wrap: wrap; } table.table--overview tr { width: 100%; max-width: calc(100% - 5rem); height: 6.5rem; padding: 0 2.5rem; display: flex; align-items: center; } table.table--overview th, table.table--overview td { width: 100%; } table.table--overview th + td, table.table--overview th + th, table.table--overview td + td, table.table--overview td + th { padding: 0 0 0 5rem; } @media only screen and (max-width: 1000px) { table.table--overview th + td, table.table--overview th + th, table.table--overview td + td, table.table--overview td + th { padding: 0 0 0 2rem; } } table.table--overview .column-checkbox { min-width: 3.5rem; max-width: 3.5rem; } table.table--overview .column-left { text-align: left; padding: 0 0 0 1.5rem; } table.table--overview thead { border-bottom: 1px solid #f6f6f6; } table.table--overview thead tr { height: 5rem; } table.table--overview thead svg { margin: 0 0 0 0.7rem; } table.table--overview thead svg #Icon--Down, table.table--overview thead svg #Icon--Up { opacity: 0.5; transition: opacity 0.3S ease; } table.table--overview th:not(.actions) a, table.table--overview th:not(.actions) p, table.table--overview th:not(.column-checkbox) a, table.table--overview th:not(.column-checkbox) p { text-transform: uppercase; cursor: pointer; color: #7e99a6; font-size: 1.2rem; font-weight: bold; line-height: 1.4rem; letter-spacing: 0.075rem; } table.table--overview th:not(.actions) a:hover svg #Icon--Down, table.table--overview th:not(.actions) a:hover svg #Icon--Up, table.table--overview th:not(.actions) p:hover svg #Icon--Down, table.table--overview th:not(.actions) p:hover svg #Icon--Up, table.table--overview th:not(.column-checkbox) a:hover svg #Icon--Down, table.table--overview th:not(.column-checkbox) a:hover svg #Icon--Up, table.table--overview th:not(.column-checkbox) p:hover svg #Icon--Down, table.table--overview th:not(.column-checkbox) p:hover svg #Icon--Up { opacity: 1; } table.table--overview tbody tr + tr { border-top: 1px solid #f6f6f6; } table.table--overview tbody tr:nth-of-type(odd) { background-color: #fcfcfc; } table.table--overview td { overflow: hidden; white-space: nowrap; color: #0e3762; text-transform: initial; text-overflow: ellipsis; font-size: 1.4rem; font-weight: 500; line-height: 1.7rem; letter-spacing: 0.02rem; } table.table--overview td.order { overflow: visible; } table.table--overview td p { padding: 1rem 2rem; border-radius: 4px; display: inline-block; } table.table--overview td p.zone span { color: #fff; font-weight: 500; } table.table--overview td p.tag { padding: 1.5rem 2rem; background-color: rgba(45, 113, 159, 0.04); border: 1px solid rgba(14, 55, 97, 0.2); } table.table--overview td p.tag span { color: #0e3762; font-weight: 600; font-size: 14px; } table.table--overview td p.concession { display: flex; align-items: center; font-weight: inherit; font-size: inherit; } table.table--overview td p.concession svg { margin-right: 1rem; } table.table--overview td p.count { background-color: rgba(0, 0, 0, 0.04); } table.table--overview td .customSelect { position: relative; width: 55px; } table.table--overview td .customSelect select { display: none; /*hide original SELECT element: */ } table.table--overview td .customSelect.is-open .custom-select-opener { border-radius: 4px 4px 0 0; } table.table--overview td .customSelect.is-open .custom-select-opener:after { transform: translateY(-50%) scaleY(-1); } table.table--overview td .customSelect.is-open .custom-select-panel div { margin-top: 0%; transition: margin-top 0.5s ease, color 0.3s ease; } table.table--overview td .customSelect .custom-select-opener { display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; user-select: none; outline: none; cursor: pointer; padding: 1rem 3rem 1rem 1.5rem; background-color: rgba(45, 113, 159, 0.04); border-radius: 0.4rem; border: 1px solid rgba(14, 55, 97, 0.18); transition: all 0.3s ease; } table.table--overview td .customSelect .custom-select-opener span { color: #0f3863; font-size: 1.4rem; font-weight: 500; line-height: 1.8rem; letter-spacing: 0.023rem; transition: all 0.3s ease; } table.table--overview td .customSelect .custom-select-opener:hover { background-color: rgba(45, 113, 159, 0.1); } table.table--overview td .customSelect .custom-select-opener:after { background-image: url(/images/icon--dropdown--grey.svg?3cc7a70c768d4c156117fc700dc1daa7); background-size: auto; background-repeat: no-repeat; background-position: center; position: absolute; content: ""; top: 50%; transform: translateY(-50%); right: 2rem; width: 5px; height: 3px; transition: all 0.3s ease; } table.table--overview td .customSelect .custom-select-panel { position: absolute; overflow: hidden; background-color: #F7FAFB; top: 100%; left: 0; right: 0; z-index: 99; width: 53px; border-radius: 0 0 6px 6px; border-left: 1px solid rgba(14, 55, 97, 0.1); border-right: 1px solid rgba(14, 55, 97, 0.1); } table.table--overview td .customSelect .custom-select-panel div { width: 53px; margin-top: -100%; padding: 1rem 0; text-align: center; color: #0f3863; font-size: 1.4rem; font-weight: 500; line-height: 1.8rem; letter-spacing: 0.023rem; box-sizing: border-box; cursor: pointer; } table.table--overview td .customSelect .custom-select-panel div + div { border-top: 1px solid rgba(14, 55, 97, 0.1); } table.table--overview td .customSelect .custom-select-panel div:last-child { border-bottom: 1px solid rgba(14, 55, 97, 0.1); } table.table--overview td .customSelect .custom-select-panel div:hover { background-color: rgba(0, 0, 0, 0.1); } table.table--overview .column-actions { display: flex; justify-content: space-between; } table.table--overview .column-actions.solo { justify-content: flex-end; } table.table--dienstregelingen .name { min-width: 17rem; width: calc(100% - 20rem); } table.table--gebruikers .full_name { min-width: 24rem; max-width: 24rem; } @media only screen and (max-width: 1000px) { table.table--gebruikers .full_name { max-width: initial; min-width: initial; } } @media only screen and (max-width: 1000px) { table.table--gebruikers .concessions { width: 0; overflow: hidden; } } table.table--haltes .order { min-width: 10rem; max-width: 10rem; } table.table--haltes .name { min-width: 24rem; max-width: 24rem; } @media only screen and (max-width: 1000px) { table.table--haltes .name { min-width: 10rem; max-width: 10rem; } } table.table--meldingen tr { max-width: calc(100% - 5rem); } table.table--meldingen .message { width: 100%; } table.table--meldingen .tracks, table.table--meldingen .created_at_readable, table.table--meldingen .status_textual { min-width: 17rem; max-width: 17rem; } @media only screen and (max-width: 1400px) { table.table--meldingen .status_textual, table.table--meldingen .tracks { display: none; } } table.table--schepen .name, table.table--schepen .type { max-width: 24rem; } table.table--schepen .malfunctions { width: 100%; } @media only screen and (max-width: 1000px) { table.table--schepen .type { display: none; } } table.table--storingen tr { max-width: calc(100% - 5rem); } table.table--storingen .remarks { width: 100%; } table.table--storingen .category, table.table--storingen .ship { min-width: 17rem; max-width: 17rem; } @media only screen and (max-width: 1000px) { table.table--storingen .category, table.table--storingen .ship { min-width: 10rem; max-width: 100%; } } table.table--storingen .flight { min-width: 24rem; max-width: 24rem; } @media only screen and (max-width: 1000px) { table.table--storingen .message, table.table--storingen .flight, table.table--storingen .remarks { display: none; } } @media only screen and (max-width: 1400px) { table.table--storingen .flight { display: none; } } table.table--trajecten .name { min-width: 17rem; max-width: 17rem; } table.table--trajecten .zones { min-width: 24rem; max-width: 24rem; } @media only screen and (max-width: 1000px) { table.table--trajecten .zones, table.table--trajecten .flights { display: none; } } @media only screen and (max-width: 1400px) { table.table--trajecten .zones { display: none; background-color: red; } } @media only screen and (max-width: 1000px) { table.table--vaarten .currentShip, table.table--vaarten .malfunctions { display: none; } } @media only screen and (max-width: 1400px) { table.table--vaarten .malfunctions { display: none; } } table.table--vaarten .real_status, table.table--vaarten .malfunctions { min-width: 7rem; max-width: 7rem; } table.table--zones .name { min-width: 24rem; max-width: 24rem; } main.template--bg-with-logo { position: relative; width: 100vw; height: 100vh; background-image: url(/images/background.png?7b1fa32a51ebb6c37e8d4a52e34515ff); background-repeat: no-repeat; background-position: center; background-size: cover; display: flex; flex-direction: row; } @media only screen and (max-width: 1000px) { main.template--bg-with-logo { height: 100vh; flex-direction: column; align-items: center; justify-content: center; } } main.template--bg-with-logo:before { content: ""; position: absolute; display: block; width: 100%; top: 0; bottom: 0; left: 0; right: 0; background-color: #000; opacity: 0.3; pointer-events: none; } main.template--bg-with-logo aside { position: relative; z-index: 1; width: 50%; padding: 9rem 7rem; box-sizing: border-box; } @media only screen and (max-width: 1000px) { main.template--bg-with-logo aside { width: 55rem; } main.template--bg-with-logo aside:nth-of-type(1) { padding: 0; } } main.template--bg-with-logo aside:nth-of-type(2) { position: relative; padding: 0; display: flex; flex-direction: column; } main.template--bg-with-logo aside:nth-of-type(2).list:after { z-index: 2; opacity: 0.8; content: ""; display: block; position: absolute; height: 8rem; background-color: white; bottom: 1rem; left: 0; right: 1rem; } main.template--bg-with-logo div.container-white { overflow: scroll; height: 100%; padding: 1rem 5rem; margin: 1rem 1rem 1rem 0; border-radius: 4px; background-color: #fff; display: flex; flex-direction: row; align-items: center; justify-content: center; position: relative; } main.template--bg-with-logo div.container-white.on-root { padding: 2.5rem; } @media only screen and (max-width: 1000px) { main.template--bg-with-logo div.container-white { margin: 1rem 0; padding: 0; background-color: transparent; flex-direction: column; } main.template--bg-with-logo div.container-white.on-root { background-color: #fff; } } main.template--bg-with-logo div.container-white.list { position: relative; padding: 5rem 5rem 0 5rem; overflow: scroll; } main.template--bg-with-logo div.wrapper { width: 100%; max-width: 40rem; margin: 3.5rem 0 0 0; } @media only screen and (max-width: 1000px) { main.template--bg-with-logo div.wrapper { margin: 1rem 0 0 0; max-width: 100%; } } main.template--bg-with-logo a.logo { display: block; } div.template--side-bar-with-container { background-color: #0f3863; height: 100%; min-height: 100vh; max-height: 100vh; display: flex; /* At this point no content should be shown anymore */ } @media only screen and (max-width: 700px) { div.template--side-bar-with-container { display: none; } } div.template--side-bar-with-container.has-background { position: relative; background-image: url(/images/background.png?7b1fa32a51ebb6c37e8d4a52e34515ff); background-repeat: no-repeat; background-position: center; background-size: cover; } div.template--side-bar-with-container.has-background:after { z-index: 0; content: ""; display: block; position: absolute; background-color: rgba(0, 0, 0, 0.3); width: 100%; top: 0; bottom: 0; left: 0; right: 0; } div.template--side-bar-with-container.has-background section.section--sidebar li.item { border: 1px solid rgba(15, 56, 99, 0); } div.template--side-bar-with-container > nav { position: relative; z-index: 1; overflow: scroll; min-width: 25rem; width: 25rem; display: block; } div.template--side-bar-with-container > nav.mobile { width: 8rem; min-width: 8rem; } div.template--side-bar-with-container > nav.smooth { transition: min-width 1s ease; } div.template--side-bar-with-container > main { position: relative; z-index: 1; overflow: scroll; width: 100%; max-height: 100vh; padding: 8rem 5rem; border-radius: 0.8rem 0 0 0.8rem; background-color: #bfdde4; background-image: url(/images/pattern.png?41794aace47f848e5832f510c69f39e2); } @media only screen and (max-width: 1000px) { div.template--side-bar-with-container > main { min-width: calc(100% - 18rem); } } div.template--side-bar-with-container > main.smooth { transition: min-width 1s ease; } main.template--bg-with-error { position: relative; width: 100vw; height: 100vh; background-image: url(/images/background.png?7b1fa32a51ebb6c37e8d4a52e34515ff); background-repeat: no-repeat; background-position: center; background-size: cover; display: flex; align-items: center; justify-content: center; } main.template--bg-with-error:after { position: absolute; display: block; content: ""; background-color: #000; opacity: 0.3; width: 100%; top: 0; bottom: 0; left: 0; right: 0; } main.template--bg-with-error .container { z-index: 1; width: 90%; max-width: 51rem; display: flex; align-items: center; justify-content: center; flex-direction: column; } main.template--bg-with-error .logo { display: block; } main.template--bg-with-error .logo svg { width: 16rem; height: 4rem; } main.template--bg-with-error .wrapper { margin: 3rem 0 0 0; padding: 7.5rem; border-radius: 8px; background-color: rgba(8, 37, 64, 0.1); display: flex; align-items: center; flex-direction: column; } main.template--bg-with-error h1 { margin: 2rem 0 0 0; } main.template--bg-with-error p { margin: 0.7rem 0 0 0; font-size: 1.6rem; font-weight: 500; line-height: 2rem; } main.template--bg-with-error .cta-small-blue { width: 27rem; height: 6rem; margin: 4rem 0 0 0; padding: 0; background: #0f3863; border: 2px solid rgba(0, 0, 0, 0.05); box-shadow: inset 0px 1px 13px 0px rgba(0, 0, 0, 0.1); display: flex; align-items: center; justify-content: center; } main.template--bg-with-error .cta-small-blue:hover { background: #000; transition: background 0.3s ease; } .block--automatisch .checker, .block--mxsuite .checker{ width: 6em!important; height: 6em!important;; } .block--automatisch, .block--mxsuite{ display: flex; align-items: center; gap: 40px; } .form-item-mxsuite.block--checkbox--dashboard, .form-item-increase.block--checkbox--dashboard { margin-top: -65px; } .form-item-mxsuite.block--checkbox--dashboard input, .form-item-increase.block--checkbox--dashboard input { width: 6em!important; height: 6em!important;; } td.column-left.shipnames { overflow: visible; white-space: pre-line; }