:root {

	--header-color: #FFFFFF;
	--background-color: #D5E5F7;
	--footer-color: #00A0E4;
	--hover-color: #419CD7;
	--border-color: #00A0E4;
	--intro-title-color: #419CD7;
	--stations-color: #D5E5F7;
	--stations-divider-color: #FFFFFE;
	--stations-title-color: #14377D;
	--stations-number-color: #14377D;
	--stations-name-color: #FFFFFE;
	--stations-shadow-color: color(srgb 0.122 0.216 0.365 / 0.4);
	--news-title-color: #14377D;
	--schedule-color: #00A0E4;
	
	/* navbar */
	--navbar-button-border-color: #14377D;
	--navbar-button-background-color: #FFFFFF;
	--navbar-button-text-color: #14377D;
	--navbar-button-hover-border-color: #00A0E4;
	--navbar-button-hover-background-color: #14377D;
	--navbar-button-hover-text-color: #00A0E4;
	
	--stations-navbar-button-border-color: #14377D;
	--stations-navbar-button-background-color: #14377D;
	--stations-navbar-button-text-color: #FFFFFF;
	--stations-navbar-button-hover-border-color: #00A0E4;
	--stations-navbar-button-hover-background-color: #00A0E4;
	--stations-navbar-button-hover-text-color: #14377D;
	
	/* content */
	--large-content-color: #FFFFFF;
	--large-title-color: #14377D;
	--large-title-shadow-color: color(srgb 0 0.341 0.639 / 0.397);
	--primary-title-color: #292A2B;
	--primary-title-shadow-color: color(srgb 0.161 0.165 0.169 / 0.4);
	--secondary-title-color: #14377D;
	--secondary-title-shadow-color: color(srgb 0 0.341 0.639 / 0.397);
	--tertiary-title-color: #14377D;
	--tertiary-title-shadow-color: color(srgb 0.063 0.063 0.063 / 0.4);
	--primary-text-color: #292A2B;
	/*--primary-text-shadow-color: color(srgb 0.161 0.161 0.169 / 0.4);*/
	--primary-text-shadow-color: none;
	--content-text-color: #00A0E4;
	--bullet-points-color: #14377D;
	--light-shadow-color: rgba(65, 65, 65, 0.4);
	--dark-shadow-color: #00A0E4; 
	--secondary-hover-color: #14377D;
	--title-with-image-text-color: #FFFFFF;
	--title-with-image-background-color: #101010;
	--pricelist-grid-background-color: #14377D;
	
	/* footer */
	--schedule-title-color: #FFFFFF;
	--schedule-secondary-title-color: #14377D;
	--schedule-content-text-color: #FFFFFF;
	--copyright-background-color: #D5E5F7;
	--entities-background-color: #D5E5F7;
	--entities-title-color: #14377D;
	--contacts-background-color: #D5E5F7;
	--grey-elements-color: #3B3B3B;
	--link-color: #14377D;
	--visited-link-color: #14377D;
	--text-decoration-color: #14377D;
	
	/* stations */
	--free-dock-color: #008A25;
	--available-ride-color: #14377D;
	--unavailable-dock-color: #3F3E49;
	--maintenance-dock-color: #e9cb53;
	--station-state-available-background-color: #355681;
	--station-state-unavailable-background-color: #B54242;
	--station-state-maintenance-background-color: #907A20;
	--station-state-label-color: #FFFFFE;
	--station-details-title-color: #FFFFFE;
	--station-details-background-color: #14377D;
	--station-details-button-border-color: #FFFFFF;
	--station-details-button-background-color: #FFFFFF;
	--station-details-button-text-color: #000000;
	--station-details-button-hover-border-color: #00A0E4;
	--station-details-button-hover-background-color: #00A0E4;
	--station-details-button-hover-text-color: #14377D;
	
	/* forms */
	--button-danger-color: #C53734;
	--button-danger-shadow-color: color(srgb 0.773 0.216 0.204 / 0.4);
	--button-valid-color: #48C534;
	--button-valid-shadow-color: color(srgb 0.282 0.773 0.204 / 0.4);
	--button-valid-secondary-color: #FFFFFE;
	--grey-color: #B4B4B4;
	--form-label-color: #292A2B;
	--form-link-color: #292A2B;
	--form-hover-color: #00A0E4;
	--select-color: #e6e6e6;
	
	--input-background-color: #FFFFFE;
	
	/* snackbar */
	--snackbar-message-color: #FFFFFE;
	--snackbar-message-valid-color: #48C534;
	--snackbar-message-invalid-color: #C53734;
	--snackbar-message-background-color: #333333;
	
	--banner-background-color: #E7E7E7;
	--banner-title-color: #292A2B;
	--banner-secondary-title-color: #292A2B;
	--banner-message-color: #00A0E4;
	--banner-shadow-color: #292A2B;
	--banner-hover-color: #00A0E4;
	
	/* user-menu */
	--menu-button-border-color: #14377D;
	--menu-button-background-color: #14377D;
	--menu-button-text-color: #FFFFFF;
	--menu-button-hover-border-color: #00A0E4;
	--menu-button-hover-background-color: #00A0E4;
	--menu-button-hover-text-color: #14377D;
	
	/* user-details */
	--user-details-message-background-color: #292A2B;
	--user-details-message-valid-color: #48C534;
	--user-details-message-invalid-color: #C53734;
	
	/* user-subscription */
	--current-subscription-background-color: #FFFFFE;
	--subscription-type-selected-background-color: color(srgb 0.122 0.216 0.365 / 0.4);
	--subscription-type-grid-element-background-color: #D5E5F7;
	--subscription-type-grid-element-text-color: #419CD7;
	--subscription-type-grid-button-border-color: #14377D;
	--subscription-type-grid-button-background-color: #14377D;
	--subscription-type-grid-button-hover-border-color: #00A0E4;
	--subscription-type-grid-button-hover-color: #FFFFFE;
	
	/* user-history */
	--user-history-header-color: #FFFFFE;
	--user-history-hover-color: #00A0E4;
	--user-history-header-background-color: #419CD7;
	--user-history-list-item-background-color: #FFFFFE;
	--user-history-modal-info-color: #292A2B;
	--user-history-modal-info-details-color: #14377D;
	
	/* map */
	--map-marker-button-border-color: #14377D;
	--map-marker-button-background-color: #14377D;
	--map-marker-button-text-color: #FFFFFE;
	--map-marker-button-hover-border-color: #00A0E4;
	--map-marker-button-hover-background-color: #00A0E4;
	--map-marker-button-hover-text-color: #14377D;
	
	/* cookie-bar */
	--cookie-bar-background-color: #101010;
	--cookie-bar-text-color: #FFFFFF;
	--cookie-bar-button-border-color: #FFFFFF;
	--cookie-bar-button-background-color: #FFFFFF;
	--cookie-bar-button-text-color: #000000;
	--cookie-bar-button-hover-border-color: #00A0E4;
	--cookie-bar-button-hover-background-color: #00A0E4;
	--cookie-bar-button-hover-text-color: #14377D;
	
	/* other */
	--arrow-color: #000000;
	--round-button-border-color: #00A0E4;
	--round-button-background-color: #FFFFFF;
	--round-button-text-color: #000000;
	--round-button-hover-border-color: #00A0E4;
	--round-button-hover-background-color: #00A0E4;
	--round-button-hover-text-color: #14377D;
}

@font-face {
	font-family: fontBold;
	src: url(BROmny-Bold.ttf);
}

@font-face {
	font-family: fontMedium;
	src: url(BROmny-Medium.ttf);
}

@font-face {
	font-family: fontRegular;
	src: url(BROmny-Regular.ttf);
}

@font-face {
	font-family: fontBlack;
	src: url(BROmny-Black.ttf);
}

@font-face {
	font-family: fontLight;
	src: url(BROmny-Light.ttf);
}

html {
	/*font-family: Helvetica, Arial, sans-serif;
	font-weight: normal;*/
	font-family: fontRegular;
	width: 100%;
	height: 100%;
	color: var(--header-color);
}

body {
	padding: 0% 0% 0% 0%;
	margin: 0% 0% 0% 0%;
	background-color: var(--header-color);
	width: 100%;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

p {
	color: var(--content-text-color);
	font-size: 1.0rem;
	line-height: 1.5rem;
}

img {
	margin-left: auto;
	margin-right: auto;
	padding: 0 0 0 0;
}

.center {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 50%;
	height: 50%;
}

header {
	width: 100%;
	height: 100%;
	position: relative;
	background-color: var(--header-color);
}

header img {
	max-height: 6.0rem;
	margin-left: auto;
	margin-right: auto;
	padding: 0 0 0 0;
	padding-top: 0.2rem;
	width: 100%;
}

.decoration-image {
	display: block;
}

.slideshow-container {
	background-color: var(--background-color);
}

.slideshow-container img {
	width: 100%;
	height: 100%;
}

.index-slides {
	display: none;
}

/* Fading animation */
.fade {
	-webkit-animation-name: fade;
	-webkit-animation-duration: 10.0s;
	animation-name: fade;
	animation-duration: 10.0s;

	animation-iteration-count: infinite;
	-moz-animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
	-o-animation-iteration-count: infinite;
}

@-webkit-keyframes fade {
	from {
		opacity: .2
	}

	to {
		opacity: 1
	}
}

@keyframes fade {
	from {
		opacity: .2
	}

	to {
		opacity: 1
	}
}

.welcome {
	padding: 0 0 0 0;
	margin: 0 0 0 0;
	width: 100%;
	height: 100%;
	background-color: var(--background-color);
	border-bottom: 0.25rem solid var(--dark-shadow-color);
}

.welcome>p {
	padding: 2% 0% 2% 0%;
	margin: 0% 10% 0% 10%;
	color: var(--content-text-color);
	text-align: left;
}

.welcome-text {
	padding: 0 0 0 0;
	margin: 0 0 0 0;
	width: 100%;
	height: 100%;
	background-color: var(--background-color);
	border-bottom: 0.25rem solid var(--dark-shadow-color);
}

.welcome-text>p {
	padding: 1% 0% 1% 0%;
	margin: 0% 10% 0% 10%;
	color: var(--content-text-color);
}

.large-title {
	/*font-family: Helvetica, Arial, sans-serif;
	font-weight: 700;*/
	font-family: fontRegular;
	background-color: var(--background-color);
	font-size: 1.5rem;
	text-align: center;
	line-height: 2.5rem;
	/*padding-bottom: 1.0rem;*/
	padding-bottom: 0.7rem;
	color: var(--large-title-color);
	/*text-shadow: 1px 1px 5px var(--large-title-shadow-color);*/
	text-shadow: none;
}

.primary-title {
	color: var(--primary-title-color);
	/*text-shadow: 1px 1px 5px var(--primary-title-shadow-color);*/
}

.secondary-title {
	color: var(--secondary-title-color);
	/*text-shadow: 1px 1px 5px var(--secondary-title-shadow-color);*/
	/*font-family: Helvetica, Arial, sans-serif;
	font-weight: 700 !important;*/
	font-family: fontRegular;
}

.tertiary-title {
	color: var(--tertiary-title-color);
	/*text-shadow: 1px 1px 5px var(--tertiary-title-shadow-color);*/
	/*font-family: Helvetica, Arial, sans-serif;
	font-weight: 700;*/
	font-family: fontRegular;
	font-size: 1.1rem;
}

/* station - BEGIN */

#stationDetails h3 {
	text-align: center;
	padding-top: 1.2rem;
	/*text-shadow: 1px 1px 5px var(--primary-text-shadow-color);*/
	text-shadow: none;
}

.station-details {}

.station-details .station-details-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.station-details .station-details-grid .station-details-grid-element {
	flex: 0 0 calc(100%);
}

.station-details {
	max-width: 20.0rem;
	margin-left: auto;
	margin-right: auto;
}

.station-details * {
	/*background-color: var(--background-color);*/
}

.station-details h1 {
	padding-bottom: 1.0rem;
	color: var(--primary-text-color);
	/*text-shadow: 1px 1px 5px var(--primary-text-shadow-color);*/
	text-shadow: none;
	font-size: 1.5rem;
	text-align: center;
}

.station-details img:hover {
	box-shadow: 0 0 10px 1px var(--dark-shadow-color);
}

.station-details-grid {
	background-color: var(--background-color);
}

.station-details-grid-element {
	padding-top: 1.0rem;
	padding-bottom: 1.0rem;
}

.station-details-grid-element h2 {
	color: var(--content-text-color);
	padding-bottom: 0.5rem;
	font-size: 1.2rem;
	text-align: center;
}

.station-details-grid-element h3 {
	color: var(--primary-text-color);
	/*text-shadow: 1px 1px 5px var(--primary-text-shadow-color);*/
	text-shadow: none;
	/*font-family: Helvetica, Arial, sans-serif;
	font-weight: normal;*/
	font-family: fontRegular;
	text-align: center;
	padding-bottom: 0.5rem;
}

.station-details-grid-element a {
	padding-top: 1.0rem;
	padding-bottom: 1.0rem;
	width: 90%;
	display: block;
	margin: auto;
}

.station-details-grid-element img {
	border: 0.25rem solid var(--background-color);
	border-radius: 0.6rem;
	margin-left: auto;
	margin-right: auto;
	padding: 0 0 0 0;
	width: 100%;
	height: auto;
}

.station-details-grid-element-details {
	padding-left: 10%;
	padding-right: 10%;
	padding-top: 2%;
	padding-bottom: 2%;
	border: 0.25rem solid var(--border-color);
	border-radius: 0.6rem;
	background-color: var(--station-details-background-color);
}

.station-details-grid-element-details button {
	/*font-family: Helvetica, Arial, sans-serif;
	font-weight: 700;*/
	font-family: fontRegular;
	display: block;
	max-height: 2.6rem;
	background-color: var(--station-details-button-background-color);
	color: var(--station-details-button-text-color);
	border: 0.25rem solid var(--station-details-button-border-color);
	border-radius: 0.6rem;
	padding: 0.5rem 0.5rem 0.25rem 0.5rem;
	margin: 1.5rem 0.0rem 1.0rem 0.0rem;
	text-decoration: none;
	font-size: 1.0rem;
	cursor: pointer;
	height: 100%;
	width: 100%;
}

.station-details-grid-element-details button:hover,
.station-details-grid-element-details button:active {
	background-color: var(--station-details-button-hover-background-color);
	color: var(--station-details-button-hover-text-color);
	border-color: var(--station-details-button-hover-border-color);
	/*box-shadow: 3px 3px 0px 0px var(--dark-shadow-color);*/
}

/* station - END */

/* stations - BEGIN */

.stations {
	padding: 1.0rem;
	padding-bottom: 2.5rem;
	background-color: var(--stations-color) !important;
}

.stations>* {
	background-color: var(--stations-color) !important;
}

.stations * {
	background-color: var(--stations-color) !important;
}

.stations h1 {
	/*font-family: Helvetica, Arial, sans-serif;
	font-weight: 700;*/
	font-family: fontRegular;
	color: var(--stations-title-color);
	/*text-shadow: 1px 1px 5px var(--primary-title-shadow-color);*/
	text-shadow: none;
	font-size: 1.5rem;
	text-align: center;
}

.stations img:hover {
	/*box-shadow: 0 0 10px 1px var(--dark-shadow-color);*/
}

/* stations - END */

@media (min-width: 992px) and (max-width: 1311px) {
	.stations>.stations-grid .stations-grid-element:last-child {
		justify-self: center;
		width: calc(100% / 2);
		grid-column-start: span 3;
	}
}

.stations-wrapper .stations-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.stations-wrapper * .stations-grid *{
	background-color: var(--stations-color);
}

.stations-wrapper .stations-grid .stations-grid-element {
	flex: 0 0 calc(100%);
}

@media (max-width: 672px) {
	.stations-wrapper .stations-grid .stations-grid-element {}
}

@media (min-width: 672px) and (max-width: 992px) {
	.stations-wrapper .stations-grid .stations-grid-element {
		flex: 0 0 calc(100% / 2);
	}
}

@media (min-width: 992px) and (max-width: 1312px) {
	.stations-wrapper .stations-grid .stations-grid-element {
		flex: 0 0 calc(100% / 3);
	}
}

@media (min-width: 1312px) {
	.stations-wrapper .stations-grid .stations-grid-element {
		flex: 0 0 calc(100% / 4);
	}
}

.stations-wrapper {
	max-width: 1500px;
	margin-left: auto;
	margin-right: auto;
}

/* stations grid - BEGIN */

.stations-grid {
	/*display: grid;
	grid-template-columns: repeat(auto-fill, minmax(20.0rem, 1fr));*/
}

.stations-grid-element {
	padding-top: 1.0rem;
	height: 100%;
}

.stations-grid-element h2 {
	color: var(--stations-number-color);
	/*text-shadow: 1px 1px 5px var(--primary-title-shadow-color);*/
	text-shadow: none;
	padding-bottom: 0.5rem;
	font-size: 1.2rem;
	text-align: center;
}

.stations-grid-element h3 {
	color: var(--stations-name-color);
	font-size: 1.0rem;
	/*text-shadow: 1px 1px 5px var(--primary-title-shadow-color);*/
	text-shadow: none;
	/*font-family: Helvetica, Arial, sans-serif;
	font-weight: 100;*/
	font-family: fontLight;
	text-align: center;
	background-color: var(--stations-title-color) !important;
	padding-top: 0.2rem;
}

.stations-grid-element a {
	display: block;
	margin: auto;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	padding-left: 0.5rem;
	padding-right: 0.5rem;
	width: 90%;
	height: 100%;
	border-radius: 0.8rem;
	text-decoration: none;
	background-color: var(--visited-link-color) !important;
}

.stations-grid-element a:hover {
	box-shadow: 0 0 5px 1px var(--stations-shadow-color);
}

.stations-grid-element img {
	border-radius: 0.6rem;
	margin-left: auto;
	margin-right: auto;
	padding: 0 0 0 0;
	width: 100%;
	height: auto;
}

/* stations grid - END */

/* pricelist - BEGIN */

.pricelist {
	padding: 1.0rem;
}

.pricelist * {
	/*font-family: Helvetica, Arial, sans-serif;
	font-weight: 700;*/
	font-family: fontRegular;
}

.pricelist h1 {
	padding-bottom: 1.0rem;
	color: var(--primary-text-color);
	/*text-shadow: 1px 1px 5px var(--primary-text-shadow-color);*/
	text-shadow: none;
	font-size: 1.5rem;
	text-align: center;
}

.pricelist img:hover {
	/*box-shadow: 0 0 10px 1px var(--dark-shadow-color);*/
}

.pricelist-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(23.0rem, 1fr));
	justify-content: center;
	background-color: var(--background-color);
}

.pricelist-grid-element {
	padding-top: 1.0rem;
	padding-bottom: 1.0rem;
	min-width: 23.0rem;
}

.pricelist-grid-element h2 {
	color: var(--content-text-color);
	padding-bottom: 0.5rem;
	font-size: 1.2rem;
	text-align: center;
}

.pricelist-grid-element h3 {
	text-shadow: none;
	/*font-family: Helvetica, Arial, sans-serif;
	font-weight: 900;*/
	font-family: fontRegular;
	text-align: center;
	border-bottom: 0.25rem solid var(--border-color);
	color: var(--border-color);
	background-color: var(--pricelist-grid-background-color);
	font-size: 1.6rem;
	padding: 1.0rem;
	padding-top: 1.5rem !important;
}

.pricelist-grid-element a {
	padding-top: 1.0rem;
	padding-bottom: 1.0rem;
	width: 90%;
	display: block;
	margin: auto;
}

.pricelist-grid-element img {
	padding: 0 0 0 0;
	width: 2.3rem;
	height: auto;
	background-color: #FFFFFF;
	background-color: #FFFFFF;
	margin: 0;
	padding-top: 0.3rem;
}

.pricelist-grid-element-details {
	padding-left: 3%;
	padding-right: 3%;
	padding-top: 0.3rem;
	padding-bottom: 0.3rem;
	margin-left: 0.8rem;
	margin-right: 0.8rem;
	/*border: 0.25rem solid var(--border-color);*/
	border-radius: 0.6rem;
	background-color: var(--pricelist-grid-background-color);
	text-align: center;
}

@media (min-width: 992px) and (max-width: 1311px) {
	.pricelist>.pricelist-grid .pricelist-grid-element:last-child {
		justify-self: center;
		width: calc(100%);
		grid-column-start: span 2;
	}
}

/* pricelist - END */

@media screen and (min-height: 450px) {
	.welcome>p {
		-webkit-columns: 2 250px;
		-moz-columns: 2 250px;
		columns: 2 250px;
	}
}

a:link {
	color: var(--link-color);
}

a:hover {
	color: var(--hover-color);
}

.navbar {
	background-color: var(--header-color);
	margin: 0 0 0 0;
	padding-left: 10%;
	padding-right: 10%;
	width: 80%;
	height: 100%;
	border-bottom: 0.25rem solid var(--border-color);
}

.navbar ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

.navbar li {
	float: left;
	padding-left: 0.5rem;
	padding-right: 0.5rem;
	padding-bottom: 0.5rem;
}

.navbar li>button {
	display: block;
	max-height: 2.6rem;
	background-color: var(--navbar-button-background-color);
	color: var(--navbar-button-text-color);
	border: none;
	/*border: 0.25rem solid var(--navbar-button-border-color);*/
	border-radius: 0.6rem;
	/*padding: 0.5rem 0.5rem 0.5rem 0.5rem;
	margin: 0.0rem 0.2rem 0.2rem 0.0rem;*/
	text-decoration: none;
	font-size: 0.9rem;
	/*font-family: Helvetica, Arial, sans-serif;
	font-weight: bold;*/
	font-family: fontBold;
	cursor: pointer;
	height: 100%;
}

.navbar li>button:enabled {
	background-color: var(--navbar-button-background-color);
	border-color: var(--navbar-button-border-color);
	color: var(--navbar-button-text-color);
}

.navbar li>button:enabled:hover,
.navbar li>button:enabled:active {
	/*box-shadow: 3px 3px 0px 0px var(--dark-shadow-color);*/
	/*background-color: var(--navbar-button-hover-background-color);
	border-color: var(--navbar-button-hover-border-color);*/
	color: var(--navbar-button-hover-text-color);
}

.navbar li>button:enabled:hover .arrow, .navbar li>button:enabled:active .arrow {
	/*border-color: var(--navbar-button-hover-text-color);*/
}

.navbar li>button:disabled,
.navbar li>button[disabled] {
	background-color: var(--grey-color);
	color: #00A0E4;
	cursor: default;
}

.navbar li>button:disabled:hover,
.navbar li>button:disabled:active {
	box-shadow: none;
	background-color: var(--grey-color) !important;
	color: #00A0E4;
}

.navbar li>button:disabled:hover .arrow,
.navbar li>button:disabled:active .arrow {
	border-color: #00A0E4;
}

.forms {
	height: 100%;
	width: 100%;
	background-color: transparent;
	text-align: center;
}

#stationTitle {
	color: var(--content-text-color);
	font-weight: bold;
	font-size: 1.0rem;
}

#stationName {
	color: var(--content-text-color);
	font-size: 1.0rem;
}

#maximumNumberOfRides {
	color: var(--content-text-color);
	font-weight: bold;
	font-size: 1.0rem;
}

#numberOfAvailableRides {
	color: var(--content-text-color);
	font-weight: bold;
	font-size: 1.0rem;
}

.station-image-link img {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 30%;
	height: 30%;
	border-radius: 0.6rem;
}

.station-image-link img:hover {
	box-shadow: 0 0 10px 1px var(--dark-shadow-color);
}

.station-image-normal {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 70%;
	height: 42%;
	border: 0.25rem solid var(--border-color);
	border-radius: 0.6rem;
	margin-bottom: 1.0rem;
}

.stations-navbar-grid-element {
	padding-bottom: 0.5rem;
	padding-left: 0.25rem;
	padding-right: 0.25rem;
}

.stations-navbar-grid-element button {
	/*font-family: Helvetica, Arial, sans-serif;
	font-weight: 700;*/
	font-family: fontRegular;
	display: block;
	max-height: 2.6rem;
	background-color: var(--stations-navbar-button-background-color);
	color: var(--stations-navbar-button-text-color);
	border: 0.25rem solid var(--stations-navbar-button-border-color);
	border-radius: 0.6rem;
	padding: 0.5rem 0.5rem 0.5rem 0.5rem;
	margin: 0.0rem 0.2rem 0.2rem 0.0rem;
	text-decoration: none;
	font-size: 1.0rem;
	cursor: pointer;
	height: 100%;
	width: 11.0rem;
}

.stations-navbar-grid-element button:enabled {
	background-color: var(--stations-navbar-button-background-color);
	border-color: var(--stations-navbar-button-border-color);
	color: var(--stations-navbar-button-text-color);
}

.stations-navbar-grid-element button:enabled:hover,
.stations-navbar-grid-element button:enabled:active {
	/*box-shadow: 3px 3px 0px 0px var(--dark-shadow-color);*/
	background-color: var(--stations-navbar-button-hover-background-color);
	border-color: var(--stations-navbar-button-hover-border-color);
	color: var(--stations-navbar-button-hover-text-color);
}

.stations-navbar-grid-element button:disabled,
.stations-navbar-grid-element button[disabled] {
	background-color: var(--grey-color);
	border-color: var(--grey-color);
	color: #00A0E4;
	cursor: default;
}

.stations-navbar-grid-element button:disabled:hover,
.stations-navbar-grid-element button:disabled:active {
	box-shadow: none;
	background-color: var(--grey-color) !important;
	border-color: var(--grey-color) !important;
	color: #00A0E4;
}

.stations-navbar-wrapper .stations-navbar-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	padding-bottom: 0.5rem;
}

.stations-navbar-wrapper .stations-navbar-grid .stations-navbar-grid-element {
	flex: 0 0 calc(100%);
}

@media (max-width: 672px) {
	.stations-navbar-wrapper .stations-navbar-grid .stations-navbar-grid-element {
		flex: 0 0 calc(100% / 3);
	}
}

@media (min-width: 672px) and (max-width: 992px) {
	.stations-navbar-wrapper .stations-navbar-grid .stations-navbar-grid-element {
		flex: 0 0 calc(100% / 4);
	}
}

@media (min-width: 992px) and (max-width: 1312px) {
	.stations-navbar-wrapper .stations-navbar-grid .stations-navbar-grid-element {
		flex: 0 0 calc(100% / 6);
	}
}

@media (min-width: 1312px) and (max-width: 2272px) {
	.stations-navbar-wrapper .stations-navbar-grid .stations-navbar-grid-element {
		flex: 0 0 calc(100% / 8);
	}
}

@media (min-width: 2272px) {
	.stations-navbar-wrapper .stations-navbar-grid .stations-navbar-grid-element {
		flex: 0 0 calc(100% / 10);
	}
}

.stations-navbar-wrapper {
	max-width: 1500px;
	margin-left: auto;
	margin-right: auto;
}

/* */

.dock {
	text-align: center;
	margin-bottom: 0;
	color: var(--content-text-color);
	font-weight: bold;
	font-size: 1.0rem;
	padding-top: 1.0rem;
	padding-bottom: 1.0rem;
}

.dock-number {
	color: var(--primary-text-color);
	font-weight: 900;
}

.dock-active {
	color: var(--available-ride-color);
}

.unavailable {
	color: var(--unavailable-dock-color);
}

.maintenance {
	color: var(--maintenance-dock-color);
}

.dock-free {
	color: var(--free-dock-color);
	/*font-family: Helvetica, Arial, sans-serif;
	font-weight: bold;*/
	font-family: fontBold;
}

.dock-title {
	text-align: center;
	margin-bottom: 0;
	color: var(--content-text-color);
	font-size: 1.0rem;
}

.regular-text {
	font-weight: normal;
	color: var(--content-text-color);
}

.map {
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	width: 100%;
	background-color: var(--background-color);
}

.schedule {
	height: 100%;
	width: 98%;
	padding: 0% 1% 0% 1%;
	padding-top: 1.5rem;
	padding-bottom: 0.75rem;
	background-color: var(--schedule-color);
}

.schedule h2 {
	padding-bottom: 1.7rem;
	padding-left: 1.0rem;
	padding-right: 1.0rem;
	color: var(--schedule-title-color);
	/*text-shadow: 1px 1px 5px var(--secondary-title-shadow-color);*/
	text-shadow: none;
	/*font-family: Helvetica, Arial, sans-serif;
	font-weight: 700;*/
	font-family: fontRegular;
}

.schedule h3 {
	text-align: center;
	color: var(--schedule-secondary-title-color);
	/*text-shadow: 1px 1px 5px var(--secondary-title-shadow-color);*/
	text-shadow: none;
	font-size: 1.4rem;
	/*font-family: Helvetica, Arial, sans-serif;
	font-weight: 700;*/
	font-family: fontRegular;
}

.schedule h4,
.schedule h5 {
	text-align: center;
	color: var(--schedule-content-text-color);
}

.row {
	display: flex;
}

[class*="col-"] {
	float: left;
}

.col {
	float: left;
}

.col-1 {
	width: 8.33%;
}

.col-2 {
	width: 16.66%;
}

.col-3 {
	width: 25%;
}

.col-4 {
	width: 33.33%;
}

.col-5 {
	width: 41.66%;
}

.col-6 {
	width: 50%;
}

.col-7 {
	width: 58.33%;
}

.col-8 {
	width: 66.66%;
}

.col-9 {
	width: 75%;
}

.col-10 {
	width: 83.33%;
}

.col-11 {
	width: 91.66%;
}

.col-12 {
	width: 100.0%;
}

/*.col-a {
	width: 5.00%;
}

.col-b {
	width: 25.00%;
}

.col-c {
	width: 22.50%;
}*/

@media screen and (max-width: 910px) {
	
	.col-a {
		width: 0.00%;
	}
	
	.col-b {
		width: 45.00%;
	}
	
	.col-c {
		width: 5.00%;
	}
}

@media screen and (min-width: 911px) {
	
	.col-a {
		width: 5.00%;
	}
	
	.col-b {
		width: 25.00%;
	}
	
	.col-c {
		width: 22.50%;
	}
}

.col-d {
	width: 30.00%;
}

.col-e {
	width: 5.00%;
}

.elements {
	display: block;
	align-self: center;
	max-width: 25.0rem;
}

.labelnote {
	margin: 0;
	color: var(--content-text-color);
	font-size: 1.0rem;
	align-self: center;
	padding: 1.0rem;
	text-align: center;
}

.contacts {
	padding: 0% 10%;
	padding-top: 0.5rem;
	padding-bottom: 0;
	background-color: var(--contacts-background-color);
}

.contacts>h2 {
	text-align: center;
	padding-top: 1.0rem;
	padding-bottom: 1.0rem;
	color: var(--secondary-title-color);
	/*text-shadow: 1px 1px 5px var(--secondary-title-shadow-color);*/
	text-shadow: none;
}

.contacts table {
	width: 100%;
	height: 100%;
	padding-top: 1.0rem;
	margin-left: auto;
	margin-right: auto;
	max-width: max-content;
}

footer {
	position: relative;
	padding: 0 0 0 0;
	margin: 0 0 0 0;
	width: 100%;
	height: 100%;
	background-color: var(--footer-color);
	border-top: 0.25rem solid var(--border-color);
}

footer h2 {
	font-size: 1.3rem;
}

footer .row img {
	height: 6.0rem;
}

/* Use with single image in footer

	footer .entities {
		max-width: 20.0rem;
		background-color: var(--entities-color);
		border: 0.25rem solid var(--border-color);
		margin-left: auto;
		margin-right: auto;
		padding-left: 1.0rem;
		padding-right: 1.0rem;
		padding-bottom: 1.0rem;
	}
	
	footer .entities p {
		color: var(--entities-title-color);
	}
	
	footer .entities .row {
		max-width: 20.0rem;
	}

*/

/* Use with several images in footer with frame */
footer .entities {
	max-width: 32.0rem;
	background-color: var(--entities-background-color);
	/*border: 0.25rem solid var(--border-color);*/
	margin-left: auto;
	margin-right: auto;
	padding-left: 1.0rem;
	padding-right: 1.0rem;
	margin-bottom: 1.5rem;
}

footer .entities p {
	color: var(--entities-title-color);
}

footer .entities .row {
	max-width: 32.0rem;
}

footer .entities table th.double-left-padding {
	padding-left: 2.0rem;
}

footer .entities table th span {
	font-size: 1.0rem;
	float: left;
}

footer .entities table td.single-left-padding {
	padding-left: 1.0rem;
}

footer .entities table td.double-left-padding {
	padding-left: 2.0rem;
}

footer img {
	margin-left: auto;
	margin-right: auto;
	padding: 0 0 0 0;
	width: auto;
}

.copyright {
	/*font-family: Helvetica, Arial, sans-serif;
	font-weight: bold;*/
	font-family: fontBold;
	height: 100%;
	padding-top: 0.5rem;
	padding-bottom: 1.0rem;
	background-color: var(--copyright-background-color);
}
/*
@media (max-width: 945px) {
	.copyright{
		padding-bottom: 55px;
	}
}
*/
.copyright>p {
	margin: 0;
	text-align: center;
	padding-top: 0rem;
	padding-bottom: 0.5rem;
	color: var(--primary-title-color);
}

.copyright>p a:hover {
	color: var(--hover-color);
}

.bottombuttons {
	/*font-family: Helvetica, Arial, sans-serif;
	font-weight: bold;*/
	font-family: fontBold;
	height: 100%;
	padding: 1.0rem;
}
.bottombuttons .select-items {
	top: -400% !important;
}

.custom-iw .gm-style-iw {
	width: 100% !important;
}

.custom-iw>div:first-child>div:nth-child(2) {
	width: 100% !important;
}

.custom-iw .gm-style-iw,
.custom-iw .gm-style-iw>div,
.custom-iw .gm-style-iw>div>div {
	width: 100% !important;
	max-width: 100% !important;
}

/** set here the width **/
.custom-iw,
.custom-iw>div:first-child>div:last-child {
	width: 100% !important;
}

.custom-iw>div:first-child>div:last-child {
	left: 0.5rem !important;
	top: 0 !important;
	width: 100% !important;
}

/** set here the desired background-color **/
/*#div-main-infoWindow, .custom-iw>div:first-child>div:nth-child(n-1)>div>div, .custom-iw>div>div:last-child, .custom-iw .gm-style-iw, .custom-iw .gm-style-iw>div, .custom-iw .gm-style-iw>div>div {
	  background-color:orange !important;
  }*/

/** close-button **/
.custom-iw>div:last-child {
	top: 0.02rem !important;
	right: 0 !important;
	width: 100% !important;
}

/** padding of the content **/
#div-main-infoWindow {
	width: 100% !important;
}

.map-marker-info-window-station-name {
	color: var(--primary-text-color);
	/*text-shadow: 1px 1px 5px var(--primary-text-shadow-color);*/
	text-shadow: none;
	/*font-family: Helvetica, Arial, sans-serif;
	font-weight: bold;*/
	font-family: fontBold;
	font-size: large;
	margin-top: 0.0rem;
}

.map-marker-info-window-station-number {
	padding: 0.0rem;
	margin: 0.0rem;
	/*font-family: Helvetica, Arial, sans-serif;
	font-weight: 100;*/
	font-family: fontLight;
	font-size: small;
}

.map-marker-info-window-image {
	border: 0.25rem solid var(--border-color);
}

.map-marker-info-detail {
	margin: 0.0rem;
	margin-top: 0.5rem;
}

.map-marker-info-window-button-info {
	margin-bottom: 0.5rem;
	margin-top: 1.0rem;
}

.map-marker-info-window-button-info button {
	/*font-family: Helvetica, Arial, sans-serif;
	font-weight: 700;*/
	font-family: fontRegular;
	font-size: 1.0rem;
	display: block;
	max-height: 2.6rem;
	background-color: var(--map-marker-button-background-color);
	color: var(--map-marker-button-text-color);
	border: 0.25rem solid var(--map-marker-button-border-color);
	border-radius: 0.6rem;
	padding: 0.5rem 0.5rem 0.25rem 0.5rem;
	margin: 0.0rem 0.2rem 0.2rem 0.0rem;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	height: 100%;
	width: 99%;
}

.map-marker-info-window-button-info button:hover,
.map-marker-info-window-button-info button:active {
	background-color: var(--map-marker-button-hover-background-color);
	border-color: var(--map-marker-button-hover-border-color);
	color: var(--map-marker-button-hover-text-color);
}

@media screen and (max-width: 415px) {
	.map-marker-info-window-button-info span {
		display: none;
	}

	.map-marker-info-window-button-info button:after {
		content: "Ver Mais";
		font-weight: bold;
	}
}

@media screen and (min-width: 416px) {
	.map-marker-info-window-button-info span {
		display: inline;
	}

	.map-marker-info-window-button-info button:after {
		content: none;
	}
}

.map-marker-info-window-button-map {
	margin-bottom: 0.5rem;
	margin-top: 0.5rem;
}

.map-marker-info-window-button-map button {
	/*font-family: Helvetica, Arial, sans-serif;
	font-weight: 700;*/
	font-family: fontRegular;
	font-size: 1.0rem;
	background-color: var(--map-marker-button-background-color);
	color: var(--map-marker-button-text-color);
	border: 0.25rem solid var(--map-marker-button-border-color);
	border-radius: 0.6rem;
	padding: 0.5rem 0.5rem 0.25rem 0.5rem;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	height: 100%;
	width: 100%;
}

.map-marker-info-window-button-map button:hover,
.map-marker-info-window-button-map button:active {
	background-color: var(--map-marker-button-hover-background-color);
	border-color: var(--map-marker-button-hover-border-color);
	color: var(--map-marker-button-hover-text-color);
}

@media screen and (max-width: 335px) {
	.map-marker-info-window-button-map span {
		display: none;
	}

	.map-marker-info-window-button-map button:after {
		content: "Ver no G Maps";
		font-weight: bold;
	}
}

@media screen and (min-width: 336px) {
	.mmap-marker-info-window-button-map span {
		display: inline;
	}

	.map-marker-info-window-button-map button:after {
		content: none;
	}
}

h1,
h2,
h3,
h4,
h5,
h6 {
	box-sizing: border-box;
	line-height: 1.5rem;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	color: var(--primary-text-color);
}

h1,
h2 {
	text-align: center;
}

h3,
h4,
h5,
h6 {
	text-align: left;
}

h1 {
	padding-top: 1.0rem;
}

h1,
h2 {
	/*font-family: Helvetica, Arial, sans-serif;
	font-weight: bold;*/
	font-family: fontBold;
}

h3,
h4 {
	/*font-family: Helvetica, Arial, sans-serif;
	font-weight: normal;*/
	font-family: fontRegular;
}

h5 {
	/*font-family: Helvetica, Arial, sans-serif;
	font-weight: bold;*/
	font-family: fontBold;
	font-size: 1.1rem;
}

h4,
h5 {
	margin: 3% 0;
}

section ol {
	counter-reset: list-counter;
	padding-left: 0;
}

section .letter-list {
	padding-left: 1.0rem;
}

li {
	line-height: 1.5rem;
}

.number-list li {
	counter-increment: list-counter;
	list-style-type: none;
	color: var(--content-text-color);
	padding-top: 1.0rem;
}

.number-list li:before {
	color: var(--primary-text-color);
	/*text-shadow: 1px 1px 5px var(--primary-text-shadow-color);*/
	text-shadow: none;
	content: counter(list-counter, decimal) ".";
	/*font-family: Helvetica, Arial, sans-serif;
	font-weight: bold;*/
	font-family: fontBold;
}

.dash-list li {
	list-style-type: none;
	color: var(--content-text-color);
	padding: 0% 0% 2% 0%;
	margin: 0% 8% 0% 8%;
}

.dash-list li:before {
	color: var(--primary-text-color);
	/*text-shadow: 1px 1px 5px var(--primary-text-shadow-color);*/
	text-shadow: none;
	content: "-";
	/*font-family: Helvetica, Arial, sans-serif;
	font-weight: bold;*/
	font-family: fontBold;
}

.square-list li {
	list-style-type: none;
	color: var(--content-text-color);
	text-indent: 1.0rem;
	padding-bottom: 0.5rem;
}

.square-list li:before {
	color: var(--primary-text-color);
	/*text-shadow: 1px 1px 5px var(--primary-text-shadow-color);*/
	text-shadow: none;
	content: "▪";
	/*font-family: Helvetica, Arial, sans-serif;
	font-weight: bold;*/
	font-family: fontBold;
	padding-right: 0.7rem;
}

.letter-list li {
	counter-increment: list-counter;
	list-style-type: none;
	color: var(--content-text-color);
	line-height: 1.5rem;
}

.letter-list li:before {
	color: var(--primary-text-color);
	/*text-shadow: 1px 1px 5px var(--primary-text-shadow-color);*/
	text-shadow: none;
	content: counter(list-counter, lower-alpha) ")";
	/*font-family: Helvetica, Arial, sans-serif;
	font-weight: bold;*/
	font-family: fontBold;
}

@-ms-viewport {
	width: device-width;
}

section {
	width: 80%;
	padding-left: 10%;
	padding-right: 10%;
	padding-bottom: 1.0rem;
	background-color: var(--background-color);
}

section>p {
	color: var(--content-text-color);
	/*font-family: Helvetica, Arial, sans-serif;
	font-weight: normal;*/
	font-family: fontRegular;
}

section>p.indent {
	text-indent: 1.0rem;
}

section>h1 {
	color: var(--primary-text-color);
	/*text-shadow: 1px 1px 5px var(--primary-text-shadow-color);*/
	text-shadow: none;
}

section>h2 {
	font-size: 1.3rem;
	line-height: 1.6rem;
	text-align: left;
	color: var(--primary-text-color);
	/*text-shadow: 1px 1px 5px var(--primary-text-shadow-color);*/
	text-shadow: none;
	padding-top: 1.0rem;
}

section>h2.titlecentering {
	text-align: center;
	margin-bottom: 0.0rem;
}

section>h3 {
	text-align: left;
	font-size: 1.0rem;
	margin-top: 1.0rem;
	/*text-shadow: 1px 1px 5px var(--primary-text-shadow-color);*/
	text-shadow: none;
	color: var(--tertiary-title-color);
}

.final-contacts {
	/*font-family: Helvetica, Arial, sans-serif;
	font-weight: bold;*/
	font-family: fontBold;
}

@supports (text-decoration-color: transparent) {
	.final-contacts a:hover {
		text-decoration-color: var(--hover-color);
	}
}

.img-social {
	margin: 0;
	width: 3.4rem;
	height: 3.4rem;
}

.img-social img {
	margin: 0;
	width: 3.4rem;
	height: 3.4rem;
}

.p-social {
	/*font-family: Helvetica, Arial, sans-serif;
	font-weight: bold;*/
	font-family: fontBold;
}

.p-social>a {
	position: relative;
	margin: 0;
	padding-left: 3%;
	padding-bottom: 1%;
}

.p-social>a>p {
	line-height: normal;
	font-size: 1.0rem;
	color: var(--link-color);
}

.p-social>a>p:hover {
	color: var(--hover-color);
}

.p-social>a:link {
	color: var(--link-color);
	text-decoration: none;
	display: inline-block;
}

@supports (text-decoration-color: transparent) {
	.p-social>a:visited {
		color: var(--content-text-color);
		text-decoration-color: var(--text-decoration-color);
		display: inline-block;
	}
}

@supports not (text-decoration-color: transparent) {
	.p-social>a:visited {
		color: var(--content-text-color);
		display: inline-block;
	}
}

.p-social>a:hover,
.p-social>a:active {
	background-color: transparent;
}

@supports (text-decoration-color: transparent) {
	.indent>a:hover {
		color: var(--hover-color);
		text-decoration-color: transparent;
	}
}

@supports not (text-decoration-color: transparent) {
	.indent>a:hover {
		color: var(--hover-color);
	}
}

@supports (text-decoration-color: transparent) {
	p>a:hover {
		color: var(--hover-color);
		text-decoration-color: var(--text-decoration-color);
	}
}

@supports not (text-decoration-color: transparent) {
	p>a:hover {
		color: var(--hover-color);
	}
}

a:link {
	color: var(--link-color);
}

a:visited {
	color: var(--visited-link-color);
}

.pedalada {
	height: 90%;
	padding-left: 5%;
	padding-right: 5%;
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;
	width: 90%;
}

.pedalada>img {
	max-height: 5.0rem;
	height: 65%;
	width: 30%;
	padding-left: 35%;
	padding-right: 35%;
}

.pedalada span {
	color: var(--link-color);
	font-size: 0.99rem;
	display: table;
	margin: 0 auto;
}

.pedalada p {
	color: var(--link-color);
	font-size: 0.99rem;
	margin: 0;
	width: 100%;
	text-align: center;
}

.pedalada a:link {
	color: var(--link-color);
	text-decoration: none;
}

.pedalada a:visited {
	color: var(--content-text-color);
	text-decoration: none;
}

.google-map {
	padding: 0 0 0 0;
	margin: 0 0 0 0;
	padding-left: 1%;
	padding-right: 1%;
	padding-bottom: 1.0rem;
	width: 98%;
}

.google-map #map_canvas {
	border: 0.25rem solid var(--border-color);
	border-radius: 0.6rem;
}

.google-map img {
	max-height: none;
}

/* arrows */

.arrow {
	display: inline-block;
	padding: 4.0px;
}

.right {
	border: solid var(--arrow-color);
	border-width: 0 1.8px 1.8px 0;
	color: var(--arrow-color);
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
}

.left {
	border: solid var(--arrow-color);
	border-width: 0 1.8px 1.8px 0;
	color: var(--arrow-color);
	transform: rotate(135deg);
	-webkit-transform: rotate(135deg);
}

.up {
	border: solid var(--round-button-text-color);
	border-width: 0 1.8px 1.8px 0;
	color: var(--round-button-text-color);
	transform: rotate(-135deg);
	-webkit-transform: rotate(-135deg);
}

.down {
	border: solid var(--round-button-text-color);
	border-width: 0 1.8px 1.8px 0;
	color: var(--round-button-text-color);
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
}

.round-button-top {
	border: 0.25rem solid var(--round-button-border-color);
	border-radius: 0.6rem;
	height: 1.0rem;
	width: 1.0rem;
	padding-left: 0.5rem;
	padding-bottom: 0.5rem;
	padding-right: 0.05rem;
	padding-top: 0.05rem;
	margin: 0.5rem;
	position: absolute;
	right: 0.5rem;
	top: 0.5rem;
	background-color: var(--round-button-background-color);
	color: var(--round-button-text-color);
}

.round-button-top:hover,
.round-button-top:active {
	background-color: var(--round-button-hover-background-color);
	color: var(--round-button-hover-text-color);
	border-color: var(--round-button-hover-border-color);
	/*box-shadow: 3px 3px 0px 0px var(--dark-shadow-color);*/
}

.round-button-top:hover .arrow,
.round-button-top:active .arrow {
	border-color: var(--round-button-hover-text-color);
}

.round-button-bottom {
	border: 0.25rem solid var(--round-button-border-color);
	border-radius: 0.6rem;
	height: 1.0rem;
	width: 1.0rem;
	padding-top: 0.3rem;
	padding-left: 0.5rem;
	padding-right: 0.05rem;
	padding-bottom: 0.3rem;
	margin: 0.5rem;
	position: absolute;
	right: 0.5rem;
	background-color: var(--round-button-background-color);
	color: var(--round-button-text-color);
	bottom: 10px;
}

/*
@media (max-width: 325px) {
	.round-button-bottom {
		bottom: 25.5rem;
	}
}

@media (min-width: 325px) {
	.round-button-bottom {
		bottom: 0.5rem;
	}
}
*/

.round-button-bottom:hover,
.round-button-bottom:active {
	background-color: var(--round-button-hover-background-color);
	color: var(--round-button-hover-text-color);
	border-color: var(--round-button-hover-border-color);
	/*box-shadow: 3px 3px 0px 0px var(--dark-shadow-color);*/
}

.round-button-bottom:hover .arrow,
.round-button-bottom:active .arrow{
	border-color: var(--round-button-hover-text-color);
}

/* IE */

.IE-image {
	background-color: var(--header-color);
}

.IE-paragraph {
	text-align: center;
	color: var(--content-text-color);
	background-color: var(--header-color);
}

.IE-body {
	background-color: var(--header-color);
}

/* IE */

/* User */

.current-sub {
	display: block;
	margin-left: auto;
	margin-right: auto;
	height: 5.5rem;
	background-color: var(--current-subscription-background-color);
	padding-top: 1.0rem;
	padding-bottom: 0.5rem;
	margin-top: 1.0rem;
	margin-bottom: 1.0rem;
	border: 0.25rem solid var(--border-color);
}

.current-sub h2 {
	text-align: center;
	font-size: 1.2rem;
	padding-top: 0.5rem;
	color: var(--secondary-title-color);
	/*text-shadow: 1px 1px 5px var(--secondary-title-shadow-color);*/
	text-shadow: none;
}

.current-sub h3 {
	text-align: center;
	color: var(--content-text-color);
	padding-top: 1.0rem;
}

.current-sub p {
	text-align: center;
	margin-left: 50%;
}

.current-user-info {
	display: block;
	margin-left: auto;
	margin-right: auto;
	background-color: var(--current-subscription-background-color);
	padding-top: 1.0rem;
	padding-bottom: 0.5rem;
	margin-top: 1.0rem;
	margin-bottom: 1.0rem;
	border: 0.25rem solid var(--border-color);
}

.current-user-info h2 {
	text-align: center;
	font-size: 1.2rem;
	padding-top: 0.5rem;
	color: var(--secondary-title-color);
	/*text-shadow: 1px 1px 5px var(--secondary-title-shadow-color);*/
	text-shadow: none;
}

.current-user-info h3 {
	text-align: center;
	color: var(--content-text-color);
	padding-top: 1.0rem;
}

.current-user-info p {
	text-align: center;
	margin-left: 50%;
}

.user-menu-center {
	padding: 0;
}

.user-menu-center ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

.user-menu-center li {
	list-style-type: none;
	text-align: center;
}

.user-menu-center li>button {
	/*font-family: Helvetica, Arial, sans-serif;
	font-weight: 700;*/
	font-family: fontRegular;
	background-color: var(--menu-button-background-color);
	color: var(--menu-button-text-color);
	border: 0.25rem solid var(--navbar-button-border-color);
	border-radius: 0.6rem;
	padding: 0.5rem 0.5rem 0.3rem 0.5rem;
	margin: 0.5rem 0.5rem 0.5rem 0.5rem;
	text-decoration: none;
	font-size: 1.0rem;
	cursor: pointer;
	height: 100%;
}

.user-menu-center li>button:hover,
.user-menu-center li>button:active {
	/*box-shadow: 3px 3px 0px 0px var(--dark-shadow-color);*/
	border-color: var(--menu-button-hover-border-color);
}

.user-menu-center input {
	/*font-family: Helvetica, Arial, sans-serif;
	font-weight: bold;*/
	font-family: fontBold;
	max-height: 2.0rem;
	background-color: var(--background-color);
	color: var(--content-text-color);
	border: 0.25rem solid var(--menu-button-border-color);
	border-radius: 0.6rem;
	text-decoration: none;
	margin-top: -0.4rem;
	margin-bottom: 0.4rem;
	padding: 0.2rem;
	padding-left: 0.3rem;
	padding-right: 0.3rem;
	font-size: 0.7rem;
	cursor: pointer;
	height: 100%;
}

.user-menu-center input:hover {
	/*box-shadow: 3px 3px 0px 0px var(--dark-shadow-color);*/
	border-color: var(--menu-button-hover-border-color) !important;
}

#selectedFileName, .selectedFileName {
	/*font-family: Helvetica, Arial, sans-serif;
	font-weight: normal;*/
	font-family: fontRegular;
	max-height: 2.0rem;
	font-size: 1.0rem;
}

.button-menu-center {
	padding: 0;
}

.button-menu-center ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

.button-menu-center li {
	text-align: center;
	list-style-type: none;
}

.button-menu-center li>button {
	/*font-family: Helvetica, Arial, sans-serif;
	font-weight: 700;*/
	font-family: fontRegular;
	max-height: 2.6rem;
	background-color: var(--menu-button-background-color);
	color: var(--menu-button-text-color);
	border: 0.25rem solid var(--menu-button-border-color);
	border-radius: 0.6rem;
	padding: 0.48rem 0.5rem;
	margin: 0.2rem 0.2rem 0.2rem 0.2rem;
	text-decoration: none;
	font-size: 1.0rem;
	cursor: pointer;
	height: 100%;
}

.button-menu-center li>button:hover,
.button-menu-center li>button:active {
	/*box-shadow: 3px 3px 0px 0px var(--dark-shadow-color);*/
	border-color: var(--menu-button-hover-border-color);
}

.title-with-image {
	color: var(--title-with-image-text-color);
	/*font-family: Helvetica, Arial, sans-serif;
	font-weight: bold !important;*/
	font-family: fontBold;
	font-size: 1.1rem;
	background-color: var(--title-with-image-background-color);
	border-radius: 0.6rem;
	padding-top: 0.8rem;
	padding-bottom: 0.5rem;
	text-align: center;
	margin: auto;
	width: 13%;
	min-width: 20.0rem;
}

.title-with-image img {
	display: inline-block;
	vertical-align: middle;
	padding-bottom: 0.3rem;
}

.three-button-menu-inline {
	display: inline-flex;
	width: 100%;
	padding-bottom: 1.0rem;
}

.three-button-menu-inline div {
	width: 32%;
}

.three-button-menu-inline button {
	/*font-family: Helvetica, Arial, sans-serif;
	font-weight: 700;*/
	font-family: fontRegular;
	background-color: var(--menu-button-background-color);
	color: var(--menu-button-text-color);
	border: 0.25rem solid var(--menu-button-border-color);
	border-radius: 0.6rem;
	padding: 0.5rem 0.5rem 0.25rem 0.5rem;
	margin: 0.0rem 0.2rem 0.2rem 0.0rem;
	text-decoration: none;
	font-size: 1.0rem;
	cursor: pointer;
	height: 100%;
	width: 100%;
}

.three-button-menu-inline button:hover,
.three-button-menu-inline lbutton:active {
	/*box-shadow: 3px 3px 0px 0px var(--dark-shadow-color);*/
	background-color: var(--menu-button-hover-background-color);
	border-color: var(--menu-button-hover-border-color);
	color: var(--menu-button-hover-text-color);
}

.normal-button:hover,
.normal-button:active {
	background-color: var(--menu-button-hover-background-color) !important;
	color: var(--menu-button-hover-text-color) !important;
}

.valid-button:hover,
.valid-button:active {
	background-color: var(--button-valid-color) !important;
	border-color: var(--button-valid-color) !important;
	/*box-shadow: 3px 3px 0px 0px var(--button-valid-shadow-color) !important;*/
}

.danger-button:hover,
.danger-button:active {
	background-color: var(--button-danger-color) !important;
	border-color: var(--button-danger-color) !important;
	/*box-shadow: 3px 3px 0px 0px var(--button-danger-shadow-color) !important;*/
}

.user-menu-left {
	padding: 0;
}

.user-menu-left ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

.user-menu-left li {
	padding-top: 0.5rem;
	list-style-type: none;
	text-align: left;
}

.user-menu-left li>a:hover,
.user-menu-left li>a:active {
	color: var(--hover-color);
}

.user-menu-left li>button {
	/*font-family: Helvetica, Arial, sans-serif;
	font-weight: 700;*/
	font-family: fontRegular;
	background-color: var(--menu-button-background-color);
	color: var(--menu-button-text-color);
	border: 0.25rem solid var(--menu-button-border-color);
	border-radius: 0.6rem;
	padding: 0.5rem 0.5rem 0.25rem 0.5rem;
	margin: 0.0rem 0.2rem 0.2rem 0.0rem;
	text-decoration: none;
	font-size: 1.0rem;
	cursor: pointer;
	height: 100%;
	width: 40%;
}

.user-menu-left li>button:hover,
.user-menu-left li>button:active {
	/*box-shadow: 3px 3px 0px 0px var(--dark-shadow-color);*/
	background-color: var(--menu-button-hover-background-color);
	border-color: var(--menu-button-hover-border-color);
	color: var(--menu-button-hover-text-color);
}

.confirm-email-banner {
	display: block;
	margin-left: auto;
	margin-right: auto;
	background-color: var(--banner-background-color);
	border: 0.25rem solid var(--border-color);
	padding-top: 1.0rem;
	margin-bottom: 0.5rem;
	margin-top: 1.5rem;
	height: 100%;
}

.confirm-email-banner h1 {
	text-align: center;
	font-size: 1.0rem;
	font-weight: normal;
	padding-top: 0.5rem;
	color: var(--banner-title-color);
}

.confirm-email-banner p {
	text-align: center;
	color: var(--banner-message-color);
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}

.confirm-email-banner button {
	/*font-family: Helvetica, Arial, sans-serif;
	font-weight: 700;*/
	font-family: fontRegular;
	max-height: 2.6rem;
	background-color: var(--banner-title-color);
	color: var(--content-text-color);
	border: 0.25rem solid var(--border-color);
	border-radius: 0.6rem;
	padding: 0.45rem 0.5rem;
	margin: 0.0rem 0.2rem 0.2rem 0.0rem;
	position: relative;
	text-align: center;
	text-decoration: none;
	font-size: 1.0rem;
	cursor: pointer;
	height: 100%;
	width: 10.0rem;
	margin-top: 1.0rem;
}

.confirm-email-banner button:hover {
	background-color: var(--button-danger-color);
}

/* account-suspended */

.account-suspended-banner {
	display: block;
	margin-left: auto;
	margin-right: auto;
	background-color: var(--banner-background-color);
	border: 0.25rem solid var(--border-color);
	padding-top: 1.0rem;
	padding-bottom: 1.0rem;
	margin-bottom: 0.65rem;
	margin-top: 1.5rem;
}

.account-suspended-banner h1 {
	text-align: center;
	font-size: 1.0rem;
	font-weight: normal;
	padding-top: 0.5rem;
	color: var(--banner-title-color);
}

.account-suspended-banner p {
	text-align: center;
	color: var(--banner-message-color);
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}

.account-suspended-banner button {
	/*font-family: Helvetica, Arial, sans-serif;
	font-weight: 700;*/
	font-family: fontRegular;
	max-height: 2.6rem;
	background-color: var(--banner-title-color);
	color: var(--content-text-color);
	border: 0.25rem solid var(--border-color);
	border-radius: 0.6rem;
	padding: 0.6rem 0.5rem 0.55rem 0.5rem;
	margin: 0.0rem 0.2rem 0.2rem 0.0rem;
	position: relative;
	text-align: center;
	text-decoration: none;
	font-size: 1.0rem;
	cursor: pointer;
	height: 100%;
	width: 10.0rem;
	margin-top: 1.0rem;
}

.suspended-account-contacts p {
	color: var(--banner-message-color);
	font-weight: bold;
}

.suspended-account-contacts span {
	color: var(--banner-secondary-title-color);
	font-weight: bold;
}

.suspended-account-contacts a {
	color: var(--banner-message-color);
	font-weight: bold;
}

.suspended-account-contacts a:hover,
.suspended-account-contacts a:active {
	color: var(--banner-hover-color);
	text-decoration-color: var(--banner-hover-color);
	font-weight: bold;
}

/* user-authentication */

.auth-form {
	display: flex;
	justify-content: center;
}

.auth-form label {
	color: var(--content-text-color);
	margin-bottom: 1.0rem;
}

.auth-form input {
	margin-top: 0.6rem;
	margin-bottom: 1.0rem;
}

/* user-details */

.user-details-center {
	padding: 0;
	margin-bottom: 0rem;
}

.user-details-center ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

.user-details-center li {
	list-style-type: none;
	padding-top: 0.5rem;
	text-align: center;
}

.user-details-center h2 {
	font-size: 1.1rem;
	/*font-family: Helvetica, Arial, sans-serif;
	font-weight: bold;*/
	font-family: fontBold;
	text-align: center;
	/*text-shadow: 1px 1px 5px var(--primary-text-shadow-color);*/
	text-shadow: none;
}

.user-profile-image-container {
	overflow: hidden;
	position: relative;
}

.user-profile-image {
	display: block;
	width: 15.0rem;
	height: 15.0rem;
	border: 0.25rem solid var(--border-color);
}

.user-profile-preview-image-container {
	overflow: hidden;
	position: relative;
}

.user-profile-preview-image {
	display: block;
	width: 15.0rem;
	height: 15.0rem;
	border: 0.25rem solid var(--border-color);
}

.breakdown-preview-image-container {
	overflow: hidden;
	position: relative;
}

.breakdown-preview-image {
	display: block;
	width: 15.0rem;
	/*height: 15.0rem;*/
	border: 0.25rem solid var(--border-color);
}

.valid-image-message {
	color: var(--user-details-message-valid-color) !important;
	background-color: var(--user-details-message-background-color);
	padding: 0.5rem;
	display: none;
}

.invalid-image-message {
	color: var(--user-details-message-invalid-color) !important;
	background-color: var(--user-details-message-background-color);
	padding: 0.5rem;
	display: none;
}

/* user-authentication */

.auth-form {
	display: flex;
	justify-content: center;
}

.auth-form label {
	color: var(--content-text-color);
	margin-bottom: 1.0rem;
}

.auth-form input {
	margin-top: 0.6rem;
	margin-bottom: 1.0rem;
}

/* user-registration */

.regist-form {
	display: flex;
	justify-content: center;
}

.regist-form form {}

.regist-form label {
	color: var(--content-text-color);
	margin-bottom: 1.0rem;
}

.regist-form input {
	margin-top: 0.4rem;
	margin-bottom: 1.0rem;
	margin-right: 0;
	width: 20.0rem;
}

.normal-text-field {
	font-size: 0.9rem !important;
}

.smaller-text-field {
	font-size: 0.9rem !important;
	max-width: 17.0rem !important;
}

.small-button {
	/*font-family: Helvetica, Arial, sans-serif;
	font-weight: 700;*/
	font-family: fontRegular;
	max-height: 2.6rem;
	background-color: var(--menu-button-background-color);
	color: var(--menu-button-text-color);
	border: 0.25rem solid var(--menu-button-border-color);
	border-radius: 0.6rem;
	padding: 0.5rem 0.4rem 0.5rem 0.4rem;
	margin: 0.0rem 0.2rem 0.2rem 0.0rem;
	position: relative;
	text-align: center;
	text-decoration: none;
	font-size: 1.0rem;
	cursor: pointer;
	height: 100%;
	width: 100%;
	margin-top: 1.0rem;
}

.small-button:enabled {
	background-color: var(--menu-button-background-color);
	border-color: var(--menu-button-border-color);
	color: var(--menu-button-text-color);
}

.small-button:enabled:hover,
.small-button:enabled:active {
	/*box-shadow: 3px 3px 0px 0px var(--dark-shadow-color);*/
	background-color: var(--menu-button-hover-background-color);
	border-color: var(--menu-button-hover-border-color);
	color: var(--menu-button-hover-text-color);
}

.small-button:disabled:hover,
.small-button:disabled:active {
	box-shadow: none;
	background-color: var(--grey-color) !important;
	border-color: var(--grey-color) !important;
	color: #00A0E4 !important;
}

.small-button:disabled,
.small-button[disabled] {
	background-color: var(--grey-color) !important;
	border-color: var(--grey-color) !important;
	color: #00A0E4;
	cursor: default;
}

.small-button-secondary-appearance {
	background-color: var(--button-valid-secondary-color) !important;
}

.small-button-secondary-appearance:hover,
.small-button-secondary-appearance:active {
	background-color: var(--grey-color) !important;
}

/* user-subscription BEGIN */

.subscription-type {
	padding: 1.0rem;
}

.subscription-type * {
	background-color: var(--background-color);
}

.subscription-type h1 {
	padding-bottom: 1.0rem;
	color: var(--background-color);
	font-size: 1.5rem;
	text-align: center;
}

.subscription-type img:hover {
	box-shadow: 0 0 10px 1px var(--dark-shadow-color);
}

.subscription-type-wrapper .subscription-type-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.subscription-type-wrapper .subscription-type-grid .subscription-type-grid-element {
	flex: 0 0 calc(100%);
}

@media (max-width: 672px) {
	.subscription-type-wrapper .subscription-type-grid .subscription-type-grid-element {}
}

@media (min-width: 672px) and (max-width: 992px) {
	.subscription-type-wrapper .subscription-type-grid .subscription-type-grid-element {
		flex: 0 0 calc(100% / 2);
	}
}

@media (min-width: 992px) and (max-width: 1312px) {
	.subscription-type-wrapper .subscription-type-grid .subscription-type-grid-element {
		flex: 0 0 calc(100% / 3);
	}
}

@media (min-width: 1312px) {
	.subscription-type-wrapper .subscription-type-grid .subscription-type-grid-element {
		flex: 0 0 calc(100% / 4);
	}
}

.subscription-type-wrapper {
	max-width: 1500px;
	margin-left: auto;
	margin-right: auto;
}

/* subscription-type grid - BEGIN */

.subscription-type-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(20.0rem, 1fr));
}

.subscription-type-grid-element {
	padding-top: 1.0rem;
	padding-left: 1.0rem;
	padding-right: 1.0rem;
	padding-bottom: 1.0rem;
	border: 0.25rem solid var(--border-color);
	margin: 1.0rem;
	background-color: var(--subscription-type-grid-element-background-color);
}

.subscription-type-grid-element p {
	text-align: center;
}

.subscription-type-grid-element * {
	background-color: var(--subscription-type-grid-element-background-color);
}

.subscription-type-grid-element h2 {
	color: var(--subscription-type-grid-element-text-color);
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	font-size: 1.2rem;
	text-align: center;
	border: 0.25rem solid var(--subscription-type-grid-button-border-color);
}

.subscription-type-grid-element h3 {
	color: var(--background-color);
	/*font-family: Helvetica, Arial, sans-serif;
	font-weight: normal;*/
	font-family: fontRegular;
	text-align: center;
}

.subscription-type-grid-element a {
	padding-top: 1.0rem;
	padding-bottom: 1.0rem;
	width: 90%;
	display: block;
	margin: auto;
}

.subscription-type-grid-element button {
	background-color: var(--subscription-type-grid-button-background-color) !important;
	border-color: var(--subscription-type-grid-button-border-color) !important;
}

.subscription-type-grid-element button:hover,
.subscription-type-grid-element button:active {
	background-color: var(--subscription-type-grid-button-hover-color) !important;
	border-color: var(--subscription-type-grid-button-hover-border-color) !important;
}

.subscription-type-grid-element img {
	border-radius: 0.6rem;
	margin-left: auto;
	margin-right: auto;
	padding: 0 0 0 0;
	width: 100%;
	height: auto;
}

/* user-subscription END */

/* user-area */

.label-with-link a {
	color: var(--link-color);
	text-decoration-color: var(--text-decoration-color);
}

.label-with-link a:hover,
.label-with-link a:active {
	color: var(--secondary-hover-color);
	text-decoration-color: var(--secondary-hover-color);
}

.register {
	text-align: center;
}

.register p {
	font-weight: bold;
}

.register button {
	color: var(--content-text-color);
	margin-left: 0.5rem;
}

.user-area-image {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 10.0rem;
	height: 10.0rem;
}

#birthdateDay {
	width: 3.0rem;
	padding: 12px 20px;
	margin: 0;
	border: 1px solid #ccc;
}

#birthdateMonth {
	width: 3.0rem;
	padding: 12px 20px;
	margin: 0;
	border: 1px solid #ccc;
}

#birthdateYear {
	width: 3.5rem;
	padding: 12px 20px;
	margin: 0;
	border: 1px solid #ccc;
}

#currentDay {
	width: 3.0rem;
	padding: 12px 20px;
	margin: 0;
	border: 1px solid #ccc;
}

#currentMonth {
	width: 3.0rem;
	padding: 12px 20px;
	margin: 0;
	border: 1px solid #ccc;
}

#currentYear {
	width: 3.5rem;
	padding: 12px 20px;
	margin: 0;
	border: 1px solid #ccc;
}

@media (max-width: 375px) {
	#birthdateYear {
		margin-top: 12px !important;
	}
}

@media (max-width: 255px) {
	#birthdateMonth {
		margin-top: 12px !important;
	}
}

#userCardNumber {
	padding-bottom: 0;
	text-shadow: none;
}

/* Full-width input fields */
input[type=text],
input[type=password],
input[type=email] {
	width: 100%;
	padding: 12px 20px;
	margin: 8px 0;
	display: inline-block;
	box-sizing: border-box;
	border: 0.25rem solid var(--content-text-color);
	border-radius: 5px;
	color: var(--content-text-color);
	/*box-shadow: 4px 4px var(--grey-color);*/
}

/* Set a style for all buttons */

img.avatar {
	width: 40%;
	border-radius: 50%;
}

.modal-header {
	position: relative;
}

.modal-header h1 {
	background-color: var(--background-color);
}

.modal-container {
	padding: 1.5rem;
}

.modal-container ul {
	list-style-type: none;
}

.modal-container label {
	color: var(--form-label-color);
	font-weight: 600;
}

.default-checkbox {
	margin-right: 0.5rem;
	margin-bottom: 0.8rem !important;
	height: 0.9rem;
	border: 1px solid var(--grey-color);
	border-radius: 5px;
	color: var(--content-text-color);
	/*box-shadow: 4px 4px var(--grey-color);*/
}

.form-checkbox {
	margin-top: 0.7rem;
}

.checkbox-label {
	color: var(--form-label-color);
}

.checkbox-label a {
	color: var(--form-link-color) !important;
}

.checkbox-label a:hover,
.checkbox-label a:active {
	color: var(--form-hover-color) !important;
}

#userAcceptCheckbox {
	margin-right: 0.5rem;
	margin-bottom: 0.8rem;
	height: 0.9rem;
}

#userAcceptCheckboxLabel {
	color: var(--form-label-color);
}

#userAcceptCheckboxLabel a {
	color: var(--form-link-color) !important;
}

#userAcceptCheckboxLabel a:hover,
#userAcceptCheckboxLabel a:active {
	color: var(--form-hover-color) !important;
}

span.psw {
	float: right;
	padding-top: 0.7rem;
}

/* The Modal (background) */
.modal {
	display: none;
	/* Hidden by default */
	position: fixed;
	/* Stay in place */
	z-index: 1;
	/* Sit on top */
	left: 0;
	top: 0;
	width: 100%;
	/* Full width */
	height: 100%;
	/* Full height */
	overflow: auto;
	/* Enable scroll if needed */
	background-color: rgb(0, 0, 0);
	/* Fallback color */
	background-color: rgba(0, 0, 0, 0.9);
	/* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
	background-color: var(--background-color);
	width: auto;
	border: 0.25rem solid var(--border-color);
}

.modal-content input {
	margin-bottom: 1.5rem;
	font-size: 1.0rem;
	padding: 0.8rem;
	margin-top: 0.7rem;
	font-size: 1.0rem;
	display: inline-block;
	/*border: 0.25rem solid var(--content-text-color);*/
	border-radius: 5px;
	color: var(--content-text-color);
	/*box-shadow: 4px 4px var(--grey-color);*/
}

.modal-content select {
	padding: 0.2rem 0;
	margin-top: 0.7rem;
	margin-bottom: 1.5rem;
	font-size: 1.0rem;
	display: inline-block;
	border: 1px solid var(--grey-color);
	border-radius: 5px;
	color: var(--content-text-color);
	/*box-shadow: 4px 4px var(--grey-color);*/
}

.modal-content textarea {
	font-size: 1.0rem;
	width: 100%;
	border: 1px solid #ccc;
	box-sizing: border-box;
	padding: 0.8rem;
	margin-top: 0.7rem;
	margin-bottom: 1.5rem;
	display: inline-block;
	border: 1px solid var(--grey-color);
	border-radius: 5px;
	color: var(--content-text-color);
	/*box-shadow: 4px 4px var(--grey-color);*/
}

@media screen and (min-width: 1025px) {
	.modal-content {
		background-color: var(--background-color);
		width: 30%;
		margin-left: 35%;
		margin-right: 35%;
		margin-top: 10%;
		margin-bottom: 10%;
		border: 0.25rem solid var(--border-color);
	}
}

/* The Close Button (x) */
.close {
	position: absolute;
	right: 0.5rem;
	top: -0.3rem;
	margin: 0;
	color: var(--content-text-color);
	font-size: 35px;
	font-weight: bold;
}

.close:hover,
.close:focus {
	color: var(--button-danger-color);
	cursor: pointer;
}

/* The Remove Button (x) */
.remove-button {
	display: inline;
	margin-left: 0.5rem;
	color: var(--content-text-color);
	font-size: 1.0rem;
	font-weight: bold;
}

.remove-button:hover,
.remove-button:active {
	color: var(--button-danger-color);
	cursor: pointer;
}

input[type="color"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"],
select:focus,
textarea {
	font-size: 16px;
}

/* snackbar */

#snackbar {
	display: none;
	background-color: var(--snackbar-message-background-color);
	color: var(--snackbar-message-color);
	text-align: center;
	border-radius: 0.1rem;
	padding: 1.0rem;
	z-index: 1;
	bottom: 1.0rem;
	font-size: 1.0rem;
	margin-left: 0;
	margin-right: 0;
	margin-top: 1.5rem;
	margin-bottom: 0.5rem;
}

#snackbar.show {
	display: block;
	-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
	animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

/* User - END */

/* loader */

.loader {
	border: 0.5rem solid #f3f3f3;
	border-radius: 50%;
	border-top: 0.5rem solid black;
	border-bottom: 0.5rem solid black;
	width: 0.1rem;
	height: 0.1rem;
	-webkit-animation: spin 2s linear infinite;
	animation: spin 2s linear infinite;
	position: relative;
	display: inline-block;
}

@-webkit-keyframes spin {
	0% {
		-webkit-transform: rotate(0deg);
	}

	100% {
		-webkit-transform: rotate(360deg);
	}
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

/* Report A Problem */

.form-success {
	color: var(--snackbar-message-valid-color);
	display: none;
}

.form-error-1,
.form-error-2 {
	color: var(--snackbar-message-valid-color);
	display: none;
}

/* Report A Problem - END */

/* User History */

.user-history-list-container {
	display: flex;
	justify-content: center;
	padding-top: 1.0rem;
	padding-bottom: 1.0rem;
	color: var(--user-history-header-color);
}

.user-history-list {
	border-left: 0.25rem solid var(--border-color);
	border-right: 0.25rem solid var(--border-color);
	border-top: 0.25rem solid var(--border-color);
	border-collapse: collapse;
}

.user-history-list a {
	background-color: var(--user-history-list-item-background-color);
}

.user-history-list a:hover,
.user-history-list a:active {
	background-color: var(--user-history-hover-color);
}

.user-history-list-row {
	display: grid;
	text-decoration: none;
	color: inherit;
	grid-template-columns: 5.0rem 6.0rem 6.0rem;
	place-items: center;
	border-bottom: 0.25rem solid var(--border-color);
	cursor: pointer;

	&:hover,
	&:focus {
		background: #f2f3ff;
		outline: none;
	}

	&:last-child {
		border-bottom: none;
	}
}

.user-history-list-row-cell {
	padding: 0.8rem;
	color: black !important;
}

.modal-info {
	color: var(--user-history-modal-info-color);
	font-weight: bolder !important;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}

.modal-info-details {
	color: var(--user-history-modal-info-details-color) !important;
	font-weight: normal;
}

/* User History - END */

/* User Statistics - BEGIN */

#statistics p {
	color: var(--content-text-color) !important;
	/*font-family: Helvetica, Arial, sans-serif;
	font-weight: normal !important;*/
	font-family: fontRegular;
}

.info-message {
	display: none;
	color: var(--content-text-color);
	font-size: 1.0rem;
}

.info-message-icon {
	position: relative;
	font-size: 1.1rem;
	bottom: 0.1rem !important;
	cursor: pointer;
}

/*.info-message-icon:hover+.info-message*/
.showHelp .info-message {
	display: block;
}

#monthlyTrips,
#tripsPerStation {
	padding: 10px;
	background: #fff;
	margin-bottom: 1.0rem;
	border: 0.25rem solid #14377D;
}

/* User Statistics - END */

/* Custom Alert */

/* The Alert (background) */
.alert {
	display: none;
	/* Hidden by default */
	position: fixed;
	/* Stay in place */
	z-index: 1;
	/* Sit on top */
	left: 0;
	top: 0;
	width: 100%;
	/* Full width */
	height: 100%;
	/* Full height */
	overflow: auto;
	/* Enable scroll if needed */
	background-color: rgb(0, 0, 0);
	/* Fallback color */
	background-color: rgba(0, 0, 0, 0.9);
	/* Black w/ opacity */
	color:#000;
}

.alert-content {
	background-color: var(--background-color);
	width: auto;
	border: 0.25rem solid var(--border-color);
}

.alert-content input {
	margin-bottom: 1.5rem;
	font-size: 1.0rem;
}

.alert-content select {
	padding: 12px 20px;
	margin: 8px 0;
	margin-top: 0.7rem;
	margin-bottom: 1.5rem;
	font-size: 16px;
	display: inline-block;
	border: 1px solid var(--grey-color);
	border-radius: 5px;
	color: var(--content-text-color);
	background-color: var(--select-color);
	/*box-shadow: 4px 4px var(--grey-color);*/
}

.alert-content textarea {
	margin-bottom: 1.5rem;
	margin-top: 0.7rem;
	font-size: 1.0rem;
	width: 100%;
	border: 1px solid #ccc;
}

@media screen and (min-width: 1025px) {
	.alert-content {
		background-color: var(--background-color);
		width: 30%;
		margin-left: 35%;
		margin-right: 35%;
		margin-top: 10%;
		margin-bottom: 10%;
		border: 0.25rem solid var(--border-color);
	}
}

.alert-header {
	position: relative;
}

.alert-header h1 {
	background-color: var(--background-color);
}

.alert-container {
	padding: 1.5rem;
	padding-top: 0.0rem;
}

.alert-container ul {
	list-style-type: none;
}

.alert-container label {
	color: var(--form-label-color);
	font-weight: 600;
}

/* FAQ */

.accordion {
	font-weight: bold !important;
	text-transform: uppercase !important;
	color: #000 !important;
	background-color: #eee !important;
	cursor: pointer !important;
	padding: 18px !important;
	width: 100% !important;
	border: none !important;
	text-align: left !important;
	outline: none !important;
	font-size: 15px !important;
	transition: 0.4s !important;
}

.accordion.active,
.accordion:hover {
	background-color: #ccc !important;
}

.accordion:after {
	content: '\002B' !important;
	color: #000 !important;
	font-weight: bold !important;
	float: right !important;
	margin-left: 5px !important;
}

.accordion.active:after {
	content: "\2212" !important;
}

.panel {
	border-bottom: solid 1px #000 !important;
	padding: 0 18px !important;
	background-color: white !important;
	max-height: 0;
	overflow: hidden !important;
	transition: max-height 0.2s ease-out !important;
}

/* Custom Select */

.custom-select {
	/*font-family: Helvetica, Arial, sans-serif;
	font-weight: bold;*/
	font-family: fontBold;
	max-height: 2.6rem;
	background-color: var(--background-color);
	color: var(--secondary-color);
	border: .25rem solid var(--secondary-color);
	border-radius: .6rem;
	margin: .5rem .2rem .2rem;
	text-decoration: none;
	font-size: .8rem;
	cursor: pointer;
	height: 100%;

	text-align: center;
	font-weight: bold;
	margin: auto;
}

.custom-select {
	position: relative;
	font-family: Arial;
	width: 150px !important;
}

.custom-select select {
	display: none;
}

.select-selected {
	background-color: #fff;
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
}

.select-selected:after {
	position: absolute;
	content: "";
	top: 14px;
	right: 10px;
	width: 0;
	height: 0;
	border: 6px solid transparent;
	border-color: #000 transparent transparent transparent;
}

.select-selected.select-arrow-active:after {
	border-color: transparent transparent #000 transparent;
	top: 7px;
}

.select-items div,
.select-selected {
	color: #000;
	padding: 8px 16px;
	border: 1px solid transparent;
	border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
	cursor: pointer;
	user-select: none;
}

.select-items {
	position: absolute;
	background-color: #fff;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 99;
}

.select-hide {
	display: none;
}

.select-items div:hover,
.same-as-selected {
	background-color: rgba(0, 0, 0, 0.1);
}

/* user area */

form[name="recoverPasswordForm"] {
	width: 13.8rem;
}

form[name="requestPasswordRecoverForm"] {
	width: auto;
}

.messageHelp {
	display: none;
	color: var(--content-text-color);
	font-size: 1.0rem;
	padding-top: 0.5rem;
}

.messageInvalid {
	display: none;
	color: var(--button-danger-color);
	font-size: 1.0rem;
	padding-top: 0.5rem;
}

.help {
	padding-bottom: 1.0rem;
}

.help .messageHelp {
	display: block;
}

.help input[type=text],
.help input[type=password],
.help textarea,
.help select,
.help input[type=date] {
	margin-bottom: 0;
}

.invalid {
	padding-bottom: 1.0rem;
}

.invalid .messageInvalid {
	display: block;
}

.invalid input[type=text],
.invalid input[type=password],
.invalid input[type=date],
.invalid textarea,
.invalid select {
	margin-bottom: 0;
}

@media (max-width: 375px) {
	footer .entities img {
		max-height: 6rem;
		max-width: 100%;
		padding-bottom: 1.0rem;
	}
	footer .entities {
		text-align: center;
	}
	footer .entities .col {
		float: inherit;
	}
	footer .entities .row {
		display: block;
	}
}

#cookie-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	margin: 0 !important;
	z-index: 999;
	border-radius: 0;
	background-color: var(--cookie-bar-background-color);
	text-align: center!important;
	/*font-family: Helvetica, Arial, sans-serif;
	font-weight: normal;*/
	font-family: fontRegular;
	/*border-top: 0.25rem solid var(--border-color);*/
}

#cookie-bar p {
	width: 80%;
	padding-left: 10%;
	padding-right: 10%;
	font-size: 0.9em;
	color: var(--cookie-bar-text-color);
}

#cookie-bar a:hover, #cookie-bar a:active {
	color: var(--hover-color);
	text-decoration-color: var(--hover-color);
}

#cookie-bar a {
	color: var(--cookie-bar-text-color);
	text-decoration: underline;
	text-decoration-color: var(--cookie-bar-text-color);
}

#cookie-bar #cookie-accept-btn {
	vertical-align: baseline;
	background-color: var(--cookie-bar-button-background-color);
	color: var(--cookie-bar-button-text-color);
	padding: 0.5rem 0.5rem 0.25rem 0.5rem;
	margin: 0.2rem 0.2rem 0rem 0.5rem;
	cursor: pointer;
	/*font-family: Helvetica, Arial, sans-serif;
	font-weight: bold;*/
	font-family: fontBold;
	font-size: 1.0rem;
	border: 0.25rem solid var(--cookie-bar-button-border-color);
	border-radius: 0.6rem;
}

#cookie-bar #cookie-accept-btn:hover {
	background-color: var(--cookie-bar-button-hover-background-color) !important;
	color: var(--cookie-bar-button-hover-text-color) !important;
	border-color: var(--cookie-bar-button-hover-border-color) !important;
	/*box-shadow: 3px 3px 0px 0px var(--light-shadow-color);*/
}

#recordsTrip, #recordsSubscription {
	border-bottom: 0.25rem solid var(--border-color);
}

#recordsTripPagination, #recordsSubscriptionPagination {
	text-align: center;
}

#recordsTripPagination a, #recordsSubscriptionPagination a {
	margin: 5px;
	padding: 5px;
	min-width: 15px;
	height: 10px;
	cursor: pointer;
	display: inline-table;
	font-size: 12px;
	color: var(--link-color);
	background-color: var(--user-history-list-item-background-color);
}

#recordsTripPagination a:hover, #recordsTripPagination a.selected, #recordsTripPagination a:hover, #recordsTripPagination a.selected {
	background-color: var(--user-history-hover-color);			    
}

footer.paddingCookie {
  padding-bottom: 13rem;
}

@media (min-width: 260px) {
  footer.paddingCookie {
	padding-bottom: 11.5rem;
  }
}

@media (min-width: 320px) {
  footer.paddingCookie {
	padding-bottom: 10.2rem;
  }
}

@media (min-width: 360px) {
  footer.paddingCookie {
	padding-bottom: 10.1rem;
  }
}

@media (min-width: 375px) {
  footer.paddingCookie {
	padding-bottom: 8.7rem;
  }
}

@media (min-width: 414px) {
  footer.paddingCookie {
	padding-bottom: 8.6rem;
  }
}

@media (min-width: 480px) {
  footer.paddingCookie {
	padding-bottom: 8.5rem;
  }
}

@media (min-width: 507px) {
  footer.paddingCookie {
	padding-bottom: 7.3rem;
  }
}

@media (min-width: 601px) {
  footer.paddingCookie {
	padding-bottom: 7.2rem;
  }
}

@media (min-width: 694px) {
  footer.paddingCookie {
	padding-bottom: 7.1rem;
  }
}

@media (min-width: 721px) {
  footer.paddingCookie {
	padding-bottom: 5.8rem;
  }
}

@media (min-width: 768px) {
  footer.paddingCookie {
	padding-bottom: 5.7rem;
  }
}

@media (min-width: 800px) {
  footer.paddingCookie {
	padding-bottom: 5.6rem;
  }
}

@media (min-width: 1024px) {
  footer.paddingCookie {
	padding-bottom: 5.5rem;
  }
}

@media (min-width: 1280px) {
  footer.paddingCookie {
	padding-bottom: 5.5rem;
  }
}

@media (min-width: 1366px) {
  footer.paddingCookie {
	padding-bottom: 5.5rem;
  }
}

@media (min-width: 1415px) {
  footer.paddingCookie {
	padding-bottom: 4rem;
  }
}

@media (min-width: 1920px) {
  footer.paddingCookie {
	padding-bottom: 4rem;
  }
}
/*
@media (min-width: 1024px) {
  footer.paddingCookie {
	padding-bottom: 6rem;
  }
}
*/

#language_box{
	border: 0.25rem solid var(--round-button-border-color);
	border-radius: 0.6rem;
	height: 2rem;
	width: 1rem;
	padding: 0rem;
	margin: 0.5rem;
	position: absolute;
	left: 0.5rem;
	bottom: 0.5rem;
	background-color: var(--round-button-background-color);
	color: var(--round-button-text-color);
}
#language_box:hover {
	background-color: var(--round-button-hover-background-color);
	color: var(--round-button-hover-text-color);
	/*box-shadow: 3px 3px 0px 0px var(--dark-shadow-color);*/
}

#language_box .select-selected{
	margin: 0rem;
	background: transparent;
	border: 0.25rem solid var(--navbar-button-border-color);
	padding-right: 1.5rem;
	padding-top: 0.55rem;
}
#language_box .select-items div{
	background-color: var(--round-button-background-color);
	color: var(--round-button-text-color);
}
#language_box .select-items div:hover {
	background-color: var(--round-button-hover-background-color);
	color: var(--round-button-hover-text-color);
}

.form-error-3,
.form-error-4 {
	color: var(--snackbar-message-valid-color);
	display: none;
}

.preview-image {
	display: block;
	width: 15.0rem;
	/*height: 15.0rem;*/
	border: 0.25rem solid var(--border-color);
	max-width: 240px;
}

#post-firstpage h2 {
	text-transform: uppercase;
	padding: 1rem;
	color: var(--intro-title-color) !important;
	font-size: 1.5rem;
	text-align: center;
	/*font-family: Helvetica, Arial, sans-serif;
	font-weight: 700;*/
	font-family: fontRegular;
}

#post-firstpage ul {
	color: var(--content-text-color);
	padding: 1% 2.0rem 1% 2.0rem;
	margin: 0% 10% 0% 10%;
	font-size: 1.0rem;
	line-height: 1.5rem;
}

#post-firstpage ol {
	color: var(--content-text-color);
	padding: 1% 2.0rem 1% 2.0rem;
	margin: 0% 10% 0% 10%;
	font-size: 1.0rem;
	line-height: 1.5rem;
}

#post-new h2, #post-new h3, #post-firstpage h2, #post-alert h2 {
	text-shadow: none !important;
}

#post-new h2 {
	padding: 1rem;
	color: var(--news-title-color) !important;
	font-size: 1.5rem;
	text-align: center;
	/*font-family: Helvetica, Arial, sans-serif;
	font-weight: 700;*/
	font-family: fontRegular;
}

div.images-scroll-container {
  background-color: white;
  overflow: auto;
  white-space: nowrap;
  padding-top: 0.2rem;
  padding-bottom: 0rem;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

div.images-scroll-container img {
  padding: 0.5rem;
}

.formbuttontitle {
	font-size: 1.5rem;
	text-align: center;
	line-height: 2.5rem;
}

.formbutton {
	display: flex;
	align-items: center;
	justify-content: center;
}

.formbutton button {
	font-family: fontBold;
	font-size: 1.0rem;
	max-height: 2.6rem;
	color: #FFFFFE;
	background-color: var(--menu-button-background-color);
	border: 0.25rem solid var(--menu-button-background-color);
	border-radius: 0.6rem;
	padding: 0.6rem 0.6rem 0.6rem 0.6rem;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	margin: 0 10%;
	width: 25.0rem;
}

.formbutton button:hover {
	/*box-shadow: 3px 3px 0px 0px var(--dark-shadow-color);*/
	background-color: var(--menu-button-hover-background-color);
	border: 0.25rem solid var(--menu-button-hover-background-color);
}