.page-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100%;
}

a {
    font-weight: 400;
    text-decoration: inherit;
    color: #10a37f;
}

.login-header {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    background-color: #fff;
}

.main-container {
    flex: 1 0 auto;
    min-height: 0;
    display: grid;
    box-sizing: border-box;
    grid-template-rows: [ left-start center-start right-start ] 1fr [ left-end center-end right-end ];
    grid-template-columns: [ left-start center-start ] 1fr [ left-end right-start ] 1fr [ center-end right-end ];
    align-items: center;
    justify-content: center;
    justify-items: center;
    grid-column-gap: 160px;
    column-gap: 160px;
    padding: 20px;
    width: 100%;
}

.content-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto;
    white-space: normal;
    border-radius: 5px;
    position: relative;
    grid-area: center;
    box-shadow: none;
    vertical-align: baseline;
    box-sizing: content-box;
}

.title-wrapper {
    padding: 24px 40px 24px;
    box-sizing: content-box;
}

.title {
    font-size: 32px;
    font: "Söhne";
    margin: 24px 0 0;
    color: #2d333a;
    width: 320px;
    text-align: center;
}

.login-container {
    background-color: #fff;
    padding: 0 40px 40px;
    border-radius: 3px;
    box-shadow: none;
    width: 320px;
    box-sizing: content-box;
    flex-shrink: 0;
}

.input-wrapper {
    position: relative;
    margin-bottom: 25px;
    width: 320px;
    box-sizing: content-box;
    display: flex;
    align-items: center; /* Aligns items vertically */
    gap: 10px; /* Spacing between checkbox and label */
}
  
.input-wrapper label {
    margin: 0;
    white-space: nowrap; /* Prevents the text from wrapping */
}

.input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #fff;
    border: 1px solid #c2c8d0;
    border-radius: 6px;
    box-sizing: border-box;
    color: #2d333a;
    font-family: inherit;
    font-size: 16px;
    height: 52px;
    line-height: 1.1;
    outline: none;
    padding-block:1px;padding-inline:2px;padding: 0 16px;
    transition: box-shadow .2s ease-in-out,border-color .2s ease-in-out;
    width: 100%;
    text-rendering: auto;
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: start;
    margin: 0
}

.input:focus,.input:valid {
    border: 1px solid #FAC12F;
    outline: none
}

.input:focus-within {
    box-shadow: 1px #FAC12F
}

.input:focus+.label,.input:valid+.label {
    font-size: 14px;
    top: 0;
    left: 10px;
    color: #FAC12F;
    background-color: #fff
}

.label {
    position: absolute;
    top: 26px;
    left: 16px;
    background-color: #fff;
    color: #6f7780;
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 8px;
    max-width: 90%;
    overflow: hidden;
    pointer-events: none;
    padding: 1px 6px;
    text-overflow: ellipsis;
    transform: translateY(-50%);
    transform-origin: 0;
    /* transition:transform .15s ease-in-out,top .15s ease-in-out,padding .15s ease-in-out; */
    white-space: nowrap;
    z-index: 1
}



.input.error, .input.error+.label {
    border-width: 1px;
    border-color: #d00e17;
}

.input.error+.label {
    color: #d00e17;
}

.input-error-message {
    display: none;
    margin-top: 4px;
    margin-bottom: 12px;
    margin-bottom: var(--spacing-1-5);
    font-size: 12px;
    line-height: 1.4;
    text-align: left;
    color: #d00e17;
}


.input {
    border-color: #d00e17;
    border-color: var(--error-color)
}

.cta-btn {
    position: relative;
    height: 52px;
    width: 320px;
    background-color: #FAC12F;
    color: #fff;
    margin: 24px 0 0;
    align-items: center;
    justify-content: center;
    display: flex;
    border-radius: 6px;
    padding: 4px 16px;
    font: inherit;
    border-width: 0px;
}

.cta-btn:hover {
    box-shadow: inset 0 0 0 150px #0000001a
}

.other-page {
    text-align: center;
    margin-top: 16px;
    font-size: 14px;
    width: 320px;
}

.other-page-link {
    padding: 4px;
}

.divider-wrapper {
    display: flex;
    flex-direction: row;
    text-transform: uppercase;
    border: none;
    font-size: 12px;
    font-weight: 400;
    margin: 0;
    padding: 24px 0 0;
    align-items: center;
    justify-content: center;
    width: 320px;
    vertical-align: baseline;
}

.divider {
    text-align: center;
    flex: .2 0 auto;
    margin: 0;
    height: 12px;
}

.divider-wrapper:before, .divider-wrapper:after {
    content: "";
    border-bottom: 1px solid #c2c8d0;
    flex: 1 0 auto;
    height: .5em;
    margin: 0;
}

.social-section {
    margin-top: 24px;
}

.social-btn {
    position: relative;
    width: 320px;
    border: 1px solid #c2c8d0;
    border-radius: 6px;
    font-size: 16px;
    align-items: center;
    background-color: #fff;
    height: 52px;
    transition: box-shadow .15 ease-in-out, background-color .15s ease-in-out;
    cursor: pointer;
    padding: 0 8px 0 52px;
    color: #2d333a;
    margin-bottom: 8px;
    display: flex;
    outline: 0;
}

.social-logo-wrapper {
    position: absolute;
    left: 26px;
    top: 50%;
    transform: translate(-50%) translateY(-50%);
}

.social-logo {
    width: 20px;
    height: 20px;
    display: inline-block;
}

.login-footer {
    text-align: center;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6e6e80;
    padding: 12px 0 24px;
    flex: 0 0 auto;
    background: none;
}

.separator:before {
    content: " | ";
    margin: 0 8px;
}