/*********************** Huseierne workflow design ************************/

/*** 	Created: Winter of 2024											***/
/*** 	Stylist: Angelica Maza Larsen & Alexander Edin Varegg 			***/
/*** 	Purpose: Form design in Compose Enterprise 						***/
/*** 	Last edited: 2024.03.19 										***/
/*** 	Last version: 0.0.1		 										***/

/**************************************************************************/


/************************* Table of contents ******************************/

/*** 	1 General			 											***/
/*** 		1.1 Color palette		 									***/
/*** 		1.2 Fonts				 									***/
/*** 	2 Header and footer												***/
/*** 		2.1 Header													***/
/*** 		2.2 Footer													***/
/*** 	3 Body 															***/
/*** 		3.1 Form container											***/
/*** 		3.2 Titles (workflow, page and groups)						***/
/*** 		3.3 Plain text elements 									***/
/*** 		3.4 Navigation buttons 										***/
/*** 		3.5 Cancel/Save button 										***/
/*** 		3.6 Skip link button 										***/
/*** 		3.7 Hyperlinks 												***/
/*** 	4 Navigation menu(s)											***/
/*** 		4.1 Vertical navigation menu  								***/
/*** 			4.1.1 Link states										***/
/*** 			4.1.2 Page numbers										***/
/*** 		4.2 Collapsed vertical navigation menu						***/
/*** 			4.2.1 Displaying active page in collapsed menu 			***/
/*** 			4.2.2 Expanded menu 									***/
/*** 		4.3 Other navigation menu settings							***/
/*** 	5 Text input elements (text field, text area, date & password)	***/
/*** 		5.1 General styling			  								***/
/*** 			5.1.1 Input Label			  							***/
/*** 			5.1.2 Input field  										***/
/*** 			5.1.3 Input field error									***/
/*** 		5.2 Calendar  												***/
/*** 			5.2.1 Icon												***/
/*** 			5.2.2 Calendar header									***/
/*** 			5.2.3 Date picker										***/
/*** 			5.2.4 Month & year picker								***/
/*** 	6 Single- and Multi-select 										***/
/*** 		6.1 Radio Buttons											***/
/*** 		6.2 Check boxes												***/
/*** 		6.3 Button tags												***/
/*** 			6.3.1 2, 3 and 4 horizontal buttons						***/
/*** 			6.3.2 Vertical buttons (grad-tag)						***/
/***		6.4 Drop down styling										***/
/*** 	7 File upload and duplicatable groups 							***/
/*** 	8 Help and validation texts										***/
/***	9 Confirmation page												***/
/*** 	10 Miscellaneous tags											***/
/*** 	11 Start page													***/
/*** 	0 Graveyard	 													***/

/*------------------------------------------------------------------------*/

/*** 1.1 Color palette ***/

:root {
	/* Primitives */
	--Neutral-000: #FFFFFF;				--Sunrise-100: #FCE5DE;
	--Neutral-100: #F1F1F1;				--Sunrise-200: #FFC3AC;
	--Neutral-200: #EEEEEE;				--Sunrise-300: #FF9B7C;
	--Neutral-300: #D9D9D9;				--Sunrise-400: #EF7F5B;
	--Neutral-400: #B3B3B3;				--Sunset-100: #FEF0F3;
	--Neutral-500: #999999;				--Sunset-200: #FCDCE4;
	--Neutral-600: #666666;				--Sunset-300: #FBCBD7;
	--Neutral-700: #222222;				--Sunset-400: #F9B2C4;
	--Neutral-1000: #000000;			--Sunbeam-100: #FEF7DD;
	--Forest-100: #D7E5E1;				--Sunbeam-200: #FFEDA1;
	--Forest-200: #8CC5BB;				--Sunbeam-300: #FFE472;
	--Forest-300: #40958D;				--Sunbeam-400: #FAD655;
	--Forest-400: #367D68;				--Vendor-Vipps-100: #FFE6DE;
	--Forest-500: #1F4B3F;				--Vendor-Vipps-200: #FF5B24;
	--Vendor-BankID-100: #BAA1CB;		--Vendor-Vipps-300: #BF441A;
	--Vendor-BankID-200: #754E8F;
	--Vendor-BankID-300: #341549;

	/* System colors */
	--System-Info-100: #F0F6FF;			--System-Success-100: #F4FFF9;
	--System-Info-200: #DEEBFF;			--System-Success-200: #E3FCEF;
	--System-Info-300: #B9D3FB;			--System-Success-300: #BBF3D3;
	--System-Info-400: #4382F7;			--System-Success-400: #7CD6A7;		
	--System-Info-500: #2151C5;			--System-Success-500: #3B855D;
	--System-Error-100: #FFF6F4;		--System-Warning-100: #FFFDF4;
	--System-Error-200: #FFEBE6;		--System-Warning-200: #FFFAE6;
	--System-Error-300: #F5C0B0;		--System-Warning-300: #FCF1BA;
	--System-Error-400: #ED7C5C;		--System-Warning-400: #F6C644;		
	--System-Error-500: #CC4525;		--System-Warning-500: #F19E41;
	
	/* Tokens */
	
	/* Button */
	--primary-default: #367D68;			--primary-hover: #1F4B3F;
	--primary-press: #40958D;			--primary-active: #1F4B3F;
	--primary-disabled: #EEEEEE;		--secondary-default: #FFFFFF;
	--secondary-hover: #EEEEEE;			--secondary-disabled: #F1F1F1;
	
	/* Field */
	--info: #4382F7;					--info-bg: #F0F6FF;
	--success: #7CD6A7;					--success-bg: #F4FFF9;
	--warning: #F6C644;					--warning-bg: #FFFDF4;
	--error: #ED7C5C;					--error-bg: #FFF6F4;
	--default: #D9D9D9;					--hover: #999999;		
	--hover-bg: #FFFFFF;				--focus: #B9D3FB;
	--disabled: #EEEEEE;				--disabled-bg: #F7F7F7;
	--brand-primary: #367D68;			--black: #000000;
	--white: #FFFFFF;							

	/* Others */
	--disabled-bg: #F7F7F7;
	
	--KFV-blue: #0090B0;					--Grey: #E2E3EA;
	--Green: #91af5b;					--Dark-green: #748D45;
	
	--White: #FFFFFF;
  --Red_def: #E55448;		
  --HusOrange: #f7663b;
  --HusGronn300_foot: #004c3e; /*Footer*/
  --HusGronn400_default: #367D68; /*Default knapp*/
  --HusGronn500_hover: #1F4B3F; /*Focus og Hover knapp*/
	
}

/*------------------------------------------------------------------------*/

/*** 1.2 Fonts ***/

/* Noto Serif */

/*@font-face { font-weight: 300; font-family: 'Noto Serif'; src: url("fonts/NotoSerif-Light.ttf"); }

@font-face { font-weight: 400; font-family: 'Noto Serif'; src: url("fonts/NotoSerif-Regular.ttf"); }*/

@font-face { font-weight: 500; font-family: 'Noto Serif'; src: url("fonts/NotoSerif-Medium.ttf"); }

@font-face { font-weight: 600; font-family: 'Noto Serif'; src: url("fonts/NotoSerif-SemiBold.ttf"); }

@font-face { font-weight: 700; font-family: 'Noto Serif'; src: url("fonts/NotoSerif-Bold.ttf"); }

/*@font-face { font-weight: 800; font-family: 'Noto Serif'; src: url("fonts/NotoSerif-ExtraBold.ttf"); }*/

/* Work Sans */

@font-face { font-weight: 300; font-family: 'Work Sans'; src: url("fonts/WorkSans-Light.ttf"); }

@font-face { font-weight: 400; font-family: 'Work Sans'; src: url("fonts/WorkSans-Regular.ttf"); }

@font-face { font-weight: 500; font-family: 'Work Sans'; src: url("fonts/WorkSans-Medium.ttf"); }

@font-face { font-weight: 600; font-family: 'Work Sans'; src: url("fonts/WorkSans-SemiBold.ttf"); }

@font-face { font-weight: 700; font-family: 'Work Sans'; src: url("fonts/WorkSans-Bold.ttf"); }

@font-face { font-weight: 800; font-family: 'Work Sans'; src: url("fonts/WorkSans-ExtraBold.ttf"); }

/*------------------------------------------------------------------------*/

header {
    height: 80px;
    background: var(--Neutral-000);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

header .container-fluid {
	height: inherit;
}
    
header .container-fluid .row {
	height: inherit;
}
      
header .container-fluid .row .col-sm-12 {
    background: url("img/banner.svg") no-repeat;
    margin: 0 auto;
    background-size: contain;
    height: 80px;
	max-width: 1360px;
}

header #invalidReferenceNumberPageHeader *{
	background-size: contain;
	height: inherit;
}

div.jumbotron,
.question-group.show-layout {
	background-color: transparent;
}

/*------------------------------------------------------------------------*/

/*** 3 Body ***/

body {
  font-family: 'Work Sans', Arial, Open Sans, -apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Helvetica Neue',Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';
  font-size: 20px;
  font-weight: 400;
  line-height: 32px;
  color: var(--Neutral-700);
  background-color: var(--Neutral-100);
}

@media only screen and (max-width: 767px) and (min-width: 0px){
	body {
		font-size: 18px;
		line-height: 28px;
	}
}

/*------------------------------------------------------------------------*/

/*** 3.1 Form container ***/

.needs-validation>.row>div.col-sm-3.left-menu-col {
    flex: none;
    max-width: 370px;
    padding: 0;
}

.needs-validation>.row>div.col-md-9 {
    background-color: var(--White);
    max-width: 620px;
    margin-right: 410px;
    margin-left: 40px;
    border-radius: 16px;
    padding: 40px 40px 64px;
    margin-bottom: 128px;
    border: 0px solid transparent;
    margin-top: -124px;
}

.needs-validation > div.row{
	margin-right: 0px;
	margin-left: 0px;
}

.container[id="respondentWrapper"]{
	max-width: 1440px;
	padding-right: 0px;
	padding-left: 0px;
}



.row.question-group.show-layout{
	width: 100%;
	border-radius: 10px;
	padding: 0px; /*5px 5px 5px*/
    /*box-shadow: 3px 3px 10px lightgray;*/
	background-color: var(--Neutral-000);
}


div.container{
	width: 100%;
}

.question-group .question-group-content{
	padding: 0;
}

.justify-content-between {
    height: 0;
}

@media only screen and (max-width: 1440px) and (min-width: 1200px){
	
	.container[id="respondentWrapper"],
	.container-title.container{
		max-width: 1200px;
	}
	header .container-fluid .row .col-sm-12{max-width: 1120px;}
	
	.needs-validation>.row>div.col-md-9{
		margin-right: 170px;
	}
}

@media only screen and (max-width: 1199px) and (min-width: 992px){
	
	.container[id="respondentWrapper"],
	.container-title.container,
	header .container-fluid .row .col-sm-12{
		max-width: 992px;
	}
	
	.needs-validation>.row>div.col-sm-3.left-menu-col{
		max-width: 282px;
	}
	
	nav.nav-bar {
		width: 232px;
		margin-left: 50px;
	}
	
	.needs-validation>.row>div.col-md-9{
		margin-right: 50px;
	}
}

@media only screen and (max-width: 991px) and (min-width: 768px){
	
	.container-title.container,
	.container[id="respondentWrapper"],
	header .container-fluid .row .col-sm-12{
		max-width: 620px;
		margin-left: auto;
		margin-right: auto;
	}
	
	.needs-validation>.row>div.col-md-9{
		margin-right: auto;
		margin-left: auto;
		flex: none;
	}
	
}

@media only screen and (max-width: 767px) and (min-width: 0px){
	
	.container[id="respondentWrapper"],
	.container-title.container,
	header .container-fluid .row .col-sm-12{
		max-width: 620px;
		min-width: 345px;
		margin-right: auto;
		margin-left: auto;
	}
	
	.needs-validation>.row>div.col-md-9{
		margin-right: auto;
		margin-left: auto;
		padding: 24px;
		margin-top: 42px;
	}
	
	/*header .container-fluid .row .col-sm-12{
		margin: 35px 10px 15px;
	}*/
	
	div.col-md-9{
		margin-left: 0px;
		padding-left: 15px;
		padding-right: 15px;
		/* width: calc(100% - 30px); */
	}
	
	body[page="confirmation"] div.col-md-9 {
		padding-left: 25px;
		padding-right: 25px;
	}
	
	.col-md-9 div.row.question-group.show-layout:nth-of-type(2) {
	  padding: 40px 10px 0px !important;
	  margin-bottom: 0em;
	}
	
	.col-md-9 div.row.question-group.show-layout {
	  padding: 16px 10px 0px !important;
	  margin-bottom: 0em;
	}
	
	.container-title.container > div.row{
		margin-left: 0px;
		margin-right: 0px;
	}
	
	.col-sm-12{
		padding-left: 0px;
		padding-right: 0px;
	}
	
}


/*------------------------------------------------------------------------*/

/*** 3.2 Titles (workflow, page and groups) ***/


h1, h2, h3, h4, h5, h6{
	font-family: 'Noto Serif', Open Sans,"Tstar Bold",Arial,"Helvetica Neue",Helvetica,sans-serif;
	font-weight: 500;
}

.container-title.container {
    max-width: 1440px;
    float: left;
    margin-left: auto;
    margin-right: auto;
    margin-top: 64px;
	padding-right: 0px;
	padding-left: 0px;
}

.container-title.container>div {
    margin-left: 80px;
    margin-right: 0;
}

.container-title.container>div>div.logo {
    padding-right: 0;
    padding-left: 0;
}

.col-md-9>.row>.col-md-12{
	padding-left: 0;
	padding-right: 0;
    margin-left:0;
    margin-right: 0;
}

.group-title>h4.my-sm-2 {
    display: none;
}

/* Swapping the order of workflow-title and progress-tracker */
body.show-page-navigation-true.form-page {
    display: flex;
    flex-direction: column;
}
a.shortcut {order: 1;}
header.hero {order: 2;}
body>:nth-child(6) {order: 3;}
.container-title.container {order: 4;}
div#respondentWrapper.container {order: 5;}
footer{order: 6;}
.loadingIndicator {order: 7;}


.workflow-title-top {
    font-family: 'Work Sans',Open Sans,Arial,"Helvetica Neue",Helvetica,sans-serif;
    font-weight: 600;
    font-size: 24px;
    line-height: 36px;
    margin-bottom: 48px;
	max-width: 290px;
}

.page-title h2{
	color: var(--Neutral-700);
	font-weight: 600;
	size: 40px;
	line-height: 56px;
	margin-bottom: 24px;
}


.page-title {
  display: flex;
  justify-content: space-between;
  font-family: 'Noto Serif', Arial !important;
}

.workflow-title {
  display: none;
}

/*.h4, h4 {
   font-size: 1rem !important;
   font-weight: 800 !important;

}*/

@media only screen and (max-width: 1440px) and (min-width: 1200px){
	
	.container-title.container{
		max-width: 1200px;
	}
}

@media only screen and (max-width: 1199px) and (min-width: 992px){
	
	.container-title.container{max-width: 992px;}
	.container-title.container>div{margin-left: 50px;}
	.workflow-title-top {width: 232px;}
}

@media only screen and (max-width: 991px) and (min-width: 768px){
	
	.container-title.container{max-width: 620px;}
	.container-title.container>div{margin-left: 40px;}
	.workflow-title-top {max-width: calc(100% - 80px);}
}

@media only screen and (max-width: 767px) and (min-width: 0px){
	
	.container-title.container{display: none;}
	.page-title h2{
		font-weight: 500;
		font-size: 24px;
		line-height: 32px;
	}
}

/*------------------------------------------------------------------------*/

/*** 3.3 Plain text elements ***/

span.plaintext{
	letter-spacing: -0.02em;
}


/*------------------------------------------------------------------------*/

/*** 3.4 Navigation buttons ***/

.respondent-navigation{
	/*display: grid;*/
	/*grid-template-columns: 1fr 1fr;*/
	/*justify-items: start;*/
}


/* Primary button (and some secondary button styling) */

.btn.btn-primary,
.btn.btn-outline-primary,
div#exampleModal button.btn.btn-secondary,
.jumbotron.text-center~.row.mt-sm-3 button#nextButtonSubmit_Id{
	border-width: 0px;
    border-radius: 8px;
    font-size: 20px;
	padding: 20px 16px;
	line-height: 32px;
	font-weight: 600;
	width: calc(50% - 12px);
	box-shadow: none;
	transition: background-color .2s;
}

.btn.btn-primary {
	background-color: var(--Forest-400);
	color: var(--Neutral-000);
	float: right;
}

.btn.btn-primary:focus,
.btn.btn-outline-primary:focus,
div#exampleModal button.btn.btn-secondary:focus,
.jumbotron.text-center~.row.mt-sm-3 button#nextButtonSubmit_Id:focus{
	outline: 4px solid var(--System-Info-400);
	border: 2px solid var(--System-Info-300);
	padding: 19px 15px;
}

.btn.btn-primary:hover,
.btn.btn-primary:not([disabled]):not(.disabled):active,
.btn.btn-primary:not(:disabled):not(.disabled):active:focus{
	background-color: var(--Forest-500);
	outline: 0 !important;
	border: none !important;
	padding: 20px 16px;
	box-shadow: none;
}

.btn.btn-primary:not([disabled]):not(.disabled):active,
.btn.btn-primary:not(:disabled):not(.disabled):active:focus{
	color: var(--Forest-100);
}

.btn.btn-primary.is-disabled{
	background-color: var(--Neutral-200);
	color: var(--Neutral-500);
}

/* Secondary button - Tilbake-knapp */
.btn.btn-outline-primary,
div#exampleModal button.btn.btn-secondary,
.jumbotron.text-center~.row.mt-sm-3 button#nextButtonSubmit_Id{
    background-color: var(--Neutral-000);
	color: var(--Neutral-700);
    box-shadow: none;
    transition: box-shadow .2s;
	padding: 19px 15px;
	border: 2px solid var(--Forest-400);
	margin-right: 24px;
	float: left;
}

.btn.btn-outline-primary:not([disabled]):not(.disabled):active,
.btn.btn-outline-primary:not(:disabled):not(.disabled):active:focus,
div#exampleModal button.btn.btn-secondary:not([disabled]):not(.disabled):active,
div#exampleModal button.btn.btn-secondary:not(:disabled):not(.disabled):active:focus,
.jumbotron.text-center~.row.mt-sm-3 button#nextButtonSubmit_Id:not([disabled]):not(.disabled):active,
.jumbotron.text-center~.row.mt-sm-3 button#nextButtonSubmit_Id:not(:disabled):not(.disabled):active:focus{
	background-color: var(--Neutral-200);
	color: var(--Forest-400);
	outline: 0 !important;
	border-color: var(--Forest-400);
	box-shadow: none;
}

.btn.btn-outline-primary:hover,
div#exampleModal button.btn.btn-secondary:hover{
	background-color: var(--Neutral-200);
}

.btn.btn-outline-primary.is-disabled{
	background-color: var(--disabled-bg);
	color: var(--Neutral-600);
	border: 2px solid var(--Neutral-200);
}


/* Navigeringspiler */

.page-navigation-btn[name="showNext"]:after,
button[value="AzureADConfig"].front-page-btn.btn>.ui-btn-text:after {
    content: "chevron_right";
    margin-left: 12px;
    font-size: 24px;
}

.page-navigation-btn[name="showNext"].is-disabled {
  opacity: 0.7;
}

.page-navigation-btn[name="showPrev"]:before {
	content: "chevron_left";
	margin-right: 12px;
    font-size: 24px;
}

@media only screen and (max-width: 767px) and (min-width: 0px){
	
	.btn.btn-primary,
	.btn.btn-outline-primary,
	div#exampleModal button.btn.btn-secondary{
		width: 100%;
		padding: 16px;
	}
	
}

/*------------------------------------------------------------------------*/

/*** 3.5 Cancel/Save button ***/

button[name="dataDeleteConfirmed"]{
	padding-left: 0px !important;
	padding-right: 0px !important;
	color: var(--Blue) !important;
	position: relative;
	border: none !important;
	background-color: transparent !important;
	box-shadow: none !important;
	top: 34px;
	order: 3 !important;
	grid-column: 1/3 !important;
	justify-self: stretch;
	margin: 16px 0px 0px !important;
}

button[name="dataDeleteConfirmed"]:hover{
	color: var(--Dark-Turquoise) !important;
}

button.page-navigation-btn.continue-later-btn {
    position: fixed;
    right: 0px;
    top: 24px;
    width: 220px;
    padding: 16px 14px;
    font-size: 18px;
    line-height: 26px;
    height: 64px;
}

body.tag-hide-save button.page-navigation-btn.continue-later-btn {
    display: none;
}

/*------------------------------------------------------------------------*/

/*** 3.5.1 Modal window ***/

div#exampleModal {
    padding-right: 0 !important;
}

.modal.show .modal-dialog {
    box-shadow: 0px 0px 24px 0px #00000040;
    border-radius: 8px;
    border: none;
    max-width: 620px;
}

div#exampleModal button.close {
    display: none;
}

div#exampleModal .modal-content {
    padding: 48px 40px 48px;
    width: 620px;
}

div#exampleModal .modal-header {
    padding: 0 0 16px;
    margin-top: 24px;
    border: none;
}

div#exampleModal .modal-body {
    padding: 0 0 48px;
    text-align: left;
    letter-spacing: -0.02em;
}

.modal-body p:last-child {
    margin-bottom: 0;
}

.modal-body p:first-child {
    display: none;
}

div#exampleModal .modal-footer {
    border: none;
    padding: 0;
}

div#exampleModal h5.modal-title {
    font-size: 24px;
    font-family: 'Work Sans', Arial, sans-serif;
    font-weight: 600;
    line-height: 36px;
}

/* Continue Later modal window buttons */

div#exampleModal button.btn.btn-secondary {
    outline: 0;
}

div#exampleModal .modal-footer>:not(:first-child) {
    margin-left: 0;
}

/* Continue Later icon */

.modal-content:before {
    background-image: url("img/Huseierne-ikoner.svg");
    background-position: -347px -8px;
    display: inline-block;
    margin: 0 auto;
    position: relative;
    width: 64px;
    height: 64px;
    content: "";
}


@media only screen and (max-width: 767px) and (min-width: 0px){
	
	.modal.show .modal-dialog{
		max-width: 344px;
	}
	
	div#exampleModal .modal-content {
		padding: 32px 24px;
		width: 344px;
	}
	
	.modal-content:before {
		background-position: -438px -20px;
		width: 40px;
		height: 40px;
	}
	
	div#exampleModal h5.modal-title {
		font-size: 18px;
		line-height: 26px;
	}
	
	div#exampleModal .modal-body {
		padding: 0 0 32px;
		font-size: 16px;
		line-height: 24px;
	}
	
	.modal-footer {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}
	
	.modal-footer button[name="storeSession"]{
		order: 1 !important;
		margin-bottom: 16px !important;
		width: 100% !important;
	}
	
	div#exampleModal button.btn.btn-secondary{
		order: 2;
		width: 100% !important;
	}
	
	.respondent-navigation{
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}
	
	.btn.btn-primary{
		margin-top: 16px;
		order: 2;
	}
	
	.btn.btn-outline-primary{
		margin-top: 0px;
		order: 1;
	}
	
}

/*------------------------------------------------------------------------*/

/*** 3.7 Hyperlinks ***/

.plaintext a, .session-deleted .jumbotron a, .confirmation-group tbody a {
    text-decoration: underline;
    color: var(--Neutral-700);
    text-decoration-color: var(--Forest-400);
    text-decoration-thickness: 2px;
    line-height: 32px;
}

.plaintext a:hover, 
.session-deleted .jumbotron a:hover,
.confirmation-group tbody a:hover{
	text-decoration-color: var(--Forest-100);
	color: var(--Forest-400);
}

/*------------------------------------------------------------------------*/

/*** 4 Navigation menu(s) ***/

/* As of April 2024, only the vertical navigation menu is being used. */

/*** 4.1 Vertical navigation menu ***/

nav.nav-bar {
    border: none;
	width: 290px;
	margin-top: 10px;
	margin-left: 80px;
	line-height: 32px;
	font-weight: 400;
}

nav.nav-bar li.page {
    margin-bottom: 28px;
	/*padding-left: 16px;*/
}

.progress-tracker li,
nav.nav-bar li.page.active a,
nav.nav-bar li.page:hover a,
nav.navbar .navbar-nav li.active>a.nav-link,
nav.navbar .navbar-nav li:hover a.nav-link,
.btn.btn-link.material-icons {
  color: var(--Neutral-700);
}

nav.nav-bar li.page:hover a[href="#"],
nav.navbar .navbar-nav li a[href="#"].nav-link,
nav.navbar .navbar-nav li a[href="#"].nav-link:hover {
  cursor: default;
}

nav.nav-bar li.page.active a{
	font-weight: 600;
}

nav.nav-bar li.page:hover,
.progress-tracker li.active {
  border-bottom: 0px solid transparent;
}

nav.nav-bar li a,
nav.navbar .navbar-nav li a.nav-link,
.validation-page-alert {
	color: var(--Neutral-700);
	padding-right: 0;
	padding-left: 0;
	width: 226px;
	margin-left: 64px;
}

nav.nav-bar li a[href="#"],
nav.nav-bar li.page:hover a[href="#"],
nav.navbar .navbar-nav li a[href="#"].nav-link,
nav.navbar .navbar-nav li a[href="#"].nav-link:hover,
.progress-tracker li.active~li,
.auth-info .auth-name,
.workflow-title {
  color: var(--Neutral-500);
}


@media only screen and (max-width: 1199px) and (min-width: 992px){
	
	.needs-validation>.row>div.col-sm-3.left-menu-col{
		max-width: 282px;
	}
	
	nav.nav-bar {
		width: 232px;
		margin-left: 50px;
	}
	
}

@media only screen and (max-width: 992px) and (min-width: 0px) {
  .progress-tracker {
    display: none;
  }
  
  nav.nav-bar {
    border: 0.5px solid #DBDCDD;
    box-shadow: 0px 0px;
    padding: 8px;
    width: 400px;
	margin: 8px auto 24px;
}
    
}

/*------------------------------------------------------------------------*/

/*** 4.1.2 Page numbers ***/

nav.nav-bar li.page a:before, nav.nav-bar li.page a[href="#"]:before, nav.nav-bar li.page.active a:before {
    position: relative;
    float: left;
    text-align: center;
    font-size: 20px;
    /* padding: 6px 0 8px; */
    width: 48px;
    height: 48px;
    font-weight: 600;
    line-height: 32px;
    left: -64px;
    margin-right: -64px;
    top: -8px;
    background-color: var(--Neutral-000);
    border-radius: 24px;
    border: 2px solid var(--Forest-500);
    vertical-align: top;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
}

nav.nav-bar li.page a[href="#"]:before{
	border: 2px solid var(--Neutral-400);
}

.page[index="1"] :is(a,a[href="#"],.active a):before{content:"1";}
.page[index="2"] :is(a,a[href="#"],.active a):before{content:"2";}
.page[index="3"] :is(a,a[href="#"],.active a):before{content:"3";}
.page[index="4"] :is(a,a[href="#"],.active a):before{content:"4";}
.page[index="5"] :is(a,a[href="#"],.active a):before{content:"5";}
.page[index="6"] :is(a,a[href="#"],.active a):before{content:"6";}
.page[index="7"] :is(a,a[href="#"],.active a):before{content:"7";}
.page[index="8"] :is(a,a[href="#"],.active a):before{content:"8";}
.page[index="9"] :is(a,a[href="#"],.active a):before{content:"9";}
.page[index="10"] :is(a,a[href="#"],.active a):before{content:"10";}
.page[index="11"] :is(a,a[href="#"],.active a):before{content:"11";}
.page[index="12"] :is(a,a[href="#"],.active a):before{content:"12";}
.page[index="13"] :is(a,a[href="#"],.active a):before{content:"13";}
.page[index="14"] :is(a,a[href="#"],.active a):before{content:"14";}
.page[index="15"] :is(a,a[href="#"],.active a):before{content:"15";}
.page[index="16"] :is(a,a[href="#"],.active a):before{content:"16";}
.page[index="17"] :is(a,a[href="#"],.active a):before{content:"17";}
.page[index="18"] :is(a,a[href="#"],.active a):before{content:"18";}
.page[index="19"] :is(a,a[href="#"],.active a):before{content:"19";}


/* Navigation menu icons */

/* Path divider */
/* In order to not show the last one, all arrows are pushed one line above */
nav.nav-bar li.page:before {
    background-image: url("img/Huseierne-ikoner.svg");
    background-position: -186px -32px;
    display: inline-block;
    position: relative;
    float: left;
    top: -26px;
    left: 22px;
    width: 2px;
    height: 16px;
    content: "";
}

nav.nav-bar li.page:first-of-type:before{
	display: none;
}

/*nav.nav-bar li.page:nth-of-type(2):before {
    top: -26px;
}*/

@media only screen and (max-width: 767px) and (min-width: 0px){
	
	nav.nav-bar li.page:after{
		left: -33px;
		top: -55px;
	}
}


/* Completed step icon */

nav.nav-bar li.page a:before {
    background-image: url("img/Huseierne-ikoner.svg");
	color: transparent;
    background-position: -17px -17px;
}

nav.nav-bar li.page.active a:before{
	background-image: none;
	color: var(--Neutral-700);
}

nav.nav-bar li.page a[href="#"]:before{
	background-image: none;
	color: var(--Neutral-500);
}

/* Error validation step icon */


nav.nav-bar li.page a:has(span.badge-danger)::before {
    background-image: url("img/Huseierne-ikoner.svg");
    background-color: transparent;
    background-position: -98px -18px;
    display: inline-block;
    position: relative;
    content: "";
    z-index: 2;
    border: 2px solid var(--System-Error-500);
}


.badge-danger {
    color: transparent;
    background-color: transparent;
    display: inline-block;
    padding: 0;
}

/*.badge-danger:after {
    background-image: url("img/Huseierne-ikoner.svg");
    background-color: transparent;
    background-position: -96px -16px;
    display: inline-block;
    margin-right: -19px;
    position: relative;
    left: -64.25px;
    top: -8.25px;
    float: left;
    width: 49px;
    height: 49px;
    content: "";
    z-index: 2;
}*/

.badge {
    float: left;
    margin-right: -40px;
}

@media only screen and (max-width: 991px) and (min-width: 0px){
	
	.badge-danger:after {
		zoom: 0.9;
		left: -42px;
		top: -9px;
	}
}


/*nav.nav-bar li.page a:after,
nav.nav-bar li.page a[href="#"]:after,
nav.nav-bar li.page.active a:after{
	background-image: url("img/Huseierne-ikoner.svg");
	background-color: transparent;
	display: inline-block;
	position: relative;
	float: left;
	content:"";
	left: -64px;
	top: -4px;
	margin-right: -40px;
	margin-top: 0px;
}*/


/*------------------------------------------------------------------------*/




/*------------------------------------------------------------------------*/

/*** 5 Text input elements (text field, text area, date & password) ***/

/*** 5.1 General styling ***/

.form-group.row > div.col-md-12,
.col-md-9>.row{
	padding-left: 0;
	padding-right: 0;
    margin-left:0;
    margin-right: 0;
}

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

.mandatory label.question-label::after,
.page_mandatory label.question-label::after {
    content: '*';
	color: var(--System-Error-500);
}

/*------------------------------------------------------------------------*/

/*** 5.1.1 Input label ***/

label{
	margin-bottom: 8px;
}

label.question-label {
	font-weight: 600;
	line-height: 32px;
}

/*------------------------------------------------------------------------*/

/*** 5.1.2 Input field ***/

.form-control::placeholder {
    color: var(--Neutral-500) !important;
}

.form-control{
	border-radius: 8px;
	border: 2px solid var(--Neutral-300);
	padding: 20px 16px;
	height: 72px;
	font-size: 20px;
	color: var(--Neutral-700);
	line-height: 32px;
}

.form-control:hover {
    border: 3px solid var(--Neutral-500);
    padding: 18.5px 14.5px;
}

.form-control:not([disabled]):not(.disabled):active,
.form-control:focus{
	outline: 4px solid var(--System-Info-400);
	border: 2px solid var(--System-Info-300);
	color: var(--Neutral-700);
	padding: 19px 16px;
}

.form-control:disabled, .form-control[readonly]{
	background-color: var(--Neutral-100);
	cursor: default;
}

@media only screen and (max-width: 767px) and (min-width: 0px){
	.form-control{
		padding: 18px 14px;
		height: 64px;
	}
	
}

/*------------------------------------------------------------------------*/

/*** 5.1.3 Input field error ***/

.custom-select.is-invalid, .form-control.is-invalid, .was-validated .custom-select:invalid,
.was-validated .form-control:invalid, .custom-select.is-invalid:focus,
.form-control.is-invalid:focus, .was-validated:focus .custom-select:invalid:focus,
.was-validated .form-control:invalid:focus, .form-control.is-invalid~.select2 .select2-selection{
    border-color: var(--System-Error-500);
	background-color: var(--System-Error-100);
}

.invalid-feedback{
	color: var(--System-Error-500);
	font-size: 16px;
	line-height: 24px;
	letter-spacing: -0.02em;
	margin-top: 8px;
	display: block;
}

.datePickerElement span#instructs {
    display: none;
}

/*------------------------------------------------------------------------*/

/*** 6 Single- and Multi-select ***/

.form-check{
	margin-bottom: 4px;
	padding-left: 22px;
}

label.form-check-label {
    width: calc(100% + 22px);
    margin-left: -22px;
	height: auto;
	padding: 17px 17px 17px 64px;
	letter-spacing: -0.02em;
}

/*.form-check-label,
.form-check-input.is-invalid~.form-check-label {
    margin-left: 22px;
}*/

@media only screen and (max-width: 767px) and (min-width: 0px){
	
	label.form-check-label{
		width: calc(100% + 12px);
		padding: 10px 10px 10px 48px;
		margin-left: -12px;
	}
	
	.form-check{
		padding-left: 12px;
	}
}


/*------------------------------------------------------------------------*/


/*** 6.1 Radio buttons ***/

.form-check.form-check-inline {
    margin-bottom: 0;
    margin-right: 4px;
	padding-left: 0;
}

.form-check.form-check-inline:nth-child(2) {
    padding-left: 22px;
}

.form-check-inline .form-check-input {
    position: absolute;
}

.form-check-inline>.form-check-label {
    padding: 16px 16px 16px 64px;
}

/*label.form-check-label {
	min-height: 48px;
	width: 398px;
	margin: -.5px 0 -.5px 0px;
	padding: 12px 55px;
	border: 1px solid var(--Blue-20);
	cursor: pointer;
}*/

input[type="radio"]:focus-visible {
    outline-color: transparent;
}

input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    background-color: transparent;
    /* margin: 0; */
    font: inherit;
    color: var(--Forest-400);
    width: 22px;
    height: 22px;
    border: 2px solid currentColor;
    border-radius: 50%;
    transform: translateY(-0.075em);
    display: grid;
    place-content: center;
    margin-top: 22px;
	margin-left: 0px;
}

input[type="radio"]::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em #e20046(--form-control-color);
  /* Windows High Contrast Mode */
  background-color: var(--Forest-500);
}

input[type="radio"]:checked::before {
  transform: scale(1);
}

input.form-check-input:hover + label {
	background-color: var(--disabled-bg);
    cursor: pointer;
	border-radius: 8px;
}


input.form-check-input:checked + label,
input.form-check-input:active + label{
	background-color: var(--System-Success-100);
	cursor: default;
	border-radius: 8px;
	height: auto;
}

/*input.form-check-input:focus + label{
	border: 2px solid var(--System-Info-400);
	outline: 2px solid var(--System-Info-400);
	padding: 15px 39px 15px 63px;
	border-radius: 8px;
}*/

.custom-file.is-invalid~.invalid-feedback,
.form-check.is-invalid~.invalid-feedback {
    display: block;
}

@media only screen and (max-width: 767px) and (min-width: 0px){
	
	input[type="radio"]{
		margin-top: 14px;
	}
	
	.form-check.form-check-inline:nth-child(2){
		padding-left: 12px;
	}
	
	.form-check-inline>.form-check-label {
		width: calc(100% + 12px);
		padding: 10px 10px 10px 48px;
	}
}

/*------------------------------------------------------------------------*/


/*** 6.2 Check boxes ***/

input[type="checkbox"]:focus-visible {
    outline-color: transparent;
}

input[type="checkbox"] {
	-webkit-appearance: none;
	appearance: none;
	background-color: transparent;
	font: inherit;
	color: var(--Forest-400);
	width: 21px;
	height: 21px;
	border: 2px solid currentColor;
	border-radius: 4px;
	transform: translateY(-0.075em);
	display: grid;
	place-content: center;
	margin-top: 22px;
	margin-left: 0px;
}

input[type="checkbox"]::before {
	content: "";
	width: 12px;
	height: 12px;
	border-radius: 2px;
	transform: scale(0);
	transform-origin: center;
	transition: 120ms transform ease-in-out;
	box-shadow: inset 1em 1em var(--form-control-color);
	background-color: var(--Forest-500);
}

input[type="checkbox"]:checked::before {
	transform: scale(1);
}

input[type="checkbox"].form-check-input:focus + label{
	border: 2px solid var(--System-Info-400);
	outline: 2px solid var(--System-Info-400);
	padding: 15px 15px 15px 62px;
	border-radius: 8px;
}

.form-check-inline>label.form-check-label {
    margin-right: 4px;
}

.form-check-inline input[type="checkbox"].form-check-input:focus + label{
	padding: 14px 14px 14px 62px;
}

/*input[type="checkbox"].form-check-input:not([disabled]):not(.disabled):active + label,
input[type="checkbox"].form-check-input:not(:disabled):not(.disabled):active:focus + label{
	outline: 0 !important;
	padding: 16px 40px 16px 64px;
	border: none !important;
}*/

input[type="checkbox"]:disabled {
  /*--form-control-color: var(--form-control-disabled);
  color:  var(--HusOrange);*/
  cursor: not-allowed;
}

@media only screen and (max-width: 767px) and (min-width: 0px){
	
	input[type="checkbox"]{
		margin-top: 14px;
	}
	
	input[type="checkbox"].form-check-input:focus + label,
	.form-check-inline input[type="checkbox"].form-check-input:focus + label{
		padding: 8px 8px 8px 46px;
	}

}

/*------------------------------------------------------------------------*/

/*** 6.4 Dropdown styling ***/

select.form-control{
	box-shadow: none;
}

/*option:hover{
	background-color: var(--Grey);
	font-weight: 600;
}*/


.select2-container--open .select2-dropdown--below,
.select2-container--open .select2-dropdown--above {
    min-width: 240px;
    border-radius: 8px !important;
    max-height: 300px;
    min-height: 30px;
    border: 1px solid var(--Blue-20);
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.16);
}

.select2-container--open .select2-dropdown--above{
	top: -4px;
}

/* New select2 component */

.select2-container--default .select2-selection--single {
    border: none;
}

.select2-selection {
    border: 2px solid var(--Neutral-300) !important;
    border-radius: 8px !important;
    height: 72px !important;
}

.select2-selection__rendered {
    color: var(--Dark-Blue) !important;
    font-size: 20px;
    line-height: 32px !important;
    padding: 19.5px 16px 18.5px !important;
}

.select2-search--dropdown {
    display: none !important;
}

.select2-results__options {
    border-radius: 8px;
}

.select2-results__option[aria-selected] {
    border-bottom: 1px solid var(--Neutral-300);
    padding: 18px 16px;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: -0.02em;
}


/* Hover styling - Dropdown */
span.select2-selection.select2-selection--single:hover {
    border: 3px solid var(--Neutral-500) !important;
}

.select2-selection.select2-selection--single:hover>.select2-selection__rendered{
	padding: 18px 14.5px !important;
}

/* Focus styling - Dropdown */

span.select2-selection.select2-selection--single:not([disabled]):not(.disabled):active,
span.select2-selection.select2-selection--single:focus {
    outline: 4px solid var(--System-Info-400);
    border: 2px solid var(--System-Info-300) !important;
	/*width: calc(100% + 2px);
    margin-left: -1px;
    margin-top: -0.5px;*/
}

span.select2-selection.select2-selection--single:not([disabled]):not(.disabled):active>.select2-selection__rendered,
span.select2-selection.select2-selection--single:focus>.select2-selection__rendered {
    margin-left: 0px;
    padding: 19.5px 16px 18.5px !important;
}

span.select2-selection.select2-selection--single:focus-visible {
    outline: none;
}

/* Hover styling answer option */ 
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--Neutral-100) !important;
    color: var(--Neutral-700) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected="true"] {
    background-color: var(--Neutral-300) !important;
    color: var(--Neutral-700);
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: var(--Neutral-200) !important;
}

/* Dropdown arrow */

.select2-selection__arrow b {
    display: none;
}

.select2-selection__arrow{
    background-image: url("img/Huseierne-ikoner.svg");
    background-color: transparent;
    background-position: -310px -35px;
    display: inline-block;
    position: relative;
    margin-right: 19px;
    margin-top: 28.5px;
    float: left;
    width: 22px !important;
    height: 22px !important;
	content:"";
}

.select2-container--open .select2-selection__arrow{
    background-position: -270px -35px;
}

@media only screen and (max-width: 767px) and (min-width: 0px){
	.select2-selection {
		height: 64px !important;
	}

	.select2-selection__rendered {
		font-size: 18px;
		line-height: 28px !important;
		padding: 17.5px 14px 16.5px !important;
	}
	
	span.select2-selection.select2-selection--single:not([disabled]):not(.disabled):active>.select2-selection__rendered,
	span.select2-selection.select2-selection--single:focus>.select2-selection__rendered {
		padding: 17.5px 14px 16.5px !important;
	}
	
}

/*------------------------------------------------------------------------*/

/*** 8 Help and validation texts ***/

.btn.btn-link.material-icons.help-btn {
    background-image: url("img/Huseierne-ikoner.svg");
    background-position: -220px -29px;
    display: inline-block;
    position: relative;
    width: 22px;
    height: 22px;
    content: "";
    text-decoration: none;
    padding: 0px;
    color: transparent;
}

.btn.btn-link.material-icons:active,
.btn.btn-link.material-icons:focus,
.btn.btn-link.material-icons.help-btn:hover{
    box-shadow: 0 0 0 .2rem rgba(0,123,255,.25);
}


/* Help text pop-up / popover / tooltip */

.popover {
	border: 0px solid var(--Mid-Purple);
	box-shadow: 0px 4px 12px rgba(20, 64, 107, 0.16);
	border-radius: 8px;
	color: #FFFFFF !important;
	padding: 0px 16px 20px 16px;
	letter-spacing: -0.02em;
	font-size: 16px;
	line-height: 24px;
	min-width: 320px;
	margin: 0;
	background-color: var(--Neutral-700);
}

.bs-popover-auto[x-placement^=right] .arrow::before, .bs-popover-right .arrow::before {border-right-color: var(--Neutral-700);}
.bs-popover-auto[x-placement^=left] .arrow:before, .bs-popover-left .arrow:before{border-left-color: var(--Neutral-700);}

.bs-popover-auto[x-placement^=right] .arrow:after, .bs-popover-right .arrow:after{border-right-color: var(--Neutral-700);}
.bs-popover-auto[x-placement^=left] .arrow:after, .bs-popover-left .arrow:after{border-left-color: var(--Neutral-700);}

.popover-body{
	padding: 0;
    margin-top: 6px;
    margin-bottom: -14px;
    margin-left: -1px;
	color: var(--Neutral-000);
	font-family: 'Work Sans', Arial, Open Sans, -apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Helvetica Neue',Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';
}

.popover-body button.close{
	margin-top: 24px;
	/* color: white; */
	display: none;
}

.popover-body a{
	color: var(--System-Info-400);
}

@media only screen and (max-width: 452px) and (min-width: 0px){

	.popover {
		min-width: 200px;
	}
	
	.popover-body{
		font-size: 14px;
		line-height: 20px;
	}
	
}

/*------------------------------------------------------------------------*/

/**** 9 Confirmation page ****/

.confirmation-group {
  /*border: 1px solid rgba(193,194,196, 0.4);*/
  /* border: 1px solid #DBDCDD; */
  border-radius: 2px;
  /*padding:1em;*/
  margin-bottom: 0em;
}

.needs-validation .row .col-md-9 .row .container > .row.confirmation-group {
    border: none;
    border-radius: 16px;
    background-color: var(--disabled-bg);
	margin-bottom: 24px;
}

.container.confirmation-group {
    padding-left: 0;
    padding-right: 0;
}

.confirmation-group .confirmation-group .col-md-5,
.confirmation-group .confirmation-group .col-md-7 {
    padding-left: 24px;
    padding-right: 24px;
}

.confirmation-group .row{
	display: block;
}

.confirmation-group .col-md-7, .confirmation-group .col-md-5 {
    max-width: 100%;
}

.confirmation-group .col-md-5 {
    color: var(--Neutral-600);
    letter-spacing: -0.02em;
	font-size: 18px;
}

.confirmation-group .col-md-7 {
    margin-bottom: 16px;
    font-weight: 600;
	font-size: 18px;
}

.confirmation-group .page-title-row {
    background-color: var(--disabled-bg);
    border-radius: 16px;
	padding: 24px;
}

/*.col-sm-12 > div.row:nth-child(4) .container {
    border: 0px solid var(--Lighter-Granite);
    margin-bottom: 0;
}

.needs-validation .row .col-sm-12 .row .container .confirmation-group .container .row .row,
.needs-validation .row .col-sm-12 .row .container .confirmation-group .container .page-title-row,
.needs-validation .row .col-sm-12 .row .container .confirmation-group .container div.row:nth-child(2){
	border-top: 0px solid transparent;
}*/

.confirmation-group .table td, .confirmation-group .table th{
	border-top: 1px solid transparent;
	padding: 0;
}

.confirmation-group .table thead th{
	border-bottom: 1px solid transparent;
	padding-bottom: 0;
}

.confirmation-group tbody a {
    font-weight: 600;
}

.row.confirmation-group:first-of-type {
    margin-top: 1rem;
}

.confirmation-group .row {
  margin-bottom: 0em;
}

/*------------------------------------------------------------------------*/

/*** 11 Start & Continue Later page ***/

.front-page .container-title.container {
    display: none;
}

.front-page .jumbotron {
    background-color: var(--Neutral-000);
    max-width: 540px;
    margin-left: auto;
    border-radius: 16px;
    padding: 40px 40px 64px;
    margin-right: auto;
	margin-top: 48px;
}

.front-page .jumbotron .my-4,
form#enterWorkFlow>.mx-auto.text-center.continue-later-reference,
.btn.AzureAD{
    display: none;
}

button[value="AzureADConfig"].front-page-btn.btn{
	border-width: 0px;
    border-radius: 8px;
    font-size: 20px;
	padding: 20px 16px;
	line-height: 32px;
	font-weight: 600;
	width: calc(50% - 20px);
	box-shadow: none;
	transition: background-color .2s;
	background-color: var(--Forest-400);
	color: var(--Neutral-000);
	text-align: center;
}

button[value="AzureADConfig"].front-page-btn.btn:focus{
	outline: 4px solid var(--System-Info-400);
	border: 2px solid var(--System-Info-300);
	padding: 19px 15px;
}

button[value="AzureADConfig"].front-page-btn.btn:hover,
button[value="AzureADConfig"].front-page-btn.btn:not([disabled]):not(.disabled):active,
button[value="AzureADConfig"].front-page-btn.btn:not(:disabled):not(.disabled):active:focus{
	background-color: var(--Forest-500);
	outline: 0 !important;
	border: none !important;
	padding: 20px 16px;
	box-shadow: none;
	text-align: center;
}

button[value="AzureADConfig"].front-page-btn.btn:not([disabled]):not(.disabled):active,
button[value="AzureADConfig"].front-page-btn.btn:not(:disabled):not(.disabled):active:focus{
	color: var(--Forest-100);
}

span.ui-btn-text {
    vertical-align: middle;
}

ul.form-authentication-methods {
    padding: 0em;
	margin-top: 32px;
}

.form-authentication-methods .authentication-item {
  list-style: none;
  padding: 0.6em 0 0.6em 0;
}

/*------------------------------------------------------------------------*/

/*** 11.1 Continue Later ***/

body.continue-later .form-inline.justify-content-center.text-center,
body.continue-later form#emailRef{
	display: none;
}

body.continue-later .btn.btn-primary{
	float: none;
}

button.btn.btn-outline-primary.btn-sm.continue-later-small-btn.disableOnFormSubmit {
    display: none;
}

body:has(a[href^="downloadReceiptPdf"]) button.page-navigation-btn.continue-later-btn {
    display: none;
}

/*------------------------------------------------------------------------*/

/*** 11.2 Receipt page ***/

.auth-info {
    display: none;
}

.jumbotron.text-center h3, .jumbotron.text-center hr.my-4,
.jumbotron.text-center p:first-of-type {
    display: none;
}

.jumbotron.text-center h4 {
    color: var(--Neutral-700);
    font-weight: 600;
    font-size: 32px;
    line-height: 48px;
    margin-bottom: 24px;
    text-align: left;
}

.jumbotron.text-center{
    padding: 0;
}

.jumbotron.text-center p {
    margin-bottom: 48px;
}

/* Navigate further */

.jumbotron.text-center~.row.mt-sm-3 button#nextButtonSubmit_Id{
	width: calc(100% - 24px);
}

.jumbotron.text-center~.row.mt-sm-3 button#nextButtonSubmit_Id:hover {
    border: 2px solid var(--Forest-400) !important;
    background-color: var(--Neutral-200);
    width: calc(100% - 24px);
}

.jumbotron.text-center~.row.mt-sm-3 button#nextButtonSubmit_Id:before{
    content: "chevron_left";
    margin-right: 12px;
    font-size: 24px;
}

.jumbotron.text-center~.row.mt-sm-3 button#nextButtonSubmit_Id:after{
    display: none;
}

@media only screen and (max-width: 767px) and (min-width: 0px){
	.jumbotron.text-center~.row.mt-sm-3,
	.jumbotron.text-center~.row.mt-sm-3 button#nextButtonSubmit_Id{
		width: 100%;
	}
	
	
}

/*------------------------------------------------------------------------*/

/*** 11.2 End page ***/


body.tag-end-page .needs-validation > div.row {
    width: 620px;
    margin-left: 300px;
}

body.tag-end-page .col-sm-12.logo {
    display: none;
}

body.tag-end-page .needs-validation > div.row >.col-sm-12,
body.tag-end-page .needs-validation > div.row .col-md-12.page-title {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
}

@media only screen and (max-width: 991px) and (min-width: 768px){
	body.tag-end-page .needs-validation > div.row {
		width: 620px;
		max-width: 620px;
		margin-left: auto;
	}
}

@media only screen and (max-width: 767px) and (min-width: 0px){
	body.tag-end-page .needs-validation > div.row {
		max-width: 345px;
		width: 100%;
		margin-left: auto;
		margin-right: auto;
		margin-top: 24px;
	}
}


/* Bank ID signing page */

body>.container-title.container~.container>.row {
    width: 620px;
    margin-left: auto;
    margin-right: auto;
}

body.front-page>.container-title.container~.container>.row,
body.show-page-navigation-true.form-page>.container-title.container~.container>.row {
    width: auto;
}

.jumbotron {
    padding-top: 0;
}

button.front-page-btn.btn[value="BankIDOIDCConfig"] {
    margin-top: -60px;
	border-width: 0px;
    border-radius: 8px;
    font-size: 20px;
    padding: 20px 16px;
    line-height: 32px;
    font-weight: 600;
    width: auto;
    box-shadow: none;
    transition: background-color .2s;
    background-color: var(--Vendor-BankID-300);
    color: var(--Neutral-000);
    text-align: center;
}

button[value="BankIDOIDCConfig"].front-page-btn.btn:focus{
	outline: 4px solid var(--System-Info-400);
	border: 2px solid var(--System-Info-300);
	padding: 19px 15px;
}

button[value="BankIDOIDCConfig"].front-page-btn.btn:hover,
button[value="BankIDOIDCConfig"].front-page-btn.btn:not([disabled]):not(.disabled):active,
button[value="BankIDOIDCConfig"].front-page-btn.btn:not(:disabled):not(.disabled):active:focus{
	outline: 4px solid var(--Vendor-BankID-200) !important;
    border: 2px solid var(--Neutral-100) !important;
    background-color: var(--Vendor-BankID-300);
    /* border: none !important; */
    padding: 20px 16px;
    box-shadow: none;
    text-align: center;
}

button[value="BankIDOIDCConfig"].front-page-btn.btn:not([disabled]):not(.disabled):active,
button[value="BankIDOIDCConfig"].front-page-btn.btn:not(:disabled):not(.disabled):active:focus{
	color: var(--Forest-100);
}



/* Alexander code */

/*{
	display: none;
}



.languageSelectionSection {
    margin-top: 1.2rem;
	font-size: 20px;
	font-weight: 550;
	
}

.languageSelectionSection .formElementItem{
	width: 100%;
	display: inline-block;
	margin-top: 0.5rem;
}

.language-btn:first-child {
    margin-left: -6px;
    margin-right: 12px;
	font-size: 0.01px;
}

.language-btn:first-child:before{
	content: "Bokmål";
	font-size: 16px !important;
}

.language-btn.language-selected:first-child:after{
	font-size: 16px !important;
}

.btn-primary[name="byPassFrontPage"]{
	font-size: 1.25rem;
	padding: 5px;
	border-radius: 10px;
}

.front-page .jumbotron h2.text-center, .workflow-title{
	color: #3d3d3d;
}*/

/*------------------------------------------------------------------------*/

/**** Styling elements ****/

.style-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  /*font-size: 2.4rem;*/
  /*font-size: 24px;*/
  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;
  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;
  /* Support for IE. */
  font-feature-settings: 'liga';
}

/**** Top navigation ****/

.top-navigation ul.navbar-nav {
  width: 60%;
  justify-content: space-between;
}

/**** Progress tracker ****/

.progress-tracker {
    font-family: "space-regular", Arial, Open Sans, -apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Helvetica Neue',Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';
    font-size: 12px;

  padding-left: 0;
  width: 100%;
  list-style: none;
  display: flex;
  justify-content: flex-start;
}

.progress-tracker li {
  /*flex-grow: 1;*/
  text-align: center;
  padding: 0.3em;
  padding-right: 1.5em;
  border-bottom: 1px solid #DBDCDD;
}

.progress-tracker li i:before {
  content: "check";
  font-size: 1.0rem;
  font-size: 10px;
  /*font-size: 1em;*/
}

.progress-tracker li.active~li {
  border-bottom: 1px solid transparent;
}

.progress-tracker li.active~li i.style-icons:before {
  content: "";
}

/**** Left navigation ****/
 
.progress-tracker li {
    /*flex-grow: 1;*/
    color: #1a5094;
    text-align: center;
    margin-top: 20px;
    margin: center;
    
    padding: 0.3em;
    padding-right: 1.5em;
    border-bottom: 1px solid #DBDCDD; }

.progress-tracker li.active {
    border-bottom: 1px solid #1a5094; }

nav.navbar .navbar-nav li.active > a.nav-link {
  color: #1a5094; }
nav.navbar .navbar-nav li:hover a.nav-link {
  color: #1a5094; }

nav.nav-bar .nav.flex-column {
  width: 100%;
}

nav.nav-bar li.group ul li {
  padding-left: 1.0rem;
}

/**** Top menu ****/

.auth-info {
  position: fixed;
  right: 10px;
  /*display: flex;*/
  padding: 5px;
  border: 1px solid #A7A9AC;
  border-top: none;
  border-bottom-left-radius: 2px;
  border-bottom-right-radius: 2px;
  z-index: 100;
  background: #fff;
}

.auth-info .auth-info-badge.BANKID {
  background-image: url("img/logos.png");
  background-position: 0 700px;
  height: 20px;
  width: 70px;
  margin-top: 3px;
}

.auth-info .auth-info-badge.IDPORTEN {
  background-image: url("img/logos.svg");
  background-position: -115px -514px;
  width: 80px;
}

.auth-info .auth-info-badge.VIPPS {
  background-image: url("img/logos.svg");
  background-position: -115px -561px;
  width: 71px;
}

.auth-info .auth-info-badge.BANKID_OIDC {
  background-image: url("img/logos.svg");
  background-position: -115px -514px;
  width: 71px;
}

.auth-info .auth-info-badge.IDPORTEN_OIDC {
  background-image: url("img/logos.svg");
  background-position: -115px -463px;
  width: 71px;
}

.auth-info .auth-info-badge.AZURE_AD {
  background-image: url("img/logos.svg");
  background-position: -115px -613px;
  width: 71px;
}

.auth-info .auth-name {
  font-size: 1.0rem;
  font-size: 10px;
  /*font-size: 0.8em;*/
  line-height: 1.8em;
  font-style: italic;
  margin-left: 0.3em;
}


/**** Question group ****/

.question-group {
  padding: 15px;
  margin-bottom: 0.3em;
  /* for nested groups */
}

.question-group .group-title-row>div {
  display: flex;
  justify-content: space-between;
}

.question-group button.addGroup {
  margin-right: 5px;
  margin-bottom: 5px;
}

.question-group.show-layout {
  /*border:1px solid $light-gray;*/
  border-radius: 3px;
}

.question-group .question-group.show-layout {
  /*border: 1px solid #DBDCDD;*/
}

/**** Question group in tables ****/

.questionsTable .add-remove-buttons {
  text-align: right;
}

.questionsTable .add-remove-buttons button {
  margin-bottom: 5px;
  width: 100%;
}

.col-auto {
  max-width: 100%;
}

/**** Navigation ****/

.respondent-navigation {
  text-align: center;
}

/**** Buttons ****/

.btn {

	border-color: #2B7BB9;	
    border-width: 0px;	
    border-radius: 50px;	
    font-size: 16px;	
	padding: 7px 7px;	
	font-size: 1rem;
}

.adjusted-help label.question-label {
  max-width: 90%;
}

.adjusted-help .btn.btn-link.material-icons.help-btn {
  float: right;
  padding-top: 0.375rem;
}

/**** Group buttons ****/

.btn.addGroup:before {
  content: "add";
}

.btn.removeGroup:before {
  content: "remove";
}

/**** Navigation buttons ****/

.page-navigation-btn {
  min-width: 8em;
}

.page-navigation-btn[name="validateForm"]:before {
  content: "playlist_add_check";
  margin-right: 0.3em;
}

/* add google matherial font to display icons */

.btn.print-pdf-btn:after,
.front-page .language-btn.language-selected:after,
.continue-later-small-btn:after,
.page-navigation-btn[name="showPrev"]:before,
.page-navigation-btn[name="showNext"]:after,
.page-navigation-btn[name="validateForm"]:before,
.btn.removeGroup:before,
.btn.addGroup:before,
button[value="AzureADConfig"].front-page-btn.btn>.ui-btn-text:after,
.jumbotron.text-center~.row.mt-sm-3 button#nextButtonSubmit_Id:before {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  /* line-height: 1.3em;*/
  vertical-align: top;
  /* Support for IE. */
  font-feature-settings: 'liga';
}

/*Fjernet pilen på tilbakeknappen/nesteknappen på kvitteringsaktiviteten*/
.jumbotron.text-center~.row.mt-sm-3 button#nextButtonSubmit_Id:before {
        display: none
}

.page-navigation-btn.continue-later-btn {
  float: left;
}

.continue-later-small-btn:after {
  content: "pause";
}

.btn.print-pdf-btn:after {
  content: "print";
}

/**** Front page buttons ****/

.front-page-btn.btn:not([disabled]):not(.disabled).active,
.front-page-btn.btn:not([disabled]):not(.disabled):active,
.front-page-btn {
  text-align: left;
  cursor: pointer;
}

.front-page .language-btn.language-selected:after {
	content: "check";
}

.btn.AzureAD, .btn.BankIDOIDC, .btn.ID-portenOIDC,
.btn.VippsLogin_NO, .btn.VippsLogin_EN, .btn.ID-porten{
	background-image: url("img/logos.svg");
	padding-left: 18px;
  padding-top: 18px;
  padding-bottom: 12px;
  padding-right: 18px;
  border-radius: 0px;
}

.btn.ID-portenOIDC, .btn.ID-porten 		{background-position: -14px -14px;}
.btn.BankIDOIDC 						{background-position: -14px -64px;}
.btn.VippsLogin_NO, .btn.VippsLogin_EN 	{background-position: -14px -114px;}
.btn.AzureAD 							{background-position: -14px -164px;}

.btn.BankID {
  background-image: url("img/logos.png");
  background-position: 0 0;
  padding-left: 158px;
  padding-top: 36px;
}

.form-authentication-methods .authentication-item button {
    cursor: pointer;
    background-color: #FFF;
    width: 240px;
    padding: 8px;
    border: 1px solid #C8CED6;
    border-radius: 10px;
}

.form-authentication-methods .authentication-item button:hover {
    background-color: #F0F3F7;
}

.form-authentication-methods .authentication-item button:focus{
	box-shadow: 0rem 0rem 0.5rem 0.2rem rgb(32 47 62 / 12%);
}


/**** Select BankId version ****/

ul.form-authentication-methods {
  padding: 0em;
}

.form-authentication-methods .authentication-item {
  list-style: none;
  padding: 0.6em 0 0.6em 0;
}

.form-authentication-methods .bigButtonText {
  height: fit-content;
  width: 10em;
  display: inline-block;
}

/*** BankId sign ****/

.bankIdSigning {
  display: flex;
  justify-content: center;
}

/**** Page elements *****/




¸ .form-check {
  padding-top: .375em;
     position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
}

.recommended label.question-label::after {
  content: '!';
}

input[type=text].help-at-input,
input[type=date].help-at-input,
textarea.help-at-input,
select.help-at-input,
input[type=file].help-at-input {
  width: calc(100% - 30px);
  display: inline;
}

.custom-file.help-at-input {
  width: 94%;
}

.custom-file .custom-file-label {
  overflow: hidden;
}

div.form-group>.form-control {
  font-size: 1.5rem;
  font-size: 15px;
}

div.form-group .col-auto .datePickerElement {
  display: inline-grid;
}

small.hint {
  opacity: 0.7;
}

small.hint_RIGHT {
  display: block;
  text-align: right;
}

small.hint_BOTTOM {
  display: block;
}

Iframe.videoElement {
  border: none;
  border-style: none;
}

/**** Read only ****/

.read-only-form .custom-file-label {
  background-color: #E9ECEF;
}

/**** Webscriplet slider ****/

input[type="range"].slider {
  margin-top: 16px;
  margin-bottom: 16px;
  -webkit-appearance: none;
  width: 100%;
  height: 5px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

input[type="range"].slider:hover {
  opacity: 1;
}

input[type="range"].slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  /* Override default look */
  appearance: none;
  width: 20px;
  /* Set a specific slider handle width */
  height: 20px;
  /* Slider handle height */
  background: #2B7BB9;
  cursor: pointer;
  /* Cursor on hover */
  border-radius: 10px;
}

input[type="range"].slider::-moz-range-thumb {
  width: 20px;
  /* Set a specific slider handle width */
  height: 20px;
  /* Slider handle height */
  background: #2B7BB9;
  /* Green background */
  cursor: pointer;
  /* Cursor on hover */
  border-radius: 10px;
}

/**** Validation ****/

/*.badge-warning {
  background-color: #FFC30F;
}

.badge-danger {
  background-color: #B92745;
}*/

.form-group.warning .form-control {
  border-color: #FFC30F;
}

.form-group.warning .invalid-feedback {
  display: block;
  color: #A7A9AC;
}

.form-check-input.is-invalid~.form-check-label,
.form-check-input:invalid~.form-check-label {
  color: #B8002A;
    
}

.validation-page-alert {
  width: 100%;
  text-align: center;
  margin-bottom: 1.5rem;
}

.validation-page-alert.alert-warning {
  border-color: #ffc30f;
  background-color: #FFEFC1;
}

.validation-page-alert.alert-danger {
  border-color: #b92745;
  color: #b92745;
}

/**** ****/

.tag-read-only-prepopulated-field input {
  border: none;
  background-color: #fff !important;
  font-style: italic;
  color: #646567;
}

/**** Alerts ****/

#custom-messsage .alert {
  width: 100%;
  text-align: center;
}

/**** Pages ****/

/**** Front page ****/

.front-page form[name=enterWorkFlow] {
  margin-top: 15px;
}

.front-page .continue-later-reference,
.front-page .languageSelectionSection {
  margin-bottom: 1em;
}

.front-page .invalid-feedback {
  text-align: left;
}

/**** Continue later ****/

.continue-later .invalid-feedback {
  text-align: left;
}

.continue-later .jumbotron {
  text-align: center;
}

.continue-later .jumbotron form input {
  width: 20em;
}

/**** Select BankId version ****/

.form-authentication-methods .authentication-item button {
  cursor: pointer;
}

.form-authentication-methods .bigButtonText {
  height: fit-content;
  width: 10em;
  display: inline-block;
}

/*** BankId sign ****/

.bankIdSigning {
  display: flex;
  justify-content: center;
}

/**** Session Deleted ****/

.session-deleted .jumbotron {
  text-align: center;
}

/**** Popover ****/

.popover {
  border-color: #2B7BB9;
}

.bs-popover-auto[x-placement^=right] .arrow::before,
.bs-popover-right .arrow::before {
  border-right-color: #2B7BB9;
}

/**** Footer ****/

footer {
    text-align: center;
    color: white;
    padding: 1rem;
    background-color: var(--Neutral-100);
    background-size: 36px;
    /* background-position: 10% 50%; */
    margin-top: 4.5rem;
}

footer a {
	color: #FFF;
    border-bottom: 1px solid #1a5094;
}

footer a:hover{
	border-bottom: 1px solid #1d7bc9;
    -webkit-animation: .2s ease-in;
    animation: .2s ease-in;
	color: #FFF;
	text-decoration: none;
}

footer .col-sm-12{
	color: #FFF;
    text-decoration: none;
    line-height: 1.625rem;
    padding-bottom: .25rem;
    font-size: 1rem;
}

/*** Miscellaneous ***/


.btn.btn-outline-primary.session-cancel-btn {
    border: 3px solid #ffa5c0;
    background-color: transparent;
    color: #e20046;
    min-width: 7em;
	margin-bottom: 1.5rem;
	/* display: none; */
}

button#confirm-delete-activity-session-btn{
	background-color: transparent;
    color: #e20046;
	border: 3px solid #ffa5c0;
}

.btn.btn-outline-primary.session-cancel-btn:hover,
button#confirm-delete-activity-session-btn:hover{
	background-color: #FFD1DE;
    border: 3px solid #ffa5c0;
    color: #e20046;
}

button[name="dataDeleteConfirmed"]{
	order: 1 !important;
	grid-column: 1/3 !important;
	justify-self: left !important;
}

div#confirmDelSession .btn-secondary{
	background-color: #fff;
    border: 1px solid #dedede;
    color: #3d3d3d;
    box-shadow: none;
    transition: box-shadow .2s;
}


/*------------------------------------------------------------------------*/

@media only screen and (max-width: 767px) and (min-width: 0px){
	
	
	button[name="dataDeleteConfirmed"]{
		order: 3 !important;
		top: 6px;
		width: 100% !important;
	}
	
	.respondent-navigation{
		margin-bottom: 16px;
		display: flex;
		padding: 0px !important;
	}
	
	/*.col-md-12.respondent-navigation:after{
		top: 146px;
		left: 0px;
	}*/

}




/**** 7 Tag Library ****/


/*------------------------------------------------------------------------*/

/*** 7 File upload and multifile table ***/


/*** 7.1 Marking text red ***/

.tag-rodmarkering {
  color: #B8002A;
}


/*** 7.1 Empty file upload field ***/ 

.custom-file-label:after{
	content: none !important;
}

.custom-file-input{
	cursor: pointer;
	z-index: -1;
}

.custom-file{
	height: 48px;
}

.custom-file-label{
	border: 1px dashed #9CAEBC;
	color: #04294D;
	z-index: 1;
	background-color: #FFF;
	padding: 12px 16px;
	height: 48px;
	cursor: pointer;
	font-size: 14px;
}

.custom-file-label:hover{
	border: 1px solid #dedede;
	box-shadow: 0 2px 4px #9CAEBC;
}

.custom-file-input:focus~.custom-file-label{
	border: 1px solid #436689;
	box-shadow: 0px 0px 8px rgba(114, 140, 166, 0.64), inset 0px 2px 4px rgba(20, 64, 107, 0.32);
}

.custom-file-input:active~.custom-file-label{
	border: 1px solid #009958;
	box-shadow: none;
}


/* Upload icon */
.custom-file-label:before{
	background-image: url("img/Icons.svg");
	background-color: transparent;
	background-position: -36px -40px;
	display: inline-block;
	position: relative;
	left: 2px;
	top: -1px;
	float: right;
	width: 25px; 
	height: 25px;
	content: "";
}

.custom-file-label:hover:before{
	background-position: -36px -72px;
}

/*** 7.1.1 Hint inside file upload field ***/

.custom-file~small.hint_RIGHT {
	z-index: 0;
	display: flex;
	position: relative;
	float: left;
	font-size: 16px;
	line-height: 150%;
	top: -48px;
	padding: 12px 16px;
	text-align: left;
	background-color: transparent;
	color: #436689;
}

div.custom-file[uploaded="yes"]~.hint_RIGHT{
	display: none;
}

/* In case there is a hint text at the bottom, the button must be
pushed a little bit up and some margin must be removed from the bottom */

small.hint_BOTTOM~button[name="removeUploadedFile"] {
    top: -56px;
	margin-bottom: -24px;
}

small.hint_RIGHT~button[name="removeUploadedFile"]{
	margin-bottom: -24px;
}

.custom-file~small.hint_RIGHT{
	margin-bottom: -32px;
  z-index: 1;
}

/*------------------------------------------------------------------------*/

/*** 7.2 Filled file upload field and remove button (for removing uploaded file) ***/ 

div.custom-file[uploaded="yes"] .custom-file-label{
	border: 1px solid #dedede;
	background: #fff;
}

div.custom-file[uploaded="yes"] .custom-file-label:before{
	content: none;
}

button[name="removeUploadedFile"]{
	background-image: url("img/Icons.svg");
	background-color: transparent;
	font-size: .001px;
	background-position: -6px -10px;
	display: inline-block;
	position: relative;
	left: -12.5px;
	top: -35px;
	float: right;
	width: 25px; 
	height: 25px;
	content: "";
	border-left: none;
	z-index: 2;
	border-radius: 0px;
}

button[name="removeUploadedFile"]:hover,
button[name="removeUploadedFile"]:focus{
	background-color: transparent;
	background-position: -6px -42px;
}

button[name="removeUploadedFile"]:after{
	display: none;
}

/*------------------------------------------------------------------------*/

/*** 7.3 Default styling of tables ***/

.tag-filtabell.groupListContainer{ 
	display: block;
}

.col-md-9{
	padding-left: 0px;
	padding-right: 0px;
}

.table td{
	padding: 0px;
	margin-bottom: .5rem;
}

.table{
	margin-bottom: 0px;
}

.row.questionsTable > div.col-md-12 {
	padding: 24px 0 10px;
}

thead{
	background-color: transparent;
	letter-spacing: 0.02em;
	font-family: "ubuntu", arial, verdnana, sans-serif;
    font-weight: 600;
    font-style: normal;
    color: var(--Grey_sec);
    font-size: 18px;
	line-height: 160%;
}

td > div > div > div.col-md-12{
	padding: 0 15px 0 15px;
}

/* Gjør bredden til kolonnen med Fjern-knapper så kort som mulig */
.questionsTable .add-remove-buttons {
    width: 0%;
    border-collapse: collapse;
    /*border-left-color: transparent !important;*/
}

/* Fjerner skillelinjen mellom den nest siste kolonnen og kolonnen med Fjern-knapper */
.table-bordered td:nth-last-child(2), .table-bordered th:nth-last-child(2) {
    border-right-color: transparent;
}

/* Fjerner alle 'Legg til'-knapper utenom første i tabeller*/
tbody tr .addGroup{
    display: none;
}

tbody tr:first-child .addGroup {
    display: inline-block;
}

.groupListContainer td > div > div > div.col-md-12 {
    padding: 10px 15px;
}

.groupListContainer td > div > div.form-group {
    margin-bottom: 0;
}

.questionsTable .add-remove-buttons {
    padding-right: 10px;
    padding-bottom: 10px;
}


/**----------------Endret farger på knapper på dupliserbare grupper/tabeller og hopp over til hovedinnhold----------------*/


/*.questionsTable .add-remove-buttons button {
  margin-top: 10px;
  background-color: transparent;
  color: black;
  border: 1.5px solid black;
  font-weight: bold;
}

.questionsTable .add-remove-buttons button:hover {
  margin-top: 10px;
  background-color: var(--Blue_def);
  color: white;
  border: 1.5px solid black;
}*/

.btn.addGroup:before {	
	content: "library_add";
	font-size: 18px;
}	
.btn.removeGroup:before {	
	content: "close";
	font-size: 18px;
}

.question-group button.addGroup,
.questionsTable .add-remove-buttons button.addGroup{
  /* margin-bottom: 5px; */
  /* width: 100%; */
  margin-top: 10px;
  background-color: transparent;
  color: #00316b;
  border: 2px solid #00316b;
  font-weight: bold;
}

.question-group button.addGroup:hover,
.questionsTable .add-remove-buttons button.addGroup:hover {
  /* margin-bottom: 5px; */
  /* width: 100%; */
  margin-top: 10px;
  background-color: #00316b;
  color: white;
  border: 2px solid #00316b;
  font-weight: bold;
}


.question-group button.removeGroup,
.questionsTable .add-remove-buttons button.removeGroup {
  /* margin-bottom: 5px; */
  /* width: 100%; */
  margin-top: 10px;
  background-color: transparent;
  color: var(--Red_def);
  border: 2px solid var(--Red_def);
  font-weight: bold;
}

.question-group button.removeGroup:hover,
.questionsTable .add-remove-buttons button.removeGroup:hover {
  /* margin-bottom: 5px; */
  /* width: 100%; */
  margin-top: 10px;
  background-color: var(--Red_def);
  color: white;
  border: 2px solid var(--Red_def);
  font-weight: bold;
}


/*------------------------------------------------------------------------*/

/*** 7.3 Multifile table ***/

/*** 7.3.1 Multifile table properties ***/

.tag-filtabell .table th{
	padding: 0;
	margin-bottom: .5rem;
}

.tag-filtabell .table th{
	padding: 0px;
}

.tag-filtabell .table{
	border-collapse: collapse;
}

.tag-filtabell .table td{
	margin-bottom: 0;
}

.tag-filtabell tbody.groupListContainer > tr .form-group{
	height: 48px;
	padding-bottom: 0px;
	margin-bottom: 4px;
	margin-left: 0px;
	margin-right: 0px;
}

.tag-filtabell .groupListContainer{
	background: transparent;
	display: contents;
}

.tag-filtabell .groupListContainer td > .container{
	padding-right: 0px;
	padding-left: 0px;
}

.questionsTable.tag-filtabell  > div.col-md-12{
	padding-top: 0px;
}

.tag-filtabell .table thead th:first-child {
    padding: 0.375rem 15px 4px;
}


/* Linjen under fjerner kanten hvis brukeren har glemt å skru av kant på tabellen */
.tag-filtabell :is(.table.table-bordered, .table-bordered td, .table-bordered th){
  border: 1px solid transparent !important;
}

@media only screen and (max-width: 767px) and (min-width: 576px){
	.tag-filtabell td > div > div > div.col-md-12{
		padding: 0;
	}
}

@media only screen and (max-width: 767px) and (min-width: 0px){
	
	.tag-filtabell .table-responsive-md{
		overflow-x: inherit;
	}
	
}

/*------------------------------------------------------------------------*/

/*** 7.3.1 Add and remove buttons - Multifile table ***/

.tag-filtabell .add-remove-buttons {
	max-width: 0px;
}

.tag-filtabell .groupListContainer td > div > div > div.col-md-12 {
    padding: 0px 15px;
}

.tag-filtabell.questionsTable .add-remove-buttons {
    padding-right: 0px;
    padding-bottom: 4px;
}

.tag-filtabell tbody tr:first-child .addGroup {
    display: none;
}

/*------------------------------------------------------------------------*/

/*** 7.3.1 Add button ***/

/* Hides all 'Add buttons' except the last if there are no empty upload fields */
.tag-filtabell tbody tr .addGroup{
	display: none;

}

.tag-filtabell td[uploaded="yes"] {
    display: block;
}

.tag-filtabell tbody tr:last-child td[uploaded="yes"]~td.add-remove-buttons .addGroup{
	display: inline-block;
}

.tag-filtabell tbody tr:last-child td[uploaded="yes"]~td.add-remove-buttons {
    float: right;
    max-width: calc(100% - 62px);
    margin-right: 31px;
}


/* 'Add file' label */

.tag-filtabell .btn.addGroup{
	color: #4f4c4d !important;
	font-size: 18px;
	font-weight: 600;
	background-color: transparent !important;
	border: none !important;
	box-shadow: none;
	margin: 0px 87px !important;
	padding: 0px;
	float: right;
}

.tag-filtabell .btn.addGroup:hover,
.tag-filtabell .btn.addGroup:focus,
.tag-filtabell .btn.addGroup:active,
.tag-filtabell .btn.addGroup:active:before,
.tag-filtabell .btn.addGroup:not([disabled]):not(.disabled):active{
	color: #0062A4 !important;
	margin: 0;
	background-color: transparent;
	border: transparent;
	box-shadow: none;
}

/* Icon next to 'Add file' label */

.tag-filtabell .btn.addGroup:after,
.tag-filtabell .btn.addGroup:hover:after{
	background-image: url("img/Icons.svg");
	font-family: inherit;
	background-position: -72px -8px;
	display: inline-block;
	height: 24px;
	width: 24px;
	position: relative;
	content: "";
	right: 0px;
	top: 6px;
	text-align: right;
	margin-left: 6px;
}

.tag-filtabell .btn.addGroup:hover:after,
.tag-filtabell .btn.addGroup:focus:after{
	background-position: -72px -40px;
}

.tag-filtabell .btn.addGroup:before{
	display: none;
}

/* --------------------------------------- */

/*** 7.3.2 Remove buttons ***/

.tag-filtabell .btn.removeGroup:before,
.tag-filtabell .btn.removeGroup:hover:before{
	display: none;
}

.tag-filtabell .btn.removeGroup, .tag-filtabell .btn.removeGroup:hover, .tag-filtabell .btn.removeGroup:focus {
  color: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none;
  padding: 0px;
  position: relative;
  margin: 0px 0px !important;
  top: 13px;
  left: -55px;
  height: 2px;
}

.tag-filtabell .btn.removeGroup:focus,
.tag-filtabell .btn.removeGroup:active,
.tag-filtabell .btn.removeGroup:not([disabled]):not(.disabled):active{
	background-color: transparent;
	border: transparent;
	box-shadow: none;
}

/* Trash can icon */
.tag-filtabell .btn.removeGroup:after,
.tag-filtabell .btn.removeGroup:hover:after{
	background-image: url("img/Icons.svg");
	background-color: transparent; /*var(--White)*/
	background-position: -10px -10px;
	display: inline-block;
	width: 25px; 
	height: 25px;
	content: "";
	z-index: 2;
	position: relative;
	float: left;
	top: -37px;
	left: 5px;
}

.tag-filtabell .btn.removeGroup:hover:after,
.tag-filtabell .btn.removeGroup:focus:after{
	background-position: -10px -42px;
}

/* --------------------------------------- */

/*** 7.3.3 Multifile table specific situations ***/

/* Makes sure a remove icon always is available at the top upload field */
.tag-filtabell div.custom-file[uploaded="yes"]~button[name="removeUploadedFile"]{
	display: none;
}

.tag-filtabell tr:last-of-type div.custom-file[uploaded="yes"]~button[name="removeUploadedFile"]{
	display: inline-block;
}

/* 	Hiding last remove button */

.tag-filtabell tbody tr:last-child .removeGroup{
	display: none;
}



/*------------------------------------------------------------------------*/

/**** 7.1 Grid tags ****/

:is(.tag-grid-25-75, .tag-grid-33-67, .tag-grid-50-50, .tag-grid-67-33, .tag-grid-75-25),
:is(.tag-grid-25-25-50, .tag-grid-25-50-25, .tag-grid-33-33-33, .tag-grid-50-25-25),
:is(.tag-grid-25-75, .tag-grid-33-67, .tag-grid-50-50, .tag-grid-67-33, .tag-grid-75-25)
> div > div.row.question-group-content,
:is(.tag-grid-25-25-50, .tag-grid-25-50-25, .tag-grid-33-33-33, .tag-grid-50-25-25)
> div > div.row.question-group-content,
:is(.tag-grid-25-75, .tag-grid-33-67, .tag-grid-50-50, .tag-grid-67-33, .tag-grid-75-25)
> div > div.row.question-group-content > div > div > div > div > div > div,
:is(.tag-grid-25-25-50, .tag-grid-25-50-25, .tag-grid-33-33-33, .tag-grid-50-25-25)
> div > div.row.question-group-content > div > div > div > div > div > div{
	padding: 0;
}

.tag-grid-25-75 > div > div.row.question-group-content > div > div > div.col-auto:first-child{width: 25%;}
.tag-grid-25-75 > div > div.row.question-group-content > div > div > div.col-auto:nth-child(2){width: 75%;}
.tag-grid-33-67 > div > div.row.question-group-content > div > div > div.col-auto:first-child{width: 33%;}
.tag-grid-33-67 > div > div.row.question-group-content > div > div > div.col-auto:nth-child(2){width: 67%;}
.tag-grid-50-50 > div > div.row.question-group-content > div > div > div.col-auto{width: 50%;}
.tag-grid-67-33 > div > div.row.question-group-content > div > div > div.col-auto:first-child{width: 67%;}
.tag-grid-67-33 > div > div.row.question-group-content > div > div > div.col-auto:nth-child(2){width: 33%;}
.tag-grid-75-25 > div > div.row.question-group-content > div > div > div.col-auto:first-child{width: 75%;}
.tag-grid-75-25 > div > div.row.question-group-content > div > div > div.col-auto:nth-child(2){width: 25%;}

.tag-grid-33-33-33 > div > div.row.question-group-content > div > div > div.col-auto{width: 33.33%;}
:is(.tag-grid-25-25-50, .tag-grid-25-50-25, .tag-grid-50-25-25)
> div > div.row.question-group-content > div > div > div.col-auto{width: 25%;}
.tag-grid-25-25-50 > div > div.row.question-group-content > div > div > div.col-auto:nth-child(3){width: 50%;}
.tag-grid-25-50-25 > div > div.row.question-group-content > div > div > div.col-auto:nth-child(2){width: 50%;}
.tag-grid-50-25-25 > div > div.row.question-group-content > div > div > div.col-auto:first-child{width: 50%;}

:is(.tag-grid-25-75, .tag-grid-33-67, .tag-grid-50-50, .tag-grid-67-33, .tag-grid-75-25,
.tag-grid-25-25-50, .tag-grid-25-50-25, .tag-grid-33-33-33, .tag-grid-50-25-25)
> div > div.row.question-group-content > div > div > div.col-auto:first-child{
	padding-right: 10px;
}

:is(.tag-grid-25-25-50, .tag-grid-25-50-25, .tag-grid-33-33-33, .tag-grid-50-25-25)
> div > div.row.question-group-content > div > div > div.col-auto:nth-child(2){
	padding-right: 10px;
	padding-left: 10px;
}

:is(.tag-grid-25-75, .tag-grid-33-67, .tag-grid-50-50, .tag-grid-67-33, .tag-grid-75-25)
> div > div.row.question-group-content > div > div > div.col-auto:nth-child(2){
	padding-left: 16px;
}

:is(.tag-grid-25-25-50, .tag-grid-25-50-25, .tag-grid-33-33-33, .tag-grid-50-25-25)
> div > div.row.question-group-content > div > div > div.col-auto:nth-child(3){
	padding-left: 10px;
}


@media only screen and (max-width: 767px) and (min-width: 0px){
	
	.tag-grid-50-50 > div > div.row.question-group-content > div > div > div.col-auto{
		width: 100%;
		padding-left: 0px !important;
		padding-right: 0 !important;
	}
	
}





/*------------------------------------------------------------------------*/


/*** 4.1.2 Page numbers ***/

/*** 3.6 Skip link button ***/

.shortcut:focus {
  /*position: static;*/
 /* width: auto;*/
  /*height: auto;*/
	z-index: 10 !important;
  	float: left;
	padding: 10px 24px !important;
	margin: 15px 0px 0px 4px;
	border-radius: 10px;
	background-color: var(--Grey);
	color: black;
	font-weight: 1000;
	border: solid 2px;
	border-color: black;

}