/*
 * Application global variables.
 */
@font-face {
  font-family: "Montserrat";
  src: url("../font/Montserrat-Black.ttf");
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-family: "Montserrat";
  src: url("../font/Montserrat-BlackItalic.ttf");
  font-weight: 900;
  font-style: italic;
}
@font-face {
  font-family: "Montserrat";
  src: url("../font/Montserrat-Bold.ttf");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Montserrat";
  src: url("../font/Montserrat-BoldItalic.ttf");
  font-weight: 700;
  font-style: italic;
}
@font-face {
  font-family: "Montserrat";
  src: url("../font/Montserrat-ExtraBold.ttf");
  font-weight: 800;
  font-style: normal;
}
@font-face {
  font-family: "Montserrat";
  src: url("../font/Montserrat-ExtraBoldItalic.ttf");
  font-weight: 800;
  font-style: italic;
}
@font-face {
  font-family: "Montserrat";
  src: url("../font/Montserrat-ExtraLight.ttf");
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: "Montserrat";
  src: url("../font/Montserrat-ExtraLightItalic.ttf");
  font-weight: 200;
  font-style: italic;
}
@font-face {
  font-family: "Montserrat";
  src: url("../font/Montserrat-Light.ttf");
  font-weight: normal;
  font-style: italic;
}
@font-face {
  font-family: "Montserrat";
  src: url("../font/Montserrat-Light.ttf");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "Montserrat";
  src: url("../font/Montserrat-LightItalic.ttf");
  font-weight: 300;
  font-style: italic;
}
@font-face {
  font-family: "Montserrat";
  src: url("../font/Montserrat-Medium.ttf");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "Montserrat";
  src: url("../font/Montserrat-MediumItalic.ttf");
  font-weight: 500;
  font-style: italic;
}
@font-face {
  font-family: "Montserrat";
  src: url("../font/Montserrat-Regular.ttf");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Montserrat";
  src: url("../font/Montserrat-Regular.ttf");
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: "Montserrat";
  src: url("../font/Montserrat-SemiBold.ttf");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "Montserrat";
  src: url("../font/Montserrat-SemiBoldItalic.ttf");
  font-weight: 600;
  font-style: italic;
}
@font-face {
  font-family: "Montserrat";
  src: url("../font/Montserrat-Thin.ttf");
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: "Montserrat";
  src: url("../font/Montserrat-ThinItalic.ttf");
  font-weight: 100;
  font-style: italic;
}
/* WP parts */
/*
 * Common components template
 */
.mdc-theme--primary {
  color: #ffffff !important;
  background-color: #b70023 !important;
}

.mdc-theme--primary--basic {
  color: #b70023 !important;
  background-color: transparent !important;
}
.mdc-theme--primary--basic .mdc-button__ripple::before, .mdc-theme--primary--basic .mdc-button__ripple::after {
  background-color: #b70023 !important;
}

.mdc-circular-progress__indeterminate-circle-graphic {
  stroke: #b70023 !important;
}

.mdc-button--raised, .mdc-button {
  height: 40px !important;
}

.mdc-theme--accent {
  color: #ffffff !important;
  background-color: #445d6b !important;
}

.mdc-theme--basic {
  color: #445d6b !important;
  background-color: #e8eef4 !important;
}
.mdc-theme--basic .mdc-button__ripple::before, .mdc-theme--basic .mdc-button__ripple::after {
  background-color: #5c7482 !important;
}

.mdc-dialog--open {
  height: 100vh;
  width: 100vw;
}

button.mdc-button--raised, button.mdc-button {
  width: fit-content;
  margin: 10px 0;
}
button.mdc-button--raised:disabled, button.mdc-button:disabled {
  background-color: transparent !important;
  border: 2px solid #b70023;
  cursor: not-allowed;
}
button.mdc-button--raised:disabled span, button.mdc-button:disabled span {
  color: #b70023;
}

.mdc-typography, .mdc-toolbar, .mdc-dialog {
  font: unset;
  font-family: "Montserrat", sans-serif !important;
  margin: unset;
}
.mdc-typography h1, .mdc-typography h2, .mdc-typography h3, .mdc-typography h4, .mdc-typography h5, .mdc-typography h6, .mdc-toolbar h1, .mdc-toolbar h2, .mdc-toolbar h3, .mdc-toolbar h4, .mdc-toolbar h5, .mdc-toolbar h6, .mdc-dialog h1, .mdc-dialog h2, .mdc-dialog h3, .mdc-dialog h4, .mdc-dialog h5, .mdc-dialog h6 {
  font: unset;
  font-family: "Montserrat", sans-serif !important;
  margin: unset;
}
.mdc-typography button, .mdc-toolbar button, .mdc-dialog button {
  font-weight: 600;
  font-family: "Montserrat", sans-serif !important;
}
.mdc-typography a.mcpbutton, .mdc-toolbar a.mcpbutton, .mdc-dialog a.mcpbutton {
  font-weight: 600;
  font-family: "Montserrat", sans-serif !important;
}
.mdc-typography input, .mdc-toolbar input, .mdc-dialog input {
  font-weight: 500;
  font-family: "Montserrat", sans-serif !important;
}

#tarteaucitronClosePanel {
  height: unset;
}

.mdc-top-app-bar {
  position: relative !important;
}

.my-2 {
  margin: 2px 0px;
}

.my-5 {
  margin: 5px 0px;
}

.my-10 {
  margin: 10px 0px;
}

.mx-10 {
  margin: 0px 10px;
}

.my-20 {
  margin: 20px 0px;
}

.my-40 {
  margin: 40px 0px;
}

.w-100 {
  width: 100%;
}

.login-page-error {
  justify-content: center;
}
.login-page-error .login-page-error-text {
  margin-left: 10px;
  font-size: 14px;
  font-weight: bold;
}

.error-block {
  margin: 2px 0px;
  display: none;
  color: #b70023;
  font-size: 14px;
  font-weight: 500;
}

hr {
  margin: 20px 0;
  background-color: darkblue;
  border-color: darkblue;
}

.uiDesignTitle {
  text-align: center;
  color: darkblue;
  font-weight: bold;
}

.area {
  display: flex;
  flex-direction: column;
}
.area a {
  margin: 10px 0;
}

.box {
  border: 1px solid black;
  margin: 10px;
  min-width: 50px;
}
.box.b2 {
  background-color: red;
  height: 50px;
}
.box.b3 {
  background-color: blue;
  height: 20px;
}

.d-none-important {
  display: none !important;
}

/* Class containing Color Classes */
.grey-color {
  color: #444546;
}

.grey-background-color {
  color: #ffffff;
  background-color: #444546;
}

.dark-blue-color {
  color: #445d6b;
}

.dark-blue-background-color {
  color: #ffffff;
  background-color: #445d6b;
}

.slate-color {
  color: #5c7482;
}

.slate-background-color {
  color: #ffffff;
  background-color: #5c7482;
}

.silver-color {
  color: #d9dde6;
}

.silver-background-color {
  color: #444546;
  background-color: #d9dde6;
}

.red-color {
  color: #b70023;
}

.red-background-color {
  color: #ffffff;
  background-color: #b70023;
}

.yellow-color {
  color: #ffcd00;
}

.yellow-background-color {
  color: #444546;
  background-color: #ffcd00;
}

.green-color {
  color: #0b6042;
}

.green-background-color {
  color: #ffffff;
  background-color: #0b6042;
}

.tin-color {
  color: #e8eef4;
}

.tin-background-color {
  color: #444546;
  background-color: #e8eef4;
}

/*Header Classes */
header {
  position: relative;
  margin-bottom: 40px;
  height: 64px;
}
header .header-wrapper {
  background-color: #e8eef4;
  height: 64px;
}
header .header-wrapper .header-logo {
  display: block;
  margin-left: 6px;
  background-color: transparent;
}
header .header-wrapper .header-logo.desktop img {
  top: 0;
  position: absolute;
}
header .header-wrapper .header-logo a:focus img {
  -webkit-box-shadow: 0px 0px 0px 2px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 0px 0px 2px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 0px 0px 2px rgba(0, 0, 0, 0.75);
  outline: unset;
}
header .header-wrapper .header-title-text {
  color: #444546;
  font-size: 24px;
  text-align: left;
  margin-left: 220px;
  font-weight: 500;
}
header .header-wrapper .disconnect-button-wrapper {
  margin-left: auto;
  margin-right: 10px;
}
header .header-wrapper .disconnect-button-wrapper .mdc-menu-surface {
  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12) !important;
}
header .header-wrapper .disconnect-button-wrapper .disconnect-button {
  background-color: transparent;
  text-decoration: none;
}
header .header-wrapper .disconnect-button-wrapper .disconnect-button span {
  display: block;
  color: #445d6b;
  font-weight: 600;
  text-align: center;
  margin-top: 3px;
  font-size: 14px;
}
header .header-wrapper .disconnect-button-wrapper #user-menu {
  top: unset !important;
}
header .header-wrapper .disconnect-button-wrapper #user-menu .menu-button {
  color: #445d6b;
  width: 100%;
  padding: 0;
  background: none;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
  outline: none;
  border: none;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
  display: block;
  line-height: 48px;
  height: 48px;
  text-align: left;
  text-decoration: none;
  position: relative;
  font-family: Montserrat, sans-serif;
  font-size: 14px;
}
@media (max-width: 1120px) {
  header {
    height: 80px;
  }
  header .header-wrapper {
    height: 80px;
  }
}
@media (max-width: 780px) {
  header .disconnect-button span {
    display: none !important;
  }
}
@media (max-width: 700px) {
  header {
    margin-bottom: 10px;
  }
  header .header-wrapper .header-title-text {
    margin: 5px;
    font-size: 16px;
    text-align: left;
  }
}

/*Footer Classes */
.footer-wrapper {
  background-color: #e8eef4;
  padding: 0px 10px;
  height: 64px;
}
.footer-wrapper a {
  color: #445d6b;
}
.footer-wrapper a:hover {
  text-decoration: underline;
}
.footer-wrapper .footer-link-wrapper {
  margin-left: 10px;
}
.footer-wrapper .link-footer {
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  padding: 2px;
}
.footer-wrapper .divider {
  font-size: 14px;
  line-height: normal;
  font-weight: bold;
  margin: 0 5px;
  color: #445d6b;
}
.footer-wrapper .footer-logo-link .footer-logo-desktop {
  margin-left: 10px;
  margin-right: 10px;
}
.footer-wrapper .footer-logo-link .footer-logo-mobile {
  margin-left: 5px;
  margin-right: 10px;
}

@media (max-width: 1120px) {
  .footer-wrapper {
    height: unset;
    flex-flow: column nowrap !important;
    justify-content: center;
    vertical-align: center;
    padding: 0px;
  }
  .footer-wrapper .footer-link-wrapper {
    flex-flow: column nowrap !important;
    justify-content: center;
    padding: 5px 0px;
  }
  .footer-wrapper .footer-link-wrapper .footer-link-card {
    padding: 5px 0px;
  }
  .footer-wrapper .divider {
    display: none;
  }
  .footer-wrapper .footer-logo-link {
    width: 100%;
    background-color: #445D6B42;
    justify-content: flex-end !important;
    padding: 5px 0px;
    margin: 0px;
  }
}
/*
 * Common components template
 */
.h1Title {
  margin-bottom: 30px;
  margin-top: 10px;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
}
.h1Title .decorationBar {
  border: 2.5px solid #b70023;
  background-color: #b70023;
  border-radius: 5px;
}
.h1Title .decorationBarSpace {
  margin-inline: 10px;
}
.h1Title .contentTitle {
  font-size: 25px;
  font-weight: 600;
  color: #444546;
  margin-left: 10px;
}
.h1Title .contentTitleLogin {
  font-size: 20px;
  font-weight: 600;
  color: #444546;
  margin-left: 0;
  justify-content: start;
}
.h1Title.center {
  justify-content: center;
}

.h1Title.secondary .decorationBar {
  border-color: #ffcd00;
  background-color: #ffcd00;
}

.h1Title.alert .decorationBar {
  border-color: #ffcd00;
  background-color: #ffcd00;
}
.h1Title.alert .contentTitle {
  color: #b70023;
  font-weight: 700;
}

.h2Title {
  margin: 30px 0 !important;
  font-size: 25px !important;
  font-weight: 500 !important;
  color: #445d6b !important;
}
.h2Title.center {
  text-align: center;
}

.subtitle {
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.subtitle .decorationBar {
  width: 56px;
  border: 2.5px solid #ffcd00;
  background-color: #ffcd00;
  border-radius: 5px;
}
.subtitle .contentSubtitle {
  font-weight: 800;
  color: #444546;
  margin-bottom: 10px;
  display: block;
}
.subtitle.center {
  align-items: center;
}

p.infoText {
  font-weight: 400;
  color: #444546;
}
@media (max-width: 700px) {
  p.infoText {
    text-align: center;
  }
}
p.helpText {
  font-weight: 600;
  color: #445d6b;
}
p.modalText {
  font-weight: 700;
  color: #444546;
  text-align: center;
}
p.formObligationText {
  font-weight: 500;
  font-style: italic;
  color: #5c7482;
  text-align: center;
}

a {
  width: fit-content;
}
a.infoLink {
  font-weight: 700;
  color: #b70023;
}
@media (max-width: 700px) {
  a.infoLink {
    text-align: center;
    display: block;
  }
}
a.back {
  color: #b70023;
  text-decoration: none;
  font-weight: 500;
  font-size: 16px;
  display: inline-flex;
}
a.back::before {
  content: "";
  background: url(../img/arrow-right-rouge.svg);
  background-size: contain;
  background-repeat: no-repeat;
  position: relative;
  display: block;
  width: 26px;
  height: 20px;
  left: -4px;
  top: 0;
}
a.whyMCP {
  font-style: italic;
  color: #445d6b;
  text-decoration: none;
  font-weight: 500;
  font-size: 16px;
  display: inline-flex;
  padding-right: 5px;
}
a.whyMCP::after {
  content: "";
  background: url(../img/point-interrogation-sur-un-fond-noir-circulaire.svg);
  background-size: contain;
  background-repeat: no-repeat;
  position: relative;
  display: block;
  width: 20px;
  height: 20px;
  right: -4px;
  top: 0;
}
@media (max-width: 700px) {
  a.whyMCP {
    font-size: 13px;
  }
}
a.homepageLinks {
  color: #b70023;
  text-decoration: underline;
  font-size: 12px;
  display: inline-flex;
}
a.infoLink:hover {
  color: #6e0014;
}
a.back:hover, a.whyMCP:hover {
  text-decoration: underline;
}
a.externalLink::before {
  content: "";
  background: url(../img/external-link-svg.svg);
  background-size: contain;
  background-repeat: no-repeat;
  position: relative;
  display: block;
  width: 20px;
  right: -2px;
  top: 0;
}
a.france-connect-link {
  margin-top: 12px;
  text-align: center;
}
a.france-connect-link::after {
  content: "";
  background: url(../img/external-link-svg.svg);
  background-size: contain;
  background-repeat: no-repeat;
  position: relative;
  width: 12px;
  top: -2;
  margin-left: 2px;
}

button {
  height: 40px;
}
button.link, button.delete, button.editMdp {
  display: inline-flex;
  padding-left: 22px;
  align-items: center;
}
button.link:before, button.delete:before, button.editMdp:before {
  content: "";
  position: relative;
  display: block;
  width: 32px;
  height: 16px;
  left: -8px;
}
button.delete:before {
  background: url(../img/delete.svg);
  background-size: contain;
  background-repeat: no-repeat;
}
button.editMdp:before {
  background: url(../img/edit.svg);
  background-size: contain;
  background-repeat: no-repeat;
}
button.link:before {
  background: url(../img/arrow-right-jaune.svg);
  background-size: contain;
  background-repeat: no-repeat;
}
button.modalBT {
  font-weight: 700;
}
button.modalBT.cancel {
  font-size: 13px;
}
button.backToApp {
  background-color: #e8eef4;
  color: #445d6b;
}

.alertMessage {
  font-weight: 600;
  font-size: 16px;
  display: flex;
  justify-content: flex-start;
  flex-wrap: nowrap;
}
.alertMessage.error {
  color: #b70023;
  align-items: center;
}
.alertMessage.info {
  color: #0b6042;
  align-items: flex-start;
}
.alertMessage .alertMessageContent {
  display: flex;
  flex-direction: column;
}
.alertMessage .alertMessageContent .alertMessageDetail {
  font-weight: 500;
}
.alertMessage img {
  margin: 5px;
}

.orSeparator {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
}
.orSeparator .horizontalBar {
  background-color: #445d6b;
  border-radius: 5px;
  border: 2.5px solid #445d6b;
  flex-grow: 2;
}
.orSeparator span {
  margin: 0 20px;
  color: #445d6b;
}

.infoArea {
  background-color: #E0B8C2;
  border-radius: 10px;
  padding: 5px 10%;
}
.infoArea span {
  color: #900123;
  font-size: 25px;
  font-weight: 600;
  text-align: center;
  display: block;
}

.infoLoginArea {
  background-color: #FAF3F3;
  padding: 5px 5%;
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
}
.infoLoginArea .infoLoginAreaDecorator {
  display: flex;
  justify-content: center;
  flex-direction: column;
  width: 10px;
  align-items: center;
  margin-right: 10px;
}
.infoLoginArea .infoLoginAreaDecorator .verticalRedBar {
  border: 4px solid #445d6b;
  background-color: #445d6b;
  border-radius: 5px;
  flex-grow: 2;
  margin-bottom: 2.5px;
}
.infoLoginArea .infoLoginAreaDecorator .verticalRedBar.fixed {
  max-width: 0;
  max-height: 0;
  flex-grow: 1;
  margin-top: 2.5px;
  margin-bottom: 2.5px;
}
.infoLoginArea .infoLoginAreaContent {
  color: #444546;
  font-weight: 500;
}

.basePage .bpLogo {
  margin: 20px 0 10px 0;
}
.basePage .bpH1Title {
  font-weight: 700;
  color: #5c7482;
  font-size: 25px;
  text-align: center;
  margin: 20px 0 20px 0;
}
.basePage .bpSubtitle {
  font-weight: 500;
  color: #5c7482;
  font-size: 20px;
  text-align: center;
  display: block;
  margin-bottom: 10px;
}
.basePage .bpSubtitle2 {
  color: #5c7482;
  text-align: center;
  display: block;
}
.basePage .bpH2Title {
  font-weight: 400;
  color: #5c7482;
}
.basePage .bpH3Title {
  font-weight: 400;
  color: #5c7482;
  display: block;
}
.basePage .bpImportantText {
  font-weight: 700;
  color: #444546;
}
.basePage .bpLink {
  color: #b70023;
  text-decoration: unset;
}
.basePage .bpLink:hover {
  text-decoration: underline;
}
.basePage .bpList {
  list-style-type: none;
  padding: unset;
}
.basePage .bpList li:before {
  content: "- ";
}
.basePage .bpList .bpSubList li:before {
  content: "";
}

main {
  min-height: calc(100vh - 64px - 40px - 64px);
  margin: 0 50px;
}
@media (max-width: 700px) {
  main {
    margin: 0 20px;
  }
}

.rgaaHiddenTitle {
  max-width: 0;
  max-height: 0;
  margin: unset;
  padding: unset;
  color: transparent;
}

.formInput {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.formInput .formInputElement {
  position: relative;
  width: fit-content;
}
.formInput .formInputElement input {
  border: 2px solid #5c7482;
  border-radius: 5px;
  padding: 5px 10px 5px 10px;
  font-size: 16px;
  height: 40px;
  box-sizing: border-box;
}
.formInput .formInputElement input.icone {
  padding-right: 40px;
}
.formInput .formInputElement input.error {
  border-color: #b70023;
}
.formInput .formInputElement input:focus {
  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.75);
  outline: unset;
}
.formInput .formInputElement button {
  background-color: transparent;
  border: 2px solid transparent;
  border-radius: 5px;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  width: 30px;
  height: 40px;
  position: absolute;
  right: 0px;
  top: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  overflow: hidden;
}
.formInput .formInputElement button .raised-color {
  background-color: transparent;
  position: absolute;
  top: 0;
  left: 0;
  height: 40px;
  width: 30px;
  transition: background-color 1s;
}
.formInput .formInputElement button:hover, .formInput .formInputElement button:focus {
  outline: unset;
  border-color: #6e0014;
}
.formInput .formInputElement button:active .raised-color {
  opacity: 0.2;
  background-color: #900123;
}
.formInput .validatorList {
  display: flex;
  align-items: center;
}
.formInput .validatorList span {
  display: flex;
  align-items: center;
  font-weight: 400 !important;
}
.formInput .validatorList span::before {
  content: "";
  background: url(../img/draw-check-mark-gris.svg);
  background-size: contain;
  background-repeat: no-repeat;
  position: relative;
  display: block;
  width: 11px;
  height: 11px;
  margin-right: 3px;
  top: 0;
}
.formInput .validatorList span.error::before {
  background: url(../img/croix-rouge-format-mdp.svg);
  background-size: contain;
  background-repeat: no-repeat;
}
.formInput .validatorList span.valid::before {
  background: url(../img/draw-check-mark-vert.svg);
  background-size: contain;
  background-repeat: no-repeat;
}

.formCheckbox {
  display: flex;
  flex-direction: column;
  /* span.error {
     font-size: 13px;
     margin-left: 5px;
     color: $primary-color;
     font-weight: $medium;
   }*/
}
.formCheckbox .formCheckboxContent {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: nowrap;
}
.formCheckbox .formCheckboxContent input {
  width: 20px;
  height: 20px;
  margin-right: 15px;
  margin-left: 0;
}
.formCheckbox .formCheckboxContent input::after {
  content: "";
  width: 16px;
  height: 16px;
  border: 2px solid #445d6b;
  background-color: #ffffff;
  border-radius: 2px;
  display: block;
  overflow: hidden;
}
.formCheckbox .formCheckboxContent input:hover::after {
  background-color: #9ea2a7;
}
.formCheckbox .formCheckboxContent input:checked::after {
  background: url(../img/checkbox.png);
  background-size: contain;
  background-repeat: no-repeat;
}
.formCheckbox .formCheckboxContent input:checked:hover::after {
  background: url(../img/checkbox-hover.png);
  background-size: contain;
  background-repeat: no-repeat;
}
.formCheckbox .formCheckboxContent input.error::after {
  border-color: #b70023;
}
.formCheckbox .formCheckboxContent label {
  color: #444546;
  font-weight: 400;
  font-size: 12px;
}

.formRadio fieldset {
  border: unset;
  display: flex;
  padding: unset;
  margin: unset;
  /*legend{
    font-weight: $bold;
    font-size: 20px;
    color: $grey-color;
    margin-left: 5px;
  }*/
}
.formRadio fieldset .formRadioElement {
  margin: 0 20px;
  display: flex;
  align-items: center;
}
.formRadio fieldset .formRadioElement input {
  margin: unset;
  width: 20px;
  height: 20px;
}
.formRadio fieldset .formRadioElement input::after {
  content: "";
  width: 16px;
  height: 16px;
  border: 2px solid #445d6b;
  background-color: #ffffff;
  border-radius: 16px;
  display: block;
  overflow: hidden;
  transition: 0.2s all linear;
}
.formRadio fieldset .formRadioElement input:checked::after {
  background-color: #445d6b;
}
.formRadio fieldset .formRadioElement input:hover::after {
  background-color: #9ea2a7;
}
.formRadio fieldset .formRadioElement input:checked:hover::after {
  background-color: #273841;
}
.formRadio fieldset .formRadioElement input.error::after {
  border-color: #b70023;
}
.formRadio fieldset .formRadioElement label {
  font-weight: 700;
  font-size: 16px;
  color: #445d6b;
  margin-left: 10px;
}

.formElement .labelElement {
  font-weight: 700;
  font-size: 20px;
  color: #445d6b;
  margin-left: 5px;
}
.formElement span {
  color: #445d6b;
  font-weight: 400;
  font-size: 13px;
  margin-left: 5px;
}
.formElement span.error {
  color: #b70023;
  font-weight: 500;
}
.formElement span.valid {
  color: #0b6042;
  font-weight: 500;
}

/* FLEX CT */
.d-flex {
  display: flex;
}
.d-flex.col {
  flex-direction: column;
}
.d-flex.col.vcenter {
  justify-content: center;
}
.d-flex.col.hcenter {
  align-items: center;
}
.d-flex.col.top {
  justify-content: flex-start;
}
.d-flex.col.bottom {
  justify-content: flex-end;
}
.d-flex.col.left {
  align-items: flex-start;
}
.d-flex.col.right {
  align-items: flex-end;
}
.d-flex.row {
  flex-direction: row;
}
.d-flex.row.vcenter {
  align-items: center;
}
.d-flex.row.hcenter {
  justify-content: center;
}
.d-flex.row.left {
  justify-content: flex-start;
}
.d-flex.row.right {
  justify-content: flex-end;
}
.d-flex.row.top {
  align-items: flex-start;
}
.d-flex.row.bottom {
  align-items: flex-end;
}
.d-flex.spaceb {
  justify-content: space-between;
}
.d-flex.spacea {
  justify-content: space-around;
}
.d-flex.spacee {
  justify-content: space-evenly;
}
.d-flex.stretch {
  align-items: stretch;
}
.d-flex.baseline {
  align-items: baseline;
}
.d-flex.wrap {
  flex-wrap: wrap;
}
.d-flex.nowrap {
  flex-wrap: nowrap;
}
.d-flex .xs1 {
  flex-grow: 1;
}
.d-flex .xs2 {
  flex-grow: 2;
}
.d-flex .xs3 {
  flex-grow: 3;
}
.d-flex .xs4 {
  flex-grow: 4;
}

.mobile {
  display: none !important;
}

.d-none {
  display: none;
}

.maxContainerSize {
  max-width: 1920px;
}
@media (min-width: 1920px) {
  .maxContainerSize {
    margin: auto;
    width: calc(1920px - 50px * 2);
  }
}

.container {
  min-height: calc(100vh - 64px - 40px - 64px);
}

.custom-scrollbar {
  /* width */
  /* Track */
  /* Handle */
  /* Buttons */
  /* Up */
  /* Down */
}
.custom-scrollbar::-webkit-scrollbar {
  width: 12px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: #e8eef4;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #5c7482;
  border-radius: 6px;
}
.custom-scrollbar::-webkit-scrollbar-button:single-button {
  display: block;
  height: 12px;
}
.custom-scrollbar::-webkit-scrollbar-button:single-button:vertical:decrement {
  background: url(../img/scrollbar-up.svg) no-repeat;
}
.custom-scrollbar::-webkit-scrollbar-button:single-button:vertical:increment {
  background: url(../img/scrollbar-down.svg) no-repeat;
}