/* Style sheet for kolomna-trams.ru v.3 (route) */
/* by Dmitry Balabanov */

:root {
	--width-expand-to: 50px;
	--screen-footer-margin: 8px;
	--departure-stops-y: 0px;
	--departure-stops-bottom: 0px;
	--departure-height: 106px;
	--popup-submenu-height: 108px;
}


/* Wrapper for page content */
.trams-v3-route-wrapper {
	width: 100%;
	display: flex;
	flex-direction: row;
}

@media only screen and (max-width: 1100px) {
	.trams-v3-route-wrapper {
		flex-direction: column;
	}
}


/* Tram map container */
.trams-v3-route-explore {
	width: 100%;
	display: flex;
	justify-content: flex-start;
	flex-direction: column;
	align-items: center;
	padding: 0 30px;
	padding-top: 15px;
	padding-bottom: 35px;
}


/* Adaptive design, left menu */
.ada-map-block {
	width: calc(100vw - 345px);
	overflow-y: auto;
}

@media only screen and (max-width: 1100px) {
	.trams-v3-route-explore {
		padding: 0 15px;
		padding-top: 15px;
		padding-bottom: 35px;
	}
	.ada-map-block {
		width: 100%;
		padding-bottom: 300px;
	}
}

@media only screen and (max-width: 500px) {
	.trams-v3-block-scrolling .trams-v3-route-explore {
		padding-left: 5px;
		padding-right: 5px;
	}
}

@media only screen and (max-width: 445px) {
	.trams-v3-route-explore {
		padding-top: 10px;
	}
}

@media only screen and (max-width: 400px) {
	.trams-v3-route-explore {
		padding-top: 0px;
	}
}

@media only screen and (max-width: 500px) {
	.trams-v3-block-scrolling {
		max-height: 100%;
		overflow-y: hidden;
		position: fixed;
		width: 100%; /* Comment. Added for map glitch fix. */
	}
}

/* Inner for explore tab*/
.trams-v3-route-explore-tab-inner {
    height: 100%;
}


.trams-v3-route-lines-wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;

    margin-top: 15px;
    max-width: 1200px;
}


/* Inner for LINES tab */
.trams-v3-route-lines-inner	{
	max-width: 1500px;
	margin-top: 30px;
}

/* Make lines in several columns */
@media only screen and (min-width: 1000px) {
	.trams-v3-route-lines-inner	{
		columns: 2;
	}
}


/* Column with 5 tram lines */
.trams-v3-route-linecard {
	padding: 0 20px;
}

@media only screen and (max-width: 1200px) {
	.trams-v3-route-linecard {
        padding: 0 15px;
    }
}

@media only screen and (max-width: 1000px) {
	.trams-v3-route-linecard {
        padding: 0 10px;
    }
}


/* Card with line info */
.trams-v3-route-linecard {
	padding-bottom: 30px;
	break-inside: avoid;
}

@media only screen and (max-width: 1000px) {
	.trams-v3-route-linecard {
        padding-bottom: 40px;
    }
}


/* Line header (tram icon & number */
.trams-v3-route-linecard-header {
	display: flex;
	flex-direction: row;
}


/* Tram icon */
.trams-v3-route-linecard-icon {
	width: 29px;
    margin-right: 8px;
    filter: brightness(0);
    transform: translateY(-2px);
}


/* Line number (big digit) */
.trams-v3-route-linecard-number {
	color: #000;
	font-size: 35px;
	font-weight: 600;

	font-family: var(--trams-sans-font-family);
    line-height: 1.5;
	margin: 0;
}


/* Set of tram stops */
.trams-v3-route-linecard-description {
	font-family: var(--trams-serif-font-family);
    font-size: var(--trams-tablet-text-font-size);
    font-weight: 400;
    word-wrap: break-word;
    word-break: normal;
    line-height: 1.3;
}


.trams-v3-route-linecard-description p {
    margin-bottom: 0;
    margin-top: 0.1em;
}

.trams-v3-route-linecard-description i {
    color: var(--trams-light-gray); 
	font-weight: 300;
}


.trams-v3-route-jpg-map {
	display: block;
	margin: 0 auto;
	width: 60%;
	margin-top: 15px;
}

@media only screen and (max-width: 1000px) {
	.trams-v3-route-jpg-map {
		width: 90%;
	}
}


/* Inner for STOPS tab */
.trams-v3-route-stops-inner	{
	max-width: 1400px;
}


/* Stops group */
.trams-v3-route-stops-group {
	margin-bottom: 30px;
}


/* Stops group title */
.trams-v3-route-stops-title {
	font-family: var(--trams-sans-font-family);
	font-weight: 600;
	font-size: 30px;
}


/* Tram stop name */
.trams-v3-route-stops-list a {
	font-family: var(--trams-serif-font-family);
	font-weight: 500;
	font-size: var(--trams-desktop-text-font-size);
	margin-right: 20px;
	white-space: nowrap;
	line-height: var(--trams-line-height-link);

	color: var(--trams-link-color);
	border-bottom: 1px dashed var(--trams-link-underline-color);
	cursor: pointer;
}

@media (hover: hover) {
	.trams-v3-route-stops-list a:hover {
		color: var(--trams-link-hover-color);
		border-bottom: 1px dashed var(--trams-link-hover-underline-color);
		cursor: pointer;
	}
}

@media (hover: none) {
	.trams-v3-route-stops-list a:active {
		color: var(--trams-link-hover-color);
		border-bottom: 1px dashed var(--trams-link-hover-underline-color);
		cursor: pointer;
	}
}


@media only screen and (max-width: 800px) {
	.trams-v3-route-stops-list a {
		font-size: var(--trams-tablet-text-font-size);
	}
}


/* Inner for MAP tab*/
.trams-v3-route-map-tab-inner {
	overflow-y: auto;
}


.trams-v3-route-visit-inner	{
	columns: 2;
	margin-top: 45px;
}

/* Make visits in several columns */
@media only screen and (max-width: 1000px) {
	.trams-v3-route-visit-inner	{
		columns: 1;
	}
}


/* Place to visit (whole item) */
.trams-v3-route-visit-item {
	margin: 0 15px;
	margin-bottom: 24px;

	break-inside: avoid-column;
}


/* Place to visit (header) */
.trams-v3-route-visit-item p {
	font-size: var(--trams-tablet-title-font-size);
	line-height: var(--trams-line-height-title);
	margin-top: 0;

	margin-bottom: 7px;
}


/* Map wrapper */
.trams-v3-route-map-wrapper {
	width: 100%;
	height: 100vh;
}


/* Tram scheme */
.trams-v3-img-fullscreen {
	margin: 0 auto;
	display: block;
}


/* Tram schedule */
.trams-v3-route-bar {
	border: #ccc 1px solid;
	border-radius: 8px;
	box-shadow: 0px 0px 10px #ddd;
	width: 100%;
	background-color: var(--trams-pop-up-color);

	position: fixed;
    right: 5px;
	top: 100px;

	overflow: hidden;
	transition: height .5s ease 0s;

	z-index: 4;
}


/* Adaptive design, right menu */
.ada-bar-block {
	transform-origin: center right;
	width: 330px;
	overflow: visible;
}

@media only screen and (max-width: 1100px) {
	.trams-v3-route-bar {
		border-top: #888 1px solid;
		border-right: #888 1px solid;
		border-left: #888 1px solid;

		position: fixed;
		bottom: 0;
		top: auto;

		max-height: 70vh;
	}
	.ada-bar-block {
		transform-origin: center bottom;
		transform: scalex(1);
		transform: scaley(0);
		width: 330px;
	}
}

@media only screen and (max-width: 500px) {
	.trams-v3-route-bar {
		border-top: #888 1px solid;

		position: fixed;
		bottom: 0;
		right: 0;

		box-shadow: 0px -1px 50px 5px #77777745;
		border-bottom-left-radius: 0px;
		border-bottom-right-radius: 0px;
	}
	.ada-bar-block {
		transform-origin: center bottom;
		transform: scalex(1);
		transform: scaley(0);
		width: 100%;
	}
}


/* Auto-generated code by JS code*/
.trams-v3-js-generate {
	transform-origin: center top;

	margin: 0 15px;
    margin-bottom: 10px;

	overflow: visible;
}


/* Cross (close bar) */
.trams-v3-route-bar-close {
    width: 22px;
    height: 22px;
    opacity: 0.3;
    cursor: pointer;
    display: inline-block;
    position: relative;
    background-color: #666;
    border-radius: 50%;
    margin-left: 10px;
}

.trams-v3-route-bar-close:before, .trams-v3-route-bar-close:after {
    position: absolute;
    left: 10px;
    top: 3px;
    content: ' ';
    height: 17px;
    width: 2px;
    background-color: #ddd;
}

.trams-v3-route-bar-close:before {
	transform: rotate(45deg);
}

.trams-v3-route-bar-close:after {
	transform: rotate(-45deg);
}

@media (hover: hover) {
	.trams-v3-route-bar-close:hover {
		opacity: .7;
	}
}

@media (hover: none) {
	.trams-v3-route-bar-close {
		width: 26px;
		height: 26px;
		margin-left: 12px;
	}
	.trams-v3-route-bar-close:before, .trams-v3-route-bar-close:after {
		left: 12px;
		top: 4px;
		height: 18px;
	}
	.trams-v3-route-bar-close:active {
		opacity: .7;
	}
}

/* Cross (close bar) */
.trams-v3-route-bar-more {
    width: 22px;
    height: 22px;
    opacity: 0.3;
    cursor: pointer;
    display: inline-block;
    position: relative;
    background-color: #666;
    border-radius: 50%;
}

.trams-v3-route-bar-more[data-opened="true"] {
	opacity: .7;
}

.trams-v3-route-bar-more-dot {
	top: 9.5px;
}

@media (hover: hover) {
	.trams-v3-route-bar-more:hover {
		opacity: .7;
	}
}

@media (hover: none) {
	.trams-v3-route-bar-more {
		width: 26px;
		height: 26px;
	}
	.trams-v3-route-bar-more:active {
		opacity: .7;
	}
	.trams-v3-route-bar-more-dot {
		top: 11px;
	}
}

.trams-v3-route-bar-more-dot,
.trams-v3-route-bar-more-dot::before,
.trams-v3-route-bar-more-dot::after {
	width: 4px;
    height: 4px;
    background: #ddd;
    border-radius: 50%;
	position: relative;
	left: calc(50% - 2px);
}

.trams-v3-route-bar-more-dot::before,
.trams-v3-route-bar-more-dot::after {
	content: ' ';
	display: block;
	position: absolute;
}

.trams-v3-route-bar-more-dot::before {
	left: 0;
	transform: translateX(-6px);
}

.trams-v3-route-bar-more-dot::after {
	left: 0;
	transform: translateX(6px);
}

.trams-v3-route-bar-more-menu {
	font-family: var(--trams-sans-font-family);
	border-radius: 5px;
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.15);
    top: -5px;
	border: 1px solid #ddd;
    right: 70px;
    z-index: 1;
    transform-origin: 90% 10%;
    position: absolute;
    transition: all .25s cubic-bezier(.55,.08,.06,.97);
}
@media only screen and (max-width: 1100px) {
	.trams-v3-route-bar-more-menu {
		bottom: 5px;
		top: auto;
		transform-origin: 90% 90%;
	}
}
@media (hover: none) {
	.trams-v3-route-bar-more-menu {
		right: 78px;
	}
}

.trams-v3-route-bar-more-submenu {
	visibility: hidden;
	overflow-y: hidden;
	opacity: .7;
	height: 36px;
	font-family: var(--trams-sans-font-family);
	border-radius: 5px;
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.15);
    left: 0;
    top: 0;
	border: 1px solid #ddd;
    z-index: 2;
    transform-origin: 90% 10%;
    position: absolute;
    transition: all .25s cubic-bezier(.55,.08,.06,.97);
}

.trams-v3-route-bar-more-submenu[data-expanded="true"] {
	visibility: visible;
	opacity: 1;
	height: var(--popup-submenu-height);
	transform: translateY(-18px) scale(1.05);
}

.trams-v3-route-bar-more-menu[data-opened="false"] {
	transform: scale(.25);
	opacity: 0;
	visibility: hidden;
}

.trams-v3-route-bar-more-menu menu {
	border-radius: 5px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.trams-v3-route-bar-more-menu menu li {
	padding: 3px 8px;
    white-space: nowrap;
    border-bottom: 1px solid #ccc;
    background-color: var(--trams-white);
    cursor: pointer;

	display: flex;
    flex-direction: row;
    justify-content: flex-start;
	align-items: center;

	padding: 9px 7px;
	position: relative;
}

.trams-v3-route-bar-more-menu menu li:first-child {
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}
.trams-v3-route-bar-more-menu menu li:last-child {
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	border-bottom: none;
}

@media (hover: hover) {
	.trams-v3-route-bar-more-menu menu li:hover {
		background-color: rgb(225, 231, 246);
	}
}
@media (hover: none) {
	.trams-v3-route-bar-more-menu menu li:active {
		background-color: rgb(225, 231, 246);
	}
}

.trams-v3-route-bar-more-item-expandable {
	height: 1em;
	width: 20px;
}
.trams-v3-route-bar-more-item-expandable img {
	height: 1em;
	position: absolute;
	transition: transform .25s cubic-bezier(.55,.08,.06,.97);
}

.trams-v3-route-bar-more-submenu[data-expanded="true"] .trams-v3-route-bar-more-item-expandable img {
	transform: rotateZ(90deg);
}

.trams-v3-route-bar-more-item-body {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	width: calc(100% - 20px);
}

.trams-v3-route-bar-more-item-body div {
	line-height: 1.15;
}

.trams-v3-route-bar-more-item-icon {
	height: 1em;
	margin-left: 1em;
	margin-right: .2em;
}

.trams-v3-route-bar-more-item-icon img {
	height: 100%;
}


/* Back (arrow bar) */
.trams-v3-route-bar-back {
	position: absolute;
	left: 15px;
	top: 14px;
	width: 27px;
	height: 27px;
	opacity: 0.3;

	cursor: pointer;

	z-index: 15;
}

@media (hover: hover) {
	.trams-v3-route-bar-back:hover {
		opacity: 1;
	}
}

@media (hover: none) {
	.trams-v3-route-bar-back:active {
		opacity: 1;
	}
}

.trams-v3-route-bar-back:before, .trams-v3-route-bar-back:after {
	position: absolute;
	left: 5px;
	content: ' ';
	height: 15px;
	width: 2px;
	background-color: var(--trams-dark-gray);
}

.trams-v3-route-bar-back:before {
	transform: rotate(40deg);
}

.trams-v3-route-bar-back:after {
	transform: rotate(-40deg);
	top: 10px
}


/* Stop name */
.trams-v3-route-bar-title, .trams-v3-route-bar-title-shadow {
	font-family: var(--trams-sans-font-family);
	line-height: var(--trams-line-height-title);
}

.trams-v3-route-bar-title {
	margin-top: 15px;
	margin-bottom: 10px;
	font-size: var(--trams-desktop-article-font-size);
	font-weight: 700;
	max-width: calc(100% - 54px);
}
@media (hover: none) {
	.trams-v3-route-bar-title {
		max-width: calc(100% - 60px);
	}
}

.trams-v3-route-bar-title-shadow {
	color: #666;
	margin-top: 8px;
	margin-bottom: 5px;
	font-size: var(--trams-tablet-text-font-size);
	font-weight: 600;
}

.trams-v3-route-bar-under-title {
	font-family: var(--trams-sans-font-family);
	font-size: var(--trams-desktop-subscription-font-size);
    margin-top: 0;
    font-weight: 400;
	margin-bottom: 10px;

	line-height: 1.2;
}


/* Info about stop (routes and directions) */
.trams-v3-route-bar-stopinfo {
	margin-top: 10px;
}


.trams-v3-route-bar-direction {
	display: block;
	margin-bottom: 4px;

	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}


.trams-v3-route-bar-direction i {
	color: var(--trams-dark-gray);
	border-bottom: 1px dashed rgba(51,51,51,.4);
	cursor: pointer;
}

@media (hover: hover) {
	.trams-v3-route-bar-direction i:hover {
		color: #933;
		border-bottom: 1px dashed rgba(153,51,51,.4);
		cursor: pointer;
	}
}

@media (hover: none) {
	.trams-v3-route-bar-direction i:active {
		color: #933;
		border-bottom: 1px dashed rgba(153,51,51,.4);
		cursor: pointer;
	}
}


/* Set of routes departs from the stop */
.trams-v3-route-bar-routes {
	display: flex;
	flex-direction: row;

	font-size: var(--trams-desktop-text-font-size);
	font-weight: 700;
	line-height: 1.4;
	font-family: var(--trams-sans-font-family);
}


/* Box with number of line */
.trams-v3-route-bar-routebox {
	width: 28px;
	height: 28px;
	color: #111;
	background: #ccc;
	text-align: center;
	margin-right: 6px;
	white-space: nowrap;

	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;

	cursor: pointer;
}
.trams-v3-route-bar-routebox[data-alert="true"] {
	background: linear-gradient(135deg, #ccc 25%, #ccc 70%, #e07b1b);
}

@media (hover: hover) {
	.trams-v3-route-bar-routebox:hover {
		background: #bbb;
	}
}

@media (hover: none) {
	.trams-v3-route-bar-routebox:active {
		background: #bbb;
	}
}


/* Buttons block in bar */
.trams-v3-route-bar-buttons {
	width: 100%;
	margin-top: 15px;
}

.trams-v3-route-bar-buttons div {
	width: 100%;

	border-top: 1px solid #ccc;

	display: flex;
    flex-wrap: wrap;
}

@media only screen and (max-width: 550px) {
	.trams-v3-route-bar-buttons div {
		display: flex;
		justify-content: center;
	}
}


/* Dashed link in bar */
.trams-v3-route-bar-button {
	color: var(--trams-link-color);
	font-family: var(--trams-sans-font-family);
	cursor: pointer;
	font-weight: 500;
    padding: 6px 5px;

	border-right: 1px solid #ccc;

	text-align: center;

	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;

	line-height: 1.3;

	display: flex;
    align-items: center;
    justify-content: center;
}

@media only screen and (max-width: 1100px) {
	.trams-v3-route-bar-button {
		padding: 8px 5px;
	}
}

@media only screen and (max-width: 550px) {
	.trams-v3-route-bar-button {
		padding-bottom: var(--screen-footer-margin);
	}
}

.trams-v3-route-bar-button:last-child {
	border-right: none;
}

@media (hover: hover) {
	.trams-v3-route-bar-button:hover {
		background-color: #f4f4f4;
	}
}

@media (hover: none) {
	.trams-v3-route-bar-button:active {
		background-color: #f4f4f4;
	}
}


.trams-v3-route-bar-grey-button {
	color: #777;
	border-bottom: 1px dashed rgba(102,102,102,.4);
	cursor: pointer;
	line-height: 1.4;

	margin-right: 15px;
	margin-top: 5px;

	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

@media (hover: hover) {
	.trams-v3-route-bar-grey-button:hover {
		color: #000;
		border-bottom: 1px dashed rgba(51,51,51,.4);
	}
}

@media (hover: none) {
	.trams-v3-route-bar-grey-button:active {
		color: #000;
		border-bottom: 1px dashed rgba(51,51,51,.4);
	}
}

.trams-v3-route-bar-departure-filter {
	display: flex;
	margin-bottom: 8px;
	padding-bottom: 8px;
	border-bottom: 1px solid #ccc;
}

.trams-v3-route-bar-departure-filter-routebox {
	font-family: var(--trams-sans-font-family);

	width: 31px;
    height: 25px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--trams-dark-gray);
    background-color: #ddd;
    text-align: center;
    margin-right: 0px;
    white-space: nowrap;
	border-right: 1px solid #eeeeee;
	/* border-top: 1px solid #aaa;
	border-bottom: 1px solid #aaa; */
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;

	cursor: pointer;
}

@media (hover: hover) {
	.trams-v3-route-bar-departure-filter-routebox:hover {
		background-color: #ccc;
	}
}

@media (hover: none) {
	.trams-v3-route-bar-departure-filter-routebox:active {
		background-color: #ccc;
	}
}

.trams-v3-route-bar-departure-filter-routebox[data-filter="selected"] {
	font-family: var(--trams-sans-font-family);

	width: 31px;
    height: 25px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    color: #fff;
    background-color: var(--trams-dark-gray);
    text-align: center;
    margin-right: 0px;
    white-space: nowrap;

	cursor: pointer;
}

.trams-v3-route-bar-departure-filter-routebox:first-child {
	border-top-left-radius: 35px;
	border-bottom-left-radius: 35px;
}

.trams-v3-route-bar-departure-filter-routebox:last-child {
	border-top-right-radius: 35px;
	border-bottom-right-radius: 35px;
	border-right: none;
}

.trams-v3-route-bar-departure-filter-tram {
	height: 24px;
	margin-right: 7px;
}

.trams-v3-route-bar-departure-filter-clear {
	font-family: var(--trams-sans-font-family);

	width: 25px;
    height: 25px;
	border-radius: 20px;
    font-size: 28px;
    font-weight: 700;
    line-height: .93;
    color: var(--trams-dark-gray);
    background-color: #ddd;
    text-align: center;
    margin-left: 10px;
    white-space: nowrap;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;

	cursor: pointer;
}

@media (hover: hover) {
	.trams-v3-route-bar-departure-filter-clear:hover {
		background-color: #ccc;
	}
}

@media (hover: none) {
	.trams-v3-route-bar-departure-filter-clear:active {
		background-color: #ccc;
	}
}

.trams-v3-route-bar-departure-status {
	line-height: 1.15;
	padding-top: .25em;
    padding-bottom: .15em;
}
.trams-v3-route-bar-departure-status-lateness {
	margin-right: .5em;
}
.trams-v3-route-bar-departure-status[data-status="scheduled"] .trams-v3-route-bar-departure-status-lateness {
	color: rgb(119, 119, 119);
}
.trams-v3-route-bar-departure-status[data-status="intime"] .trams-v3-route-bar-departure-status-lateness {
	color: rgb(46 124 47);
}
.trams-v3-route-bar-departure-status[data-status="delayed"] .trams-v3-route-bar-departure-status-lateness {
	color: rgb(163 16 16);
}
.trams-v3-route-bar-departure-status[data-status="early"] .trams-v3-route-bar-departure-status-lateness {
	color: rgb(187 110 43);
}
.trams-v3-route-bar-departure[data-departured="true"] .trams-v3-route-bar-departure-status span {
    color: #aaa!important;
}
.trams-v3-route-bar-departure-status-schedule-time {
	text-decoration: line-through;
}
.trams-v3-route-bar-departure-status-schedule-time.non-empty {
	margin-right: .5em;
}

.trams-v3-route-bar-departure-status .schedule-time {
	text-decoration: line-through;
	color: black;
	margin-left: .5em;
}
.trams-v3-route-bar-departure[data-departured="true"] .trams-v3-route-bar-departure-status .schedule-time {
	color: #aaa!important;
}
.trams-v3-route-bar-departure[data-departured="true"] .trams-v3-route-bar-departure-status-icons {
	filter: opacity(0.5);
}

.trams-v3-route-bar-departure-status-icons span[data-crowded] {
	display: inline-block;
	height: 1em;
    width: 1em;
    background-image: url(../../assets/images/icons/crowded.svg);
    background-size: cover;
    transform: translateY(2px);
}
.trams-v3-route-bar-departure-status-icons span[data-crowded="1"] {
	background-position-x: 25%;
}
.trams-v3-route-bar-departure-status-icons span[data-crowded="2"] {
	background-position-x: 50%;
}
.trams-v3-route-bar-departure-status-icons span[data-crowded="3"] {
	background-position-x: 75%;
}
.trams-v3-route-bar-departure-status-icons span[data-crowded="4"] {
	background-position-x: 100%;
}


.trams-v3-route-bar-departures {
	overflow-y: auto;
	height: 50vh;
	padding-right: 5px;
	max-height: 42vh;

	transition: filter .35s ease-out;
}

#trams-v3-pop-up-title[data-depstops-display="true"] {
	transition: filter .35s ease-out;
}

#route-map[data-depstops-display="true"] {
	transition: filter .35s ease-out;
}

@media only screen and (max-width: 1100px) {
	.trams-v3-route-bar-departures {
    	height: 30vh;
	}
}

@media only screen and (max-width: 650px) {
	.trams-v3-route-bar-departures[data-depstops-display="true"] {
    	filter: blur(3px);
	}

	#trams-v3-pop-up-title[data-depstops-display="true"] {
    	filter: blur(3px);
	}

	#route-map[data-depstops-display="true"] {
    	filter: blur(3px);
	}
}


.trams-v3-route-bar-departures-notrams {
	color: #000;
    font-size: 18px;
    text-align: center;
}


.trams-v3-route-bar-departure {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;

	padding: 5px 5px;

	font-family: var(--trams-sans-font-family);

	border-bottom: 1px solid #ddd;

	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;

	cursor: pointer;
}

@media only screen and (min-width: 650px) {
	.trams-v3-route-bar-departure[data-departure-selected="true"] {
		background: linear-gradient(90deg, #f2efe8, #e6f1ed);
		border: 1px solid black;
		border-radius: 8px;
	}
	
	.trams-v3-route-bar-departure[data-departure-selected="true"]:hover {
		background: linear-gradient(90deg, #dfdcd7, #d7e0dd);
	}

	.trams-v3-route-bar-departure[data-departure-selected="true"]:hover::after,
	.trams-v3-route-bar-departure[data-departure-selected="true"]:hover::before {
		display: block;
		position: absolute;
		left: 50%;
		content: ' ';
		height: 25px;
		width: 2px;
		background-color: var(--trams-dark-gray);
	}

	.trams-v3-route-bar-departure[data-departure-selected="true"]:hover::before {
		transform: rotate(45deg);
	}

	.trams-v3-route-bar-departure[data-departure-selected="true"]:hover::after {
		transform: rotate(-45deg);
	}
}


.trams-v3-route-bar-departure:last-child {
	border-bottom: none;
}

@media (hover: hover) {
	.trams-v3-route-bar-departure:hover {
		background-color: #eee;
	}
}

@media (hover: none) {
	.trams-v3-route-bar-departure:active {
		background-color: #eee;
	}
}


.trams-v3-route-bar-departure-route {
	width: 25px;
	min-width: 25px;
	height: 25px;
	font-family: var(--trams-sans-font-family);
	font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
	color: #111;
	background-color: #ccc;
	text-align: center;
	margin-right: 5px;
	white-space: nowrap;
}

.trams-v3-route-bar-departure[data-departured="true"] .trams-v3-route-bar-departure-route {
	color: #aaa;
	background-color: #ddd;
}


.trams-v3-route-bar-departure-terminal {
	font-size: 16px;
	color: #000;

	margin-top: 5px;

	line-height: 1;
}

.trams-v3-route-bar-departure[data-departured="true"] .trams-v3-route-bar-departure-terminal {
	color: #aaa;
}


.trams-v3-route-bar-departure-time {
	font-size: 24px;
	line-height: 1;
	font-weight: 500;
	text-align: right;
}

.trams-v3-route-bar-departure[data-departured="true"] .trams-v3-route-bar-departure-time {
	color: #aaa;
}


.trams-v3-route-bar-departure-timelabel {
	font-size: 14px;
	line-height: 1;
	text-align: right;

	color: #777;
}

.trams-v3-route-bar-departure[data-departured="true"] .trams-v3-route-bar-departure-timelabel {
	color: #aaa;
}


.trams-v3-route-bar-departure-lineinfo {
	display: flex;
	flex-direction: row;
}

.trams-v3-route-bar-timetable-item-head {
    display: flex;
    flex-direction: row;
	margin-bottom: .5em;
}

.trams-v3-route-bar-timetable-item-head .tram-number {
    font-family: var(--trams-sans-font-family);
    font-weight: 500;
    letter-spacing: -.05em;
    line-height: 1.35;
    font-size: 28px;
    width: 25px;
    min-width: 25px;
    height: 20px;
    color: #333;
    text-align: center;
	transform: translateX(-3px);
}

.trams-v3-route-bar-timetable-item-head .tram-number[data-twoletters="true"] {
	font-variant-numeric: proportional-nums;
}

.trams-v3-route-bar-timetable-item-head .tram-terminal {
    font-family: var(--trams-sans-font-family);
    line-height: 1.25;
    color: #333;
}

.trams-v3-route-bar-timetable-item-head .tram-terminal .tram-terminal-title {
    /* font-size: 18px; */
	font-weight: 600;
    font-size: var(--trams-tablet-text-font-size);
}

.trams-v3-route-bar-timetable-item-head .tram-terminal .tram-terminal-streets {
    font-weight: 400;
    font-size: 13px;
	line-height: var(--trams-line-height-title);
	/* font-style: italic; */
}

.trams-v3-route-bar-timetable-item-body {
    padding-left: 26px;
}

.trams-v3-route-bar-timetable-item-body .tt-item {
    display: flex;
    flex-direction: row;
    max-width: 100%;
    flex-wrap: wrap;
	border-bottom: 1px solid #ccc;
}

.trams-v3-route-bar-timetable-item-body .tt-item:last-child {
    border-bottom: none;
}

.trams-v3-route-bar-timetable-item-body .tt-item .tt-item-plain {
    width: 100%;
}

.trams-v3-route-bar-timetable-item-body .tt-addon {
    font-family: var(--trams-sans-font-family);
    font-size: 14px;
    line-height: 1.15;
    background-color: #eee;
}
.trams-v3-route-bar-timetable-item-body .tt-addon div {
    padding: 4px 8px;
}
.trams-v3-route-bar-timetable-item-body .tt-addon .trams-v3-alert-blue {
    color: rgb(0, 128, 255);
}

.trams-v3-route-bar-timetable-off-peak {
	font-family: var(--trams-sans-font-family);
    font-size: 14px;
    color: #777;
    text-align: center;
}

.trams-v3-route-bar-timetable-tabs {
    display: flex;
    flex-direction: row;
	margin-bottom: 5px;
}

.trams-v3-route-bar-timetable-tabs div {
    font-family: var(--trams-sans-font-family);
    font-size: 16px;
    width: 100%;
    text-align: center;
	padding: 2px 0;
	position: relative;
}
.trams-v3-route-bar-timetable-tabs div[data-selected="false"] {
    cursor: pointer;
    background-color: #e6e6e6;
	user-select: none;
	border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
.trams-v3-route-bar-timetable-tabs div[data-selected="false"]:hover {
    background-color: #d6d6d6;
}
.trams-v3-route-bar-timetable-tabs div[data-selected="true"] {
    font-weight: 700;
    background-color: hsla(0, 0%, 98%, 1);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.trams-v3-route-bar-timetable-tabs div:before {
    content: ' ';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: -1;
}
.trams-v3-route-bar-timetable-tabs div[data-selected="false"]:before {
    background-color: hsla(0, 0%, 98%, 1);
}
.trams-v3-route-bar-timetable-tabs div[data-selected="true"]:before {
    background-color: #e6e6e6;
}

.trams-v3-route-bar-timetable-item {
	margin-bottom: 5px;
    border-bottom: 1px solid #bbb;
}

.trams-v3-route-bar-timetable-item:last-child {
	border-bottom: none;
}

.trams-v3-route-bar-timetable-item-body .tt-item div {
    font-family: var(--trams-sans-font-family);
    font-size: 16px;
}
.trams-v3-route-bar-timetable-item-body .tt-item .tt-item-time {
    min-width: 3.1em;
	border-bottom: 1px solid #ccc;
}
.trams-v3-route-bar-timetable-item-body .tt-item .tt-item-time.bottom5 {
	border-bottom: none;
}
@media only screen and (max-width: 500px) {
	.trams-v3-route-bar-timetable-item-body .tt-item .tt-item-time {
		width: calc(100% / 8);
	}
	.trams-v3-route-bar-timetable-item-body .tt-item .tt-item-time.bottom5 {
		border-bottom: 1px solid #ccc;
	}
	.trams-v3-route-bar-timetable-item-body .tt-item .tt-item-time.bottom8 {
		border-bottom: none;
	}
}
@media only screen and (max-width: 476px) {
	.trams-v3-route-bar-timetable-item-body .tt-item .tt-item-time {
		width: calc(100% / 7);
	}
	.trams-v3-route-bar-timetable-item-body .tt-item .tt-item-time.bottom8 {
		border-bottom: 1px solid #ccc;
	}
	.trams-v3-route-bar-timetable-item-body .tt-item .tt-item-time.bottom7 {
		border-bottom: none;
	}
}
@media only screen and (max-width: 427px) {
	.trams-v3-route-bar-timetable-item-body .tt-item .tt-item-time {
		width: calc(100% / 6);
	}
	.trams-v3-route-bar-timetable-item-body .tt-item .tt-item-time.bottom7 {
		border-bottom: 1px solid #ccc;
	}
	.trams-v3-route-bar-timetable-item-body .tt-item .tt-item-time.bottom6 {
		border-bottom: none;
	}
}
@media only screen and (max-width: 376px) {
	.trams-v3-route-bar-timetable-item-body .tt-item .tt-item-time {
		width: calc(100% / 5);
	}
	.trams-v3-route-bar-timetable-item-body .tt-item .tt-item-time.bottom6 {
		border-bottom: 1px solid #ccc;
	}
	.trams-v3-route-bar-timetable-item-body .tt-item .tt-item-time.bottom5 {
		border-bottom: none;
	}
}
@media only screen and (max-width: 328px) {
	.trams-v3-route-bar-timetable-item-body .tt-item .tt-item-time {
		width: calc(100% / 4);
	}
	.trams-v3-route-bar-timetable-item-body .tt-item .tt-item-time.bottom5 {
		border-bottom: 1px solid #ccc;
	}
	.trams-v3-route-bar-timetable-item-body .tt-item .tt-item-time.bottom4 {
		border-bottom: none;
	}
}
@media only screen and (max-width: 278px) {
	.trams-v3-route-bar-timetable-item-body .tt-item .tt-item-time {
		width: calc(100% / 3);
	}
	.trams-v3-route-bar-timetable-item-body .tt-item .tt-item-time.bottom4 {
		border-bottom: 1px solid #ccc;
	}
	.trams-v3-route-bar-timetable-item-body .tt-item .tt-item-time.bottom3 {
		border-bottom: none;
	}
}
@media only screen and (max-width: 228px) {
	.trams-v3-route-bar-timetable-item-body .tt-item div {
		width: calc(100% / 2);
	}
	.trams-v3-route-bar-timetable-item-body .tt-item .tt-item-time.bottom3 {
		border-bottom: 1px solid #ccc;
	}
	.trams-v3-route-bar-timetable-item-body .tt-item .tt-item-time.bottom2 {
		border-bottom: none;
	}
}

.trams-v3-route-bar-timetable-item-body .tt-item div span {
    font-size: 14px;
    color: rgb(0, 128, 255);
}


.trams-v3-route-bar-downarrow {
	display: flex;
	flex-direction: row;
}


.trams-v3-route-bar-routeinfo {
	display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}


/* Box with number of line */
.trams-v3-route-bar-routesbox {
	padding: 0 5px;
	min-width: 29px;
	height: 28px;
	color: #111;
	background-color: #ccc;
	text-align: center;
	margin-right: 5px;
	white-space: nowrap;

	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;

	cursor: pointer;
}

@media (hover: hover) {
	.trams-v3-route-bar-routesbox:hover {
		background-color: #bbb;
	}
}

@media (hover: none) {
	.trams-v3-route-bar-routesbox:active {
		background-color: #bbb;
	}
}

.trams-v3-route-bar-distance-info {
	position: relative;
}

.trams-v3-route-bar-distance-info .substops {
	position: absolute;
    right: 105%;
    top: 0%;
    white-space: nowrap;
    background: #fff;
    z-index: 3;
    -webkit-box-shadow: 0 10px 25px rgba(0,0,0,.15);
    box-shadow: 0 10px 25px rgba(0,0,0,.15);
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -webkit-transition: all .5s cubic-bezier(.55,.08,.06,.97);
    transition: all .25s cubic-bezier(.55,.08,.06,.97);
    opacity: 0;
    visibility: hidden;
	transform-origin: right top;
    -webkit-transform: scale(.5);
    transform: scale(.5);
}

@media only screen and (max-width: 1100px) {
	.trams-v3-route-bar-distance-info .substops {
		right: auto;
		top: auto;
		transform-origin: bottom center;
		bottom: 1.5em;
	}
}

.trams-v3-route-bar-distance-info[data-visible="true"] .substops {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translate3d(0,0,0) scale(1);
    transform: translate3d(0,0,0) scale(1);

	/* backdrop-filter: blur(15px); */
    background-color: rgba(255, 255, 255, 1);
}


.substops menu {
	font-family: var(--trams-sans-font-family);
	font-size: 16px;

	list-style: none; 
	padding-left: 0; 
	margin-left: 0px; 
	margin-top: 0; 
	margin-bottom: 0;
}

.substops menu li {
	padding: 2px 6px;
	font-size: .8em;

	/* cursor: pointer; */
}

.substops menu li:first-child, .substops menu li:last-child {
	font-weight: 700;
}

/* @media (hover: hover) {
	.substops menu li:hover {
		background-color: rgba(0, 0, 0, 0.1);
	}
}

@media (hover: none) {
	.substops menu li:active {
		background-color: rgba(0, 0, 0, 0.1);
	}
} */


.trams-v3-route-linecard-alert {
	background-color: #fbeeee;
    padding: 15px;
    color: #433131;
    margin-top: 10px;
    border-radius: 15px;
}

.trams-v3-route-linecard-alert img {
	display: block;
    height: 2em;
    margin-bottom: 0.25em;
}

.trams-v3-route-linecard-alert p {
	margin-top: .75em;
	margin-bottom: .5em;
}

.trams-v3-route-departures-alert {
	background-color: #fbeeee;
    padding: 12px;
    color: #433131;
    margin-top: 10px;
    margin-bottom: 5px;
    border-radius: 12px;
	line-height: 1.15;

	font-family: var(--trams-sans-font-family);
}

.trams-v3-route-departures-alert img {
	display: block;
    height: 2em;
    margin-bottom: 0.25em;
}


/* Stops columns */
.columns-list {
	columns: 4;
}

@media only screen and (max-width: 1750px) {
	.columns-list {
		columns: 3;
	}
}

@media only screen and (max-width: 1400px) {
	.columns-list {
		columns: 2;
	}
}

@media only screen and (max-width: 665px) {
	.columns-list {
		columns: 1;
	}
}


.trams-v3-route-no-upcoming-departures {
	width: 70%;
    margin: 0 auto;
    display: block;
}

@media only screen and (max-width: 1100px) {
	.trams-v3-route-no-upcoming-departures {
		width: auto;
		height: 25vh;
	}
}


.trams-v3-route-var-direction-septum {
	display: flex;
	justify-content: space-between;
}

.trams-v3-route-var-direction-septum h3 {
	font-family: var(--trams-sans-font-family);
	line-height: 1;
	margin-bottom: 0;
	margin-top: 10px;
}

.trams-v3-route-title {
	font-family: var(--trams-serif-font-family);
	text-align: center;
	margin-top: 15px;
	margin-bottom: 35px;
	font-weight: 400;
	font-size: 28px;
	line-height: 1.3;
}

.trams-v3-voyage-title {
	display: flex;
	flex-direction: row;
	align-items: flex-end;
}

.trams-v3-route-departure-stops-wrapper {
	overflow-y: auto;
    height: 50vh;
    padding-right: 5px;
    max-height: 42vh;
}

.trams-v3-route-departure-stops-list {
	padding-left: 0;
}

.trams-v3-route-departure-stops-list li {
	font-family: var(--trams-sans-font-family);
	display: flex;
    flex-direction: row;
    justify-content: flex-start;
	align-items: baseline;
}

.trams-v3-route-departure-stops-bullet {
	background-color: white;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    border: black 3px solid;
	margin-right: 10px;
}

.trams-v3-route-departure-stops-info {
	display: flex;
    flex-direction: row;
    justify-content: space-between;
	align-items: baseline;
	width: 100%;
}

.trams-v3-route-departure-stops-bullet:after {
    content: "";
    background-color: black;
    display: block;
    width: 3px;
    height: 13px;
    position: relative;
    transform: translate(2px, 10px);
}

.trams-v3-route-departure-stops-list li:last-child .trams-v3-route-departure-stops-bullet::after {
    display: none;
}

.trams-v3-route-bar-departures-alert {
	display: flex;
    flex-direction: column;
    align-items: center;
}

.trams-v3-route-bar-departures-alert img {
	width: 70%;
}

@media only screen and (max-width: 1100px) {
	.trams-v3-route-bar-departures-alert img {
		width: 50%;
	}
}

.trams-v3-route-bar-departures-alert p {
	font-size: 16px;
	color: #333;
	font-family: var(--trams-sans-font-family);
}

.trams-v3-route-bar-departure-stops-wrapper {
	position: absolute;
	top: 10px;
	right: calc(100% + 10px);
	background-color: white;

	white-space: nowrap;
    z-index: 3;
    -webkit-box-shadow: 0 10px 25px rgba(0,0,0,.15);
    box-shadow: 0 10px 25px rgba(0,0,0,.15);
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -webkit-transition: all .5s cubic-bezier(.55,.08,.06,.97);
    transition: all .25s cubic-bezier(.55,.08,.06,.97);
	transform-origin: right;
	overflow-y: scroll;
    max-height: 30vh;
}

@media only screen and (max-width: 650px) {
	.trams-v3-route-bar-departure-stops-wrapper {
		top: var(--departure-stops-y);
		bottom: 180px;
		left: calc(50% - 134px);
		right: calc(50% - 134px);
		height: auto;

		-webkit-box-shadow: 0px 20px 20px 20px rgba(0,0,0,.15);
		box-shadow: 0px 20px 20px 20px rgba(0,0,0,.15);

		transform-origin: bottom;
		max-height: none;
	}

	.trams-v3-route-bar-departure-stops-wrapper[data-custom-height="true"] {
		top: var(--departure-custom-height)!important;
	}
}

.trams-v3-route-bar-departure-stops-wrapper menu {
	font-family: var(--trams-sans-font-family);
    font-size: 16px;
    list-style: none;
    padding-left: 0;
    margin-left: 0px;
    margin-top: 0;
    margin-bottom: 0;
}

.trams-v3-route-bar-departure-stops-wrapper menu li {
	display: flex;
    justify-content: flex-start;
	
	padding: 2px 6px;
    font-size: .8em;
	width: 100%;
	position: relative;

	-webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.trams-v3-route-bar-departure-stops-wrapper menu li .trams-v3-info {
	display: flex;
    justify-content: space-between;
	width: 100%;
}

.trams-v3-route-bar-departure-stops-wrapper menu li .trams-v3-info .trams-v3-crowded-icon {
	display: inline-block;
	height: 1em;
    width: 1em;
    background-image: url(../../assets/images/icons/crowded.svg);
    background-size: cover;
    transform: translateY(2px);
	margin-left: .25em;
}

.trams-v3-route-bar-departure-stops-wrapper menu li .trams-v3-info .trams-v3-crowded-icon[data-crowded="1"] {
	background-position-x: 25%;
}

.trams-v3-route-bar-departure-stops-wrapper menu li .trams-v3-info .trams-v3-crowded-icon[data-crowded="2"] {
	background-position-x: 50%;
}

.trams-v3-route-bar-departure-stops-wrapper menu li .trams-v3-info .trams-v3-crowded-icon[data-crowded="3"] {
	background-position-x: 75%;
}

.trams-v3-route-bar-departure-stops-wrapper menu li .trams-v3-info .trams-v3-crowded-icon[data-crowded="4"] {
	background-position-x: 100%;
}

.trams-v3-route-bar-departure-stops-wrapper menu li[data-depstop-type="departured"] .trams-v3-info .trams-v3-crowded-icon {
	filter: invert();
	-webkit-filter: invert();
}

.trams-v3-route-bar-departure-stops-wrapper menu li.selected {
	font-weight: 700;
}

.trams-v3-route-bar-departure-stops-wrapper menu li[data-depstop-type="departured"] {
	color: #bbb;
}

.trams-v3-route-bar-departure-stops-wrapper menu li .trams-v3-info .trams-v3-info-name {
	margin-right: 1em;
}

@media only screen and (max-width: 650px) {
	.trams-v3-route-bar-departure-stops-wrapper menu li .trams-v3-info .trams-v3-info-name {
		text-wrap: wrap;
		/* text-wrap: balance; */ /* Temporarly commented, to fix bug */
	}		
}

.trams-v3-route-bar-departure-stops-wrapper menu li .trams-v3-bullet {
	width: 7px;
    height: 7px;
	min-width: 7px;
    min-height: 7px;
    background-color: black;
    border-radius: 50%;
    margin: .5em .5em;

	position: relative;
}

.trams-v3-route-bar-departure-stops-wrapper menu li[data-depstop-type="departured"] .trams-v3-bullet {
    background-color: #bbb;
}

.trams-v3-route-bar-departure-stops-wrapper menu li .trams-v3-bullet::before {
	content: "";
    display: block;
    width: 2px;
    height: 48px;
    background-color: black;
    position: absolute;
    top: -21px;
    left: 2.5px;

	z-index: -1;
}

.trams-v3-route-bar-departure-stops-wrapper menu li .trams-v3-firefly {
	position: absolute;
    top: 7px;
    left: 11px;
    z-index: 4;

	transition: transform 2s linear;
}

.trams-v3-route-bar-departure-stops-wrapper menu li .trams-v3-firefly-body {
	display: block;
    width: 6px;
    height: 6px;
    background-color: white;
    border-radius: 50%;
    filter: blur(1px);
	box-shadow: darkorange 0px 0px 7px 2px;
    position: absolute;
    top: 2px;
    left: 2px;
    z-index: 2;
}

/* .trams-v3-route-bar-departure-stops-wrapper menu li .trams-v3-firefly-body::after,
.trams-v3-route-bar-departure-stops-wrapper menu li .trams-v3-firefly-body::before {
	display: block;
	content: '';
    width: 1px;
    height: 20px;
    left: 4.5px;
    top: -5.5px;
    border-radius: 50%;
    box-shadow: darkorange 0px 0px 4px 1px;
    background-color: #ffffff;
    position: absolute;
    z-index: 1;
}

.trams-v3-route-bar-departure-stops-wrapper menu li .trams-v3-firefly-body::after {
	transform: rotate(6deg);
}

.trams-v3-route-bar-departure-stops-wrapper menu li .trams-v3-firefly-body::before {
	transform: rotate(96deg);
} */

/* .trams-v3-route-bar-departure-stops-wrapper menu li .trams-v3-firefly-shine {
	display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: darkorange;
    filter: blur(4px);
    position: absolute;
    z-index: 1;
} */

/* .trams-v3-route-bar-departure-stops-wrapper menu li .trams-v3-firefly-shine {
	display: none;
    width: 4px;
    height: 4px;
    left: 3px;
    top: 3px;
    border-radius: 50%;
    box-shadow: darkorange 0px 0px 7px 3px;
    background-color: darkorange;
    position: absolute;
    z-index: 1;
} */

.trams-v3-route-bar-departure-stops-wrapper menu li[data-depstop-type="departured"] .trams-v3-bullet::before {
	background-color: #bbb;
}

.trams-v3-route-bar-departure-stops-wrapper menu li:last-child .trams-v3-bullet::before {
	height: 24px;
	top: -21px;
}

.trams-v3-route-bar-departure-stops-wrapper menu li:first-child .trams-v3-bullet::before {
	height: 24px;
	top: 3px;
}

.trams-v3-route-bar-departure-stops-footer-wrapper {
	display: flex;
    flex-direction: row-reverse;
	padding-top: 5px;
}

.trams-v3-route-bar-departure-stops-footer-button {
	height: 25px;
    width: 25px;
    background-color: red;
}

.trams-v3-overlay {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 3;
	background-color: transparent;
	/* background-color: rgba(0, 0, 0, 0.1); */
}

.trams-v3-overlay[data-overlay-type="mobile"] {
	display: none;
	visibility: hidden;
}

@media only screen and (max-width: 650px) {
	.trams-v3-overlay[data-overlay-type="mobile"] {
		display: block;
		visibility: visible;
  }
}
.trams-v3-route-map-stop-label:hover {
	cursor: pointer;
}

.trams-v3-map-label-dim text {
	fill: #00000044!important;
}

.trams-v3-map-label-dim path {
	fill: #00000011!important;
}

@media (hover: hover) {
	.trams-v3-route-map-stop-label:hover {
		fill: #aaa084!important;
	}

	.text.trams-v3-map-label-dim:hover text {
		fill: #000!important;
	}
}

.trams-v3-route-bar-spinner-wrapper {
	width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.trams-v3-route-bar-spinner-inner {
	width: 26px;
    height: 26px;
	border: 3px solid #696969;
	border-radius: 50%;
	border-top: 3px solid #ffffff;
	animation: trams-v3-ani-spinning 1s ease-in-out infinite;
}

.trams-v3-route-bar-subheader-modes {
	position: absolute;
    right: 0;
    bottom: 0;
	display: flex;
	flex-direction: column;
    align-items: flex-end;
}

.trams-v3-route-bar-subheader-modes-switch {
	width: 20px;
	height: 20px;
	margin-bottom: 5px;
	cursor: pointer;
    transition: all .15s ease-out;
}
@media (hover: hover) {
	.trams-v3-route-bar-subheader-modes-switch:hover {
		filter: grayscale(1);
		transform: scale(0.9);
	}
}
@media (hover: none) {
	.trams-v3-route-bar-subheader-modes-switch:active {
		filter: grayscale(1);
		transform: scale(0.9);
	}
}

.trams-v3-route-bar-subheader-modes-switch img {
	width: 100%;
    height: 100%;
}

.trams-v3-route-bar-subheader-modes-time-tolerance {
	font-family: var(--trams-sans-font-family);
    font-size: 14px;
	color: #999;
}


/* .trams-v3-map-dim {
	-webkit-filter: opacity(.1) grayscale(1);
	filter: opacity(.1) grayscale(1);
} */

#line-1.trams-v3-map-dim {
	stroke: #ece3d0!important;
}
#line-2.trams-v3-map-dim {
	stroke: #dde8e1!important;
}
#line-5.trams-v3-map-dim {
	stroke: #dddfe4!important;
}
#line-6.trams-v3-map-dim {
	stroke: #e7edec!important;
}
#line-7.trams-v3-map-dim {
	stroke: #eee1e2!important;
}
#line-9.trams-v3-map-dim {
	stroke: #e3e4e9!important;
}
#line-10.trams-v3-map-dim {
	stroke: #e9dfda!important;
}


.trams-v3-route-departure-selected {
	display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 8px 8px;
    font-family: var(--trams-sans-font-family);
    border-bottom: 1px solid #ddd;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    position: absolute;
    bottom: var(--departure-height);
    background-color: white;
    left: 15px;
    right: 15px;
    box-shadow: 0px 20px 20px 20px rgba(0,0,0,.15);
    border-radius: 6px;
	z-index: 3;
}

@media only screen and (min-width: 650px) {
	.trams-v3-route-departure-selected {
		display: none;
		visibility: hidden;
	}
}

.trams-v3-route-bar-controls {
	position: absolute;
	right: 10px;
    top: 10px;
	z-index: 2;
}

.trams-v3-route-bar-alertbox-wrapper {
	position: relative;
}

.trams-v3-route-bar-alertbox {
	background-color: #fbeeee;
    border-radius: 6px;
	border: 1px solid #a77070;
    padding: 5px 6px;
	max-height: 80px;
    /* overflow-y: scroll; */
	margin-bottom: 7px;
	cursor: pointer;
	display: flex;
	flex-direction: row;
	transition: transform .15s ease-in;
}
@media (hover: hover) {
	.trams-v3-route-bar-alertbox:hover {
		transform: scale(.97);
	}
}
@media (hover: none) {
	.trams-v3-route-bar-alertbox:active {
		transform: scale(.95);
	}
}

.trams-v3-route-bar-alertbox-icon {
	height: 30px;
}

.trams-v3-route-bar-alertbox-description {
	margin-left: .75em;
}

.trams-v3-route-bar-alertbox-description h3 {
	line-height: 1;
	margin: 0;
	font-family: var(--trams-sans-font-family);
	font-size: 18px;
	font-weight: 600;
}

.trams-v3-route-bar-alertbox-description h4 {
	line-height: 1;
	margin: 0;
	font-family: var(--trams-sans-font-family);
	font-size: 14px;
	font-weight: 400;
}

.trams-v3-route-bar-alertbox p {
	margin: 0 0 .5em 0;
    font-family: var(--trams-sans-font-family);
    line-height: 1.15;
    font-size: 14px;
}

.trams-v3-route-bar-alert-popup {
	background-color: #ffffff99;
	backdrop-filter: blur(10px);
	border: #999 1px solid;
    border-radius: 6px;
    padding: 5px 6px;
    /* overflow-y: scroll; */
	margin-bottom: 7px;
	position: absolute;
	width: 100%;
	z-index: 2;
	left: calc(-100% - 8px);
	top: -50%;
	transition: all .25s ease-out;
	transform-origin: right;
}
.trams-v3-route-bar-alertbox-wrapper[data-alert-visible="false"] .trams-v3-route-bar-alert-popup {
	visibility: hidden;
	transform: scale(.25);
	opacity: 0;
}
@media only screen and (max-width: 650px) {
	.trams-v3-route-bar-alert-popup {
		transform-origin: center;
		left: 0;
	}
	.trams-v3-route-bar-alertbox-wrapper[data-alert-visible="false"] .trams-v3-route-bar-alert-popup {
		visibility: hidden;
		transform: scaley(.35);
		opacity: 0;
	}
}

.trams-v3-route-bar-alert-popup-title {
	display: flex;
	flex-direction: row;
}

.trams-v3-route-bar-alert-popup-icon {
	height: 30px;
}

.trams-v3-route-bar-alert-popup-description {
	margin-left: .75em;
}

.trams-v3-route-bar-alert-popup-description h3 {
	line-height: 1;
	margin: 0;
	font-family: var(--trams-sans-font-family);
	font-size: 18px;
	font-weight: 600;
}

.trams-v3-route-bar-alert-popup-description h4 {
	line-height: 1;
	margin: 0;
	font-family: var(--trams-sans-font-family);
	font-size: 14px;
	font-weight: 400;
}

.trams-v3-route-bar-alert-popup p {
    font-family: var(--trams-sans-font-family);
    line-height: 1.15;
    font-size: 14px;
}

.trams-v3-route-bar-alert-popup-text {
	margin: .5em 0 0 0;
	font-size: 14px;
}

.trams-v3-route-service-update-telegram {
	/* margin-bottom: 30px; */
}

.trams-v3-route-service-update-telegram a {
	text-decoration: none;
	font-family: var(--trams-sans-font-family);
    font-size: 16px;
	color: var(--trams-link-color);
	border-bottom: 1px solid var(--trams-link-underline-color);
}

@media (hover: hover) {
	.trams-v3-route-service-update-telegram a:hover {
		color: var(--trams-link-hover-color);
		border-bottom: 1px solid var(--trams-link-hover-underline-color);
		cursor: pointer;
	}
}

@media (hover: none) {
	.trams-v3-route-service-update-telegram a:active {
		color: var(--trams-link-hover-color);
		border-bottom: 1px solid var(--trams-link-hover-underline-color);
		cursor: pointer;
	}
}


/* Keyframes */


@keyframes trams-v3-ani-highlight-red-to-black {
	from {
		color: var(--trams-dark-gray);
	}
	15% {
		color: rgb(226, 30, 30);
	}
	to {
		color: var(--trams-dark-gray);
	}
}

@keyframes trams-v3-ani-highlight-red-to-gray {
	from {
		color: #666;
	}
	15% {
		color: #f17a7a;
	}
	to {
		color: #666;
	}
}


@keyframes trams-v3-ani-collapse-left {
	from {
		transform: translateX(100px);
		opacity: 0;
	}
	to {
		transform: translateX(0);
		opacity: 1;
	}
}

@media only screen and (max-width: 1100px) {
	@keyframes trams-v3-ani-collapse-left {
		from {
			transform: translateY(100px);
			opacity: 0;
		}
		to {
			transform: translateY(0px);
			opacity: 1;
		}
	}
}


@keyframes trams-v3-ani-entersqish {
	from {
		transform: scaley(0);
	}
	to {
		transform: scaley(1);
	}
}


@keyframes trams-v3-ani-collapse-in {
	from {
		transform: scaley(0);
	}
	to {
		transform: scaley(1);
	}
}


@keyframes trams-v3-ani-collapse-away {
	from {
		transform: scaley(1);
	}
	to {
		transform: scaley(0);
	}
}


@keyframes trams-v3-ani-squeeze {
	from {
		transform: scale(1);
		opacity: 1;
	}
	to {
		transform: scale(.25);
		opacity: 0;
	}
}


@keyframes trams-v3-ani-float-up {
	from {
		transform: translateY(0) scaley(1);
		opacity: 1;
	}
	to {
		transform: translateY(-7px) scaley(.33);
		opacity: 0;
	}
}


@keyframes trams-v3-ani-aexpand-from-top {
	from {
		transform: translateY(-30px) scaley(.67);
		opacity: 0;
	}
	to {
		transform: translateY(0) scaley(1);
		opacity: 1;
	}
}


@keyframes trams-v3-ani-float-from-up {
	from {
		transform: translateY(35px) scaley(1.25);
		opacity: 0;
	}
	to {
		transform: translateY(0px) scaley(1);
		opacity: 1;
	}
}

@keyframes trams-v3-ani-float-to-down {
	from {
		transform: translateY(0px) scaley(1);
		opacity: 1;
	}
	to {
		transform: translateY(35px) scaley(1.25);
		opacity: 0;
	}
}


@keyframes trams-v3-ani-dep-from-up {
	from {
		transform: translateY(10px) scaley(1.25);
		opacity: 0;
	}
	to {
		transform: translateY(0px) scaley(1);
		opacity: 1;
	}
}

@keyframes trams-v3-ani-dep-to-down {
	from {
		transform: translateY(0px) scaley(1);
		opacity: 1;
	}
	to {
		transform: translateY(10px) scaley(1.25);
		opacity: 0;
	}
}


@keyframes trams-v3-ani-expand {
	from {
		/* transform: translateY(10px) scaley(1.25); */
		height: 100px;
		transform: translateX(0);
	}
	to {
		/* width: var(--width-to-expand); */
		height: auto;
		transform: translateX(0);
	}
}


@keyframes trams-v3-ani-fading {
	from {
		transform: scalex(1);
		opacity: 1;
	}
	to {
		transform: scalex(1.15);
		opacity: 0;
	}
}

@keyframes trams-v3-ani-unfading {
	from {
		transform: scalex(.85);
		opacity: 0;
	}
	to {
		transform: scalex(1);
		opacity: 1;
	}
}

@keyframes trams-v3-ani-disappear-stretch {
	from {
		opacity: 1;
	}
	to {
		transform: scaleY(2);
		opacity: 0;
	}
}

@keyframes trams-v3-ani-appear-stretch {
	from {
		transform: scaleY(.5);
		opacity: 0;
	}
	to {
		transform: scaleY(1);
		opacity: 1;
	}
}

@keyframes trams-v3-ani-disappear-collapse {
	from {
		opacity: 1;
	}
	to {
		transform: scaleY(.5);
		opacity: 0;
	}
}

@keyframes trams-v3-ani-appear-collapse {
	from {
		transform: scaleY(2);
		opacity: 0;
	}
	to {
		transform: scaleY(1);
		opacity: 1;
	}
}

@keyframes trams-v3-ani-margin-bottom {
	from {
		margin-bottom: 0;
	}
	to {
		margin-bottom: 10px;
	}
}

@keyframes trams-v3-ani-departures-disappear-top {
	from {
		transform: translateY(0) scaley(1);
		opacity: 1;
	}
	to {
		transform: translateY(-85px) scaley(.27);
		opacity: 0;
	}
}

@keyframes trams-v3-ani-stopslist-appear-bottom {
	from {
		transform: translateY(85px) scaley(.27);
		opacity: 0;
	}
	to {
		transform: translateY(0) scaley(1);
		opacity: 1;
	}
}

/* New animations */

@keyframes trams-v3-ani-appear-y-expand {
	from {
		transform: scaley(0);
	}
	to {
		transform: scaley(1);
	}
}

@keyframes trams-v3-ani-appear-lay-down {
	from {
		transform: perspective(800px) translateZ(100px) rotateX(-90deg);
		opacity: 0;
	}
	to {
		transform: perspective(800px) translateZ(0px) rotateX(0deg);
		opacity: 1;
	}
}

@keyframes trams-v3-ani-appear-lay-up {
	from {
		transform: perspective(800px) translateZ(100px) rotateX(90deg);
		opacity: 0;
	}
	to {
		transform: perspective(800px) translateZ(0px) rotateX(0deg);
		opacity: 1;
	}
}

@keyframes trams-v3-ani-appear-lay-right {
	from {
		transform: perspective(800px) translateZ(-100px) rotateY(-90deg);
		opacity: 0;
	}
	to {
		transform: perspective(800px) translateZ(0px) rotateY(0deg);
		opacity: 1;
	}
}

@keyframes trams-v3-ani-disappear-xy-collapse {
	from {
		transform: scale(1);
		opacity: 1;
	}
	to {
		transform: scale(.5);
		opacity: 0;
	}
}

@keyframes trams-v3-ani-appear-xy-expand {
	from {
		transform: scale(.25);
		opacity: 0;
	}
	to {
		transform: scale(1);
		opacity: 1;
	}
}

@keyframes trams-v3-ani-appear-departure-stops {
	0% {
		transform: translate(298px, var(--departure-stops-y));
		height: 50px;
		opacity: 0.15;
	}
	100% {
		transform: none;
		height: 30vh;
		opacity: 1;
	}
}

@keyframes trams-v3-ani-departure-selecting {
	0% {
		transform: translateY(calc(var(--departure-height) - var(--departure-stops-bottom)));
		opacity: 0.15;
	}
	100% {
		transform: none;
		opacity: 1;
	}
}

@keyframes trams-v3-ani-departure-unselecting {
	0% {
		transform: translateY(0px);
		opacity: 1;
	}
	100% {
		transform: translateY(calc(var(--departure-height) - var(--departure-stops-bottom))) scale(.85);
		opacity: 0;
	}
}

@media only screen and (max-width: 650px) {
	@keyframes trams-v3-ani-appear-departure-stops {
		0% {
			transform: scale(.25);
			opacity: 0.15;
		}
		100% {
			transform: scale(1);
			opacity: 1;
		}
	}
}

@keyframes trams-v3-ani-disappear-lay-down {
	from {
		transform: perspective(800px) translateZ(0px) rotateX(0deg);
		opacity: 1;
	}
	to {
		transform: perspective(800px) translateZ(100px) rotateX(90deg);
		opacity: 0;
	}
}

@keyframes trams-v3-ani-disappear-lay-up {
	from {
		transform: perspective(800px) translateZ(0px) rotateX(0deg);
		opacity: 1;
	}
	to {
		transform: perspective(800px) translateZ(100px) rotateX(-90deg);
		opacity: 0;
	}
}

@keyframes trams-v3-ani-disappear-lay-right {
	from {
		transform: perspective(800px) translateZ(0px) rotateY(0deg);
		opacity: 1;
	}
	to {
		transform: perspective(800px) translateZ(100px) rotateY(90deg);
		opacity: 0;
	}
}

@keyframes trams-v3-ani-disappear-collapse-x-center {
	from {
		transform: perspective(800px) rotateX(0deg);
	}
	to {
		transform: perspective(800px) rotateX(90deg);
	}
}


@keyframes trams-v3-ani-disappear-collapse-top {
	from {
		transform: translateY(0) scaley(1);
		opacity: 1;
	}
	to {
		transform: translateY(-7px) scaley(.33);
		opacity: 0;
	}
}

@keyframes trams-v3-ani-disappear-collapse-top-l {
	from {
		transform: translateY(0) scaley(1);
		opacity: 1;
	}
	to {
		transform: translateY(-65px) scaley(.33);
		opacity: 0;
	}
}

@keyframes trams-v3-ani-disappear-expand-bottom {
	from {
		transform: translateY(0px) scaley(1);
		opacity: 1;
	}
	to {
		transform: translateY(35px) scaley(1.25);
		opacity: 0;
	}
}

@keyframes trams-v3-ani-disappear-fading {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}

@keyframes trams-v3-ani-appear-collapse-top {
	from {
		transform: translateY(-7px) scaley(.33);
		opacity: 0;
	}
	to {
		transform: translateY(0px) scaley(1);
		opacity: 1;
	}
}


@keyframes trams-v3-ani-appear-expand-bottom {
	from {
		transform: translateY(35px) scaley(1.25);
		opacity: 0;
	}
	to {
		transform: translateY(0px) scaley(1);
		opacity: 1;
	}
}


@keyframes trams-v3-ani-appear-collapse-x-center {
	from {
		transform: perspective(800px) rotateX(-90deg);
	}
	to {
		transform: perspective(800px) rotateX(0deg);
	}
}

@keyframes trams-v3-ani-appear-collapse-y-center {
	from {
		transform: perspective(800px) rotateY(-90deg);
	}
	to {
		transform: perspective(800px) rotateY(0deg);
	}
}

@keyframes trams-v3-ani-disappear-lay-left {
	from {
		transform: perspective(800px) translateZ(0px) rotateY(0deg);
		opacity: 1;
	}
	to {
		transform: perspective(800px) translateZ(100px) rotateY(-90deg);
		opacity: 0;
	}
}

@keyframes trams-v3-ani-appear-lay-left {
	from {
		transform: perspective(800px) translateZ(0px) rotateY(-90deg);
		opacity: 0;
	}
	to {
		transform: perspective(800px) translateZ(0px) rotateY(0deg);
		opacity: 1;
	}
}

@keyframes trams-v3-ani-smalling {
	from {
		transform: scale(1.5);
		opacity: 1;
	}
	to {
		transform: scale(1);
		opacity: 1;
	}
}

@keyframes trams-v3-ani-shaking {
	0% {
		transform: translateX(0);
	}
	6% {
		transform: translateX(34.5px);
	}
	18% {
		transform: translateX(-17.9px);
	}
	30% {
		transform: translateX(10.7px);
	}
	44% {
		transform: translateX(-7.4px);
	}
	56% {
		transform: translateX(5.4px);
	}
	68% {
		transform: translateX(-4px);
	}
	82% {
		transform: translateX(3.1px);
	}
	94% {
		transform: translateX(-2.5px);
	}
	100% {
		transform: translateX(0);
	}
}

@keyframes trams-v3-ani-spinning {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
  }