@charset "UTF-8";
/*
 * Styles the main-part of the site:
 * content, etc.
 */

.color-primary {
  color: var(--primary-color) !important;
}

.color-primary-hoverable:hover {
  color: var(--primary-color-hover);
}

#content:not(.player #content) {
  padding: 2em 0px;
}

#loading {
  width: 100%;
  margin: 0 auto 0 auto;
}

#spinner {
  width: 50px;
  float: none;
  margin: 0 auto 0 auto;
}

.divider,
.divider-300 {
  border-top: 2px solid var(--color-grey-300);
  width: 100%;
  margin: 2em 0 1em;
}

.divider.divider-200 {
  border-top: 2px solid var(--color-grey-200);
}

.divider.divider-100 {
  border-top: 1px solid var(--color-grey-100);
}

.card {
  border: 1px solid var(--color-grey-100);
  border-radius: var(--border-radius);
  padding: 1em;
  transition: border-color 0.3s ease;
}

.card.clickable {
  cursor: pointer;
}

.card.clickable:hover {
  background: var(--color-grey-100);
}

.card:not(.static):hover,
.card.active,
.card.open {
  border-color: var(--color-grey-300);
  background-color: var(--color-grey-50);
}

.card,
.card.card-bright:hover {
  background-color: var(--color-white);
}

.card.card-primary {
  background-color: var(--color-primary-50);
}

.card.card-primary:hover {
  background-color: var(--color-primary-100) !important;
}

#content .ui-tabs {
  padding: 0;
}

#content .ui-tabs .ui-tabs-panel {
  padding: 1.5em 0 0;
}

.info-container {
  display: none;
  margin-bottom: 1em;
}

.info-container.with-robot {
}

.info-container.with-robot p {
  display: flex;
  position: relative;
}

.info-container.with-robot .info-content > img:not(.close) {
  display: none;
}

.info-container.with-robot.robot-reverse p {
  flex-direction: row-reverse;
}

.info-container.with-robot p:after {
  content: ' ';
  display: block;
  flex-shrink: 0;
  position: relative;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}

.info-container.with-robot.robot-reverse p:after {
  transform: scaleX(-1);
  margin-right: 10px;
  margin-left: -20px;
}

.info-container.with-robot.robot-a p:after {
  background-image: url(../img/robot_fingerpointing_left.png);
  width: 145px;
  height: 130px;
  bottom: -37px;
  background-size: initial;
  margin-top: -10px;
}

.info-container.with-robot.robot-b p:after {
  background-image: url(../img/robot_fingerpointing.png);
  width: 145px;
  height: 130px;
  bottom: -36px;
  background-size: cover;
}

.info-container.with-robot.robot-c p:after {
  background-image: url(../img/robot_office.png);
  width: 145px;
  height: 130px;
  bottom: -21px;
  background-size: cover;
}

.info-container.with-robot.robot-d p:after {
  background-image: url(../img/robot_look_left.png);
  width: 145px;
  height: 130px;
  bottom: -16px;
}

.info-container.with-robot.robot-e p:after {
  background-image: url(../img/robot_total.png);
  width: 145px;
  height: 130px;
  bottom: -21px;
}

.info-container.with-robot.robot-f p:after {
  background-image: url(../img/robot_smile.png);
  width: 145px;
  height: 130px;
  bottom: -21px;
}

.info-container.with-robot.robot-small p:after {
  width: 70px;
  height: 70px;
}

.info-container .info-content {
  background: var(--color-info-bg);
  display: flex;
  align-items: self-start;
  justify-content: space-between;
  padding: 1em;
  margin: auto;
}

.info-container .info-content p,
.info-container .info-content h1 {
  margin: 0 1rem;
  color: #4c71a4; /**TODO: define color */
}

.info-container .info-content .close {
  cursor: pointer;
}

#license-teaser-container .info-content {
  position: relative;
}
#license-teaser-container .close {
  position: absolute;
  right: 14px;
}

#license-teaser-container .info-content {
  position: relative;
}
#license-teaser-container .close {
  position: absolute;
  right: 14px;
}

#startpage-onboarding-container .info-content,
#course-info-container .info-content,
#license-teaser-container .info-content {
  background: var(--color-grey-50);
  border: 1px solid var(--color-grey-100);
  border-radius: var(--border-radius);
}

.link-primary {
  color: var(--primary-color);
  font-size: 14px;
  cursor: pointer;
}

#startpage-onboarding-container .robot-item,
#course-info-container .robot-item,
#favorites-info-container .robot-item {
  align-self: flex-end;
  width: 145px;
  margin-bottom: -37px;
  margin-right: -30px;
}

#favorites-info-container .robot-item {
  margin-right: 0px;
}

#course-info-container h1,
#course-info-container p {
  margin-bottom: 1rem;
  color: var(--color-grey-700);
}

#startpage-onboarding-container .robot-icon,
#course-info-container .robot-icon {
  background: url(../img/robot_fingerpointing_left.png) center center;
  width: 145px;
  height: 130px;
}

#favorites-info-container .robot-icon {
  background: url(../img/robot_smile.png) center center no-repeat;
  width: 70px;
  height: 70px;
  background-size: contain;
}

.problem_help-icon {
  background-image: url('../img/icon_solutions.svg');
}

.sticky-pin,
.sticky-zoom {
  opacity: 0.5;
}

.sticky-pin.active,
.sticky-zoom.active {
  opacity: 1;
}

.history-header,
.favorites-header {
  display: flex;
  justify-content: space-between;
}

.history-header .button,
.favorites-header .button {
  margin: 1em 0;
  display: flex;
  align-items: center;
}

.history-header .button:before,
.favorites-header .button:before {
  content: ' ';
  background: url('../img/icon_delete.svg') center center no-repeat;
  width: 15px;
  height: 20px;
  margin-right: 10px;
}

#history_list-container,
#favorites_list-container {
  margin-top: 2em;
}

.margin-right {
  margin-right: 1em !important;
}

/* no content placeholder */
.noContent {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 5em 0;
  flex-flow: column;
  text-align: center;
}

.noContent .noContentIcon {
  width: 170px;
  height: 170px;
  background: url(../img/icon_no_content.svg) center center no-repeat;
}

#breadcrumb-container {
  padding: 1em 1.125em;
  background: var(--color-grey-50);
}

body.embed #breadcrumb-container {
  display: none;
}

#breadcrumb-container ul {
  display: flex;
  align-items: center;
}

#breadcrumb-container ul li {
  color: var(--color-grey-700);
  display: flex;
  align-items: center;
  min-width: min-content;
  min-height: 1.125em;
  transition: color 0.2s ease;
}

.mobile #breadcrumb-container ul li {
  flex: 1 1 auto;
}

#breadcrumb-container ul li.home {
  min-width: 3.75rem;
}

#breadcrumb-container ul li.home svg path {
  fill: var(--color-grey-300);
  transition: fill 0.2s ease;
}

#breadcrumb-container ul li.home:hover svg path {
  fill: var(--color-black);
}

#breadcrumb-container ul li.active {
  color: var(--color-black);
  font-weight: 500;
}

#breadcrumb-container ul li.routeable:hover {
  color: var(--color-black);
  cursor: pointer;
}

#breadcrumb-container ul li:not(:last-child)::after {
  content: url(../img/icon_arrow.svg);
  margin: 0 1em;
  font-weight: bold;
}

/* X-Small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
  #content {
    padding: 2em 1.125em;
  }

  .info-container.with-robot p:after,
  #startpage-onboarding-container .robot-item,
  #course-info-container .robot-item,
  #favorites-info-container .robot-item {
    display: none;
  }

  #history_list-container,
  #favorites_list-container {
    margin-top: 0;
  }

  .driving-licenses-cards {
    grid-template-columns: repeat(1, 1fr);
  }
  .additional-utilities-cards {
    grid-template-columns: repeat(1, 1fr);
  }
}