/* 修复chrome自动填充的input背景色 */
input:-webkit-autofill,
input:-webkit-autofill:focus {
    transition: background-color 0s 600000s, color 0s 600000s !important;
}

blockquote,body,dd,dl,dt,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,html,iframe,legend,li,ol,p,pre,textarea,ul {
    padding: 0;
    margin: 0
}

body,html {
    height: 100%
}

h1,h2,h3,h4,h5,h6 {
    font-size: 100%;
}

ul {
    list-style: none
}

button,input,optgroup,select,textarea {
    margin: 0;
    font-family: inherit;
    font-size: 100%;
}

audio,embed,iframe,img,object,video {
    max-width: 100%;
    height: auto
}

iframe {
    border: 0
}

table {
    border-spacing: 0;
    border-collapse: collapse
}

td,th {
    padding: 0;
    text-align: left
}

*,:after,:before {
    box-sizing: border-box
}

html {
    font-family: sans-serif;
    line-height: 1.15
}

a {
    text-decoration: none;
    color: inherit;
}

.underline:hover {
    text-decoration: underline;
}

.subtitle {
    display: none;
}

body {
    background-color: #18161A;
}


/**=== layout ====*/
.layout {
    display: flex;
    position: relative;
}

.left {
    flex-grow: 1;
    overflow: hidden;
}

.right {
    width: 100%;
    overflow: hidden;
    display: none;
    position: relative;
}

@media (min-width: 768px) {
  .right {
    display: block;
  }
}

.right .img-wrapper {
    position: relative;
}

.right .img-wrapper::after {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 180px;
    height: 100%;
    content: '';
    background: linear-gradient(to right, #18161A, #18161A00);
}

.right .img-wrapper::before {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 180px;
    height: 100%;
    content: '';
    background: linear-gradient(to left, #18161A, #18161A00);
}

.right .img-wrapper .layer::after {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 180px;
    content: '';
    background: linear-gradient(to top, #18161A, #18161A00);
}

.right .img-wrapper .layer::before {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    height: 180px;
    content: '';
    background: linear-gradient(to bottom, #18161A, #18161A00);
}

/* .right .img-wrapper-bg {
    position: relative;
    z-index: 1;
}

.right .img-wrapper-bg-shadow {
    position: absolute;
    left: 50%;
    top: 60%;
    transform: translate(-50%, -50%);
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 0;
} */

/**==== content =====*/

#kc-locale-dropdown {
    display: none;
}

.kcLoginClass {
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 16px;
    line-height: 24px;
    color: #D2D3E0;
    justify-content: center;
    background-color: #18161A;
    width: 100%;
    min-height: 100vh;
}

.kcFormCardClass {
    max-width: 500px;
    width: 100%;
}

#kc-content {
    width: 100%;
    margin: 0 auto;
    max-width: 500px;
    min-height: 684px;
}

.header-logo {
    display: block;
    margin: 20px auto;
    width: fit-content;
}

.header-logo .logo {
    width: 174px;
    height: 60px;
}

.kcFormHeaderClass {
    margin-bottom: 30px;
}

.kcFormHeaderClass .header-title {
    font-size: 20px;
    line-height: 24px;
    color: #D2D3E0;
    text-align: center;
}

.footer {
    text-align: center;
    margin-top: 50px;
    padding-bottom: 30px;
}

.footer .blod-text:hover {
    text-decoration: underline;
}

.kcFormGroupClass {
    /* width: 500px; */
    margin-bottom: 21px;
}

.light-text {
    color: #28B894;
}

.blod-text {
    color: #28B894;
    font-weight: 700;
}

.text-sm {
    font-size: 12px;
    line-height: 16px;
}

.text-gray {
    color: #4c4f6bcc;
}

.title-desc {
    display: flex;
}

.mb-24 {
    margin-bottom: 21px;
}

#kc-registration-container {
    margin-left: 3px;
}

.text-base {
    font-size: 16px;
    line-height: 24px;
}

#kc-social-providers,
#kc-social-providers-login {
    margin-bottom: 0;
}

#kc-social-providers ul,
#kc-social-providers-login ul {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}

#kc-social-providers ul li,
#kc-social-providers-login ul li {
    width: 100%;
    background-color: #3B3944;
    border-radius: 6px;
    height: 48px;
    line-height: 48px;
    transition: all 0.2s ease;
}

#kc-social-providers ul li:hover,
#kc-social-providers-login ul li:hover {
    background-color: #4C4F6B;
}

#kc-social-providers ul li a,
#kc-social-providers-login ul li a {
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 500;
    font-size: 16px;
    gap: 8px;
}

#social-google i {
    width: 20px;
    height: 20px;
    background: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_43_313)'%3E%3Cpath d='M10.2031 8.18164V12.0544H15.6948C15.4536 13.2999 14.73 14.3544 13.6447 15.0635L16.9563 17.5817C18.8859 15.8363 19.999 13.2727 19.999 10.2272C19.999 9.51812 19.9341 8.83624 19.8135 8.18175L10.2031 8.18164Z' fill='%234285F4'/%3E%3Cpath d='M4.4845 11.9033L3.73759 12.4636L1.09375 14.4818C2.77279 17.7454 6.21411 20 10.203 20C12.958 20 15.2678 19.1091 16.9562 17.5819L13.6445 15.0636C12.7354 15.6636 11.5758 16.0273 10.203 16.0273C7.54991 16.0273 5.29579 14.2728 4.48868 11.9091L4.4845 11.9033Z' fill='%2334A853'/%3E%3Cpath d='M1.09455 5.51807C0.398847 6.86347 0 8.38168 0 9.99985C0 11.618 0.398847 13.1362 1.09455 14.4816C1.09455 14.4907 4.4898 11.8998 4.4898 11.8998C4.28572 11.2998 4.16509 10.6635 4.16509 9.99974C4.16509 9.33602 4.28572 8.69969 4.4898 8.09969L1.09455 5.51807Z' fill='%23FBBC05'/%3E%3Cpath d='M10.2032 3.98184C11.706 3.98184 13.0418 4.49092 14.1086 5.47275L17.0306 2.60914C15.2588 0.990976 12.9583 0 10.2032 0C6.21432 0 2.77279 2.24546 1.09375 5.51822L4.4889 8.10005C5.29591 5.73638 7.55012 3.98184 10.2032 3.98184Z' fill='%23EA4335'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_43_313'%3E%3Crect width='20' height='20' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: center center;
    display: inline-block;
}

#social-github i {
    width: 20px;
    height: 20px;
    background: url("data:image/svg+xml,%3Csvg width='25' height='24' viewBox='0 0 25 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.499 2C18.1638 2 22.752 6.58819 22.752 12.2529C22.7514 14.4012 22.0772 16.4952 20.8242 18.2402C19.5712 19.9852 17.8026 21.2933 15.7672 21.9804C15.2545 22.0829 15.0623 21.7625 15.0623 21.4934C15.0623 21.1474 15.0751 20.0452 15.0751 18.6738C15.0751 17.7126 14.7547 17.0975 14.383 16.777C16.6643 16.5207 19.0609 15.6492 19.0609 11.7147C19.0609 10.5868 18.6636 9.67689 18.01 8.95918C18.1125 8.70286 18.4714 7.65193 17.9075 6.24215C17.9075 6.24215 17.0488 5.9602 15.0879 7.29308C14.2677 7.06239 13.3962 6.94704 12.5247 6.94704C11.6532 6.94704 10.7817 7.06239 9.96143 7.29308C8.00056 5.97301 7.14187 6.24215 7.14187 6.24215C6.57796 7.65193 6.93681 8.70286 7.03934 8.95918C6.38572 9.67689 5.98842 10.5997 5.98842 11.7147C5.98842 15.6364 8.37223 16.5207 10.6535 16.777C10.3587 17.0334 10.0896 17.4819 9.99988 18.1484C9.41034 18.4175 7.93648 18.8533 7.01371 17.3025C6.82147 16.9949 6.24474 16.2388 5.43732 16.2516C4.57864 16.2644 5.09129 16.7386 5.45014 16.9308C5.88589 17.1743 6.38572 18.0843 6.50106 18.3791C6.70612 18.9558 7.37256 20.058 9.94862 19.5838C9.94862 20.4425 9.96143 21.2499 9.96143 21.4934C9.96143 21.7625 9.76919 22.0701 9.25654 21.9804C7.21446 21.3007 5.43826 19.9952 4.17991 18.2492C2.92157 16.5031 2.24497 14.4052 2.2461 12.2529C2.2461 6.58819 6.83428 2 12.499 2Z' fill='white'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: center center;
    display: inline-block;
}

.footer {
    margin-top: 50px;
    padding-bottom: 30px;
}

.footer .blod-text:hover {
    text-decoration: underline;
}

.kcFormGroupClass {
    /* width: 500px; */
    margin-bottom: 21px;
}

.input-wrapper {
    background-color: #4C4F6B0F;
    border-radius: 6px;
    display: flex;
    align-items: center;
    padding: 5px 24px;
    height: 48px;
    border: 1px solid #4C4F6B;
}

.icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    opacity: 0.6;
    background-color: #fff;
}

.input-wrapper .icon {
    margin-right: 12px;
}

.icon-email {
    mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.744 2.63346L21.272 7.52667C21.538 7.69957 21.671 7.78603 21.7674 7.90134C21.8527 8.00342 21.9167 8.1215 21.9558 8.24865C22 8.39229 22 8.55092 22 8.86818V16.1999C22 17.8801 22 18.7201 21.673 19.3619C21.3854 19.9264 20.9265 20.3853 20.362 20.6729C19.7202 20.9999 18.8802 20.9999 17.2 20.9999H6.8C5.11984 20.9999 4.27976 20.9999 3.63803 20.6729C3.07354 20.3853 2.6146 19.9264 2.32698 19.3619C2 18.7201 2 17.8801 2 16.1999V8.86818C2 8.55092 2 8.39229 2.04417 8.24865C2.08327 8.1215 2.14735 8.00342 2.23265 7.90134C2.32901 7.78603 2.46201 7.69957 2.72802 7.52667L10.256 2.63346M13.744 2.63346C13.1127 2.22315 12.7971 2.018 12.457 1.93817C12.1564 1.86762 11.8436 1.86762 11.543 1.93817C11.2029 2.018 10.8873 2.22315 10.256 2.63346M13.744 2.63346L19.9361 6.65837C20.624 7.10547 20.9679 7.32903 21.087 7.61252C21.1911 7.86027 21.1911 8.13949 21.087 8.38725C20.9679 8.67074 20.624 8.89429 19.9361 9.3414L13.744 13.3663C13.1127 13.7766 12.7971 13.9818 12.457 14.0616C12.1564 14.1322 11.8436 14.1322 11.543 14.0616C11.2029 13.9818 10.8873 13.7766 10.256 13.3663L4.06386 9.34139C3.37601 8.89429 3.03209 8.67074 2.91297 8.38725C2.80888 8.13949 2.80888 7.86027 2.91297 7.61252C3.03209 7.32903 3.37601 7.10548 4.06386 6.65837L10.256 2.63346M21.5 18.9999L14.8572 12.9999M9.14282 12.9999L2.5 18.9999' stroke='%239B9C9E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
    mask-size: cover;
    mask-position: center;
}

.icon-password {
    mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17 10V8C17 5.23858 14.7614 3 12 3C9.23858 3 7 5.23858 7 8V10M12 14.5V16.5M8.8 21H15.2C16.8802 21 17.7202 21 18.362 20.673C18.9265 20.3854 19.3854 19.9265 19.673 19.362C20 18.7202 20 17.8802 20 16.2V14.8C20 13.1198 20 12.2798 19.673 11.638C19.3854 11.0735 18.9265 10.6146 18.362 10.327C17.7202 10 16.8802 10 15.2 10H8.8C7.11984 10 6.27976 10 5.63803 10.327C5.07354 10.6146 4.6146 11.0735 4.32698 11.638C4 12.2798 4 13.1198 4 14.8V16.2C4 17.8802 4 18.7202 4.32698 19.362C4.6146 19.9265 5.07354 20.3854 5.63803 20.673C6.27976 21 7.11984 21 8.8 21Z' stroke='%239B9C9E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
    mask-size: cover;
    mask-position: center;
}

.icon-eyes {
    mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.7429 5.09232C11.1494 5.03223 11.5686 5 12.0004 5C17.1054 5 20.4553 9.50484 21.5807 11.2868C21.7169 11.5025 21.785 11.6103 21.8231 11.7767C21.8518 11.9016 21.8517 12.0987 21.8231 12.2236C21.7849 12.3899 21.7164 12.4985 21.5792 12.7156C21.2793 13.1901 20.8222 13.8571 20.2165 14.5805M6.72432 6.71504C4.56225 8.1817 3.09445 10.2194 2.42111 11.2853C2.28428 11.5019 2.21587 11.6102 2.17774 11.7765C2.1491 11.9014 2.14909 12.0984 2.17771 12.2234C2.21583 12.3897 2.28393 12.4975 2.42013 12.7132C3.54554 14.4952 6.89541 19 12.0004 19C14.0588 19 15.8319 18.2676 17.2888 17.2766M3.00042 3L21.0004 21M9.8791 9.87868C9.3362 10.4216 9.00042 11.1716 9.00042 12C9.00042 13.6569 10.3436 15 12.0004 15C12.8288 15 13.5788 14.6642 14.1217 14.1213' stroke='%239B9C9E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
    mask-size: cover;
    mask-position: center;
}

.icon-eyes-open {
    mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d=' M2.4 12.5 C3.9 14.8, 7.2 19.2, 12 19.2 C16.8 19.2, 20.1 14.8, 21.6 12.5 C20.1 10.2, 16.8 5.8, 12 5.8 C7.2 5.8, 3.9 10.2, 2.4 12.5 Z ' stroke='%239B9C9E' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='12' r='3' stroke='%239B9C9E' stroke-width='2' fill='none' /%3E%3C/svg%3E%0A");
    mask-size: cover;
    mask-position: center;
}

input {
    width: 100%;
    outline: none;
    border: none;
    color: #fff;
    background-color: transparent;
}

.input-shadow:focus,
.input-shadow:focus-within .icon {
    opacity: 1;
}

#kc-form-options {
    display: flex;
    margin-bottom: 12px;
}

.kc-form-options-wrapper {
    font-size: 12px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 21px;
}

.checkbox-line .custom-checkbox {
    font-size: 12px;
    display: flex;
    gap: 8px;
    padding: 0;
    align-items: flex-start;
}

.checkbox-line input[type="checkbox"] {
    display: none;
}

.checkmark {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    border-radius: 6px;
    border: none;
    overflow: hidden;
}

.custom-checkbox input[type="checkbox"]+.sp-color-checkmark-outline .checkmark {
    background: #4C4F6B33;
}

.custom-checkbox input[type="checkbox"]:checked+.sp-color-checkmark-outline {
    position: relative;
}

.custom-checkbox input[type="checkbox"]:checked+.sp-color-checkmark-outline .checkmark::after {
    content: '';
    position: absolute;
    background: #28B894;
    width: 12px;
    height: 12px;
    top: 50%;
    left: 50%;
    border-radius: 2px;
    transform: translate(-50%, -50%);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.custom-checkbox a {
    text-decoration: underline;
}

.policy-wrapper a {
    font-weight: 700;
}

.policy-wrapper .sp-color-checkmark-outline {
    /* 移除负 margin，通过 flex-start 对齐 */
    margin-top: 2px;
}

.submit-button {
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    gap: 16px;
    height: 48px;
    background-color: #28B894;
    position: relative;
    padding: 8px;
    color: #18161A;
    font-weight: 700;
    font-size: 18px;
    line-height: 26px;
    position: relative;
    z-index: 0;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Hover 状态 - 未禁用时 */
.submit-button:not(:disabled):hover {
    background-color: #2DD4A8;
    box-shadow: 0 4px 12px rgba(40, 184, 148, 0.4);
}

/* Active 状态 - 点击时 */
.submit-button:not(:disabled):active {
    background-color: #22A17D;
    box-shadow: 0 2px 6px rgba(40, 184, 148, 0.3);
    transform: translateY(0);
}

/* Disabled 状态 */
.submit-button:disabled {
    cursor: not-allowed;
    color: #18161a82;
}

.submit-button-wrapper {
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    gap: 16px;
    height: 54px;
    background-color: #28B894;
    position: relative;
    align-items: center;
    transition: all 0.3s ease;
}

/* Wrapper Hover 状态 */
.submit-button-wrapper:has(input:not(:disabled)):hover {
    background-color: #2DD4A8;
    box-shadow: 0 4px 12px rgba(40, 184, 148, 0.4);
}

/* Wrapper Active 状态 */
.submit-button-wrapper:has(input:not(:disabled)):active {
    background-color: #22A17D;
    box-shadow: 0 2px 6px rgba(40, 184, 148, 0.3);
}

.submit-button-wrapper input {
    padding: 8px;
    color: #18161A;
    font-weight: 700;
    font-size: 18px;
    line-height: 26px;
    text-indent: 40px;
}

/* Disabled 状态下的 input 文字颜色 */
.submit-button-wrapper input:disabled {
    cursor: not-allowed;
}

.submit-button-wrapper::after {
    content: '';
    display: block;
    position: absolute;
    left: 140px;
    width: 48px;
    height: 48px;
    background: url('https://codebuddy-1328495429.cos.accelerate.myqcloud.com/web/ide/button-avatar.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* Disabled 状态下的图标透明度 */
.submit-button-wrapper:has(input:disabled)::after {
    opacity: 0.5;
}

.alert-info {
    color: #D2D3E0;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    background-color: transparent;
    position: relative;
    border: 1px solid #404040;
    padding: 3px;
    padding-right: 27px;
    padding-left: 12px;
    word-break: break-word;
    margin-bottom: 21px;
}

.t-icon-error-circle-filled {
    flex-shrink: 0;
}

.alert-close-icon {
    position: absolute;
    right: 12px;
    cursor: pointer;
}

input::placeholder {
    color: #a9a9a9;
}

.input-error {
    font-size: 14px;
    line-height: 20px;
    color: rgba(255, 0, 0, 0.655);
}

.custom-select-wrapper {
    position: relative;
    width: 100%;
    border: 1px solid #4C4F6B;
    border-radius: 6px;
}

.custom-select-trigger {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    user-select: none;
    height: 38px;
    padding: 0 12px;
    transition: all 0.3s ease;
}

.icon-globe {
    mask-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3ccircle cx='12' cy='12' r='10'%3e%3c/circle%3e%3cline x1='2' y1='12' x2='22' y2='12'%3e%3c/line%3e%3cpath d='m12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'%3e%3c/path%3e%3c/svg%3e");
    mask-size: cover;
    mask-position: center;
}

.icon-chevron-down {
    mask-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
    mask-size: cover;
    mask-position: center;
    transition: transform 0.3s ease;
}

.icon-chevron-down.rotated {
    transform: rotate(180deg);
}

.icon-search {
    mask-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3ccircle cx='11' cy='11' r='8'%3e%3c/circle%3e%3cpath d='m21 21-4.35-4.35'%3e%3c/path%3e%3c/svg%3e");
    mask-size: cover;
    mask-position: center;
}

.custom-select-trigger .selected-text {
    flex: 1;
    color: #fff;
    font-size: 14px;
    line-height: 22px;
}

.custom-select-trigger .placeholder {
    color: #a9a9a9;
}

.custom-select-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: -1px;
    right: -1px;
    background: #18161A;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    z-index: 1000;
    max-height: 400px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.dropdown-search {
    position: relative;
    padding: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.search-input {
    width: 100%;
    height: 36px;
    padding: 0 12px 0 40px;
    background: #4C4F6B0F;
    border: none;
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    outline: none;
}

.search-input::placeholder {
    color: #9B9C9E;
}

.dropdown-search .icon-search {
    position: absolute;
    left: 24px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    opacity: 0.6;
}

.dropdown-section {
    max-height: 300px;
    overflow-y: auto;
}

.section-header {
    padding: 12px 16px 8px 16px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(155, 156, 158, 0.8);
    /* background: #1A1A1A; */
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    position: sticky;
    top: 0;
    z-index: 10;
}

.current-region-header {
    color: #28B894;
    background: rgba(50, 230, 185, 0.1);
}

.dropdown-option {
    padding: 12px 16px;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.dropdown-option:hover {
    background: #4C4F6B0F;
}

.dropdown-option.selected {
    background: rgba(108, 77, 255, 0.1);
    color: #28B894;
    border-left: 3px solid #28B894;
}

.current-region-option.selected {
    color: #28B894;
}

.current-region-option {
    color: #fff;
    font-weight: 500;
}

.current-region-option:hover {
    /* background: rgba(50, 230, 185, 0.15); */
    background: #4C4F6B0F;
}

.hot-region-option {
    /* background: #29282B; */
    color: #CDCECF;
}

.hot-region-option:hover {
    background: #32323B;
}

.current-dropdown-section {
    background: #1A1A1A;
}

/* Scrollbar styling for dropdown */
.dropdown-section::-webkit-scrollbar {
    width: 6px;
}

.dropdown-section::-webkit-scrollbar-track {
    background: #1A1A1A;
}

.dropdown-section::-webkit-scrollbar-thumb {
    background: #404040;
    border-radius: 3px;
}

.dropdown-section::-webkit-scrollbar-thumb:hover {
    background: #555;
}

@media (max-width: 560px) {
    .submit-button-wrapper::after {
        left: 20%;
    }
}

@media (max-width: 320px) {
    .submit-button-wrapper::after {
        left: 10%;
    }
}

@media (max-height: 900px) {
    body {
        justify-content: flex-start;
    }
}

.instruction, #kc-registration-container, #kc-info-wrapper {
    margin-bottom: 21px;
}

/* login-page-expired */
.instruction a, #backToApplication, #kc-registration a, .color-light {
    text-decoration: underline;
    color: #28B894;
}

.sp-text a:hover, .blod-text a:hover {
    text-decoration: underline;
}

/*** update-profile ***/
#kc-update-profile-form label {
    display: inline-block;
    margin-bottom: 6px;
}

#kc-update-profile-form input {
    background-color: #4C4F6B0F;
    border-radius: 6px;
    display: flex;
    align-items: center;
    padding: 5px 24px;
    height: 48px;
}

#kc-update-profile-form #kc-form-buttons input {
    padding: 8px;
    color: #18161A;
    font-weight: 700;
    font-size: 18px;
    line-height: 26px;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    gap: 16px;
    height: 54px;
    background-color: #fff;
    position: relative;
    align-items: center;
    cursor: pointer;
}

.relative {
    position: relative;
}

.h-full {
    height: 100%;
}

.w-full {
    width: 100%;
}

.flex {
    display: flex;
}

.items-center {
    align-items: center;
}

.justify-center {
    justify-content: center;
}