/* 
	Custom CSS for DC Diensten
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
/*
	black: #121212 
	white: #ffffff
	off-white: #d4d4d4
	yellow: #f9bb19
	blue: #007aff
*/
:root {
	/* MAIN COLORS */
		--black: rgba(18, 18, 18, 1);
		--deep-blue: rgba(0, 122, 255, 1);
		--light-blue: rgba(255, 162, 0, 1);
		--off-white: rgba(255, 254, 253, 1);
		
		--deep-blue-dark: rgba(0, 97, 204, 1);
		--deep-blue-darker: rgba(0, 73, 153, 1);
		--deep-blue-lighter: rgba(0, 122, 255, 0.5);

		--light-blue-lighter: rgba(255, 162, 0, 0.5); /* yellow lighter */

		--off-white-ligter: rgba(212, 212, 212, 0.7);

		--light-grey: rgba(31, 33, 35, 0.8);

		--accent: rgba(255, 162, 0, 1);

	/* GLOBAL */
		--background						: var(--light-blue);
		--logo								: url('logo.png') no-repeat;

		--glow-bs-color						: var(--light-blue);
		--glow-border-color					: var(--deep-blue);

	/* INPUT */
		--checkbox-bg-color					: var(--black);
		--checkbox-border-color				: var(--light-blue-lighter);
		--checkbox-bg-color-disabled		: var(--light-blue-lighter);
		--checkbox-border-color-disabled	: var(--light-blue-lighter);
		--checkbox-bg-color-active			: var(--accent);
		--slider-bg							: var(--light-blue);

		--autocomplete-bg-color-active		: var(--black);
		--link-color						: var(--deep-blue);
		--link-color-hover					: var(--deep-blue-dark);

	/* BUTTONS */
		--button-pri-color					: var(--off-white);
		--button-pri-bg-color				: var(--black);
		--button-pri-border-color			: var(--light-blue-lighter);

		--button-pri-color-hover			: var(--off-white);
		--button-pri-bg-color-hover			: var(--light-grey);
		--button-pri-border-color-hover		: var(--light-blue-lighter);

		--button-pri-color-focus			: var(--off-white);
		--button-pri-bg-color-focus			: var(--black);
		--button-pri-border-color-focus		: var(--light-blue-lighter);

		--button-pri-color-active			: var(--off-white);
		--button-pri-bg-color-active		: var(--black);
		--button-pri-border-color-active	: var(--light-blue-lighter);

		--button-sec-color					: var(--button-pri-color);
		--button-sec-bg-color				: var(--button-pri-bg-color);
		--button-sec-border-color			: var(--button-pri-border-color);
		--button-sec-color-hover			: var(--button-pri-color-hover);
		--button-sec-bg-color-hover			: var(--button-pri-bg-color-hover);
		--button-sec-border-color-hover		: var(--black);
		--button-sec-color-focus			: var(--button-pri-color-focus);
		--button-sec-bg-color-focus			: var(--button-pri-bg-color-focus);
		--button-sec-border-color-focus		: var(--button-pri-border-color-focus);
		--button-sec-color-active			: var(--button-pri-color-active);
		--button-sec-bg-color-active		: var(--button-pri-bg-color-active);
		--button-sec-border-color-active	: var(--button-pri-border-color-active);

	/* NAVBAR */
		--navbar-bg-color					: var(--black);
		--navlink-color						: var(--off-white);
		--navlink-color-hover				: var(--deep-blue-dark);

		--dropdown-menu-bg-color			: var(--black);
		--dropdown-item-color				: var(--off-white);
		--dropdown-item-color-hover			: var(--off-white-ligter);
		--dropdown-item-bg-color-hover		: transparent;
		--dropdown-item-bg-color-active		: transparent;

		--navbar-mobile-toggle-bg-image		: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 254, 249, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");

	/* CARD */
		--footer-bg-color					: var(--black);
		--main-card-header-bg-color			: var(--black);
		--main-card-footer-bg				: var(--off-white);
		--sub-header-color					: var(--off-white);
		--sub-header-border-color			: var(--light-blue);
		--sub-header-bg						: var(--black);

		--text-success-color				: var(--black);
		--waypoint-color					: var(--black);

		--input-noborder-border-color		: var(--light-blue);
		--input-noborder-border-color-focus	: var(--light-blue);

		--address-header-bg-color			: var(--black);
		--address-header-color				: var(--off-white);

		--form-control-border-color-focus	: var(--black);

		--card-bg-color						: var(--black);
		--card-color						: var(--off-white);

	/* PRICE */
		--price-color						: var(--off-white);
		--price-bg-color					: var(--black);
		--price-loader-bg-color				: var(--light-grey);

	/* DELEGATE */
		--delegate-button-color				: var(--off-white);
		--delegate-button-bg-color			: var(--black);
		--delegate-button-border-color		: var(--light-blue);
		--delegate-button-color-hover		: var(--off-white);
		--delegate-button-bg-hover			: var(--black);

	/* PAYMENT */
		--payment-button-border-color		: var(--light-blue);
}


/* Bootstrap override */
/* Glow */
textarea:not(.input-noborder):focus,
textarea.form-control:not(.input-noborder):focus,
input.form-control:not(.input-noborder):focus,
input[type=text]:not(.input-noborder):focus,
input[type=password]:not(.input-noborder):focus,
input[type=email]:not(.input-noborder):focus,
input[type=number]:not(.input-noborder):focus,
[type=text].form-control:not(.input-noborder):focus,
[type=password].form-control:not(.input-noborder):focus,
[type=email].form-control:not(.input-noborder):focus,
[type=tel].form-control:not(.input-noborder):focus,
[contenteditable].form-control:not(.input-noborder):focus,
.custom-control-input:not(:disabled):not(.input-noborder):focus ~ .custom-control-label::before,
.custom-control-input:not(:disabled):not(.input-noborder):active ~ .custom-control-label::before,
.custom-select:not(.input-noborder):focus,
.btn-outline-primary.focus:not(.input-noborder),
.btn-outline-primary:not(.input-noborder):focus,
.btn-outline-primary.active:not(.input-noborder),
.btn-outline-primary:not(.input-noborder):active,
.btn-primary:not(:disabled):not(.disabled):not(.input-noborder).active:focus,
.btn-primary:not(:disabled):not(.disabled):not(.input-noborder):active:focus,
.show > .btn-primary.dropdown-toggle:not(.input-noborder):focus {
	box-shadow: 0 0 0 0.2rem var(--glow-bs-color) !important;
	border-color: var(--glow-border-color) !important;
}

/* checkbox */
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
	background-color: var(--checkbox-bg-color);
	border-color: var(--checkbox-border-color) !important;
}

.custom-checkbox .custom-control-input:disabled:checked ~ .custom-control-label::before {
	background-color: var(--checkbox-bg-color-disabled);
	border-color: var(--checkbox-border-color-disabled);
}

.custom-control-input:not(:disabled):active ~ .custom-control-label::before {
	background-color: var(--checkbox-bg-color-active);
}

.custom-control-label::before{
	border-color: var(--checkbox-border-color) !important;
}

/* Slide */
.custom-range::-webkit-slider-thumb, .custom-range::-webkit-slider-thumb:HOVER {
	background: var(--slider-bg);
}

.custom-range::-moz-range-thumb, .custom-range::-ms-thumb:HOVER {
	background: var(--slider-bg);
}

.custom-range::-ms-thumb, .custom-range::-ms-thumb:HOVER {
	background: var(--slider-bg);
}

/* Buttons */
.btn-primary {
	color: var(--button-pri-color) !important;
	background-color: var(--button-pri-bg-color);
	border-color: var(--button-pri-border-color);
	font-weight: bold;
}

	.btn-primary:hover {
		color: var(--button-pri-color-hover) !important;
		background-color: var(--button-pri-bg-color-hover);
		border-color: var(--button-pri-border-color-hover);
	}

	.btn-primary.focus, .btn-primary:focus {
		color: var(--button-pri-color-focus) !important;
		background-color: var(--button-pri-bg-color-focus);
		border-color: var(--button-pri-border-color-focus);
		box-shadow: none;
	}

	.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show > .btn-primary.dropdown-toggle {
		color: var(--button-pri-color-active) !important;
		background-color: var(--button-pri-bg-color-active);
		border-color: var(--button-pri-border-color-active);
	}

.btn-secondary {
	color: var(--button-sec-color) !important;
	background-color: var(--button-sec-bg-color);
	border-color: var(--button-sec-border-color);
	font-weight: bold;
}

	.btn-secondary:hover {
		color: var(--button-sec-color-hover) !important;
		background-color: var(--button-sec-bg-color-hover);
		border-color: var(--button-sec-border-color-hover);
	}

	.btn-secondary.focus, .btn-secondary:focus {
		color: var(--button-sec-color-focus) !important;
		background-color: var(--button-sec-bg-color-focus);
		border-color: var(--button-sec-border-color-focus);
		box-shadow: none;
	}

	.btn-secondary:not(:disabled):not(.disabled).active, .btn-secondary:not(:disabled):not(.disabled):active, .show > .btn-secondary.dropdown-toggle {
		color: var(--button-sec-color-active) !important;
		background-color: var(--button-sec-bg-color-active);
		border-color: var(--button-sec-border-color-active);
	}


/* JQUERY AUTOCOMPLETE OVERRIDE */
.ui-state-active {
	border-color: transparent !important;
	background-color: var(--autocomplete-bg-color-active) !important;
}

/* Main styling */
a {
	color: var(--link-color);
	text-decoration: none !important;
}

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

.background {
	background-repeat: no-repeat;
	background: var(--background);
	width: 100%;
	height: 100%;
	opacity: 1;
	visibility: inherit;
	z-index: 20;
}

#navbar {
	background-color: var(--navbar-bg-color) !important;
	border-bottom: none;
}

.navbar-logo {
	background: var(--logo);
	background-size: contain;
	background-position-y: center;
	width: 210px;
	height: 55px;
}

.navbar-dark .navbar-nav .nav-link {
	color: var(--navlink-color);
}

	.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover {
		text-decoration: none !important;
		color: var(--navlink-color-hover);
	}

.navbar-dark .navbar-toggler-icon {
	background-image: var(--navbar-mobile-toggle-bg-image);
}

.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
	outline: none;
	box-shadow: none;
}

.dropdown-menu:not(.datepicker) {
	background-color: var(--dropdown-menu-bg-color);
}

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

.dropdown-item:hover {
	color: var(--dropdown-item-color-hover) !important;
	background-color: var(--dropdown-item-bg-color-hover);
	text-decoration: none !important;
}

.dropdown-item:active {
	background-color: var(--dropdown-item-bg-color-active);
}


@media (max-width: 576px) {
	.dropdown-menu {
		background-color: var(--dropdown-menu-bg-color);
		border-color: transparent;
	}
}
button.ml-auto {
	margin-right: 0px;
}

body {
	font-family: "Source Sans Pro", sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 200;
}

/* Source Sans Pro does not support bolder! */
strong {
	font-weight: bold !important;
}

.main-card-header {
	background-color: var(--main-card-header-bg-color) !important;
}

footer.bg-dark {
	background-color: var(--footer-bg-color) !important;
}

.main-card-footer {
	height: 75px;
	padding-left: 25px;
	padding-right: 25px;
	background: var(--main-card-footer-bg);
}

.sub-header {
	color: var(--sub-header-color);
	padding: 0px 0px 10px 20px;
	margin: 15px -20px 5px -20px;
	border-bottom-color: var(--sub-header-border-color);
	background: var(--sub-header-bg);
}

/* Override color of bootstrap text-success class */
.text-success {
	color: var(--text-success-color) !important;
}

.waypoint-ball, .waypoint-line {
	border-color: var(--waypoint-color);
}

.input-noborder {
	border-bottom-width: 1px;
	border-bottom-color: var(--input-noborder-border-color);
}

	.input-noborder:focus {
		border-bottom-color: var(--input-noborder-border-color-focus) !important;
	}

.address-header.active {
	background-color: var(--address-header-bg-color);
	color: var(--address-header-color);
}

.form-control:focus {
	border-color: var(--form-control-border-color-focus);
	box-shadow: none;
}


.card-input-element:checked + .card {
	background-color: var(--card-bg-color) !important;
	border-color: var(--card-color) !important;
}

	.card-input-element:checked + .card > .card-img-overlay {
		color: var(--card-color);
	}
	.card-input-element:checked + .card .card-text-small {
		color: var(--card-color);
	}

.card-input-element + .card:hover {
	opacity: 0.8;
	border-color: var(--card-color) !important;
}


.card-input-element + .card {
	border: 2px solid var(--card-color);
}

	.card-input-element + .card.disabled > .vehicle-icon-container .card-img-overlay {
		opacity: 0.5;
	}

#price-button {
	background-color: var(--price-bg-color);
	color:var(--price-color);
}

#price-loader {
	background-color: var(--price-loader-bg-color);
}


.btn-outline-primary.tc-delegate-button {
	color: var(--delegate-button-color);
	background-color: var(--delegate-button-bg-color);
	border-color: var(--delegate-button-border-color) !important;
}

	.btn-outline-primary.tc-delegate-button:hover,
	.btn-outline-primary.tc-delegate-button:focus,
	.btn-outline-primary.tc-delegate-button:active {
		color: var(--delegate-button-color-hover) !important;
		background: var(--delegate-button-bg-hover) !important;
	}

.tc-payment-button {
	margin-top: 20px;
	width: 100%;
	height: 50px;
	border-color: var(--payment-button-border-color) !important;
	padding: 0px;
}


/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
}

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {

	.navbar-logo {
		margin-left: 9vw;
	}
}