/* --------------------------------------------------------------------
               			TPD ID ISSUER
               		Main style-sheet
          		Le Studio Worldline, 2018
-------------------------------------------------------------------- */
@import 'vars.css';


/* ------------------------------ RESET ---------------------------- */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, form, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i,dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
}

html {overflow-y: scroll; scroll-behavior: smooth;}

header, footer, main, nav, aside, article, section, figure, figcaption {
  display: block;
	margin: 0;
	padding: 0;
	border: 0;
}

/* ------------------------------ DEFAULTS ---------------------------- */

@font-face {
    font-family: 'sinkin_sans300_light';
    src: url('sinkinsans-300light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'sinkin_sans500_medium';
    src: url('sinkinsans-500medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'sinkin_sans700_bold';
    src: url('sinkinsans-700bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'sinkin_sans400_italic';
    src: url('sinkinsans-400italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body {
	font: 100%/1.2 var(--stack);
	color: var(--body-text);
	background-color: var(--body-bg);
}

h1 {
	text-align: center;
	margin: 0 auto;
}
	h1 img {width: 40%;	max-width: 150px;}

h2, h3, h4 {
	font-family: var(--stack-m);
	font-weight: normal;
	margin: 2em 0 1em;
}

h2 {font-size: 1.1em;}
h3 {font-size: 1em;}
h4 {font-size: 0.9em;}

div > *:first-child, main > *:first-child, section > *:first-child {margin-top: 0;}

p, li, dt, dd, h5, th, td {font-size: 0.7em;}
li li, li p, li dt, li dd {font-size: 100%;}

a, a:link {color: var(--main-color); transition: all 0.5s;}
a:visited {opacity: 0.8;}
a:active, a:hover, a:focus {
	text-decoration: none;
	color: var(--n-s-dark);
	background-color: rgba(236,182,36,.7);
}

strong {
	font-family: var(--stack-b);
	font-weight: normal;
}
em {
	font-family: var(--stack-i);
	font-style: none;
}

img {max-width: 100%; border: none;}

button {
	font: 100%/1 var(--stack-m);
	padding: 0;
	border: none;
	cursor: pointer;
}
button[disabled] {
	filter: grayscale(100%) opacity(40%);
	cursor: initial;
}


/* ------------------------------ KEYFRAMES ---------------------------- */

@keyframes slideIn {
		0% {top: -50%;}
		100% {top: -1rem;}
}
@keyframes slideInNOut {
		0% {top: -50%; opacity: 0;}
		10% {top: -1rem; opacity: 1;}
		20% {top: -1rem; opacity: 1;}
		30% {top: -1rem; opacity: 1;}
		40% {top: -1rem; opacity: 1;}
		50% {top: -1rem; opacity: 1;}
		60% {top: -1rem; opacity: 1;}
		70% {top: -1rem; opacity: 1;}
		80% {top: -1rem; opacity: 1;}
		100% {top: -50%; opacity: 0;}
}
@keyframes slideRight {
	0% {transform: translateX(-500px);}
	100% {transform: translateX(0);}
}
@keyframes slideLeft {
	0% {transform: translateX(0);}
	100% {transform: translateX(-500px);}
}
@keyframes toHide {
	0% {transform: scale(0.8) rotate3d(1, 2.0, 3.0, 10deg); opacity: 1;}
	100% {transform: scale(0.1) rotate(180deg); opacity: 0;}
}
@keyframes toShow {
	0% {transform: scale(0.1) rotate3d(1, 2.0, 3.0, 10deg); opacity: 0;}
	100% {transform: scale(0.8) rotate(180deg); opacity: 1;}
}

@keyframes asTooltip {
	0% {opacity: 0;}
	100% {opacity: 1;}
}

@keyframes toShine {
	0% {background-color: var(--body-bg);}
	50% {background-color: var(--hot-light);}
	100% {background-color: var(--body-bg);}
}
@keyframes toShine2 {
	0% {background-color: var(--n-light);}
	50% {background-color: var(--hot-light);}
	100% {background-color: var(--n-light);}
}

.toShine {
	animation-delay: 1s;
	animation-duration: 2s;
	animation-fill-mode: both;
	animation-name: toShine;
}
.toShine2 {
	animation-delay: 1s;
	animation-duration: 2s;
	animation-fill-mode: both;
	animation-name: toShine2;
}

/* ------------------------------ STRUCTURE ---------------------------- */

body > header {
	color: var(--text-inv);
	background-color: var(--main-color);
	padding: 0.5rem 5%;
}

#wrapper {padding: 5vw 5%;}

main {
	position: relative;
	left: 0;
	margin-bottom: 2rem;
	transition: width 1s, left 1s;
}
main.active {
	width: calc(100% - (5% + 250px));
	left: calc(5% + 250px);
}

#wrapper>footer {
  padding: 1rem 0;
  background-color: var(--n-dark);
}
p.copyright {
	font-size: 0.5em;
	text-align: center;
	text-transform: uppercase;
	color: var(--text-inv);
  background-color: var(--n-dark);
	margin: 2rem 0 0;
}

	footer ul.links-list {
		display: flex;
		justify-content: center;
		list-style-type: none;
		text-align: center;
	}
		footer ul.links-list li {font-size: 0.6em; margin: 0 1em;}
		footer ul.links-list li + li::before {
			display: inline-block;
			position: relative;
			content: "";
			left: -1em;
			width: 0.5em;
			height: 0.5em;
			background-color: var(--n-medium) ;
			border-radius: 0.5em;
		}
		footer ul.links-list a {
			color: var(--text-inv);
		  background-color: var(--n-dark);
		}


/* ---- GRIDS ---- */

.grids > * {
	box-sizing: border-box;
	margin: 0 0 2rem 3%;
}

.grids {
	display: -webkit-flex;
	-webkit-flex-flow: row wrap;
	display: -ms-flex;
	-ms-flex-flow: row wrap;
	display: flex;
	flex-flow: row wrap;
	margin-left: -3%;
}

.grid-full {
	-webkit-flex: 1 0 97%;
	-ms-flex: 1 0 97%;
	flex: 1 0 97%;
}
.grid-half {
	-webkit-flex: 1 0 250px;
	-ms-flex: 1 0 250px;
	flex: 1 0 250px;
}

.grid-third {
	-webkit-flex: 1 0 28.33%;
	-ms-flex: 1 0 28.33%;
	flex: 1 0 28.33%;
	min-width: 250px;
}

.grid-2thirds {
	-webkit-flex: 1 0 61.66%;
	-ms-flex: 1 0 61.66%;
	flex: 1 0 61.66%;
	min-width: 250px;
}

.grid-forth {
	-webkit-flex: 1 0 25%;
	-ms-flex: 1 0 25%;
	flex: 1 0 25%;
	min-width: 250px;
}

.grid-3forths {
	-webkit-flex: 1 0 65%;
	-ms-flex: 1 0 65%;
	flex: 1 0 65%;
	min-width: 250px;
}

/* ------------------------------ NAVIGATION ---------------------------- */

/* --- SKIP LINKS --- */

.k-skip {display: inline;}

	.k-skip a {
		position: absolute;
		overflow: hidden;
		left: -10000px;
		top: auto;
		width: 1px;
		height: 1px;
	}
	.k-skip a:focus {position: static; width: auto; height: auto;}


/* --- MAIN NAV --- */
p.control {
	position: absolute;
	overflow: hidden;
	width: 24px;
	height: 24px;
	top: 1.05rem;
	left: 5%;
}
	p.control button {background-color: var(--main-color);}

div.controled {
	position: absolute;
	display: flex;
	flex-direction: column;
	top: 3.4rem;
	left: -500px;
	height: 100%;
	width: 250px;
	color: var(--text-inv);
	background-color: var(--n-dark);
	padding: 2vmax;
	box-shadow: 5px 0 5px rgba(0,0,0,.5);
	z-index: 1000;
	transition: left 1s;
}
div.controled.active {left: 0;}

.underlay {opacity: 0;}
.underlay.active {
	display: block;
	position: absolute;
	top: 3.4rem;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(44,53,65,.7);
	opacity: 1;
	z-index: 490;
	transition: opacity 2s;
}

#main-nav {order: 1;}
header div.k-tools {
	order: 2;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 1rem;
	margin: 1rem calc(8px + 2vmax);
	border-top: 1px dotted #FFF;
}
	header div.k-tools ul {
		display: flex;
		list-style-type: none;
	}

#user-id {font-size: 0.65em; padding-right: 1rem;}

/* Menu icon animation */
#menu-control rect {
	animation: 0.5s ease;
	animation-fill-mode: both;
	animation-name: slideRight;
}
#menu-control rect.active {
	animation: 0.5s ease;
	animation-fill-mode: both;
	animation-name: slideLeft;
}
#menu-control polygon {
	fill: #FFF;
	transform-origin: center;
	animation: 0.5s ease;
	animation-fill-mode: both;
	animation-name: toHide;
}
#menu-control polygon.active {
	animation: 0.5s ease;
	animation-fill-mode: both;
	animation-name: toShow;
}

	#main-nav li {
		list-style-type: none;
		padding: 1vmax 0;
	}

	div.controled a {
		overflow: hidden;
		color: var(--text-inv);
		background-color: var(--n-dark);
	}
	#main-nav a {text-decoration: none;}

/* Nav icons */

#main-nav a {
	display: block;
	background-image: url(../img/sprite-nav.svg);
	background-repeat: no-repeat;
	padding: 1em 1em 1em 4.5rem;
}
#main-nav a:hover, #main-nav a:focus {
	background-image: url(../img/sprite-nav-on.svg);
	background-color: rgba(255,255,255,.2);
}
#main-nav a[aria-current=page] {
	background-image: url(../img/sprite-nav-on.svg);
}

#main-nav li:nth-child(1) a {background-position: 8px 7px;}
#main-nav li:nth-child(2) a {background-position: 8px -62px;}
#main-nav li:nth-child(3) a {background-position: 8px -145px;}
#main-nav li:nth-child(4) a {background-position: 8px -228px;}
#main-nav li:nth-child(5) a {background-position: 8px -302px;}
#main-nav li:nth-child(6) a {background-position: 8px -400px;}
#main-nav li:nth-child(7) a {background-position: 8px -818px;}
#main-nav li:nth-child(8) a {background-position: 8px -743px;}
#main-nav li:nth-child(9) a {background-position: 8px -489px;}


/* ------------------------------ TABLES ------------------------------------ */

table.data-table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 1rem;
}
	table.data-table th {
		text-align: left;
		background-color: var(--n-light); padding: 0.5em 1em;
	}
	table.data-table td {
		text-align: left;
		padding: 0.5em 1em;
		border-bottom: 1px solid var(--n-medium);
	}

	table.data-table tr:nth-child(odd) td {background-color: rgba(0,0,0,0.015);}

caption {
  font-size: 0.8em;
  text-align: left;
	text-transform: uppercase;
	color: var(--text-inv);
	background-color: var(--n-dark);
  padding: 0.5em 1em;
}

.numeral {text-align: right;}
.date {text-align: center;}

/* ------------------------------ FORMS ------------------------------------ */

form.data-form p + p, form.data-form div.conditional-entry + p {margin-top: 1em;}

p.mandatory {font-size: 0.65em; text-align: right; margin-bottom: 2em;}

fieldset + fieldset, form.data-form p + fieldset {margin-top: 1rem;}

legend {font-family: var(--stack-m); margin-bottom: 1em;}

label {
	display: block;
	font-family: var(--stack-m);
	color: var(--n-s-dark);
	margin-bottom: 0.5em;
}

label.together {
	display: inline-block;
	font-family: var(--stack);
	margin-right: 2rem;
}

.buttons-bar {text-align: center;}

.buttons-bar, form.data-form p + p.buttons-bar {
	padding-top: 1rem;
	margin-top: 2rem;
	border-top: 1px solid var(--n-medium);
}

input[type=text], input[type=password], input[type=date], input[type=email], input[type=number], select {
	height: 1em;
	font: 100%/1 var(--stack);
	padding: 0.8em 1em;
	border: 1px solid var(--n-medium);
	border-radius: 0.3em;
	transition: all 1s;
}
select {
	height: 2.7em;
	padding: 0.4em 0.5em;
}

[readonly] {color: var(--n-dark); background-color: var(--n-light);}

input[type=text]:focus, input[type=password]:focus, input[type=date]:focus, select:focus {
	background-color: var(--n-light);
	border-color: var(--body-bg);
	border-radius: 0;
	border-bottom-color: var(--hot-color);
}

input[type=submit], input[type=reset] {
	font: 100%/1 var(--stack-m);
	text-transform: uppercase;
	color: var(--text-inv);
	background-color: var(--hot-color);
	padding: 0.7em 1.5em 0.8em;
	margin-bottom: 0.5rem;
	border: none;
	border-radius: 0.3em;
	box-shadow: 0 2px 3px rgba(0,0,0,.3);
	cursor: pointer;
}
input[type=reset] {background-color: var(--n-dark);}
input[type=submit]:hover, input[type=submit]:focus, input[type=reset]:hover, input[type=reset]:focus {
	background-color: var(--main-color);
	box-shadow: none;
}

input[type=submit] + input[type=reset] {margin-left: 1rem;}

textarea {
	width: 85%;
	font: 100%/1 var(--stack-i);
	padding: 0.5em;
	border: 1px solid var(--n-medium);
	border-radius: 0.3em;
}

/* --- RADIO/CHECKBOX CHOICES --- */

.highlight {
	background-color: var(--n-light);
	padding: 0.8rem 1rem;
	margin-bottom: 2rem;
}

fieldset.choices legend {
	font-size: 100%;
	margin: 0;
}
	fieldset.choices.highlight legend {
		background-color: var(--n-light);
		padding: 0.3rem 0.8rem;
	}

	fieldset.choices img {width: 25px; height: 25px; vertical-align: -5px;}

ul.choices {list-style-type: none;}


/* --- ON/OFF CHECKS --- */

.on-off {
	position: relative;
	display: flex;
	align-content: center;
	max-width: 45em;
}

	.on-off label {
	  display: inline-block;
		font-family: var(--stack);
		line-height: 3em;
		margin: 0 1rem 0 40px;
	  cursor: pointer;
	}
		.on-off input {
			position: relative;
			top: 5px;
			left: 20px;
			z-index: 1;
		}

  .on-off label::before {
    display: block;
    position: absolute;
    width: 50px;
    height: 25px;
    top: 0.5em;
    left: 0;
    content: "";
    background: var(--n-light);
    border-radius: 1rem;
		z-index: 10;
  }
  .on-off label::after {
    display: block;
    position: absolute;
    width: 20px;
    height: 20px;
    top: 0.68em;
    left: 27px;
    content: "";
    background: var(--n-medium);
    border-radius: 20px;
    transition: all 1s;
		z-index: 10;
  }

  .on-off input:checked + label::before {
    background: var(--main-light);
  }
  .on-off input:checked + label::after {
    left: 2px;
    background: var(--main-color);
  }


/* --- ERROR MESSAGES --- */

div.error-messages {
	text-align: center;
	color: var(--n-s-dark);
	background-image: repeating-linear-gradient(-45deg, transparent, transparent 5px, rgba(243, 214, 214, 0.4) 5px, rgba(243, 214, 214, 0.4) 20px);
	padding: 1rem;
	margin-bottom: 2rem;
}

	div.error-messages ul {list-style-type: none;}
	div.error-messages > :first-child {
		color: var(--alert-color);
		background-color: rgba(243, 214, 214, 0.4);
	}

input[aria-invalid=true] {
	color: var(--text-inv);
	background-color: var(--alert-color);
	border-color: var(--n-s-dark);
}

.contextual-error {
	display: block;
	position: relative;
	font-family: var(--stack-i);
	color: var(--alert-color);
	background-color: var(--body-bg);
	margin: 0.5em 0;
}

	.contextual-error::before {
		display: inline-block;
		position: relative;
		content: "";
		top: -0.25em;
		width: 1px;
		height: 1px;
		background-color: var(--body-bg);
		margin-right: 1em;
		border-bottom: 5px solid var(--alert-color);
		border-right: 5px solid var(--alert-color);
		border-top: 5px solid var(--body-bg);
		border-left: 5px solid var(--body-bg);
		transform: rotate(45deg);
	}

/* ---- CONDITIONAL FIELDS ---- */

div.conditional-entry {margin-top: 1em;}
p.conditional-field {display: none;}

p.conditional-field input {
	animation-duration: 1s;
	animation-name: toShine;
	animation-fill-mode: both;
}

/* --- SIDE FORMS --- */

form.side-form input[type="submit"] + input[type="reset"] {
    margin-left: 0.5em;
}
form.side-form input[type="submit"], form.side-form input[type="reset"] {
    margin: 0.5em;
}


/* ------------------------------ UTILITIES ------------------------------------ */


/* ---------- LANGUAGE SELECTION ------------- */
 .k-language {
   background: transparent;
   padding: 0;
   margin: 0;
   border: none;
 }
 .k-language legend, .k-language input {
   position: absolute;
   width: 1px;
   left: -9000px;
 }
 .k-language .radio-makeup {
	 display: flex;
	 width: 5em;
   font-size: 0.65em;
	 background-color: var(--n-light);
   padding: 0.1em;
	 margin: 0 auto;
	 border-radius: 2em;
 }
 .k-language label {
   width: 2em;
	 height: 2em;
	 line-height: 2em;
   text-align: center;
   text-transform: uppercase;
   color: var(--body-text);
   background: var(--n-light);
   padding: 0.2em;
   margin: 0 1px;
	 border-radius: 2em;
   cursor: pointer;
 }
 .k-language label.active, .k-language label:hover, .k-language label:focus {
   color: var(--text-inv);
   background: var(--hot-color);
 }

 /* ---------- HIDE CONTENT FROM DISPLAY ------------- */

 .no-display {
 	position: absolute;
 	overflow: hidden;
 	left: -10000px;
 	top: auto;
 	width: 1px;
 	height: 1px;
 }

/* --- INTRODUCTORY TEXT --- */

.intro {line-height: 1.58; margin-bottom: 2rem;}

	.intro p + p {margin-top: 0.8em;}

/* ------- DATA BLOCK ------ */

div.data-block {
	background-color: var(--n-light);
	padding: 0.8rem 1rem;
}
	div.data-block dt {font-size: 0.65em; color: var(--n-s-dark); margin-bottom: 0.3em;}
	div.data-block dd {font-size: 0.85em;}
	div.data-block div + div {
		padding-top: 0.5rem;
		margin-top: 0.5rem;
		border-top: 1px dotted var(--n-medium);
	}


/* ------- ADD ITEM LIST ------ */

ul.add-list {
	max-width: 25em;
  padding: 0 1rem 0 1.5rem;
  margin: 2rem 0;
  border-left: 5px solid var(--main-color);
}
  ul.add-list > li {
		position: relative;
    padding: 1em 0;
    border-bottom: 1px solid var(--n-medium);
    animation-fill-mode: forwards;
    animation-duration: 1s;
    animation-name: toShine;
  }
  ul.add-list span:first-of-type:not(.tooltip) {
		display: block;
		font: 110%/1.4 var(--stack-b);
		color: var(--main-color);
		margin-bottom: 0.3em;
	}

  ul.add-list button {
		position: absolute;
		width: 25px;
		height: 25px;
		top: 1em;
		right: 0;
	}

	 ul.add-list ul {display: flex; list-style-type: none;}
	 	 ul.add-list ul li {padding: 0.5rem 1rem 0 0;}
	 		ul.add-list ul li button {position: static;}

/* Specific for tokens' list */
ul.add-list.tokens {max-width: 40em;}
ul.add-list.tokens span:first-of-type:not(.tooltip) {
	font: 100% var(--stack);
}



/* ------ LOW IMPACT ACTION BUTTONS ------- */

.low-action {
	font: 90%/1 var(--stack);
	transition: all .5s;
}
.low-action:hover {background-color: var(--body-bg);}


/* ------ GLOBAL SEARCH ------- */

form.search {
	padding-top: 0.5rem;
	margin-top: 0.5rem;
	border-top: 1px dotted var(--body-bg);
}
	form.search p {font-size: 0.7em;}
	form.search input[type=submit] {padding: 0.7em 0.5em 0.8em;}

#search-tag {
	width: 52%;
	max-width: 20em;
	color: var(--text-inv);
	background-color: rgba(255,255,255,.3);
	border: none;
}
#search-place {
	width: 25%;
	max-width: 10em;
	color: var(--text-inv);
	background-color: rgba(255,255,255,.3);
	border: none;
}
form.search option {color: var(--n-dark);}

/* Goa along items */
.go-along {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
}
.go-along p, .go-along p + p {margin: 0 2em 1em 0;}

div.highlight.go-along {padding-bottom: 0;}

.go-along  input[type="submit"], .go-along  input[type="reset"] {margin: 0;}

/* ------ INFO TOASTS ------- */

div.info-toast {
	background-color: var(--n-light);
	padding: 0.8rem 1rem;
	margin: 1rem auto;
	border-right: 5px solid var(--hot-color);
	box-shadow: 0 5px 6px rgba(0,0,0,.1);
}
	div.info-toast p {
		font-size: 0.75em;
		line-height: 1.45;
	}

	div.info-toast p + p {margin-top: 0.8em;}

	div.info-toast p.close {
		position: absolute;
		width: 20px;
		height: 20px;
		top: 0.5rem;
		right: 0.5rem;
	}

/* ---- Described links list ---- */

ul.link-definition {margin-left: 1rem;}
	ul.link-definition li {font-size: 0.75em; line-height: 1.58;}
	ul.link-definition li + li {margin-top: 1.5em;}
	ul.link-definition dt {
		font: 120% var(--stack-m);
		margin-bottom: 0.25em;
	}


/* ---- Read more links ---- */

.read-more a {color: var(--n-s-dark); text-decoration: none;}
.read-more a:hover {text-decoration: underline;}

/* ---- Icon buttons ---- */
[class*="icon-"] {
	display: inline-block;
	overflow: hidden;
	width: 37px;
	height: 37px;
	text-indent: 50em;
	white-space: nowrap;
	background-image: url(../img/sprite.svg);
	background-color: transparent;
	background-repeat: no-repeat;
	vertical-align: bottom;
}

a[class*="icon-"]:hover, a[class*="icon-"]:focus {background-color: transparent;}

.icon-logout {background-image: url(../img/sprite-nav.svg); background-position: 6px -579px;}
.icon-settings {background-image: url(../img/sprite-nav.svg); background-position: 6px -662px;}
.icon-settings[aria-current=page] {background-image: url(../img/sprite-nav-on.svg);}
.icon-settings-b {background-position: 0 -312px;}
.icon-edit {background-position: 0 -206px;}
.icon-download {background-position: 0 -404px;}
.icon-mail {background-position: 0 -2160px;}
.icon-search {
	width: 30px;
  height: 30px;
  background-position: -2px -533px;
}

.icon-refresh {background-position: -8px -87px;}
.icon-help {background-position: 0 -622px;}
.icon-close {background-position: 0 -716px;}
.icon-add {background-position: 0 -962px;}
.icon-delete {width: 25px; height: 25px; background-position: -5px -842px;}

.icon-block {background-position: -5px -1260px;}

.icon-blockall {background-position: -5px -1336px;}
.icon-copy {background-position: -5px -1425px;}
.icon-mail-sml {background-position: -5px -1912px;}

.icon-details {background-position: -1px -1670px;}

div.actions-bar li button.icon-prev {width: 35px; height: 33px; background-position: 0 -1815px;}
div.actions-bar li button.icon-next {width: 35px; height: 33px; background-position: 0 -2010px;}

/* ---- Tooltip ---- */
span.tooltip {
  display: block;
  position: absolute;
  top: 50px;
  width: 8em;
  height: auto;
  max-width: 8em;
  overflow-wrap: break-word;
  font: 9px/1 var(--stack-m);
  text-align: center;
  color: white;
  background: var(--n-s-dark);
  padding: 0.7em 1em;
  border: 1px solid var(--n-s-dark);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  opacity: 1;
  z-index: 10000;
}

span.tooltip::before {
  position: absolute;
  top: -5px;
  left: 50%;
  display: block;
  width: 10px;
  height: 10px;
  content: "";
  background: var(--n-s-dark);
  margin-left: -5px;
  border-top: 1px solid var(--n-s-dark);
  border-left: 1px solid var(--n-s-dark);
  transform: rotate(45deg);
}

/*.show-icons {position: relative;}*/
.show-icons a:hover + .tooltip, .show-icons a:focus + .tooltip {
	display: block;
}


/* ------- MODAL ------- */

.modal-like {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	width: 100%;
	visibility: hidden;
	opacity: 0;
	transition: opacity 400ms ease-in 0s;
	-webkit-transition: opacity 400ms ease-in 0s;
	-ms-transition: opacity 400ms ease-in 0s;
	z-index: 9000;
}
	.modal-like h2 {}

	.modal-like .overlay a {
		position: absolute;
		display: block;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		color: rgba(19, 25, 31, 0);
		background: rgba(19, 25, 31, 0.9);
	}

	.modal-like:target {
		visibility: visible;
		opacity: 1;
		pointer-events: auto;
	}

	.modal-like:target div.content {
		overflow: auto;
		width: 70%;
		max-width: 600px;
		max-height: 80%;
		padding: 1rem 2rem;
		margin: 5% auto;
		margin: 5vmax auto;
	  transition: all 0.4s ease-in-out;
	}

	.modal-like div.content {
	  position: relative;
	  color: #13191F;
		background: #FFF;
		box-shadow: 2px 2px 5px #000;
	  transition: all 0.4s ease-in-out;
	}

	.modal-like div.content h3 {padding-right: 40px;}
	.modal-like div.content ol {margin: 1rem;}
	.modal-like div.content li {margin-bottom: 0.5rem;}

a.icon-close {
	position: absolute;
	width: 35px;
	height: 35px;
	top: 0.5rem;
	right: 0.5rem;
	z-index: 1000;
}


/* --- ACTIONS BAR --- */

div.actions-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: var(--main-light);
	padding: 0.5rem;
	margin-bottom: 1rem;
}
	div.actions-bar ul {
		display: flex;
		list-style-type: none;
	}
	div.actions-bar ul > li + li {margin-left: 0.5rem;}

	div.actions-bar [class*="bt-"] {
		display: inline-block;
		overflow: hidden;
		font: 100%/1 var(--stack-m);
		text-decoration: none;
		color: var(--text-inv);
		background-color: var(--main-color);
		background-image: url(../img/sprite.svg);
		background-repeat: no-repeat;
		padding: 0.5em 1em 0.8em 30px;
		border-radius: 0.3em;
	}

		div.actions-bar button[class*="icon-"] {width: 20px; height: 20px;}

		a[class*="bt-"]:hover, a[class*="bt-"]:focus, button[class*="bt-"]:hover, button[class*="bt-"]:focus {
			background-color: var(--n-dark);
		}
		a[class*="bt-"]:focus {outline: 1px dotted var(--n-s-dark);}

	div.actions-bar.plenty {display: block; text-align: center;}
	div.actions-bar.plenty ul {justify-content: center;}
	div.actions-bar.plenty ul + ul {margin-top: 1rem;}

	.bt-new {background-position: -5px 6px;}
	.bt-edit {background-position: -3px -1580px;}
	.bt-print {background-position: -3px -1509px;}
	.bt-lang {background-position: -3px -1029px;}
	.bt-pwd {background-position: 0 -1183px;}

	div.actions-bar .bt-cancel, div.actions-bar .bt-submit {
		display: none;
		background-image: none;
		padding-left: 1em;
	}
	div.actions-bar .bt-submit {
		color: var(--text-inv);
		background-color: var(--hot-color);
	}

	div.actions-bar .bt-unregister {
		background-color: var(--hot-color);
		background-position: 0 -1096px;
	}

	.bt-block {
		overflow: hidden;
		font: 100%/1 var(--stack-m);
		color: var(--alert-color);
		background-color: var(--body-bg);
		background-image: url(../img/sprite.svg);
		background-position: -7px -1257px;
		background-repeat: no-repeat;
		padding: 0.5em 1em 0.5em 25px;
		margin-top: 0.5rem;
	}


/* --- DETAILS / SUMMARY --- */

details {
	position: relative;
	padding: 0.5em 1em;
	color: var(--main-color);
	border: 1px solid var(--main-color);
	border-radius: 0.3em;
}
	details ul {
		position: absolute;
		width: 100%;
		top: 2.2em;
		left: 0;
		list-style-type: none;
		text-align: left;
		background-color: var(--main-color);
	}
	details li {font-size: 0.7em;}
summary {cursor: pointer;}

/* --- COUNTER --- */

ul.counter {counter-reset: steps;}

	ul.counter > li {position: relative; padding-left: 2rem;}

	ul.counter > li::before {
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 1.4em;
		height: 1.4em;
		line-height: 1.4em;
		text-align: center;
		color: var(--text-inv);
		background-color: var(--main-color);
		content: counter(steps);
  	counter-increment: steps;
		padding: 0.2em;
		border-radius: 100%;
	}

	ul.counter > li + li {
		padding-top: 0.35rem;
		margin-top: 0.5rem;
		border-top: 1px dotted #CCC;
	}
	ul.counter > li + li::before {top: 0.5rem;}


/* ------------------------------ EDITORIAL ---------------------------- */

article {max-width: 45em;}

	article > :first-child {margin-top: 0;}

	article p,article li, article dt, article dd {line-height: 1.68;}
	article > p + p, article > ul li + li {margin-top: 0.8em;}

	article ul {margin: 1rem;}

dl.info {margin-bottom: 2rem;}
	dl.info dt {
		font-size: 70%;
		text-transform: uppercase;
	}
	dl.info dd + dt {margin-top: 1rem;}
	dl.info dt {color: var(--n-dark);}
	dl.info dd {font-size: 0.9em;}

p.download {font-family: var(--stack-b); text-align: right; padding-top: 2rem;}
	p.download a {
		display: inline-block;
		background: url(../img/download.svg) right 0 no-repeat;
		padding: 0.8em 48px 0.8em 0;
	}

/* ------------------------------ SPECIFICS ---------------------------- */

div.opening {
	position: relative;
	box-sizing: border-box;
	text-align: center;
	color: var(--text-inv);
	background: var(--main-color) url(../img/background.png);
	padding: 2rem 5%;
	margin: 0 auto;
}
	div.opening header {text-align: center; margin: 0 auto 2rem;}
	div.opening h1 {margin: 0;}
		div.opening h1 img {
			max-width: 200px;
			width: 80%;
		}
		p.baseline {display: none; text-align: center; line-height: 1.58;}

	div.opening p {text-align: center;}
	div.opening p + p {margin-top: 1em;}

	div.opening form {
		position: relative;
		max-width: 450px;
		padding: 1rem;
		border: 1px solid rgba(255,255,255,.5);
	}

	div.opening fieldset:nth-child(2) legend {
		position: absolute;
		top: 4rem;
		left: 0;
		width: 100%;
		text-align: center;
	}
		div.opening fieldset:nth-child(2) p:first-of-type {margin-top: 2rem;}
	div.opening fieldset:not(.k-language) label {color: var(--text-inv);}

	.lost-password {display: block; padding: 0.5em;}
	.lost-password a, .lost-password a:visited {color: var(--text-inv);}
	.lost-password a:hover, .lost-password a:focus {color: var(--n-s-dark);}

	div.opening input[type="submit"] {font-size: 150%; padding: 0.5em 1em 0.7em;}
	div.opening input[type="submit"]:hover {
		color: var(--main-color);
		background-color: var(--body-bg);
	}
	div.opening .buttons-bar {border: none;}

	div.opening + footer {margin-top: 1rem;}
	div.opening + footer p.copyright {
		color: var(--body-text);
		background-color: var(--body-bg);
	}

div.new-account {
	max-width: 450px;
	background-color: rgba(255,255,255,.15);
	padding: 1rem;
}

/* --- FILTER FORM --- */

form.filter {
  display: flex;
  margin-bottom: 1rem;
}

form.filter p + p {margin-left: 1rem;}

#filter-tags {transition: all;}
#classif-tags {width: 8.5em;}


/* --- DATA LIST --- */

ul.data-list li {
	position: relative;
	list-style-type: none;
	padding-top: 0.6rem;
	margin-top: 1rem;
	border-top: 1px dotted var(--n-medium);
}

ul.data-list li[data-status] {border-color: var(--hot-color);}
	ul.data-list li[data-status]::after {
		display: block;
		content: attr(data-status);
		font-family: var(--stack-b);
		text-align: right;
		color: var(--hot-color);
		background: var(--body-bg);
		padding: 0 0.5em;
	}

	ul.data-list dl:not(.inverted) {padding-right: 50px;}
	ul.data-list dt {
		font: 1.25em/1.2 var(--stack-b);
		color: var(--main-color);
	}
	ul.data-list dd {line-height: 1.58;}

	ul.data-list dt.p-name {
		font: 1.25em/1.2 var(--stack-b);
		color: var(--main-color);
		margin-bottom: 0.3em;
	}
	ul.data-list dd.p-street-address {margin-top: 0.5em;}

	ul.data-list dl a {text-decoration: none;}

	/* Specifics for card data */
	ul.data-list.card dt {
		text-indent: -30px;
		margin-left: 30px;
	}

ul.data-list.card dd {margin-left: 30px;}
ul.data-list.card dd:first-of-type, ul.data-list.machine dd:first-of-type {
	font-size: 0.75em;
	text-transform: uppercase;
}
ul.data-list.machine dd:first-of-type {margin-bottom: 0.5em;}


ul.data-list .action {
	display: inline-block;
	position: absolute;
	top: 1rem;
	right: 0;
	width: 37px;
}

.data-list img {position: relative; top: 4px; padding-right: 5px;}

.data-list + p.buttons-bar button {padding: 0.5em 1em;}

.data-list .p-country-name {
	font-size: 80%;
	text-transform: uppercase;
	margin-top: 0.3em;
}


/* Specific for orders */

.quantity {color: var(--n-s-dark);}

ul.data-list.orders h3 {
	font: 1.25em/1.2 var(--stack-b);
	color: var(--main-color);
	margin: 0;
}
ul.data-list.orders .icons {
	font-size: 0.7em;
	text-transform: uppercase;
	margin-right: 50px;
}

dl.inverted {
  display: flex;
	flex-wrap: wrap;
  background-color: var(--n-light);
  padding: 0.5rem;
  margin-top: 1em;
}
	dl.inverted div {
		display: flex;
		flex-direction: column;
	}
	dl.inverted div + div {
		padding-left: 1em;
		margin-left: 1em;
		border-left: 1px solid var(--n-medium);
	}
	dl.inverted dt {
		order: 2;
		font-size: 75%;
		font-family: var(--stack);
		text-transform: uppercase;
		color: var(--body-text);
	}
	dl.inverted dd, .p-email {
		order: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 16em;
		white-space: nowrap;
		font-size: 100%;
		line-height: 1.2;
		color: var(--n-s-dark);
		margin-bottom: 0.5em;
	}


/* --- NEW ORDER FORM --- */

form.new-order select {width: 20em;}
form.new-order input[type=number] {width: 18em;}


/* --- NEW ECONOMIC OPERATOR --- */

#eop-name, #eop-addr, #eop-email, #l-email, #l-email-confirmation {width: 70%; max-width: 30em;}

/* --- FACILITIES --- */



/* --- DASHBOARD --- */

div.dashboard > * {box-sizing: border-box; margin-bottom: 2rem;}
section > header {
	display: flex;
	justify-content: space-between;
	margin-bottom: 1rem;
}
section > header > :first-child {margin: 0;}

section > header .show-icons {align-self: flex-end;}

section.highlight {
	background-color: var(--n-light);
	padding: 1.5rem 2rem 2rem;
}
section.highlight header span {display: block; font-size: 80%;}

section.highlight p.read-more::before {
	display: inline-block;
	position: relative;
	width: 0.5em;
	height: 0.5em;
	top: -2px;
	content: "";
	background-color: var(--n-dark);
	margin-right: 0.5em;
	border-radius: 0.5em;
}

div.dashboard div.reporting {
	overflow: hidden;
	height: 340px;
	padding-top: 10px;
}

.info-box {
  display: flex;
  flex-flow: column nowrap;
  padding: 0.5rem 1rem 1rem 1rem;
  margin: 0 1.5% 1rem 0;
}

  div.info-box p.stats {
    position: relative;
		font-size: 0.8em;
    line-height: 1.4;
    padding-left: 55px;
		margin-bottom: 1em;
  }
	div.info-box strong {
		display: block;
		font-size: 200%;
	}
	div.info-box p.read-more {font-size: 0.65em; padding-left: 55px;}
	div.info-box p.stats::before {
    display: inline-block;
    overflow: hidden;
    position: absolute;
    left: 0;
    width: 45px;
    height: 100px;
    content: "";
    background: url(../img/sprite-biggy.svg) 3px 7px no-repeat;
  }
  div.main-data .info-box:nth-of-type(2) p.stats::before {
    background-position: 3px -487px;
  }
  div.main-data .info-box:nth-of-type(3) p.stats::before {
    background-position: 3px -303px;
  }

div.main-data .info-box:nth-child(1) {background-color: var(--aux-color1);}
div.main-data .info-box:nth-child(2) {background-color: var(--aux-color2);}
div.main-data .info-box:nth-child(3) {background-color: var(--aux-color3);}

dl.events {margin: 1rem 0 2rem;}
	dl.events dt {
		font: 0.65em var(--stack-m);
		margin-bottom: 0.3em;
	}
	dl.events dd + dt {margin-top: 1rem;}

/* ----- SETTINGS ----- */

	form.settings .on-off label {
		order: 1;
		justify-content: space-around;
		width: 100%;
		margin: 0;
	}

  form.settings .on-off label::before {
		left: auto;
    right: 0;
		z-index: 10;
  }
  form.settings .on-off label::after {
		left: auto;
    right: 27px;
		z-index: 10;
  }

	form.settings .on-off input {
		order: 2;
		position: relative;
    left: -20px;
    top: 5px;
		z-index: 0;
	}
  form.settings .on-off input:checked + label::after {
		left: auto;
    right: 2px;
  }

	form.settings .on-off {border-top: 1px solid var(--n-medium);}

/* ---------------- REPORTING ------------------ */

.chart-settings {
	box-sizing: border-box;
	background-color: var(--n-light);
	padding: 0.8rem 1rem;
}
	.chart-settings h3 {margin-top: 0;}

div.chart {position: relative; height: 300px; margin-bottom: 3rem;}
div.chart::before, div.chart::after, ul.lollipops li::before, ul.lollipops li::after {
	display: block;
	position: absolute;
	content: "";
	background-color: var(--n-medium);
}

div.chart::before {
	width: 1px;
	height: 100%;
	bottom: 0;
	left: 0;
}
div.chart::after {
	width: 100%;
	height: 1px;
	bottom: 0;
	left: 0;
}

ul.x-values, ul.lollipops {
  display: flex;
  justify-content: space-between;
	position: absolute;
	width: 80%;
	bottom: -1em;
	left: 15%;
	list-style-type: none;
}
	ul.x-values li {font-size: 0.5em; text-align: center;}

ul.lollipops {bottom: 0; align-items: flex-end;}
	ul.lollipops li {
	  position: relative;
	  width: 20px;
	  height: 50px;
		font-size: 0.6em;
		cursor: help;
	}

ul.y-values {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	list-style-type: none;
	width: 100%;
	height: 100%;
	color: var(--n-medium-a);
	border-top: 1px dotted var(--n-medium);
}
	ul.y-values li {
	  width: 100%;
	  font-size: 0.5em;
	  padding: 0.3em 0 0 0.3em;
	  border-bottom: 1px dotted var(--n-medium);
	}

.pop {
  position: absolute;
  width: 4em;
  top: -2.5em;
	text-align: center;
	color: var(--n-s-dark);
	background-color: var(--n-light);
	padding: 0.3em;
	border-radius: 1em;
	opacity: 0;
}
.pop.asTooltip {
	animation-duration: 1s;
	animation-fill-mode: both;
	animation-name: asTooltip;
}

ul.lollipops li::before {
	width: 20px;
	height: 20px;
	background-color: var(--n-dark);
	border-radius: 100%;
	z-index: 10;
	transition: all;
}
ul.lollipops li::after {
	width: 1px;
	height: 100%;
	left: 9px;
	bottom: 0;
	background-color: var(--n-medium-a);
	transition: all;
}

/* ---- CONTACT FORM --- */

form.contact {background-color: var(--n-light); padding: 1rem;}

	form.data-form.contact .buttons-bar {
		text-align: left;
		padding-top: 0;
		border: none;
	}

/* ---- 404 ---- */

div.error-404 {
	width: 90%;
	height: 100vh;
	text-align: center;
	color: var(--text-inv);
	background-color: var(--main-color);
	padding: 2rem 5%;
}

	div.error-404 h1 {text-align: center; margin: 0 auto;}
	.error-num {
		display: block;
	  font-size: calc(10vw + 5em);
	  text-shadow: 2px 2px 5px rgba(0, 0, 0, .5);
		margin-top: calc(5vw + 1rem);
	}

	div.error-404 .read-more {margin-top: 10vh;}

/* ---- REGISTRY SHEET ---- */

section.registry {max-width: 35em; line-height: 1.58;}

	.fixed-data {
		background-color: var(--n-light);
		padding: 1rem;
		margin-bottom: 1rem;
	}
	ul.fixed-data {list-style-type: none;	padding: 0.5rem;}

	.fixed-data dl {display: flex;}
	.fixed-data dt {font: 1em/1 var(--stack-b); margin-right: 1em;}
	.fixed-data dd + dd {margin-left: 1em;}

	section.registry img {vertical-align: -5px;}

	section.registry dl {
		padding-left: 1rem;
		border-left: 5px solid var(--n-medium);
	}

		section.registry dt {font-size: 0.65em; text-transform: uppercase;}
		section.registry dl:not(.p-adr) dd {font-size: 0.85em; margin-bottom: 0.8em;}

		section.registry dl.p-adr .u-email {margin-top: 1em;}

		section.registry .p-street-address {margin-top: 0; border: none;}

		section.registry ul.add-list {padding: 0 0 0 1em; margin: 0; border: none;}
			section.registry ul.add-list li {padding: 0.5em 0;}

/* ------------ CALENDAR MANAGEMENT ------------- */

div.actions-bar ul.year-switcher li {
	list-style-type: none;
	font: 1.2em var(--stack-b);
}

div.year-cal {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 2rem;
}
	div.year-cal p, div.year-cal h4 {flex-basis: 100%;}

	div.year-cal .hgroup {flex-basis: 100%; margin-bottom: 2rem;}

	div.year-cal td span {
		display: block;
		position: relative;
		overflow: hidden;
		border: 1px solid var(--n-medium);
		border-radius: 0.3em;
	}
	div.year-cal input[type="checkbox"] {position: absolute; left: -5em;}
	div.year-cal label {padding: 0.3rem; margin: 0; cursor: pointer;}
	div.year-cal input[type="checkbox"]:checked + label {
		color: var(--text-inv);
		background-color: var(--n-dark);
	}

table.calendar {margin: 0 0 1rem;}

	table.calendar caption {
		text-align: center;
		color: var(--main-color);
		background-color: var(--body-bg);
	}

	table.calendar th {
		width: 1.6rem;
		font: 0.55em var(--stack);
		text-transform: uppercase;
		padding-bottom: 0.3rem;
	}
	table.calendar td {font-size: 0.7em; text-align: right; padding: 0.3rem;}

	table.calendar td[aria-label=weekend]:not(:empty) {
		background-color: var(--aux-color1);
	}
	table.calendar td[aria-label=holiday]:not(:empty) {
		background-color: var(--aux-color2);
	}

	ul.calendar-legend {
		display: flex;
		list-style-type: none;
		margin: 1rem 0 0;
	}

		ul.calendar-legend li {font-size: 0.65em; margin-right: 2em;}
		ul.calendar-legend li::before {
			display: inline-block;
			content: "";
			width: 1em;
			height: 1em;
			margin-right: 0.3em;
		}
		ul.calendar-legend li:nth-child(1)::before {
			background-color: var(--aux-color1);
		}
		ul.calendar-legend li:nth-child(2)::before {
			background-color: var(--aux-color2);
		}
		ul.calendar-legend li:nth-child(3)::before {
			background-color: var(--aux-color3);
		}

	div.switch-blocks > :last-child {display: none;}

/* ------------------------- PORTAL --------------------------- */

footer.portal {margin-bottom: 3rem;}
	footer.portal p.copyright {
		font-size: 0.6em;
		color: var(--body-text);
		background-color: var(--body-bg);
		padding: 1rem 0;
		margin: 0;
	}

div.portal {
	background-image: url(../img/background.png), linear-gradient(var(--main-color) 0%, #459abf 5%, #FFF 100%);
}

div.portal main {margin-bottom: 0;}
div.portal h1 {padding: 0.5rem 0;}

div.portal > header {}
	div.portal header p.baseline {
		display: none;
		font-size: 0.8em;
		color: var(--text-inv);
		margin: 0 5% 2rem 5%;
	}

	div.portal .radio-makeup {
		display: flex;
		align-items: center;
		font-size: 0.55em;
		margin: 0;
	}

  div.portal nav {
		position: fixed;
		width: 100%;
		bottom: 0;
    color: var(--text-inv);
    background-color: var(--n-dark);
		box-shadow: -3px 0 5px rgba(0,0,0,.5);
		z-index: 1000;
  }
    div.portal nav ul {
			display: flex;
			width: 90%;
			justify-content: space-between;
			align-items: center;
			list-style-type: none;
			line-height: 1.3;
			text-align: center;
			margin: 0 auto;
		}
		div.portal nav li {
			width: 30%;
			font-size: 0.6em;
      color: var(--text-inv);
      background-color: var(--n-dark);
		}
    div.portal nav a, div.portal nav a:visited {
			display: block;
      text-decoration: none;
      color: var(--text-inv);
      background-color: var(--n-dark);
			padding: 0.8em 0.5em;
    }

	div.portal ul.tools {
		display: flex;
		justify-content: center;
		list-style-type: none;
		margin-bottom: 1rem;
	}
		div.portal ul.tools li {margin: 0 0.5rem;}

div.portal ul.tools a, div.portal ul.tools a:visited {
	display: inline-block;
	overflow: hidden;
	font: 100%/1 var(--stack-m);
	text-decoration: none;
	color: var(--main-color);
	background-color: var(--main-light);
	background-repeat: no-repeat;
	padding: 0.5em 1em 0.8em;
	border-radius: 0.3em;
}
	div.portal ul.tools li:last-child a, div.portal ul.tools li:last-child a:visited {
		color: var(--text-inv);
		background-color: var(--n-dark);
	}
	div.portal ul.tools a:hover, div.portal ul.tools a:focus,
		div.portal ul.tools li:last-child a:hover, div.portal ul.tools li:last-child a:focus {
		color: var(--text-inv);
		background-color: var(--hot-color);
	}

	div.home {margin: 1rem 0;}

	div.home-entries section {
		position: relative;
		min-height: 3.7rem;
		background-color: rgba(255,255,255,0.8);
		padding: 1rem 1rem 1.5rem calc(90px + 0.5rem);
		margin: 0 5% 1rem;
		box-shadow: 1px 2px 3px rgba(0,0,0,0.6);
	}

		div.home-entries p {
			position: absolute;
			width: 75px;
			top: 1rem;
			left: 0.5rem;
		}

	div.home-entries section h2 {
		font-size: 1em;
		min-height: 2em;
		color: var(--n-s-dark);
		margin-bottom: 1em;
	}

	div.home-entries ul.links-list {
		list-style-type: none;
		margin: auto 0 0;
	}
	div.home-entries ul.links-list li + li {margin-top: 0.8em;}

	div.home-entries ul.links-list li::before {
		display: inline-block;
		content: "";
		width: 5px;
		height: 5px;
		background-color: var(--main-color);
		margin: 0 0.5em 0 0;
		border-radius: 5px;
	}
		div.home-entries ul.links-list a, div.home-entries ul.links-list a:visited {
			color: var(--n-s-dark);
		}

/* NEWS */

div.news {
	background-color: var(--main-light);
	padding: 0 calc(5% + 1rem) calc(5% + 1rem) calc(5% + 1rem);
	margin: 2rem 0;
}

article.h-entry + article.h-entry {margin-top: 1rem;}
article.h-entry dl.event .p-name {
	font: 0.9em/1.1 var(--stack-b);
	margin: 0.2em 0 0.5em;
}
article.h-entry dl.event .p-name a {color: var(--n-s-dark);}

/* PORTAL SECTIONS */

section.k-section {
	color: var(--n-s-dark);
	padding: 0 calc(5% + 1rem) calc(5% + 1rem) calc(5% + 1rem);
	margin-bottom: 1rem;
}

section.k-section:last-of-type {margin-bottom: 0;}

section.k-section .content {max-width: 45em;}

/*section.k-section:nth-of-type(1) {background-color: #DCF9EC;}
section.k-section:nth-of-type(3) {background-color: #E6EFF4;}*/

	section.k-section h2 {padding-top: calc(5% + 1em); margin: 0 0 1em;}
	section.k-section p, section.k-section li {line-height: 1.68;}
	section.k-section ul {margin: 1rem;}
	section.k-section p + p {margin-top: 0.8em;}
	section.k-section li + li {margin-top: 0.5em;}

/* -------------------------- FAQ ------------------------------*/

details.faq {
	background-color: var(--body-bg);
	margin-bottom: 1rem;
}
	details.faq summary {
		font: 0.8em var(--stack-b);
		text-indent: -1em;
		margin-left: 1em;
	}
		details.faq summary strong {
			color: var(--n-s-dark);
		}

	details.faq .content {
		max-width: 45em;
		margin: 1rem;
	}
	details.faq .content p {
		color: var(--body-text);
		line-height: 1.68;
	}
	details.faq .content p + p {margin-top: 0.8em;}
	details.faq .content ul {margin: 1rem;}
	details.faq .content li + li {margin-top: 0.5em;}

	details.faq ul {
    position: static;
    width: 100%;
    list-style-type: disc;
		color: var(--body-text);
    background-color: var(--body-bg);
	}
		details.faq ul li {font-size: 0.85em; line-height: 1.68;}

/*-------------------------- mat-select --------------------------*/

mat-select {
  font: 100%/1 var(--stack);
  padding: 0.42em 1em;
  border: 1px solid var(--n-medium);
  border-radius: 0.3em;
  transition: all 1s;
  margin: auto;
}

.mdc-menu-surface.mat-mdc-select-panel {
  background: var(--body-bg);
  margin-left: -14px !important;
}

.mat-mdc-select-value {
  padding: 3px 0;
}

.mat-mdc-option {
  font-size: 13px;
  font-family: Roboto, "Helvetica Neue", sans-serif;
}

.mdc-list-item__primary-text {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis;
}

.pdf-link{
  text-decoration: underline
}

pdf-link:active, pdf-link:hover, pdf-link:focus {
  text-decoration: none;
  color: var(--n-s-dark);
  background-color: rgba(236, 182, 36, .7);
}

/*-------------------------- IRU Validation --------------------------*/

.iru-validation-column {
  width: 1%;
  background-color: var(--n-light) !important;
  white-space: nowrap !important;
}