/* Mixins */
/**
 * Returns value from colors map
 */
/**
 * Turns pixels to rems
 * We typically set out HTML font size to 62.5% which helps us have a base-10 value to work with.
 * So the following mixin accepts a pixel value that is then turned into a corresponding rem value.
 */
/**
 * Function for converting a px based font-size to rem.
 *
 * @param $size - the value in pixel you want to convert
 *
 * e.g. p {to-rem(12);}
 *
 */
/* Mixins */
/**
 * Returns value from colors map
 */
/**
 * Turns pixels to rems
 * We typically set out HTML font size to 62.5% which helps us have a base-10 value to work with.
 * So the following mixin accepts a pixel value that is then turned into a corresponding rem value.
 */
/**
 * Function for converting a px based font-size to rem.
 *
 * @param $size - the value in pixel you want to convert
 *
 * e.g. p {to-rem(12);}
 *
 */
@media only screen and (max-width: 959px) {
  .disruptions-container .uk-grid {
    margin-left: 0;
  }
}
@media only screen and (max-width: 959px) {
  .disruptions-container .uk-grid + .uk-grid {
    margin-top: 2.5rem;
  }
}
@media only screen and (min-width: 960px) {
  .disruptions-container .uk-grid + .uk-grid {
    margin-top: 1.5rem;
  }
}
.disruptions-container__lines {
  width: 20%;
  padding-left: 3rem;
}
@media only screen and (max-width: 959px) {
  .disruptions-container__lines {
    width: 70%;
  }
}
@media only screen and (max-width: 639px) {
  .disruptions-container__lines {
    width: 60%;
  }
}
@media only screen and (min-width: 960px) {
  .disruptions-container__lines {
    padding-left: 9.4rem;
  }
}
.disruptions-container__lines .disruption-line {
  margin: 0 0 0.6rem 0.6rem;
}
@media only screen and (min-width: 960px) {
  .disruptions-container__lines .disruption-line {
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    width: 3.5rem;
  }
}
.disruptions-container__lines .disruption-line .traffic-line-number {
  height: 2.6rem;
  line-height: 2.6rem !important;
  width: 3.5rem;
}
.disruptions-container li {
  border: 0.1rem solid #c9c9c9;
  border-radius: 0.8rem;
  margin-left: 0;
}
@media only screen and (max-width: 959px) {
  .disruptions-container li {
    padding: 1.5rem 2.5rem 1.5rem 1.5rem;
  }
}
@media only screen and (min-width: 960px) {
  .disruptions-container li {
    padding: 2rem 5.5rem 2rem 4rem;
  }
}
.disruptions-container__time {
  text-align: right;
}
@media only screen and (max-width: 959px) {
  .disruptions-container__time {
    margin-top: 0 !important;
    width: 30%;
    padding-right: 1.4rem;
  }
}
@media only screen and (max-width: 639px) {
  .disruptions-container__time {
    width: 40%;
  }
}
.disruptions-container__time .uk-icon {
  color: #8c8c8e;
}
.disruptions-container__time .text {
  font-family: "Roboto-Bold", sans-serif !important;
  font-size: 1.6rem;
  line-height: 1.4 !important;
  color: #333333;
}
.disruptions-container__time * + .text {
  margin-left: 0.6rem;
}
.disruptions-container__description {
  color: #5d5d5d;
  font-size: 1.7rem;
  line-height: 1.4 !important;
}
@media only screen and (max-width: 959px) {
  .disruptions-container__description {
    margin-top: 2rem;
  }
}
.disruptions-container__list {
  background-image: url("../images/components/block-route-search/ajax-loader.gif");
  background-position: 50% 50%;
  background-repeat: no-repeat;
  min-height: 12rem;
}

.block-info-trafic {
  position: relative;
}

.info-trafic-bar {
  background: -webkit-gradient(linear, left top, left bottom, from(white), to(#f0f1f7));
  background: -o-linear-gradient(top, white 0%, #f0f1f7 100%);
  background: linear-gradient(180deg, white 0%, #f0f1f7 100%);
}
.info-trafic-bar .info-title {
  color: #fd5312;
}
.info-trafic-bar .toggle-icon-container {
  bottom: -2rem;
  font-size: 0;
  z-index: 1;
}
.info-trafic-bar .toggle-icon {
  background: #f0f1f7;
  border: 0;
  border-radius: 0 0 2.5rem 2.5rem;
  color: #fd5312;
  height: 2rem;
}
@media only screen and (max-width: 959px) {
  .info-trafic-bar .toggle-icon {
    width: 4rem;
  }
}
@media only screen and (min-width: 960px) {
  .info-trafic-bar .toggle-icon {
    width: 4.5rem;
  }
}
.info-trafic-bar .toggle-icon:hover {
  cursor: pointer;
}
.info-trafic-bar .toggle-icon svg {
  margin-top: -1.5rem;
}
.info-trafic-bar--summary {
  -webkit-box-shadow: 0 0.2rem 1.2rem rgba(0, 0, 0, 0.15);
  box-shadow: 0 0.2rem 1.2rem rgba(0, 0, 0, 0.15);
}
@media only screen and (max-width: 959px) {
  .info-trafic-bar--summary .layout-inner-container {
    padding: 1.5rem 2rem;
  }
}
@media only screen and (min-width: 960px) {
  .info-trafic-bar--summary .layout-inner-container {
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    max-width: 132.4rem;
    padding: 1.5rem 3.5rem;
  }
}
.info-trafic-bar--summary .info-title {
  font-family: "Roboto-Bold", sans-serif !important;
  font-size: 1.8rem;
  line-height: 1.4 !important;
}
@media only screen and (max-width: 959px) {
  .info-trafic-bar--summary .info-title .uk-icon {
    margin-right: 1rem;
  }
}
@media only screen and (min-width: 960px) {
  .info-trafic-bar--summary .info-title .uk-icon {
    margin-right: 1.5rem;
  }
}
@media only screen and (max-width: 959px) {
  .info-trafic-bar--summary .disruptions {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
  }
}
@media only screen and (max-width: 959px) and (max-width: 959px) {
  .info-trafic-bar--summary .disruptions {
    padding-left: 1rem;
  }
}
@media only screen and (max-width: 959px) and (min-width: 960px) {
  .info-trafic-bar--summary .disruptions {
    padding-left: 1.5rem;
  }
}
.info-trafic-bar--summary .disruptions ul {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  list-style: none;
  padding: 0;
}
.info-trafic-bar--summary .disruptions ul > * {
  -webkit-box-flex: 0;
  -ms-flex: none;
  flex: none;
  margin-right: 1rem;
}
@media only screen and (max-width: 959px) {
  .info-trafic-bar--summary .disruptions ul > * {
    padding-left: 0.5rem;
  }
}
@media only screen and (min-width: 960px) {
  .info-trafic-bar--summary .disruptions ul > * {
    padding-left: 1rem;
  }
}
@media only screen and (max-width: 959px) {
  .info-trafic-bar--summary .disruptions ul.limit-reached-small > *:not(.more):not(:nth-child(-n+2)) {
    display: none;
  }
  .info-trafic-bar--summary .disruptions ul:not(.limit-reached-small) .more {
    display: none;
  }
}
@media only screen and (min-width: 960px) {
  .info-trafic-bar--summary .disruptions ul.limit-reached-medium > *:not(.more):not(:nth-child(-n+13)) {
    display: none;
  }
  .info-trafic-bar--summary .disruptions ul:not(.limit-reached-medium) .more {
    display: none;
  }
}
.info-trafic-bar--summary .disruptions .more span {
  font-family: "Roboto-Medium", sans-serif !important;
  font-size: 1.6rem;
  line-height: 1.4 !important;
  border: 0.1rem solid black;
  border-radius: 2rem;
  color: black;
  display: block;
  height: 2.7rem;
  line-height: 1.2 !important;
  text-align: center;
  width: 4.2rem;
}
.info-trafic-bar--summary .disruptions .no-disruption {
  font-size: 1.6rem;
  line-height: 1.4 !important;
}
.info-trafic-bar--summary.state-loading .toggle-icon-container, .info-trafic-bar--summary.state-no-disruption .toggle-icon-container {
  display: none;
}
.info-trafic-bar--summary:not(.state-loading):not(.state-no-disruption):hover {
  cursor: pointer;
}
.info-trafic-bar--summary:not(.state-no-disruption) .no-disruption {
  display: none;
}
.info-trafic-bar--full {
  z-index: 1030;
}
@media only screen and (min-width: 960px) {
  .info-trafic-bar--full .disruptions-container__lines {
    padding-left: 5.4rem;
    width: 18%;
  }
}
@media only screen and (max-width: 959px) {
  .info-trafic-bar--full .layout-inner-container {
    padding: 2rem;
  }
}
@media only screen and (min-width: 960px) {
  .info-trafic-bar--full .layout-inner-container {
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    max-width: 132.4rem;
    padding: 4.5rem 3.5rem 5rem;
  }
}
@media only screen and (max-width: 959px) {
  .info-trafic-bar--full .info-title {
    font-family: "Roboto-Bold", sans-serif !important;
    font-size: 1.8rem;
    line-height: 1.4 !important;
  }
}
@media only screen and (min-width: 960px) {
  .info-trafic-bar--full .info-title {
    font-size: 2.4rem;
    line-height: 1.4 !important;
  }
}
@media only screen and (max-width: 959px) {
  .info-trafic-bar--full .info-title .uk-icon {
    margin-right: 1rem;
  }
}
@media only screen and (min-width: 960px) {
  .info-trafic-bar--full .info-title .uk-icon {
    margin-right: 2rem;
  }
}
.info-trafic-bar--full .disruptions {
  overflow-y: auto;
}
@media only screen and (max-width: 959px) {
  .info-trafic-bar--full .disruptions {
    margin-top: 2.5rem;
    max-height: 67vh;
  }
}
@media only screen and (min-width: 960px) {
  .info-trafic-bar--full .disruptions {
    margin-top: 4rem;
    max-height: 45vh;
  }
}