/************************* Fisheries service skin *************************/

/*** 	Created: Fall of 2021 											***/
/*** 	Stylist: Alexander Edin Varegg 									***/
/*** 	Purpose: Form design in Compose Enterprise 						***/
/*** 	Last edited: 2025.05.29 										***/
/*** 	Last version: 9.2.3		 										***/

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


/************************* 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 button 											***/
/*** 		3.6 Skip link button 										***/
/*** 	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.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 button tag  										***/
/*** 		6.2 Check box tag											***/
/*** 		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 Map element													***/
/*** 	0 Graveyard	 													***/

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

/*** 1.1 Color palette ***/

:root {
	/* Primary colors */
	--Blue-900: #042B4D;		--Turquoise-900: #084F52;
	--Blue-800: #14426B;
	--Blue-700: #455E73;		--Turquoise-700: #0D7E82;		--Gray-700: #6E7173;		--Purple-700: #5225FF;		--Red-700: #CC0000;
	--Blue-600: #436689;										--Gray-600: #6E7982;									--Red-600: #ED4343;
	--Blue-500: #728EA6;		--Turquoise-500: #12AEB4;		--Gray-500: #8997A3;									--Red-500: #FF6666;
	--Blue-400:	#A1B4C4;		--Turquoise-400: #41BEC3;									--Purple-400: #8370FF;
	--Blue-300: #B9C7D3;		--Turquoise-300: #71CED2;									--Purple-300: #B1BAFF;		--Red-300: #FA9696;
	--Blue-200: #D0D9E1;		--Turquoise-200: #A0DFE1;		--Gray-200: #D0D3D6;		--Purple-200: #D6DCFF;		--Red-200: #FAC7C7;
	--Blue-100: #DCE3E9;		--Turquoise-100: #D0EFF0;																--Red-100: #FFE0E0;
	--Blue-75: #E8ECF0;																		--Purple-75: #EBECFF;		--Red-75: #FFEBEB;
								--Turquoise-50: #EBFEFF;		--Gray-50: #F0F3F5;			--Purple-50: #F2F3FF;		--Red-50: #FFF0F0;
	--Blue-25: #FAFDFF;			--Turquoise-25: #F5FFFF;		--Gray-25: #FAFAFA;			--Purple-25: #F7F7FF;
																--White: #FFFFFF;									
	
	
	--Green: #118000;			--Mid-Green: #A8E09F;			--Light-Green: #D5EBD2;		--Light-Purple: #C8BCF6;			
	--Yellow: #FFCD00;			--Mid-Yellow: #FFDA47;			--Yellow-200: #FFF0B1;
	
}



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

/*** 1.2 Fonter ***/

@font-face { font-family: "IBMPlexSans-Bold"; src: url("fonts/IBMPlexSans-Bold.ttf"); }

@font-face { font-family: "IBMPlexSans-Medium"; src: url("fonts/IBMPlexSans-Medium.ttf"); }

@font-face { font-family: "IBMPlexSans-Regular"; src: url("fonts/IBMPlexSans-Regular.ttf"); }

@font-face { font-family: "IBMPlexSans-SemiBold"; src: url("fonts/IBMPlexSans-SemiBold.ttf"); }

@font-face { font-family: "IBMPlexSerif-Bold"; src: url("fonts/IBMPlexSerif-Bold.ttf"); }

@font-face { font-family: "IBMPlexSerif-Medium"; src: url("fonts/IBMPlexSerif-Medium.ttf"); }

@font-face { font-family: "IBMPlexSerif-Regular"; src: url("fonts/IBMPlexSerif-Regular.ttf"); }

@font-face { font-family: "IBMPlexSerif-SemiBold"; src: url("fonts/IBMPlexSerif-SemiBold.ttf"); }


/*** 1.2 Fonts ***/

/* IBM Plex Sans */

/*@font-face { font-weight: 300; font-family: "IBM Plex Sans"; src: url("fonts/IBMPlexSans-Light.ttf"); }*/

@font-face { font-weight: 400; font-family: "IBM Plex Sans"; src: url("fonts/IBMPlexSans-Regular.ttf"); }

@font-face { font-weight: 500; font-family: "IBM Plex Sans"; src: url("fonts/IBMPlexSans-Medium.ttf"); }

@font-face { font-weight: 600; font-family: "IBM Plex Sans"; src: url("fonts/IBMPlexSans-SemiBold.ttf"); }

@font-face { font-weight: 700; font-family: "IBM Plex Sans"; src: url("fonts/IBMPlexSans-Bold.ttf"); }

/* IBM Plex Sans Weird Bold – Due to some weird combo of the regular style with bold font weight
looks better than Medium and SemiBold sometimes */

@font-face {font-family: "IBM Plex Sans Weird Bold"; src: url("fonts/IBMPlexSans-Regular.ttf"); }

/* IBM Plex Serif */

/*@font-face { font-weight: 300; font-family: "IBM Plex Serif"; src: url("fonts/IBMPlexSerif-Light.ttf"); }*/

@font-face { font-weight: 400; font-family: "IBM Plex Serif"; src: url("fonts/IBMPlexSerif-Regular.ttf"); }

@font-face { font-weight: 500; font-family: "IBM Plex Serif"; src: url("fonts/IBMPlexSerif-Medium.ttf"); }

@font-face { font-weight: 600; font-family: "IBM Plex Serif"; src: url("fonts/IBMPlexSerif-SemiBold.ttf"); }

@font-face { font-weight: 700; font-family: "IBM Plex Serif"; src: url("fonts/IBMPlexSerif-Bold.ttf"); }

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


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

/*** 2 Header and footer ***/

/*** 2.1 Header ***/

header {
	height: 118px; 
	/*background: url("img/header.jpg");*/
	background-color: var(--Blue-800);
	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/fdir_jubileumslogo_125.svg") no-repeat;
	margin: 30px auto 0px;
	max-width: 1016px;
	padding: 0;
	background-size: contain;
	height: 52px;
}

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

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

/*** 2.2 Footer ***/

footer {
	max-width: 100%;
	background-color: var(--Blue-800);
	padding-top: 40px;
	height: 212px;
	line-height: 40px;
	background-image: url("img/footer.svg");
	background-repeat: repeat-x;
	background-position: bottom;
	/*background-position: 0px 160px;*/
	/*text-align: center;
	padding-left: 108px;
	padding-bottom: 0px;
	column-count: 2;*/
}

footer a,
footer a:hover {
    color: #FFF;
	text-decoration: underline;
}
	
footer > div.container.mt-sm-2{
	/*background: #14406b;*/
	max-width: 1228px;
	column-count: 2;
	color: #FFF;
	padding: 0;
	font-size: 16px;
	padding-left: 108px;
	padding-right: 108px;
}

footer a[href="https://www.fiskeridir.no/Om-oss/Kontakt-for-tekniske-problem"],
footer a[href="https://www.fiskeridir.no/Om-oss/Personvern"],
footer a[href="https://uustatus.no/nb/erklaringer/publisert/ae968f04-90aa-4833-855f-9ca54acf520b"]{
	position: relative;
	left: 262px;
}


footer a[href="https://www.fiskeridir.no/Om-oss/Kontakt-for-tekniske-problem"]:after,
footer a[href="https://www.fiskeridir.no/Om-oss/Personvern"]:after,
footer a[href="https://uustatus.no/nb/erklaringer/publisert/ae968f04-90aa-4833-855f-9ca54acf520b"]:after{
	background-image: url("img/Icons.svg");
	background-position: -364px -434px;
	display: inline-block;
	margin-right: 0px;
	position: relative;
	top: 9px;
	float: left;
	width: 18px; 
	height: 19px;
	content:"";
	left: -10px;
}

/*footer a[href="https://www.fiskeridir.no/Om-oss/Kontakt-for-tekniske-problem"]:after{left: 117px;}
footer a[href="https://www.fiskeridir.no/Om-oss/Personvern"]:after{left: 104px;}
footer a[href="https://uustatus.no/nb/erklaringer/publisert/ae968f04-90aa-4833-855f-9ca54acf520b"]:after{left: 206px;}*/

@media only screen and (max-width: 1199px) and (min-width: 992px){
	
	footer a[href="https://www.fiskeridir.no/Om-oss/Kontakt-for-tekniske-problem"],
	footer a[href="https://www.fiskeridir.no/Om-oss/Personvern"],
	footer a[href="https://uustatus.no/nb/erklaringer/publisert/ae968f04-90aa-4833-855f-9ca54acf520b"]{
		left: 154px;
	}
	
	/*footer a[href="https://www.fiskeridir.no/Om-oss/Kontakt-for-tekniske-problem"]:after{left: 272px;}
	footer a[href="https://www.fiskeridir.no/Om-oss/Personvern"]:after{left: 259px;}
	footer a[href="https://www.fiskeridir.no/Om-oss/Personvern/tilgjengelighetserklaering"]:after{left: 359px;}*/
}

@media only screen and (max-width: 991px) and (min-width: 0px){
	
	.col-sm-12{
		padding-left: 0px;
		padding-right: 0px;
	}
	
	footer {
		height: 412px;
	}
	
	footer > div.container.mt-sm-2{
		column-count: 1;
		max-width: 558px;
		background: transparent;
		padding: 0;
	}
	
	footer a[href="https://www.fiskeridir.no/Om-oss/Kontakt-for-tekniske-problem"],
	footer a[href="https://www.fiskeridir.no/Om-oss/Personvern"],
	footer a[href="https://uustatus.no/nb/erklaringer/publisert/ae968f04-90aa-4833-855f-9ca54acf520b"]{
		left: 0px;
	}
	
	footer a[href="https://www.fiskeridir.no/Om-oss/Kontakt-for-tekniske-problem"]:after,
	footer a[href="https://www.fiskeridir.no/Om-oss/Personvern"]:after,
	footer a[href="https://uustatus.no/nb/erklaringer/publisert/ae968f04-90aa-4833-855f-9ca54acf520b"]:after{
		margin-right: 2px;
		margin-left: 4px;
	}

}


.page-navigation-btn[name="showNext"]:after{
	content: "";
}

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

/**** 3 Body ****/
body {
	font-family: "IBMPlexSans-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: 14px;
	font-weight: normal;
	color: #323233; 
	background-color: var(--Gray-50);
}
  
/*------------------------------------------------------------------------*/

/*** 3.1 Form container ***/

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

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

div.col-md-9{
	background-color: var(--White);
	margin-bottom: 50px;
	max-width: 560px;
	margin-right: 0px;
	margin-left: 136px; /* 64px + 72px*/
	border-radius: 8px;
	border: 1px solid var(--Blue-200);
}

.row.question-group.show-layout{
	width: 100%;
	border-radius: 0px;
	padding: 16px 80px 0px;
	border-top: 1px solid var(--Blue-200);
	margin: 0 auto 8px !important;
	background-color: var(--White);
}

.col-md-9 div.row.question-group.show-layout:nth-of-type(2){
	border-radius: 8px;
	border-top: 0px solid transparent !important;
	padding: 40px 80px 0px;
}

div.container{
	width: 100%;
}

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

@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: 972px;
	}
	
	div.col-md-9{
		margin-left: 92px; /* 64px + 28px*/
	}
}

@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: 560px;
		margin-left: auto;
		margin-right: auto;
	}
	
	div.col-md-9{
		margin-left: 0px;
		flex: 0 0 100%;
	}
}

@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: 375px;
	}
	
	/*header .container-fluid .row .col-sm-12{
		margin: 35px 10px 15px;
	}*/
	
	div.col-md-9{
		margin-left: 0px;
	}
	
	.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: 30px;
		padding-right: 30px;
	}
	
}

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

/*** 3.1.1 Form container without vertical nav-menu ***/

.col-sm-12 div.row.question-group.show-layout {
    border-radius: 8px;
    border-top: 0px solid transparent !important;
    padding: 40px 80px 0px;
}

form>.row>div.col-sm-12 {
    background-color: var(--White);
    border-radius: 8px 8px 0 0;
    border: 1px solid var(--Blue-200);
    border-bottom: none;
	padding: 0;
}

form>.row.mt-sm-3 {
    background-color: var(--White);
    margin-bottom: 50px;
    border-radius: 0 0 8px 8px;
    border: 1px solid var(--Blue-200);
    border-top: none;
    margin-top: 0 !important;
}

form>.row>div.col-sm-12 h1.workflow-title {
    display: none;
}


/* Responsive cellphone view */
@media only screen and (max-width: 767px) and (min-width: 0px){
	
	form>.row>div.col-sm-12 .question-group.show-layout {
		padding: 24px 10px 0px !important;
	}
		
}

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

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

.workflow-title-top{
	font-family: "IBMPlexSerif-SemiBold", Arial, Open Sans,"Tstar Bold",Arial,"Helvetica Neue",Helvetica,sans-serif;
	font-weight: 500;
	font-size: 28px;
	line-height: 39px;
	color: var(--Blue-800);
	margin-top: 46px;
	margin-bottom: 38px;
	/*margin-left: 46px;*/
}

h1, h2{
	font-family: "IBMPlexSerif-Regular", Arial, Open Sans,"Tstar Bold",Arial,"Helvetica Neue",Helvetica,sans-serif;
	font-weight: 500;
}

/* Page titles: .col-md-9 div.row.question-group.show-layout:nth-of-type(2) .group-title h4*/

h3, .col-md-9 div.row.question-group.show-layout:nth-of-type(2) .group-title :is(h3,h4),
.col-sm-12 div.row.question-group.show-layout .group-title :is(h3,h4){
	font-family: "IBM Plex Sans", Arial, Open Sans,"Tstar Bold", "Helvetica Neue",Helvetica,sans-serif !important;
	font-weight: 500;
	font-size: 24px;
	line-height: 36px;
	color: var(--Blue-800);
	text-transform: none;
	margin-top: 0px !important;
	letter-spacing: 0.02em;
}

.col-md-9 div.row.question-group.show-layout:nth-of-type(2) .group-title :is(h3,h4),
.col-sm-12 div.row.question-group.show-layout .group-title :is(h3,h4){
	font-family: "IBMPlexSerif-SemiBold", Arial, Open Sans,"Tstar Bold",Arial,"Helvetica Neue",Helvetica,sans-serif !important;
	margin-bottom: 0px !important;
	padding-bottom: 24px;
}

.group-title{
	padding-bottom: 0px;
}

h3, h4{
    font-family: "IBMPlexSans-Regular", Arial, Open Sans,"Tstar Bold",Arial,"Helvetica Neue",Helvetica,sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: var(--Blue-600);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    line-height: 170%;
    margin-bottom: 0;
}

.group-title-row > div.col-md-12{
	padding-left: 0px;
	padding-right: 0px;
}

.my-sm-2{
	margin-top: 0px !important;
	margin-bottom: 16px !important;
}

.tag-med-title .plaintext{
	color: var(--Blue-600);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	line-height: 170%;
	font-weight: bold;
}

/*.col-md-9 div.row.question-group.show-layout:nth-of-type(2) .group-title{
	padding-bottom: 24px;
}*/

/*.col-md-9 div.row.question-group.show-layout:nth-of-type(2) .group-title h4{
	font-family: "IBMPlexSerif-SemiBold", Arial, Open Sans,"Tstar Bold",Arial,"Helvetica Neue",Helvetica,sans-serif !important;
	font-weight: 500;
	font-size: 24px;
	line-height: 36px;
	color: var(--Blue-800);
	text-transform: none;
	margin-top: 0px !important;
	margin-bottom: 0px !important;
}*/


/* Responsive cellphone view */
@media only screen and (max-width: 767px) and (min-width: 0px){
	
	.workflow-title-top{
		font-size: 23px;
		line-height: 145%;
		margin-bottom: 0px;
		margin-top: 30px;
		margin-right: 10px;
		margin-left: 10px;
	}
	
	.col-md-9 div.row.question-group:first-of-type h4{
		font-size: 20px;
		line-height: 150%;
	}
		
}

.tag-useful-info, .tag-important-info, .tag-critical-info{
	box-shadow: 0px 4px 12px rgba(20, 64, 107, 0.08);
    border-radius: 8px;
    padding: 15px 19px 28px !important;
    margin-bottom: 16px !important;
}

:is(.tag-useful-info, .tag-important-info, .tag-critical-info) span[class="plaintext"]{
	font-size: 16px;
	line-height: 150%;
	color: var(--Blue-900);
}

:is(.tag-useful-info, .tag-important-info, .tag-critical-info) :is(h3,h4) {
    text-transform: none;
    font-family: "IBM Plex Sans", Arial;
    font-size: 18px;
    line-height: 28px;
    padding-bottom: 11px;
    color: var(--Blue-800);
    font-weight: 600;
    letter-spacing: 0.02em;
	margin-bottom: 0;
}

:is(.tag-useful-info, .tag-important-info, .tag-critical-info) h4{
	font-size: 18px;
}

.tag-useful-info{
	background-color: var(--Purple-75);
	border: 1px solid var(--Purple-300);
}

:is(.tag-useful-info, .tag-important-info, .tag-critical-info) span[class="plaintext"] > span {
    background-color: white;
    padding: 15px 19px 15px;
    width: calc(100% + 32px);
    display: block;
    border-radius: 6px;
    margin: 0 -16px -25px;
    border: 1px solid var(--Purple-300);
}

.tag-important-info span[class="plaintext"] > span{
	border: 1px solid var(--Mid-Yellow);
}

.tag-critical-info span[class="plaintext"] > span{
	border: 1px solid #ED8E8E;
}

:is(.tag-useful-info, .tag-important-info, .tag-critical-info) span[class="plaintext"] > span a:after {
    background-image: url("img/Icons.svg");
    background-color: transparent;
    background-position: -314px -432px;
    display: inline-block;
    margin-right: 3px;
    position: relative;
    width: 22px;
    height: 22px;
    top: 2px;
    content: "";
}

/*:is(.tag-useful-info, .tag-important-info, .tag-critical-info) h3:after{
	content: "";
	position: relative;
	display: block;
	width: calc(100% + 38px);
	top: 16px;
	left: -19px;
}*/

:is(.tag-useful-info, .tag-important-info, .tag-critical-info) h3:before {
    background-image: url("img/Icons.svg");
    background-color: transparent;
    background-position: -1084px -114px;
    display: inline-block;
    margin-right: 3px;
    position: relative;
    float: left;
    width: 22px;
    height: 22px;
    top: 1px;
    content: "";
}

:is(.tag-important-info, .tag-critical-info) h3:before{
	background-position: -1180px -114px;
	top: 2px
}


:is(.tag-useful-info, .tag-important-info, .tag-critical-info).tag-bell-icon h3:before {
    background-position: -1373px -114px;
}

/*.tag-useful-info h3:after{border-bottom: 1px solid var(--Light-Purple);}

.tag-important-info h3:after{border-bottom: 1px solid var(--Mid-Yellow);}

.tag-critical-info h3:after{border-bottom: 1px solid #ED8E8E;}*/

.tag-important-info{
	background-color: var(--Yellow-200);
	border: 1px solid var(--Mid-Yellow);
}

.tag-critical-info{
	background-color: var(--Red-200);
	border: 1px solid #ED8E8E;
}

@media only screen and (max-width: 767px) and (min-width: 0px){
	.tag-useful-info, .tag-important-info, .tag-critical-info{
		padding: 16px 16px 24px !important;
	}
	
	:is(.tag-useful-info, .tag-important-info, .tag-critical-info) h3:after{
		width: calc(100% + 32px);
		left: -16px;
	}
	
	:is(.tag-useful-info, .tag-important-info, .tag-critical-info) span[class="plaintext"] > span{
		margin: 0 -13px -21px;
		width: calc(100% + 26px);
	}
}



/* Default settings */

.h2, h2 {
	font-size: 2.0rem;
}

.col-md-12.page-title{
	padding-right: 15px;
	padding-left: 15px;
}

/* Page titles are currently not used */
.page-title {
	justify-content: space-between;
	background-color: white;
	color: #323233;
	padding: 0px;
	text-align: left;
	margin-bottom: 1rem;
	margin-top: 1rem;
}

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

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

span[class="plaintext"]{
	font-weight: normal;
	font-size: 16px;
	line-height: 155%;
	color: var(--Blue-900);
}

.tag-info {
	border-radius: 6px;
	background-color: var(--Purple-50);
}

.form-group.tag-info{
	padding: 11px 15px;
	margin-bottom: 16px;
	border: 1px solid var(--Purple-300);
}

span[class="plaintext"] a{
	color: var(--Turquoise-700);
	text-decoration: underline;
}

span[class="plaintext"] a:hover{
	color: var(--Turquoise-700);
	text-decoration: none;
}

h3

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

/*** 3.4 Navigation buttons ***/

.respondent-navigation {
	text-align: right;
	/*margin-bottom: 48px;*/
	padding-right: 0px;
	padding-left: 0px;
}

.btn.btn-primary {
    background-color: var(--Turquoise-100);
    border: 1px solid var(--Turquoise-300);
    border-radius: 6px;
    padding: 10px 24px;
    box-shadow: 0px 1px 4px rgba(20, 64, 107, 0.16);
    font-weight: 600;
    font-size: 18px;
    line-height: 155%;
    letter-spacing: 0.02em;
    color: var(--Blue-900);
    margin: 16px 80px 0px 0px;
}

.btn.btn-primary:focus,
.btn.btn-primary:not([disabled]):not(.disabled):active {
    border: 2px solid var(--Turquoise-400);
    box-shadow: 0px 0px 8px rgba(20, 64, 107, 0.16);
    margin: 15px 79px -1px -1px;
    background-color: var(--Turquoise-100);
    color: var(--Blue-900);
}

.btn.btn-primary:hover {
    border: 1px solid var(--Turquoise-700);
    margin: 16px 80px 0px 0px;
    background-color: var(--Turquoise-50) !important;
}

/*.btn.btn-primary:not([disabled]):not(.disabled):active{
	background-color: var(--Blue-200);
	box-shadow: none;
}*/

.btn.btn-outline-primary,
.btn.btn-secondary {
	float: left;
	background-color: var(--White);
	border: 1px solid var(--Blue-400);
	border-radius: 6px;
	padding: 10px 24px;
	box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.16);
	font-weight: 600;
	font-size: 18px;
	line-height: 155%;
	letter-spacing: 0.02em;
	color: var(--Blue-900);
	margin: 16px 0px 0px 80px;
}

.btn.btn-outline-primary:focus, .btn.btn-secondary:focus,
.btn.btn-outline-primary:not([disabled]):not(.disabled):active,
.btn.btn-secondary:not([disabled]):not(.disabled):active {
    border: 2px solid var(--Blue-500);
    box-shadow: 0px 0px 8px rgba(20, 64, 107, 0.4);
    background-color: var(--White);
    color: var(--Blue-900);
    margin: 15px -1px -1px 79px;
}

.btn.btn-outline-primary:hover,
.btn.btn-secondary:hover{
	border: 1px solid var(--Blue-900);
}

/* Navigation buttons arrows */

.respondent-navigation .btn[name='showPrev']:before,
.respondent-navigation .btn[name='showNext']:after {
    content: '';
    width: 20px;
    height: 18px;
    background-image: url("img/Icons.svg");
    background-position: -127px -161px;
    display: inline-block;
    position: relative;
    top: 4px;
    margin-left: 8px;
    transform: scale(.9);
    transition: transform .3s;
}

.respondent-navigation .btn[name='showPrev']:before{
	background-position: -30px -161px;
	margin-left: 0;
	margin-right: 8px;
}

/*.respondent-navigation .btn[name='showPrev']:before,
.respondent-navigation .btn[name='showNext']:after{
	content: '';
    width: 18px;
    height: 18px;
	background-image: url("img/Icons.svg");
	background-position: -311px -161px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    filter: brightness(0) invert(1);
    transition: transform .3s, filter .1s;
}*/

/*.respondent-navigation .btn[name='showNext']:after {
    margin-left: 10px;
}*/

.respondent-navigation .btn[name='showNext']:hover:after {
    transform: translateX(5px) scale(.9);
}

.respondent-navigation .btn[name='showPrev']:hover:before{
	
	transform: translateX(-5px) scale(.9);
}

@media only screen and (max-width: 767px) and (min-width: 0px){
	
	.respondent-navigation {
		padding-right: 0px;
		padding-left: 0px;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}
	
	.btn.btn-primary{
		width: 100%;
		order: 1;
	}
	
	.btn.btn-outline-primary,
	.btn.btn-outline-primary:hover,
	.btn.btn-outline-primary:focus,
	.btn.btn-outline-primary:not([disabled]):not(.disabled):active{
		width: 100%;
		margin: 16px 0px 0px;
		order: 2;
	}
}

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

/*** 3.5 Cancel button ***/

.respondent-navigation {
    margin-bottom: 48px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: start;
    padding-left: 0;
    padding-right: 0;
}

button[name="dataDeleteConfirmed"]{
	padding-left: 0px !important;
	padding-right: 0px !important;
	color: var(--Blue-800) !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(--Turquoise-700) !important;
}

.btn.btn-outline-primary{
	order: 1;
}

.btn.btn-primary{
	order: 2;
	justify-self: end;
	grid-column: 2/3 !important;
}

/*.respondent-navigation:after{
	content: "";
	position: absolute;
	top: 104px;
	display: block;
	width: 100%;
	height: 1px;
	background-color: var(--Blue-200);
}*/

button[name="dataDeleteConfirmed"]:after{
	content: "";
	position: absolute;
	top: -8px;
	display: block;
	width: 100%;
	height: 1px;
	background-color: var(--Blue-200);
}

@media only screen and (max-width: 767px) and (min-width: 0px){
	.btn.btn-primary{
		order: 1;
	}
	
	.btn.btn-outline-primary{
		order: 2;
	}
	
	.btn.btn-primary,.btn.btn-primary:hover, .btn.btn-primary:focus,
	.btn.btn-primary:not([disabled]):not(.disabled):active,
	.btn.btn-outline-primary, .btn.btn-outline-primary:hover, .btn.btn-outline-primary:focus,
	.btn.btn-outline-primary:not([disabled]):not(.disabled):active{
		margin-left: 10px;
		margin-right: 10px;
		width: calc(100% - 20px);
	}
	
	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;
	}*/

}

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

/*** 3.5.1 Modal window ***/

.modal-open .modal{
	background-color: rgba(4, 41, 77, 0.7);
}

.modal-content{
	border-radius: 8px;
	box-shadow: 0px 4px 12px rgba(20, 64, 107, 0.4);
	border: 1px solid var(--Blue-200);
}

h5.modal-title{
	font-size: 20px;
    line-height: 160%;
    font-family: 'IBMPlexSans-SemiBold';
    color: var(--Blue-800);
}

.modal-header{
	padding: 24px 24px 24px 80px;
	border-bottom: 1px solid var(--Blue-200);
}

.modal-header:before{
	background-image: url("img/Icons.svg");
	background-position: -1272px -159px;
	display: inline-block;
	margin-right: -23px;
	position: relative;
	left: -40px;
	top: 5px;
	float: left;
	width: 24px; 
	height: 24px;
	content:"";
}

.modal-body{
	padding: 24px 40px 40px;
	text-align: left;
	font-size: 16px;
}

.modal-body p{
	margin-bottom: 0;
    color: var(--Blue-800);
}

.modal-footer{
	border-top: none;
	padding: 0px 40px 40px;
}

.modal-footer button[name="storeSession"]:after{
	display: none;
}

.modal-footer button[id="confirm-delete-activity-session-btn"],
.modal#confirmLogoLink .modal-footer .btn-primary{
	top: 0px;
	background-color: var(--Red-200) !important;
	border: 1px solid #ED4343 !important;
	padding: 10px 24px !important;
	box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.16) !important;
	margin: 0px !important;
}

.modal-footer button[id="confirm-delete-activity-session-btn"]:hover,
.modal#confirmLogoLink .modal-footer .btn-primary:hover{
	border: 1px solid var(--Blue-900) !important;
	color: var(--Blue-900) !important;
}

.modal-footer button[id="confirm-delete-activity-session-btn"]:focus,
.modal#confirmLogoLink .modal-footer .btn-primary:focus{
	border: 2px solid var(--Red-600) !important;
	box-shadow: 0px 0px 8px rgba(182, 49, 49, 0.4) !important;
	margin: -1px -1px !important;
}

.modal-footer button.btn.btn-secondary{
	margin: 0px 16px 0px 0px;
}

.modal-footer button.btn.btn-secondary:hover{
	border: 1px solid var(--Blue-900);
}

.modal-footer button.btn.btn-secondary:focus,
.modal-footer button.btn.btn-secondary:not([disabled]):not(.disabled):active {
    margin: -1px 15px 1px 1px;
    border: 2px solid var(--Blue-500);
    box-shadow: 0px 0px 8px rgba(20, 64, 107, 0.4);
}

@media only screen and (max-width: 767px) and (min-width: 0px){
	
	.modal-dialog{
		max-width: 355px;
		margin: 40px auto;
	}
	
	h5.modal-title{
		font-size: 18px;
		line-height: 155%;
	}
	
	.modal-header{
		padding: 20px 20px 20px 52px;
	}
	
	.modal-header:before{
		background-position: -1275px -119px; /*-1123.5px -15px;*/
		margin-right: -19px;
		left: -28px;
		top: 5px;
		width: 19px; 
		height: 16px;
	}
	
	.modal-body{
		padding: 20px 24px 40px;
	}
	
	.modal-footer{
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		padding: 0 24px 24px;
	}
	
	.modal-footer button[id="confirm-delete-activity-session-btn"],
	.modal#confirmLogoLink .modal-footer .btn-primary{
		order: 1 !important;
		margin-bottom: 16px !important;
		width: 100% !important;
	}
	
	.modal-footer button[id="confirm-delete-activity-session-btn"]:focus,
	.modal#confirmLogoLink .modal-footer .btn-primary:focus{
		margin: -1px -1px 15px 0px !important
	}
	
	.modal-footer button.btn.btn-secondary{
		order: 2;
		width: 100%;
	}
	
}


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

/*** 3.5.2 End site ***/

.session-deleted .jumbotron{
	width: 700px;
	text-align: left !important;
	padding: 0;
	margin: 0 135px 160px;
	background-color: transparent;
}

.session-deleted .jumbotron h2{
	font-size: 40px;
	color: var(--Blue-800);
	line-height: 140%;
	font-weight: 500;
	letter-spacing: 0.02em;
} 

.session-deleted .jumbotron hr{
	display: none;
}

.session-deleted .jumbotron p{
	color: var(--Blue-800);
}

.session-deleted .jumbotron a{
	color: var(--Turquoise-700);
	text-decoration: underline;
}

.session-deleted .form-control,
.session-deleted button.btn.btn-primary,
.session-deleted form.needs-validation p:first-of-type{
	display: none;
}

@media only screen and (max-width: 991px) and (min-width: 768px){
	.session-deleted .jumbotron{
		width: calc(100% - 132px);
		margin: 0 auto 160px;
	}
	
	/*footer > div.container.mt-sm-2{
		padding-left: 10px;
		padding-right: 10px;
	}*/
}

@media only screen and (max-width: 767px) and (min-width: 0px){
	
	.session-deleted .jumbotron{
		width: 100%;
		margin: 0 0 80px;
	}
	
	.session-deleted .jumbotron h2{
		font-family: "IBMPlexSerif-SemiBold", Arial, Open Sans,"Tstar Bold",Arial,"Helvetica Neue",Helvetica,sans-serif !important;
		font-weight: 500;
		font-size: 24px;
		line-height: 36px;
		margin-bottom: 12px;
	}
	
	footer > div.container.mt-sm-2{
		padding-left: 10px;
		padding-right: 10px;
	}
}

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

/*** 3.6 Skip link button ***/
a[href="#skip-to-link"].shortcut{
	z-index: 20 !important;
}

a[href="#skip-to-link"].shortcut{
	transform: translateY(-110%);
	float: left;
	/*font: "IBMPlexSerif-Bold";*/
	background-color: var(--White) !important;
	border: 1px solid var(--Blue-400);
	border-radius: 6px;
	padding: 10px 24px !important;
	box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.16) !important;
	font-weight: 600;
	font-size: 18px;
	line-height: 155%;
	letter-spacing: 0.02em;
	color: var(--Blue-900) !important;
	margin: 4px 0px 0px 4px;
}

a[href="#skip-to-link"].shortcut:focus{
	border: 2px solid var(--Blue-500) ;
	box-shadow: 0px 0px 8px rgba(20, 64, 107, 0.4);
	margin: 3px 0px 0px 3px;
}

a[href="#skip-to-link"].shortcut:hover{
	border: 1px solid var(--Blue-900);
	text-decoration: none;
	margin: 4px 0px 0px 4px;
}

a[href="#skip-to-link"].shortcut:focus-visible{
	outline: none;
}


/**** Default styling ****/
/*.page-navigation-btn {
  min-width: 10em; }

.page-navigation-btn[name="showNext"]:after {
  content: "chevron_left"; }

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

.page-navigation-btn[name="showPrev"]:before {
  content: "chevron_right"; }

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

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

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

/* As of October 2021, only the vertical navigation menu is being used. */

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

.col-sm-3.left-menu-col{
	left: 64px;
	padding: 0px; 
	flex: 0 0 320px;
	max-width: 320px;
	background-color: transparent;
}

.nav-link{
	padding: 16px 0;
}

/*** 4.1.1 Link states ***/

nav.nav-bar li.page{
	font-family: inherit;
	font-weight: 400;
	font-size: 20px;
	line-height: 32px;
	color: rgba(67, 102, 137, 0.8);
}

/* Active (current page)*/
nav.nav-bar li.page.active a {
	font-family: "IBMPlexSans-SemiBold", Arial, Open Sans,"Tstar Bold",Arial,"Helvetica Neue",Helvetica,sans-serif;
	font-weight: 500;
	color: var(--Blue-800);
	cursor: default;
}

/* Inactive pages (previous and subsequent)*/
nav.nav-bar li a[href="#"],
nav.nav-bar li a {
    color: var(--Blue-600);
}

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

/*** 4.1.2 Page numbers ***/

/* Path arrow */
/* In order to not show the last one, all arrows are pushed one line above */
nav.nav-bar li.page:after{
	background-image: url("img/Progresjon.svg");
	background-color: transparent;
	background-position: -543px -32px;
	display: inline-block;
	margin-right: -40px;
	margin-top: -16px;
	position: relative;
	float: left;
	left: -47px;
	top: -56px;
	width: 6px; 
	height: 16px;
	content: "";
}

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

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

/* Path icons */

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

nav.nav-bar li.page a:after,
nav.nav-bar li.page a[href="#"]:after,
nav.nav-bar li.page.active a:after{
	position: relative;
	float: left;
	font-size: 20px;
	font-weight: 600;
	left: -49.5px;
	margin-right: -40px;
}

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

/* Path icon – Unvisited page*/
nav.nav-bar li.page a[href="#"]:before,
nav.nav-bar li.page a[href="#"]:hover:before{
	background-position: -20px 60px;
}

/* Path icon – Active page*/
nav.nav-bar li.page.active a:before,
nav.nav-bar li.page.active a:hover:before{
	background-position: -92px 60px;
}

/* Path icon – Visited page*/
nav.nav-bar li.page a:before{
	background-position: -236px 64px;
	margin-right: -44px;
	margin-top: -4px;
	width: 44px; 
	height: 44px;
}

nav.nav-bar li.page a:hover:before{
	background-image: url("img/Progresjon.svg");
	background-position: -380px 64px;
}

/*** 4.2 Collapsed vertical navigation menu ***/

.navbar-light .navbar-toggler{
	border-radius: 4px;
	margin: 6px auto 24px 17px;
	width: 398px;
	height: 56px;
	border: 1px solid var(--Blue-200);
	background: var(--White);
	position: relative;
	z-index: 1;
}

.navbar-toggler-icon{
	background-image: url("img/Icons.svg") !important;
	background-color: transparent;
	background-size: initial;
	background-position: -799px -159px;
	display: inline-block;
	position: relative;
	float: right;
	left: -11px;
	top: -0.5px;
	width: 12px; 
	height: 23px;
	content:"";
}

/* The collapsed menu is open. Arrows switch direction */

button[aria-expanded="true"] .navbar-toggler-icon{
	background-position: -895px -159px;
}

@media only screen and (max-width: 991px) and (min-width: 768px){
	
	.col-sm-3.left-menu-col{
		flex: 0 0 398px;
		max-width: 398px;
	}
	
	.navbar-light .navbar-toggler{
		margin: 0;
		width: 100%;
		background: transparent;
	}
}

@media only screen and (max-width: 991px) and (min-width: 0px){
	
	.page :is(a,a[href="#"],.active a):after{
		font-size: 18px !important;
		line-height: 146%;
		left: -36px !important;
		top: 3px;
	}
	
	:is(.page[index="10"],.page[index="11"],.page[index="12"],.page[index="13"]
	,.page[index="14"],.page[index="15"],.page[index="16"],.page[index="17"],
	.page[index="18"],.page[index="19"]) :is(a,a[href="#"],.active a):after{
		left: -47px !important;
	}

}




@media only screen and (max-width: 767px) and (min-width: 0px){
	
	.col-sm-3.left-menu-col{
		flex: 0 0 355px;
		max-width: 355px;
		left: 0px;
		margin: 0 10px /*-56px*/;
		
	}
	
	.navbar-light .navbar-toggler{
		margin: 0;
		width: 100%;
		background: transparent;
	}
	
	.navbar-light .navbar-toggler:focus-within {
		outline: transparent;
	}
}

@media only screen and (max-width: 375px) and (min-width: 0px){
	.col-sm-3.left-menu-col{
		flex: 0 0 100%;
		max-width: 100%;
		margin: 0;
		
	}
	
	.navbar-light .navbar-toggler{
		margin: 0;
		width: 100%;
		background: transparent;
	}
}


/*** 4.2.1 Displaying active page in collapsed menu ***/

@media only screen and (max-width: 991px) and (min-width: 0px){
	.navbar-expand-lg.navbar-light{
		background: var(--White);
		margin: 6px auto 24px auto;
		z-index: -1;
		border-radius: 4px;
		/*height: calc(100% - 86px);
		position: relative;
		top: -56px;*/
	}
	
	.collapse:not(.show){
		display: block;
	}
		
	.collapse:not(.show) li.page{
		display: none;
	}
		
	.collapse:not(.show) li.page.active{
		display: block !important;
		position: relative;
		top: -60px;
		left: 64px;
		/*right: -64px;*/
		margin-bottom: -70px;
		/*width: 230px;*/
		width: auto;
		z-index: 0;
	}
		
	.collapse:not(.show) li.page.active:after{
		display: none;
	}
		
	.collapse:not(.show) li.page.active a:before{
		zoom: 0.9;
		top: -2px;
		left: -64px;
	}
}

/*** 4.2.2 Expanded menu ***/

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

@media only screen and (max-width: 991px) and (min-width: 0px){
	
	.show li.page{
		position: relative;
		left: 65px;
		/*width: 230px;*/
		width: auto;
	}
		
	button[aria-expanded="true"]{
		border: 1px solid var(--Blue-200);
		border-radius: 4px 4px 0px 0px !important;
		border-bottom: 1px solid transparent !important;
	}
	
	button[aria-expanded="true"]~.navbar-collapse{
		border: 1px solid var(--Blue-200);
		border-radius: 0px 0px 4px 4px;
		border-top: 0px solid transparent;
		/*position: relative;
		top: -56px;*/
	}
	
	nav.nav-bar li.page a:before{
		zoom: 0.9;
		left: -54px !important;
		top: -1px !important;
	}
}


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

/*** 4.3 Other navigation menu settings (original default settings) ***/
 
nav.nav-bar .nav.flex-column {
    width: 100%;
}

.group > a.nav-link{
	line-height: 0px;
	font-size: 0px;
	padding: 0;
}

nav.nav-bar li.group ul li {
    padding-left: 0px;
}

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


/**** Top navigation ****/
.top-navigation ul.navbar-nav {
  width: 100%;
  justify-content: space-between; }

/**** Progress tracker ****/
.progress-tracker {
  padding-left: 0;
  width: 100%;
  list-style: none;
  display: flex;
  justify-content: flex-start; }
  .progress-tracker li {
    /*flex-grow: 1;*/
    color: #c8373c;
    text-align: center;
    padding: 0.3em;
    padding-right: 1.5em;
    border-bottom: 1px solid #DBDCDD; }
  .progress-tracker li i:before {
    content: "check";
    font-size: 1em; }
  .progress-tracker li.active {
    border-bottom: 1px solid #c8373c; }
  .progress-tracker li.active ~ li {
    border-bottom: 1px solid transparent;
    color: #A7A9AC; }
    .progress-tracker li.active ~ li i.style-icons:before {
      content: ""; }

/**** Top menu ****/
nav.navbar .navbar-nav li a.nav-link {
  color: #323233; }
nav.navbar .navbar-nav li.active > a.nav-link {
  color: #c8373c; }
nav.navbar .navbar-nav li:hover a.nav-link {
  color: #c8373c; }
nav.navbar .navbar-nav li a[href="#"].nav-link,
nav.navbar .navbar-nav li a[href="#"].nav-link:hover {
  color: #A7A9AC;
  cursor: default; }

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

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

/*** 5.1 General styling ***/

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

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

.row.question-group-content > div > span[class="groupListContainer"] > div.row.question-group{
	padding: 0px;
}

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

/*** 5.1.1 Input label ***/

label{
	margin-bottom: 4px;
}

label.question-label {
	padding: 0px 4px;
	font-weight: 600;
	color: var(--Blue-700);
	padding-top: 0px;
	line-height: 170%;
	letter-spacing: 0.02em;
}

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

/*** 5.1.2 Input field ***/

.form-control{
	border-radius: 6px;
	box-shadow: 0px 2px 4px 0px #728CA63D inset;
	border: 1px solid var(--Blue-400);
	padding: 12px 16px;
	height: 48px;
}

.form-control:hover {
    border: 1px solid var(--Blue-600);
    background-color: var(--Turquoise-25);
    box-shadow: 0px 2px 4px 0px #14406B3D inset;
}

/*.form-control:focus{
	box-shadow: 0px 0px 8px rgba(114, 140, 166, 0.64), inset 0px 2px 4px rgba(20, 64, 107, 0.32);
}*/

.form-control:not([disabled]):not(.disabled):active,
.form-control:focus{
	box-shadow: inset 0px 2px 4px rgba(113, 206, 210, 0.48);
	border: 1px solid var(--Turquoise-400);
	background-color: var(--Turquoise-25);
}

/* Read-only */
.form-control:disabled, .form-control[readonly],
.form-control[readonly]:not([disabled]):not(.disabled):active,
.form-control[readonly]:focus {
    background-color: var(--Gray-25);
    border: 1px solid var(--Blue-400);
    box-shadow: none;
    cursor: default;
}

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

/*** 5.2 Calendar ***/

.datepicker:before,
.datepicker:after{
	display: none;
}

.datepicker-dropdown{
	border: 1px solid var(--Blue-200);
	border-radius: 8px;
	padding: 16px;
	box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.16);
}

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

/*** 5.2.1 Icon ***/

.tag-date > div.col-md-12:before {
    display: inline-block;
    position: relative;
    left: -14px;
    top: 40px;
    float: right;
    width: 24px;
    height: 24px;
    background-image: url("img/Icons.svg");
    background-color: transparent;
    background-position: -413px -319px;
    content: "";
    transform: scale(0.9);
}

.tag-date-cell-1 label.question-label:before{
	left: 150px;
}

.tag-date span[id="instructs"]{
	display: none;
}

@media only screen and (max-width: 767px) and (min-width: 0px){
	
	.tag-date-cell-1 label.question-label:before{
		left: 127px;
	}
	
}

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

/*** 5.2.2 Calendar header ***/

.datepicker-switch{
	max-width: 50%;
	padding-left: 12px;
	padding-right: 12px;
}

.table-condensed{
	text-transform: uppercase;
}

th.prev,
th.datepicker-switch,
th.next{
	padding-bottom: 26px;
}

th.datepicker-switch{
	font-family: IBMPlexSans-Bold;
	font-weight: bold;
	color: var(--Blue-900);
}

th.prev,
th.next{
	font-size: 0;
}

th.prev:before,
th.next:before{
	background-image: url("img/Icons.svg");
	background-color: transparent;
	background-position: -308px -160px;
	display: inline-block;
	margin-right: -21px;
	position: relative;
	/*left: 357px;
	top: 43px;*/
	float: left;
	width: 22px; 
	height: 22px;
	content: "";
}

th.prev:before{
	background-position: -215px -160px;
	/*transform: rotate(-180deg);*/
}

th.dow{
	font-weight: 600;
	font-size: 0;
	padding-bottom: 2px;
}

th.dow:before{
	font-size: 14px;
}

th.dow:first-child:before{	content: "M";	}
th.dow:nth-child(2):before{	content: "T";	}
th.dow:nth-child(3):before{	content: "O";	}
th.dow:nth-child(4):before{	content: "T";	}
th.dow:nth-child(5):before{	content: "F";	}
th.dow:nth-child(6):before{	content: "L";	}
th.dow:last-child:before{	content: "S";	}

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

/*** 5.2.3 Date picker ***/

.table {
	border-collapse: initial;
}

/* Default day*/
td.day{
	background-color: var(--White);
	font-family: 'IBMPlexSans-Regular';
	font-weight: 600;
	text-shadow: none;
	width: 40px;
	height: 40px;
	border-radius: 4px;
	color: var(--Blue-900),
}

.datepicker table tr td.day:hover{
	background: var(--White);
}

.datepicker table tr td.day:before{
    background-color: transparent;
	outline: 1px solid var(--Turquoise-200);
	z-index: 0;
	border-radius: 4px;
	content: "";
	display: block;
	position: absolute;
	margin-left: 0px;
	margin-top: -8px;
	height: 37px;
	width: 37px;
}

.datepicker table tr td.day:hover:before{
    outline: 1px solid var(--Blue-900);
	z-index: 0;
	height: 37px;
	width: 37px;
}


/* Selected date */
.datepicker table tr td.active.day,
.datepicker table tr td.active.day:hover{
	background-image: none;
	background-color: var(--Turquoise-700);
	color: var(--White);
	/*outline: 1px solid var(--White);*/
	text-shadow: none;
	padding-top: 9px;
}

.datepicker table tr td.active.active:before{
	outline: 1px solid var(--White);
	border: 1px solid var(--White);
	height: 39px;
	width: 40px;
	margin-left: -1px;
	margin-top: -8px;	
	cursor: default;
}
/* Dates in other months */
.datepicker table tr td.new,
.datepicker table tr td.old{
	color: var(--Blue-800);
	background-color: var(--Gray-25);
}

.datepicker table tr td.new:before,
.datepicker table tr td.old:before{
	border: 0.5px solid var(--Blue-100);
	height: 38px;
	width: 38px;
	margin-top: -8.2px;
	outline: 2.2px solid var(--White);
}

.datepicker table tr td.new:hover:before,
.datepicker table tr td.old:hover:before{
	border: 1px solid var(--Blue-900);
	outline: none;
}

/* Disabled dates */
.datepicker table tr td.disabled,
.datepicker table tr td.disabled:hover{
	color: var(--Blue-600);
	background: var(--Gray-50);
	border-radius: 0px;
	font-weight: 400;
	/*outline: 1px solid var(--White);*/
}

.datepicker table tr td.disabled:before,
.datepicker table tr td.disabled:hover:before{
	outline: 2px solid var(--White);
	border-radius: 0;
	height: 38px;
	width: 38px;
	margin-top: -8.2px;
	border: none;
}


/*td[class="day"],
.datepicker table tr td.disabled,
.datepicker table tr td.active.active,
.datepicker table tr td.active.active:hover,
.datepicker table tr td span.active.active,
.datepicker table tr td span.active.active:hover{
	font-family: 'IBMPlexSans-Regular';
	font-weight: 600;
	text-shadow: none;
	width: 40px;
	height: 40px;
	border-radius: 4px;
}*/


/*.datepicker table tr td.disabled:before{
    background-color: transparent;
	border: 1px solid var(--Turquoise-200);
	z-index: 0;
	border-radius: 4px;
	content: "";
	display: block;
	position: absolute;
	margin-left: 0px;
	margin-top: -8px;
	height: 37px;
	width: 37px;
}

.datepicker table tr td.disabled:hover:before{
    border: 1px solid var(--Blue-900);
	z-index: 0;
}*/

/*.datepicker table tr td.new,*/
/*.datepicker table tr td.old{
	background: var(--Gray-25);
	height: 40px;
}*/

/*.datepicker table tr td.old,*/
/*.datepicker table tr td.new:before{
	border: 0.5px solid var(--Blue-100);
}*/

/*.datepicker table tr td.old,
.datepicker table tr td.old:hover,
.datepicker table tr td.disabled,
.datepicker table tr td.disabled:hover{
	font-weight: 400;
	color: var(--Blue-600);
	background: var(--Gray-50);
	border: 2px solid var(--White);
	border-radius: 0;
	cursor: default;
	height: 40px;
}

.datepicker table tr td.old:before,
.datepicker table tr td.disabled:before{
	border: 0px solid;
}*/

/*** 5.2.3 Month and Year picker ***/

.datepicker-months td,.datepicker-months th,
.datepicker-years td,.datepicker-years th{
	width: 29px;
}

span.month:before,
span.year:before{
    background-color: transparent;
	border: 1px solid var(--Turquoise-200);
	z-index: 0;
	border-radius: 4px;
	content: "";
	display: block;
	position: absolute;
	/*margin-left: 1px;*/
	height: 49px;
	width: 49px;
}

span.month, span.year,
.datepicker table tr td span.active.active,
.datepicker table tr td span.active.active:hover{
	font-family: 'IBMPlexSans-Regular';
	font-weight: 600;
	text-shadow: none;
	width: 50px;
	height: 50px;
	border-radius: 4px;
	/*border: 1px solid var(--Turquoise-200);*/
}

.datepicker table tr td span.active.active,
.datepicker table tr td span.active.active:hover{
	background-image: none;
	background-color: var(--Turquoise-700);
	color: var(--White);
}

.datepicker table tr td span{
	width: 50px;
	height: 50px;
	line-height: 50px;
	margin: 0%;
}

.datepicker-months table tr td span.month:hover,
.datepicker-years table tr td span.year:hover{
	background: var(--White);
}

.datepicker-months table tr td span.month:hover:before,
.datepicker-years table tr td span.year:hover:before{
	border: 1px solid var(--Blue-900);
	z-index: 0;
}

span.month.disabled,
span.year.disabled{
	background: var(--Gray-50) !important;
}

span.month.disabled:before,
span.year.disabled:before{
	border: 0.5px solid var(--Blue-100);
}

span.month.active,
span.year.active{
	border: 1px solid var(--White);
}

span.month.active:before,
span.year.active:before{
	border: 0px solid var(--White);
}

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

/* Hint text formatting */

small.hint {
	opacity: 1;
	font-size: inherit;
	order: 2;
	color: var(--Blue-900);
	display: inline-block;
	flex-direction: row;
	/*line-height: 240%;*/
	background: var(--Gray-50);
	border-radius: 4px;
	padding: 4px 8px;
	margin-top: 4px;
}

/* Hints as units */

.tag-unit small.hint_RIGHT {
	display: flex;
	position: relative;
	float: right;
	font-size: 16px;
	top: -12.5px;
	left: -16px;
	text-align: right;
	flex-direction: column;
	background-color: transparent;
	color: var(--Blue-600);
	opacity: 0.8;
}

.tag-unit input[type=text].form-control,
.tag-unit textarea.form-control,
.tag-unit input[type=text].bootstrap-datepicker,
.tag-unit input[type=password].form-control{
	text-align: right;
	padding-right: 50px;
	margin-bottom: -32px;
}

.tag-gram input[type=text].form-control,
.tag-gram textarea.form-control,
.tag-gram input[type=text].bootstrap-datepicker,
.tag-gram input[type=password].form-control{
	padding-right: 66px;
}

.tag-unit .invalid-feedback{
	position: relative;
	top: 32px;
}

/*.tag-unit .is-invalid + small.hint_RIGHT{
	left: -0px;
}*/

.tag-unit .invalid-feedback:before,
.tag-button-grad .invalid-feedback:before,
textarea.form-control.is-invalid ~ .invalid-feedback:before{
	display: none;
}

/* Validation error message formatting */

.invalid-feedback{
	opacity: 1;
	font-family: 'IBMPlexSans-Medium';
	font-size: inherit;
	order: 2;
	color: var(--Blue-900);
	flex-direction: row;
	/*line-height: 240%;
	display: inline-block;*/
	background: var(--Red-200);
	border-radius: 4px;
	padding: 4px 8px;
	margin-top: 4px;
	line-height: 155%;
}

.invalid-feedback:before{
	background-image: url("img/Icons.svg");
    background-color: white;
    background-position: -1319px -159px;
	display: inline-block;
	position: relative;
	left: -5px;
	top: -44px;
	float: right;
	width: 27px; 
	height: 23px;
    content: "";
}

.tag-hint .invalid-feedback:before{
	top: -77px !important;
}

.tag-map-dms .invalid-feedback:before,
.tag-map-dmm .invalid-feedback:before{
	top: -43px;
	left: -13px;
}

.badge-danger{
	color: transparent;
	background-color: transparent;
}

.badge-danger:after {
	background-image: url("img/Progresjon.svg");
	background-color: transparent;
	background-position: -474px 64px;
	display: inline-block;
	margin-right: -22px;
	position: relative;
	left: -51px;
	top: -12px;
	float: left;
	width: 22px; 
	height: 22px;
	content:"";
}

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

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

.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: 1px solid var(--Red-600) !important;
    box-shadow: inset 0px 2px 4px rgba(204, 0, 0, 0.24);
}

/* Special case due to the wrapping of the datePicker element */
div[input="invalid"]~.invalid-feedback{
	display: block;
}

/* Help text pop-up */

.popover {
	border: 1px solid var(--Purple-300);
	box-shadow: 0px 4px 12px rgba(20, 64, 107, 0.16);
	border-radius: 8px;
	color: var(--Blue-700);
	padding: 0px 16px 16px 18px;
	font-family: "IBMPlexSans-Regular";
	font-size: 16px;
	line-height: 150%;
	min-width: 320px;
	margin: 0;
	background-color: var(--Purple-50);
}

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

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

.popover-body{
	padding: 0;
	margin: 0;
	margin-top: -10px;
	margin-bottom: -16px;
}

.popover-body button.close{
	margin-top: 24px;
}

/* Help text icon */

.tag-help .form-control{
	padding-right: 56px;
}

.tag-help > div.col-md-12{
	margin-bottom: -24px;
}

.tag-help .autoExpand{
	padding-right: 46px;
}

.btn.btn-link.material-icons:after{
	background-image: url("img/Icons.svg");
	background-color: transparent;
	background-position: -986px -160px;
	display: inline-block;
	margin-right: -21px;
	position: relative;
	float: left;
	width: 22px; 
	height: 22px;
	content:"";
}

.btn.btn-link.material-icons.help-btn:hover,
.btn.btn-link.material-icons:active,
.btn.btn-link.material-icons:focus {
	text-decoration: none; }
  
.btn.btn-link.material-icons {
	color: transparent;
	padding: 0;
	font-size: 22px;
	position: relative;
	float: right;
	left: -15px;
	top: 40px;
}

.tag-check .btn.btn-link.material-icons:after{
	display: none;
}

/* Hva brukes dette ikonet til? I v9.2.0-kladd præver jeg å skjule denne, så får vi se om den er savnet */

/*.tag-check .btn.btn-link.material-icons{
	background-image: url("img/Icon.svg");
	background-size: 6500%;
	background-color: transparent;
	background-position: -14.7px -130px;
	display: inline-block;
	margin-right: -21px;
	position: relative;
	left: -40px;
	float: right;
	width: 22px; 
	height: 22px;
	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: 100%;
}

.help-at-input~.btn.btn-link.material-icons{
	top: -36px;
}

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

.style-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  /*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: rtl;
  /* 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'; }

.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.png");
  background-position: 0 -597px;
  width: 80px; }

.auth-info .auth-name {
  font-size: 0.8em;
  line-height: 1.8em;
  font-style: italic;
  color: #A7A9AC;
  margin-left: 0.3em; }

.col-sm-12 {
	min-height: 0px;
}

/**** Question group ****/
  .question-group .group-title-row > div {
    display: flex;
    justify-content: space-between; }
  .question-group button.addGroup {
    margin-right: 5px; }

/**** 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%; }


/**** Group buttons ****/
.btn.addGroup:before {
  content: "add"; }

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



/* 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 {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  /* line-height: 1.3em;*/
  vertical-align: top;
  /* Support for IE. */
  font-feature-settings: 'liga';
}

.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; }

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

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

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

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

/*.form-check {
  padding-top: .375em; }*/

.mandatory label.question-label::after,
.page_mandatory label.question-label::after {
  content: '*'; }

.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 > div {
  /*display: flex;*/
  flex-direction: column;
}

div.form-group > div > div {
  order: 1; 
}

/*div.form-group > div .question-label {
  font-weight: bold; 
}*/

/*div.form-group .form-control {
  order: 3; }*/


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

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: #c8373c;
    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: #c8373c;
    /* Green background */
    cursor: pointer;
    /* Cursor on hover */
    border-radius: 10px; }

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

.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: #b92745; }

.custom-file.is-invalid ~ .invalid-feedback,
.form-check.is-invalid ~ .invalid-feedback,
.form-control.is-invalid ~ .invalid-feedback {
  display: block;
  color: #b92745; }*/

.validation-page-alert {
  width: 100%;
  text-align: center;
  margin-bottom: 1.5rem; }
  .validation-page-alert.alert-warning {
    border-color: #ffc30f;
    background-color: #FFEFC1;
    color: #323233; }
  .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-authentication-methods {
  list-style: none;
  padding-left: 0; }

.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; }

/**** 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 .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; }


/**** Webscriptlets ****/

/**** Breakpoints ****/

/* Extra small devices (portrait phones, less than 576px) */
/* No media query since this is the default in Bootstrap */


@media only screen and (max-width: 480px) and (min-width: 0px) {
  .progress-tracker {
    display: none; }
}

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

}

//Medium devices (tablets, 768px and up)
@media (min-width: 768px) {
  .form-group button {
    width: 100px;
  }
}

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

}

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

}


/*.tag-cell-1 .btn.btn-link.material-icons,
.tag-cell-2 .btn.btn-link.material-icons{
	left: 46px;
}*/ 	/*Is no longer necessary when the float is right oriented*/

/*.tag-cell-1 .invalid-feedback:before,
.tag-cell-2 .invalid-feedback:before{
	top: -40px;
}*/

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

.form-check{
	padding-left: 0px;
}

.form-check-label{
	font-weight: 400;
	color: var(--Blue-900);
	font-size: 16px;
}

/*** 6.1 Radio button tag ***/

input[type=radio]{
	z-index: -1;
}

.form-check-input {
	margin-left: 0;
}

.tag-radio input.form-check-input:focus + label {
	border-bottom: 1px solid var(--Blue-600);
}

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

.tag-radio .col-md-12 div:nth-child(2) .form-check-label{
	border-radius: 4px 4px 0 0;
}

.tag-radio .col-md-12 div:nth-last-child(3) .form-check-label{
	border-radius: 0 0 4px 4px;
}

.tag-radio label[class="form-check-label"]:before{
	background-image: url("img/GUI.svg");
	/*background-size: 1100%;*/
	background-position: -14px -56px;
	display: inline-block;
	margin-right: -21px;
	position: relative;
	left: -40px;
	top: 1px;
	float: left;
	width: 25px; 
	height: 25px;
	content:"";
}

.tag-radio input.form-check-input:hover + label {
	background-color: var(--Gray-50);
}

.tag-radio input.form-check-input:checked + label,
.tag-radio input.form-check-input:active + label {
	background-color: var(--Turquoise-50);
	box-shadow: none !important;
	border: 1px solid var(--Blue-200) !important;
}

.tag-radio input.form-check-input:focus + label:before {
	background-image: url("img/GUI_vertical.svg");
	background-position: -10.5px -230px;
	width: 36px;
	height: 36px;
	margin-top: -6px;
	margin-bottom: -5px;
	margin-right: -28.5px;
	margin-left: -3.5px;
}

.tag-radio input.form-check-input:checked + label:before {
	background-image: url("img/GUI.svg");
	background-position: -62px -56px;
	width: 25px;
	height: 25px;
	margin-top: 0px;
	margin-right: -21px;
	margin-left: 0px;
	margin-bottom: 0px;
}

/*.tag-radio .invalid-feedback,
.tag-check .invalid-feedback{
	display: block;
}*/

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


.tag-radio .invalid-feedback:before,
.tag-check .invalid-feedback:before{
	display: none;
}

.form-check-input.is-invalid~.form-check-label{
	color: inherit;
}


@media only screen and (max-width: 767px) and (min-width: 0px){
	
	.tag-radio label.form-check-label{
		width: 100%;
	}
	
}

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

/*** 6.2 Check box tag ***/

input[type=checkbox]{
	z-index: -1;
}

.tag-check label.form-check-label {
	width: 398px;
	line-height: 24px;
	margin: 2px 0 0 0px;
	padding: 12px 55px;
	border: 1px solid var(--Blue-200);
	background-color: var(--White);
	box-sizing: border-box;
	border-radius: 6px;
	cursor: pointer;
}

.tag-check label[class="form-check-label"]:before{
	background-image: url("img/GUI.svg");
	background-size: 1100%;
	background-position: -108.5px -55px;
	display: inline-block;	
	margin-right: -25px;
	position: relative;
	left: -40px;
	float: left;
	width: 25px; 
	height: 25px;
	content:"";
}

.tag-check input.form-check-input:focus + label {
	border: 1px solid var(--Blue-600);
	box-shadow: 0px 0px 8px rgba(114, 140, 166, 0.64);
}

.tag-check input.form-check-input:hover + label {
	background-color: var(--Gray-50);
}

.tag-check input.form-check-input:checked + label {
	border: 1px solid var(--Turquoise-300);
	background-color: var(--Turquoise-50);
}
.tag-check input.form-check-input:checked + label:before {
	background-position: -156px -55px;
}

@media only screen and (max-width: 767px) and (min-width: 0px){
	
	.tag-check label.form-check-label{
		width: 100%;
	}
	
}

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

/*** 6.3 Button tags ***/

/* 	There are three tags for horizontal single-select buttons:

	tag-button-2 (2 options)
	tag-button-3 (3 options)
	tag-button-4 (4 buttons)
	
	and one tag for vertical buttons used to display one character gradations:

	tag-button-grad															*/

/*** 6.3.1 2, 3 and 4 horizontal buttons ***/

/* 2 buttons */
.tag-button-2 .form-check-inline {
	width: 50.1%;
}

/* 3 buttons */
.tag-button-3 .form-check-inline {
	width: 33.5%;
}

/* 4 buttons */
.tag-button-4 .form-check-inline {
	width: 25.2%;
}

:is(.tag-button-2,.tag-button-3, .tag-button-4) .form-check-inline {
	padding-right: 0px;
    margin-right: -4px;
}

:is(.tag-button-2,.tag-button-3, .tag-button-4) input[type=radio]{
	width: 0px;
}

.row :is(.tag-button-2,.tag-button-3, .tag-button-4){
	margin-left: -15px;
	margin-right: -15px;
}

:is(.tag-button-2,.tag-button-3, .tag-button-4) .form-check-input{
	margin-right: 0px;
}

:is(.tag-button-2,.tag-button-3, .tag-button-4) .form-check{
	padding-left: 0px;
}

:is(.tag-button-2,.tag-button-3, .tag-button-4) label.form-check-label {
	height: 48px;
	margin: 2px 0 0 0px;
	width: 100%;
	text-align: center;
	box-sizing: border-box;
    padding: 12px 0;
    border: 1px solid var(--Blue-400);
    background: var(--White);
    cursor: pointer;
}

:is(.tag-button-2,.tag-button-3, .tag-button-4) input.form-check-input:hover + label {
	z-index: 0;
}

:is(.tag-button-2,.tag-button-3, .tag-button-4) .form-check input:hover + label:before,
:is(.tag-button-2,.tag-button-3, .tag-button-4) .form-check input:checked + label:before{
    background-color: transparent;
	border: 1px solid var(--Blue-600);
	z-index: -1;
	border-radius: 2px;
	content: "";
	display: block;
	position: absolute;
	top: 8px;
	left: 8px;
	right: 6px;
	bottom: 6px;
}

:is(.tag-button-2,.tag-button-3, .tag-button-4) .form-check input:focus + label{
	border: 1px solid var(--Blue-600);
	box-shadow: 0px 0px 8px rgba(114, 140, 166, 0.64);
}

:is(.tag-button-2,.tag-button-3, .tag-button-4) .form-check input:checked + label:before {
    background-color: var(--Turquoise-50);
	border: 1px solid var(--Turquoise-300);
}

:is(.tag-button-2,.tag-button-3, .tag-button-4) .form-check input:checked + label {
    font-weight: 600;
	z-index: 0;
	color: var(--Blue-900);
	border: 1px solid var(--Blue-400) !important;
	box-shadow: none !important;
}

:is(.tag-button-2,.tag-button-3, .tag-button-4) .col-md-12 div:nth-child(2) .form-check-label{
	border-radius: 6px 0 0 6px;
}

.tag-button-2 .col-md-12 div:nth-last-child(3) .form-check-label,
.tag-button-3 .col-md-12 div:nth-last-child(3) .form-check-label,
.tag-button-4 .col-md-12 div:nth-last-child(2) .form-check-label{
	border-radius: 0 6px 6px 0;
}

:is(.tag-button-2,.tag-button-3, .tag-button-4) .is-invalid label.form-check-label{
	/*border-color: red;
	box-shadow: inset 0px 2px 4px var(--Red-200);*/
	color: var(--Blue-900);
}

:is(.tag-button-2,.tag-button-3, .tag-button-4) .form-check.is-invalid~.invalid-feedback{
	display: block;
}

:is(.tag-button-2,.tag-button-3, .tag-button-4) .invalid-feedback:before{
	display: none;
}

/* Tag: button-2 for 2 horizontal buttons */

.tag-button-2 .form-check-inline {
	/*padding-right: 0px;
    margin-right: -4px;*/
	/*width: 50.1%;*/
}

.tag-button-2 .form-check-input{
	/*margin-left: -26px;*/
}

.tag-button-2 .form-check{
	/*margin-left: 15px;
	margin-right: -6px;*/
}

/*** 6.3.2 Vertical buttons (grad-tag) ***/

/* Tag: button-grad for 4 vertical buttons */
.tag-button-grad .form-check-inline {
	padding-right: 0px;
    margin-right: 0px;
}

.tag-button-grad .form-check-input{
	margin-right: 0px;
}

.tag-button-grad label.form-check-label {
	height: 48px;
	margin: 2px 0 0 0px;
	width: 72px;
	text-align: center;
	box-sizing: border-box;
    padding: 12px 0;
    border: 1px solid var(--Blue-400);
    background: var(--White);
    cursor: pointer;
	position: relative;
	left: 0;
}

.tag-button-grad .form-check{
	padding-left: 0px;
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: -32px;
	/*min-height: 68px;*/
}

.tag-button-grad input.form-check-input:hover + label {
	z-index: 0;
}

.tag-button-grad .form-check input:hover + label:before,
.tag-button-grad .form-check input:checked + label:before{
    background-color: transparent;
	border: 1px solid var(--Blue-600);
	z-index: -1;
	border-radius: 2px;
	content: "";
	display: block;
	position: absolute;
	top: 6px;
	left: 6px;
	right: 6px;
	bottom: 6px;
}

.tag-button-grad .form-check input:checked + label:before {
    background-color: var(--Turquoise-50);
	border: 1px solid var(--Turquoise-300);
}

.tag-button-grad .form-check input:checked + label {
    font-weight: 600;
	z-index: 0;
	color: var(--Blue-900);
}

.tag-button-grad small.hint{
	background: transparent;
	width: 308px;
	display: inline-block;
	flex-direction: row;
	position: relative;
	top: -40px;
	left: 72px;
	text-align: left;
	line-height: 155%;
	/*vertical-align: -webkit-baseline-middle;*/
	font-size: 14px;
	margin-top: 0px;
}

.tag-button-grad small.hint b{
	color: var(--Blue-600);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	line-height: 170%;
}

.tag-button-grad label{
	display: inline-block;
	border-radius: 6px;
}

.tag-button-grad{
	padding-bottom: 0;
}

@media only screen and (max-width: 767px) and (min-width: 375px){
	
	.tag-button-grad small.hint{
		width: 283px;
	}
	
}

@media only screen and (max-width: 374px) and (min-width: 336px){
	
	.tag-button-grad small.hint{
		width: 245px;
	}
	
}

@media only screen and (max-width: 335px) and (min-width: 314px){
	
	.tag-button-grad small.hint{
		width: 225px;
	}
	
}

@media only screen and (max-width: 313px) and (min-width: 0px){
	
	.tag-button-grad small.hint{
		width: 200px;
	}
	
}



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

/*** 6.4 Dropdown styling ***/

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

/*option:hover{
	background-color: var(--Gray-50);
	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-200);
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.16);
}

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

/* Smaller dropdown above than below */

/*.select2-container--open .select2-dropdown--above,
.select2-dropdown.select2-dropdown--above .select2-results>.select2-results__options {
    max-height: 240px;
}*/

.select2-container--default .select2-results>.select2-results__options{
	max-height: 300px !important;
}

/* New select2 component */

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

.select2-selection {
    border: 1px solid var(--Blue-400) !important;
    border-radius: 6px !important;
    height: 48px !important;
}

.select2-selection__rendered {
    color: var(--Blue-900) !important;
    font-size: 16px;
    line-height: 24px !important;
    padding: 10.5px 42px 11.5px 16px !important;
}

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

.select2-results__options {
    padding: 16px !important;
}

.select2-results__option[aria-selected] {
    border: 1px solid #DCE2E9;
    border-radius: 8px;
    margin: 2px 0;
    padding: 8px 11px;
	font-size: 16px;
}

/* Hover styling */ 
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--Gray-50) !important;
    color: var(--Blue-900) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected="true"] {
    border: 1px solid var(--Turquoise-300);
    font-family: 'IBMPlexSans-Bold' !important;
    background-color: var(--Turquoise-50) !important;
    color: var(--Blue-900);
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: var(--Turquoise-50) !important;
    border: 1px solid var(--Turquoise-300);
    font-family: 'IBMPlexSans-Bold' !important;
}

/* Dropdown arrow */

.select2-selection__arrow b {
    display: none;
}

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

.select2-container--open .select2-selection__arrow{
    background-position: -503px -167px;
}

/* Hover styling - Dropdown */
span.select2-selection.select2-selection--single:hover {
    background-color: var(--Turquoise-25);
    border: 1px solid var(--Blue-600) !important;
}

/* Focus styling - Dropdown */

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

span.select2-selection.select2-selection--single:focus{
    border: 2px solid var(--Blue-600) !important;
    box-shadow: 0px 0px 8px rgba(114, 140, 166, 0.4);
    width: calc(100% + 2px);
    margin-left: -1px;
    margin-top: -0.5px;
}


/* Dropdown styling - Open */
.select2.select2-container--open .select2-selection.select2-selection--single {
    border: 1px solid var(--Turquoise-500) !important;
    background-color: var(--Turquoise-25);
    width: 100% !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
    box-shadow: 0px 0px 8px rgba(18, 174, 180, 0.24), inset 0px 2px 4px rgba(113, 206, 210, 0.48) !important;
}


/* Active styling - Dropdown */
/*.select2-container--open .select2-selection{
    border: 1px solid var(--Turquoise-500) !important;
}*/

.select2-container--default:is(.select2-container--below,.select2-container--above).select2-container--focus
.select2-selection.select2-selection--single[aria-expanded=false] {
    border: 2px solid var(--Turquoise-400) !important;
    box-shadow: 0px 0px 8px rgba(20, 64, 107, 0.16);
}

.select2-dropdown.select2-dropdown--below {
    margin-top: 2px;
    border: 1px solid var(--Blue-200) !important;
    border-radius: 8px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.16);
}



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

/** 7 File upload and table for uploading multiple files (dup-tab tag) ***/

/*** 7.1 File upload ***/ 

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

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

.custom-file{
	height: 48px;
}

/*.custom-file-label,*/ .form-control.custom-file-label{
	border: 1px dashed var(--Blue-400);
	color: var(--Blue-900);
	z-index: 1;
	border-radius: 6px !important;
	background-color: transparent;
	padding: 12px 16px;
	height: 48px;
	cursor: pointer;
	font-size: 16px;
	width: 100%;
}

button.btn.btn-outline-secondary.custom-file-upload {
    display: none;
}

/*.custom-file-label:hover,*/.form-control.custom-file-label:hover{
	border: 1px solid var(--Blue-600);
}

.custom-file:hover{
	background-color: var(--Turquoise-25);
}

/*.custom-file-input:focus~div>.form-control[readonly].custom-file-label:focus*/
.form-control[readonly].custom-file-label:focus{
	border: 2px solid var(--Blue-600);
	box-shadow: 0px 0px 8px rgba(114, 140, 166, 0.4), inset 0px 2px 4px rgba(20, 64, 107, 0.32);
	background-color: transparent;
}

.form-control[readonly].custom-file-label:not([disabled]):not(.disabled):active {
    border: 1px solid var(--Turquoise-500);
    box-shadow: none;
    background-color: transparent;
}


/* Upload icon */
.custom-file .input-group-append:before{
	background-image: url("img/Icons.svg");
    background-color: transparent;
    background-position: -607px -611px;
    display: inline-block;
    position: relative;
    left: calc(100%);
    /* top: 0px; */
    float: right;
    width: 20px;
    height: 24px;
    content: "";
    transform: scale(0.9);
}

.custom-file>.input-group>.input-group-append {
    margin-top: -36px;
    margin-right: 36px;
}

.custom-file .input-group-append{
    width: 100%;
}

.custom-file[uploaded="yes"] .input-group-append:before{
	display: none;
}

/*** 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: -54px;
	padding: 12px 16px;
	text-align: left;
	background-color: transparent;
	color: var(--Blue-600);
}

.custom-file:hover~.hint_RIGHT{
	color: var(--Blue-600);
}

.custom-file:focus~.hint_RIGHT{
	color: var(--Blue-800);
}

/*.custom-file:focus~.hint_RIGHT,
.custom-file:hover~.hint_RIGHT{
	color: var(--Blue-900);
}*/

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;
}

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

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

/*.custom-file[uploaded="yes"],*/
.custom-file[uploaded="yes"] .custom-file-label {
    padding: 12px 40px 12px 16px;
}

.custom-file[uploaded="yes"] .custom-file-label {
    border: 1px solid var(--Blue-200);
    background: rgba(240, 243, 245, 0.48);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

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

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

button[name="removeUploadedFile"]:hover {
    background-position: -177.5px -324px;
}

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

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

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

/* Default table settings */

.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-left: 0px;
	padding-right: 0px;
	padding-bottom: 10px;
}

thead{
	background-color: transparent;
	color: var(--Blue-700);
	font-weight: 600;
	font-size: 14px;
	line-height: 170%;
	letter-spacing: 0.02em;
}

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

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

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

/*** 7.3 Multifile table ***/

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

.tag-dup-tab .table th{
	padding: 0 4px 4px 4px;
	line-height: 170%;
}

.tag-dup-tab .table th:last-of-type {
    padding: 0;
}

.tag-dup-tab .table{
	border-collapse: collapse;
}

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

.tag-dup-tab tbody.groupListContainer > tr:last-child .form-group {
    height: 48px;
}

.tag-dup-tab tbody.groupListContainer > tr:last-child td[uploaded="yes"] .form-group {
    height: auto;
}

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

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


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

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

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

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

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

/*** 7.3.1 Add button ***/

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

/*.tag-dup-tab td[uploaded="yes"] {
    display: block;
}*/

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

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

.tag-dup-tab tbody tr:last-child td[uploaded="yes"]~td.add-remove-buttons{
	height: 70px;
}



/* 	Hiding last remove button (which must be tweaked when
	file upload distinction attribute is a part of the code) */

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

.tag-dup-tab tbody tr:last-child .removeGroup:after{
	top: -53px;
}

.tag-dup-tab .btn.btn-primary.removeGroup:hover {
    background-color: transparent !important;
}

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

/* Add file button */

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

.tag-dup-tab .btn.addGroup{
	color: var(--Blue-800);
	font-size: 16px;
	background-color: transparent;
	border: none;
	box-shadow: none;
	margin: 0px;
	padding: 0px;
	position: relative;
	float: right;
	top: 55px;
	right: 34px;
	padding-right: 12px;
}

.tag-dup-tab .btn.addGroup:hover,
.tag-dup-tab .btn.addGroup:focus,
.tag-dup-tab .btn.addGroup:active,
.tag-dup-tab .btn.addGroup:active:before,
.tag-dup-tab .btn.addGroup:not([disabled]):not(.disabled):active{
	color: var(--Turquoise-700);
	margin: 0;
	background-color: transparent !important;
	border: transparent;
	box-shadow: none;
}

/* Add file icon */
.tag-dup-tab .btn.addGroup:after,
.tag-dup-tab .btn.addGroup:hover:after {
    background-image: url("img/Icons.svg");
    font-family: inherit;
    background-position: -32px -279px;
    display: inline-block;
    float: right;
    height: 16px;
    width: 16px;
    position: relative;
    content: "";
	right: -27px;
    top: -20px;
}

.tag-dup-tab .btn.addGroup:hover:after,
.tag-dup-tab .btn.addGroup:focus:after{
	background-position: -82px -279px;
}

@media only screen and (max-width: 767px) and (min-width: 0px){
	
	.tag-dup-tab .btn.addGroup{
		width: auto !important;
	}
	
}

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

/* Remove file buttons */

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

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

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

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

.tag-dup-tab .btn.removeGroup:hover:after,
.tag-dup-tab .btn.removeGroup:focus:after{
	background-position: -177.5px -323px;
}

/*.tag-unit input[type=text].form-control,
.tag-unit textarea.form-control,
.tag-unit input[type=text].bootstrap-datepicker,
.tag-unit input[type=password].form-control{
	text-align: right;
	padding-right: 50px;
	margin-bottom: -32px;
}*/


.tag-dup-tab div.custom-file[uploaded="yes"] .btn.removeGroup:after,
.tag-dup-tab div.custom-file[uploaded="yes"] .btn.removeGroup:hover:after{
	background-color: #F8F9FA !important;
}

/* 	Hiding last remove button (which must be tweaked when
	file upload distinction attribute is a part of the code) */

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

.tag-dup-tab tbody tr:last-child .removeGroup:after{
	top: -53px;
}


/* Makes sure a trash icon always is available at the top upload field */

.tag-dup-tab div.custom-file[uploaded="yes"]~button[name="removeUploadedFile"]{
	display: none;
}

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

/* No trashcan option */
/*.tag-dup-tab td.add-remove-buttons button.removeGroup:after{
	display: none;
}

.tag-dup-tab td[uploaded="yes"]~td.add-remove-buttons button.removeGroup:after{
	display: inline-block !important;
}*/


/* Trashcan option */
.tag-dup-tab td.add-remove-buttons button.removeGroup:hover:after,
.tag-dup-tab td.add-remove-buttons button.removeGroup:after{
	background-color: transparent;
	width: 26px;
}

/*.tag-dup-tab td[uploaded="yes"]~td.add-remove-buttons button.removeGroup:after,
.tag-dup-tab td[uploaded="yes"]~td.add-remove-buttons button.removeGroup:hover:after{
	background-color: #F8F9FA !important;
}*/


/*** Unsorted ***/
:is(.tag-dup-group, .tag-dup-tab) .btn.removeGroup:hover:after,
:is(.tag-dup-group, .tag-dup-tab) .btn.removeGroup:hover:before,
:is(.tag-dup-group, .tag-dup-tab) .btn.removeGroup:focus:after,
:is(.tag-dup-group, .tag-dup-tab) .btn.removeGroup:focus:before,
:is(.tag-dup-group, .tag-dup-tab) .btn.removeGroup:active:after,
:is(.tag-dup-group, .tag-dup-tab) .btn.removeGroup:active:before{
	/*background-color: var(--Red-200);*/
}

:is(.tag-dup-group, .tag-dup-tab) .btn.addGroup:hover:before{
	/*border: 1px solid var(--Turquoise-200);
	box-shadow: none;*/
}

:is(.tag-dup-group, .tag-dup-tab) .btn.addGroup:focus:after,
:is(.tag-dup-group, .tag-dup-tab) .btn.addGroup:focus:before,
:is(.tag-dup-group, .tag-dup-tab) .btn.addGroup:active,
:is(.tag-dup-group, .tag-dup-tab) .btn.addGroup:active:before{
	/*background-color: var(--White);*/
}

:is(.tag-dup-group, .tag-dup-tab) .btn.removeGroup:focus{
	border: transparent;
	box-shadow: none;
}

:is(.tag-dup-group, .tag-dup-tab) .btn.addGroup:focus:before{
	/*border: 1px solid var(--Blue-400);
	box-shadow: 0px 0px 4px rgba(20, 64, 107, 0.4);
	margin: -1px 1px 1px 0px;*/
}

:is(.tag-dup-group, .tag-dup-tab) .btn.removeGroup:focus:before{
	border: 2px solid var(--Red-600);
	box-shadow: 0px 0px 8px rgba(182, 49, 49, 0.4);
	margin: -2px 2px 2px 0px;
}

.groupListContainer div.tag-dup-group:first-of-type .group-title-row .removeGroup{
	display: none;
}

/*.groupListContainer div.tag-dup-group:first-of-type .group-title-row .addGroup{
	left: -74px !important;
}*/

/* Hint texts inside upload file fields */

/*.tag-dup-tab small.hint_BOTTOM{
	background-color: transparent;
	color: var(--Blue-600);
	opacity: 0.8;
	font-size: 16px;
	position: relative;
	top: -34px;
	left: 8px;
}*/

/* Error styling file upload */

.custom-file.is-invalid~.invalid-feedback {
    z-index: 1;
    position: relative;
}

.custom-file.is-invalid~.invalid-feedback:before {
    z-index: 1;
    background-color: transparent;
    top: -1px;
    background-position: -1319px -115px;
    left: -8px;
}

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

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

/* Info texts */

.form-page[page=confirmation] .needs-validation>div.row>.col-md-9>.row:nth-child(3) {
    padding: 16px;
    margin: 0 80px 16px;
    border-radius: 6px;
    background-color: var(--Purple-75);
    font-weight: normal;
    font-size: 16px;
    line-height: 155%;
    color: var(--Blue-900);
}

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

    .form-page[page=confirmation] .needs-validation>div.row>.col-md-9>.row:nth-child(3){
        margin: 0 10px 16px;
    }

}

.row.confirmation-group {
	border: 1px solid #D0D9E1;
	border-radius: 8px;
	margin: 0px 0px 16px 0px;
}

div.col-md-9 .row .container .row.confirmation-group {
	background-color: var(--Gray-25);
}

.confirmation-group .page-title-row {
    padding: 16px 40px;
	margin-bottom: 16px !important;
	border-bottom: 1px solid #D0D9E1;
    background-color: var(--Gray-25);
	/*color: #FFF;*/
	border-radius: 8px 8px 0 0;
}

.confirmation-group .page-title-row > h3{
	font-family: "IBMPlexSans-Regular", Arial, Open Sans,"Tstar Bold",Arial,"Helvetica Neue",Helvetica,sans-serif;
	font-weight: 700;
	font-size: 14px;
	color: var(--Blue-600);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	line-height: 170%;
	margin-bottom: 0;
	padding-top: 0 !important;
}

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

.confirmation-group .row:last-of-type {
    margin-bottom: 8px;
}

.confirmation-group .confirmation-group .row:last-of-type {
    margin-bottom: 0px !important;
}

/*div.container .confirmation-group > div.row {
	display: block;
}*/

div.container .confirmation-group div[id$="accordionSec"] > div.row {
    display: block;
}

.confirmation-group .col-md-5,
.confirmation-group .col-md-7{
	font-size: 16px;
	max-width: 100%;
	padding-left: 25px;
	padding-right: 25px;
}

.confirmation-group .col-md-5{
	color: var(--Blue-700);
	padding-bottom: 4px;
}

.confirmation-group .col-md-7{
	color: var(--Blue-900);
	font-family: 'IBMPlexSans-SemiBold';
	padding-bottom: 16px;
}

.confirmation-group th{
	font-weight: 400;
	font-size: 14px;
	color: #436689;
	padding-bottom: 4px !important;
	padding-left: 0px;
}

.confirmation-group table.table{
	border-collapse: collapse;
	margin-bottom: 16px;
}

.confirmation-group td div{
	font-size: 16px;
}

.confirmation-group .confirmation-group .col-md-12{
	padding-left: 25px;
	padding-right: 25px;
}

.confirmation-group .container :is(div:nth-child(3), div:nth-child(4), div:nth-child(5),
div:nth-child(6), div:nth-child(7), div:nth-child(8), div:nth-child(9)) .col-md-12{
	border-top: 1px solid #D0D9E1;
	padding-top: 16px;
}

.confirmation-group .container :is(div:nth-child(3), div:nth-child(4), div:nth-child(5),
div:nth-child(6), div:nth-child(7), div:nth-child(8), div:nth-child(9)) .col-md-12 h4{
	display: block;
	margin-bottom: 0;
	padding-bottom: 16px;
}

.confirmation-group .container :is(div:nth-child(3), div:nth-child(4), div:nth-child(5),
div:nth-child(6), div:nth-child(7), div:nth-child(8), div:nth-child(9)) .col-md-12 .col-md-12,
.confirmation-group .container .container :is(div:nth-child(3), div:nth-child(4), div:nth-child(5),
div:nth-child(6), div:nth-child(7), div:nth-child(8), div:nth-child(9)) .col-md-12{
	border-top: 0px solid;
	padding-top: 0px;
}

.confirmation-group .container div:nth-child(4) .col-md-12 .col-md-12,
.confirmation-group .container .container div:nth-child(4) .col-md-12{
	border-top: 0px solid;
	padding-top: 0px;
}

.confirmation-group .confirmation-group .confirmation-group .col-md-12{
	padding-left: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
}

.confirmation-group a{
	font-size: 16px;
	max-width: 100%;
	line-height: 155%;
	color: var(--Turquoise-700);
	font-family: 'IBMPlexSans-SemiBold';
	word-break: break-all;
}

.confirmation-group a:hover{
	color: var(--Turquoise-700);
}

.confirmation-group thead th,
.confirmation-group .table th,
.confirmation-group .table td{
	border-bottom: 0px solid;
	border-top: 0px;
}

div.col-md-9 > div.row > div.container,
div.col-md-9 .row > div.container .row .confirmation-group .container .row .col-md-5,
div.col-md-9 .row > div.container .row .confirmation-group .container .row .col-md-7 {
	padding-right: 0px;
	padding-left: 0px;
}

.container.confirmation-group > div > div > div > h4{
	display: none;
}

div.col-md-9 > div.row > :is(h2,h3){
	padding-top: 40px;
	font-family: "IBMPlexSerif-SemiBold", Arial, Open Sans,"Tstar Bold",Arial,"Helvetica Neue",Helvetica,sans-serif !important;
	font-weight: 500;
	font-size: 24px;
	line-height: 36px;
	color: var(--Blue-800);
	text-transform: none;
	margin-top: 0px !important;
	margin-bottom: 8px !important;
}

div.col-md-9 > div.row{
	color: var(--Blue-800);
	padding: 0px 80px 16px;
	margin-right: 0px;
	margin-left: 0px;
}

.col-md-9 > div > div > .row.confirmation-group:last-of-type{
	margin-bottom: 8px;
}

.confirmation-group>.summary-group-title-row>.col-md-11 {
    max-width: 100%;
    padding-left: 25px;
    padding-right: 25px;
}

@media only screen and (max-width: 767px) and (min-width: 0px){
	
	div.col-md-9 > div.row {
		padding: 0px 10px 0px;
		margin-bottom: 0em;
	}
	
	div.col-md-9 > div.row:nth-child(3) {
		padding: 0px 10px 16px;
	}
	
	.col-md-9 > div > div > .row.confirmation-group:last-of-type{
		margin-bottom: 24px;
	}
	
}

/*body[page="confirmation"] button[class="btn btn-primary  page-navigation-btn disableOnFormSubmit"]*/
body[page="confirmation"] button.btn-primary.page-navigation-btn.disableOnFormSubmit{
	background-color: var(--Turquoise-300) !important;
	border: 1px solid var(--Turquoise-500) !important;
}

body[page="confirmation"] button.btn-primary.page-navigation-btn.disableOnFormSubmit:focus{
	border: 2px solid var(--Turquoise-700) !important;
	box-shadow: 0px 0px 8px rgba(13, 166, 172, 0.64) !important;
}

body[page="confirmation"] button.btn-primary.page-navigation-btn.disableOnFormSubmit:hover{
	box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.16) !important;
	border: 1px solid var(--Blue-900) !important;
}

/* Move to navigation buttons */
.row .mt-sm-3{
	padding: 0px !important;
	margin-left: 0;
	margin-right: 0;
	margin-top: 0px !important;
}

/*div.col-md-9 > div.row{
	padding-left: 65px;
	padding-right: 65px;
	margin: 16px 0px;
	color: var(--Blue-800);
}*/




/* Ignore these for now */
/*.container.confirmation-group > div > div.col-md-12{
	padding-left: 0px;
}*/

/*.row.confirmation-group {
	border: 1px solid var(--Blue-200);
	border-radius: 8px;
	margin: 16px 65px 16px 65px;
}*/

/*.confirmation-group .page-title-row {
    padding: 16px 40px;
	border-bottom: 1px solid var(--Blue-200);
    background-color: var(--Gray-25);
	color: #FFF;
	border-radius: 8px;
}*/

/*.container.confirmation-group > div > div.col-md-12{
	padding-left: 0px;
}*/



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

/* Temp settings */

.continue-later-reference{
	display: none;
}

div.col-md-12.text-center{
	display: none;
}


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

/**** 10 Miscellaneous tags ****/

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

/* 10.1 Modal tag */


.tag-modal a.help-btn{
	top: 0px !important;
}

.tag-modal a.btn.btn-link.material-icons {
    font-size: 1px;
    width: 1px;
    height: 1px;
}

.tag-modal .modal.show {
    padding-right: 0 !important;
}

.tag-modal .modal-body{
	padding: 24px 48px 48px;
}

.tag-modal .modal-dialog{
	min-width: 700px;
}

.tag-modal br{
	display: block;
	height: 12px;
	content: "";
}

.tag-modal br:first-of-type{
	display: none;
}

.tag-modal h3{
    padding-bottom: 20px;
}

.tag-modal h3:after {
    content: "";
    position: relative;
    top: 20px;
    left: -48px;
    display: block;
    width: calc(100% + 96px);
    height: 1px;
    background-color: var(--Blue-200);
}

/* Close button modal window (See if it can be translated to all help texts)*/

.tag-modal button.close,
.tag-modal button.close:hover,
.tag-modal button.close:not(:disabled):not(.disabled):focus,
.tag-modal button.close:not(:disabled):not(.disabled):hover{
	color: transparent;
	opacity: 1;
}

.tag-modal button.close:after{
	background-image: url("img/Icons.svg");
	background-color: transparent;
	background-position: -124px -275px;
	display: inline-block;
	position: relative;
	float: left;
	left: 14px;
	top: 2px;
	width: 24px; 
	height: 24px;
	content:"";
}

.tag-modal button.close:hover:after,
.tag-modal button.close:focus:after{
	/*background-position: -124px -274px;
	left: 12px;
	top: 4px;*/
	background-color: var(--Blue-75);
    border-radius: 22px;
    outline: 0px auto -webkit-focus-ring-color !important;
}

.tag-modal button:focus{
	outline: 0px auto -webkit-focus-ring-color !important;
}

.tag-modal .btn.btn-link.material-icons:after{
	background-image: url("img/Icons.svg");	
    background-position: -1082px -160px;
    margin-right: 0px;
    top: -16px;
    left: 19px;
    float: none;
}

.tag-modal .btn.btn-link.material-icons:hover:after{
	background-position: -1130px -160px;
}

.tag-modal .btn-link.material-icons.help-btn:hover{
	color: transparent;
}

@media only screen and (max-width: 767px) and (min-width: 0px){
	.tag-modal .modal-dialog{
		min-width: 80%;
	}
	
	.tag-modal h3{
		font-size: 21px;
	}
	
	.tag-modal .modal-body{
		padding: 24px 16px 40px;
	}
	
	.tag-modal h3:after{
		width: calc(100% + 32px);
		left: -16px;
	}
	
}

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

/*** 10.2 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: 22px;
}

: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: 22px;
	padding-left: 22px;
}

: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: 22px;
}

: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: 22px;
}


@media only screen and (max-width: 767px) and (min-width: 0px){
	
	: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{
		width: 100%;
		padding-right: 0px !important;
		padding-left: 0 !important;
	}
	
	: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) .form-group {
		margin: 0 -10px;
	}
	
}

: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 > div > div > div.invalid-feedback{
	padding: 4px 8px;
	margin-bottom: 16px;
}

: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 > div > div > div.invalid-feedback:before{
    left: 8px;
}

: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 input.form-control.is-invalid~.invalid-feedback:before,
: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)
.select2~.invalid-feedback:before{
    left: -8px !important;
}

: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 input.form-control.help-at-input.is-invalid~.invalid-feedback:before{
	left: 8px !important;
}

/*** 10.3 No-divider for question groups without header	***/

.row.question-group.show-layout.tag-no-divider {
    border-top: none;
    padding-top: 0;
}


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

/*** 10.4 Anonymous dialogue ***/

.tag-checkbox-button {
    padding-bottom: 0;
}

.tag-checkbox-button .form-check-label {
    color: var(--Blue-900);
    font-family: inherit;
    border-radius: 6px;
    letter-spacing: 0.02em;
    padding: 10px 24px;
    box-shadow: 0px 1px 4px rgba(20, 64, 107, 0.16);
    font-weight: 600;
    font-size: 18px;
    hyphens: auto;
    line-height: 155%;
    display: inline-block;
    cursor: pointer;
    background-color: var(--Turquoise-300) !important;
    border: 1px solid var(--Turquoise-500) !important;
    margin-top: 24px;
}

/* .tag-checkbox-button .form-check-input {
  display: none !important;
} */

.tag-checkbox-button .form-check-label::before,
.tag-checkbox-button .form-check-label::after {
  display: none;
}

.tag-checkbox-button .form-check-label:hover {
	box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.16) !important;
	border: 1px solid var(--Blue-900) !important;
}

.tag-checkbox-button .form-check-input:checked + .form-check-label {
  background: transparent !important;
  color: #1f42aa !important;
  border-color: var(--pkt-color-brand-yellow-1000) !important;
}

.tag-checkbox-button .form-check input[type="checkbox"]:focus + label {
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25) !important;
  /* background: #2a2859 !important;
  border: 2px solid #2a2859;
  color: #fff !important; */
}

/* Custom styling for location and time as floaters */

body.tag-submit-page div#respondentWrapper {
    margin-top: 100px;
}

.tag-floaters {
    height: 0;
    top: -100px;
    position: relative;
    margin-left: 80px;
    margin-right: 80px;
}

:is(.tag-place-icon,.tag-date-icon) {
    width: calc(100%);
    padding: 12px 16px 12px 56px;
    background-color: var(--White);
    border-radius: 12px;
    border: 1px solid var(--Blue-200);
}

.tag-place-icon {
    margin-left: auto;
}

:is(.tag-place-icon,.tag-date-icon):before {
    background-image: url("img/Icons.svg");
    background-position: -1073px -309px;
    display: inline;
    position: absolute;
    left: 45px;
    top: 16px;
    /* float: right; */
    width: 48px;
    height: 48px;
    content: "";
    /*border-radius: 36px;*/
    border: 1px solid var(--Turquoise-400);
    background-color: var(--Turquoise-50);
}

/* Alternativ stil */
:is(.tag-place-icon,.tag-date-icon):before {
	border: 0px solid var(--Blue-800);
    background-color: transparent;
}

.tag-date-icon:before {
	background-position: -402px -309px;
	left: 0px;
}

:is(.tag-place-icon,.tag-date-icon) .question-label {
    color: var(--Blue-900);
    font-size: 16px;
    padding-left: 0;
    margin-bottom: 0px;
}

:is(.tag-place-icon,.tag-date-icon) input {
    color: var(--Blue-600);
    background-color: transparent !important;
    border-color: transparent !important;
	padding: 0;
	height: auto;
}

@media only screen and (max-width: 991px){
	
	.tag-floaters {
		margin-left: 0px;
		margin-right: 0px;
	}
	
	:is(.tag-place-icon,.tag-date-icon) {
		width: calc(100% + 24px);
	}
	
	.tag-place-icon:before {
		left: 30px;
	}
}

@media only screen and (max-width: 767px){
	
	body.tag-submit-page div#respondentWrapper {
		margin-top: 188px;
	}
	.tag-floaters {
		top: -164px;
	}
	
	:is(.tag-place-icon,.tag-date-icon) {
		width: calc(100% + 24px);
		padding: 10px 10px 10px 42px;
		margin-bottom: 6px !important;
	}
	
	:is(.tag-place-icon,.tag-date-icon):before{
		width: 24px;
		height: 24px;
	}
	
	.tag-date-icon:before {
		background-position: -409px -276px;
		left: 0px;
	}
	
	.tag-place-icon:before {
		background-position: -1080px -280px;
		left: 0px;
	}
}


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

/*** 10.5 Read-only duplicatable groups ***/

.row.question-group.show-layout.tag-dup-summary {
    border: 0px solid var(--Blue-200) !important;
    margin: 0px -15px 16px !important;
    border-radius: 4px;
    width: calc(100% + 30px) !important;
}

.tag-dup-summary .group-title-row > div.col-md-12 {
    border: 1px 0 0 0 solid var(--Blue-200);
}

.tag-dup-summary .form-group {
    padding-bottom: 0;
    border: 1px solid var(--Blue-200);
    border-top: 0;
}

.tag-dup-summary .form-group:last-child,
.tag-dup-summary .form-group:last-child input {
    border-radius: 0 0 4px 4px;
}

.tag-dup-summary .form-group:first-child, .tag-dup-summary .form-group:first-child input {
    border-radius: 4px 4px 0 0;
}

.tag-dup-summary .form-group:first-child {
    border-top: 1px solid var(--Blue-200);
}

.tag-dup-summary .form-group .label-column {
    height: 0;
}

.tag-dup-summary label.question-label {
    font-size: 16px;
    top: 9px;
    position: relative;
    font-weight: 500;
    font-family: "IBM Plex Sans";
    padding: 0 0 0 15px;
    z-index: 1;
}

.tag-dup-summary .form-control[readonly] {
    font-weight: 600;
    color: var(--Blue-800);
    text-align: right;
    font-family: 'IBM Plex Sans Weird Bold';
    border: 0px;
    border-radius: 0;
    background-color: var(--Gray-25);
}

/*.tag-dup-summary .form-control[readonly]:not([disabled]):not(.disabled):active, .form-control[readonly]:focus {
    box-shadow: none;
    background-color: var(--Gray-25);
    border: 0;
}*/

/* Add and remove buttons */

.tag-dup-summary button.addGroup {
    display: none !important;
}

.tag-dup-summary:first-child button.addGroup {
    display: inline-block !important;
}

/* Read-only rows */

.tag-summary div.form-group {
    padding-bottom: 0;
    /* border-radius: 6px; */
    border-bottom: 1px solid var(--Blue-300);
}

.tag-summary div.form-group:last-of-type {
    border-bottom: 0px solid !important;
}

.tag-summary .label-column {
    height: 0;
}

.tag-summary {
    border: 1px solid #B9C7D3;
    border-radius: 6px;
    margin-bottom: 16px;
}

.tag-summary label.question-label {
    font-size: 16px;
    top: 9px;
    position: relative;
    font-weight: 400;
    font-family: "IBM Plex Sans";
    padding: 0 0 0 45px;
    z-index: 1;
}

.tag-summary .label-column:before {
    background-image: url("img/Icons.svg");
    background-position: -401px -308px;
    display: inline;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 48px;
    height: 48px;
    transform: scale(0.8);
    content: "";
}

.tag-category-row .label-column:before {
    background-position: -208.5px -724px;
    transform: scale(0.85);
}

.tag-summary .form-control[readonly] {
    font-weight: 600;
    color: var(--Blue-800);
    text-align: right;
    font-family: 'IBM Plex Sans','IBM Plex Sans Weird Bold', Arial;
    border: 0px;
    border-radius: 6px;
    background-color: var(--Gray-25);
}

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



/*** 11 Map element	***/

/* Midlertidig fjerning */
.sidebar.leaflet-touch{
	display: none;
}

.leaflet-container{
	width: 100% !important;
}

.d-none-zero-height {
    padding-bottom: 0;
}

.leaflet-container .sidebar-tabs li:first-child .sideclick,
.leaflet-container .sidebar-tabs li:nth-child(2) .sideclick{
	display: none;
}

.sidebar-tabs > li, .sidebar-tabs > ul > li:nth-child(3){
	background-color: #FFFFFF;
	position: relative;
	top: -80px;
}

.sidebar-tabs > li, .sidebar-tabs > ul > li:nth-child(3).active{
	background-color: #0074d9;
}

.auto-search.loupe.sideclick{
	width: 250px;
}

.auto-search.sideclick{
	width: 170px;
}

.sidebar.collapsed{
	width: 40px !important;
}

.sidebar-right{
	width: 320px !important;
}

.sidebar-content{
	overflow-y: hidden;
}

.sidebar-right .sidebar-header{
	background-color: var(--Blue-800);
}

.sidebar-tabs > li.active, .sidebar-tabs > ul > li.active{
	background-color: var(--Blue-800) !important;
}

td.sideclick{
	color: var(--Blue-700) !important;
}

button.btn.btn-default.sideclick{
	font-family: 'IBMPlexSans-Regular';
	color: var(--Blue-900);
	font-weight: 600;
	background-color: var(--Blue-200);
	border: 1px solid var(--Blue-400);
	border-radius: 6px;
	padding: 8px 18px;
	box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.16);
	line-height: 155%;
	letter-spacing: 0.02em;
	margin-top: 8px;
}


button.btn.btn-default.sideclick:focus{
	border: 2px solid var(--Blue-400);
	box-shadow: 0px 0px 8px rgba(114, 140, 166, 0.64);
	margin-top: 7px;
}

button.btn.btn-default.sideclick:hover{
	border: 1px solid var(--Blue-900);
	margin-top: 8px;
}

.sidebar-pane.active.sideclick hr:nth-child(4){
	display: none;
}

.row.sideclick div:first-child.col-sm-6.sideclick{
	display: none;
}

@media only screen and (min-width: 1200px){
	
	.sidebar-pane{
		min-width: 280px; 
	}
	
	.sidebar{
		min-width: 320px;
	}
	
	.sidebar.collapsed{
		min-width: 40px !important;
	}
	
}

@media only screen and (max-width: 767px) and (min-width: 0px){
	
	.sidebar-pane{
		min-width: 220px; 
	}
	
	.sidebar{
		min-width: 260px;
	}
	
	.sidebar-right{
		width: 260px !important;
	}
	
	.sidebar.collapsed{
		min-width: 40px !important;
	}
}


@media only screen and (min-width: 576px){
	
	.col-sm-6{
		flex: 0 0 100%;
		max-width: 100%;
	}
	
}

/* Zoom buttons */

.leaflet-touch .leaflet-control-layers, .leaflet-touch .leaflet-bar {
    border: 1px solid var(--Blue-200) !important;
    border-radius: 6px;
	width: 32px;
	background-color: var(--White) !important;
}

.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out {
    -webkit-appearance: none;
    appearance: none;
    background: url("img/Icons.svg");
    background-position: -1369px -432px;
    content: "";
    color: transparent;
	border-radius: 6px !important;
}

.leaflet-touch .leaflet-control-zoom-in:after {
    content: "";
    width: 16px;
    background-color: var(--Blue-200);
    height: 1px;
    display: block;
    position: absolute;
    left: 7px;
}

.leaflet-touch .leaflet-control-zoom:hover .leaflet-control-zoom-in:after{
	background-color: var(--Turquoise-200) !important;
}

.leaflet-touch .leaflet-control-zoom-out {
    background-position: -1462px -270px;
}

.leaflet-touch .leaflet-control-layers:hover, .leaflet-touch .leaflet-bar:hover {
    background-color: var(--Turquoise-50) !important;
    border: 1px solid var(--Turquoise-200) !important;
    border-radius: 6px !important;
}

.leaflet-bar a:hover {
    background-color: var(--Turquoise-50) !important;
    color: transparent !important;
}

.leaflet-bar a, .leaflet-bar a:hover {
    border-bottom: none !important;
}


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

/*** 0 Graveyard ***/


/*.datepicker td, .datepicker th{
	width: 50px;
	height: 50px;
}*/




/*.datepicker table tr td.active,
.datepicker table tr td span.active{
	color: var(--Blue-800);
	border-radius: 0px;
}*/


/* Backup code */

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

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

/*$blue : #0091d2;*/
/**** Material icons ****/
/*@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialicons/v36/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
}*/


/* Demo tag Risk area */

.tag-risk-r5 > div.col-md-12:before{
	background-image: url("img/Sjark.svg");
	background-color: transparent;
	background-position: 0px 0px;
	background-size: 100%;
	display: inline-block;
	margin-right: -21px;
	position: relative;
	/* left: -38px; */
	/* top: 40px; */
	float: left;
	width: 57.5px; 
	height: 45px;
	content:"";
}

.tag-risk-r5 span[class="plaintext"]{
    position: relative;
    left: 40px;
    top: 10px;
}

.form-group.tag-risk-r5{
	padding-bottom: 22px;
}


/* Test CSW-5262 design tags in confirmation page */
body[page="confirmation"] .row.tag-hide {display: none;}