html {
  /**--------------------------------------------------------------------------
  * 62.5% of 16px = 10px so 1.6rem = 16px
  16px = usual default base font size of the browser
  fontSizeSmall(=1.3rem) used as default font size in the app equals to 13px
  --------------------------------------------------------------------------*/
  font-size: 62.5% !important;
}

body {
  display:flex;
  position:relative;
  overflow: hidden;
  flex-direction: column;
}

body * {
  font-family: Arial, Helvetica, sans-serif;
}

body.error-logo {
  background-image: none !important;
}

.allplan-logo {
  width: 31.4rem; 
  margin: 9rem 0.8rem 0.8rem 8.3rem;
}

.login-pf-page{
  margin: auto;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  padding-top: 0rem;
  transform: translate(0%, -25%);
}
.kc-body-login .login-pf-page{
  transform: translate(0%, -10%);
  min-width: 33.7rem;
}
.error-logo .login-pf-page{
  position: initial;
  -ms-transform: none;
  transform:none;
  margin-left: 0;
  display: flex;
  align-items: center;
}

#kc-form-options .checkbox label{  
  max-width:100%;
  padding-left:0;
  display:flex;
  flex-flow: row-reverse;
}
#kc-form-options .checkbox label span{  
  margin-top:-0.4rem;
}

#kc-form-options .checkbox input:checked+span{
  background-image: url("../img/checkbox_on.svg");
}

#kc-form-options .checkbox input:checked:hover+span{
  background-image: url("../img/checkbox_on_hovered.svg");
}
#kc-form-options .checkbox input:checked:focus+span{
  background-image: url("../img/checkbox_on_hovered.svg");
}
#kc-form-options .checkbox input:checked:active+span{
  background-image: url("../img/checkbox_on_pressed.svg");
}

#kc-form-options .checkbox input+span{
  background-image: url("../img/checkbox_off.svg");
}

#kc-form-options .checkbox input:hover+span{
  background-image: url("../img/checkbox_off_hovered.svg");
}
#kc-form-options .checkbox input:focus+span{
  background-image: url("../img/checkbox_off_hovered.svg");
}
#kc-form-options .checkbox input:active+span{
  background-image: url("../img/checkbox_off_pressed.svg");
}

.checkbox span {
  border: 0.2rem solid #7f7f7f;
  border-radius: 0.2rem;
  background: var(--colors-neutral-white);
  background-size: 100% 100%;
  width: 2rem;
  height: 2rem;  
  display:block;
}

#kc-form-options .checkbox{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.4rem;
  margin-top: 0;
  color: #72767b;
}

.checkbox input + span, .checkbox input:checked + span {
  background-position: -0.3rem center;
  background-repeat: no-repeat;
  background-color: transparent;  
  width: 1.8rem;
  border: 0;
  min-width: 1.8rem;
  min-height: 1.8rem;
}

#kc-form-options .checkbox .label{
  display:flex;
  flex-flow: wrap-reverse;
}

#kc-form-options .checkbox input{
  opacity: 0;
  position: absolute;
  z-index: -1;
  height: 0;
  width: 0;
  padding: 0;
  margin: 0;
}

#kc-registration span a{
  color:var(--color-brand-primary);
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-size: 1.6rem;
  letter-spacing: 0.2rem;
}

#kc-form-options label{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.4rem;
  color:#333333;  
}

#kc-registration-container{
  display:table-row;
}

#kc-page-title{
  font-family: Arial, Helvetica, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 3rem;
  line-height: normal;
  color: #333333;
  white-space:nowrap;
}

.kc-body-login #kc-page-title {
  font-size: 2rem;
  margin-bottom: 3.8rem;
  white-space: initial;
}

.kc-body-login .pf-c-form__label {
  font-size: 1.4rem;
  line-height: normal;
  margin-bottom: 0.4rem;
}

.kc-body-login .pf-c-form-control, .kc-body-login .form-group .pf-c-form-control:not(textarea) {
  height: 4.4rem;
  font-size: 1.4rem;
  flex-shrink: 0;
  border: 1px solid #CCC;
  background-color: var(--colors-neutral-white) !important;
  background-size: 2.1rem;
  -webkit-text-fill-color: #333;
  color: #333;
}

.error-logo #kc-page-title{
  white-space: initial;
  text-align: left;
}

.error-no-logo #kc-page-title {
  text-wrap: initial;
}

.error-no-logo #kc-error-message .instruction {
  font-size: 2rem;
  margin: 0;
}

.error-no-logo #kc-error-message .instruction:first-of-type {
  margin-top: 0.5rem;
}

.error-no-logo #kc-error-message .instruction:last-of-type {
  margin-bottom: 0.5rem;
}

.error-no-logo #kc-error-message #kc-form-buttons {
  margin-top: 4.5rem;
  display: flex;
  flex-flow: column;
  align-items: flex-end;
}

.error-no-logo #kc-error-message #kc-form-buttons .btn-lg {
  padding: 1.8rem 5.3rem;
  text-transform: uppercase;
}

.pf-c-button.pf-m-primary {
  background-color:var(--color-brand-primary);
  border-radius: 50vh;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.6rem;
  font-weight: bold;
  color:var(--colors-neutral-white);
  letter-spacing: 0.16rem;
  line-height: 1.84rem;
  text-wrap: auto;
}

.login-error-link {
  display: none;
}

.kc-body-login .pf-c-button.pf-m-secondary {
  border-radius: 50vh;
  border-color: var(--color-brand-primary);
  border-style: solid;
  border-width: 1px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.6rem;
  font-weight: bold;
  color:var(--color-brand-primary);
  letter-spacing: 0.16rem;
  line-height: 1.84rem;
  --pf-c-button--after--BorderColor: transparent;
  text-wrap: auto;
}

.kc-body-login .pf-c-button.pf-m-secondary:hover {
  border-color: var(--color-background-button-primary-hover);
  color: var(--color-background-button-primary-hover);
  background-color: var(--color-background-button-secondary-hover);
}

.kc-body-login-account-exists .form-group {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.pf-c-button.pf-m-primary:hover {
  background-color:var(--color-background-button-primary-hover);
}

.form-group.login-pf-settings.login-pf-reset-password{
  flex-flow:row-reverse;
  margin-top:-0.5rem;
}

.form-group.login-pf-settings.login-pf-rememberme{
  margin-top:1.5rem;
  margin-bottom:0;
}


.login-pf-reset-password span a{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.4rem;
  color:#333333;
}

#input-error, .kc-body-login .pf-c-alert__title {
  display:block;
  background-color: #f2dede;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.4rem;
  color:#BF0023;
  margin-left: auto;
  margin-right: auto;
  margin-top:1rem;
  text-align: center;
}

.kc-body-login #input-error, .kc-body-login .pf-c-alert__title {
  margin-top: 0.8rem;
  padding: 0.8rem 1.2rem;
  line-height: normal;
}

.kc-body-login .pf-c-alert__title {
  margin: 0;
}

.kc-body-login .pf-c-alert .pf-c-alert__icon {
  display: none;
}

.kc-body-login .pf-c-alert {
  margin-top: 2.4rem;
  padding: 0;
  border: 0;
}

.kc-body-login .password {
  display: flex;
  position: relative;
}

.kc-body-login .password input::-ms-reveal {
  display: none;
}

.kc-body-login .password input::-ms-clear {
  height: 0;
  width: 0;
}

.kc-body-login .password .icon-password-show {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  margin-top: auto;
  margin-bottom: auto;
  margin-right: 1.0rem;
  background-image: url("../img/eye_password_black.svg");
  background-repeat: no-repeat;
  background-position: center;
  height: 1.8rem;
  width: 1.8rem;
  background-size: 1.8rem;
}

.kc-body-login .password .icon-password-show.active {
  background-image: url("../img/eye_password_white.svg");
  background-color: var(--password-show-icon-active-color);
}

.kc-body-login .password .icon-password-show.hidden {
  display: none;
}

.pf-c-form__label{
  font-size: 1.4rem;
  color: #333333;
  font-family: Arial, Helvetica, sans-serif;
}

.pf-c-form-control[aria-invalid=true]{
  background-repeat:no-repeat;
}

.main-container {
  display: flex;
  flex-grow: 1;
  flex-shrink: 1;
  flex-flow: column;
  overflow: auto;
  position: relative;
}

.error-logo .main-container {
  flex-flow: row;
}

.login-footer {
  border-top: 1px solid #333333;
  margin: auto 11rem 1.9rem 11rem;
  padding-top: 2.2rem;
  text-align: center;
  line-height: 1.6rem;
  display: flex;
  flex-shrink: 0;
}

.login-footer.login-footer-inner {
  position: relative;
 }
.login-footer.login-footer-inner ul {
    padding: 0.7rem;
}
.login-footer div{
  cursor: pointer;
}
.login-footer ul {
  list-style-type: none;
  display: flex;
  flex-grow: 1;
}

.login-footer ul li {
  display: inline-block;
}
.login-footer ul li .no-pointer {
  cursor: default;
}
.login-footer ul li .no-pointer ~ li {
  margin-left: 1.5rem;
}

.login-footer ul  li div:hover{
  font-weight: 600;
  letter-spacing: .0rem;
}

.register-user-link, .forgot-password-link {
  display: flex;
  justify-content: end;
}

.register-user-link {
  font-size: 1.6rem;
}

.forgot-password-link, .forgot-password-link a, .forgot-password-link a:hover, .forgot-password-link a:focus, #try-another-way, #try-another-way:hover, #try-another-way:focus {
  text-decoration: none;
  color: #7F7F7F;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-size: 1.4rem;
  line-height: normal;
}

.register-user-link, .register-user-link a, .register-user-link a:hover, .register-user-link a:focus {
  text-decoration: none;
  color: #7F7F7F;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-size: 1.6rem;
  line-height: normal;
}

.login-footer ul li, .login-footer ul li a, .login-footer ul li a:hover, .login-footer ul li a:focus{
  text-decoration: none;
  color: #7F7F7F;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-size: 1.2rem;
  line-height: normal;
}

.login-footer ul li ~ li {
  margin-left: 1.6rem;
}

.login-footer ul li a:hover, .register-user-link a:hover, .forgot-password-link a:hover, #try-another-way:hover {
  color: var(--colors-neutral-black);
}

.modal-title-buttons{
  position: fixed;
  right:2rem;
  top:2rem;  
  z-index: 1;
}

.close-button{
  cursor: pointer;
  margin-left: 0.3rem;
  margin-top: auto;
  margin-bottom: 0.3rem; 
}

.terms{
  font-size: 1.6rem;
  text-align:initial; 
  background-color: var(--colors-neutral-white);
  margin-top: 0.8rem;
  padding: 1.563em;
  font-family: Arial, Helvetica, sans-serif;
}

.terms h1{
  font-size: 3.6rem;
  margin-top: 2rem;
  margin-bottom: 1rem;
  font-family: inherit;
  font-weight: 500;
  line-height: 1.1;
  color: inherit
}

.modal-info{
  position: fixed;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;  
  text-align: center;
  overflow: auto;
}

.visible {
  display:block;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color:var(--colors-neutral-white);  
}
#dataProtectionContentContainerId, #imprintContentContainerId, #termsOfUseContentContainerId {
  display: none;
}

#dataProtectionContentContainerId.visible, #imprintContentContainerId.visible, #termsOfUseContentContainerId.visible {
  display: block;
}
.allplan-404-logo-container{
  display: none;
}

.allplan-404-logo {
  background: url("../img/page-404.svg") no-repeat;
  height: 40.8rem;
  width: 34.2rem;
  margin-left: 21.2rem;
  margin-right: 2.5rem;
  background-size: contain;
  position: relative;
}

.please-check-url{
  color: var(--colors-neutral-black);
  font-size: 2.4rem;
}

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

/* Patternfly CSS places a "bg-login.jpg" as the background on this ".login-pf" class.
   This clashes with the "keycloak-bg.png' background defined on the body below.
   Therefore the Patternfly background must be set to none. */
.login-pf {
    background: none;
}

.login-pf body {
    background: url("../img/keycloak-bg.png") no-repeat center center fixed;
    background-size: cover;
    height: 100%;
}

textarea.pf-c-form-control {
	height: auto;
}

.pf-c-alert__title {
    font-size: var(--pf-global--FontSize--xs);
}

p.instruction {
    margin: 0.5rem 0;
}

.pf-c-button.pf-m-control {
    border: solid var(--pf-global--BorderWidth--sm);
    border-color: rgba(230, 230, 230, 0.5);
}

h1#kc-page-title {
    margin-top: 1.3rem;
}
.error-logo h1#kc-page-title {
  font-size:3.2rem;
}

#kc-locale ul {
    background-color: var(--pf-global--BackgroundColor--100);
    display: none;
    top: 2rem;
    min-width: 10rem;
    padding: 0;
}

#kc-locale-dropdown{
    display: inline-block;
    position:absolute;
    right:0;
}

#kc-locale-dropdown:hover ul {
    display:block;
}

#kc-locale-dropdown a {
    color: var(--colors-neutral-black);
    text-align: right;
    font-size: 1.4rem;
    font-family: Arial, Helvetica, sans-serif;
}

a#kc-current-locale-link::after {
    content: "\2c5";
    margin-left: var(--pf-global--spacer--xs)
}

.login-pf .container {
    padding-top: 4rem;
}

.login-pf a:hover {
    color: #0099d3;
}

#kc-logo {
    width: 100%;
}

div.kc-logo-text {
    background-image: url(../img/keycloak-logo-text.png);
    background-repeat: no-repeat;
    height: 6.3rem;
    width: 30rem;
    margin: 0 auto;
}

div.kc-logo-text span {
    display: none;
}

#kc-header {
    color: #ededed;
    overflow: visible;
    white-space: nowrap;
    margin-bottom:0;
}

#kc-header-wrapper {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2.6rem;    
    letter-spacing: -0.1rem;
    line-height: 1.2em;
    padding: 6.2rem 1rem 0rem;
    white-space: normal;
    color:#333333;
}

.kc-body-login #kc-header-wrapper {
  font-size: 3.2rem;
  line-height: 3.68rem;
  letter-spacing: normal;
}

#kc-content {
  width: 100%;  
}

.kc-body-login #kc-content, .kc-body-login #kc-locale {
  width: 35rem;
  margin-left: auto;
  margin-right: auto;
}

#kc-attempted-username {
    font-size: 2rem;
    font-family: inherit;
    font-weight: normal;
    padding-right: 1rem;
}

#kc-username {
    text-align: center;
    margin-bottom:-1rem;
}

#kc-webauthn-settings-form {
    padding-top: 0.8rem;
}

#kc-form-webauthn .select-auth-box-parent {
    pointer-events: none;
}

#kc-form-webauthn .select-auth-box-desc {
    color: var(--pf-global--palette--black-600);
}

#kc-form-webauthn .select-auth-box-headline {
    color: var(--pf-global--Color--300);
}

#kc-form-webauthn .select-auth-box-icon {
    flex: 0 0 3em;
}

#kc-form-webauthn .select-auth-box-icon-properties {
    margin-top: 1rem;
    font-size: 1.8em;
}

#kc-form-webauthn .select-auth-box-icon-properties.unknown-transport-class {
    margin-top: 0.3rem;
}

#kc-form-webauthn .pf-l-stack__item {
    margin: -1px 0;
}

#kc-content-wrapper {
    margin-top: 2rem;
}

#kc-form-wrapper {
    margin-top: 1rem;
    min-width:26.6rem;
}

#kc-info {
    margin: 2rem -4rem -3rem;
}

#kc-info-wrapper {
    font-size: 1.3rem;
    padding: 0 1.5rem 3.5rem 3.5rem;
}

#kc-form-options span {
    display: block;
}

#kc-terms-text {
    margin-bottom: 2rem;
}

#kc-registration {
    margin-bottom: 0;
}

/* TOTP */

.subtitle {
    text-align: right;
    margin-top: 3rem;
    color: #909090;
}

.required {
    color: var(--pf-global--danger-color--200);
}

ol#kc-totp-settings {
    margin: 0;
    padding-left: 2rem;
}

ul#kc-totp-supported-apps {
    margin-bottom: 1rem;
}

#kc-totp-secret-qr-code {
    max-width:15rem;
    max-height:15rem;
}

#kc-totp-secret-key {
    background-color: var(--colors-neutral-white);
    color: #333333;
    font-size: 1.6rem;
    padding: 1rem 0;
}

/* OAuth */

#kc-oauth h3 {
    margin-top: 0;
}

#kc-oauth ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#kc-oauth ul li {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 1.2rem;
    padding: 1rem 0;
}

#kc-oauth ul li:first-of-type {
    border-top: 0;
}

#kc-oauth .kc-role {
    display: inline-block;
    width: 50%;
}

/* Code */
#kc-code textarea {
    width: 100%;
    height: 8em;
}

/* Social */
.kc-social-links {
    margin-top: 2rem;
}

.kc-social-provider-logo {
    font-size: 2.3rem;
    width: 3rem;
    height: 2.5rem;
    float: left;
}

.kc-social-gray {
    color: var(--pf-global--Color--200);
}

.kc-social-item {
    margin-bottom: var(--pf-global--spacer--sm);
    font-size: 1.5rem;
    text-align: center;
}

.kc-social-provider-name {
    position: relative;
    top: 0.3rem;
}

.kc-social-icon-text {
    left: -1.5rem;
}

.kc-social-grid {
    display:grid;
    grid-column-gap: 1rem;
    grid-row-gap: 0.5rem;
    grid-column-end: span 6;
    --pf-l-grid__item--GridColumnEnd: span 6;
}

.kc-social-grid .kc-social-icon-text {
    left: -1rem;
}

#kc-login, #kc-submit, #updateProfile, #linkAccount {
  font-size: 1.6rem;
  font-style: normal;
  font-weight: bold;
  line-height: normal;
  letter-spacing: 0.16rem;
  padding: 1.85rem;
}

.kc-login-tooltip {
    position: relative;
    display: inline-block;
}

.kc-social-section {
    text-align: center;
}

.kc-social-section hr{
    margin-bottom: 1rem
}

.kc-body-login #kc-form-buttons {
  margin-top: 8.8rem;
  margin-bottom: 1.6rem;
}
.kc-body-login-update-profile #kc-form-buttons {
  margin-top: 1.6rem;
}
.kc-body-login .input-error-login ~ #kc-form-buttons {
  margin-top: 4.8rem;
}
.kc-body-login .login-header-wrapper {
  max-width: none;
}
.formgroup-username {
  margin-bottom: 1.6rem;
}
.formgroup-password {
  margin-bottom: 0.9rem;
}

.kc-login-tooltip .kc-tooltip-text{
    top:-0.3rem;
    left:160%;
    background-color: black;
    visibility: hidden;
    color: var(--colors-neutral-white);

    min-width:13rem;
    text-align: center;
    border-radius: 0.2rem;
    box-shadow:0 1px 0.8rem rgba(0,0,0,0.6);
    padding: 0.5rem;

    position: absolute;
    opacity:0;
    transition:opacity 0.5s;
}

/* Show tooltip */
.kc-login-tooltip:hover .kc-tooltip-text {
    visibility: visible;
    opacity:0.7;
}

/* Arrow for tooltip */
.kc-login-tooltip .kc-tooltip-text::after {
    content: " ";
    position: absolute;
    top: 1.5rem;
    right: 100%;
    margin-top: -0.5rem;
    border-width: 0.5rem;
    border-style: solid;
    border-color: transparent black transparent transparent;
}

.login-pf-page .login-pf-settings #kc-form-options .checkbox {
  margin-bottom: 0;
}

.login-pf-page .login-pf-settings #kc-form-options .checkbox label {
  align-items: center;
}

.login-pf-page .login-pf-settings #kc-form-options .checkbox label span {
  margin-top: 0;
}

.kc-body-login-account-exists #kc-register-form button {
  margin: 0.8rem 0;
}

.kc-body-login-account-exists .pf-c-alert {
    display: none;
}

.kc-body-login-account-exists .kc-info-message {
    font-size: 1.6rem;
    padding-bottom: 4rem;
    padding-top: 1rem;
    line-height: 2rem;
}

.kc-body-login-account-exists .kc-info-message div {
    text-align: center;
}

.kc-body-login-account-exists .kc-info-message div.kc-email {
    font-weight: bold;
    overflow-wrap: break-word;
}

.kc-body-logout .card-pf, .kc-body-info .card-pf {
  max-width: initial;
}

.kc-body-logout #kc-logout {
  width: auto;
  padding: 1.85rem 6.15rem;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5.35rem;
}

.kc-body-logout #kc-locale-wrapper, .kc-body-info #kc-locale-wrapper, .kc-body-login-verify-email #kc-locale-wrapper {
  margin-bottom: 2.4rem;
}

h1.kc-logout-title, h1.kc-info-title, p.kc-logout-header, .login-pf-page p.kc-logout-header, p.kc-info-header, .login-pf-page p.kc-info-header {
  font-style: normal;
  font-weight: 400;
  display: flex;
  align-items: center;
  color: #333333;
  line-height: normal;
}

.kc-logout-title, .kc-info-title {
  font-size: 3rem;
  line-height: 3.4rem;
  margin-top: 1.7rem;
  margin-bottom: 2.4rem;
}

.kc-body-logout .kc-logout-title {
  font-size: 3rem;
  line-height: 3.4rem;
  margin-top: 1.7rem;
  margin-bottom: 2.4rem;
}

.kc-body-logout .login-card {
  max-width: 60rem;
}

.kc-body-logout .kc-logout-title, .kc-body-logout .login-pf-header {
  margin-left: auto;
  margin-right: auto;
}

.kc-body-logout .login-pf-header {
  margin-top: 3rem;
}

.kc-body-logout .kc-logout-header {
  flex-flow: column;
}

.kc-body-logout .kc-logout-header span {
  text-align: justify;
  line-height: 2.5rem;
}

.kc-body-logout .kc-logout-header span + span {
  margin-top: 0.8rem;
}

.kc-logout-header, .kc-info-header {
  font-size: 2rem;
  line-height: 2.3rem;
}
.error-logo .allplan-logo {
  display: none;
}
.error-logo .allplan-404-logo-container {
  display: flex;
  align-items: center;
}
.error-logo .allplan-404-logo-container, .error-logo .login-pf-page {
  min-height: 41rem;
}
.error-logo #kc-page-title, .error-logo #kc-content-wrapper {
  margin-top: 0;
  line-height: normal;
}
.error-logo .login-pf-header {
  margin-bottom: 0.2rem;
}
.error-logo #kc-locale {
  display: none;
}

.error-logo .login-card{
  position: relative;
  margin-top: auto;
  margin-bottom: auto;
}

.kc-body-login-select-authenticator .select-auth-container {
  padding-top: 1.6rem;
}
.kc-body-login-select-authenticator .select-auth-box-headline {
  font-size: 1.3rem;
}
.kc-body-login-select-authenticator .select-auth-box-desc {
  font-size: 1.1rem;
}

.kc-body-login-page-expired .instruction {
  font-size: 1.3rem;
}

.kc-body-login-verify-email .login-pf-header #kc-page-title, .kc-body-login-verify-email .alert-warning {
  display: none;
}

.kc-body-login-verify-email #kc-content, .kc-body-login-verify-email #kc-locale {
  width: 100%;
  max-width: 65.2rem;
  margin-left: auto;
  margin-right: auto;
}

.kc-body-login-verify-email .login-pf-page {
  padding-left: 11.2rem;
  padding-right: 11.2rem;
}

.kc-body-login-verify-email .email-verify-title {
  font-size: 3rem;
  line-height: 3.45rem;
  margin-top: 1.2rem;
  margin-bottom: 1.2rem;
}

.kc-body-login-verify-email .email-verify-msg {
  font-size: 2rem;
  line-height: 2.3rem;
  margin-top: 1.2rem;
  margin-bottom: 1.2rem;
}

.align-left{
  margin-right: auto;
}

.align-right{
  margin-left: auto;
}


/* desktop 1 - bigger one: min height  1080*/
/* desktop 1 breaking point 1*/
@media (min-height: 1081px)  and (min-width: 921px) and (max-width: 1250px){
  #kc-header {
    white-space:unset;    
  }
  .login-header-wrapper{
    max-width:34rem;
  }
  .allplan-404-logo {
    margin-left: 13.4rem;
  }
}
/* desktop 1 breaking point 2*/
@media (min-height: 1081px)  and (min-width: 602px) and (max-width: 920px){
  .allplan-logo {
    width: 22.3rem; 
    margin: 6.4rem 0.8rem 0.8rem 5.9rem;
  }
  .allplan-404-logo{
    height: 30.2rem;
    width: 25rem;
    margin-left: 7.8rem;
    margin-top: 10rem;
  }
  .error-logo .allplan-404-logo-container {
    min-height: 41rem;
  }
  .error-logo .login-pf-page {
    min-height: 0;
    margin: 3rem;
    display: block;
  }
  .error-logo .main-container {
    flex-flow: column;
  }
  .login-pf-page {
    transform: translate(0%, -10%);
  }
  .error-logo .login-card{
    padding-left: 3.2rem;
    padding-right: 1.2rem;
  }
  .kc-body-logout .login-pf-header {
    margin-top: 0;
  }

  #kc-header {
    white-space:unset;    
  }
  .login-header-wrapper{
    max-width:34rem;
  }

  .login-footer {
    margin: auto 2.5rem 1.9rem 2.5rem;
  }
}

/* desktop 1 default size*/
@media  (min-height: 1081px) and (min-width: 1251px)  {

  #kc-header #kc-header-wrapper {
    letter-spacing: 0;    
    white-space: nowrap;
  }
}

/* desktop 2 - smaller one: max height  1080*/
/* desktop 2 breaking point 1*/
@media (max-height: 1080px)  and (min-width: 921px) and (max-width: 1250px)  {
  .login-header-wrapper{
    max-width:34rem;

    text-align: center;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 0.8rem;
    letter-spacing: 1px;
  }
  .allplan-404-logo {
    margin-left: 13.4rem;
  }
}
/* desktop 2 breaking point 2*/
@media  (max-height: 1080px) and (min-width: 602px) and (max-width: 920px) {
  .allplan-logo {
    width: 22.3rem; 
    margin: 6.4rem 0.8rem 0.8rem 5.9rem;
  }
  .error-logo .login-card{
    padding-left: 3.2rem;
    padding-right: 1.2rem;
  }
  .allplan-404-logo{
    height: 30.2rem;
    width: 25rem;
    margin-left: 7.8rem;
    margin-top: 10rem;
  }
  .error-logo .allplan-404-logo-container {
    min-height: 41rem;
  }
  .error-logo .login-pf-page {
    min-height: 0;
    margin: 3rem;
    display: block;
  }
  .error-logo .main-container {
    flex-flow: column;
  }
  .login-pf-page {
    transform: translate(0%, -10%);
  }
  .kc-body-logout .login-pf-header {
    margin-top: 0;
  }

   .login-header-wrapper{
    max-width: 34rem;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 0.8rem;
  }

  .login-footer {
    margin: auto 2.5rem 1.9rem 2.5rem;
  }
}
/* desktop 2 default size*/
@media  (max-height: 1080px) and (min-width: 1251px)  {
  #kc-header #kc-header-wrapper {
    letter-spacing: 0;
    white-space: nowrap;
  }
}

@media (min-height: 646px) {
    #kc-container-wrapper {
        bottom: 12%;
    }
}

@media (max-height: 645px) {
    #kc-container-wrapper {
        padding-top: 5rem;
        top: 20%;
    }
}

.card-pf form.form-actions .btn {
    float: right;
    margin-left: 1rem;
}

.login-pf-page .login-pf-brand {
    margin-top: 2rem;
    max-width: 33.7rem;
    width: 40%;
}

.select-auth-box-arrow{
    display: flex;
    align-items: center;
    margin-right: 2rem;
}

.select-auth-box-icon{
    display: flex;
    flex: 0 0 2em;
    justify-content: center;
    margin-right: 1rem;
    margin-left: 3rem;
}

.select-auth-box-parent{
    border-top: 1px solid var(--pf-global--palette--black-200);
    padding-top: 1rem;
    padding-bottom: 1rem;
    cursor: pointer;
}

.select-auth-box-parent:hover{
    background-color: #f7f8f8;
}

.select-auth-container {
    padding-bottom: 0rem !important;
}

.select-auth-box-headline {
    font-size: var(--pf-global--FontSize--md);
    color: var(--pf-global--primary-color--100);
    font-weight: bold;
}

.select-auth-box-desc {
    font-size: var(--pf-global--FontSize--sm);
}

.select-auth-box-paragraph {
    text-align: center;
    font-size: var(--pf-global--FontSize--md);
    margin-bottom: 0.5rem;
}

.card-pf {
    margin: 0 auto;
    padding: 0 !important;
    max-width: 33.7rem;
    box-shadow:none;
    border:none;
    background-color: transparent;
}


/* tablet*/
@media (max-width: 601px) {
  .allplan-logo {
    width: 22.3rem; 
    margin: 6.4rem 0.8rem 0.8rem 5.9rem;
  }
  .allplan-404-logo{
    height: 30.2rem;
    width: 25rem;
    margin-left: 7.8rem;
    margin-top: 10rem;
  }
  .error-logo .allplan-404-logo-container {
    min-height: 41rem;
  }
  .error-logo .login-pf-page {
    min-height: 0;
    margin: 3rem;
    position: initial;
    -ms-transform: none;
    transform:none;
    display: block;
  }
  .login-pf-page {
    transform: translate(0%, -10%);
  }
  .kc-body-login .login-pf-page {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .error-logo .login-card{
    padding-left: 3.2rem;    
  }
  .error-logo .main-container {
    flex-flow: column;
  }
  .kc-body-logout .login-pf-header {
    margin-top: 0;
  }

  #kc-page-title{
    text-align:left;
  }
  .kc-body-login #kc-page-title {
    text-align: center;
  }
  .please-check-url{
    font-size:2.4rem;
  }
  
  .error-no-logo .login-pf-page {
    padding: 0 26.5%;
  }

  .error-no-logo #kc-error-message #kc-form-buttons {
    align-items: center;
  }

  .login-footer {
    margin: auto 2.5rem 1.9rem 2.5rem;
  }

  .login-footer ul {
    flex-flow: column;
  }

  .login-footer .align-right {
    margin-top: 0.8rem;
  }
  
  .kc-body-login-verify-email .login-pf-page {
    padding-left: 11.2rem;
    padding-right: 11.2rem;
  }
}

@media (max-width: 800px) {
  .allplan-logo {
    width: 22.3rem; 
    margin: 6.4rem 0.8rem 0.8rem 5.9rem;
  }
  .allplan-404-logo{
    height: 30.2rem;
    width: 25rem;
    margin-left: 7.8rem;
    margin-top: 10rem;
  }
  .error-logo .allplan-404-logo-container {
    min-height: 41rem;
  }
  .error-logo .login-pf-page {
    min-height: 0;
    margin: 3rem;
  }
  
  .error-no-logo .login-pf-page {
    padding: 0 26.5%;
  }

  .error-no-logo #kc-error-message #kc-form-buttons {
    align-items: center;
  }

  .kc-body-logout .login-pf-header {
    margin-top: 0;
  }
  .login-pf-page {
    transform: translate(0%, -10%);
  }
  .login-footer {
    margin: auto 2.5rem 1.9rem 2.5rem;
  }
}

/*phone*/
@media (max-width: 360px) {
  .allplan-logo {
    width: 16.5rem; 
    margin: 3.9rem 0.8rem 0.8rem 3.2rem;
  }
  .login-pf-page, .kc-body-login .login-pf-page {
    transform: translate(0%, 0%);
  }
  .error-logo .main-container {
    flex-flow: column;
  }
  .kc-body-login .pf-c-form-control, .kc-body-login .form-group .pf-c-form-control:not(textarea) {
    height: 3.3rem;
    font-size: 1rem;
    background-size: 1.4rem;
  }
  .register-user-link {
    font-size: 1.2rem;
  }
  .forgot-password-link, #try-another-way {
    font-size: 1rem;
  }
  #kc-login, #kc-submit {
    font-size: 1.2rem;
    letter-spacing: 0.12rem;
    padding: 1.36rem;
  }

  .pf-c-button.pf-m-primary {
    border-radius: 3rem;
    font-size: 1.2rem;
    letter-spacing: 0.12rem;
    line-height: normal;
  }

  .kc-body-login #kc-header-wrapper {
    font-size: 2.4rem;
    line-height: normal;
  }
  .kc-body-login .login-pf-page {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    min-width: auto;
  }
  .kc-body-login #kc-content, .kc-body-login #kc-locale {
    width: 100%;
  }
  .kc-body-login #kc-page-title {
    font-size: 1.6rem;
    text-align: center;
    margin-bottom: 2.58rem;
  }
  .kc-body-login .pf-c-form__label {
    font-size: 1rem;
    margin-bottom: 0;
  }
  .kc-body-login #kc-form-buttons {
    margin-top: 6.6rem;
    margin-bottom: 1.1rem;
  }
  .kc-body-login-update-profile #kc-form-buttons {
    margin-top: 1.1rem;
  }
  .kc-body-login #input-error, .kc-body-login .pf-c-alert__title {
    font-size: 1rem;
    margin-top: 0.6rem;
    padding: 0.6rem 0.9rem;
  }
  .kc-body-login .pf-c-alert__title {
    margin: 0;
  }
  .kc-body-login .input-error-login ~ #kc-form-buttons {
    margin-top: 3.7rem;
  }
  .formgroup-username, .formgroup-password {
    margin-bottom: 0.6rem;
  }
  .login-pf-page .login-pf-settings #kc-form-options .checkbox label {
    font-size: 1rem;
  }

  .kc-body-logout #kc-logout {
    padding: 1.3rem 4.6rem;
    margin-top: 4rem;
  }

  .jEcacy button{
    left:1.2rem !important;
    bottom:3rem !important;
  }

  #kc-registration span a{
    font-size:1.2rem;
  }
  #kc-header-wrapper {
    padding: 2.2rem 1rem 0rem;
  }
  
  #kc-page-title{
    text-align:left;
    font-size: 2rem;
  }
  h1#kc-page-title {
    margin-top: 0.95rem;
    font-size:1.2rem;
  }

  .kc-body-login #kc-content-wrapper {
    margin-top: 1rem;
  }

  .kc-logout-title, .kc-info-title {
    font-size: 2rem;
    margin-bottom: 2rem;
  }
  .kc-logout-header {
    font-size: 1.4rem;
  }
  #kc-locale-dropdown a {
    font-size: 1rem;
  }
  .kc-body-logout .kc-logout-header span {
    line-height: 1.8rem;
  }

  .error-logo h1#kc-page-title {
    font-size:2rem;
  }

  .login-card #kc-page-title{
    text-align:center;
  }

  .error-logo .login-card #kc-page-title{
    text-align: left;
  }

  .error-no-logo .login-pf-page {
    padding: 0 3.9rem;
  }

  .error-no-logo #kc-error-message #kc-form-buttons {
    align-items: center;
  }
  
  .error-no-logo #kc-page-title {
    font-size: 3rem;
  }

  .error-no-logo #kc-current-locale-link {
    font-size: 1.4rem;
  }

  .please-check-url {
    font-size: 1.6rem;
  }

  .allplan-404-logo {
    height: 18.1rem;
    width: 15rem;
    margin-left: 6rem;
    margin-top: 10rem;
  }
  .error-logo .allplan-404-logo-container {
    min-height: 29rem;
  }
  .error-logo .login-pf-page{
    padding-left: 0;
    margin: 2rem;
    position: initial;
    -ms-transform: none;
    transform: none;
    display: block;
    min-height: 0;
  }
  .kc-body-logout .login-pf-header {
    margin-top: 0;
  }
  
  .login-footer {
    margin: auto 2rem 1.9rem 2rem;
    padding-top: 1.5rem;
  }
  .login-footer ul {
    flex-flow: column;
  }
  .login-footer .align-right {
    margin-top: 1.5rem;
    margin-left: 0;
    display: flex;
    flex-flow: column;
    text-align: right;
  }
  .do-register .login-pf-page{
    margin-top:3rem;
    height:calc(100% - 5rem);
  }
  
  .do-register .login-card{
    height:calc(100% + 5rem);
  }
  .do-register #kc-page-title{
    font-size:1.6rem;
  }

  .login-pf-page .card-pf {
      max-width: none;
      margin-left: 0;
      margin-right: 0;
      padding-top: 0;
      border-top: 0;
      box-shadow: 0 0;
  }

  .kc-social-grid {
      grid-column-end: 12;
      --pf-l-grid__item--GridColumnEnd: span 12;
  }

  .kc-social-grid .kc-social-icon-text {
      left: -1.5rem;
  }

  .login-footer ul li, .login-footer ul li a, .register-user-link a, .forgot-password-link a, #try-another-way, .login-footer ul li a:hover, .register-user-link a:hover, .forgot-password-link a:hover, #try-another-way:hover, .login-footer ul li a:focus, .register-user-link a:focus, .forgot-password-link a:focus, #try-another-way:focus {
    font-size: 1rem;
  }

  .login-footer ul li ~ li {
    margin-left: 0;
    margin-top: 1rem;
  }

  .kc-body-login-select-authenticator .select-auth-container {
    padding-top: 0.8rem;
  }
  .kc-body-login-select-authenticator .select-auth-box-headline {
    font-size: 1rem;
  }
  .kc-body-login-select-authenticator .select-auth-box-desc {
    font-size: 0.8rem;
  }

  .kc-body-login-page-expired .instruction {
    font-size: 1rem;
  }

  .kc-body-login-verify-email .email-verify-title {
    font-size: 2rem;
    line-height: 2.3rem;
    margin-top: 1.2rem;
    margin-bottom: 1.2rem;
  }

  .kc-body-login-verify-email .email-verify-msg {
    font-size: 1.4rem;
    line-height: 1.6rem;
    margin-top: 1.2rem;
    margin-bottom: 1.2rem;
  }

  .kc-body-login-verify-email #kc-content, .kc-body-login-verify-email #kc-locale {
    width: 100%;
    max-width: 26.3rem;
  }

  .kc-body-login-verify-email .login-pf-page {
    padding-left: 4.8rem;
    padding-right: 4.8rem;
  }
}

.login-pf-page .login-pf-signup {
    font-size: 1.5rem;
    color: #72767b;
}
#kc-content-wrapper .row {
    margin-left: 0;
    margin-right: 0;
}

.login-pf-page.login-pf-page-accounts {
    margin-left: auto;
    margin-right: auto;
}

.login-pf-page .btn-primary {
    margin-top: 0;
}

.login-pf-page .list-view-pf .list-group-item {
    border-bottom: 1px solid #ededed;
}

.login-pf-page .list-view-pf-description {
    width: 100%;
}

#kc-form-login div.form-group:last-of-type,
#kc-register-form div.form-group:last-of-type,
#kc-update-profile-form div.form-group:last-of-type,
#kc-update-email-form div.form-group:last-of-type{
    margin-bottom: 0rem;
}

#kc-back {
    margin-top: 0.5rem;
}

/* Recovery codes */
.kc-recovery-codes-warning {
    margin-bottom: 3.2rem;
}
.kc-recovery-codes-warning .pf-c-alert__description p {
    font-size: 0.875rem;
}
.kc-recovery-codes-list {
    list-style: none;
    columns: 2;
    margin: 1.6rem 0;
    padding: 1.6rem 1.6rem 0.8rem 1.6rem;
    border: 1px solid #D2D2D2;
}
.kc-recovery-codes-list li {
    margin-bottom: 0.8rem;
    font-size: 1.1rem;
}
.kc-recovery-codes-list li span {
    color: #6A6E73;
    width: 1.6rem;
    text-align: right;
    display: inline-block;
    margin-right: 1px;
}

.kc-recovery-codes-actions {
    margin-bottom: 2.4rem;
}
.kc-recovery-codes-actions button {
    padding-left: 0;
}
.kc-recovery-codes-actions button i {
    margin-right: 0.8rem;
}

.kc-recovery-codes-confirmation {
    align-items: baseline;
    margin-bottom: 1.6rem;
}
/* End Recovery codes */

.bold {
  font-weight: bold;
}

:root{
  /* Common Setup Start */
  --row_width_big: 40rem;
  --row_width_small: 20rem;
  /* Common Setup End */

  /* _tokens.scss Start */
  /* Brand Start */
  --color-brand-dark: var(--colors-brand-allpan-blue-1000);
  --color-brand-primary: var(--colors-brand-allpan-primary-blue-800);
  --color-brand-light: var(--colors-brand-allpan-blue-400);
  /* Brand End */

/* Backgroud Start */
  /* 1. Backgroud.Default */
    --color-background-body_default: var(--colors-neutral-grey-50);
    --color-background-body_modify: var(--colors-brand-allpan-blue-10);
    --color-background-cover_popup: #2F31333F;
    --color-background-layer-1: var(--colors-neutral-white);
    --color-background-layer-2: var(--colors-neutral-grey-50);
    --color-background-layer-3: var(--colors-neutral-grey-200);
    --color-background-layer-4: var(--colors-brand-allpan-blue-300);
    --color-background-layer-5: var(--colors-brand-allpan-primary-blue-800);
    --color-background-layer-6: var(--colors-brand-allpan-blue-50);
    --color-background-quickfilter: var(--colors-brand-allpan-blue-900);
    --color-checkbox-backgroud-hover: var(--colors-brand-allpan-blue-100);
  /* 2. Backgroud.Buttons */
    --color-background-button-primary-enabled: var(--colors-brand-allpan-primary-blue-800);
    --color-background-button-primary-hover: var(--colors-brand-allpan-blue-900);
    --color-background-button-primary-pressed: var(--colors-brand-allpan-blue-1000);
    --color-background-button-primary-disabled: var(--colors-brand-allpan-blue-200);
    --color-background-button-secondary-enabled: var(--colors-neutral-white);
    --color-background-button-secondary-hover: var(--colors-brand-allpan-blue-10);
    --color-background-button-secondary-pressed: var(--colors-brand-allpan-blue-50);
    --color-background-button-secondary-disabled: var(--colors-neutral-white);
    --color-background-button-tertiary-enabled: var(--colors-brand-allpan-blue-50);
    --color-background-button-tertiary-hover: var(--colors-brand-allpan-blue-100);
    --color-background-button-tertiary-pressed: var(--colors-brand-allpan-blue-200);
    --color-background-button-tertiary-disabled: var(--colors-brand-allpan-blue-50);
  /* 3. Backgroud.Chips */
    --color-background-chip-open: var(--colors-neutral-grey-100);
    --color-background-chip-in-progress: var(--colors-semantic-cyan-c-100);
    --color-background-chip-on-hold: var(--colors-semantic-yellow-orange-yo-100);
    --color-background-chip-resolved: var(--colors-semantic-green-g-100);
    --color-background-chip-cancelled: var(--colors-semantic-red-r-100);
  /* 4. Backgroud.menu */
    --color-background-menu-enabled: var(--colors-neutral-white);
    --color-background-menu-hover: var(--colors-neutral-grey-50);
    --color-background-menu-pressed: var(--colors-neutral-grey-200);
    --color-background-menu-selected: var(--colors-brand-allpan-blue-100);
  /* 5. Backgroud.Sidebar */
    --color-background-sidebar-allplan: var(--colors-neutral-black);
    --color-background-sidebar-default: var(--colors-neutral-grey-900);
    --color-background-sidebar-hover: var(--colors-neutral-grey-800);
    --color-background-sidebar-pressed: var(--colors-neutral-grey-700);
  /* 6. Backgroud.table */ 
    --color-background-table-header: var(--colors-brand-allpan-blue-50);
    --color-background-table-row: var(--colors-neutral-grey-50);
    --color-background-table-row_hover: var(--colors-neutral-grey-200);
    --color-background-table-line: var(--colors-neutral-white);
    --color-background-table-sub: var(--colors-neutral-grey-10);
    --color-background-table-sub_hover: var(--colors-neutral-grey-100);
  /* 7. Backgroud.Calendar */
    --color-background-calender-default: var(--colors-neutral-white);
    --color-background-calender-selected: var(--colors-brand-allpan-blue-100);
    --color-background-calender-focused: var(--colors-brand-allpan-blue-600);
    --color-background-calender-weekend: var(--colors-neutral-grey-300);
  /* 8.Background.Toaster */
    --color-background-toaster-error: var(--colors-semantic-red-r-100);
    --color-background-toaster-warning: var(--colors-semantic-yellow-orange-yo-50);
    --color-background-toaster-success: var(--colors-semantic-green-g-50);
    --color-background-toaster-info: var(--colors-semantic-cyan-c-100);
/* Backgroud End */

/* Border Start */
  /* 1.Border.Default */
    --color-border-default: var(--colors-neutral-grey-300);
    --color-border-hover: var(--colors-neutral-grey-500);
    --color-border-focus: var(--colors-brand-allpan-primary-blue-800);
    --color-border-error-dark: var(--colors-semantic-red-r-1000);
    --color-border-error-default: var(--colors-semantic-red-r-500);
    --color-border-warning-dark: var(--colors-semantic-yellow-orange-yo-1000);
    --color-border-warning-default: var(--colors-semantic-yellow-orange-yo-800);
    --color-border-success-dark: var(--colors-semantic-green-g-1000);
    --color-border-success-default: var(--colors-semantic-green-g-500);
    --color-border-info-dark: var(--colors-brand-allpan-blue-900);
    --color-border-info-default: var(--colors-brand-allpan-blue-500);
    --color-border-highlight: var(--colors-brand-allpan-primary-blue-800);
    --color-border-quickfilter: var(--colors-brand-allpan-blue-900);
    --color-border-button-disabled: var(--colors-brand-allpan-blue-200)
  /* 2.Border.Calendar */
    --color-border-calender-default: var(--colors-neutral-white);
    --color-border-calender-selected: var(--colors-brand-allpan-blue-300);
    --color-border-calender-focused: var(--colors-brand-allpan-blue-600);
  /* 3.Border.Input */
    --color-border-input-default: var(--colors-neutral-grey-300);
    --color-border-input-hover: var(--colors-neutral-grey-500);
    --color-border-input-focus: var(--colors-brand-allpan-primary-blue-800);
    --color-border-input-focus-shadow: 0px 0px 4px 0px var(--color-brand-primary);
    --color-border-input-error-dark: var(--colors-semantic-red-r-900);
    --color-border-input-error-default: var(--colors-semantic-red-r-500);
    --color-border-input-warning-dark: var(--colors-semantic-yellow-orange-yo-900);
    --color-border-input-warning-default: var(--colors-semantic-yellow-orange-yo-800);
    --color-border-input-success-dark: var(--colors-semantic-green-g-900);
    --color-border-input-success-default: var(--colors-semantic-green-g-500);
    --color-border-input-info-dark: var(--colors-brand-allpan-blue-900);
    --color-border-input-info-default: var(--colors-brand-allpan-blue-500);
    --color-border-input-disabled: var(--colors-neutral-grey-300);
  /* 4.Border.Chip */
    --color-border-chip-open: var(--colors-neutral-grey-700);
    --color-border-chip-in-progress: var(--colors-brand-allpan-blue-1000);
    --color-border-chip-on-hold: var(--colors-semantic-yellow-orange-yo-1000);
    --color-border-chip-resolved: var(--colors-semantic-green-g-1000);
    --color-border-chip-cancelled: var(--colors-semantic-red-r-1000);
/* Border End */

/* Icons Start */
    --color-icon-default: var(--colors-neutral-grey-800);
    --color-icon-primary: var(--colors-brand-allpan-primary-blue-800);
    --color-icon-on-primary: var(--colors-neutral-white);
    --color-icon-muted: var(--colors-neutral-grey-600);
    --color-icon-highlight: var(--colors-brand-allpan-blue-400);
/* Icons End */

/* Text Start */
  /* 1.Text.Default */
    --color-text-body: var(--colors-neutral-grey-900);
    --color-text-muted: var(--colors-neutral-grey-600);
    --color-text-highlight-light: var(--colors-brand-allpan-primary-blue-800);
    --color-text-on-primary: var(--colors-neutral-white);
    --color-text-hint: var(--colors-neutral-grey-500);
    --color-text-highlight-dark: var(--colors-brand-allpan-blue-400);
    
  /* 2.Text.Link */
    --color-text-link-default: var(--colors-brand-allpan-primary-blue-800);
    --color-text-link-pressed: var(--colors-brand-allpan-blue-900);

  /* 3.Text.feedback */
    --color-text-feedback-error-default: var(--colors-semantic-red-r-500);
    --color-text-feedback-error-dark: var(--colors-semantic-red-r-1000);
    --color-text-feedback-warning-default: var(--colors-semantic-yellow-orange-yo-800);
    --color-text-feedback-warning-dark: var(--colors-semantic-yellow-orange-yo-900);
    --color-text-feedback-success-default: var(--colors-semantic-green-g-500);
    --color-text-feedback-success-dark: var(--colors-semantic-green-g-900);
    --color-text-feedback-info-default: var(--colors-brand-allpan-blue-500);
    --color-text-feedback-info-dark: var(--colors-brand-allpan-blue-900);
    --color-text-button-primary-disabled: var(--colors-neutral-white);
    --color-text-button-secondary-disabled: var(--colors-brand-allpan-blue-200);
    --color-text-button-tritiary-disabled: var(--colors-brand-allpan-blue-200);
/* Text End */

/* Logo Start */
    --color-logo-dark: var(--colors-brand-allpan-blue-1000);
    --color-logo-brand: var(--colors-brand-allpan-primary-blue-800);
    --color-logo-light: var(--colors-brand-allpan-blue-500);
    --color-logo-black: var(--colors-neutral-grey-800);
/* Logo End */
/* Fill Start */
    --color-fill-success: var(--colors-semantic-green-g-500);
    --color-fill-error: var(--colors-semantic-red-r-500);
    --color-fill-color: var(--colors-neutral-grey-500);
/* Fill End */
/* Divider Start */
    --color-line-devider: var(--colors-neutral-grey-400);
/* Divider End */

/* Illustration Start */
    --color-illustrations-color2: var(--colors-brand-allpan-blue-400);
    --color-illustrations-color4: var(--colors-pastels-sand-100);
    --color-illustrations-color5: var(--colors-brand-allpan-blue-1000);
    --color-illustrations-color6: var(--colors-neutral-black);
    --color-illustrations-color7: var(--colors-semantic-yellow-orange-yo-700);
    --color-illustrations-color8: var(--colors-semantic-yellow-orange-yo-900);
    --color-illustrations-color9: var(--colors-neutral-grey-300);
    --color-illustrations-color10: var(--colors-neutral-grey-100);
    --color-illustrations-color11: var(--colors-neutral-grey-500);
/* Illustration End */

/* Spacing Start */
    --spacing-base: 4px;
    --spacing-x2: 8px;
    --spacing-x3: 12px;
    --spacing-x4: 16px;
    --spacing-x5: 20px;
    --spacing-x6: 24px;
    --spacing-x7: 28px;
    --spacing-x8: 32px;
    --spacing-x9: 36px;
    --spacing-x10: 40px;
    --spacing-x15: 60px;
    --spacing-x20: 80px;
    --spacing-none: 0px;
/* Spacing End */
/* Border Start */
    --border-radius-minimum: 2px;
    --border-radius-base: 4px;
    --border-radius-x2: 8px;
    --border-radius-x3: 12px;
    --border-radius-x4: 16px;
    --border-radius-x5: 20px;
    --border-radius-none: 0px;
/* Border End */

/* Size Start */
    --size-base: 4px;
    --size-x2: 8px;
    --size-x3: 12px;
    --size-x4: 16px;
    --size-x5: 20px;
    --size-x10: 40px;
    --size-x20: 80px;
/* Size End */

  --drop-shadow-default: 3px 3px 12px 0px #00000026;
  --drop-shadow-input: 0px 0px 4px 0px var(--brand-blue-800);
  --spacing-card-padding: 20px;
  --input-padding: var(--spacing-x3);
  --font-family-default: arial, helvetiva, sans serif;
  --font-weight-bold: bold;
  --font-weight-regular: normal;
  --font-size-heading-1: 56px;
  --font-size-heading-2: 40px;
  --font-size-heading-3: 32px;
  --font-size-heading-4: 24px;
  --font-size-large: 20px;
  --font-size-normal: 16px;
  --font-size-medium: 14px;
  --font-size-small: 12px;
  --font-size-smaller: 11px;
  --font-size-mobile-heading-1: 36px;
  --font-size-mobile-heading-2: 28px;
  --font-size-mobile-heading-3: 24px;
  --font-size-mobile-heading-4: 20px;
  --font-size-mobile-large: 18px;
  --font-size-mobile-normal: 16px;
  --font-size-mobile-medium: 14px;
  --font-size-mobile-small: 12px;
  --font-size-mobile-smaller: 11px;

  --color-password-show-icon-active: var(--colors-neutral-black);
  /* _tokes.scss End */

  /* _allplan_theme_colors.scss Start */
  --colors-brand-allpan-blue-1000: #002C70;
  --colors-brand-allpan-blue-900: #004AA4;
  --colors-brand-allpan-primary-blue-800: #06C;
  --colors-brand-allpan-blue-700: #007AE4;
  --colors-brand-allpan-blue-600: #148CF6;
  --colors-brand-allpan-blue-500: #329AFF;
  --colors-brand-allpan-blue-400: #50A8FF;
  --colors-brand-allpan-blue-300: #87C1FF;
  --colors-brand-allpan-blue-200: #A0CEFF;
  --colors-brand-allpan-blue-100: #B4DAFF;
  --colors-brand-allpan-blue-50: #DEF0FF;
  --colors-brand-allpan-blue-10: #F0F8FF;
  --colors-neutral-grey-1000: #1A1A1A;
  --colors-neutral-grey-900: #232526;
  --colors-neutral-grey-800: #2F3133;
  --colors-neutral-grey-700: #46494D;
  --colors-neutral-grey-600: #84888C;
  --colors-neutral-grey-500: #B8BBBF;
  --colors-neutral-grey-400: #D3D7DB;
  --colors-neutral-grey-300: #E1E5E8;
  --colors-neutral-grey-200: #ECEFF1;
  --colors-neutral-grey-100: #F5F6F7;
  --colors-neutral-grey-50: #F7F7F7;
  --colors-neutral-grey-10: #F9F9F9;
  --colors-neutral-black: #000;
  --colors-neutral-white: #FFF;
  --colors-semantic-red-r-1000: #AC0000;
  --colors-semantic-red-r-900: #C40000;
  --colors-semantic-red-r-800: #D1000D;
  --colors-semantic-red-r-700: #DE0016;
  --colors-semantic-red-r-600: #EF001C;
  --colors-semantic-red-r-500: #FE0019;
  --colors-semantic-red-r-400: #FA333C;
  --colors-semantic-red-r-300: #F06164;
  --colors-semantic-red-r-200: #F89090;
  --colors-semantic-red-r-100: #FFC7CD;
  --colors-semantic-red-r-50: #FFE9EC;
  --colors-semantic-red-r-10: #FFF2F4;
  --colors-semantic-green-g-1000: #006602;
  --colors-semantic-green-g-900: #007D02;
  --colors-semantic-green-g-800: #00A01D;
  --colors-semantic-green-g-700: #00B528;
  --colors-semantic-green-g-600: #00CA33;
  --colors-semantic-green-g-500: #0ADB3B;
  --colors-semantic-green-g-400: #54E25C;
  --colors-semantic-green-g-300: #7DE87D;
  --colors-semantic-green-g-200: #A7EFA4;
  --colors-semantic-green-g-100: #CBF6C8;
  --colors-semantic-green-g-50: #EAFCE9;
  --colors-semantic-green-g-10: #F3FFF2;
  --colors-semantic-yellow-orange-yo-1000: #E36C03;
  --colors-semantic-yellow-orange-yo-900: #FD7700;
  --colors-semantic-yellow-orange-yo-800: #FEA400;
  --colors-semantic-yellow-orange-yo-700: #FEBD00;
  --colors-semantic-yellow-orange-yo-600: #FED600;
  --colors-semantic-yellow-orange-yo-500: #FFEA00;
  --colors-semantic-yellow-orange-yo-400: #FDEB3D;
  --colors-semantic-yellow-orange-yo-300: #FFF066;
  --colors-semantic-yellow-orange-yo-200: #FFF493;
  --colors-semantic-yellow-orange-yo-100: #FFF9BF;
  --colors-semantic-yellow-orange-yo-50: #FFFDE5;
  --colors-semantic-yellow-orange-yo-10: #FFFEF0;
  --colors-semantic-cyan-c-1000: #024680;
  --colors-semantic-cyan-c-900: #025499;
  --colors-semantic-cyan-c-800: #0374BB;
  --colors-semantic-cyan-c-700: #0385CF;
  --colors-semantic-cyan-c-600: #0297E3;
  --colors-semantic-cyan-c-500: #00A7F2;
  --colors-semantic-cyan-c-400: #27B3F5;
  --colors-semantic-cyan-c-300: #4DC0F6;
  --colors-semantic-cyan-c-200: #80D2F9;
  --colors-semantic-cyan-c-100: #B2E4FC;
  --colors-semantic-cyan-c-50: #E1F4FE;
  --colors-semantic-cyan-c-10: #ECF8FF;
  --colors-graphs-dark-blue: #29255B;
  --colors-graphs-light-blue: #BACFE6;
  --colors-graphs-dark-grey: #7C8080;
  --colors-graphs-light-grey: #B2B2B2;
  --colors-pastels-terrazzo-100: #B4A6B9;
  --colors-pastels-terrazzo-60: #D7CEDA;
  --colors-pastels-terrazzo-20: #F5EBF9;
  --colors-pastels-quartz-100: #D6A4C8;
  --colors-pastels-quartz-60: #FFD2F3;
  --colors-pastels-quartz-20: #FDEDF8;
  --colors-pastels-tile-100: #FCABAD;
  --colors-pastels-tile-60: #FFD2D3;
  --colors-pastels-tile-20: #FFE9E9;
  --colors-pastels-granite-100: #B9BCE7;
  --colors-pastels-granite-60: #DDDFFF;
  --colors-pastels-granite-20: #F2F3FF;
  --colors-pastels-acqua-100: #9BE8DF;
  --colors-pastels-acqua-60: #C5F3EE;
  --colors-pastels-acqua-20: #DFFDFA;
  --colors-pastels-palegreen-100: #BAE2B6;
  --colors-pastels-palegreen-60: #DDEFDB;
  --colors-pastels-palegreen-20: #EDF9EC;
  --colors-pastels-travertine-100: #E3D89A;
  --colors-pastels-travertine-60: #F9F1C3;
  --colors-pastels-travertine-20: #FFFADF;
  --colors-pastels-sand-100: #E3BD9A;
  --colors-pastels-sand-60: #FEE4CC;
  --colors-pastels-sand-20: #FAEFE5;
  --colors-pastels-terracotta-100: #DD7863;
  --colors-pastels-terracotta-60: #D4A59B;
  --colors-pastels-terracotta-20: #FAD3CB;
  --colors-auxilliary-bright-red: #F00;
  --colors-auxilliary-calacatta-cal-100: #585858;
  --colors-auxilliary-emperador-emp-100: #3E1F10;
  --colors-auxilliary-emperador-emp-80: #7A563E;
  --colors-auxilliary-emperador-emp-60: #A8846B;
  --colors-auxilliary-emperador-emp-40: #D7BFA6;
  --colors-auxilliary-emperador-em-20: #F2E2D9;
  --colors-auxilliary-calacatta-cal-80: #B0B0B0;
  --colors-auxilliary-bright-orange: #FFA500;
  --colors-auxilliary-bright-yellow: #FF0;
  --colors-auxilliary-calacatta-cal-60: #E0E0E0;
  --colors-auxilliary-bright-green: #0F0;
  --colors-auxilliary-calacatta-cal-40: #F5F5F5;
  --colors-auxilliary-bright-lime: #CF0;
  --colors-auxilliary-bright-blue: #00F;
  --colors-auxilliary-calacatta-cal-20: #FCFCFC;
  --colors-auxilliary-bright-cyan: #0FF;
  --colors-auxilliary-bright-purple: #C0F;
  --colors-auxilliary-bright-lilla: #F09;
  --colors-auxilliary-bright-pink: #F9F;
  --colors-auxilliary-purple-pur-100: #351C4E;
  --colors-auxilliary-purple-pur-80: #5E3381;
  --colors-auxilliary-purple-pur-60: #8E63B5;
  --colors-auxilliary-purple-pur-40: #B69ACC;
  --colors-auxilliary-purple-pur-20: #E1D5E7;
  --colors-auxilliary-sienna-sie-100: #76370A;
  --colors-auxilliary-tuscan-tus-100: #7D7465;
  --colors-auxilliary-tuscan-tus-80: #A79F8F;
  --colors-auxilliary-tuscan-tus-60: #BFB8A5;
  --colors-auxilliary-tuscan-tus-40: #D3CBB8;
  --colors-auxilliary-tuscan-tus-20: #EAE6DA;
  --colors-auxilliary-water-wat-100: #008080;
  --colors-auxilliary-water-wat-80: #4169E1;
  --colors-auxilliary-water-wat-60: #4682B4;
  --colors-auxilliary-water-wat-40: #66CDAA;
  --colors-auxilliary-water-wat-20: #87CEEB;
  --colors-auxilliary-sienna-sie-80: #8B4513;
  --colors-auxilliary-sienna-sie-60: #A0522D;
  --colors-auxilliary-sienna-sie-40: #C96A3D;
  --colors-auxilliary-sienna-sie-20: #CD853F;
  /* _allplan_theme_colors.scss End */

  /* _variables.scss Start */
  /* Primary Button */
    --primary-button-background-color-enabled: var(--color-background-button-primary-enabled);
    --primary-button-background-color-hovered: var(--color-background-button-primary-hover);
    --primary-button-background-color-active: var(--color-background-button-primary-pressed);
    --primary-button-background-color-disabled: var(--color-background-button-primary-disabled);
    --primary-button-text-color: var(--color-text-on-primary);
    --primary-button-text-color-disabled: var(--color-text-button-primary-disabled);
    
    /* Secondary Button */
    --secondary-button-background-color-enabled: var(--color-background-button-secondary-enabled);
    --secondary-button-background-color-hovered: var(--color-background-button-secondary-hover);
    --secondary-button-background-color-active: var(--color-background-button-secondary-pressed);
    --secondary-button-background-color-disabled: var(--color-background-button-secondary-disabled);
    --secondary-button-border-color: var(--color-border-focus);
    --secondary-button-border-color-disabled: var(--color-border-button-disabled);
    --secondary-button-text-color: var(--color-text-highlight-light);
    --secondary-button-text-color-disabled: var(--color-text-button-secondary-disabled);

    /* tertiary Button */
    --tertiary-button-background-color-enabled: var(--color-background-button-tertiary-enabled);
    --tertiary-button-background-color-hovered: var(--color-background-button-tertiary-hover);
    --tertiary-button-background-color-active: var(--color-background-button-tertiary-pressed);
    --tertiary-button-background-color-disabled: var(--color-background-button-tertiary-disabled);
    --tertiary-button-text-color: var(--color-text-highlight-light);
    --tertiary-button-text-color-disabled: var(--color-text-button-tertiary-disabled);

    /* Main Menu Start */
    --brand-sidebar-background: var(--colors-neutral-black);
    --main-menu-backgroud-default: var(--color-background-sidebar-default);
    --main-menu-backgroud-hover: var(--color-background-sidebar-hover);
    --main-menu-backgroud-pressed: var(--color-background-sidebar-pressed);
    --main-menu-text-default: var(--color-text-on-primary);
    --main-menu-separator: var(--color-text-muted);
    --main-menu-border-active: var(--color-brand-light);
    --main-menu-submenu-backgroud-default: var(--color-background-sidebar-default);
    --main-menu-submenu-backgroud-hover: var(--color-background-sidebar-hover);
    --main-menu-submenu-backgroud-pressed: var(--color-background-sidebar-pressed);
    --main-menu-submenu-text-default: var(--color-text-on-primary);
    --main-menu-submenu-text-active: var(--color-text-highlight-dark);
    --main-menu-submenu-text-disabled: var(--color-text-muted);
    /* MainMenu End */

    /* Scrollbar Start */
    --color-scrollbar-bar: var(--color-fill-color);
    --color-scrollbar-background: var(--color-background-layer-2);
    /* Scrollbar End */

    /* Card Start */
    --card-background-color: var(--colors-neutral-white);
    --card-box-shadow-default: var(--drop-shadow-default);
    /* Card End */

    /* Inputs Start */
    --input-background-color-default: var(--colors-neutral-white);
    --input-background-color-disabled: var(--color-background-layer-1);
    --input-border-color-default: var(--color-border-input-default);
    --input-border-color-hover: var(--color-border-input-hover);
    --input-border-color-focus: var(--color-border-input-focus);
    --input-border-color-focus-shadow: var(--color-border-input-focus-shadow);
    --input-border-color-disabled: var(--color-border-input-disabled);
    --input-border-color-success-default: var(--color-border-input-success-default);
    --input-border-color-success-dark: var(--color-border-input-success-dark);
    --input-border-color-error-default: var(--color-border-input-error-default);
    --input-border-color-error-dark: var(--color-border-input-error-dark);
    --input-border-color-warning-default: var(--color-border-input-warning-default);
    --input-border-color-warning-dark: var(--color-border-input-warning-dark);
    --input-message-color-error: var(--color-text-feedback-error-dark);
    --input-message-color-warning: var(--color-text-feedback-warning-dark);
    --input-message-color-success: var(--color-text-muted);
    --input-flyout-backgroud-color-default: var(--color-background-layer-1);
    --input-flyout-backgroud-color-hover: var(--color-background-layer-2);
    --input-flyout-backgroud-color-focus: var(--color-background-layer-3);
    --input-flyout-backgroud-color-disabled: var(--color-background-layer-3);
    --input-placeholder-color-default: var(--color-background-layer-1);
    --input-text-color-disabled: var(--color-text-muted);
    --checkbox-background-color-hovered: var(--colors-brand-allpan-blue-100);
    /* Inputs End */

    /* Toaster Start */
    --toaster-border-error: var(--color-border-error-default);
    --toaster-border-warning: var(--color-border-warning-default);
    --toaster-border-success: var(--color-border-success-default);
    --toaster-border-info: var(--color-border-info-default);
    --toaster-background-error: var(--color-background-toaster-error);
    --toaster-background-warning: var(--color-background-toaster-warning);
    --toaster-background-success: var(--color-background-toaster-success);
    --toaster-background-info: var(--color-background-toaster-info);
    /* Toaster End */

    /* Status Start */
    --status-open-background: var(--color-background-chip-open);
    --status-in-progress-background: var(--color-background-chip-in-progress);
    --status-on-hold-background: var(--color-background-chip-on-hold);
    --status-resolved-background: var(--color-background-chip-resolved);
    --status-cancelled-background: var(--color-background-chip-cancelled);
    --status-open-border: var(--color-border-chip-open);
    --status-in-progress-border: var(--color-border-chip-in-progress);
    --status-on-hold-border: var(--color-border-chip-on-hold);
    --status-resolved-border: var(--color-border-chip-resolved);
    --status-cancelled-border: var(--color-border-chip-cancelled);
    /* Status End */
    
    /* Table Start */
    --table-header-background: var(--color-background-table-header);
    --table-row-background: var(--color-background-table-row);
    --table-row-background-hover: var(--color-background-table-row_hover);
    --table-line-background: var(--color-background-table-line);
    --table-sub-background: var(--color-background-table-sub);
    --table-sub-background-hover: var(--color-background-table-sub_hover);
    --table-selected-row-higlight: var(--color-border-highlight);
    --table-border-width-row-highlighted: 0.15rem;
    --table-border-color-default: var(--color-background-layer-1);
    /* Table End */

    /* Text Start */
    --text-link-color-default: var(--color-text-link-default);
    --text-link-color-pressed: var(--color-text-link-pressed);
    --text-color-default: var(--color-text-body);

    /* Stepper Start */
    --stepper-circle-color-default: var(--color-brand-primary);
    --stepper-circle-color-active: var(--color-brand-light);
    --stepper-circle-color-separator: var(--color-brand-light);
    /* Stepper End */

    /* Miscellaneous Start */
    --header-hight: 48px;  
    --upload-dropdown-border-color: var(--color-border-default);
    --upload-dropdown-border-color-hover: var(--color-border-hover);
    --page-title-bar: var(--color-brand-light);
    --text-highlight-light-color : var(--color-text-highlight-light);
    /* Miscellaneous End */
    --password-show-icon-active-color: var(--color-password-show-icon-active);
  /* _variables.scss End */
}