:root {
    --pf-global--link--Color: #ffffff;
    --pf-global--link--hover--Color: #ffd618;
}

.required {
    color: #ee5858;
}

.login-pf a {
    color: var(--pf-global--link--Color);
    text-decoration: none;
}

.login-pf-page .card-pf p {
    color: rgba(255,255,255, .64);
    font-size: 15px;
}

h1#kc-page-title {
    margin-top: 0;
}


.login-pf a:hover,
.login-pf a:focus {
    color: var(--pf-global--link--hover--Color);
    text-decoration: none;
    border: none;
    outline: none;
}

* {
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
}

.login-pf body {
    font-family: "Inter", sans-serif !important;
    background: #333;
    color: #ffffffa3;
    text-rendering: geometricprecision;
}

h1,h2,h3,h4,h5,h6 {
    color: #fff !important;
}

#kc-header {
    display: none;
}

.card-pf {
    position: relative;
    max-width: 400px !important;
    margin: auto !important;
    border-radius: 16px;
    border-top: none;
    box-shadow: none;
    background: #212630;
    padding: 64px 40px 48px 40px !important;
}

#kc-locale-wrapper {
    position: absolute;
    right: 0;
    top: -40px;
}

.login-pf-page .login-pf-signup {
    color: #fff;
}

.login-pf-page .login-pf-signup a.pf-c-button {
    margin-left: 0
}

.kc-social-gray {
    color: #fff;
}

#kc-form-options .checkbox {
    color: #fff;
}

.card-pf #kc-info-wrapper {
    background: none;
    border: none !important;
}

.card-pf #kc-info {
    margin: 10px -35px -30px;
}

.card-pf #kc-info-wrapper  {
    margin-top: 10px;
    padding-top: 10px;
}

.card-pf #kc-info-wrapper #kc-registration-container {
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,.16);
}

.card-pf #kc-info-wrapper #kc-registration-container span {
    display: block;
    margin-bottom: 10px;
}

.pf-c-button {
    font-familiy: Inter, sans-serif;
    font-size: 13px;
    font-weight: 500;
    --pf-c-button--m-primary--Color: #161a22;
    --pf-c-button--m-primary--BackgroundColor: #ffd618;
    --pf-c-button--m-primary--hover--Color: #161a22;
    --pf-c-button--m-primary--hover-BackgroundColor:#ffbf00;
    --pf-c-button--m-primary--focus--Color: #161a22;
    --pf-c-button--m-primary--focus-BackgroundColor:#ffbf00;
    border-radius: 6px;
    min-height: 46px;
    min-width: 50px;
}

.pf-c-button.pf-m-primary[disabled] {
    --pf-c-button--disabled--Color: #161a22;
    --pf-c-button--disabled--BackgroundColor: #ffd618;
    opacity: .5;
}

.pf-c-button.pf-m-primary:hover {
    --pf-c-button--m-primary--Color: #161a22;
    --pf-c-button--m-primary--BackgroundColor:#ffbf00;
}

.pf-c-button.pf-m-primary:focus,
.pf-c-button.pf-m-primary:active {
    --pf-c-button--m-primary--Color: #161a22;
    --pf-c-button--m-primary--BackgroundColor:#ffbf00;

    border: none;
    outline: none;
    box-shadow: 0 0 0 3px #ffd61852;
}

.pf-c-button.pf-m-control {
    background: none;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,.16);
    color: #fff;
    font-family: Inter,sans-serif;
    font-style: normal;
    position: relative;
    font-weight: 600;
    line-height: 1.2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
    min-height: 48px;
    text-decoration: none;

}

.pf-c-button.pf-m-control:after {
    content: '';
    display: none;
}

.pf-c-button.pf-m-control:hover,
.pf-c-button.pf-m-control:focus {
    background: rgba(138,168,229,.08);
    color: #fff !important;
    text-decoration: none;
}

.pf-c-button.pf-m-control:focus {
    box-shadow: 0 0 0 3px #8aa8e529;
}

.kc-social-provider-logo {
    float: none;
    display: block;
    width: auto;
    height: auto;

}

.pf-c-button.pf-m-control span {
    display: block;
    left: 0;
}


.base-form-text {
    font-family: Inter,sans-serif;
    font-style: normal;
    font-size: 13px;
    line-height: 1.5;
    color: #ffffff80;
}

.base-text {
    color: rgba(255,255,255, .64) !important;
    font-size: 15px;
}

.base-text.align-center {
    text-align: center;
}

.form-group {
    margin-bottom: 8px;
}

.divider {
    display: block;
    margin-bottom: 36px;
    margin-top: 36px;
}

#kc-page-title,
#kc-page-title p {
    color: #fff;
    font-size: 22px;
    font-family: 'Poppins', 'sans-serif';
    font-weight: 600;
    line-height: 31px;
    margin-bottom: 16px;
}

ul.base-list {
    text-align: center;
    font-size: 15px;

}

ul.base-list li {
    display: flex;
    align-items: center;
    gap: 8px;
}

ul.base-list li::before {
    content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
    color: #ffd618; /* Change the color */
    font-weight: bold; /* If you want it to be bold */
    display: inline-block; /* Needed to add space between the bullet and the text */
    width: 1em; /* Also needed for space (tweak if needed) */
    font-size: 24px;
    line-height: 15px;
}

ul.base-list.benefits {
    text-align: left;
}

ul.base-list.benefits li {
    text-align: left;
    align-items: flex-start;
}

ul.base-list.benefits li::before {
    margin-top: 4px;
    width: auto;
}

.pf-c-form-control {
    font-family: "Inter", 'sans-serif';
    font-size: 15px;
    font-weight: 500;
    padding: 0 16px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(19,23,31,.7);
    color: #fff;
    min-height: 46px;
}

.pf-c-form-control:hover,
.pf-c-form-control:focus {
    background: rgba(19,23,31,.4);
    outline: none;
}

.pf-c-form-control:focus {
    box-shadow: 0 0 0 3px #ffffff29;
}

.pf-c-alert {
    border-radius: 6px;
    margin-bottom: 16px;
    border-top: none;
}

p.instruction:not(:last-child) {
    margin-bottom: 20px;
}

.fs-xs {
    font-size: 9px !important;
}

.close-button {
    position: absolute !important;
    top: 16px;
    right: 16px;
}

.close-button:hover,
.close-button:active,
.close-button:focus
{
    color: #fff !important;
}

#no-mail-received-hidden {
    display: none;
}

#no-mail-received-hidden:target {
    display: block;
}

#no-mail-received-button {
    margin: 0 auto;
    display: inline-flex;
    gap: 4px;
}

#no-mail-received svg {
    display: block;
    height: auto;
    width: 12px;
}

#no-mail-received ol {
    margin-top: 10px;
    list-style-position: inside;
}