/*///////////////////////////////////////////////////////////
  ____                 _           _               _   _
 / _  |  ___     ___  | |   __ _  (_)  _ __ ___   (_) | |_
| (_| | / _ \   / __| | |  / _` | | | | '_ ` _ \  | | | __|
 > _  | \__  | | (__  | | | (_| | | | | | | | | | | | | |_ 
/_/ |_| |___/   \___| |_|  \__,_| |_| |_| |_| |_| |_|  \__|
 
///////////////////////////////////////////////////////////*/

@font-face {
	font-display: swap;
	font-family: Averta;
	font-style: normal;
	font-weight: 400;
	src: local("Averta"),url(Averta-Regular.woff2) format("woff2")
}

@font-face {
	font-display: swap;
	font-family: Averta;
	font-style: normal;
	font-weight: 600;
	src: local("Averta Semibold"),local("Averta-Semibold"),url(Averta-Semibold.woff2) format("woff2")
}

@font-face {
	font-display: swap;
	font-family: Averta;
	font-style: italic;
	font-weight: 600;
	src: local("Averta Semibold Italic"),local("Averta-Semibold-Italic"),url(Averta-SemiboldItalic.woff2) format("woff2")
}

@font-face {
	font-display: swap;
	/*font-family: Averta;*/
	font-family: Averta-Extrabold;
	font-style: normal;
	font-weight: 800;
	src: local("Averta Extrabold"),local("Averta-Extrabold"),url(Averta-Extrabold.woff2) format("woff2")
}

:root {
	--body-color: #000;
	--heading-color: #000;
	--primary-color: #3338FF;
	--danger-color: #e24e4a;
	--font-regular: Averta;
	--font-bold: Averta-Extrabold;
	/* Webhallen core components - Colors*/
	--primary: #3338FF;
	--grey1: #333333;
	--grey2: #58585A;
	--grey3: #D6D6D6;
	--grey4: #F6F6F6;
	--error-destructive: #D50855;
	--error-light: #fcf1f5; /* Guess(Color Picker) - Gick inte att se koden i Figma. */
}

*,
*:before,
*:after {
	box-sizing: border-box !important;
}

/* --------------------------------------------- ELEMENTS ---*/
body {
	font-family: var(--font-regular),sans-serif;
	color: black;
	/*background-image: url(697854.png);*/
	background-image: url(Webhallen-Service-Background-3840x2160.jpg);
	background-size:cover;
	right: 0px;
}

h1 {
	margin-top: 5px !important;
	margin-bottom: 15px !important;
	font-size: 28px;
}

h1, h2, h3, h4,h5,h6 .h3 {
	font-family: var(--font-bold),sans-serif;
	color: inherit;
	font-weight: 600;
	line-height: 1.1;
}

input {
	color: black;
	border: 2px solid var(--grey3) !important;
}

	input:focus {
		border: 1px solid var(--primary) !important;
	}

label {
	font-family: var(--font-bold),sans-serif;
	vertical-align: -webkit-baseline-middle;
}

hr {
	background-color: var(--grey3) !important;
	height: 2px;
}

textarea {
	border: 2px solid var(--grey3) !important;
}

textarea:focus {
	border: 1px solid var(--primary) !important;
}

select {
	/*	color: #000 !important;
	border: 1px solid #000 !important;
	border-radius: 4px !important;*/
}

/* --------------------------------------------- MISC CLASSES ---*/
.form-horizontal .row {
	margin-top: 5px !important;
}

.form-group {
	margin-bottom: 0px;
}

span.asterisk:after {
	color: var(--primary);
	font-family: unset;
	content: "*";
	font-size: 16px;
	vertical-align: 1px;
}

/* --------------------------------------------- TEXT CLASSES ---*/
.control-label {
	font-family: var(--font-bold),sans-serif;
	min-height:23px;
}

.text_dbvalue {
	color: var(--grey1);
}

	.text_dbvalue span {
		vertical-align: -webkit-baseline-middle;
	}

.text_italic {
	/*color: #425867;*/
}

/* --------------------------------------------- FORM-CONTROL INPUTS ---*/
.form-control {
	font-weight: 500;
	/*	display: grid;
	grid-template-columns: 1em auto;*/
	/*gap: 0.5em;*/
}

	.form-control:focus {
		/*border-color: #3E83B3;*/
	}

	.form-control[disabled],.form-control[readonly] {
		color: var(--grey2) !important;
		background-color: var(--grey4);
		border-color:var(--grey3) !important;
	}

textarea.form-control {
	/*border: 2px solid #3E83B3;*/
}

/* --------------------------------------------- BUTTONS ---*/
.btn, .btn:focus {
	background-color: white !important;
	color: black !important;
	border: 2px solid var(--primary) !important;

	/*color: #FFFFFF;*/
	/*border: 2px solid var(--primary-color) !important;
	background-color: var(--primary-color) !important;*/
	border-radius: 20px !important;
	text-align: center !important;
	/*font-weight: 500;*/
	background-image: unset !important;
	font-size: 14px;
	margin-top: 10px;
	font-family: Averta-Extrabold;
}

	.btn:visited, a.btn:visited {
		/*color: #FFFFFF;*/
		/*border: 2px solid #244B67;*/
		/*border-color: #244B67;*/
		/*background-color: #244B67;*/
	}

	.btn:hover, a.btn:hover {
		/*color: #FFFFFF;*/
		/*border: 2px solid #244B67;*/
		/*border-color: #244B67;*/
	}

	.btn:visited:hover, a.btn:visited:hover {
		/*border: 2px solid #244B67;*/
		/*background-color: #244B67;*/
	}

/* --------------------------------------------- BUTTON_PREV ---*/
.button_prev {
	background-color: white !important;
	color: black !important;
	border: 2px solid var(--primary) !important;
}

	.button_prev::before {
		/* icon*/
		-moz-osx-font-smoothing: grayscale;
		-webkit-font-smoothing: antialiased;
		display: inline-block;
		font-style: normal;
		font-variant: normal;
		text-rendering: auto;
		line-height: 1;
		font-family: "Font Awesome 5 Free";
		font-weight: 600;
		content: "\f053";
		transform: translateX(-15px);
	}
/* --------------------------------------------- BUTTON_NEXT ---*/
.button_next, .button_next:focus, #ModalNext {
	color: white !important;
	border: 2px solid var(--primary-color) !important;
	background-color: var(--primary-color) !important;
}

	.button_next:hover {
		/*border: 2px solid #244B67;*/
		/*border-color: #244B67;*/
		/*background-color: #244B67;*/
	}

	.button_next::after {
		/* icon*/
		-moz-osx-font-smoothing: grayscale;
		-webkit-font-smoothing: antialiased;
		display: inline-block;
		font-style: normal;
		font-variant: normal;
		text-rendering: auto;
		line-height: 1;
		font-family: "Font Awesome 5 Free";
		font-weight: 600;
		content: "\f054";
		transform: translateX(15px);
	}
/* --------------------------------------------- VALIDATION ---*/
.text-danger {
	color: var(--error-destructive) !important;
}

.input-validation-error {
	background-color: var(--error-light) !important;
	border-color: var(--error-destructive) !important;
}

.validation-summary-errors {
	background-color: var(--error-light) !important;
}

/* --------------------------------------------- CHECKBOX AND RADIOBUTTON IMAGES ---*/
input[type=radio] {
	opacity: 1 !important;
	color: var(--primary) !important;
	height: 15px !important;
	accent-color: var(--primary) !important;
}

	input[type=radio]:not(old) + label {
		background-image: unset !important;
	}

input[type=checkbox] {
	display: block;
	accent-color: var(--primary);
}

label > input[type='checkbox'] ~ .label-icon:before {
	background-image: unset;
}

label > input[type='checkbox']:checked ~ .label-icon:before {
	background-image: unset;
}

label:hover > input[type='checkbox']:not(:checked) ~ .label-icon:before {
}

label:hover > input[type='checkbox']:checked ~ .label-icon:before {
	background-image: unset;
}

label > input[type='checkbox']:checked ~ .label-icon:before {
}



/* --------------------------------------------- TOOLTIP IMAGES ---*/

.help_dialog {
	background-image: unset !important;
	display: inline;
	float: none;
	margin-left: 5px;
	font-size: 17px;
}

	.help_dialog:before {
		font-family: "Font Awesome 5 Free";
		font-weight: 900; /* Solid -"fas" */
		content: "\f059";
		float: unset !important;
	}
/* --------------------------------------------- PROGRESS IMAGES ---*/

.progress_reclaim_step1 {
	background: unset !important;
	display: none !important;
}

.progress_reclaim_step2 {
	background: unset !important;
	display: none !important;
}

.progress_reclaim_step3 {
	background: unset !important;
	display: none !important;
}

.progress_reclaim_step4 {
	background: unset !important;
	display: none !important;
}

.progress_reclaim_step5 {
	background: unset !important;
	display: none !important;
}

.footer {
	color: var(--grey2);
	margin-bottom: 10px;
}