/var/www/vhosts/stagingtop20.targettravel.nl/httpdocs/webroot/alamo.be/wp-content/plugins/top20/assets/scss/top20.scss/* compiled by scssphp v0.0.12 on Mon, 28 Mar 2022 05:43:24 +0000 (0.0175s) */

/* Lejebil colors */
/* Autshuren colors */
/****
UI Datepicker en Timepicker
**/
.twitter-typeahead {
  display: block !important; }

.tt-hint {
  display: none !important; }

.tt-dropdown-menu {
  width: 200px;
  padding: 8px 0;
  border: 1px solid #ccc;
  background: #fff;
  color: #333; }
  .tt-dropdown-menu .tt-suggestion p {
    padding: 4px 10px;
    margin: 0;
    border-bottom: 1px solid #eee;
    font-size: 12px;
    color: #333; }
  .tt-dropdown-menu .tt-suggestion:hover p, .tt-dropdown-menu .tt-suggestion.tt-is-under-cursor {
    background: #eee; }

.ui-autocomplete {
  background: #fff;
  color: #333;
  max-width: 100%;
  font-size: 12px; }

.ui-datepicker {
  font-size: 14px; }
  .ui-datepicker td a {
    padding: 0.5em; }

.ui-widget-header {
  color: #0060a9; }

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
  background: #1484e6 url("/images/ui-bg_diagonals-thick_22_1484e6_40x40.png") 50% 50% repeat;
  background: #0060a9; }

.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
  color: #fff; }

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
  background: #ffef00;
  color: #0060a9;
  border: 1px solid #0060a9; }

.ui-timepicker {
  text-align: left;
  font-size: 12px; }

.spinner {
  margin: 0 auto;
  width: 50px;
  height: 40px;
  text-align: center;
  font-size: 10px; }

.widget .spinner {
  height: 30px; }
  .widget .spinner > div {
    width: 4px;
    background-color: #ddd; }
  .widget .spinner.blue > div {
    background-color: #fff; }

.spinner > div {
  background-color: #333;
  height: 100%;
  width: 6px;
  display: inline-block;
  -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
  animation: sk-stretchdelay 1.2s infinite ease-in-out; }

.spinner .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s; }

.spinner .rect3 {
  -webkit-animation-delay: -1s;
  animation-delay: -1s; }

.spinner .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s; }

.spinner .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s; }

@-webkit-keyframes sk-stretchdelay {
  0%, 40%, 100% {
    -webkit-transform: scaleY(0.4); }

  20% {
    -webkit-transform: scaleY(1); } }

@keyframes sk-stretchdelay {
  0%, 40%, 100% {
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4); }

  20% {
    transform: scaleY(1);
    -webkit-transform: scaleY(1); } }

.checkbox {
  display: none; }
  .checkbox + label:before {
    display: block;
    float: left;
    margin-right: 20px;
    width: 15px;
    height: 15px;
    content: '';
    border: 1px solid #ccc;
    border-radius: 2px;
    background: #fff;
    font-family: "FontAwesome", sans-serif;
    font-size: 16px;
    line-height: 12px;
    text-align: center;
    color: #0060a9; }
  .checkbox:checked + label:before {
    content: '\f00c'; }

body.env-local body.env-development {
  background: red !important; }

.text-yellow {
  color: #ffef00; }

#toast-container > div {
  opacity: 1;
  box-shadow: none; }

#toast-container .toast-message {
  font-size: 12px;
  line-height: 1.6; }

.popover.top {
  border: none !important; }
  .popover.top .arrow:after {
    border-top-color: #0060a9 !important; }
  .popover.top .popover-title {
    background: #ffef00;
    color: #0060a9;
    border-bottom: none; }
  .popover.top .popover-content {
    background: #0060a9;
    color: #fff;
    border: none; }

.top20-widget-loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  /*
Adresgegevens en openingstijden op locatiepagina
*/ }

.adresgegevens {
  background: #d8edff;
  padding: 20px;
  border-radius: 2px; }

.adresgegevens .address {
  margin-bottom: 1em; }

.adresgegevens #map {
  margin-top: 1em;
  width: 100%;
  height: 300px; }

.steps {
  margin: 0 0 15px 0 !important;
  background: #f9f9f9;
  padding: 15px 30px; }
  .steps li {
    position: relative;
    list-style: none;
    float: left;
    background: #ddd;
    margin-right: 30px;
    line-height: 30px;
    padding: 5px 15px 5px 5px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    color: #fff; }
    .steps li:after {
      position: absolute;
      content: '';
      left: 100%;
      top: 0;
      width: 0;
      height: 0;
      border-top: 20px solid transparent;
      border-bottom: 20px solid transparent;
      border-left: 10px solid #ddd; }
    .steps li span.number {
      display: block;
      float: left;
      margin-right: 10px;
      text-align: center;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: #fff;
      font-weight: bold;
      color: #ddd; }
    .steps li.history, .steps li.history span.number {
      color: #0060a9;
      cursor: pointer; }
    .steps li.active {
      color: #fff;
      background: #aaa; }
      .steps li.active:after {
        border-left: 10px solid #aaa; }
      .steps li.active span.number {
        color: #aaa; }

@media screen and (max-width: 991px) {
  .target-api .steps li {
    margin-right: 15px; }

  .target-api .steps li span.text {
    display: none; } }

#top20_boekingswidget {
  position: relative;
  background: #0060a9;
  color: #fff;
  margin: 0 -20px;
  padding: 15px;
  border-radius: 4px;
  min-height: 504px; }
  #top20_boekingswidget .widget-title {
    color: inherit;
    font-size: 24px;
    font-weight: bold;
    line-height: 36px; }

#top20_boekingswidget_form label {
  color: inherit;
  font-weight: bold;
  margin-bottom: 10px;
  line-height: 1.5; }
  #top20_boekingswidget_form a {
    color: #ffef00; }
  #top20_boekingswidget_form .btn-primary {
    background: #ffef00;
    color: #0060a9;
    display: block;
    width: 100%;
    font-weight: bold; }
  #top20_boekingswidget_form .has-error {
    position: relative; }
    #top20_boekingswidget_form .has-error .error {
      background: #bd362f;
      color: #fff;
      margin-top: 3px;
      font-size: 11px;
      padding: 3px; }
  #top20_boekingswidget_form .errormsg {
    display: none;
    background: red;
    color: #fff;
    padding: 10px;
    border-radius: 4px; }
  #top20_boekingswidget_form .twitter-typeahead {
    display: block !important; }
  #top20_boekingswidget_form #pickuplocation_search, #top20_boekingswidget_form #dropofflocation_search {
    display: block !important;
    background: #fff !important;
    width: 100% !important; }

.modal a {
  color: #ffef00; }
  .modal a:hover {
    color: #ffef00; }

.top20-loader {
  position: fixed;
  display: none;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .5);
  z-index: 9999; }
  .top20-loader .top20-loader-message {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    height: auto;
    min-height: 100px;
    padding: 30px;
    /*background:url(http://wordpress.dev.intoto.nu/alamo_dev/wp-content/plugins/top20/assets/img/ajax-loader.gif) center 70% no-repeat #fff;*/
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 12px 10px -8px #666; }

#top20-session-popup {
  position: fixed;
  z-index: 999;
  top: 0;
  left: -400px;
  width: 400px;
  height: 100%;
  background: #eee;
  transition: left 0.2s ease-in;
  box-shadow: none;
  /* Google Maps station finder */ }
  #top20-session-popup.open {
    left: 0;
    box-shadow: 0 3px 10px #000; }
  #top20-session-popup a.session-toggle {
    position: absolute;
    display: block;
    top: 50%;
    left: 100%;
    width: 30px;
    height: 100px;
    text-align: center;
    background: #ddd;
    font-family: "FontAwesome", sans-serif;
    transform: translateY(-50%); }
  #top20-session-popup a.session-toggle span {
    display: inline-block;
    transform: rotate(-90deg) translateY(-22px) translateX(-43px); }
  #top20-session-popup .session-data {
    overflow-y: auto;
    font-size: 11px; }
  #top20-session-popup .session-data pre {
    display: block;
    font-size: 1rem;
    max-height: 400px;
    overflow-y: auto; }

#modal_stationfinder .modal-content {
  background: #fff;
  color: #0060a9; }
  #modal_stationfinder .modal-body #map_canvas {
    border: 1px solid #ddd; }

.infobubble {
  display: block;
  max-width: 200px;
  font-family: 'Open Sans', 'Arial', sans-serif;
  font-size: 12px;
  font-weight: bold;
  color: #0060a9;
  line-height: 1.5; }

.infobubble-title {
  padding: 10px 0;
  margin: 0;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5; }

.infobubble-address, .infobubble-zipcode, .infobubble-city, .infobubble-phone, .infobubble-email {
  display: block;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: normal; }

#top20_loginwidget {
  position: relative;
  height: 60px;
  overflow: hidden; }
  #top20_loginwidget .form-group {
    margin-left: 10px;
    margin-bottom: 5px; }

#top20_clientmenuwidget {
  position: relative; }
  #top20_clientmenuwidget .toggle {
    margin: 0 -5px; }
  #top20_clientmenuwidget .toggle:after {
    margin: 0 -5px; }

.table-bookings tr.clickable {
  cursor: pointer; }
  .table-bookings tr.active {
    font-weight: bold; }
  .table-bookings tr.extra-content > td {
    background: #d8edff;
    padding: 15px !important; }

.top20-cart {
  background: #d8edff;
  padding: 15px; }
  .top20-cart h3 {
    margin: 0;
    line-height: 20px; }
  .top20-cart hr {
    background: #aaa;
    height: 1px;
    border: none; }
  .top20-cart p {
    margin-bottom: 5px; }
  .top20-cart .receipt {
    margin-top: 20px;
    box-shadow: 2px 2px 5px #999;
    margin-bottom: 10px; }

.receipt {
  /*text-transform: uppercase;*/
  font-family: 'Lekton', sans-serif;
  font-size: 1.2rem;
  background: #fff;
  padding: 15px;
  border: 1px solid #efefef; }
  .receipt .title {
    line-height: 2;
    border-bottom: 2px dashed #333;
    margin-bottom: 10px;
    font-weight: bold; }
  .receipt table {
    width: 100%;
    margin-bottom: 1rem; }
  .receipt table tr {
    background: none !important; }
    .receipt table tr.total {
      background: #f3f3f3 !important;
      font-weight: bold; }
      .receipt table tr.total td {
        padding: 3px 1px; }
    .receipt table tr td {
      font-size: 1.2rem;
      line-height: 1.5;
      vertical-align: top; }
      .receipt table tr td:nth-child(1) {
        width: 66%; }
      .receipt table tr td:nth-child(2) {
        padding-right: 10px;
        text-align: right; }
      .receipt table tr td:nth-child(3) {
        text-align: right; }

.contractlist ul {
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
  display: table;
  width: 100%; }
  .contractlist ul li {
    display: table-cell;
    text-align: center;
    /*line-height: 50px;*/
    height: auto; }
  .contractlist ul li a {
    display: block;
    height: auto;
    line-height: 20px;
    padding: 10px;
    background: #eee;
    border: 2px solid #fff;
    text-decoration: none;
    color: #333; }
  .contractlist ul li.selected a {
    background: #0060a9;
    color: #fff; }
  .contractlist ul li:first-child a {
    border-left: none; }
  .contractlist ul li:nth-child a {
    border-right: none; }

.tarieven .car {
  position: relative;
  background: #d8edff;
  padding: 15px;
  margin-bottom: 10px; }
  .tarieven .car h4 {
    margin-bottom: 5px; }
  .tarieven .car .fallback {
    position: absolute;
    bottom: 10px;
    right: 10px;
    font-size: 10px; }
    .tarieven .car .fallback:before {
      display: block;
      content: 'fallback-rate'; }
  .tarieven .car .sipp {
    font-weight: bold;
    margin-bottom: 1em; }
  .tarieven .car .bluebox {
    position: relative;
    background: #0060a9;
    color: #fff;
    font-size: 0.9em;
    min-height: 44px;
    line-height: 18px;
    border-radius: 6px;
    padding: 4px 2px 4px 10px;
    font-weight: bold;
    margin-bottom: 5px; }
    .tarieven .car .bluebox .button {
      position: absolute;
      top: 4px;
      right: 4px;
      width: 45%;
      height: calc(100% - 8px);
      line-height: 36px;
      border-radius: 6px;
      background: #ffef00;
      color: #0060a9;
      font-weight: bold;
      text-decoration: none;
      text-transform: uppercase;
      text-align: center; }
    .tarieven .car .bluebox.unpaid {
      background: white;
      color: #333; }
      .tarieven .car .bluebox.unpaid .button {
        background: #ffef00;
        color: #333; }
  .tarieven .car .inclusions {
    display: flex;
    flex-wrap: wrap; }
    .tarieven .car .inclusions p {
      flex: 0 0 25%; }
    .tarieven .car .inclusions > div {
      flex: 0 0 75%; }
      .tarieven .car .inclusions > div > div {
        padding: 5px 0; }
      .tarieven .car .inclusions > div span.fa {
        color: #3db4e5; }

.equipmentlist .option > div {
  background: #efefef;
  padding: 15px 0;
  position: relative;
  margin-bottom: 10px; }
  .equipmentlist .option > div.selected {
    background: #d8edff; }
  .equipmentlist .option > div h4 {
    font-size: 18px;
    margin-bottom: 0;
    line-height: 21px; }
  .equipmentlist .option > div select {
    float: right;
    width: 60px;
    text-align: right; }
  .equipmentlist .option > div .bluebox {
    position: relative;
    background: #0060a9;
    color: #fff;
    font-size: 0.9em;
    height: 44px;
    line-height: 18px;
    border-radius: 6px;
    padding: 4px 2px 4px 10px;
    font-weight: bold;
    margin-bottom: 5px; }
    .equipmentlist .option > div .bluebox .button {
      position: absolute;
      top: 4px;
      right: 4px;
      width: 45%;
      height: 36px;
      line-height: 36px;
      border-radius: 6px;
      background: #ffef00;
      color: #0060a9;
      font-weight: bold;
      text-decoration: none;
      text-transform: uppercase;
      text-align: center; }
    .equipmentlist .option > div .bluebox.unpaid {
      background: #eee;
      color: #333; }
      .equipmentlist .option > div .bluebox.unpaid .button {
        background: #ccc;
        color: #333; }

#nawform .yellow {
  background: #fff9bc;
  padding: 15px; }
  #nawform .yellow .form-group {
    margin-bottom: 0; }
  #nawform .yellow .form-group label {
    line-height: 30px; }
  #nawform .yellow .form-group .checkbox:first-child + label {
    margin-right: 50px; }
    #nawform .yellow .form-group .checkbox + label:before {
      margin-top: 6px; }
  #nawform .grey {
    background: #efefef;
    padding: 15px;
    margin-bottom: 15px; }
  #nawform .light-blue {
    background: #d8edff;
    padding: 15px; }
  #nawform .light-blue label {
    line-height: 1.6; }
  #nawform .light-blue label a {
    color: inherit;
    text-decoration: underline !important; }
  #nawform .payment-methods label {
    display: block;
    padding: 5px 10px;
    min-height: 50px;
    line-height: 40px;
    background: #d8edff;
    margin-bottom: 5px; }
  #nawform .payment-methods label:before {
    margin-top: 11px; }
  #nawform .payment-methods label img {
    margin-top: 5px;
    height: 30px;
    width: auto; }
  #nawform .has-error select, #nawform .has-error input, #nawform .has-error label:before {
    border: 2px solid red; }
  #nawform .error {
    font-size: 11px;
    color: red; }

.form .yellow {
  background: #fff9bc;
  padding: 15px; }
  .form .has-error input, .form .has-error label:before {
    border: 2px solid red; }
  .form .error {
    font-size: 11px;
    color: red; }