/************************* NIF Compose design *****************************/

/*** 	Created: Spring of 2022											***/
/*** 	Stylist: Alexander Edin Varegg & Angelica Maza Larsen			***/
/*** 	Purpose: Bootstrap services in the Compose 8 platform 			***/
/*** 	Last edited: 2023.03.30 										***/
/*** 	Last version: 0.7		 										***/

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

/************************* 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	  										***/
/*** 		6.2 Check boxes												***/
/*** 		6.3 Button tags												***/
/*** 			6.3.1 2, 3 and 4 horizontal buttons						***/
/*** 			6.3.2 Vertical buttons (grad-tag)						***/
/***		6.4 Drop down styling										***/
/*** 	7 Confirmation page		 										***/
/*** 		7.1 Removing unneccessary spacing and lines					***/
/*** 		7.2 Styling the confirmation page							***/
/*** 	8 Tag library 													***/
/*** 		8.1 Message tags (nyhetsmeldinger)							***/
/*** 		8.2 7.2 Grid tags											***/
/*** 		8.3 Unit tags												***/
/*** 		8.4 Sectioning groups in groups (tag-skillelinje)			***/
/*** 	8 File upload and duplicatable groups							***/
/***  	9 Dropdown styling                            					***/
/***	10 Confirmation page											***/
/*** 	11 Miscellaneous tags											***/
/*** 	12 Map element													***/
/*** 	0 Graveyard	 													***/

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

/*** 1.1 Color palette ***/

:root {
	/* Primary colors */
	--v-primary-base: #000335;			--v-primary-lighten3: #656785;
	--v-primary-variant-base: #001A51;	/*--Dark-Turquoise: #0D8387;*/
	
	/* Secondary colors*/
	--v-inverted-base: #FFFFFF;			--v-secondary-variant-base: #003E7E;
	--v-secondary-base: #003E7E;		--Even-Lighter-Turquoise: #D0EFF0;
	--Bright-Turquoise: #EBFEFF;		--Grey: #F0F3F5;
	--White: #FFFFFF;					--Black: #1C1B1B;
	--Grey: #323232;					--Granite: #666666;
	--Light-Grey: #EDEDED;				--Light-Granite: #B4BCC4;
	--Bright-Turquoise: #E5EBEC;		--Lighter-Granite: #DBDCDD;
	
	/* State colors */
	--v-error-base: #E32D22;			--Green: #7CBD69;
	--v-accent-base: #FD3932;
	--Light-Red: #FAC7C7;				--Light-Green: #D8EBD2;
	--Mid-Yellow: #FFDA47;
	--Light-Yellow: #FFF0B1;
	
	/* Gradient colors */
	--v-background-base: #F4F2F2;
}

/* Fonts */

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

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

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

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

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

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

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

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


html, body {
  /* font-size: 62.5%; */
}

/**** Body ****/

body {
	font-family: "Inter-Regular", -apple-system, BlinkMacSystemFont, 'Maven Pro', '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: 1.6rem;
	font-size: 16px;
	font-weight: 400;
	color: var(--v-primary-base);
	background-color: var(--v-background-base);
}

@media only screen and (max-width: 991px) and (min-width: 768px){
	
	div.col-md-9{
		max-width: 100%;
		flex: 0 0 100%;
	}
	
}

header {
	height: 90px;
	background-color: var(--v-primary-base);
	/*background-color: #FFF;*/
	margin-bottom: 24px;
}

header .container-fluid,
header .container-fluid .row,
header .container-fluid .row .col-sm-12,
header #invalidReferenceNumberPageHeader * {
  height: inherit;
}

header .container-fluid .row .col-sm-12 {
	background: url("img/logo-hvit.svg") no-repeat top left;
	/*background: url("img/OIK-logo.jpg") no-repeat top left;*/
	height: 48px;
	margin: 20px auto 0 200px;
	max-width: 316px;
	background-size: contain;
}

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

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

/**** Skin default colors ****/

.progress-tracker li,
nav.nav-bar li.page.active a,
nav.nav-bar li.page:hover a,
nav.navbar .navbar-nav li.active>a.nav-link,
nav.navbar .navbar-nav li:hover a.nav-link {
    color: #004b86;
    font-family: 'Inter-SemiBold';
}

nav.nav-bar li.page:hover,
.progress-tracker li.active {
  border-bottom: 1px solid #004b86;
}

nav.nav-bar li a,
nav.navbar .navbar-nav li a.nav-link,
.validation-page-alert {
  color: #323233;
}

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

nav.nav-bar li.page:hover a[href="#"]{
	font-family: 'Inter-Regular';
}

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

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

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

.top-navigation ul.navbar-nav {
  width: 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;*/
  text-align: center;
  padding: 0.3em;
  padding-right: 1.5em;
  border-bottom: 1px solid #DBDCDD;
}

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

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

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

/**** Left navigation ****/

nav.nav-bar {
  border: 1px solid #DBDCDD;
}

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

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

nav.nav-bar li.page {
  border-bottom: 1px solid transparent;
}

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

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

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

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

.auth-info .auth-info-badge.IDPORTEN {
  background-image: url("img/logos.png");
  background-position: 0 -597px;
  width: 80px;
}

.auth-info .auth-info-badge.VIPPS {
  background-image: url("img/vipps_logo.png");
  background-position: 0 16px;
  height: 16px;
  width: 64px;
  margin-top: 3px;
  margin-right: 2px;
}

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

/**** Page titles ****/

/*** 	3 Body 															***/
/*** 		3.1 Form container											***/


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

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

.page-title {
	display: flex;
	justify-content: space-between;
}

.workflow-title-top {
	display: none;
}

.workflow-title {
	text-align: center;
}

.group-title h4.my-sm-2{
	line-height: 1.6875rem;
    letter-spacing: normal!important;
    font-family: Inter,"system-ui"!important;
	font-size: 1.375rem!important;
    font-weight: 600;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.page-title h2 {
    margin-bottom: 1rem;
}

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

/*** 		3.3 Plain text elements 									***/
/*** 		3.4 Navigation buttons 										***/
/*** 		3.5 Cancel button 											***/
/*** 		3.6 Skip link button 										***/

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

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

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

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

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

div.jumbotron, .question-group.show-layout {
  /*border:1px solid $light-gray;*/
	background-color: #FFF;
	box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%);
	border-radius: 4px;
	margin-bottom: 30px;
}

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

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

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

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

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

/**** Navigation ****/

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

/**** Buttons ****/

.btn {
  font-size: 1.2rem;
  font-size: 12px;
}

.btn.btn-link.material-icons {
	padding: 0;
	font-size: 22px;
	color: var(--v-primary-base);
}

/*.popover {
	background-color: var(--v-primary-base);
}

.popover-body {
    color: #FFF;
}
*/

.btn.btn-link.material-icons:active,
.btn.btn-link.material-icons:focus,
.btn.btn-link.material-icons.help-btn:hover {
  text-decoration: none;
}

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

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

.btn.btn-primary, .btn.btn-outline-primary{
	padding: 0 24px!important;
	border-radius: 30px;
	font-size: 1rem;
	font-family: "Inter-Medium";
	min-width: 78px;
	height: 44px;
	border: 2px solid var(--v-primary-variant-base);
}
	

.btn.btn-primary {
	background-color: var(--v-primary-variant-base);
}

.btn.btn-primary:hover,
.btn.btn-primary:focus{
	background-color: transparent;
    color: var(--v-primary-variant-base);
}


.btn.btn-outline-primary {
	background-color: transparent;
	color: var(--v-primary-variant-base);
}

.btn.btn-outline-primary:hover,
.btn.btn-outline-primary:focus{
	background-color: var(--v-primary-variant-base);
	color: #FFF;
}


.btn.btn-primary:not([disabled]):not(.disabled):active,
.btn.btn-outline-primary:not([disabled]):not(.disabled):active {
  background-color: #fff;
  color: #2B7BB9;
  text-decoration: none;
  border-color: #2B7BB9;
}

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

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

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

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

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

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

/* add google matherial font to display icons */

.btn.print-pdf-btn:after,
.front-page .language-btn.language-selected:after,
.continue-later-small-btn:after,
.page-navigation-btn[name="showPrev"]:before,
.page-navigation-btn[name="showNext"]:after,
.page-navigation-btn[name="validateForm"]:before,
.btn.removeGroup:before,
.btn.addGroup:before {
  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";
}

.continue-later-small-btn{
	display: none;
}

.modal-footer button.btn.btn-secondary{
	color: var(--v-secondary-variant-base);
    border: none;
    background-color: transparent;
    font-size: 1rem;
    border-radius: 28px;
    text-decoration: underline;
    min-width: 78px;
    height: 44px;
    padding: 0 20px !important;
    font-family: 'Inter-Medium';
}

.modal-footer button.btn.btn-secondary:hover{
	background-color: rgba(0, 26, 81, 0.2);
	color: var(--v-secondary-variant-base) !important;
}


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

.btn.VippsLogin_NO {
  background-image: url("img/logos.png");
  background-position: 0px -296px;
  padding-left: 198px;
  padding-top: 40px;
}

.btn.VippsLogin_EN {
  background-image: url("img/logos.png");
  background-position: 0px -356px;
  padding-left: 198px;
  padding-top: 40px;
}

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

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



label.question-label {
  padding-top: .375rem;
}

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

.mandatory label.question-label::after,
.mandatory.tag-no-label label.form-check-label::after,
.page_mandatory label.question-label::after,
.page_mandatory.tag-no-label label.form-check-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>.form-control {
  font-size: 1.5rem;
  font-size: 15px;
}

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

small.hint {
  opacity: 0.7;
}

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

small.hint_BOTTOM {
  display: block;
}

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

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

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

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

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

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

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

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

/**** Validation ****/

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

.badge-danger {
  background-color: var(--v-error-base);
}

.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: var(--v-error-base);
}

.custom-file.is-invalid~.invalid-feedback,
.form-check.is-invalid~.invalid-feedback,
.form-control.is-invalid~.invalid-feedback {
  display: block;
  color: var(--v-error-base);
}

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

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

.validation-page-alert.alert-danger {
  border-color: var(--v-error-base);
  color: var(--v-error-base);
}

/**** ****/

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

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

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

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

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

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

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

/**** Popover ****/

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

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

/**** Footer ****/

footer {
  text-align: center;
  padding: 30px;
}

footer a {
  color: #2B7BB9;
}

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

/* Table customization */

tbody.groupListContainer tr td .form-group .col-md-12{
	padding: 0;
}

.tag-wide-table{
	width: 114%;
}

nav.nav-bar{
	border: none;
  padding-left: 10px;
}

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

/*** Texts ***/



/* Start page - Re-ordering of start button */

.front-page form[name=enterWorkFlow]{
	display: grid;
	grid-template-columns: 1fr;
	justify-items: start;
}


.front-page p:first-of-type{
	order: 2;
}

.front-page .continue-later-reference{
	order: 3;
}

.front-page p:nth-of-type(2){
	order: 1;
	margin-right: auto;
	margin-left: auto;
}

.front-page p:nth-of-type(2) button[type="submit"]{
	height: 56px;
    /* font-weight: bold; */
    font-size: 18px;
    line-height: 1.2;
    padding: 0 25px !important;
    text-decoration: none;
    margin-bottom: 16px;
}

.front-page hr.my-4{
	border-color: var(--v-inverted-base);
	margin-top: 8px !important;
}

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

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

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

/*** 6.1 Radio button ***/

.form-check.form-check-inline .form-check-input {
    margin-top: 0;
}

input[type="radio"] {
	/* Add if not using autoprefixer */
	-webkit-appearance: none;
	/* Remove most all native input styles */
	appearance: none;
	/* For iOS < 15 */
	background-color: var(--form-background);
	/* Not removed via appearance */
	margin: 0;
	font: inherit;
	color: var(--v-primary-base);
	width: 20px;
	height: 20px;
	border: 0.15em solid currentColor;
	border-radius: 50%;
	transform: translateY(-0.075em);
	display: grid;
	place-content: center;
}

input[type="radio"]:hover{
	cursor: pointer;
}

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

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


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

/*** 6.2 Check boxes ***/

.form-check{
    padding-left: 1.8rem;
	line-height: 36px;
}

.form-check .form-check-input{
    margin-left: -1.7em;
	margin-top: 8px;
}

input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    margin: 20;
    font: inherit;
    color: var(--v-primary-base);
    width: 20px;
    height: 20px;
    border: 0.15em solid currentColor;
    border-radius: 0.15em;
    transform: translateY(-0.075em);
    display: grid;
    place-content: center;
}

input[type="checkbox"]::before {
	content: "";
	width: 0.9em;
	height: 0.8em;
	clip-path: polygon(4% 49%, 13% 37%, 39% 67%, 85% 12%, 96% 21%, 39% 89%);
	transform: scale(0);
	transform-origin: bottom left;
	transition: 120ms transform ease-in-out;
	box-shadow: inset 1em 1em var(--form-control-color);
	/* Windows High Contrast Mode */
	background-color: white;
}

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

input[type="checkbox"]:checked{
	background-color: var(--v-primary-base);
}

input[type="checkbox"]:hover{
    cursor: pointer;
    /*box-shadow: 0px 0px 0px 8px rgb(225 227 228);*/
}

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

.form-check-input.is-invalid~.form-check-label {
    margin-left: 8px;
}

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

/*** 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 ***/

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: #e4e4e9 !important;
  color: black !important;
  /*border: 1px solid #B4BCC4;*/
}

.select2-container--default .select2-selection--single:hover {
  background-color: #fff;
  border-radius: 4px;
  /*border: 1px solid #B4BCC4;*/
}


.select2-container--default .select2-selection--single:focus {
  background-color: #fff;
  border-color: #B4BCC4;
  box-shadow: 0 0 0 0.05rem #B4BCC4;
}


.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid #aaa;
  border-radius: .25rem;
}


.select2-container--default .select2-results__option[aria-selected=true] {
  background-color: #B4BCC4;
  color: black;
  border: 0.5px solid #B4BCC4;
}


.select2-container--default .select2-results__option[aria-selected=true]:hover {
  background-color: #B4BCC4;
  color: black;
  border: 0.5px solid #B4BCC4;
}

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


.select2-container--default .select2-selection--single {
  height: 38px !important;
  border: 1px solid #ced4da !important; 
  
}

.select2-selection__rendered { /*kanskje endre her*/
  line-height: 1.5;
  padding: .375rem .75rem;
}


.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 38px !important;
  position: absolute;
  top: 1px;
  right: 1px;
  width: 20px;
}

.form-control.is-invalid~.select2-container--default .select2-selection--single {
  border: 1px solid #dc3545 !important;
}

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

/**** 7 Confirmation page ****/

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

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

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

/**** 7.1 Removing unneccessary spacing and lines ****/

/* Removing group titles */
.page-title-row~div.row > div > div > div:first-child {
    display: none;
}

.confirmation-group h4{
	margin: 0 !important;
}

.container.confirmation-group{
	border: 0px solid var(--v-inverted-base);
	margin-bottom: 0px;
	padding-right: 0;
	padding-left: 0;
	background-color: #FFF;
}

.confirmation-group .confirmation-group .row,
.confirmation-group .confirmation-group .confirmation-group .row{
	margin-left: 0;
	margin-right: 0;
}

.confirmation-group .col-md-12, .confirmation-group .confirmation-group .col-md-12,
.confirmation-group .confirmation-group .col-md-5,
.col-sm-12 .confirmation-group .container .confirmation-group{
	padding-left: 0;
	padding-right: 0;
}

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

/*** Page-title-row in confirmation page ***/

/*.needs-validation .page-title-row{
	display: none !important;
}*/

.confirmation-group .page-title-row {
    background-color: #F5F6F7;
    padding: 16px 39px;
    border-top: 1px solid #EBEDF0;
    font-size: 16px;
}

.confirmation-group .page-title-row h3 {
    font-size: 1.5rem !important;
}

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

/**** 7.2 Styling the confirmation page ****/

.page-title-row~div.row > div > div.container.confirmation-group > div:first-child {
    display: block !important;
}

.col-sm-12 > div.row:nth-child(4) .container{
	border: 1px solid #EBEDF0;
	border-radius: 4px;
	margin-bottom: 24px;
}

.col-sm-12 > div.row:nth-child(4) .container .container{
	border: 0px solid #EBEDF0;
	margin-bottom: 0;
}

/* Spacing around individual lines*/
.container.confirmation-group > div > div > div.container.confirmation-group > div > div.col-md-5,
.container.confirmation-group > div > div > div.container.confirmation-group > div > div.col-md-7,
.confirmation-group .confirmation-group .col-md-5,
.confirmation-group .confirmation-group .col-md-7{
	/*padding-left: 0px;*/
	padding-left: 39px !important;
	padding-bottom: 2px;
	padding-top: 2px;
	/*font-family: 'HyundaiSansHeadMedium';*/
}

.confirmation-group .col-md-5{
	color: var(--Granite);
}

.confirmation-group .col-md-7{
	color: var(--Blue);
}

.col-sm-12 .col-md-12 .confirmation-group{
	padding-bottom: 16px;
}

.confirmation-group h4{
	margin-bottom: 16px !important;
}

.col-sm-12 .col-md-12 .col-md-12 .confirmation-group{
	padding-bottom: 0;
}

/* Styles the group headers */

.confirmation-group .confirmation-group div.row:first-child h4{
	background-color: #F5F6F7;
	padding: 16px 39px;
	border-top: 1px solid #EBEDF0;
	display: none;
}

.confirmation-group .confirmation-group .confirmation-group div.row:first-child{
	background-color: transparent;
}

/* Styles tables in the confirmation group */

.confirmation-group table {
    margin: 2px 39px;
    width: calc(100% - 78px);
}
.confirmation-group .table thead th, .confirmation-group .table tbody td {
    border: none;
    padding-left: 0;
}

.confirmation-group .table tbody td {
    padding-bottom: 4px;
}


/* Links */
.confirmation-group a {
    color: #001951;
    text-decoration: underline;
    font-size: 1.15rem;
}

.confirmation-group a:hover {
    text-decoration: none;
    color: #1773b0;
}

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

/**** 8 Tag library ****/

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

/**** 8.1 Message tags (nyhetsmeldinger) ****/

.tag-useful-info, .tag-important-info, .tag-critical-info{
	box-shadow: 0 7px 29px rgb(0 0 0 / 15%);
	border-radius: 20px;
	padding: 16px 16px 18px !important;
	margin-bottom: 16px !important;
	/* width: 70%; */
}

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

:is(.tag-useful-info, .tag-important-info, .tag-critical-info) h3{
	text-transform: none;
	/* font-family: "IBMPlexSans-Medium"; */
	font-size: 20px;
	line-height: 160%;
	padding-bottom: 32px;
	color: var(--Blue);
	font-weight: normal;
	letter-spacing: 0;
}

.tag-useful-info{
	background-color: var(--Bright-Turquoise);
	border: 1px solid var(--Even-Lighter-Turquoise);
}

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

.tag-useful-info h3:after{border-bottom: 1px solid #D0EFF0;}

.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(--Light-Yellow);
	border: 1px solid var(--Mid-Yellow);
}

.tag-critical-info{
	background-color: var(--Light-Red);
	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 24px 24px !important;
	}
}


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

/**** 8.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: 10px;
}

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

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

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

@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% !important;
		padding-right: 0px !important;
		padding-left: 0 !important;
		padding-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) .form-group {
		margin: 0 -10px;
	}
	
}

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

/**** 8.3 Unit tags ****/

.tag-unit small.hint_RIGHT {
	display: flex;
	position: relative;
	float: right;
	font-size: 16px;
	top: 1.5px;
	left: -16px;
	text-align: right;
	flex-direction: column;
	background-color: transparent;
	color: #436689;
	opacity: 1;
}

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

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

.tag-unit-5 .form-control{padding-right: 64px !important;}
.tag-unit-8 .form-control{padding-right: 77px !important;}
.tag-unit-10 .form-control{padding-right: 92px !important;}
.tag-unit-12 .form-control{padding-right: 109px !important;}


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

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

/**** 8.4 Sectioning groups in groups (tag-skillelinje) ****/

.question-group-content>.col>.question-group.tag-skillelinje{
	border: none;
    border-radius: 0;
    box-shadow: none;
    padding-left: 0;
    padding-right: 0;
}

.question-group-content>.col>.question-group.tag-skillelinje:before {
    content: "";
    position: absolute;
    /* top: -8px; */
    display: block;
    width: calc(100% + 32px);
    margin-left: -16px;
    margin-top: -16px;
    height: 2px;
    background-color: #DBDCDD;
}


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

/**** File upload and duplicatable groups and tables ****/


/*** 8.1 File upload and multifile table ***/


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

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

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

.custom-file{
	height: 48px;
}

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

div.custom-file[uploaded="yes"] .custom-file-label{
	border: 1px solid #dedede;
	background: rgba(240, 243, 245, 0.48);
}

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

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

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

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

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

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

.tag-dup-tab.groupListContainer{
	display: block;
}

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

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

.table{
	margin-bottom: 0px;
}

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

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

:is(.tag-dup-tab td, td) > div > div > div.col-md-12{
	padding: 0 15px 0 15px !important;
}



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

/*** 7.3 Multifile table ***/

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

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

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

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

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

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

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

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

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

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

@media only screen and (max-width: 767px) and (min-width: 576px){
	
	/* Unnecessary for NIF design */
	/*.tag-dup-tab td > div > div > div.col-md-12{
		padding: 0;
	}*/
}

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

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

/*** 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 .addGroup{
	display: inline-block;
}

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


/* 'Add file' label */

.tag-dup-tab .btn.addGroup{
	color: #4f4c4d;
	font-size: 18px;
	font-family: 'Inter-SemiBold';
	background-color: transparent;
	border: none;
	box-shadow: none;
	margin: 0px 0px;
	padding-bottom: 36px !important;
}

.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: #0062A4;*/
	margin: 0;
	/*background-color: transparent;*/
	/*border: transparent;*/
	box-shadow: none;
  padding-bottom: 36px !important;
}

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

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

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

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

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

/*** 7.3.2 Remove buttons ***/

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

.tag-dup-tab .btn.removeGroup,
.tag-dup-tab .btn.removeGroup:hover,
.tag-dup-tab .btn.removeGroup:focus{
	color: transparent !important;
	background-color: transparent !important;
	border: none !important;
	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;
}

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

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

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

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

/* Makes sure a remove icon always is available at the top upload field */
.tag-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;
}

/* 	Hiding last remove button */

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

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





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

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

/*.btn.removeGroup:before {
  content: "delete";
}*/

.btn.addGroup, .btn.removeGroup{
	font-family: "Inter-Medium";
	height: 36px;
	/*min-width: 64px;*/
	font-size: 16px;
	padding: 0 16px!important;
	background-color: transparent;
    color: var(--v-primary-variant-base)!important;
    caret-color: var(--v-primary-variant-base)!important;
    border: 2px solid var(--v-primary-variant-base)!important;
}

.btn.addGroup:hover{
	background-color: var(--v-primary-variant-base)!important;
    color: var(--v-inverted-base)!important;
    caret-color: var(--v-inverted-base)!important;
    border: 2px solid var(--v-primary-variant-base)!important;
    padding: 0 16px!important;
}

.btn.removeGroup{
    color: var(--v-accent-base)!important;
    caret-color: var(--v-accent-base)!important;
    border: 2px solid var(--v-accent-base)!important;
}

.btn.removeGroup:hover{
	background-color: var(--v-accent-base)!important;
    color: var(--v-inverted-base)!important;
    caret-color: var(--v-inverted-base)!important;
    border: 2px solid var(--v-accent-base)!important;
    padding: 0 16px!important;
}

/* Position buttons */
.groupListContainer :is(.QG1,.QG2,.QG3,.QG4,.QG5)>.col>.group-title-row{
	/*position: absolute;*/
	/*left: 0;*/
    bottom: -24px;
	z-index: 1;
}

.groupListContainer>.question-group{
	padding-bottom: 28px;	
}

/* Add/Remove button positioned top right and bottom right corner */
.groupListContainer>.question-group>.col{
	display: grid;
    grid-template-columns: 100% 0%;
    justify-items: start;
}

.groupListContainer>.question-group>.col>.question-group-content{order: 1; padding-top: 56px; margin-bottom: 30px;}
.groupListContainer>.question-group>.col>.group-title-row{order: 2;}

@media only screen and (max-width: 2900px) and (min-width: 768px){
	.groupListContainer>.question-group>.col>.question-group-content{width: 100%;}
}



.groupListContainer>.question-group>.col>.group-title-row>div>span{
	display: grid;
    grid-template-columns: 1fr;
    justify-items: start;
	margin-left: -66px;
}

.groupListContainer>.question-group>.col>.group-title-row>div>span>.addGroup {
    order: 2;
    justify-self: end;
    align-self: end !important;
}

.groupListContainer>.question-group>.col>.group-title-row>div>span>.removeGroup {
    order: 1;
	justify-self: end;
    align-self: start !important;
	margin-top: 15px;
}

/* Experimental */








/* Fucker med tabeller – Finn fiks*/
/*.groupListContainer .btn.addGroup{
	display: none;
}

.groupListContainer td.add-remove-buttons .btn.addGroup{
	display: inline-block;
}

.groupListContainer>.question-group:last-child .btn.addGroup{
	display: inline-block;
}*/

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