.hidden {
  display: none;
}

div.spacer-medium {
  height: 25px;
}

div.spacer-large {
  height: 50px;
}

div.text-content-container {
  font-size: 85%;
}

a.site-link {
  text-decoration: none !important;
  color: #d65050;
}

.flex {
  display: flex;
}

.flex-one {
  flex: 1;
}

.flex-two {
  flex: 2;
}

.flex-three {
  flex: 3;
}
/*-----tripcalculator and taxicalculator general rules------*/

div.places-container,
div.tarrif-container {
  padding-top: 5%;
  padding-bottom: 5%;
}

div.places-container div {
  width: 100%;
}

div#results-container,
div#weather-container {
  padding-top: 5%;
}

div#results-container > div {
  padding-top: 1%;
}

div#results-container span.calculated-value {
  float: right;
}

.calculator-container {
  margin: 5%;
}

div.button-container {
  padding-top: 4%;
}

div#reset-map,
div#calculate {
  cursor: pointer;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #a21502;
  border: 2px solid #a21502;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  margin: 0 auto;
}

div#calculate {
  background-image: url(images/buttons/play20x20.png);
}

div#reset-map {
  background-image: url(images/buttons/refresh20x20.png);
}

span.marker-content {
  color: black;
  font-size: 14px;
}

a#route-steps-link,
a#route-tollstation-link,
a#route-rest-area-link {
  color: #a21502;
  font-weight: bold;
}

a#route-steps-link:hover,
a#route-tollstation-link:hover,
a#route-rest-area-link:hover {
  text-decoration: underline;
  cursor: pointer;
}

ol.route-steps-list,
ul.route-tolls-list,
ul.route-rest-area-list {
  font-size: 70%;
}

div#terms-container {
  padding-top: 5% !important;
  font-size: 85%;
}

div#limits-container {
  padding-top: 5% !important;
  font-size: 85%;
}

input[type="checkbox"].css-checkbox {
  position: absolute;
  z-index: -1000;
  left: -1000px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
}

input[type="checkbox"].css-checkbox + label.css-label {
  padding-left: 29px;
  height: 24px;
  display: inline-block;
  line-height: 24px;
  background-repeat: no-repeat;
  background-position: 0 0;
  font-size: 14px;
  cursor: pointer;
}

input[type="checkbox"].css-checkbox:checked + label.css-label {
  background-position: 0 -24px;
}
label.css-label {
  background-image: url(images/csscheckbox.png);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  color: white;
  font-weight: normal;
}

div#weather-control-container {
  font-weight: none;
  font-size: 80%;
}

div.required-field-symbol {
  font-size: 150%;
  padding-right: 0.3em;
  color: #d65050;
}

div.actions-results-container {
  margin-bottom: 5%;
}

span.dropdown-wrapper {
  color: black !important;
}

.select2-results {
  color: black;
}
/*----------------Styled inputs for data entry (HERE)---------------*/
div.styled-input {
  width: 100%;
}

div.styled-input .inp {
  width: 100%;
  position: relative;
  margin: auto;
}

div.styled-input .inp .label {
  position: absolute;
  top: 16px;
  left: 0;
  color: white;
  font-weight: 500;
  transform-origin: 0 0;
  transition: all 0.2s ease;
}

div.styled-input .inp .border {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  background: white;
  transform: scaleX(0);
  transform-origin: 0 0;
  transition: all 0.15s ease;
}

div.styled-input .inp input {
  -webkit-appearance: none;
  border: 0;
  font-family: inherit;
  padding: 12px 0;
  height: 48px;
  font-size: 16px;
  font-weight: 500;
  border-bottom: 2px solid white;
  background: none;
  border-radius: 0;
  color: white;
  transition: all 0.15s ease;
}

div.styled-input .inp input:hover {
  background: rgba(34, 50, 84, 0.03);
}
div.styled-input .inp input:not(:placeholder-shown) + span {
  color: white;
  transform: translateY(-26px) scale(0.75);
}
div.styled-input .inp input:focus {
  background: none;
  outline: none;
}
div.styled-input .inp input:focus + span {
  color: white;
  transform: translateY(-26px) scale(0.75);
}
div.styled-input .inp input:focus + span + .border {
  transform: scaleX(1);
}
/*------------Size specific rules---------------------*/

@media screen and (min-width: 1200px) {
  div.actions-results-container {
    padding-right: 5%;
    width: 40%;
    min-height: 850px;
  }

  #map-container {
    flex: 2;
    height: 850px;
    width: 60%;
  }
  #map {
    height: 100%;
    width: 100%;
  }

  #trip-container > div {
    flex: 1;
  }

  #trip-container {
    display: flex;
  }

  div.places-container {
    display: flex;
  }

  div.places-container > div {
    width: 45%;
  }

  div.places-container > div.horizontal-vertical-spacer {
    width: 10%;
  }
}

@media screen and (max-width: 1200px) {
  #map-container {
    height: 400px;
    width: 100%;
    padding-top: 5%;
  }
  #map {
    height: 100%;
    width: 100%;
  }

  div.places-container > div.horizontal-vertical-spacer {
    height: 50px;
  }

  div.mb-autocomplete-mobile-hidden {
    display: none;
  }
}

/*-------------Lists style ----------------*/

div#tollstationlist-container,
div#servicestationlist-container {
  padding-top: 5%;
  padding-bottom: 5%;
}

ul#tollstationlist,
ul#servicestationlist,
h5.station-list-header {
  padding: 2% 15% 0 2%;
}

#tollstationlist-container ul#tollstationlist li,
#servicestationlist-container ul#servicestationlist li {
  padding: 0px 0px 3px 30px;
  list-style: none;
  margin: 0;
  height: 70px;
}

#tollstationlist-container ul#tollstationlist li {
  background: url(images/toll-tiny.png) no-repeat left top;
}

#servicestationlist-container ul#servicestationlist li {
  background: url(images/rest-area-tiny.png) no-repeat left top;
}

li div.link-container {
  padding-left: 0.5%;
}

li a.station-link {
  color: #eee;
}

a.tollstation-link,
a.servicestation-link {
  color: white;
}

/* Map rules */

a.marker-popup-link {
  font-size: 75%;
}

a.marker-popup-link:hover {
  color: #5867dd;
}
/*--------Disabled rules--------*/

select:disabled,
span#select2-origin-container:disabled,
span#select2-destination-container:disabled {
  opacity: 0.5;
}

button:disabled {
  background-color: #cccccc !important;
  border-color: #cccccc !important;
}

/*-------Privacy policy page---------*/

table.privacy-cookie-table td {
  color: white !important;
}