storybook.css

:root {
  --border-radius: 0.4375rem;
  --breakpoint-lg: 1024px;
  --oldblue: #0088ce;
  --oldblue-rgb: 0, 136, 206;
  --blue: #303383;
  --blue-rgb: 48, 51, 131;
  --darkblue: #16183d;
  --darkblue-rgb: 22, 24, 61;
  --verydarkblue: #0e0f26;
  --verydarkblue-rgb: 14, 15, 38;
  --purple: #6e1e78;
  --purple-rgb: 110, 30, 120;
  --pink: #a1006b;
  --pink-rgb: 161, 0, 107;
  --red: #cd0037;
  --red-rgb: 205, 0, 55;
  --orange: #e05206;
  --orange-rgb: 224, 82, 6;
  --yellow: #ffb612;
  --yellow-rgb: 255, 182, 18;
  --green: #82be00;
  --green-rgb: 130, 190, 0;
  --teal: #d2e100;
  --teal-rgb: 210, 225, 0;
  --cyan: #009aa6;
  --cyan-rgb: 0, 154, 166;
  --white: #fff;
  --white-rgb: 255, 255, 255;
  --black: #000;
  --black-rgb: 0, 0, 0;
  --gray: #333;
  --gray-rgb: 51, 51, 51;
  --gray-dark: #343a40;
  --gray-dark-rgb: 52, 58, 64;
  --primary: #303383;
  --primary-rgb: 48, 51, 131;
  --primary-dark: #202258;
  --primary-dark-rgb: 32, 34, 88;
  --secondary: #4d4f53;
  --secondary-rgb: 77, 79, 83;
  --success: #82be00;
  --success-rgb: 130, 190, 0;
  --info: #009aa6;
  --info-rgb: 0, 154, 166;
  --warning: #ffb612;
  --warning-rgb: 255, 182, 18;
  --danger: #cd0037;
  --danger-rgb: 205, 0, 55;
  --light: #f2f2f2;
  --light-rgb: 242, 242, 242;
  --dark: #343a40;
  --dark-rgb: 52, 58, 64;
  --coolgray15: #202020;
  --coolgray15-rgb: 32, 32, 32;
  --coolgray13: #333333;
  --coolgray13-rgb: 51, 51, 51;
  --coolgray11: #4d4f53;
  --coolgray11-rgb: 77, 79, 83;
  --coolgray9: #747678;
  --coolgray9-rgb: 116, 118, 120;
  --coolgray7: #a0a0a0;
  --coolgray7-rgb: 160, 160, 160;
  --coolgray5: #b9b9b9;
  --coolgray5-rgb: 185, 185, 185;
  --coolgray3: #d7d7d7;
  --coolgray3-rgb: 215, 215, 215;
  --coolgray1: #f2f2f2;
  --coolgray1-rgb: 242, 242, 242;
  --modal-gray-transparent-background: rgba(0, 0, 0, 0.1);
}

/*
*
*   SELECT
*
*/
.select-improved .select-menu {
  z-index: 3 !important;
}
.select-improved .form-control {
  overflow: hidden !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*
*
*   DROPDOWN
*
*/
.dropdown.tether-element {
  margin-top: 10px;
}
.dropdown.tether-element .dropdown-menu {
  margin-top: 0;
}
.dropdown.tether-element .dropdown-menu::after,
.dropdown.tether-element .dropdown-menu::before {
  bottom: calc(100% - 1px) !important;
}

.dropdown-menu ul.dropdown-menu-list li.dropdown-item {
  padding: 0;
  display: flex;
  flex-direction: column;
}
.dropdown-menu ul.dropdown-menu-list li.dropdown-item > * {
  width: 100%;
  padding: 0.5em 1.5em;
}

/*
*
*   MODALS
*
*/
.modal-header.modal-header-border-bottom {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.modal-header.modal-header-border-bottom div {
  width: 100%;
  border-top: 1px solid var(--coolgray3);
}

/*
*
*   LABELS
*
*/
label,
.labels {
  display: flex !important;
  align-items: center !important;
  white-space: nowrap;
  height: 1.4rem;
  gap: 0.5rem;
}

/*
*
*   BLOCKQUOTE
*
*/
blockquote {
  font-size: 0.9rem;
  border-left: 3px solid var(--secondary);
  background-color: var(--coolgray1);
  padding-left: 0.5rem;
}

/*
*
*   TABS
*
*/
.tabs .tab {
  position: relative;
  border-bottom: 3px solid transparent;
  transition: text-shadow 0.3s;
}
.tabs .tab::after {
  transition: all ease 0.3s;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0.3125rem;
  content: '';
  background-color: transparent;
  border-radius: 3px;
}
.tabs .tab:hover {
  cursor: pointer;
  color: var(--primary);
}
.tabs .tab.active {
  text-shadow: 0 0 0.65px var(--primary);
  color: var(--primary);
}
.tabs .tab.active::after {
  background-color: var(--primary);
}

body {
  min-height: 100vh;
}

.mastcontainer-map {
  height: 100vh;
}

.no-mastnav .actionbar {
  width: 100%;
}
.no-mastnav .mastcontainer {
  padding-left: 0;
}

.loader {
  text-align: center;
}

.loader,
.login-form {
  margin-top: 50vh;
  transform: translateY(-50%);
}
.loader.center,
.login-form.center {
  margin: inherit;
  transform: inherit;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.login-form .logo {
  max-height: 18rem;
}

.version {
  position: absolute;
  right: 0;
  font-size: 0.7rem;
}

/* Make cool transitions for fullscreen mode */
.mastheader,
.mastnav,
.mastcontainer,
.actionbar,
.table-filters,
.sideBar-container {
  transition: 0.4s ease-in-out;
}

.mastnav.fullscreen {
  left: -7rem !important;
}

.mastheader.fullscreen {
  top: -5rem !important;
}

.actionbar.fullscreen {
  top: 0 !important;
  width: 100% !important;
}

.mastcontainer.fullscreen {
  padding-top: 4.5rem;
  padding-left: 0 !important;
}

.table-filters.fullscreen {
  top: 5rem !important;
}

.sideBar-container.fullscreen {
  left: -6.5rem !important;
  top: -3.7rem !important;
  height: 109vh !important;
}

.navbar-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.25rem;
  line-height: 1rem;
}
.navbar-breadcrumbs a {
  color: var(--coolgray7);
}
.navbar-breadcrumbs a:hover {
  color: var(--coolgray1);
}
@media screen and (max-width: 1280px) {
  .navbar-breadcrumbs {
    font-size: 1rem;
  }
}

/* media queries won't accept CSS variables... */
/* lg breakpoint 1024 px */
@media screen and (max-width: 1023px) {
  .btn-fullscreen {
    bottom: 6rem;
  }
  .btn-resetviewport {
    bottom: 9rem;
  }
}
@media screen and (max-width: 1023.98px) {
  .sideBar-container {
    padding-left: 0;
    bottom: 0;
    max-width: 100vw;
    width: 100vw;
    top: 30%;
  }
  .sideBar-content {
    max-width: 100vw;
  }
  .sideBar-container.fullscreen {
    left: 0 !important;
    top: 30% !important;
  }
}
@media screen and (min-width: 1280px) {
  .sideBar-container {
    margin-top: 9rem;
  }
  .sideBar-container.fullscreen {
    top: -4.15rem;
  }
}
.tab-content > .tab-pane {
  display: none;
}

.tab-content > .active {
  display: block;
}

.creation-sidebar.fullscreen {
  left: -6.25rem !important;
  top: -4.5rem !important;
  transition-delay: 0.2s;
}

@media screen and (max-width: 1023.98px) {
  .creation-sidebar {
    padding-left: 0.5rem !important;
    padding-top: 17.8rem !important;
    transition-delay: 0.11s;
  }
  .creation-sidebar.fullscreen {
    transition-delay: 0.25s;
    top: -4.25rem !important;
    left: 0 !important;
  }
}

.custom-control {
  padding-left: 1.625rem !important;
}
.custom-control .custom-control-label::before,
.custom-control .custom-control-label::after {
  left: -1.625rem;
}

@media (min-width: 576px) {
  .modal-dialog.modal-lg,
  .modal-dialog.modal-xl {
    max-width: calc(100vw - 3rem) !important;
  }
}
@media (min-width: 1024px) {
  .modal-dialog.modal-lg,
  .modal-dialog.modal-xl {
    max-width: 800px !important;
  }
}
@media (min-width: 1280px) {
  .modal-dialog.modal-xl {
    max-width: 1140px !important;
  }
}
.btn-map-infras-blinking {
  animation-name: blinking;
  animation-duration: 0.5s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
}
@keyframes blinking {
  from {
    background-color: var(--orange);
    color: var(--white);
  }
  to {
    background-color: var(--white);
    color: var(--orange);
  }
}

.maplibregl-map {
  font-family: Avenir, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
    Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
}
.maplibregl-map .maplibregl-marker {
  display: flex;
  align-items: center;
  justify-content: center;
}

.mastcontainer-no-mastnav {
  padding-left: 0 !important;
  padding-bottom: 0 !important;
}

.cardscontainer {
  margin: 2rem;
}

.card {
  cursor: pointer;
  transition: 0.2s ease-in-out;
}

.card:hover {
  opacity: 0.5;
}

.disabled-link {
  pointer-events: none;
}

.application-title {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 0 0;
}
.application-title h1 {
  padding-top: 2rem;
  font-size: 3rem;
  color: var(--coolgray9);
}
.application-title img {
  width: 8rem;
}
@media screen and (max-width: 1024px) {
  .application-title h1 {
    font-size: 1.5rem;
  }
  .application-title img {
    width: 4rem;
  }
}

.modal-header .close {
  padding-top: 1.8rem !important;
}

.language-choice-btn {
  display: flex !important;
  padding: 0.5rem 1rem !important;
  gap: 1rem;
}
.language-choice-btn svg {
  height: 24px;
}
.language-choice-btn:disabled svg {
  opacity: 0.5 !important;
}

svg text {
  font-family: Avenir, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
    Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
}

select.sm {
  min-height: auto;
  padding: 0.2rem 1.25rem;
}

.toast {
  z-index: 3;
}

.simulation-results {
  position: relative;
  padding-bottom: 3rem;
  /* Chart Modal */
  /* SPACETIME */
  /* ALLOWANCES */
  /* SPEEDSPACE */
  /* Electrical profile legend */
  /* Curves & Slopes */
  /* OPERATIONAL POINTS */
  /* TABLE OVERRIDE */
  /* TIMELINE */
}
.simulation-results .chart-container {
  display: block;
  position: relative;
  width: 100%;
  transition: 0.2s;
}
.simulation-results .chart-container .handle-tab-resize {
  width: 100%;
  text-align: center;
  position: absolute;
  bottom: -1.25rem;
  font-size: 2rem;
  transition: 0.2s;
  color: var(--coolgray3);
}
.simulation-results .chart-container .handle-tab-resize:hover {
  color: var(--coolgray9);
}
.simulation-results .grid .tick {
  opacity: 0.2;
}
.simulation-results .grid .tick line {
  stroke: #333;
  stroke-dasharray: 2, 2;
}
.simulation-results .chartTrain {
  cursor: move;
}
.simulation-results .guideLines {
  stroke: var(--primary);
  stroke-width: 0.5;
  opacity: 0.5;
  pointer-events: none;
}
.simulation-results .curve-label {
  fill: #777;
  font-size: 0.7rem;
  font-weight: bold;
}
.simulation-results .curve-label.selected {
  fill: var(--primary);
}
.simulation-results .osrd-simulation-chart-modal {
  display: flex;
  position: absolute;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.75);
}
.simulation-results .osrd-simulation-chart-modal .chart-modal-box {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
  border-radius: 4px;
  padding: 1em;
}
.simulation-results .osrd-simulation-chart-modal .chart-modal-box .chart-modal-type-title {
  text-align: center;
  flex-basis: 100%;
  font-size: 1.5rem;
}
.simulation-results .osrd-simulation-chart-modal .chart-modal-box .chart-modal-input {
  display: flex;
  align-items: center;
}
.simulation-results
  .osrd-simulation-chart-modal
  .chart-modal-box
  .chart-modal-input
  .chart-modal-type-label {
  color: #4d4f53;
  font-weight: bold;
  font-size: 3rem;
  margin-right: 1rem;
}
.simulation-results .osrd-simulation-chart-modal .chart-modal-box .chart-modal-input input {
  border: none;
  border-bottom: 4px solid #d7d7d7;
  color: #333;
  background: none;
  font-size: 2rem;
  font-weight: bold;
  padding-right: 1.5rem;
  width: 8rem;
  text-align: right;
}
.simulation-results .osrd-simulation-chart-modal .chart-modal-box .chart-modal-input input:focus {
  outline: none;
}
.simulation-results
  .osrd-simulation-chart-modal
  .chart-modal-box
  .chart-modal-input
  .chart-modal-type-unit {
  content: 's';
  color: #747678;
  font-weight: bold;
  font-size: 2rem;
  margin-left: -1rem;
}
.simulation-results .spacetime-chart {
  position: relative;
}
.simulation-results .spacetime-chart .btn-rotate {
  position: absolute;
  right: 2rem;
  bottom: 2.5rem;
}
.simulation-results .spacetime-chart .area {
  fill: url(#hatchPatternGray);
}
.simulation-results .spacetime-chart .area.selected {
  fill: rgba(48, 51, 131, 0.2);
}
.simulation-results .spacetime-chart .area.selected.eco {
  fill: rgba(130, 190, 0, 0.2);
}
.simulation-results .spacetime-chart rect {
  stroke-width: inherit;
  stroke: inherit;
}
.simulation-results .spacetime-chart .start-block {
  stroke: var(--coolgray5);
  stroke-width: 2;
}
.simulation-results .spacetime-chart .start-block.selected {
  stroke: var(--yellow);
}
.simulation-results .spacetime-chart .start-block.pointer {
  fill: var(--yellow);
}
.simulation-results .spacetime-chart .end-block {
  stroke: var(--coolgray9);
  stroke-width: 2;
}
.simulation-results .spacetime-chart .end-block.selected {
  stroke: var(--red);
}
.simulation-results .spacetime-chart .end-block.pointer {
  fill: var(--red);
}
.simulation-results .spacetime-chart .tail {
  stroke: var(--coolgray3);
}
.simulation-results .spacetime-chart .tail.selected {
  stroke: var(--cyan);
}
.simulation-results .spacetime-chart .tail.pointer {
  fill: var(--cyan);
}
.simulation-results .spacetime-chart .head {
  stroke: var(--coolgray7);
}
.simulation-results .spacetime-chart .head.selected {
  stroke: var(--blue);
}
.simulation-results .spacetime-chart .head.selected.allowances {
  stroke: var(--orange);
}
.simulation-results .spacetime-chart .head.selected.eco {
  stroke: var(--green);
}
.simulation-results .spacetime-chart .head.pointer {
  fill: var(--blue);
}
.simulation-results .spacetime-chart .head.pointer.allowances {
  fill: var(--orange);
}
.simulation-results .spacetime-chart .head.pointer.eco {
  fill: var(--green);
}
.simulation-results .axis-unit {
  font-size: 1rem;
  font-weight: bold;
  fill: var(--coolgray7);
}
.simulation-results .route-aspect {
  opacity: 0.5;
}
.simulation-results .route-aspect.selected {
  opacity: 1;
}
.simulation-results .route-aspect.selected.eco {
  opacity: 1;
}
.simulation-results .chart-container .showSettingsButton {
  position: absolute;
  border: none;
  background: none;
  cursor: pointer;
  height: 100%;
  color: var(--coolgray7);
}
.simulation-results .chart-container .speedspace-chart {
  display: flex;
  background-color: white;
  border-radius: 4px;
  position: relative;
}
.simulation-results .chart-container .speedspace-chart .showSettings {
  overflow: hidden;
  transition: 0.3s;
}
.simulation-results .chart-container .speedspace-chart .btn-rotate {
  position: absolute;
  right: 2rem;
  top: 1rem;
}
.simulation-results .chart-container .speedspace-chart .area.speed {
  fill: rgba(48, 51, 131, 0.2);
}
.simulation-results .chart-container .speedspace-chart .area.slopes {
  fill: var(--cyan);
}
.simulation-results .chart-container .speedspace-chart .speed {
  stroke: var(--blue);
  stroke-width: 1;
}
.simulation-results .chart-container .speedspace-chart .speed.pointer {
  fill: var(--blue);
}
.simulation-results .chart-container .speedspace-chart .speed.pointer.allowances {
  fill: var(--orange);
}
.simulation-results .chart-container .speedspace-chart .speed.pointer.eco {
  fill: var(--green);
}
.simulation-results .chart-container .speedspace-chart .speed.allowances {
  stroke: var(--orange);
}
.simulation-results .chart-container .speedspace-chart .speed.eco {
  stroke: var(--green);
}
.simulation-results .chart-container .speedspace-chart .speed.vmax {
  stroke-width: 2;
  stroke: var(--purple);
}
.simulation-results .chart-container .speedspace-chart .speed.slopes {
  stroke-width: 2;
  stroke: var(--orange);
}
.simulation-results .chart-container .speedspace-chart .speed.slopesHistogram {
  stroke-width: 1;
  stroke: var(--cyan);
}
.simulation-results .elecProf-modal {
  position: absolute;
  z-index: 0;
  min-height: 5rem;
  max-height: calc(100% - 5vh);
  overflow: auto;
  top: 0;
  right: 8rem;
  padding: 1rem;
  background-color: #fff;
  width: calc(25% - 5.5rem);
  transition: 0.4s;
  margin: 1rem;
  border-radius: 4px;
  border: 1px solid #d7d7d7;
}
@media screen and (min-width: 640px) {
  .simulation-results .elecProf-modal {
    max-width: 50%;
  }
}
.simulation-results .elecProf-modal-dark {
  background-color: var(--coolgray13);
  color: var(--coolgray1);
  border-color: var(--coolgray13);
}
.simulation-results .elecProfKey {
  display: block;
  font-size: 0.9rem;
  margin: 1rem 1rem 0;
  font-weight: lighter;
}
.simulation-results .elecProfKey .elecProfKey-title {
  border-bottom: 1px solid #555;
  padding-bottom: 0.25rem;
  margin-bottom: 0.5rem;
}
.simulation-results .elecProfKey .elecProfKey-item {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}
.simulation-results .elecProfKey .elecProfKey-item-visible {
  display: flex;
}
.simulation-results .elecProfKey .elecProfKey-icon {
  height: 1.5em;
  width: 2em;
  text-align: center;
  background-color: #fff;
  border-radius: 4px;
  margin-right: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.simulation-results .elecProfKey .elecProfKey-line {
  display: block;
  width: 80%;
  margin-left: 20%;
  height: 4px;
  margin: 1px;
}
.simulation-results .elecProfKey .elecProfKey-stripedBlock {
  display: block;
  width: 80%;
  margin-left: 20%;
  height: 15px;
  margin: 1px;
}
.simulation-results .elecProfKey .elecProfKey-25KA {
  background-color: #6e1e78;
}
.simulation-results .elecProfKey .elecProfKey-25KB {
  background-color: #a453ad;
}
.simulation-results .elecProfKey .elecProfKey-1500A {
  background-color: #ff0037;
}
.simulation-results .elecProfKey .elecProfKey-1500B {
  background-color: #ff335f;
}
.simulation-results .elecProfKey .elecProfKey-1500C {
  background-color: #ff6687;
}
.simulation-results .elecProfKey .elecProfKey-Thermal {
  background-color: #333;
}
.simulation-results .elecProfKey .elecProfKey-15000 {
  background-color: #009aa6;
}
.simulation-results .elecProfKey .elecProfKey-3000 {
  background-color: #1fbe00;
}
.simulation-results .elecProfKey .elecProfKey-noUsed {
  background: repeating-linear-gradient(-45deg, #747678 0 3px, transparent 3px 6px);
}
@media screen and (max-width: 640px) {
  .simulation-results .elecProfKey {
    font-size: 0.8em;
  }
}
.simulation-results .op-line {
  stroke: var(--coolgray7);
  stroke-width: 1;
  stroke-dasharray: 4, 4;
}
.simulation-results .op-text {
  fill: var(--coolgray11);
  font-size: 0.65rem;
}
.simulation-results .table-cell-selected {
  font-weight: bold;
}
.simulation-results .table-shrink .cell-inner {
  padding: 0;
}
.simulation-results .table td.td-button {
  padding: 0;
}
.simulation-results .table td.td-button .cell-inner-button {
  padding: 0.5rem 1.25rem;
  cursor: pointer;
}

.modal-drivertrainschedule {
  height: 50%;
}

.map-popup-click-select.maplibregl-popup-anchor-bottom .maplibregl-popup-tip {
  border-top-color: var(--secondary);
}
.map-popup-click-select.maplibregl-popup-anchor-top .maplibregl-popup-tip {
  border-bottom-color: var(--secondary);
}
.map-popup-click-select.maplibregl-popup-anchor-right .maplibregl-popup-tip {
  border-left-color: var(--secondary);
}
.map-popup-click-select.maplibregl-popup-anchor-left .maplibregl-popup-tip {
  border-right-color: var(--secondary);
}
.map-popup-click-select .maplibregl-popup-content {
  background: var(--secondary);
  border-radius: 4px;
  padding: 0.5rem;
  border: none;
  box-shadow: unset;
  width: 10rem;
}
.map-popup-click-select .details {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  color: var(--white);
}
.map-popup-click-select .details .details-track {
  text-align: center;
  font-size: 1.25rem;
  font-weight: bold;
}
.map-popup-click-select .details .details-track small {
  display: block;
  font-weight: lighter;
  font-size: 0.6rem;
  line-height: 0.6rem;
}
.map-popup-click-select .details .details-line {
  font-size: 0.7rem;
  font-weight: lighter;
  line-height: 0.8rem;
  overflow: hidden;
}
.map-popup-click-select .actions {
  display: flex;
  gap: 0.5rem;
  justify-content: space-between;
}
.map-popup-click-select .actions button {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-grow: 1;
  font-size: 1.5rem;
  padding: 0.25rem 0.5rem;
}

.pathfinding-details .place {
  position: relative;
}
.pathfinding-details .place i {
  z-index: 1;
}
.pathfinding-details .place .hover {
  transition: 0.2s;
  border-radius: 4px;
  cursor: pointer;
}
.pathfinding-details .place .hover:hover {
  background-color: var(--coolgray1);
}
.pathfinding-details .place .btn,
.pathfinding-details .place .btn:hover {
  border: none;
  background-color: transparent;
}
.pathfinding-details .place:not(.via):last-child::after {
  position: absolute;
  margin-bottom: -2rem;
  z-index: 0;
  display: block;
  width: 1rem;
  height: 2.5rem;
  content: '';
  background-color: var(--white);
}
.pathfinding-details .place.via {
  display: flex;
  align-items: center;
  margin-bottom: 0rem;
  border-radius: 4px;
  padding: 0 0.25rem;
}
.pathfinding-details .place.via .ring {
  position: relative;
  display: block;
  height: 1rem;
  width: 1rem;
  border-radius: 50%;
  background-color: var(--white);
  border: 2px dotted var(--cyan);
}
.pathfinding-details .place.via .default-durations-button {
  display: none;
  align-items: center;
}
.pathfinding-details .place.via .default-durations-button button {
  display: flex;
  align-items: center;
  font-weight: 400;
  background: none;
  border: unset;
  font-size: 0.7rem;
  border-radius: 4px;
}
.pathfinding-details .place.via .default-durations-button button:hover {
  background-color: var(--primary);
  color: var(--white);
}
.pathfinding-details .place.via .stoptime {
  padding: 0rem 0.5rem;
  font-size: 0.8rem;
  font-weight: 500;
  border-radius: 4px;
  background-color: var(--coolgray1);
  cursor: pointer;
}
.pathfinding-details .place.via .stoptime:hover {
  background-color: var(--coolgray3);
}
.pathfinding-details .place.via .form-control {
  width: 7rem;
}
.pathfinding-details .place.via:hover {
  background-color: var(--coolgray1);
}
.pathfinding-details .place.via:hover .default-durations-button {
  display: flex;
}
.pathfinding-details .place.via.is-a-stop .ring {
  border: 3px solid var(--cyan);
}
.pathfinding-details .place.via.is-a-stop .stoptime {
  background-color: var(--cyan);
  color: var(--white);
}

.pathfinding-main-container {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 1rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--coolgray1);
}
.pathfinding-main-container .pathfinding-subsection,
.pathfinding-main-container .missing-params,
.pathfinding-main-container .pathfinding-error,
.pathfinding-main-container .pathfinding-done {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.pathfinding-main-container .pathfinding-done .title {
  color: var(--success);
}
.pathfinding-main-container .pathfinding-done .details {
  margin-left: 0.25rem;
  font-weight: 400;
}
.pathfinding-main-container .pathfinding-error {
  color: var(--danger);
}
.pathfinding-main-container .missing-params {
  color: var(--warning);
}
.pathfinding-main-container .pathfinding-in-progress {
  border-radius: 4px;
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  min-height: 100%;
  background-color: var(--modal-gray-transparent-background);
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.pathfinding-main-container .pathfinding-in-progress .pathfinding-in-progress-card {
  width: 50%;
  border-radius: 4px;
  padding: 1rem 1.5rem;
  background: var(--white);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.pathfinding-main-container
  .pathfinding-in-progress
  .pathfinding-in-progress-card
  .pathfinding-in-progress-title-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.pathfinding-main-container
  .pathfinding-in-progress
  .pathfinding-in-progress-card
  .pathfinding-in-progress-title-container
  .pathfinding-in-progress-title {
  margin: 0 1rem;
}

.station-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: var(--white);
  flex-grow: 1;
  cursor: pointer;
  border: 2px solid var(--coolgray1);
  padding-top: 0.15rem;
  border-radius: 4px;
  transition: 0.2s;
}
.station-card.fixed-height {
  min-height: 4rem;
}
.station-card:hover {
  border-color: var(--coolgray9);
}
.station-card .station-card-head {
  display: flex;
  align-items: baseline;
  padding: 0 0.25rem;
  height: 1.5rem;
}
.station-card .station-card-head .station-card-code {
  font-size: 0.8rem;
  width: 2.25rem;
}
.station-card .station-card-head .station-card-name {
  overflow: hidden;
  white-space: nowrap;
  font-size: 1.1rem;
}
.station-card .station-card-head .station-card-ch {
  margin-left: auto;
  font-weight: 500;
  font-size: 0.8rem;
}
.station-card .station-card-localization {
  display: flex;
  align-items: baseline;
  position: relative;
  padding: 0 0.25rem 0 2.5rem;
  height: 1rem;
  line-height: 0.8rem;
  color: var(--coolgray9);
  gap: 0.25rem;
}
.station-card .station-card-localization .station-card-city {
  font-size: 0.7rem;
}
.station-card .station-card-localization .station-card-department {
  text-transform: uppercase;
  font-size: 0.6rem;
}
.station-card .station-card-localization .station-card-separator {
  font-size: 0.6rem;
}
.station-card .station-card-localization .station-card-region {
  text-transform: uppercase;
  font-size: 0.6rem;
}
.station-card .station-card-localization .station-card-uic {
  margin-left: auto;
  font-size: 0.6rem;
  color: var(--primary);
}
.station-card .station-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.25rem;
  font-size: 0.7rem;
  background-color: var(--coolgray1);
  border-radius: 0 0 4px 4px;
  height: 1rem;
}
.station-card .station-card-footer .station-card-line {
  overflow: hidden;
  white-space: nowrap;
  color: var(--coolgray9);
}
.station-card .station-card-footer .station-card-pk {
  overflow: hidden;
  white-space: nowrap;
  margin-left: auto;
  margin-right: 0.25rem;
  font-size: 0.6rem;
}
.station-card .station-card-footer .station-card-line-number {
  font-size: 0.6rem;
  color: var(--purple);
}

.informations-modal {
  position: relative;
  max-height: 75vh;
}
.informations-modal-version {
  font-size: small;
}
.informations-modal .informations-modal-container {
  position: relative;
  height: 35rem;
}
.informations-modal .informations-modal-container .license-attributions {
  position: relative;
  background-color: var(--coolgray1);
  padding: 0.5rem;
  border-radius: 4px;
  height: calc(100% - 3.8rem);
  overflow: auto;
}
.informations-modal .informations-modal-container .license-attributions a[href^='http'] h3,
.informations-modal .informations-modal-container .license-attributions a[href^='http'] i,
.informations-modal .informations-modal-container .license-attributions a[href^='http'] .small {
  color: var(--primary);
}
.informations-modal .informations-modal-container .license-attributions a[href^='http']:hover h3,
.informations-modal .informations-modal-container .license-attributions a[href^='http']:hover i,
.informations-modal
  .informations-modal-container
  .license-attributions
  a[href^='http']:hover
  .small {
  color: var(--purple);
}

.stdcm-map-noSimulation {
  height: 85vh;
}
.stdcm-map-withSimulation {
  height: 40vh;
}

.stdcm-allowance-icon {
  max-width: fit-content;
}

/* INTERVALS EDITOR */
.intervals-editor-form {
  display: flex;
  width: 100%;
}

.intervals-editor-select-form {
  width: 20em;
  padding-right: 1em;
}

.intervals-editor-form-column {
  width: 20em;
  padding-right: 1em;
}

.intervals-editor-form-input {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.debounced-number-input {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

/*# sourceMappingURL=storybook.css.map */