@charset "utf-8";
/* CSS Document */

/* ----- Fonts ----- */

/* open-sans-300 - latin */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300;
  src: local(""),
    url("/resources/fonts/open-sans-v29-latin-300.woff2") format("woff2");
}
/* open-sans-regular - latin */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
  src: local(""),
    url("/resources/fonts/open-sans-v29-latin-regular.woff2") format("woff2");
}
/* open-sans-600 - latin */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 600;
  src: local(""),
    url("/resources/fonts/open-sans-v29-latin-600.woff2") format("woff2");
}
/* open-sans-700 - latin */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 700;
  src: local(""),
    url("/resources/fonts/open-sans-v29-latin-700.woff2") format("woff2");
}
/* open-sans-italic - latin */
@font-face {
  font-family: "Open Sans";
  font-style: italic;
  font-weight: 400;
  src: local(""),
    url("/resources/fonts/open-sans-v29-latin-italic.woff2") format("woff2");
}

/* playfair-display-regular - latin */
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 400;
  src: local(""),
    url("../fonts/playfair-display-v29-latin-regular.woff2") format("woff2");
}
/* playfair-display-600 - latin */
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 600;
  src: local(""),
    url("../fonts/playfair-display-v29-latin-600.woff2") format("woff2");
}

/* ----- END Fonts ----- */

#topmenu .login {
  z-index: 3000;
}

/* ----- Login ----- */

.loginSite#login {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.loginSite#login.loginBg {
  background-color: #f6f6f6;
  background-image: url(/resources/images/LoginBg.webp);
  background-position-y: top;
  background-repeat: no-repeat;
  flex: 1 1 100%;
}

.loginSite#login .contentLeft {
  height: auto;
}

.loginSite#login .contentLeft::after {
  content: "";
  flex: 1;
}

.loginSite#login .contentLeft .contentLeftContent {
  height: auto;
  min-height: 100%;
}

.loginSite#login .contentLeft h2 {
  color: white;
}

.loginSite#login .contentLeft iframe {
  border: none;
  width: 100%;
  height: 700px;
}

.loginSite#login .contentRight {
  position: relative;
  max-width: 90%;
}

.loginSite#login .contentRight #mobileUpcommingMaintenance {
  display: none;
  position: absolute;
  width: 100%;
  text-align: center;
}

.loginSite#login .contentRight #mobileUpcommingMaintenance a {
  display: inline-block;
  margin-left: 15px;
}

.loginSite#login .contentRight #mobileUpcommingMaintenance img {
  display: inline-block;
  width: 40px;
  margin: 0 5px -15px 0;
}

.loginSite#login .contentRight #mobileUpcommingMaintenance h2 {
  display: inline-block;
  margin-bottom: 5px;
}

.loginSite#login .contentRight #mobileUpcommingMaintenance span {
  display: block;
  color: white;
  text-align: left;
  margin-bottom: 5px;
  margin-left: 50px;
}

.loginSite#login .contentRight h2 {
  color: white;
}

.formContainer {
  width: 420px;
  max-width: 95%;
  background-color: RGB(255, 255, 255);
  box-shadow: 0 0 10px #ccc;
  margin: 50px auto;
  border-radius: 10px;
  padding-bottom: 10px;
}

.formContainer #loginUsing-bankid {
  text-align: center;
}

.formContainer .submit,
.formContainer #loginUsing-bankid .submit {
  width: 320px;
  max-width: 98%;
  font-family: "open sans";
  height: 42px;
  font-size: 16px;
  margin: auto;
}

.slideIn-container#login .submit:hover {
  opacity: 70%;
}

.formContainer .loginUsing .loginUsingImage {
  max-width: 60px;
  margin-top: 13px;
  margin-left: -13px;
}
.formContainer .loginUsing#loginUsing-bankid .loginInputContainer {
  display: flex;
  flex-direction: row;
  margin: auto;
  align-items: flex-start;
  width: 320px;
  max-width: 98%;
}

.loginInputContainer .iftaInputWrapper {
  width: 320px;
  max-width: 98%;
}

.formContainer .forgotPasswordLink,
.formContainer .loginMethodsContainer a.forgotPasswordLink {
  margin-top: 20px;
  margin-bottom: 20px;
  text-align: center;
  color: #707070;
  font-size: 14px;
}
.shownactivateBankIDtext {
  text-align: center;
  display: inline-block;
  color: #707070;
  font-size: 14px;
  margin-top: 20px;
}

@media (hover: hover) {
  .formContainer .forgotPasswordLink:hover,
  .formContainer .loginMethodsContainer a.forgotPasswordLink:hover,
  .shownactivateBankIDtext:hover {
    opacity: 0.7;
    color: #8a8a8a;
  }
}

.loginSite#login .close-slideIn-icon span {
  background-color: white;
}

.loginSite#login iframe#loginBankID {
  border: none;
  width: 100%;
  height: 180px;
}

@media only screen and (max-width: 350px) {
  iframe#loginBankID {
    height: 199px;
  }
}
.lang-de .loginSite#login iframe#loginBankID {
  height: 216px;
}

.loginSite#login .maintenance {
  display: none;
  padding: 10px 30px;
  box-sizing: border-box;
  font-size: 16px;
  text-align: center;
}

.loginSite#login .maintenance h2 {
  color: black;
  display: inline-block;
  position: relative;
}

.loginSite#login .maintenance h2 img {
  position: absolute;
  top: -7px;
  left: -50px;
  width: 40px;
}

.loginSite#login .maintenance p {
  text-align: left;
}

.loginSite#login .maintenance a {
  width: 100%;
  text-align: left;
  display: inline-block;
}
.formContainer img.loginLogga {
  display: block;
  margin-left: calc(20% - 20px);
  margin-right: auto;
  width: 50%;
  padding-top: 30px;
}

.topLogin {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.fas.fa-ellipsis-v.loginSetting {
  font-size: 25px;
  margin-left: 10px;
  margin-top: 8px;
  text-align: center;
  color: #fcc000;
  padding: 10px;
}
.fas.fa-ellipsis-v.loginSetting:hover {
  opacity: 0.7;
  cursor: pointer;
}

.logindropdown {
  position: relative;
  display: inline-block;
}

.fas.fa-ellipsis-v.logindropdownButton {
  font-size: 25px;
  margin-left: 10px;
  margin-top: 8px;
  text-align: center;
  color: #fcc000;
  padding: 10px;
  cursor: pointer;
}
.fas.fa-ellipsis-v.logindropdownButton:hover {
  opacity: 0.7;
}

.logindropdownWrapper .popupOverlay {
  display: block;
  visibility: hidden;
  position: fixed;
}

.logindropdown-content {
  display: none;
  position: absolute;
  background-color: #ffffff;
  border-radius: 10px;
  margin-left: 5px;
  overflow: auto;
  z-index: 1;
  box-shadow: 0 0 10px #ccc;
  max-width: calc(100% - 15px);
}

.logindropdownWrapper .logindropdown-content {
  display: block;
  visibility: hidden;
}

.logindropdown-content a {
  color: black;
  padding: 10px 10px;
  text-decoration: none;
  display: block;
  font-size: 14px;
}

.logindropdown-content a:before {
  font-family: "Font Awesome 5 Pro";
  font-size: 16px;
  color: #fcc000;
  font-weight: 600;
  padding-right: 10px;
  padding-left: 3px;
}

.logindropdown-content a#logindropdown-testComputer:before {
  content: "\f109";
  padding-right: 8px;
}

.logindropdown-content a#logindropdown-forgotPassword:before {
  content: "\f084";
}

.logindropdown-content .logindropdownBankIDchoice {
  display: flex;
  padding-left: 9px;
  max-height: 41px;
}

.logindropdown-content .logindropdownBankIDchoice a {
  display: inline-block;
  padding: 10px 5px 10px 10px;
}

.logindropdown-content .logindropdownBankIDchoice a:before {
  content: none;
}

.logindropdown-content a.logindropdownBankIDchoice img {
  margin: 0 14px 0 7px;
  max-width: 23px;
  display: inline-block;
  width: 50%;
}

.logindropdown-content a#logindropdown-support:before {
  content: "\f82d";
  padding: 0 20px 0 10px;
}

.logindropdown-content a#logindropdown-testComputer:before {
  content: "\f109";
  padding: 0 17px 0 7px;
}

.logindropdown-content a#logindropdown-forgotPassword:before {
  content: "\f084";
  padding: 0 19px 0 9px;
}

.logindropdown-content a.videoLoginLeaveLogin {
  padding-left: 54px;
}

.logindropdown-content a.videoLoginLeaveLogin:before {
  content: "\f03d";
  padding: 0 19px 0 8px;
  position: absolute;
  left: 11px;
}

.logindropdown-content a:hover {
  background-color: #eeeeee;
  cursor: pointer;
}

.logindropdown-content a#logindropdown-cookies:before {
  content: "\f013";
  padding: 0px 19px 0 9px;
}

.logindropdownEditCookies:hover {
  background-color: #eeeeee;
}

.app .logindropdownEditCookies {
  display: none;
}

.show {
  display: block;
}

.formContainer .loginUsing#loginUsing-password form {
  display: flex;
  flex-direction: column;
  align-content: center;
  margin-bottom: 0;
}

.formContainer .loginUsing#loginUsing-password form .togglePassword {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 15px;
  right: 2px;
  top: 4px;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0.6);
}

.formContainer .loginUsing#loginUsing-password form .togglePassword:before {
  content: "\f070";
  font-size: 14px;
  font-family: "Font Awesome 5 Pro";
  font-weight: bold;
  color: #333;
  position: absolute;
  right: 7px;
  top: 8px;
}

.formContainer
  .loginUsing#loginUsing-password
  form
  .togglePassword.togglePasswordVisible:before {
  content: "\f06e";
  right: 8px;
}

.methodDivider {
  position: relative;
  text-align: center;
  font-weight: 300;
  width: calc(100% + 60px);
  margin: 10px 0 10px -30px;
}

.methodDivider:before {
  content: " ";
  height: 1px;
  width: 40%;
  background: #8a8a8a;
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
}

.methodDivider:after {
  content: " ";
  height: 1px;
  width: 40%;
  background: #8a8a8a;
  display: block;
  position: absolute;
  top: 50%;
  right: 0;
}
.loginMethodsButton img {
  height: 22px;
  margin-right: 10px;
}

.bankIdMethodButton img {
  height: 100%;
  margin-right: 10px;
}

.bankIdMethodAutostart {
  margin-top: 5px;
  font-weight: 600;
  font-size: 14px;
  color: #3a8ada;
}
.bankIdMethodAutostart:hover {
  color: #e2ac00;
  cursor: pointer;
}

.loginMethodsButton[data-method="sv_bankid"] img {
  height: 36px;
  margin-left: -10px;
  margin-right: 0px;
}

.loginMethodsContainer {
  display: flex;
  flex-direction: column;
  width: 320px;
  max-width: 98%;
  margin: auto;
}

.loginMethodsButton,
.bankIdMethodButton {
  width: 100%;
  height: 42px;
  font-size: 14px;
  color: #333333;
  border-radius: 50px;
  border: 1px solid #707070;
  font-weight: 600;
  margin: 10px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  box-sizing: border-box;
}

@media (hover: hover) {
  .loginMethodsButton:hover,
  .bankIdMethodButton:hover {
    color: #333;
    cursor: pointer;
    outline: 1px solid #707070;
  }
}

.button {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fcc000;
  color: #ffffff;
  height: auto;
  width: fit-content;
  min-width: 100px;
  padding: 10px 20px;
  border-radius: 50px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  line-height: inherit;
  border: 0;
  margin: 10px 0;
  font-family: "Open Sans";
  cursor: pointer;
}

.loginButton::before {
  content: "";
  visibility: hidden;
  width: 12px;
  height: 12px;
  border: 3px solid white;
  border-radius: 50%;
  border-top: 3px solid #fcc000;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 1s linear infinite;
  margin-right: 10px;
  margin-left: -28px;
}
.loginButton.visible::before {
  visibility: visible;
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.checkboxContainer input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  z-index: -1000;
}
.checkboxContainer input[type="checkbox"] + label {
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  cursor: pointer;
  margin: 5px 0 15px 0;
  user-select: none;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0.6);
}

.checkboxContainer input[type="checkbox"] + label:before {
  display: inline-block;
  font-size: 18px;
  font-family: "Font Awesome 5 Pro";
  color: #fcc000;
  content: "\f0c8";
  cursor: pointer;
  margin: 0 5px;
}

.checkboxContainer input[type="checkbox"]:focus-visible + label::before {
  color: #5badff;
}

.checkboxContainer input[type="checkbox"]:checked + label:before {
  content: "\f14a";
  font-weight: 700;
}

.formContainer .loginMethodsContainer a.forgotPasswordLink:focus {
  outline: none;
  color: #5badff;
}

.formContainer .submit:focus-visible,
.formContainer #loginUsing-bankid .submit:focus-visible {
  outline: #5badff auto 1px;
}

.loginMethodsButton:focus-visible,
.bankIdMethodButton:focus-visible {
  outline: #5badff auto 1px;
}

.supportButton:focus-visible {
  outline: none;
  color: #5badff;
}

:focus-visible {
  outline: #5badff auto 1px;
}

.contactWrapper a:focus-visible {
  outline: none;
  color: #5badff;
}

/* ----- IFTA input ----- */

.iftaInputWrapper {
  position: relative;
  width: 90%;
  margin: auto;
  margin: 5px auto 0 auto;
  display: block;
  outline: none;
}

.iftaInputWrapper label,
.iftaInputWrapper input,
.iftaInputWrapper textarea,
.iftaInputWrapper .customSelect {
  transition: border-color 0.3s ease-in-out;
  font-family: "Open Sans", "sans-serif";
}

.iftaInputWrapper input:not([type="checkbox"]) ~ label,
.iftaInputWrapper textarea ~ label,
.iftaInputWrapper.iftaInternationalPhoneInput label,
.iftaSelectWrapper .iftaInputWrapper label {
  color: #333333;
  font-size: 12px;
  font-weight: bold;
  position: absolute;
  top: 8px;
  left: 10px;
  user-select: none;
}

.iftaInputWrapper.iftaInternationalPhoneInput .iti {
  width: 100%;
}

.iftaInputWrapper.iftaInternationalPhoneInput .iti .iti__flag {
  background-image: url("/resources/images/flags.png");
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .iftaInputWrapper.iftaInternationalPhoneInput .iti .iti__flag {
    background-image: url("/resources/images/flags@2x.png");
  }
}

.iftaInputWrapper.iftaInternationalPhoneInput .iti__selected-flag {
  margin-top: 25px;
  height: calc(100% - 25px);
  border-top-right-radius: 10px;
}

.iftaInputWrapper input:not([type="checkbox"]),
.iftaInputWrapper textarea,
.iftaInputWrapper .customSelect {
  background-color: white;
  border: 1px solid #ccc;
  border-radius: 10px;
  color: #333333;
  font-size: 14px;
  padding: 30px 10px 8px 10px;
  box-sizing: border-box;
  outline: none;
  width: 100%;
  margin: 1px;
}

.iftaInputWrapper textarea {
  height: 100px;
  appearance: none;
  box-shadow: none;
}

.iftaInputWrapper textarea ~ label {
  background-color: rgba(255, 255, 255, 0.9);
  padding: 6px 8px;
  top: 2px;
  left: 2px;
  border-radius: 10px;
}

.iftaInputWrapper input:not([type="checkbox"]) ~ .iftaRequired,
.iftaInputWrapper textarea ~ .iftaRequired,
.iftaInputWrapper.iftaInternationalPhoneInput .iftaRequired,
.iftaSelectWrapper .iftaRequired {
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: 12px;
  font-weight: 600;
}

.iftaInputWrapper ::placeholder {
  color: #ababab;
}

.iftaInputWrapper ::-webkit-input-placeholder {
  color: #ababab;
}

.iftaInputWrapper ::-ms-input-placeholder {
  color: #ababab;
}

.iftaSelectWrapper {
  position: relative;
}

.iftaSelectWrapper .shownInput {
  color: #ababab;
  text-transform: capitalize;
}

.iftaInputWrapper input:not([type="checkbox"]):focus,
.iftaSelectWrapper .iftaInputWrapper:focus .customSelect {
  color: #000;
  border: 2px solid #5badff;
  margin: 0px;
}

.iftaInputWrapper.iftaInternationalPhoneInput .iti input[type="tel"] {
  margin: 1px !important;
}

.iftaInputWrapper.iftaInternationalPhoneInput .iti input[type="tel"]:focus,
.iftaInputWrapper.iftaInternationalPhoneInput.iftaValidationError
  .iti
  input[type="tel"] {
  margin: 0px !important;
}

.iftaSelectWrapper .iftaInputWrapper {
  display: flex;
  cursor: pointer;
}

.iftaSelectWrapper .iftaInputWrapper::after {
  content: "\f107";
  font-family: "Font Awesome 5 Pro";
  color: #333333;
  position: absolute;
  right: 10px;
  bottom: 8px;
  pointer-events: none;
  font-size: 16px;
}

.iftaSelectWrapper .customSelectOptions {
  display: none;
  position: absolute;
  z-index: 100;
  top: 100%;
  background-color: white;
  border: 1px solid #ccc;
  border-radius: 5px;
  width: 100%;
  padding: 10px 0;
  max-height: 250px;
  overflow: auto;
}

.iftaSelectWrapper .customSelectOptions::-webkit-scrollbar,
.iftaInputWrapper textarea::-webkit-scrollbar {
  width: 10px; /* width of the entire scrollbar */
}

.iftaSelectWrapper .customSelectOptions::-webkit-scrollbar-track,
.iftaInputWrapper textarea::-webkit-scrollbar-track {
  background: #f1f1f1; /* color of the tracking area */
  border-radius: 20px;
}

.iftaSelectWrapper .customSelectOptions::-webkit-scrollbar-thumb,
.iftaInputWrapper textarea::-webkit-scrollbar-thumb {
  background-color: #ccc; /* color of the scroll thumb */
  border-radius: 20px; /* roundness of the scroll thumb */
}

.iftaSelectWrapper .customSelectOptions,
.iftaInputWrapper textarea {
  scrollbar-width: thin; /* "auto" or "thin" */
  scrollbar-color: #ccc #f1f1f1; /* scroll thumb and track */
}

.iftaSelectWrapper .customSelectOptions div {
  padding: 10px 10px;
  cursor: pointer;
  text-transform: capitalize;
  font-size: 14px;
}

.lang-en .iftaSelectWrapper .customSelectOptions div {
  text-transform: none;
}

.iftaSelectWrapper .customSelectOptions div:hover {
  background-color: #f1f1f1;
}

.iftaSelectWrapper.iftaMultipleSelectWrapper .customSelectOptions div:before {
  content: "\f0c8";
  font-family: "Font Awesome 5 Pro";
  margin-right: 10px;
  font-size: 16px;
  font-weight: 300;
}

.iftaSelectWrapper.iftaMultipleSelectWrapper
  .customSelectOptions
  div.selected:before {
  content: "\f14a";
  font-weight: bold;
}

.iftaSelectWrapper .customSelectOptions div.fullyBookedOption {
  pointer-events: none;
  color: #ccc;
}

.iftaSelectWrapper .customSelectOptions div.fullyBookedOption:hover {
  background-color: none;
}

.iftaInputError {
  color: #ff4e4e;
  padding: 0 0 0 10px;
  min-height: 17px;
  line-height: normal;
  font-size: 12px;
  visibility: hidden;
  margin-top: 2px;
  margin-bottom: 2px;
  text-align: left;
}

.iftaInputWrapper.iftaValidationError .iftaInputError,
.iftaInputWrapper.checkboxContainer.iftaValidationError ~ .iftaInputError {
  visibility: visible;
}

.iftaInputWrapper.iftaValidationError input:not([type="checkbox"]),
.iftaInputWrapper.iftaValidationError textarea,
.iftaSelectWrapper .iftaInputWrapper.iftaValidationError .customSelect {
  background-color: #fff6f2;
  color: #ff4e4e;
  border: 2px solid #ff4e4e;
  margin: 0px;
}

.iftaInputWrapper.iftaValidationError input:not([type="checkbox"]) ~ label,
.iftaSelectWrapper .iftaInputWrapper.iftaValidationError label,
.iftaInputWrapper.iftaValidationError .iftaRequired {
  color: #ff4e4e;
}

.errormessage {
  background: #ff4e4e;
  padding: 5px 10px;
  border-radius: 10px;
  position: relative;
  display: inline-block;
  box-shadow: -1px 1px 10px rgb(0 0 0 / 40%);
  color: white;
  visibility: hidden;
  font-size: 12px;
  margin-top: 10px;
}

.errormessage:before {
  content: "";
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #ff4e4e;
  position: absolute;
  top: -10px;
}

.invalid .errormessage,
.invalid-email .errormessage,
.invalid-pnr .errormessage {
  visibility: visible;
  z-index: 1;
}

.errormessage span.errormessage-email,
.invalid-email .errormessage span.errormessage-empty,
.errormessage span.errormessage-pnr,
.invalid-pnr .errormessage span.errormessage-empty {
  display: none;
}

.invalid-email .errormessage .errormessage-email,
.invalid-pnr .errormessage .errormessage-pnr {
  display: inline-block;
}

.iftaInputWrapper.checkboxContainer .iftaRequired {
  font-size: 12px;
  font-weight: 600;
}

.iftaInputWrapper.checkboxContainer {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  width: 90%;
  margin: auto;
}

.iftaInputWrapper.checkboxContainer input[type="checkbox"] {
  position: relative;
  height: 18px;
  width: 18px;
  margin-right: 10px;
  margin-left: 0;
  margin-top: 0;
  flex: 0 0 18px;
  appearance: none;
}

.iftaInputWrapper.checkboxContainer label {
  padding-right: 10px;
}

.iftaInputWrapper.checkboxContainer input[type="checkbox"]:before,
.iftaInputWrapper.radioContainer input[type="radio"]:before {
  left: 0;
  top: 0;
  width: 18px;
  height: 18px;
  font-size: 18px;
  line-height: 1;
  position: absolute;
  font-family: "Font Awesome 5 Pro";
  color: #fcc000;
  cursor: pointer;
}

.iftaInputWrapper.checkboxContainer input[type="checkbox"]:before {
  content: "\f0c8";
}

.iftaInputWrapper.checkboxContainer input[type="checkbox"]:checked:before {
  content: "\f14a";
  font-weight: bold;
}

.iftaInputWrapper.checkboxContainer.iftaValidationError input::before {
  color: #ff4e4e;
}

/* ----- END IFTA input ----- */

/* Login button order */

.loginMethodsContainer .loginUsing {
  display: none;
  order: -2;
}

.loginMethodsContainer .forgotPasswordLink {
  order: 0;
}

.loginMethodsContainer .methodDivider {
  order: 0;
}

.loginMethodsContainer.active-te_password #loginUsing-password {
  display: block;
}

.loginMethodsContainer.active-sv_bankid #loginUsing-bankid {
  display: flex;
  justify-content: center;
}

.loginMethodsContainer.active-te_password
  .loginMethodsButton[data-method="te_password"] {
  display: none;
}

.loginMethodsContainer.active-sv_bankid
  .loginMethodsButton[data-method="sv_bankid"] {
  display: none;
}

.loginMethodsContainer.active-google .loginMethodsButton[data-method="google"] {
  order: -1 !important;
}

.loginMethodsContainer.active-microsoft
  .loginMethodsButton[data-method="microsoft"] {
  order: -1 !important;
}

.loginMethodsContainer .loginMethodsButton[data-method="te_password"] {
  order: 1;
}

/* Default order SV */

.lang-sv .loginMethodsContainer .loginMethodsButton[data-method="sv_bankid"] {
  order: 2;
}

.lang-sv .loginMethodsContainer .loginMethodsButton[data-method="google"] {
  order: 3;
}

.lang-sv .loginMethodsContainer .loginMethodsButton[data-method="microsoft"] {
  order: 4;
}

/* Default order EN */

.lang-en .loginMethodsContainer .loginMethodsButton[data-method="sv_bankid"] {
  order: 2;
}

.lang-en .loginMethodsContainer .loginMethodsButton[data-method="google"] {
  order: 3;
}

.lang-en .loginMethodsContainer .loginMethodsButton[data-method="microsoft"] {
  order: 4;
}

/* Default order DE */

.lang-de .loginMethodsContainer .loginMethodsButton[data-method="google"] {
  order: 2;
}

.lang-de .loginMethodsContainer .loginMethodsButton[data-method="microsoft"] {
  order: 3;
}

.lang-de .loginMethodsContainer .loginMethodsButton[data-method="sv_bankid"] {
  order: 4;
}

@media only screen and (max-width: 700px) {
  .loginSite#login .contentLeft {
    order: 2;
    min-height: 0;
  }

  .loginSite#login .contentRight {
    order: 1;
  }

  .loginSite#login .contentRight #mobileUpcommingMaintenance.active {
    display: flex;
  }
  .loginSite#login .loginUsing-header img.loginUsingImage {
    order: 1;
    flex: 0 0 80px;
    width: auto;
    height: 60px;
    margin-top: 10px;
  }
  .loginSite#login .chooseLogin-page .buttons-container {
    margin-top: 0px;
  }

  .formContainer {
    box-sizing: border-box;
  }
}

@media only screen and (max-width: 450px) {
  .methodDivider {
    width: 100%;
    margin: 10px auto;
  }
  .formContainer {
    margin-top: 20px;
    margin-bottom: 0;
  }
}

@media only screen and (max-width: 350px) {
  .logindropdown-content {
    min-width: auto;
  }
}

#supportPopupWeb .button {
  display: inline-flex;
  align-items: center;
  margin: auto;
}
#supportPopupWeb .button#faq:before {
  font-family: "Font Awesome 5 Pro";
  color: white;
  font-weight: bold;
  padding-right: 10px;
  font-size: 18px;
  text-align: center;
  content: "\f128";
}
#supportPopupWeb .button#teHelp:before {
  font-family: "Font Awesome 5 Pro";
  color: white;
  font-weight: bold;
  padding-right: 10px;
  font-size: 18px;
  text-align: center;
  content: "\f02d";
}

#supportPopupWeb .popupContent h3 {
  margin-top: auto;
}

#supportPopupWeb .popupContent {
  margin-top: 30px;
}

#supportPopupWeb .option {
  margin-bottom: 30px;
}

#supportPopupWeb p {
  font-size: 14px;
}

/* BankID QR Code */
#loginUsing-bankid #loginUsing-bankid-qrCode {
  align-items: center;
  flex: auto;
  display: flex;
  flex-direction: column;
  max-width: 100%;
}

#loginUsing-bankid #loginUsing-bankid-qrCode .bankIdSwapContainer {
  align-items: center;
  flex: auto;
  display: flex;
  flex-direction: column;
  max-width: 100%;
  display: none;
  align-items: center;
  flex-direction: column;
  gap: 10px;
}

#loginUsing-bankid {
  align-items: center;
  flex: auto;
  gap: 20px;
}

#loginUsing-bankid .qrCodeContainer {
  height: 180px;
  width: 180px;
  overflow: hidden;
  font-size: 50px;
  animation: pulse 5.8s 100ms infinite;
  display: flex;
}

#loginUsing-bankid .qrCodeContainer .bankidTitle img {
  max-width: 100%;
}

#loginUsing-bankid .qrCodeContainer .qrCodeItem {
  display: flex;
  margin: auto;
  max-width: 90%;
  max-height: 90%;
}

#loginUsing-bankid .qrCodeContainer .qrCodeItem img {
  max-width: 100%;
  max-height: 100%;
}

#loginUsing-bankid .qrCodeContainer .qrCodeItem canvas {
  max-width: 100%;
  max-height: 100%;
}

#loginUsing-bankid .bankIdLogo {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
#loginUsing-bankid .bankIdLogo p#bankIdLogoTitleP {
  font-size: 16px;
  text-align: left;
  margin-right: 15px;
}

#loginUsing-bankid .bankIdLogo img {
  width: 64px;
  height: auto;
}

#loginUsing-bankid .bankIdLogoTitleSubP {
  margin: 5px;
  display: block;
  text-align: center;
}

#loginUsing-bankid .bankIdLogoTitleSubP p {
  margin: 0px;
  color: #707070;
  font-size: 14px;
}

#loginUsing-bankid .bankIdImageContainer {
  margin-top: 30px;
  margin-bottom: 30px;
}

#loginUsing-bankid #bankIdsuccessIcon {
  font-family: "Font Awesome 5 Pro";
  color: #fcc000;
  font-weight: bold;
  padding-right: 10px;
  font-size: 60px;
  content: "\f00c";
  margin-bottom: 30px;
  margin-top: 30px;
}

#loginUsing-bankid.active-bankId-defaultMobile #bankId-defaultMobile {
  display: flex;
}

#loginUsing-bankid.active-bankId-defaultDesktop #bankId-defaultDesktop {
  display: flex;
}

#loginUsing-bankid.active-bankId-qrCode #bankId-qrCode {
  display: flex;
}

#loginUsing-bankid.active-bankId-error #bankId-error {
  display: flex;
}

#loginUsing-bankid.active-bankId-success #bankId-success {
  display: flex;
}

#loginUsing-bankid.active-bankId-loading #bankId-loading {
  display: flex;
}

#loginUsing-bankid.active-bankId-timeout #bankId-timeout {
  display: flex;
}

#loginUsing-bankid.active-bankId-noUserFound #bankId-noUserFound {
  display: flex;
}

.spinner {
  color: #fcc000;
  font-size: 45px;
  text-indent: -9999em;
  overflow: hidden;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  position: relative;
  transform: translateZ(0);
  animation: dottedSpinner 1.7s infinite ease, round 1.7s infinite ease;
  margin: 30px;
}

#loginUsing-bankid #loginUsing-bankid-qrCode .bankId-default {
  width: 100%;
  padding-bottom: 10px;
}

@keyframes dottedSpinner {
  0% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em,
      0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
  5%,
  95% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em,
      0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
  10%,
  59% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em,
      -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em,
      -0.297em -0.775em 0 -0.477em;
  }
  20% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em,
      -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em,
      -0.749em -0.34em 0 -0.477em;
  }
  38% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em,
      -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em,
      -0.82em -0.09em 0 -0.477em;
  }
  100% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em,
      0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
}

@keyframes round {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(252, 192, 0, 1);
  }

  25% {
    box-shadow: 0 0 0 8px rgba(252, 192, 0, 0);
  }

  35% {
    box-shadow: 0 0 0 0 rgba(252, 192, 0, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(252, 192, 0, 0);
  }
}

/* END */