/* Algemene opmaak van de applicatieschil (navbar, hulpklassen). Gedeeld door de AngularJS-schil
   (public/app/views/index.ejs) en de Vue-pagina's (frontend/index.html). Stond voorheen inline in index.ejs. */

.margin-top-15 {
	margin-top: 15px;
}

.archive-bar:hover {
	background-color: lightgrey !important;
}

.nav-tabs {
	border-bottom: 1px solid #1aa700;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
	color: white;
	background-color: #1aa700;
	border-bottom: 1px solid #1aa700;
}

.nav-tabs .nav-link:hover {
	color: #1aa700;
	border: 1px solid #1aa700;
}

.nav-tabs .nav-link.active:hover {
	color: white;
}

.custom-table-row {
	background-color: rgba(35, 122, 87, 0.1);
}

.font-green {
	color: green;
}

.font-white {
	color: white;
}

.textcanceled {
	text-decoration: line-through;
}

.font-bold {
	font-weight: bold;
}

.border-left {
	border-left: dotted 1px black;
}

.border-right {
	border-right: dotted 1px black;
}

.border-top {
	border-top: dotted 1px black;
}

.border-bottom {
	border-top: dotted 1px black;
}

.custom-top-bottom-padding {
	padding-top: 15px;
	padding-bottom: 15px;
}

.horse-combination-row:hover {
	background-color: rgba(211, 211, 211, 0.1);
}

.match-header-card a {
	text-decoration: none !important;
	color: black;
}

.header-match-overview-cards {
	background-color: #f8f9fa;
}

.header-match-overview-cards:hover {
	background-color: #093a28;
	color: white !important;
	text-decoration: none !important;
}

.header-match-overview-cards:hover .font-green {
	color: white !important;
}

.header-match-overview-cards:hover .font-red {
	color: white !important;
}

/*fade-in class*/
.fade-in {
	opacity: 1;
	animation-name: fadeInOpacity;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
	animation-duration: 0.5s;
}

@keyframes fadeInOpacity {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

/*fade-in class*/

.pointer {
	cursor: pointer;
}

@media screen and (min-width: 700px) {
	.more-organizer-info-modal {
		padding: 4rem 12rem;
	}
}

@media screen and (max-width: 700px) {
	.more-organizer-info-modal {
		padding: 0.5rem 2rem;
	}
}

md-dialog {
	min-width: 30%;
	position: absolute;
	top: 400px;
}

@media screen and (max-width: 639px) {
	md-dialog-container {
		height: 100%;
	}
}

.first-place-row {
	font-size: 22px;
}

.podium-row {
	font-size: 19px;
}

.font-white {
	color: white;
}

.riders-with-only-inactive {
	background-color: rgba(255, 0, 0, 0.5) !important;
}

.embed-responsive-8by1::before {
	padding-top: 12, 5% !important;
}

@media screen and (min-width: 1200px) {
	.homepage-match-container {
		width: 100%;
		max-width: 96vw;
	}
}

@media screen and (min-width: 1540px) {
	.homepage-match-container {
		width: 100%;
		max-width: 85vw;
	}
}

.rubric-page .tab-pane {
	min-height: 500px;
}

.green-button {
	background-color: #093a28;
	color: white;
}

.font-orange {
	color: orange;
}

.capitalize {
	text-transform: capitalize;
}

#navbarNav .nav-link i {
	margin-right: 0.4rem;
	width: 1.1rem;
	text-align: center;
	color: #999;
	transition: color 0.15s ease;
}

#navbarNav .navbar-nav {
	padding: 0.35rem 0;
	max-height: calc(100vh - 56px);
	overflow-y: auto;
}

#navbarNav .nav-item {
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

#navbarNav .nav-item:last-child {
	border-bottom: none;
}

#navbarNav .nav-link {
	display: flex;
	align-items: center;
	padding: 0.85rem 1.25rem;
	color: #444;
	font-size: 0.92rem;
	font-weight: 500;
	transition:
		background-color 0.15s ease,
		color 0.15s ease,
		padding-left 0.15s ease;
}

#navbarNav .nav-link:hover,
#navbarNav .nav-link:focus,
#navbarNav .nav-link:active {
	background-color: rgba(0, 102, 26, 0.07);
	color: #00661a;
	padding-left: 1.55rem;
}

#navbarNav .nav-link:hover i,
#navbarNav .nav-link:focus i,
#navbarNav .nav-link:active i {
	color: #00661a;
}

nav.navbar {
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;
	height: 56px;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

nav.navbar .navbar-brand {
	padding-left: 1rem;
}

nav.navbar .navbar-collapse.show,
nav.navbar .navbar-collapse.collapsing {
	background-color: #fff;
	border-bottom-left-radius: 0.5rem;
	border-bottom-right-radius: 0.5rem;
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
}

.nav-cta-group {
	align-self: stretch;
	height: 100%;
	gap: 0;
	border-left: 1px solid rgba(0, 0, 0, 0.08);
}

.nav-cta-group .nav-login {
	display: flex;
	align-items: stretch;
	height: 100%;
	padding-left: 0 !important;
	flex: 1 1 0;
	min-width: 0;
}

.nav-cta-btn {
	display: flex !important;
	align-items: center;
	justify-content: center;
	height: 100%;
	width: 100%;
	margin: 0 !important;
	padding: 0 1.35rem !important;
	border-radius: 0 !important;
	border: none !important;
	border-left: 1px solid rgba(0, 0, 0, 0.12) !important;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	box-shadow: inset 0 -3px 0 transparent;
	transition:
		box-shadow 0.15s ease,
		background-color 0.15s ease;
}

.nav-cta-btn:hover {
	color: white;
	box-shadow: inset 0 -3px 0 rgba(255, 255, 255, 0.85);
}

.nav-cta-btn--primary {
	padding-left: 1.6rem !important;
	padding-right: 1.6rem !important;
}

.nav-cta-select {
	border: none !important;
	border-radius: 0 !important;
	height: 100%;
	padding: 0 1rem !important;
	font-size: 0.8rem;
	background-color: transparent;
}

@media screen and (max-width: 575.98px) {
	.nav-cta-btn {
		font-size: 0.65rem;
		padding: 0 0.85rem !important;
	}

	.nav-cta-btn--primary {
		padding-left: 1rem !important;
		padding-right: 1rem !important;
	}
}

/* Smalle telefoons (of een grotere weergave-instelling, waardoor het scherm minder dan 380 px breed is): logo en de drie
   knoppen moeten op één regel blijven. Anders loopt de knoppenbalk naar een tweede regel, buiten de navbar van 56 px, en
   valt hij over de pagina heen. */
@media screen and (max-width: 379.98px) {
	nav.navbar .navbar-brand {
		padding-left: 0.75rem;
		margin-right: 0.25rem;
	}

	.nav-cta-btn {
		font-size: 0.62rem;
		letter-spacing: 0;
		padding: 0 0.45rem !important;
	}

	.nav-cta-btn--primary {
		padding-left: 0.6rem !important;
		padding-right: 0.6rem !important;
	}
}