/* -------------------------------------------------------------------------- */
/* Fonts:                                                                     */
/* -------------------------------------------------------------------------- */
@font-face {
  font-family: "IDEMIA-UI";
  font-style: normal;
  font-weight: 100;
  src: url("../fonts/IDEMIA-UI-Thin.otf") format("opentype");
}
@font-face {
  font-family: "IDEMIA-UI";
  font-style: italic;
  font-weight: 100;
  src: url("../fonts/IDEMIA-UI-ThinItalic.otf") format("opentype");
}
@font-face {
  font-family: "IDEMIA-UI";
  font-style: normal;
  font-weight: 200;
  src: url("../fonts/IDEMIA-UI-ExtraLight.otf") format("opentype");
}
@font-face {
  font-family: "IDEMIA-UI";
  font-style: italic;
  font-weight: 200;
  src: url("../fonts/IDEMIA-UI-ExtraLightItalic.otf") format("opentype");
}
@font-face {
  font-family: "IDEMIA-UI";
  font-style: normal;
  font-weight: 300;
  src: url("../fonts/IDEMIA-UI-Light.otf") format("opentype");
}
@font-face {
  font-family: "IDEMIA-UI";
  font-style: italic;
  font-weight: 300;
  src: url("../fonts/IDEMIA-UI-LightItalic.otf") format("opentype");
}
@font-face {
  font-family: "IDEMIA-UI";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/IDEMIA-UI-Regular.otf") format("opentype");
}
@font-face {
  font-family: "IDEMIA-UI";
  font-style: normal;
  font-weight: 500;
  src: url("../fonts/IDEMIA-UI-Medium.otf") format("opentype");
}
@font-face {
  font-family: "IDEMIA-UI";
  font-style: italic;
  font-weight: 500;
  src: url("../fonts/IDEMIA-UI-MediumItalic.otf") format("opentype");
}
@font-face {
  font-family: "IDEMIA-UI";
  font-style: normal;
  font-weight: 600;
  src: url("../fonts/IDEMIA-UI-SemiBold.otf") format("opentype");
}
@font-face {
  font-family: "IDEMIA-UI";
  font-style: italic;
  font-weight: 600;
  src: url("../fonts/IDEMIA-UI-SemiBoldItalic.otf") format("opentype");
}
@font-face {
  font-family: "IDEMIA-UI";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/IDEMIA-UI-Bold.otf") format("opentype");
}
@font-face {
  font-family: "IDEMIA-UI";
  font-style: italic;
  font-weight: 700;
  src: url("../fonts/IDEMIA-UI-BoldItalic.otf") format("opentype");
}
@font-face {
  font-family: "IDEMIA-UI";
  font-style: normal;
  font-weight: 800;
  src: url("../fonts/IDEMIA-UI-ExtraBold.otf") format("opentype");
}
@font-face {
  font-family: "IDEMIA-UI";
  font-style: italic;
  font-weight: 800;
  src: url("../fonts/IDEMIA-UI-ExtraBoldItalic.otf") format("opentype");
}
@font-face {
  font-family: "IDEMIA-UI";
  font-style: normal;
  font-weight: 900;
  src: url("../fonts/IDEMIA-UI-Black.otf") format("opentype");
}
@font-face {
  font-family: "IDEMIA-UI";
  font-style: italic;
  font-weight: 900;
  src: url("../fonts/IDEMIA-UI-BoldItalic.otf") format("opentype");
}

* {
	box-sizing: border-box;
}

html {
  height: 100%;
}

body {
	font-family: "IDEMIA-UI", Helvetica, Arial, sans-serif;
  height: 100%;
  position: relative;
  margin: 0;
  padding: 0;
}

h1 {
  font-family: "IDEMIA-UI", Helvetica, sans-serif;
  font-size: 48px;
  line-height: 56px;
  font-weight: 800;
}
h1.italic {
	font-style: italic;
}
h2 {
  font-family: "IDEMIA-UI", Helvetica, sans-serif;
  font-size: 36px;
  line-height: 40px;
  font-weight: 800;
}
h2.italic {
	font-style: italic;
}
h3 {
  font-family: "IDEMIA-UI", Helvetica, sans-serif;
  font-size: 28px;
  line-height: 36px;
  font-weight: 800;
}
h3.italic {
	font-style: italic;
}
h4 {
  font-family: "IDEMIA-UI", Helvetica, sans-serif;
  font-size: 20px;
  line-height: 24px;
  font-weight: 800;
}
h4.italic {
	font-style: italic;
}
h5 {
  font-family: "IDEMIA-UI", Helvetica, sans-serif;
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
}
h5.italic {
	font-style: italic;
}
h6 {
  font-family: "IDEMIA-UI", Helvetica, sans-serif;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
}
h6.italic {
	font-style: italic;
}

@media screen and (max-width: 768px) {
	h1 {
    font-size: 36px;
    line-height: 40px;
	}
	h2 {
		font-size: 32px;
    line-height: 36px;
	}
	h3 {
		font-size: 24px;
    line-height: 32px;
	}
}

:root {
  --IdemiaSuccess: #88BA50;
  --IdemiaAlert: #F19D11;
  --IdemiaError: #F4021F;
  --IdemiaWhite: #FFFFFF;
  --IdemiaAlmostWhite: #F2F2F2;
  --IdemiaBlack: #000000;
  
  --IdemiaPurple50: #dbc8ff;
  --IdemiaPurple100: #c6a9ff;
  --IdemiaPurple200: #af93e7;
  --IdemiaPurple300: #9c82ce;
  --IdemiaPurple400: #9072c9;
  --IdemiaPurple500: #8566c1;
  --IdemiaPurple600: #6238b3;
  --IdemiaPurple700: #4f279c;
  --IdemiaPurple800: #44208b;
  --IdemiaPurple900: #430099;
  
  --IdemiaLightGrey50: #f5f9fb;
  --IdemiaLightGrey100: #e5ebf0;
  --IdemiaLightGrey200: #bccad0;
  --IdemiaLightGrey300: #94a7af;
  --IdemiaLightGrey400: #758993;
  --IdemiaLightGrey500: #5d6c76;
  --IdemiaLightGrey600: #4e5d67;
  --IdemiaLightGrey700: #3f4c55;
  --IdemiaLightGrey800: #282d33;
  --IdemiaLightGrey900: #212428;

  --IdemiaDarkGrey50: #c5c6cd;
  --IdemiaDarkGrey100: #a1a2a9;
  --IdemiaDarkGrey200: #61646a;
  --IdemiaDarkGrey300: #3e4046;
  --IdemiaDarkGrey400: #1d1e23;
  --IdemiaDarkGrey500: #1a1b1f;
  --IdemiaDarkGrey600: #15161a;
  --IdemiaDarkGrey700: #121317;
  --IdemiaDarkGrey800: #0d0e11;
  --IdemiaDarkGrey900: #000000;
}


body, .light-theme {
  /* Images SVGs */
  --IdemiaLines: url('../img/lines-light.svg');
  --IdemiaLogo: url('../img/idemia-light.svg');

  /* Body. ------------------------------------------------------------------ */
  --IdemiaBodyBackground: #FFFFFF;
  --IdemiaBodyColor: #000000;
  --IdemiaDefaultBackground: #e5ebf0;
  --IdemiaDefaultPurple: #8566c1;
  --IdemiaHeaderColor: #F2F2F2;

  /* Footer. ------------------------------------------------------------ */
  --IdemiaFooterBackground: #430099;

  /* Header. ------------------------------------------------------------ */
  --IdemiaHeaderBarBackground: #F2F2F2;
  --IdemiaHeaderBarColor: #000000;
  --IdemiaHeaderBarBorder: #f5f9fb;
  --IdemiaHeaderBarPillars: #8566c1;
  --IdemiaHeaderBarProductName: #430099;
  --IdemiaHeaderBarNavigation: #000000;
  --IdemiaHeaderBarNavigationSelect: #430099;
  --IdemiaHeaderBarApplication: #8566c1;
  --IdemiaHeaderLanguageBackground: #F2F2F2;

  /* Card box. -------------------------------------------------------------- */
  --IdemiaCardBackground: #FFFFFF;
  --IdemiaCardColor: #000000;
  --IdemiaCardBorder: 1px solid #bccad0;
  --IdemiaCardBorderShadow: 3px 3px 6px #758993;
  --IdemiaCardBorderRadius: 2px;

  /* Login Page */
  --IdemiaLoginBackground: var(--IdemiaLines);
  --IdemiaLoginLogo: var(--IdemiaLogo);
  --IdemiaLoginLinksColor: #8566c1;
  --IdemiaLoginTitle: #430099;

  /* Buttons */
  --IdemiaButtonColor: #FFFFFF;
  --IdemiaButtonBorder: #8566c1;
  --IdemiaButtonHover: #8566c1;
  --IdemiaButtonHoverColor: #FFFFFF;

  --IdemiaBasicBackground: #FFFFFF;
  --FadeBodyColor: #a1a2a9;
  --ReverseBodyColor: #a1a2a9;
  --GreyedBodyColor: #f5f9fb;
  --DarkGreyBodyColor: #e5ebf0;

  --IdemiaIconsColor: #430099;
  --IdemiaIconsBorder: #c5c6cd;
  --IdemiaBrandColor: #430099;

  --IdemiaTableCellBackground: #FFFFFF;
  --IdemiaTableCellBorder: 1px solid #e5ebf0;
  --IdemiaTableCellHover: #e5ebf0;

  --IdemiaLoadingBackground: rgba(255,255,255,0.9);
}

.dark-theme {
  /* Images SVGs */
  --IdemiaLines: url('../img/lines-dark.svg');
  --IdemiaLogo: url('../img/idemia-dark.svg');

  /* Body. ------------------------------------------------------------------ */
  --IdemiaBodyBackground: #1a1b1f;
  --IdemiaBodyColor: #FFFFFF;
  --IdemiaDefaultBackground: #212428;
  --IdemiaDefaultPurple: #8566c1;
  --IdemiaHeaderColor: #212428;

  /* Footer. ------------------------------------------------------------ */
  --IdemiaFooterBackground: #430099;

  /* Header. ------------------------------------------------------------ */
  --IdemiaHeaderBarBackground: #212428;
  --IdemiaHeaderBarColor: #FFFFFF;
  --IdemiaHeaderBarBorder: #212428;
  --IdemiaHeaderBarPillars: #8566c1;
  --IdemiaHeaderBarProductName: #FFFFFF;
  --IdemiaHeaderBarNavigation: #FFFFFF;
  --IdemiaHeaderBarNavigationSelect: #9072c9;
  --IdemiaHeaderBarApplication: #9072c9;
  --IdemiaHeaderLanguageBackground: #212428;

  /* Card box. -------------------------------------------------------------- */
  --IdemiaCardBackground: #212428;
  --IdemiaCardColor: #FFFFFF;
  --IdemiaCardBorder: 1px solid #5d6c76;
  --IdemiaCardBorderShadow: 3px 3px 6px #3e4046;
  --IdemiaCardBorderRadius: 2px;

  /* Login Page */
  --IdemiaLoginBackground: var(--IdemiaLines);
  --IdemiaLoginLogo: var(--IdemiaLogo);
  --IdemiaLoginLinksColor: #FFFFFF;
  --IdemiaLoginTitle: #FFFFFF;

  /* Buttons */
  --IdemiaButtonColor: #8566c1;
  --IdemiaButtonBorder: #8566c1;
  --IdemiaButtonHover: #8566c1;
  --IdemiaButtonHoverColor: #FFFFFF;

  --IdemiaBasicBackground: #212428;
  --FadeBodyColor: #FFFFFF;
  --ReverseBodyColor: #8566c1;
  --GreyedBodyColor: #3e4046;
  --DarkGreyBodyColor: #3e4046;

  --IdemiaIconsColor: #FFFFFF;
  --IdemiaIconsBorder: #3e4046;
  --IdemiaBrandColor: #FFFFFF;

  --IdemiaTableCellBackground: #212428;
  --IdemiaTableCellBorder: 1px solid #282d33;
  --IdemiaTableCellHover: #282d33;

  --IdemiaLoadingBackground: rgba(0,0,0,0.9);
}
.idemia-card {
	position: relative;
}
.footer {
	height: 12px;
  width: 100%;
  background: var(--IdemiaFooterBackground);
}

.btn {
	display: inline-block;
	font-family: "IDEMIA-UI";
	font-weight: 400;
	color: var(--IdemiaBodyColor);
	text-align: center;
	white-space: normal;
	vertical-align: middle;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	background-color: transparent;
	border: 2px solid transparent;
	padding: 12px 16px;
	font-size: 18px;
	line-height: 14px;
	border-radius: 24px;
	transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.btn:hover {
	color: var(--IdemiaBodyColor);
  text-decoration: none;
}
.btn-primary {
	color: #8566C1;
	border-color: #8566C1;
}
.btn-primary:hover {
	color: #fff;
	border-color: #6a46ae;
	background-color: #6a46ae;
}

.btn-secondary {
	color: var(--FadeBodyColor);
	border-color: var(--FadeBodyColor);
}
.btn-secondary:hover {
	color: #fff;
	background-color: var(--FadeBodyColor);
}

.btn-sm {
	padding: 10px 14px;
	border-radius: 22px;
	font-size: 14px;
}

.btn-lg {
	padding: 14px 18px;
	font-size: 20px;
	line-height: 1.5;
	border-radius: 34px;
}

.btn-block {
	display: block;
	width: 100%!important;
}

.alert {
	position: relative;
	padding: 16px 16px;
	margin-bottom: 16px;
	border: 1px solid transparent;
	border-radius: 4px;
}

.alert-error {
	color: white;
	background-color: var(--IdemiaError);
	border-color: var(--IdemiaError);
}

.alert-warning {
	color: white;
	background-color: var(--IdemiaAlert);
	border-color: var(--IdemiaAlert);
}

.alert-success {
	color: white;
	background-color: var(--IdemiaSuccess);
	border-color: var(--IdemiaSuccess);
}

.alert-info {
	color: white;
	background-color: #cfe2ff;
	border-color: #cfe2ff;
}

.idemia-field {
  position: relative;
  min-height: 62px;
  padding: 16px 0 8px;
  margin-top: 10px;
}
.idemia-field-label {
  top: 0;
  margin: -45px 0;
  display: block;
  color: var(--IdemiaLightGrey200);
  line-height: 54px;
  height: 24px;
  font-size: 16px;
  font-weight: 400;
  transition: font-size .15s, line-height .15s;
}
.idemia-field-input,
.idemia-field-textarea {
  position: relative;
  display: block!important;
  width: 100%;
  padding: 8px 27px 8px 0!important; /*padding: 8px 0!important;*/
  line-height: 16px!important;
  font-size: 16px!important;
  background-color: transparent!important;
  border: none!important;
  -webkit-appearance: none;
  outline: none;
	box-shadow: none !important;
	border-radius: 0 !important;
	color: var(--IdemiaBodyColor);
}
.idemia-field-input {
  height: 32px;
}
.idemia-field-label::after,
.idemia-field::before {
  content: '';
  height: 1px;
  width: 100%;
  position: absolute;
  bottom: 13px;
  left: 0;
  background-color: var(--IdemiaLightGrey200);
}
.idemia-field-label::after {
  bottom: 12px;
	height: 2px;
  background-color: var(--IdemiaDefaultPurple);
  transform: scaleX(0);
  transition: transform 0.3s;
}

.idemia-field-focused ~ .idemia-field-label {
	font-size: 12px;
  line-height: 14px;
}

/* .idemia-field-input[value=""]:not(:focus):not(:valid) ~ .idemia-field-label,
.idemia-field-textarea[value=""]:not(:focus):not(:valid) ~ .idemia-field-label {
	font-size: 16px;
  line-height: 54px;
}

.idemia-field-input:invalid:focus ~ .idemia-field-label,
.idemia-field-textarea:invalid:focus ~ .idemia-field-label,
.idemia-field-input:valid ~ .idemia-field-label,
.idemia-field-textarea:valid ~ .idemia-field-label,
.idemia-field-input:disabled ~ .idemia-field-label {
  font-size: 12px;
  line-height: 14px;
} */

.idemia-field-input:focus ~ .idemia-field-label,
.idemia-field-textarea:focus ~ .idemia-field-label {
  color: var(--IdemiaDefaultPurple);
}
.idemia-field-input:focus ~ .idemia-field-label::after,
.idemia-field-textarea:focus ~ .idemia-field-label::after {
  transform: scaleX(1);
}
/* 
.idemia-field-input:focus:invalid ~ .idemia-field-label,
.idemia-field-textarea:focus:invalid ~ .idemia-field-label {
	color: var(--IdemiaError);
}
.idemia-field-input:focus:invalid ~ .idemia-field-label::after,
.idemia-field-textarea:focus:invalid ~ .idemia-field-label::after {
  background-color: var(--IdemiaError);
} */


.checkbox {
	padding-left: 0!important;
}
/* Customize the label (the container) */
.checkbox-container {
	height: 22px;
	display: flex;
	align-items: center;
  position: relative;
  padding-left: 25px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 14px;
	color: var(--IdemiaLightGrey200);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.checkbox-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
	margin-left: -20px!important;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
	border-radius: 5px;
	border: 2px solid var(--IdemiaLightGrey200);
  background-color: transparent;
}

/* On mouse-over, add a grey background color */
.checkbox-container:hover input ~ .checkmark {
	border: 2px solid var(--IdemiaDefaultPurple);
}

/* When the checkbox is checked, add a blue background */
.checkbox-container input:checked ~ .checkmark {
  background-color: var(--IdemiaDefaultPurple);
	border: 2px solid var(--IdemiaDefaultPurple);
}

.checkbox-container input:disabled ~ .checkmark {
	border: 2px solid var(--GreyedBodyColor);
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.checkbox-container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.checkbox-container .checkmark:after {
  left: 4px;
  top: 0px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.checkbox-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 16px;
	font-weight: 400;
	margin-bottom: 10px;
}

.checkbox-title .idemia-icon {
	position: relative;
	top: auto;
	right: auto;
}

.idemia-selector-field:before {
	content: none!important;
}

.idemia-select {
	line-height: 1;
	-webkit-appearance: none;
	border: 0;
	width: 100%;
	padding: 0;
	height: 32px;
	font-size: 16px;
	outline: none!important;
}

.idemia-select:valid ~ .idemia-field-label {
  font-size: 12px;
  line-height: 14px;
}

.idemia-field-checkbox {
	margin-top: 16px;
}

.idemia-icon {
	display: inline-block;
	position: absolute;
	right: 0;
	top: 18px;
	color: var(--IdemiaLoginLinksColor);
	font-size: 20px!important;
}