@charset "UTF-8";
html {
line-height: 1.15;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
}
main {
display: block;
}
h1 {
font-size: 2em;
margin: 0.67em 0;
}
hr {
box-sizing: content-box;
height: 0;
overflow: visible;
}
pre {
font-family: monospace, monospace;
font-size: 1em;
}
a {
background-color: transparent;
}
abbr[title] {
border-bottom: none;
text-decoration: underline;
text-decoration: underline dotted;
}
b,
strong {
font-weight: bolder;
}
code,
kbd,
samp {
font-family: monospace, monospace;
font-size: 1em;
}
small {
font-size: 80%;
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
img {
border-style: none;
}
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
font-size: 100%;
line-height: 1.15;
margin: 0;
}
button,
input {
overflow: visible;
}
button,
select {
text-transform: none;
}
button,
[type=button],
[type=reset],
[type=submit] {
-webkit-appearance: button;
}
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
border-style: none;
padding: 0;
}
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
outline: 1px dotted ButtonText;
}
fieldset {
padding: 0.35em 0.75em 0.625em;
}
legend {
box-sizing: border-box;
color: inherit;
display: table;
max-width: 100%;
padding: 0;
white-space: normal;
}
progress {
vertical-align: baseline;
}
textarea {
overflow: auto;
}
[type=checkbox],
[type=radio] {
box-sizing: border-box;
padding: 0;
}
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
height: auto;
}
[type=search] {
-webkit-appearance: textfield;
outline-offset: -2px;
}
[type=search]::-webkit-search-decoration {
-webkit-appearance: none;
}
::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit;
}
details {
display: block;
}
summary {
display: list-item;
}
template {
display: none;
}
[hidden] {
display: none !important;
}
:root {
--bg:            #ffffff;
--surface:       #ffffff;
--surface-hover: #F5F8FF;
--ink:           #0b1b2b;
--ink-on-dark:   #E6EDF3;
--muted:         #5d6a7a;
--brand:         #002C5F;
--on-brand:      #ffffff;
--border:        #E6E6E6;
--shadow-1:      0 2px 6px rgba(0, 0, 0, .08);
--shadow-2:      0 8px 18px rgba(0, 0, 0, .12);
--radius-apple:  16px;
--gap-card:      16px;
}
.logo-dark { display: none; }
.logo-light { width: 160px; height: auto; }
* {
box-sizing: border-box;
}
.header {
position: sticky;
top: 0;
z-index: 1000;
background: #05141f;   color: #f8fafc;   padding: 0 5%;
height: 70px;   display: flex;
align-items: center;
justify-content: space-between;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08); }
@media (min-width: 1024px) {
.header {
height: 80px;
padding: 0 40px;
}
}
body {
background-color: #FFFFFF;
color: #2F3941;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
font-size: 15px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
@media (min-width: 1024px) {
body>main {
min-height: 65vh;
}
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
margin-top: 0;
}
h1 {
font-size: 32px;
}
h2 {
font-size: 40px;
}
h3 {
font-size: 18px;
font-weight: 600;
}
h4 {
font-size: 16px;
}
a {
color: #1F73B7;
text-decoration: none;
}
a:visited {
color: #9358B0;
}
a:hover,
a:active,
a:focus {
text-decoration: underline;
}
.hbs-form input,
.hbs-form textarea,
.search input,
.search textarea {
color: #000;
font-size: 14px;
}
.hbs-form input,
.search input {
max-width: 100%;
box-sizing: border-box;
transition: border 0.12s ease-in-out;
}
.hbs-form input:where(:not([type=checkbox])),
.search input:where(:not([type=checkbox])) {
outline: none;
}
.hbs-form input:where(:not([type=checkbox])):focus,
.search input:where(:not([type=checkbox])):focus {
border: 1px solid #17494D;
}
.hbs-form input[disabled],
.search input[disabled] {
background-color: #ddd;
}
.hbs-form select,
.search select {
-webkit-appearance: none;
-moz-appearance: none;
background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23CCC' d='M0 0h10L5 6 0 0z'/%3E%3C/svg%3E%0A") no-repeat #fff;
background-position: right 10px center;
border: 1px solid #87929D;
border-radius: 4px;
padding: 8px 30px 8px 10px;
outline: none;
color: #555;
width: 100%;
}
.hbs-form select:focus,
.search select:focus {
border: 1px solid #17494D;
}
.hbs-form select::-ms-expand,
.search select::-ms-expand {
display: none;
}
.hbs-form textarea,
.search textarea {
border: 1px solid #87929D;
border-radius: 2px;
resize: vertical;
width: 100%;
outline: none;
padding: 10px;
}
.hbs-form textarea:focus,
.search textarea:focus {
border: 1px solid #17494D;
}
.container {
max-width: 1160px;
margin: 0 auto;
padding: 0 5%;
}
@media (min-width: 1160px) {
.container {
padding: 0;
width: 90%;
}
}
.container-divider {
border-top: 1px solid var(--border);
margin-bottom: 20px;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
.error-page {
max-width: 1160px;
margin: 0 auto;
padding: 0 5%;
}
@media (min-width: 1160px) {
.error-page {
padding: 0;
width: 90%;
}
}
.visibility-hidden {
border: 0;
clip: rect(0 0 0 0);
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 1px;
margin: -1px;
padding: 0;
position: absolute;
width: 1px;
white-space: nowrap;
overflow: hidden !important;
}
.button,
.pagination-next-link,
.pagination-prev-link,
.pagination-first-link,
.pagination-last-link,
.subscriptions-subscribe button,
.requests-table-toolbar .organization-subscribe button,
.community-follow button,
.article-subscribe button,
.section-subscribe button,
.split-button button {
background-color: transparent;
border: 1px solid #17494D;
border-radius: 4px;
color: #17494D;
cursor: pointer;
display: inline-block;
font-size: 12px;
line-height: 2.34;
margin: 0;
padding: 0 20px;
text-align: center;
transition: background-color 0.12s ease-in-out, border-color 0.12s ease-in-out, color 0.15s ease-in-out;
user-select: none;
white-space: nowrap;
width: 100%;
-webkit-touch-callout: none;
}
@media (min-width: 768px) {
.button,
.pagination-next-link,
.pagination-prev-link,
.pagination-first-link,
.pagination-last-link,
.subscriptions-subscribe button,
.requests-table-toolbar .organization-subscribe button,
.community-follow button,
.article-subscribe button,
.section-subscribe button,
.split-button button {
width: auto;
}
}
.button:visited,
.pagination-next-link:visited,
.pagination-prev-link:visited,
.pagination-first-link:visited,
.pagination-last-link:visited,
.subscriptions-subscribe button:visited,
.requests-table-toolbar .organization-subscribe button:visited,
.community-follow button:visited,
.article-subscribe button:visited,
.section-subscribe button:visited,
.split-button button:visited {
color: #17494D;
}
.button:hover,
.pagination-next-link:hover,
.pagination-prev-link:hover,
.pagination-first-link:hover,
.pagination-last-link:hover,
.subscriptions-subscribe button:hover,
.requests-table-toolbar .organization-subscribe button:hover,
.community-follow button:hover,
.article-subscribe button:hover,
.section-subscribe button:hover,
.split-button button:hover,
.button:active,
.pagination-next-link:active,
.pagination-prev-link:active,
.pagination-first-link:active,
.pagination-last-link:active,
.subscriptions-subscribe button:active,
.requests-table-toolbar .organization-subscribe button:active,
.community-follow button:active,
.article-subscribe button:active,
.section-subscribe button:active,
.split-button button:active,
.button:focus,
.pagination-next-link:focus,
.pagination-prev-link:focus,
.pagination-first-link:focus,
.pagination-last-link:focus,
.subscriptions-subscribe button:focus,
.requests-table-toolbar .organization-subscribe button:focus,
.community-follow button:focus,
.article-subscribe button:focus,
.section-subscribe button:focus,
.split-button button:focus,
.button.button-primary,
.button-primary.pagination-next-link,
.button-primary.pagination-prev-link,
.button-primary.pagination-first-link,
.button-primary.pagination-last-link,
.subscriptions-subscribe button.button-primary,
.subscriptions-subscribe button[data-selected=true],
.requests-table-toolbar .organization-subscribe button.button-primary,
.requests-table-toolbar .organization-subscribe button[data-selected=true],
.community-follow button.button-primary,
.article-subscribe button.button-primary,
.article-subscribe button[data-selected=true],
.section-subscribe button.button-primary,
.section-subscribe button[data-selected=true],
.split-button button.button-primary {
background-color: #17494D;
color: #FFFFFF;
text-decoration: none;
}
.button.button-primary:hover,
.button-primary.pagination-next-link:hover,
.button-primary.pagination-prev-link:hover,
.button-primary.pagination-first-link:hover,
.button-primary.pagination-last-link:hover,
.subscriptions-subscribe button.button-primary:hover,
.subscriptions-subscribe button[data-selected=true]:hover,
.requests-table-toolbar .organization-subscribe button.button-primary:hover,
.requests-table-toolbar .organization-subscribe button[data-selected=true]:hover,
.community-follow button.button-primary:hover,
.article-subscribe button.button-primary:hover,
.article-subscribe button[data-selected=true]:hover,
.section-subscribe button.button-primary:hover,
.section-subscribe button[data-selected=true]:hover,
.split-button button:hover,
.button.button-primary:focus,
.button-primary.pagination-next-link:focus,
.button-primary.pagination-prev-link:focus,
.button-primary.pagination-first-link:focus,
.button-primary.pagination-last-link:focus,
.subscriptions-subscribe button.button-primary:focus,
.subscriptions-subscribe button[data-selected=true]:focus,
.requests-table-toolbar .organization-subscribe button.button-primary:focus,
.requests-table-toolbar .organization-subscribe button[data-selected=true]:focus,
.community-follow button.button-primary:focus,
.article-subscribe button.button-primary:focus,
.article-subscribe button[data-selected=true]:focus,
.section-subscribe button.button-primary:focus,
.section-subscribe button[data-selected=true]:focus,
.split-button button.button-primary:focus,
.button.button-primary:active,
.button-primary.pagination-next-link:active,
.button-primary.pagination-prev-link:active,
.button-primary.pagination-first-link:active,
.button-primary.pagination-last-link:active,
.subscriptions-subscribe button.button-primary:active,
.subscriptions-subscribe button[data-selected=true]:active,
.requests-table-toolbar .organization-subscribe button.button-primary:active,
.requests-table-toolbar .organization-subscribe button[data-selected=true]:active,
.community-follow button.button-primary:active,
.article-subscribe button.button-primary:active,
.article-subscribe button[data-selected=true]:active,
.section-subscribe button.button-primary:active,
.section-subscribe button[data-selected=true]:active,
.split-button button.button-primary:active {
background-color: #000;
border-color: #000;
}
.button[data-disabled],
[data-disabled].pagination-next-link,
[data-disabled].pagination-prev-link,
[data-disabled].pagination-first-link,
[data-disabled].pagination-last-link,
.subscriptions-subscribe button[data-disabled],
.requests-table-toolbar .organization-subscribe button[data-disabled],
.community-follow button[data-disabled],
.article-subscribe button[data-disabled],
.section-subscribe button[data-disabled],
.split-button button[data-disabled] {
cursor: default;
}
.button-large,
.hbs-form input[type=submit] {
cursor: pointer;
background-color: #17494D;
border: 0;
border-radius: 4px;
color: #FFFFFF;
font-size: 14px;
line-height: 2.72;
min-width: 190px;
padding: 0 1.9286em;
width: 100%;
}
@media (min-width: 768px) {
.button-large,
.hbs-form input[type=submit] {
width: auto;
}
}
.button-large:visited,
.hbs-form input[type=submit]:visited {
color: #FFFFFF;
}
.button-large:hover,
.button-large:active,
.button-large:focus,
.hbs-form input[type=submit]:hover,
.hbs-form input[type=submit]:active,
.hbs-form input[type=submit]:focus {
background-color: #000;
}
.button-large[disabled],
.hbs-form input[type=submit][disabled] {
background-color: #ddd;
}
.button-secondary {
color: #5a6d7c;
border: 1px solid #87929D;
background-color: transparent;
}
.button-secondary:visited {
color: #5a6d7c;
}
.button-secondary:hover,
.button-secondary:focus,
.button-secondary:active {
color: #2F3941;
border: 1px solid #87929D;
background-color: #f7f7f7;
}
.split-button {
display: flex;
}
.split-button button {
background-color: #17494D;
border: 0;
color: #FFFFFF;
height: 32px;
line-height: 16px;
outline-color: #17494D;
}
[dir=rtl] .split-button button:not(:only-child):first-child {
border-left: 1px solid #FFFFFF;
border-top-left-radius: unset;
border-bottom-left-radius: unset;
}
[dir=ltr] .split-button button:not(:only-child):first-child {
border-right: 1px solid #FFFFFF;
border-top-right-radius: unset;
border-bottom-right-radius: unset;
}
.split-button button:not(:only-child):last-child {
display: flex;
justify-content: center;
align-items: center;
width: 26px;
min-width: 26px;
max-width: 26px;
padding: 0;
}
[dir=rtl] .split-button button:not(:only-child):last-child {
border-top-right-radius: unset;
border-bottom-right-radius: unset;
}
[dir=ltr] .split-button button:not(:only-child):last-child {
border-top-left-radius: unset;
border-bottom-left-radius: unset;
}
.table {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
border-spacing: 0;
}
@media (min-width: 768px) {
.table {
table-layout: auto;
}
}
.table th,
.table th a {
color: #5a6d7c;
font-size: 13px;
text-align: left;
}
[dir=rtl] .table th,
[dir=rtl] .table th a {
text-align: right;
}
.table tr {
border-bottom: 1px solid var(--border);
display: block;
padding: 20px 0;
}
@media (min-width: 768px) {
.table tr {
display: table-row;
}
}
.table td {
display: block;
}
@media (min-width: 768px) {
.table td {
display: table-cell;
}
}
@media (min-width: 1024px) {
.table td,
.table th {
padding: 20px 30px;
}
}
@media (min-width: 768px) {
.table td,
.table th {
padding: 10px 20px;
height: 60px;
}
}
.form {
max-width: 650px;
}
.form-field~.form-field {
margin-top: 25px;
}
.form-field label {
display: block;
font-size: 13px;
margin-bottom: 5px;
}
.form-field input {
border: 1px solid #87929D;
border-radius: 4px;
padding: 10px;
width: 100%;
}
.form-field input:focus {
border: 1px solid #17494D;
}
.form-field input[type=text] {
border: 1px solid #87929D;
border-radius: 4px;
}
.form-field input[type=text]:focus {
border: 1px solid #17494D;
}
.form-field input[type=checkbox] {
width: auto;
}
.form-field .nesty-input {
border-radius: 4px;
border: 1px solid #87929D;
height: 40px;
line-height: 40px;
outline: none;
vertical-align: middle;
}
.form-field .nesty-input:focus {
border: 1px solid #17494D;
text-decoration: none;
}
.form-field .hc-multiselect-toggle {
border: 1px solid #87929D;
}
.form-field .hc-multiselect-toggle:focus {
outline: none;
border: 1px solid #17494D;
text-decoration: none;
}
.form-field textarea {
vertical-align: middle;
}
.form-field input[type=checkbox]+label {
margin: 0 0 0 10px;
}
.form-field .optional {
color: #5a6d7c;
margin-left: 4px;
}
.form-field p {
color: #5a6d7c;
font-size: 12px;
margin: 5px 0;
}
.form footer {
margin-top: 40px;
padding-top: 30px;
}
.form footer a {
color: #5a6d7c;
cursor: pointer;
margin-right: 15px;
}
.form .suggestion-list {
font-size: 13px;
margin-top: 30px;
}
.form .suggestion-list label {
border-bottom: 1px solid var(--border);
display: block;
padding-bottom: 5px;
}
.form .suggestion-list li {
padding: 10px 0;
}
.form .suggestion-list li a:visited {
color: #9358B0;
}
.header {
max-width: none;
margin: 0 auto;
padding: 0 2%;
position: relative;
z-index: 100;
align-items: center;
display: flex;
min-height: 70px;
height: 70px;
justify-content: space-between;
flex-wrap: wrap;
background: #05141f !important;
color: #f8fafc;
}
@media (min-width: 1024px) {
.header {
height: 80px !important;
min-height: 80px !important;
}
}
@media (min-width: 1160px) {
.header {
padding: 0;
width: 90%;
}
}
.logo {
display: flex !important;
align-items: center !important;
gap: 16px !important;
}
.logo .service-manual-wrapper {
display: inline-flex !important;
align-items: center !important;
}
.logo img {
height: 38px !important;
max-height: 38px !important;
width: auto !important;
vertical-align: middle;
object-fit: contain;
filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.25));
}
.logo span {
margin-left: 14px !important;
color: #FFFFFF !important;
font-size: 15px !important;
font-weight: 600 !important;
letter-spacing: -0.01em;
opacity: 0.95;
vertical-align: middle;
}
.logo a {
display: inline-flex !important;
align-items: center !important;
}
.logo a:hover,
.logo a:focus,
.logo a:active {
text-decoration: none;
}
.user-nav {
display: inline-block;
position: absolute;
white-space: nowrap;
}
@media (min-width: 768px) {
.user-nav {
position: relative;
}
}
.user-nav[aria-expanded=true] {
background: var(--surface);
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.15), 0 4px 10px 0 rgba(0, 0, 0, 0.1);
border: solid 1px #ddd;
right: 0;
left: 0;
top: 71px;
z-index: 1;
}
.user-nav[aria-expanded=true]>a {
display: block;
margin: 20px;
}
.user-nav[aria-expanded=true]>.user-nav-list li {
display: block;
}
.user-nav[aria-expanded=true]>.user-nav-list a {
display: block;
margin: 20px;
}
.user-nav-list {
display: block;
list-style: none;
}
.user-nav-list>li {
display: inline-block;
}
.india-lang-link {
margin-left: 4px;
}
@media (max-width: 768px) {
.nav-wrapper-desktop {
display: none;
}
}
@media (min-width: 768px) {
.nav-wrapper-desktop {
display: none;
}
}
@media (min-width: 1024px) {
.nav-wrapper-desktop {
display: inline-block;
}
}
.nav-wrapper-desktop a {
border: 0;
color: #1F73B7;
display: none;
font-size: 14px;
padding: 0 20px 0 0;
width: auto;
}
@media (min-width: 768px) {
.nav-wrapper-desktop a {
display: inline-block;
}
}
[dir=rtl] .nav-wrapper-desktop a {
padding: 0 0 0 20px;
}
.nav-wrapper-desktop a:hover,
.nav-wrapper-desktop a:focus,
.nav-wrapper-desktop a:active {
background-color: transparent;
color: #1F73B7;
text-decoration: underline;
}
@media (min-width: 1024px) {
.nav-wrapper-mobile {
display: none;
}
}
.nav-wrapper-mobile .menu-button-mobile {
background: none;
border: 0;
width: auto;
min-width: 71px;
cursor: pointer;
}
.nav-wrapper-mobile .menu-button-mobile .icon-menu {
padding: 7px;
vertical-align: middle;
width: 30px;
height: 30px;
border-radius: 50%;
}
.nav-wrapper-mobile .menu-button-mobile[aria-expanded=true] .icon-menu {
background: #f3f3f3;
}
.nav-wrapper-mobile .menu-list-mobile {
position: absolute;
background: var(--surface);
box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.15);
border-top: solid 1px #ddd;
border-bottom: solid 1px #ddd;
right: 0;
left: 0;
top: 71px;
z-index: 2;
}
.nav-wrapper-mobile .menu-list-mobile[aria-expanded=false] {
display: none;
}
.nav-wrapper-mobile .menu-list-mobile[aria-expanded=true] {
display: block;
}
.nav-wrapper-mobile .menu-list-mobile-items .item {
margin: 14px 0 !important;
}
.nav-wrapper-mobile .menu-list-mobile-items li:empty:not(.nav-divider) {
display: none;
}
.nav-wrapper-mobile .menu-list-mobile-items .nav-divider {
border-bottom: 0.1px solid #ddd;
padding: 0;
}
.nav-wrapper-mobile .menu-list-mobile-items .nav-divider:last-child {
display: none;
}
.nav-wrapper-mobile .menu-list-mobile-items button {
background: none;
border: none;
padding: 8px 24px;
width: 100%;
height: 100%;
color: #2F3941;
cursor: pointer;
text-align: left;
}
.nav-wrapper-mobile .menu-list-mobile-items button:active,
.nav-wrapper-mobile .menu-list-mobile-items button:focus,
.nav-wrapper-mobile .menu-list-mobile-items button:hover {
background-color: #f3f3f3;
text-decoration: underline;
}
.nav-wrapper-mobile .menu-list-mobile-items a {
display: block;
padding: 8px 24px;
width: 100%;
height: 100%;
color: #2F3941;
text-align: left;
}
.nav-wrapper-mobile .menu-list-mobile-items a:active,
.nav-wrapper-mobile .menu-list-mobile-items a:focus,
.nav-wrapper-mobile .menu-list-mobile-items a:hover {
background-color: #f3f3f3;
}
.nav-wrapper-mobile .menu-list-mobile-items .my-profile {
display: flex;
line-height: 1.5;
}
.nav-wrapper-mobile .menu-list-mobile-items .my-profile .my-profile-tooltip {
font-size: 12px;
color: #68737D;
}
.nav-wrapper-mobile .menu-list-mobile-items .menu-profile-avatar {
height: 20px;
width: 20px;
border-radius: 50%;
display: inline-block;
margin-right: 8px;
margin-top: 1px;
}
[dir=rtl] .nav-wrapper-mobile .menu-list-mobile-items .menu-profile-avatar {
margin-right: 0;
margin-left: 8px;
}
.skip-navigation {
align-items: center;
background-color: black;
color: white;
display: flex;
font-size: 14px;
justify-content: center;
left: -999px;
margin: 20px;
padding: 20px;
position: absolute;
top: auto;
z-index: -999;
}
[dir=rtl] .skip-navigation {
left: initial;
right: -999px;
}
.skip-navigation:focus,
.skip-navigation:active {
left: auto;
overflow: auto;
text-align: center;
text-decoration: none;
top: auto;
z-index: 999;
}
[dir=rtl] .skip-navigation:focus,
[dir=rtl] .skip-navigation:active {
left: initial;
right: auto;
}
#zd-modal-container~.skip-navigation {
display: none;
}
.user-info {
display: inline-block;
}
.user-info .dropdown-toggle::after {
display: none;
}
@media (min-width: 768px) {
.user-info .dropdown-toggle::after {
display: inline-block;
}
}
.user-info>button {
border: 0;
color: #1F73B7;
min-width: 0;
padding: 0;
white-space: nowrap;
}
.user-info>button:hover,
.user-info>button:focus {
color: #1F73B7;
background-color: transparent;
}
.user-info>button::after {
color: #1F73B7;
padding-right: 15px;
}
[dir=rtl] .user-info>button::after {
padding-left: 15px;
padding-right: 0;
}
#user #user-name {
display: none;
font-size: 14px;
}
@media (min-width: 768px) {
#user #user-name {
display: inline-block;
}
}
#user #user-name:hover {
text-decoration: underline;
}
.user-avatar {
height: 25px;
width: 25px;
border-radius: 50%;
display: inline-block;
vertical-align: middle;
}
.avatar {
display: inline-block;
position: relative;
}
.avatar img {
height: 40px;
width: 40px;
}
.avatar .icon-agent {
color: #17494D;
border: 2px solid #fff;
border-radius: 50%;
bottom: -4px;
background-color: #FFFFFF;
font-size: 17px;
height: 17px;
line-height: 17px;
position: absolute;
right: -2px;
text-align: center;
width: 17px;
}
.header-language-selector .dropdown-toggle {
border: none;
background: none;
color: #1F73B7;
font-size: 14px;
cursor: pointer;
display: flex;
align-items: center;
gap: 4px;
padding: 0 12px;
line-height: 40px;
}
.header-language-selector .dropdown-menu {
right: 0;
min-width: 140px;
}
@media (max-width:1024px) {
.nav-wrapper-mobile .header-language-selector {
width: 100%;
}
.nav-wrapper-mobile .header-language-selector .dropdown-toggle {
width: 100%;
padding: 8px 24px;
line-height: 1.5;
text-align: start;
}
.nav-wrapper-mobile .header-language-selector .dropdown-menu {
position: static !important;
display: none;
border: 0;
box-shadow: none;
padding: 6px 0;
min-width: auto;
}
.nav-wrapper-mobile .header-language-selector .dropdown-toggle[aria-expanded="true"]+.dropdown-menu {
display: block !important;
}
.nav-wrapper-mobile .header-language-selector .dropdown-menu a {
display: block;
padding: 8px 24px;
}
}
.header-language-selector .dropdown-menu,
.footer-language-selector-inner .dropdown-menu {
display: none;
position: absolute;
background: var(--surface);
border: 1px solid var(--border);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
padding: 20px;
z-index: 2000;
border-radius: 12px;
top: 100%;
left: auto !important;
right: 0 !important;
transform: none;
flex-direction: row;
gap: 30px;
}
@media (min-width: 768px) {
.header-language-selector .dropdown-menu,
.footer-language-selector-inner .dropdown-menu {
min-width: 600px;
}
}
.header-language-selector .dropdown-toggle[aria-expanded="true"]+.dropdown-menu,
.footer-language-selector-inner .dropdown-toggle[aria-expanded="true"]+.dropdown-menu {
display: flex;
}
@media (min-width: 1025px) {
.header-language-selector .dropdown-menu.community-lang-menu,
.footer-language-selector-inner .dropdown-menu.community-lang-menu {
min-width: 1000px !important;
width: 1000px !important;
}
}
.rl-group {
flex: 1;
display: flex;
flex-direction: column;
gap: 10px;
}
.rl-group-title {
font-size: 12px;
font-weight: 700;
color: #888;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 5px;
padding-bottom: 5px;
border-bottom: 1px solid #eee;
}
.rl-item {
font-size: 14px;
color: #333;
padding: 6px 10px;
border-radius: 6px;
transition: background 0.2s, color 0.2s;
cursor: pointer;
display: block;
text-decoration: none !important;
}
.rl-item:hover {
background: #f5f7f9;
color: var(--brand);
}
.rl-item.is-current {
background: #eef3f8;
color: var(--brand);
font-weight: 600;
cursor: default;
}
.footer-language-selector-inner .dropdown-menu {
bottom: 100%;
top: auto;
margin-bottom: 10px;
}
@media (max-width: 1024px) {
.header-language-selector .dropdown-menu,
.footer-language-selector-inner .dropdown-menu {
min-width: auto;
flex-direction: column;
position: static;
box-shadow: none;
border: none;
padding: 10px 20px;
gap: 15px;
}
.rl-group-title {
border-bottom: none;
padding-bottom: 0;
}
.rl-footer {
display: none !important;
}
}
.header-language-selector .dropdown-menu,
.footer-language-selector-inner .dropdown-menu {
flex-direction: column;
padding: 0;
}
.rl-body {
display: flex;
flex-direction: row;
gap: 30px;
padding: 20px;
}
.rl-footer {
background: #f8f9fa;
border-top: 1px solid #eee;
padding: 12px 20px;
display: flex;
align-items: center;
justify-content: space-between;
min-height: 50px;
}
.rl-notice {
font-size: 13px;
color: var(--muted);
line-height: 1.4;
flex: 1;
}
.rl-notice strong {
color: var(--brand);
}
.rl-actions {
display: none;
gap: 8px;
margin-left: 15px;
}
.rl-actions.is-visible {
display: flex;
}
.rl-btn {
padding: 5px 12px;
font-size: 12px;
font-weight: 600;
border-radius: 4px;
cursor: pointer;
border: 1px solid transparent;
transition: all 0.2s;
}
.rl-btn-confirm {
background: var(--brand);
color: #fff;
}
.rl-btn-confirm:hover {
background: #003a7a;
}
.rl-btn-cancel {
background: var(--surface);
border-color: var(--border);
color: var(--muted);
}
.rl-btn-cancel:hover {
background: #f0f0f0;
border-color: #ccc;
}
.footer {
border-top: 1px solid var(--border);
margin-top: 60px;
padding: 30px 0;
}
.footer a {
color: #5a6d7c;
}
.footer-inner {
width: 100%;
max-width: none;
margin: 0 auto;
padding: 0 2%;
display: flex;
justify-content: space-between;
}
@media (min-width: 1160px) {
.footer-inner {
padding: 0;
width: 90%;
}
}
.footer-logo img {
width: 160px;
height: auto;
}
.footer-copyrights {
color: #5a6d7c;
font-size: 14px;
display: flex;
align-items: center;
margin-left: 20px;
}
.footer-language-selector-inner button {
color: #5a6d7c;
display: inline-block;
}
.footer-copyrights {
color: #5a6d7c;
font-size: 14px;
margin-left: 8px;
}
.powered-by-zendesk a,
.powered-by-zendesk a:visited {
color: #5a6d7c;
}
.breadcrumbs {
margin: 0 0 15px 0;
padding: 0;
display: flex;
}
@media (min-width: 768px) {
.breadcrumbs {
margin: 0;
}
}
.breadcrumbs li {
color: #5a6d7c;
font-size: 13px;
max-width: 450px;
text-overflow: ellipsis;
}
.breadcrumbs li+li::before {
content: ">";
margin: 0 4px;
}
.breadcrumbs li a:visited {
color: #1F73B7;
}
.search-container {
position: relative;
}
.search {
border: 1px solid #87929D;
border-radius: 30px;
display: flex;
position: relative;
transition: border 0.12s ease-in-out;
}
.search:focus-within {
border-color: #17494D;
}
.search input[type=search] {
background: var(--surface);
border: none;
border-radius: 30px;
}
.search .clear-button {
background: transparent;
border: none;
border-radius: 50%;
}
.hero .search-full input[type=search] {
background: rgba(255, 255, 255, 0.08) !important;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.18) !important;
border-radius: 28px !important;
color: #FFFFFF !important;
font-size: 15px;
height: 52px !important;
padding: 0 48px !important;
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.25);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.hero .search-full input[type=search]::placeholder {
color: rgba(255, 255, 255, 0.55);
}
.hero .search-full input[type=search]:focus {
background: rgba(255, 255, 255, 0.14) !important;
border-color: rgba(0, 210, 255, 0.6) !important;
box-shadow: 0 0 20px rgba(0, 210, 255, 0.35), 0 8px 32px 0 rgba(0, 0, 0, 0.3);
outline: none;
}
.search-full input[type=search],
.search-full .clear-button {
border-color: #fff;
}
.search input[type=search] {
appearance: none;
-webkit-appearance: none;
box-sizing: border-box;
color: var(--muted);
flex: 1 1 auto;
height: 40px;
width: 100%;
}
.search input[type=search]:focus {
color: #555;
}
.search input[type=search]::-webkit-search-decoration,
.search input[type=search]::-webkit-search-cancel-button,
.search input[type=search]::-webkit-search-results-button,
.search input[type=search]::-webkit-search-results-decoration {
-webkit-appearance: none;
}
.search input[type=search]:-webkit-autofill,
.search input[type=search]:-webkit-autofill:hover,
.search input[type=search]:-webkit-autofill:focus {
-webkit-box-shadow: 0 0 0 1000px #fff inset;
}
.search .clear-button {
align-items: center;
box-sizing: border-box;
color: #777;
cursor: pointer;
display: none;
flex: none;
justify-content: center;
padding: 0 15px;
}
.search .clear-button:hover {
background-color: #17494D;
color: #fff;
}
.search .clear-button:focus {
outline: 0;
box-shadow: 0 0 0 3px #17494D;
}
.search-has-value .clear-button {
display: flex;
}
[dir=ltr] .search input[type=search] {
padding-left: 40px;
padding-right: 20px;
}
[dir=ltr] .search-has-value input[type=search] {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
border-right-color: transparent;
}
[dir=ltr] .search-has-value input[type=search]:focus {
border-right-color: #17494D;
}
[dir=ltr] .search .clear-button {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
border-left-color: transparent;
}
[dir=ltr] .search .clear-button:focus {
border-left-color: #17494D;
}
[dir=rtl] .search input[type=search] {
padding-left: 20px;
padding-right: 40px;
}
[dir=rtl] .search-has-value input[type=search] {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
border-left-color: transparent;
}
[dir=rtl] .search-has-value input[type=search]:focus {
border-left-color: #17494D;
}
[dir=rtl] .search .clear-button {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
border-right-color: transparent;
}
[dir=rtl] .search .clear-button:focus {
border-right-color: #17494D;
}
.search-icon {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 15px;
z-index: 1;
width: 18px;
height: 18px;
color: #777;
pointer-events: none;
}
[dir=rtl] .search-icon {
left: auto;
right: 15px;
}
:root {
--search-ico: 22px;
--search-gap: 15px;
--search-pad-extra: 10px;
}
.search-icon {
width: var(--search-ico);
height: var(--search-ico);
left: var(--search-gap);
}
[dir=rtl] .search-icon {
right: var(--search-gap);
}
[dir="ltr"] .search input[type="search"] {
padding-left: calc(var(--search-gap) + var(--search-ico) + var(--search-pad-extra));
}
[dir="rtl"] .search input[type="search"] {
padding-right: calc(var(--search-gap) + var(--search-ico) + var(--search-pad-extra));
}
.search-wrap {
position: relative;
}
.search-wrap .search-icon {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 1;
pointer-events: none;
}
.hero-title[data-lang="ko"] {
line-height: 1.28;
letter-spacing: 0;
}
.hero {
background:
linear-gradient(to bottom, rgba(5, 15, 25, 0.75) 0%, rgba(5, 15, 25, 0.50) 50%, rgba(3, 10, 18, 0.92) 100%),
radial-gradient(circle at 20% 30%, rgba(0, 210, 255, 0.22) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(138, 43, 226, 0.25) 0%, transparent 55%),
url(/hc/theming_assets/01KYHTD7W1NJH4EP5SE3R9GE20);
background-position: center 40%;
background-size: cover;
background-repeat: no-repeat;
box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.08);
height: 420px;
padding: 0 20px;
text-align: center;
width: 100%;
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px);
background-size: 24px 24px;
pointer-events: none;
opacity: 0.7;
}
.hero-inner {
position: relative;
top: 50%;
transform: translateY(-50%);
max-width: 650px;
margin: 0 auto;
z-index: 2;
}
@media (min-width: 769px) {
.hero {
height: auto;
min-height: 400px;
padding-top: 40px;
padding-bottom: 40px;
}
.hero-inner {
top: 0;
transform: none;
}
.hero-inner-wide {
max-width: 1000px;
}
.hero-inner-wide .search-wrap,
.hero-inner-wide .hero2-quick {
max-width: 610px;
margin-left: auto;
margin-right: auto;
}
.hero-inner-wide .hero-title {
white-space: nowrap !important;
}
.hero-inner-wide .hero-title.sm {
font-size: clamp(16px, 1.8vw, 22px);
}
}
.hero-faq-title {
margin: 0;
font-weight: 800;
line-height: 1.1;
color: var(--ink);
font-size: clamp(40px, 5vw, 60px);
text-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}
.hero-faq-title.on-dark {
color: var(--ink-on-dark);
}
.hero-title {
margin: 0 0 12px;
font-weight: 800;
line-height: 1.2;
letter-spacing: -.01em;
color: var(--ink);
font-size: clamp(22px, 2.6vw, 34px);
text-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}
.hero-title.on-light {
color: var(--brand);
text-shadow: none;
}
.hero-title.on-dark {
color: var(--ink-on-dark);
}
.hero-title.accent {
color: var(--brand);
}
.hero-title.sm {
font-size: clamp(18px, 2vw, 24px);
}
.hero-title.lg {
font-size: clamp(26px, 3vw, 40px);
}
.hero-title:lang(ko),
.hero-title:lang(zh-CN) {
line-height: 1.28;
letter-spacing: 0;
}
.hero-title.clamp-2 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.section.hero.is-dark .hero-title {
color: var(--ink-on-dark);
}
.section.hero.is-light .hero-title {
color: var(--brand);
text-shadow: none;
}
.page-header {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: space-between;
margin: 10px 0;
}
.page-header .section-subscribe {
flex-shrink: 0;
margin-bottom: 10px;
}
.page-header h1 {
flex-grow: 1;
margin-bottom: 10px;
}
.page-header-description {
font-style: italic;
margin: 0 0 30px 0;
word-break: break-word;
}
.page-header .icon-lock {
height: 20px;
width: 20px;
position: relative;
left: -5px;
vertical-align: baseline;
}
.sub-nav {
align-items: baseline;
display: flex;
flex-direction: column;
flex-wrap: wrap;
gap: 15px 30px;
justify-content: space-between;
margin-bottom: 55px;
}
.sub-nav .breadcrumbs {
margin: 0;
}
.sub-nav .search-container {
max-width: 300px;
width: 100%;
}
.sub-nav input[type=search]::after {
font-size: 15px;
}
.hero2-quick {
margin-top: 16px;
}
.hero2-quick .qgrid {
display: flex;
gap: 10px;
}
.qcard {
display: grid;
grid-template-rows: auto auto auto;
justify-items: center;
flex: 1 1 0;
min-width: 0;
padding: 12px 8px;
border-radius: 12px;
background: var(--surface);
color: var(--brand);
text-decoration: none;
border: 1px solid var(--border);
box-shadow: 0 8px 22px rgba(0, 0, 0, .06);
transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.qcard-ico svg {
width: 40px;
height: 40px;
}
@media (max-width: 1024px) and (min-width: 861px) {
.hero2-quick .qgrid {
gap: 8px;
}
.qcard {
padding: 10px 6px;
}
.qcard-ico svg {
width: 32px;
height: 32px;
}
.qcard-title {
font-size: 13px;
}
}
.qcard:hover {
transform: translateY(-2px);
box-shadow: 0 12px 30px rgba(0, 0, 0, .10);
border-color: #dcdcdc;
}
.qcard {
color: var(--brand);
}
.qcard-title {
color: currentColor;
}
.qcard-ico svg {
color: currentColor;
}
.qcard-title {
margin-top: 8px;
font-weight: 700;
font-size: 15px;
color: var(--ink);
}
.qcard-desc {
margin-top: 6px;
font-size: 13px;
color: var(--muted);
text-align: center;
line-height: 1.4;
}
.qcard-ext {
margin-top: 6px;
color: #8aa1c4;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
clip: rect(0, 0, 0, 0);
border: 0;
}
@media (min-width:768px) {
.page-header {
align-items: baseline;
flex-direction: row;
gap: 16px;
margin: 0;
}
.page-header .section-subscribe {
margin-bottom: 0;
}
.sub-nav {
flex-direction: row;
}
.sub-nav .search-container {
flex: 0 1 300px;
}
}
@media (min-width:1024px) {
.page-header-description {
flex-basis: 100%;
}
}
@media (max-width:860px) {
.hero2-quick .qgrid {
flex-direction: column;
gap: 10px;
}
.qcard {
padding: 12px;
}
.qcard-desc {
display: none;
}
}
.blocks-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
}
.blocks-item {
margin: 0;
box-sizing: border-box;
border-radius: 8px;
transition: transform .2s ease, box-shadow .2s ease;
}
.blocks-item-link {
display: flex;
flex-direction: column;
flex: 1;
align-items: center;
justify-content: flex-start;
border-radius: inherit;
text-decoration: none;
color: inherit;
}
.blocks-item-link:focus {
outline: 0;
box-shadow: 0 0 0 3px var(--brand-color, #002C5F);
}
.navblocks {
--nb-bg: #002C5F;
--nb-fg: #fff;
--nb-hover-bg: #003a7a;
--nb-ring: rgba(0, 44, 95, 0.25);
--nb-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
--nb-gap: 8px;
--nb-pad-y: 10px;
--nb-pad-x: 18px;
--nb-radius: 12px;
--nb-font-size: 1.05rem;
}
.navblocks-list {
display: flex;
gap: var(--nb-gap);
flex-wrap: wrap;
align-items: center;
padding: var(--nb-gap) 0;
margin: 0;
list-style: none;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
}
.navblocks-list::-webkit-scrollbar {
height: 6px;
}
.navblocks-list::-webkit-scrollbar-thumb {
background: #d7dbe2;
border-radius: 4px;
}
.navblocks-item {
flex: 0 0 auto;
margin: 0;
}
.navblocks-link {
display: inline-flex;
align-items: center;
gap: 6px;
padding: var(--nb-pad-y) var(--nb-pad-x);
font-size: var(--nb-font-size);
font-weight: 600;
line-height: 1.3;
color: var(--nb-fg) !important;
background: var(--nb-bg);
border: none;
border-radius: var(--nb-radius);
text-decoration: none;
transition: background .2s, transform .06s, box-shadow .2s;
white-space: nowrap;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.navblocks-link:hover {
background: var(--nb-hover-bg);
color: #fff !important;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
.navblocks-link:active {
transform: translateY(0);
}
.navblocks-link:focus-visible {
outline: none;
box-shadow: 0 0 0 3px var(--nb-ring);
}
.navblocks-link,
.navblocks-link:hover,
.navblocks-link:focus,
.navblocks-link:active {
text-decoration: none !important;
}
.navblocks-bar {
position: sticky;
top: 0;
z-index: 100;
background: transparent;
border-bottom: 1px solid var(--border);
backdrop-filter: saturate(180%) blur(6px);
}
[id^="anchor-"] {
scroll-margin-top: 88px;
}
.blocks-list.blocks-card-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: var(--gap-card);
list-style: none;
margin: 0;
padding: 8px 0;
}
.blocks-card-list .blocks-item {
margin: 0;
background: var(--surface);
border-radius: var(--radius-apple);
box-shadow: var(--elev-1);
transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.blocks-card-list .blocks-item-link {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: 10px;
padding: 18px 20px;
min-height: 200px;
text-decoration: none;
color: inherit;
border-radius: inherit;
}
.blocks-card-list .blocks-item-description {
display: none;
}
.blocks-card-list .blocks-item-link img {
display: block;
margin: 8px auto 6px;
width: auto;
height: auto;
max-width: 220px;
max-height: 120px;
object-fit: contain;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .08));
}
.blocks-card-list .blocks-item-title {
margin: 10px 0 6px;
text-align: center;
color: var(--brand);
font-weight: 700;
}
.blocks-card-list .blocks-item:hover {
background: var(--surface-hover);
transform: translateY(-2px);
box-shadow: var(--elev-2);
}
.blocks-card-list .blocks-item:hover .blocks-item-title {
color: var(--brand);
}
.blocks-card-list .blocks-item:hover .blocks-item-description {
color: var(--text-color, #333);
}
.blocks-card-list .blocks-item-link,
.blocks-card-list .blocks-item-link:hover,
.blocks-card-list .blocks-item-link:focus,
.blocks-card-list .blocks-item-link:active {
text-decoration: none !important;
}
.blocks-card-list .badge {
position: absolute;
top: 10px;
left: 10px;
background: var(--brand);
color: #fff;
font-size: 0.6rem;
font-weight: 600;
padding: 4px 8px;
border-radius: 6px;
}
.blocks-card-list .blocks-item {
position: relative;
}
.blocks-list {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
list-style: none;
padding: 0;
}
@media (min-width: 768px) {
.blocks-list {
margin: 0 -15px;
}
}
.blocks-item {
border-radius: 8px;
box-sizing: border-box;
color: var(--brand);
display: flex;
flex: 1 0 260px;
margin: 0 0 20px;
max-width: 100%;
text-align: center;
background: var(--surface);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
@media (min-width: 768px) {
.blocks-item {
margin: 0 15px 30px;
}
}
.blocks-item-internal {
background-color: transparent;
border: 1px solid var(--border);
}
.blocks-item-internal .icon-lock {
height: 15px;
width: 15px;
bottom: 5px;
position: relative;
}
.blocks-item-internal a {
color: var(--text-color, #333);
}
.blocks-item-link {
padding: 16px 20px;
display: flex;
flex-direction: column;
flex: 1;
align-items: center;
justify-content: flex-start;
border-radius: inherit;
}
.blocks-item-link img {
max-width: 120px;
max-height: 80px;
width: auto;
height: auto;
margin: 0 auto 12px;
object-fit: contain;
display: block;
}
.blocks-item-link:visited,
.blocks-item-link:active {
color: inherit;
text-decoration: none;
}
.blocks-item-link:focus {
outline: 0;
box-shadow: 0 0 0 3px var(--brand);
text-decoration: none;
}
.blocks-item-title {
font-size: 18px;
font-weight: 600;
color: var(--brand);
margin-bottom: 6px;
line-height: 1.3;
}
.blocks-item-description {
font-size: 13px;
color: var(--text-color, #333);
margin: 0;
line-height: 1.4;
min-height: 34px;
}
.blocks-item-description:not(:empty) {
margin-top: 4px;
}
.support-cta-link:hover,
.support-cta-link:hover * {
color: var(--brand) !important;
}
.support-cta-band {
--brand: #002C5F;
--on-brand: #fff;
--band-bg: #F0F4FA;
--card-bg: #ffffff;
--card-hover: #F5F8FF;
--radius: 12px;
--shadow-1: 0 2px 6px rgba(0, 0, 0, .08);
--shadow-2: 0 10px 22px rgba(0, 0, 0, .12);
padding: 24px 0 8px;
background: var(--band-bg);
border-radius: var(--radius);
box-shadow: var(--shadow-1);
}
.support-cta-header {
margin-bottom: 14px;
}
.support-cta-header .section-title {
color: var(--brand);
font-weight: 800;
letter-spacing: .2px;
margin-bottom: 6px;
}
.support-cta-sub {
margin: 0 0 8px;
font-size: .95rem;
color: #475569;
}
.support-cta-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 14px;
list-style: none;
margin: 0 0 16px;
padding: 0;
}
.support-cta-card {
margin: 0;
}
.support-cta-link {
display: grid;
grid-template-columns: 28px 1fr auto;
align-items: center;
gap: 12px;
padding: 16px 18px;
background: var(--card-bg);
border-radius: var(--radius);
box-shadow: var(--shadow-1);
text-decoration: none;
color: #0f172a;
transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.support-cta-link,
.support-cta-link * {
color: #0f172a;
}
.support-cta-link:hover {
background: var(--card-hover);
transform: translateY(-2px);
box-shadow: var(--shadow-2);
}
.support-cta-link:hover,
.support-cta-link:hover * {
color: var(--brand) !important;
}
.support-cta-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
color: var(--brand);
background: rgba(0, 44, 95, .07);
border-radius: 8px;
}
.support-cta-title {
font-size: 1.05rem;
font-weight: 800;
color: var(--brand);
line-height: 1.35;
}
.support-cta-desc {
grid-column: 2 / 3;
margin-top: 2px;
font-size: .92rem;
color: #334155;
line-height: 1.45;
}
.support-cta-arrow {
font-size: 1.2rem;
color: var(--brand);
}
.support-cta-link:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(0, 44, 95, .25), var(--shadow-2);
}
.section {
margin-bottom: 40px;
}
@media (min-width: 768px) {
.section {
margin-bottom: 60px;
}
}
.home-section h2 {
margin-bottom: 10px;
text-align: center;
}
.promoted-articles {
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
@media (min-width: 1024px) {
.promoted-articles {
flex-direction: row;
}
}
.promoted-articles-item {
flex: 1 0 auto;
}
@media (min-width: 1024px) {
.promoted-articles-item {
align-self: flex-end;
flex: 0 0 auto;
padding-right: 30px;
width: 33%;
}
[dir=rtl] .promoted-articles-item {
padding: 0 0 0 30px;
}
}
.promoted-articles-item:nth-child(3n) {
padding-right: 0;
}
.promoted-articles-item a {
display: block;
border-bottom: 1px solid var(--border);
padding: 15px 0;
}
.promoted-articles-item .icon-lock {
vertical-align: baseline;
}
.promoted-articles-item:last-child a {
border: 0;
}
@media (min-width: 1024px) {
.promoted-articles-item:last-child a {
border-bottom: 1px solid var(--border);
}
}
.community {
text-align: center;
}
.community-image {
min-height: 300px;
margin-top: 32px;
background-image: url(/hc/theming_assets/01J2H4G0XDDCBFK6MPCGGWJBQ0);
background-position: center;
background-repeat: no-repeat;
max-width: 100%;
}
.community a {
color: #1F73B7;
text-decoration: underline;
}
.community a:visited {
color: #9358B0;
}
.community a:hover,
.community a:active,
.community a:focus {
color: #0F3554;
}
.community,
.activity {
border-top: 1px solid var(--border);
padding: 30px 0;
}
.recent-activity-header {
margin-bottom: 10px;
text-align: center;
}
.recent-activity-list {
padding: 0;
}
.recent-activity-item {
border-bottom: 1px solid var(--border);
overflow: auto;
padding: 20px 0;
}
.recent-activity-item h3 {
margin: 0;
}
.recent-activity-item-parent {
font-size: 16px;
font-weight: 600;
}
.recent-activity-item-parent,
.recent-activity-item-link {
margin: 6px 0;
display: inline-block;
width: 100%;
}
@media (min-width: 768px) {
.recent-activity-item-parent,
.recent-activity-item-link {
width: 70%;
margin: 0;
}
}
.recent-activity-item-link {
font-size: 14px;
text-overflow: ellipsis;
}
.recent-activity-item-meta {
color: #2F3941;
margin: 15px 0 0 0;
float: none;
}
@media (min-width: 768px) {
.recent-activity-item-meta {
margin: 0;
float: right;
}
[dir=rtl] .recent-activity-item-meta {
float: left;
}
}
.recent-activity-item-time,
.recent-activity-item-comment {
display: inline-block;
font-size: 13px;
}
.recent-activity-item-comment {
padding-left: 5px;
}
[dir=rtl] .recent-activity-item-comment {
padding: 0 5px 0 0;
}
.recent-activity-item-comment::before {
display: inline-block;
}
.recent-activity-controls {
padding-top: 15px;
}
.recent-activity-controls a {
color: #1F73B7;
text-decoration: underline;
}
.recent-activity-controls a:visited {
color: #9358B0;
}
.recent-activity-controls a:hover,
.recent-activity-controls a:active,
.recent-activity-controls a:focus {
color: #0F3554;
}
.recent-activity-accessibility-label {
border: 0;
clip: rect(0 0 0 0);
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 1px;
margin: -1px;
padding: 0;
position: absolute;
width: 1px;
white-space: nowrap;
}
.recent-activity-comment-icon svg {
vertical-align: middle;
color: #17494D;
width: 16px;
height: 16px;
}
.recent-activity-comment-icon:after {
content: attr(data-comment-count);
margin-left: 3px;
}
[dir=rtl] .recent-activity-comment-icon:after {
margin-left: 0;
margin-right: 3px;
}
.cat-highlights {
display: grid;
gap: 16px
}
.cat-highlights .hl-head {
grid-column: 1 / -1
}
@media(min-width:992px) {
.cat-highlights.cat-highlights--bleed {
grid-template-columns: 1fr 1fr;
gap: 24px;
}
}
.cat-highlights .stg-head {
display: flex;
gap: 12px;
align-items: flex-end;
justify-content: space-between;
margin: 18px 0 8px;
}
.cat-highlights .stg-title {
margin: 0;
color: var(--brand);
}
.cat-highlights--bleed {
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
--hl-max: 1920px;
padding-left: max(16px, calc((100vw - var(--hl-max)) / 2));
padding-right: max(16px, calc((100vw - var(--hl-max)) / 2));
}
.cat-highlights {
--hl-left: 1fr;
--hl-right: 1fr;
display: grid;
grid-template-columns: 1fr;
gap: 16px;
margin: 16px 0;
}
@media(min-width:992px) {
.cat-highlights {
grid-template-columns: 1fr 1fr;
}
}
.hl-col {
border: 1px solid var(--border);
border-radius: 16px;
background: var(--surface);
padding: 14px;
}
.hl-title {
margin: 0 0 10px 0;
color: var(--brand);
font-size: 1.1rem;
}
.hl-list li {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 0;
border-top: 1px dashed #f0f0f0;
flex-wrap: wrap;
}
.hl-list li:first-child {
border-top: none;
}
.hl-list a {
text-decoration: none;
color: #222;
}
.hl-list a:hover {
color: var(--brand);
}
.meta {
font-size: .85rem;
color: var(--muted);
white-space: nowrap;
margin-left: 4px;
}
.badge-new,
.badge-upd {
display: inline-block;
font-size: .72rem;
border-radius: 999px;
padding: 2px 6px;
margin-left: auto;
}
.badge-new {
background: var(--brand);
color: #fff;
}
.badge-upd {
background: #E6E6E6;
color: #333;
}
.hl-empty-promoted,
.hl-empty-recent {
padding: 12px;
color: var(--muted);
border: 1px dashed #E6E6E6;
border-radius: 12px;
margin-top: 8px;
text-align: center;
}
.sec-chip {
display: inline-block;
font-size: .72rem;
line-height: 1;
background: #f2f4f8;
color: #333;
border: 1px solid #e5e8ee;
border-radius: 999px;
padding: 2px 6px;
text-decoration: none;
}
.sec-chip:hover {
background: #eef3ff;
color: var(--brand);
border-color: #dbe6ff;
}
.cat-highlights--bleed {
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
--hl-max: 1600px;
padding-left: max(16px, calc((100vw - var(--hl-max)) / 2));
padding-right: max(16px, calc((100vw - var(--hl-max)) / 2));
}
@media(min-width:992px) {
.cat-highlights.cat-highlights--bleed {
grid-template-columns: 1fr 1fr;
gap: 24px;
}
}
.sec-chip {
display: inline-block;
font-size: .72rem;
line-height: 1;
background: #f2f4f8;
color: #333;
border: 1px solid #e5e8ee;
border-radius: 999px;
padding: 2px 6px;
text-decoration: none;
}
.sec-chip:hover {
background: #eef3ff;
color: var(--brand);
border-color: #dbe6ff
}
.category-container {
display: flex;
justify-content: flex-end;
}
.category-content {
flex: 1;
max-width: 100%;
}
@media (min-width: 1024px) {
.category-content {
flex: 0 0 80%;
}
}
.section-tree {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: space-between;
}
@media (min-width: 768px) {
.section-tree {
flex-direction: row;
}
}
.section-tree .section {
flex: initial;
max-width: 100%;
}
@media (min-width: 768px) {
.section-tree .section {
flex: 0 0 45%;
}
}
.section-tree-title {
margin-bottom: 14px !important;
font-size: 20px !important;
font-weight: 700 !important;
}
.section-tree-title a,
.section-tree-title a:link,
.section-tree-title a:visited,
.section-tree .section-tree-title a,
.section-tree .section-tree-title a:link,
.section-tree .section-tree-title a:visited,
h2.section-tree-title a,
h2.section-tree-title a:visited {
color: #FFFFFF !important;
text-decoration: none !important;
transition: color 0.2s ease !important;
}
.section-tree-title a:hover,
.section-tree .section-tree-title a:hover,
h2.section-tree-title a:hover {
color: #38BDF8 !important;
}
.section-tree .see-all-articles,
.see-all-articles,
.see-all-articles:visited {
display: inline-block !important;
padding: 12px 0 0 !important;
color: #38BDF8 !important;
font-weight: 600 !important;
font-size: 14px !important;
text-decoration: none !important;
}
.section-tree .see-all-articles:hover,
.see-all-articles:hover {
text-decoration: underline !important;
opacity: 0.85 !important;
}
.article-list-item {
font-size: 15px !important;
padding: 8px 0 !important;
text-overflow: ellipsis !important;
}
.article-list-item a,
.article-list-item a:link,
.article-list-item a:visited,
.article-list-link,
.article-list-link:link,
.article-list-link:visited,
.section-tree .article-list-item a,
.section-tree .article-list-item a:visited {
color: #CBD5E1 !important;
text-decoration: none !important;
transition: color 0.15s ease !important;
}
.article-list-item a:hover,
.article-list-link:hover,
.section-tree .article-list-item a:hover {
color: #38BDF8 !important;
text-decoration: underline !important;
}
.article-list-item a:hover,
.article-list-link:hover,
.section-tree .article-list-item a:hover {
color: #FFFFFF !important;
text-decoration: underline !important;
}
.icon-star {
color: #FF3B5C !important;
font-size: 16px !important;
}
.section-container {
display: flex;
justify-content: flex-end;
}
.section-content {
flex: 1;
max-width: 100%;
}
@media (min-width: 1024px) {
.section-content {
flex: 0 0 80%;
}
}
.section-list {
margin: 40px 0;
}
.section-list-item {
border-bottom: 1px solid var(--border);
font-size: 16px;
padding: 15px 0;
}
.section-list-item:first-child {
border-top: 1px solid var(--border);
}
.section-list-item a {
align-items: center;
color: #2F3941;
display: flex;
justify-content: space-between;
}
.see-all-sections-trigger {
cursor: pointer;
display: block;
padding: 15px;
text-align: center;
}
.see-all-sections-trigger[aria-hidden=true] {
display: none;
}
.article {
flex: 1 0 auto;
}
@media (min-width: 1024px) {
.article {
flex: 1 0 66%;
max-width: 66%;
min-width: 640px;
padding: 0 30px;
}
}
.article-container {
display: flex;
flex-direction: column;
}
@media (min-width: 1024px) {
.article-container {
flex-direction: row;
}
}
.article-header {
align-items: flex-start;
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: space-between;
margin-bottom: 40px;
margin-top: 20px;
}
@media (min-width: 768px) {
.article-header {
flex-direction: row;
margin-top: 0;
}
}
.article-avatar {
margin-right: 10px;
}
.article-author {
margin-bottom: 10px;
}
.article-title {
text-overflow: ellipsis;
max-width: 100%;
}
@media (min-width: 768px) {
.article-title {
flex-basis: 100%;
}
}
.article-title .icon-lock {
position: relative;
left: -5px;
vertical-align: baseline;
}
.article [role=button] {
flex-shrink: 0;
width: 100%;
}
@media (min-width: 768px) {
.article [role=button] {
width: auto;
}
}
.article-info {
max-width: 100%;
}
.article-meta {
display: inline-block;
vertical-align: middle;
}
.article-body {
display: flow-root;
}
.article-body a {
color: #1F73B7;
text-decoration: underline;
}
.article-body a:visited {
color: #9358B0;
}
.article-body a:hover,
.article-body a:active,
.article-body a:focus {
color: #0F3554;
}
.article-body img {
height: auto;
max-width: 100%;
}
.article-body p>img.image-style-align-left {
float: left;
margin: 8px 20px 6px 0;
}
.article-body p>img.image-style-align-right {
float: right;
margin: 8px 0px 6px 20px;
}
.article-body p>img.image-style-block-align-right {
margin-left: auto;
margin-right: 0;
}
.article-body p>img.image-style-block-align-left {
margin-left: 0;
margin-right: auto;
}
.article-body figure.image {
display: table;
margin: 0 auto;
}
.article-body figure.image>img {
display: block;
width: 100%;
}
.article-body figure.image.image-style-align-left {
float: left;
margin: 8px 20px 6px 0;
}
.article-body figure.image.image-style-align-right {
float: right;
margin: 8px 0px 6px 20px;
}
.article-body figure.image.image-style-block-align-right {
margin-left: auto;
margin-right: 0;
}
.article-body figure.image.image-style-block-align-left {
margin-left: 0;
margin-right: auto;
}
.article-body figcaption {
padding: 10px 0;
font-size: 12px;
text-align: center;
background-color: #f2f2f2;
}
.article-body ul,
.article-body ol {
padding-left: 20px;
list-style-position: outside;
margin: 20px 0 20px 20px;
}
[dir=rtl] .article-body ul,
[dir=rtl] .article-body ol {
padding-right: 20px;
padding-left: 0;
margin-left: 0;
margin-right: 20px;
}
.article-body ul>ul,
.article-body ol>ol,
.article-body ol>ul,
.article-body ul>ol,
.article-body li>ul,
.article-body li>ol {
margin: 0;
}
.article-body ul {
list-style-type: disc;
}
.article-body :not(pre)>code {
background: #f7f7f7;
border: 1px solid var(--border);
border-radius: 3px;
padding: 0 5px;
margin: 0 2px;
}
.article-body pre {
background: #f7f7f7;
border: 1px solid var(--border);
border-radius: 3px;
padding: 10px 15px;
overflow: auto;
white-space: pre;
}
.article-body blockquote {
border-left: 1px solid var(--border);
color: #5a6d7c;
font-style: italic;
padding: 0 15px;
}
.article-body>p:last-child {
margin-bottom: 0;
}
.article-content {
line-height: 1.6;
margin: 40px 0;
word-wrap: break-word;
}
.article-footer {
align-items: center;
display: flex;
justify-content: space-between;
padding-bottom: 20px;
}
.article-comment-count {
color: #5a6d7c;
}
.article-comment-count:hover {
text-decoration: none;
}
.article-comment-count-icon {
vertical-align: middle;
color: #17494D;
width: 18px;
height: 18px;
}
.article-sidebar {
border-bottom: 1px solid var(--border);
border-top: 1px solid var(--border);
flex: 1 0 auto;
margin-bottom: 20px;
padding: 0;
}
@media (min-width: 1024px) {
.article-sidebar {
border: 0;
flex: 0 0 17%;
height: auto;
max-width: 17%;
}
}
.article-relatives {
border-top: 1px solid var(--border);
display: flex;
flex-direction: column;
padding: 20px 0;
}
@media (min-width: 768px) {
.article-relatives {
flex-direction: row;
}
}
.article-relatives>* {
flex: 1 0 50%;
min-width: 50%;
overflow-wrap: break-word;
margin-right: 0;
}
.article-relatives>*:last-child {
padding: 0;
}
@media (min-width: 768px) {
.article-relatives>* {
padding-right: 20px;
}
}
.article-votes {
border-top: 1px solid var(--border);
padding: 30px 0;
text-align: center;
}
.article-votes-question {
font-size: 15px;
font-weight: normal;
margin-bottom: 0;
}
.article-vote {
margin: 10px 5px;
min-width: 90px;
width: auto;
}
.article-more-questions {
margin: 10px 0 20px;
text-align: center;
}
.article-more-questions a {
color: #1F73B7;
text-decoration: underline;
}
.article-more-questions a:visited {
color: #9358B0;
}
.article-more-questions a:hover,
.article-more-questions a:active,
.article-more-questions a:focus {
color: #0F3554;
}
.article-return-to-top {
border-top: 1px solid #87929D;
}
@media (min-width: 1024px) {
.article-return-to-top {
display: none;
}
}
.article-return-to-top a {
color: #2F3941;
display: block;
padding: 20px 0;
}
.article-return-to-top a:hover,
.article-return-to-top a:focus {
text-decoration: none;
}
.article-return-to-top-icon {
transform: rotate(0.5turn);
}
.article td>p:first-child,
.article th>p:first-child {
margin-top: 0;
}
.article td>p:last-child,
.article th>p:last-child {
margin-bottom: 0;
}
.sidenav-title {
font-size: 15px;
position: relative;
font-weight: 600;
}
.sidenav-item {
display: block;
margin-top: 10px;
margin-bottom: 16px;
text-overflow: ellipsis;
}
.recent-articles li,
.related-articles li {
margin-bottom: 15px;
}
.attachments .attachment-item {
padding-left: 20px;
position: relative;
margin-bottom: 10px;
}
.attachments .attachment-item:last-child {
margin-bottom: 0;
}
.attachments .attachment-item .attachment-icon {
color: #2F3941;
left: 0;
position: absolute;
top: 5px;
}
[dir=rtl] .attachments .attachment-item {
padding-left: 0;
padding-right: 20px;
}
[dir=rtl] .attachments .attachment-item .attachment-icon {
left: auto;
right: 0;
}
.upload-dropzone span {
color: #5a6d7c;
}
.share {
padding: 0;
white-space: nowrap;
}
.share li,
.share a {
display: inline-block;
}
.share li {
height: 25px;
width: 25px;
}
.share a {
color: #5a6d7c;
}
.share a:hover {
text-decoration: none;
color: #17494D;
}
.share a svg {
height: 18px;
width: 18px;
display: block;
}
.comment {
border-bottom: 1px solid var(--border);
padding: 20px 0;
}
.comment-heading,
.recent-articles-title,
.related-articles-title {
margin-bottom: 5px;
margin-top: 0;
font-size: 18px;
font-weight: 600;
}
.comment-overview {
border-bottom: 1px solid var(--border);
border-top: 1px solid var(--border);
padding: 20px 0;
}
.comment-overview p {
margin-top: 0;
}
.comment-callout {
color: #5a6d7c;
display: inline-block;
font-size: 13px;
margin-bottom: 0;
}
.comment-callout a {
color: #1F73B7;
text-decoration: underline;
}
.comment-callout a:visited {
color: #9358B0;
}
.comment-callout a:hover,
.comment-callout a:active,
.comment-callout a:focus {
color: #0F3554;
}
.comment-sorter {
display: inline-block;
float: right;
}
.comment-sorter .dropdown-toggle {
color: #5a6d7c;
font-size: 13px;
}
[dir=rtl] .comment-sorter {
float: left;
}
.comment-wrapper {
display: flex;
position: relative;
}
.comment-wrapper.comment-official {
border: 1px solid #17494D;
padding: 40px 20px 20px;
}
@media (min-width: 768px) {
.comment-wrapper.comment-official {
padding-top: 20px;
}
}
.comment-info {
min-width: 0;
padding-right: 20px;
width: 100%;
}
[dir=rtl] .comment-info {
padding-right: 0;
padding-left: 20px;
}
.comment-author {
align-items: flex-end;
display: flex;
flex-wrap: wrap;
margin-bottom: 20px;
}
@media (min-width: 768px) {
.comment-author {
justify-content: space-between;
}
}
.comment-avatar {
margin-right: 10px;
}
[dir=rtl] .comment-avatar {
margin-left: 10px;
margin-right: 0;
}
.comment-meta {
flex: 1 1 auto;
}
.comment-labels {
flex-basis: 100%;
}
@media (min-width: 768px) {
.comment-labels {
flex-basis: auto;
}
}
.comment .status-label:not(.status-label-official) {
margin-top: 10px;
}
@media (min-width: 768px) {
.comment .status-label:not(.status-label-official) {
margin-top: 0;
}
}
.comment-form {
display: flex;
padding-top: 30px;
word-wrap: break-word;
}
.comment-container {
width: 100%;
}
.comment-form-controls {
display: none;
margin-top: 10px;
text-align: left;
}
@media (min-width: 768px) {
[dir=ltr] .comment-form-controls {
text-align: right;
}
}
.comment-form-controls input[type=submit] {
margin-top: 15px;
}
@media (min-width: 1024px) {
.comment-form-controls input[type=submit] {
margin-left: 15px;
}
[dir=rtl] .comment-form-controls input[type=submit] {
margin-left: 0;
margin-right: 15px;
}
}
.comment-form-controls input[type=checkbox] {
margin-right: 5px;
}
.comment-form-controls input[type=checkbox] [dir=rtl] {
margin-left: 5px;
}
.comment-ccs {
display: none;
}
.comment-ccs+textarea {
margin-top: 10px;
}
.comment-attachments {
margin-top: 10px;
}
.comment-attachments a {
color: #17494D;
}
.comment-body {
-moz-hyphens: auto;
-ms-hyphens: auto;
-webkit-hyphens: auto;
word-break: break-word;
word-wrap: break-word;
display: flow-root;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
line-height: 1.6;
overflow-x: auto;
}
.comment-body a {
color: #1F73B7;
text-decoration: underline;
}
.comment-body a:visited {
color: #9358B0;
}
.comment-body a:hover,
.comment-body a:active,
.comment-body a:focus {
color: #0F3554;
}
.comment-body img {
height: auto;
max-width: 100%;
}
.comment-body p>img.image-style-align-left {
float: left;
margin: 8px 20px 6px 0;
}
.comment-body p>img.image-style-align-right {
float: right;
margin: 8px 0px 6px 20px;
}
.comment-body p>img.image-style-block-align-right {
margin-left: auto;
margin-right: 0;
}
.comment-body p>img.image-style-block-align-left {
margin-left: 0;
margin-right: auto;
}
.comment-body figure.image {
display: table;
margin: 0 auto;
}
.comment-body figure.image>img {
display: block;
width: 100%;
}
.comment-body figure.image.image-style-align-left {
float: left;
margin: 8px 20px 6px 0;
}
.comment-body figure.image.image-style-align-right {
float: right;
margin: 8px 0px 6px 20px;
}
.comment-body figure.image.image-style-block-align-right {
margin-left: auto;
margin-right: 0;
}
.comment-body figure.image.image-style-block-align-left {
margin-left: 0;
margin-right: auto;
}
.comment-body figcaption {
padding: 10px 0;
font-size: 12px;
text-align: center;
background-color: #f2f2f2;
}
.comment-body ul,
.comment-body ol {
padding-left: 20px;
list-style-position: outside;
margin: 20px 0 20px 20px;
}
[dir=rtl] .comment-body ul,
[dir=rtl] .comment-body ol {
padding-right: 20px;
padding-left: 0;
margin-left: 0;
margin-right: 20px;
}
.comment-body ul>ul,
.comment-body ol>ol,
.comment-body ol>ul,
.comment-body ul>ol,
.comment-body li>ul,
.comment-body li>ol {
margin: 0;
}
.comment-body ul {
list-style-type: disc;
}
.comment-body :not(pre)>code {
background: #f7f7f7;
border: 1px solid var(--border);
border-radius: 3px;
padding: 0 5px;
margin: 0 2px;
}
.comment-body pre {
background: #f7f7f7;
border: 1px solid var(--border);
border-radius: 3px;
padding: 10px 15px;
overflow: auto;
white-space: pre;
}
.comment-body blockquote {
border-left: 1px solid var(--border);
color: #5a6d7c;
font-style: italic;
padding: 0 15px;
}
.comment-mark-as-solved {
display: inline-block;
}
.vote {
display: flex;
flex-direction: column;
text-align: center;
}
.vote a:active,
.vote a:hover,
.vote a:focus {
text-decoration: none;
}
.vote-sum {
color: #5a6d7c;
display: block;
margin: 3px 0;
}
[dir=rtl] .vote-sum {
direction: ltr;
unicode-bidi: bidi-override;
}
.vote-up svg {
transform: scale(1, -1);
}
.vote-up:hover,
.vote-down:hover {
color: #17494D;
}
.vote-up,
.vote-down {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: transparent;
border: none;
color: #5a6d7c;
cursor: pointer;
min-height: 35px;
min-width: 35px;
display: flex;
align-items: center;
justify-content: center;
}
.vote-voted {
color: #17494D;
}
.vote-voted:hover {
color: #000;
}
.actions {
text-align: center;
flex-shrink: 0;
}
.actions button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: transparent;
border: none;
cursor: pointer;
min-height: 35px;
min-width: 35px;
display: flex;
align-items: center;
justify-content: center;
}
.community-hero {
background-image: url(/hc/theming_assets/01J2H4G0D55K0ZT6JXWKP111YG);
margin-bottom: 10px;
}
.community-footer {
padding-top: 50px;
text-align: center;
}
.community-footer-title {
font-size: 16px;
margin-bottom: 20px;
}
.community-featured-posts .title {
font-size: 18px;
font-weight: 600;
}
.community-featured-posts,
.community-activity {
padding-top: 40px;
width: 100%;
}
.community-header {
margin-bottom: 30px;
}
.community-header .title {
margin-bottom: 0;
font-size: 16px;
}
.post-to-community {
margin-top: 10px;
}
@media (min-width: 768px) {
.post-to-community {
margin: 0;
}
}
.topics {
max-width: none;
width: 100%;
}
.topics-item .meta-group {
justify-content: center;
margin-top: 20px;
}
.topic-header {
border-bottom: 1px solid var(--border);
font-size: 13px;
}
@media (min-width: 768px) {
.topic-header {
padding-bottom: 10px;
}
}
.topic-header .dropdown {
display: block;
border-top: 1px solid var(--border);
padding: 10px 0;
}
@media (min-width: 768px) {
.topic-header .dropdown {
border-top: 0;
display: inline-block;
margin-right: 20px;
padding: 0;
}
}
.no-posts-with-filter {
margin-top: 20px;
margin-bottom: 20px;
}
.community-follow {
margin-bottom: 10px;
width: 100%;
}
@media (min-width: 768px) {
.community-follow {
margin-bottom: 0;
width: auto;
}
}
.community-follow button {
line-height: 30px;
padding: 0 10px 0 15px;
position: relative;
width: 100%;
}
@media (min-width: 768px) {
.community-follow button {
width: auto;
}
}
.community-follow button:hover {
background-color: #17494D;
}
.community-follow button:hover::after,
.community-follow button:focus::after {
border-color: #FFFFFF;
color: #FFFFFF;
}
.community-follow button[data-selected=true] {
background-color: #17494D;
color: #FFFFFF;
}
.community-follow button[data-selected=true]::after {
border-left: 1px solid #FFFFFF;
color: #FFFFFF;
}
.community-follow button[data-selected=true]:hover {
background-color: #000;
border-color: #000;
}
.community-follow button::after {
border-left: 1px solid #17494D;
content: attr(data-follower-count);
color: #17494D;
display: inline-block;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
margin-left: 15px;
padding-left: 10px;
position: absolute;
right: 10px;
}
@media (min-width: 768px) {
.community-follow button::after {
position: static;
}
}
[dir=rtl] .community-follow button::after {
border-left: 0;
border-right: 1px solid #17494D;
margin: 0 10px 0 0;
padding: 0 10px 0 0;
}
.striped-list {
padding: 0;
}
.striped-list-item {
align-items: flex-start;
border-bottom: 1px solid var(--border);
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 20px 0;
}
@media (min-width: 768px) {
.striped-list-item {
align-items: center;
flex-direction: row;
}
}
.striped-list-info {
flex: 2;
}
.striped-list-title {
color: #1F73B7;
margin-bottom: 10px;
margin-right: 5px;
}
.striped-list-title:hover,
.striped-list-title:focus,
.striped-list-title:active {
text-decoration: underline;
}
.striped-list-title:visited {
color: #9358B0;
}
.striped-list .meta-group {
margin: 5px 0;
}
.striped-list-count {
color: #5a6d7c;
font-size: 13px;
justify-content: flex-start;
text-transform: capitalize;
}
@media (min-width: 768px) {
.striped-list-count {
display: flex;
flex: 1;
justify-content: space-around;
}
}
.striped-list-count-item::after {
content: "夷?;
display: inline-block;
padding: 0 5px;
}
@media (min-width: 768px) {
.striped-list-count-item::after {
display: none;
}
}
.striped-list-count-item:last-child::after {
display: none;
}
.striped-list-number {
text-align: center;
}
@media (min-width: 768px) {
.striped-list-number {
color: #2F3941;
display: block;
}
}
.status-label {
background-color: #038153;
border-radius: 4px;
color: #fff;
font-size: 12px;
font-weight: 600;
margin-right: 2px;
padding: 3px 10px;
vertical-align: middle;
white-space: nowrap;
display: inline-block;
}
.status-label:hover,
.status-label:active,
.status-label:focus {
text-decoration: none;
}
.status-label-pinned,
.status-label-featured,
.status-label-official {
background-color: #17494D;
}
.status-label-official {
border-radius: 0;
margin-right: 0;
position: absolute;
right: 0;
text-align: center;
top: 0;
width: 100%;
}
@media (min-width: 768px) {
.status-label-official {
border-radius: 0 0 4px 4px;
right: 30px;
width: auto;
}
}
[dir=rtl] .status-label-official {
left: 30px;
right: auto;
}
.status-label-not-planned,
.status-label-closed {
background-color: #e9ebed;
color: #5a6d7c;
}
.status-label-pending,
.status-label-pending-moderation {
background-color: #1f73b7;
text-align: center;
}
.status-label-open {
background-color: #c72a1c;
}
.status-label-solved {
background-color: #68737d;
}
.status-label-new {
background-color: #ffb648;
color: #703b15;
}
.status-label-hold {
background-color: #000;
}
.status-label-request {
max-width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
}
@media (max-width: 768px) {
.status-label-request {
max-width: 150px;
}
}
.post {
flex: 1;
margin-bottom: 10px;
}
@media (min-width: 1024px) {
.post {
flex: 1 0 70%;
max-width: 70%;
}
}
.post-container {
display: flex;
flex-direction: column;
}
@media (min-width: 1024px) {
.post-container {
flex-direction: row;
}
}
.post-header {
align-items: center;
display: flex;
flex-direction: column;
justify-content: space-between;
margin-bottom: 10px;
}
@media (min-width: 768px) {
.post-header {
align-items: baseline;
flex-direction: row;
}
}
.post-header .status-label {
vertical-align: super;
}
.post-title {
margin-bottom: 20px;
width: 100%;
}
@media (min-width: 768px) {
.post-title {
margin-bottom: 0;
padding-right: 10px;
}
}
.post-title h1 {
display: inline;
vertical-align: middle;
}
@media (min-width: 768px) {
.post-title h1 {
margin-right: 5px;
}
}
.post-author {
align-items: flex-start;
display: flex;
justify-content: space-between;
}
.post-avatar {
margin-bottom: 30px;
}
.post-content {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
line-height: 1.6;
word-break: break-word;
}
.post-info-container {
display: flex;
margin-bottom: 40px;
}
.post-info {
min-width: 0;
padding-right: 20px;
width: 100%;
}
[dir=rtl] .post-info {
padding-right: 0;
padding-left: 20px;
}
.post-meta {
display: inline-block;
flex: 1;
margin-left: 10px;
vertical-align: middle;
}
[dir=rtl] .post-meta {
margin-left: 0;
margin-right: 10px;
}
.post-body {
display: flow-root;
}
.post-body a {
color: #1F73B7;
text-decoration: underline;
}
.post-body a:visited {
color: #9358B0;
}
.post-body a:hover,
.post-body a:active,
.post-body a:focus {
color: #0F3554;
}
.post-body img {
height: auto;
max-width: 100%;
}
.post-body p>img.image-style-align-left {
float: left;
margin: 8px 20px 6px 0;
}
.post-body p>img.image-style-align-right {
float: right;
margin: 8px 0px 6px 20px;
}
.post-body p>img.image-style-block-align-right {
margin-left: auto;
margin-right: 0;
}
.post-body p>img.image-style-block-align-left {
margin-left: 0;
margin-right: auto;
}
.post-body figure.image {
display: table;
margin: 0 auto;
}
.post-body figure.image>img {
display: block;
width: 100%;
}
.post-body figure.image.image-style-align-left {
float: left;
margin: 8px 20px 6px 0;
}
.post-body figure.image.image-style-align-right {
float: right;
margin: 8px 0px 6px 20px;
}
.post-body figure.image.image-style-block-align-right {
margin-left: auto;
margin-right: 0;
}
.post-body figure.image.image-style-block-align-left {
margin-left: 0;
margin-right: auto;
}
.post-body figcaption {
padding: 10px 0;
font-size: 12px;
text-align: center;
background-color: #f2f2f2;
}
.post-body ul,
.post-body ol {
padding-left: 20px;
list-style-position: outside;
margin: 20px 0 20px 20px;
}
[dir=rtl] .post-body ul,
[dir=rtl] .post-body ol {
padding-right: 20px;
padding-left: 0;
margin-left: 0;
margin-right: 20px;
}
.post-body ul>ul,
.post-body ol>ol,
.post-body ol>ul,
.post-body ul>ol,
.post-body li>ul,
.post-body li>ol {
margin: 0;
}
.post-body ul {
list-style-type: disc;
}
.post-body :not(pre)>code {
background: #f7f7f7;
border: 1px solid var(--border);
border-radius: 3px;
padding: 0 5px;
margin: 0 2px;
}
.post-body pre {
background: #f7f7f7;
border: 1px solid var(--border);
border-radius: 3px;
padding: 10px 15px;
overflow: auto;
white-space: pre;
}
.post-body blockquote {
border-left: 1px solid var(--border);
color: #5a6d7c;
font-style: italic;
padding: 0 15px;
}
.post-footer {
align-items: center;
display: flex;
justify-content: space-between;
padding-bottom: 20px;
}
.post-comment-count {
color: #5a6d7c;
}
.post-comment-count:hover {
text-decoration: none;
}
.post-comment-count .icon-comments {
color: #17494D;
display: inline-block;
width: 18px;
height: 18px;
margin: 5px;
vertical-align: middle;
}
.post-sidebar {
border-top: 1px solid var(--border);
flex: 1;
padding: 30px 0;
text-align: center;
}
@media (min-width: 1024px) {
.post-sidebar {
border: 0;
flex: 1 0 30%;
padding: 0 0 0 50px;
text-align: initial;
}
[dir=rtl] .post-sidebar {
padding: 0 50px 0 0;
}
}
.post-sidebar-title {
font-size: 18px;
font-weight: 600;
}
.post-comments {
margin-bottom: 20px;
}
@media (min-width: 1024px) {
.post-comments {
margin-bottom: 0;
}
}
.community-badge-title {
background-color: #04444d;
border-radius: 4px;
color: #fff;
font-size: 12px;
font-weight: 600;
padding: 0px 8px;
vertical-align: top;
white-space: nowrap;
display: inline-block;
line-height: 18px;
vertical-align: middle;
}
.community-badge-titles {
display: inline;
}
.community-badge-achievement {
display: block;
height: 16px;
white-space: nowrap;
width: 16px;
}
.community-badge-achievement img {
width: 100%;
height: 100%;
}
.community-badge-achievements {
display: flex;
}
.community-badge-achievements-rest {
font-size: 12px;
font-weight: 600;
line-height: 20px;
text-align: center;
vertical-align: top;
}
.community-badge {
margin: 2px;
}
.profile-info .community-badge-title {
padding: 2px 8px;
line-height: 20px;
}
.profile-info .community-badge-achievement {
height: 40px;
width: 40px;
}
.profile-info .community-badge-achievements-rest {
line-height: 40px;
font-size: 20px;
}
.collapsible-nav {
flex-direction: column;
font-size: 14px;
position: relative;
}
@media (min-width: 768px) {
.collapsible-nav {
flex-direction: row;
}
}
.collapsible-nav-border {
border-bottom: 1px solid var(--border);
border-top: 1px solid var(--border);
}
@media (min-width: 768px) {
.collapsible-nav-border {
border-top: 0;
}
}
.collapsible-nav-toggle {
top: 22.5px;
transform: translateY(-50%);
position: absolute;
right: 0;
padding: 0;
border: 0;
background: none;
width: 25px;
height: 25px;
border-radius: 50%;
}
@media (min-width: 768px) {
.collapsible-nav-toggle {
display: none;
}
}
[dir=rtl] .collapsible-nav-toggle {
left: 0;
right: auto;
}
.collapsible-nav-toggle-icon {
display: none;
}
.collapsible-nav-toggle[aria-expanded=false] .chevron-icon {
display: inline-block;
}
.collapsible-nav-toggle[aria-expanded=true] .x-icon {
display: inline-block;
}
.collapsible-nav-toggle:focus {
outline: none;
border: 1px solid #17494D;
}
.collapsible-nav-list {
display: flex;
flex-direction: column;
}
@media (min-width: 768px) {
.collapsible-nav-list {
flex-direction: row;
}
}
.collapsible-nav-list li {
color: #2F3941;
line-height: 45px;
order: 1;
}
@media (min-width: 768px) {
.collapsible-nav-list li {
line-height: normal;
margin-right: 30px;
}
[dir=rtl] .collapsible-nav-list li {
margin-left: 30px;
margin-right: 0;
}
.collapsible-nav-list li a {
text-decoration: none;
padding: 15px 0;
}
}
.collapsible-nav-list li a {
color: #2F3941;
display: block;
}
@media (min-width: 768px) {
.collapsible-nav-list li:hover {
border-bottom: 4px solid #ddd;
}
.collapsible-nav-list li:hover a:not([aria-current=page]) {
padding: 15px 0 11px 0;
text-decoration: none;
}
}
.collapsible-nav-list li:not([aria-selected=true]),
.collapsible-nav-list li:not(.current) {
display: none;
}
@media (min-width: 768px) {
.collapsible-nav-list li:not([aria-selected=true]),
.collapsible-nav-list li:not(.current) {
display: block;
}
}
@media (min-width: 768px) {
.collapsible-nav-list li[aria-selected=true] {
padding: 15px 0 11px 0;
}
}
.collapsible-nav-list li[aria-selected=true],
.collapsible-nav-list li.current {
order: 0;
position: relative;
}
@media (min-width: 768px) {
.collapsible-nav-list li[aria-selected=true],
.collapsible-nav-list li.current {
border-bottom: 4px solid #17494D;
order: 1;
}
}
.collapsible-nav-list li[aria-selected=true] a,
.collapsible-nav-list li.current a {
color: #2F3941;
}
.collapsible-nav[aria-expanded=true] li:not([aria-selected=true]),
.collapsible-nav[aria-expanded=true] li:not(.current) {
display: block;
}
.collapsible-sidebar {
flex: 1;
max-height: 45px;
padding: 10px 0;
position: relative;
}
@media (min-width: 1024px) {
.collapsible-sidebar {
max-height: none;
padding: 0;
}
}
.collapsible-sidebar-title {
margin-top: 0;
}
.collapsible-sidebar-toggle {
position: absolute;
top: 22.5px;
transform: translateY(-50%);
right: 0;
padding: 0;
border: 0;
background: none;
width: 25px;
height: 25px;
border-radius: 50%;
}
@media (min-width: 1024px) {
.collapsible-sidebar-toggle {
display: none;
}
}
[dir=rtl] .collapsible-sidebar-toggle {
left: 0;
right: auto;
}
.collapsible-sidebar-toggle-icon {
display: none;
}
.collapsible-sidebar-toggle[aria-expanded=false] .chevron-icon {
display: inline-block;
}
.collapsible-sidebar-toggle[aria-expanded=true] .x-icon {
display: inline-block;
}
.collapsible-sidebar-toggle:focus {
outline: none;
border: 1px solid #17494D;
}
.collapsible-sidebar-body {
display: none;
}
@media (min-width: 1024px) {
.collapsible-sidebar-body {
display: block;
}
}
.collapsible-sidebar[aria-expanded=true] {
max-height: none;
}
.collapsible-sidebar[aria-expanded=true] .collapsible-sidebar-body {
display: block;
}
.my-activities-nav {
background-color: #f2f2f2;
margin-bottom: 20px;
}
.my-activities-sub-nav {
margin-bottom: 30px;
}
.my-activities-table .striped-list-title {
display: block;
margin-bottom: 10px;
max-width: 350px;
white-space: normal;
}
@media (min-width: 1024px) {
.my-activities-table .striped-list-title {
margin-bottom: 0;
max-width: 500px;
min-width: 350px;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.my-activities-table thead {
display: none;
}
@media (min-width: 768px) {
.my-activities-table thead {
display: table-header-group;
}
}
.my-activities-table th:first-child,
.my-activities-table td:first-child {
padding-left: 0;
}
@media (min-width: 1024px) {
.my-activities-table th:first-child,
.my-activities-table td:first-child {
width: 500px;
}
}
.my-activities-table th:last-child,
.my-activities-table td:last-child {
padding-right: 0;
}
.my-activities-table td:not(:first-child) {
display: none;
}
@media (min-width: 768px) {
.my-activities-table td:not(:first-child) {
display: table-cell;
}
}
.requests-search {
width: 100%;
}
.requests-table-toolbar {
align-items: flex-end;
display: flex;
flex-direction: column;
}
@media (min-width: 768px) {
.requests-table-toolbar {
flex-direction: row;
}
}
.requests-table-toolbar .search {
flex: 1;
width: 100%;
}
.requests-table-toolbar .request-table-filter {
width: 100%;
}
@media (min-width: 768px) {
.requests-table-toolbar .request-table-filter {
width: auto;
}
}
.requests-table-toolbar .request-filter {
display: block;
}
@media (min-width: 768px) {
.requests-table-toolbar .request-filter {
margin: 0 0 0 30px;
}
[dir=rtl] .requests-table-toolbar .request-filter {
margin: 0 30px 0 0;
}
}
.requests-table-toolbar .request-filter-label {
font-size: 13px;
margin-top: 30px;
}
@media (min-width: 768px) {
.requests-table-toolbar .request-filter-label {
margin-top: 0;
}
}
.requests-table-toolbar select {
max-height: 40px;
margin-bottom: 30px;
width: 100%;
}
@media (min-width: 768px) {
.requests-table-toolbar select {
margin-bottom: 0;
max-width: 300px;
width: auto;
}
}
@media (min-width: 768px) {
.requests-table-toolbar .organization-subscribe {
margin-left: 10px;
}
[dir=rtl] .requests-table-toolbar .organization-subscribe {
margin: 0 10px 0 0;
}
}
.requests-table-toolbar .organization-subscribe button {
line-height: 40px;
max-height: 40px;
padding: 0 20px;
}
.requests-table-toolbar+.requests-search-info {
margin-top: 15px;
}
.requests-table-toolbar+.requests-search-info.meta-data::after {
content: "";
margin: 0;
}
.requests-table-toolbar+.requests-search-info+.requests {
margin-top: 20px;
}
.requests-table-toolbar+.requests {
margin-top: 40px;
}
.requests .requests-table-meta {
display: block;
}
@media (min-width: 768px) {
.requests .requests-table-meta {
display: none;
}
}
.requests .requests-table thead {
display: none;
}
@media (min-width: 768px) {
.requests .requests-table thead {
display: table-header-group;
}
}
.requests .requests-table-info {
display: block;
}
@media (min-width: 768px) {
.requests .requests-table-info {
display: table-cell;
vertical-align: middle;
width: auto;
}
}
.requests .requests-table .requests-link {
position: relative;
}
.requests .requests-table .requests-sort-symbol {
position: absolute;
left: calc(100% + 3px);
bottom: 0;
font-size: 10px;
}
@media (min-width: 768px) {
.subscriptions-subscribe button {
width: auto;
}
}
.subscriptions-table td:last-child {
display: block;
}
@media (min-width: 768px) {
.subscriptions-table td:last-child {
display: table-cell;
}
}
.subscriptions-table td:first-child {
display: flex;
align-items: center;
}
.subscriptions-table .user-avatar {
margin-right: 10px;
}
.subscriptions .striped-list-title {
display: inline-block;
vertical-align: middle;
}
.contributions-table td:last-child {
color: #5a6d7c;
font-size: 13px;
}
@media (min-width: 768px) {
.contributions-table td:last-child {
color: inherit;
font-size: inherit;
font-weight: inherit;
}
}
.no-activities {
color: #5a6d7c;
}
.request-container {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: space-between;
}
@media (min-width: 1024px) {
.request-container {
align-items: flex-start;
flex-direction: row;
}
}
.request-container .comment-container {
min-width: 0;
}
.request-breadcrumbs {
margin-bottom: 40px;
}
@media (min-width: 1024px) {
.request-breadcrumbs {
margin-bottom: 60px;
}
}
.request-main {
flex: 1 0 auto;
order: 1;
}
.request-main .comment-fields,
.request-main .request-submit-comment {
display: none;
}
.request-main .comment-fields.shown {
display: block;
}
.request-main .request-submit-comment.shown {
display: inline;
}
@media (min-width: 1024px) {
.request-main {
flex: 0 0 66%;
order: 0;
min-width: 0;
}
}
.request-main .comment-form-controls {
display: block;
}
.request-main .comment-ccs {
display: block;
}
.request-main .comment-show-container {
border-radius: 10px;
border: 1px solid rgba(148, 163, 184, 0.32);
background: rgba(15, 35, 54, 0.75);
color: #CBD5E1;
text-align: inherit;
padding: 12px 20px;
width: 100%;
cursor: pointer;
}
.request-main .comment-show-container.hidden {
display: none;
}
.request-main .form-field.comment-ccs>ul {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border-bottom: 0;
}
.request-main .form-field.comment-ccs>ul[data-hc-focus=true] {
border: 1px solid #38BDF8;
}
.request-main .form-field.comment-ccs>input[type=text] {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border-bottom: 0;
}
.request-main .comment-ccs+textarea {
border-top-left-radius: 0;
border-top-right-radius: 0;
margin-top: 0;
}
.request-main .comment-ccs+textarea:focus {
border-top: 1px solid #38BDF8;
}
.request-main input#mark_as_solved {
display: none;
}
.request-title {
width: 100%;
}
@media (min-width: 1024px) {
.request-title {
border-bottom: 1px solid var(--border);
margin-bottom: 0;
max-width: 100%;
padding-bottom: 20px;
}
}
.request-sidebar {
border-bottom: 1px solid var(--border);
border-top: 1px solid var(--border);
flex: 1 0 auto;
order: 0;
}
@media (min-width: 1024px) {
.request-sidebar {
background-color: rgba(11, 27, 42, 0.86);
border: 1px solid rgba(148, 163, 184, 0.22);
border-radius: 16px;
font-size: 13px;
flex: 0 0 340px;
padding: 22px 24px;
width: 340px;
}
}
.request-sidebar h2 {
font-size: 15px;
font-weight: 600;
position: relative;
}
@media (min-width: 1024px) {
.request-sidebar h2 {
display: block;
}
}
.request-details {
border-bottom: 1px solid var(--border);
font-size: 0;
margin: 0;
padding-bottom: 20px;
}
.request-details:last-child {
border: 0;
}
.request-details dt,
.request-details dd {
display: inline-block;
vertical-align: top;
font-size: 13px;
margin: 20px 0 0 0;
}
.request-details dd {
padding: 0 10px;
width: 60%;
}
.request-details dd::after {
content: "\a";
white-space: pre;
}
.request-details dt {
line-break: strict;
color: #94A3B8;
width: 40%;
}
.request-details .request-collaborators {
display: inline-block;
}
.request-attachments dt,
.request-attachments dd {
width: 100%;
}
.request-attachments dd {
margin: 10px 0 0 0;
}
.request-form textarea {
min-height: 120px;
}
.request-follow-up {
padding-top: 20px;
}
.pagination {
margin: 20px 0;
text-align: center;
}
.pagination-next,
.pagination-prev,
.pagination-first,
.pagination-last {
display: inline-block;
}
.pagination-first-link,
.pagination-last-link {
padding: 0 10px;
}
.pagination-first-text,
.pagination-last-text {
border: 0;
clip: rect(0 0 0 0);
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 1px;
margin: -1px;
padding: 0;
position: absolute;
width: 1px;
white-space: nowrap;
}
.pagination-next-link {
padding-right: 10px;
}
.pagination-next-text {
margin-right: 10px;
}
[dir=rtl] .pagination-next-link {
padding-left: 10px;
}
[dir=rtl] .pagination-next-text {
margin-left: 10px;
}
.pagination-prev-link {
padding-left: 10px;
}
.pagination-prev-text {
margin-left: 10px;
}
[dir=rtl] .pagination-prev-link {
padding-right: 10px;
}
[dir=rtl] .pagination-prev-text {
margin-right: 10px;
}
.meta-group {
display: block;
}
.meta-group-opposite {
float: right;
}
[dir=rtl] .meta-group-opposite {
float: left;
}
.meta-group * {
display: inline;
}
.meta-data {
color: #5a6d7c;
font-size: 13px;
}
.meta-data:not(:last-child)::after {
content: "夷?;
margin: 0 5px;
}
.profile-header {
padding: 30px 0;
background-color: #f7f7f7;
}
.profile-header .container {
display: flex;
flex-wrap: wrap;
}
@media (min-width: 768px) {
.profile-header .container {
flex-wrap: nowrap;
}
}
.profile-header .profile-info {
flex-basis: 100%;
display: flex;
flex-wrap: wrap;
min-width: 0;
}
.profile-avatar {
position: relative;
line-height: 0;
align-self: center;
margin-right: 10px;
}
[dir=rtl] .profile-avatar {
margin-left: 10px;
margin-right: 0;
}
.profile-avatar .user-avatar {
width: 80px;
height: 80px;
}
.profile-avatar .icon-agent {
bottom: 0;
right: 0;
}
.profile-header .basic-info {
-moz-hyphens: auto;
-ms-hyphens: auto;
-webkit-hyphens: auto;
word-break: break-word;
word-wrap: break-word;
display: flex;
flex-direction: column;
justify-content: center;
flex-grow: 1;
flex-basis: 0;
min-width: 0;
}
.profile-header .basic-info .name {
margin: 0;
line-height: 25px;
vertical-align: middle;
display: inline;
}
.profile-header .options {
display: flex;
flex-basis: 100%;
margin-top: 12px;
align-items: flex-start;
flex-wrap: wrap;
}
@media (min-width: 768px) {
.profile-header .options {
flex-wrap: nowrap;
flex-basis: auto;
margin-top: 0;
margin-left: 10px;
}
[dir=rtl] .profile-header .options {
margin-left: 0;
margin-right: 10px;
}
.profile-header .options> :not(:last-child) {
margin-bottom: 0;
margin-right: 10px;
}
[dir=rtl] .profile-header .options> :not(:last-child) {
margin-left: 10px;
margin-right: 0;
}
}
.user-profile-actions {
width: 100%;
margin-bottom: 15px;
}
.profile-header .description {
-moz-hyphens: auto;
-ms-hyphens: auto;
-webkit-hyphens: auto;
word-break: break-word;
word-wrap: break-word;
margin: 15px 0;
flex-basis: 100%;
}
.profile-stats {
font-size: 13px;
display: flex;
flex-direction: column;
flex-basis: 100%;
}
.profile-stats .stat {
display: flex;
margin-bottom: 10px;
}
.profile-stats .stat-label {
color: #5a6d7c;
flex: 0 0 100px;
margin-right: 10px;
}
[dir=rtl] .profile-stats .stat-label {
margin-left: 10px;
margin-right: 0;
}
.profile-stats-activity {
border-top: solid 1px #ddd;
margin-top: 15px;
}
@media (min-width: 768px) {
.profile-stats-activity {
border-top: 0;
flex-direction: row;
}
}
@media (min-width: 768px) {
.profile-stats-activity .stat {
flex-direction: column;
}
}
.profile-stats-activity .stat:first-child {
margin-top: 10px;
}
@media (min-width: 768px) {
.profile-stats-activity .stat:first-child {
margin-top: 0;
}
}
@media (min-width: 768px) {
.profile-stats-activity .stat:not(:last-child) {
margin-right: 40px;
}
[dir=rtl] .profile-stats-activity .stat:not(:last-child) {
margin-left: 40px;
margin-right: 0;
}
}
@media (min-width: 768px) {
.profile-stats-activity .stat-label {
flex: 0 1 auto;
}
}
.profile-stats-counters {
border-bottom: solid 1px #ddd;
}
@media (min-width: 768px) {
.profile-stats-counters {
flex: 0 0 200px;
border-bottom: 0;
margin-left: 40px;
}
[dir=rtl] .profile-stats-counters {
margin-left: 0;
margin-right: 40px;
}
}
@media (min-width: 1024px) {
.profile-stats-counters {
flex: 0 0 270px;
margin-left: 60px;
}
[dir=rtl] .profile-stats-counters {
margin-right: 60px;
margin-left: 0;
}
}
@media (min-width: 768px) {
.profile-stats-counters .stat {
flex-direction: column;
}
}
@media (min-width: 1024px) {
.profile-stats-counters .stat {
flex-direction: row;
}
}
@media (min-width: 768px) {
.profile-stats-counters .stat:not(:last-child) {
margin-bottom: 15px;
}
}
@media (min-width: 768px) {
.profile-stats-counters .stat-label {
flex: 0 1 auto;
}
}
@media (min-width: 1024px) {
.profile-stats-counters .stat-label {
flex: 0 0 100px;
}
}
.profile-private-badge {
flex-basis: 100%;
border: solid 1px #17494D;
border-radius: 4px;
color: #17494D;
padding: 5px 20px;
font-size: 12px;
text-align: center;
}
.profile-private-badge .profile-private-icon {
margin-left: 5px;
line-height: 15px;
}
@media (min-width: 768px) {
.profile-private-badge {
flex-basis: auto;
}
}
.profile-nav {
background-color: #f2f2f2;
margin-bottom: 37px;
}
.profile-section {
width: 100%;
}
@media (min-width: 1024px) {
.profile-section {
width: calc(100% - 330px);
}
}
.profile-section-header {
display: flex;
flex-wrap: wrap;
}
.profile-section-title {
flex-basis: 100%;
margin-bottom: 0;
}
.profile-section-description {
flex-basis: 100%;
padding: 10px 0;
color: #5a6d7c;
font-size: 13px;
white-space: nowrap;
text-overflow: ellipsis;
}
@media (min-width: 768px) {
.profile-section-description {
flex: 1 0 50%;
padding-bottom: 0;
}
}
.profile-section-sorter {
flex-basis: 100%;
border-top: solid 1px #eee;
font-size: 13px;
}
.profile-section-sorter .dropdown-toggle {
padding: 10px 0;
width: 100%;
}
.profile-section-sorter .dropdown-toggle::after {
position: absolute;
right: 0;
}
[dir=rtl] .profile-section-sorter .dropdown-toggle::after {
left: 0;
right: initial;
}
@media (min-width: 768px) {
.profile-section-sorter .dropdown-toggle::after {
position: relative;
}
}
@media (min-width: 768px) {
.profile-section-sorter {
flex: 0 1 auto;
padding-top: 0;
border-top: 0;
margin-left: 20px;
}
[dir=rtl] .profile-section-sorter {
margin-left: 0;
margin-right: 20px;
}
}
.profile-badges-items {
margin-top: 25px;
}
.profile-badges-item {
border-top: 1px solid var(--border);
display: flex;
flex: 1;
flex-direction: row;
justify-content: flex-start;
padding: 27px 12px;
}
.profile-badges-item>div {
padding-right: 12px;
padding-left: 12px;
}
.profile-badges-item-image {
height: 40px;
width: 40px;
margin-right: 12px;
}
.profile-badges-item-image img {
max-height: 40px;
}
[dir=rtl] .profile-badges-item-image {
margin-left: 12px;
margin-right: 0;
}
.profile-badges-item-title,
.profile-badges-item-metadata-title {
font-size: 15px;
margin-bottom: 10px;
}
.profile-badges-item-title {
font-weight: 600;
}
.profile-badges-item-description,
.profile-badges-item-metadata-description {
color: #5a6d7c;
font-size: 13px;
margin: 0;
}
.profile-badges-item-metadata {
margin-left: auto;
text-align: right;
}
[dir=rtl] .profile-badges-item-metadata {
margin-left: 0;
margin-right: auto;
text-align: left;
}
.profile-contribution {
-moz-hyphens: auto;
-ms-hyphens: auto;
-webkit-hyphens: auto;
word-break: break-word;
word-wrap: break-word;
padding: 20px 0;
position: relative;
}
.profile-contribution-header {
margin-bottom: 5px;
}
.profile-contribution-title {
margin: 0 0 5px 0;
display: inline;
line-height: 21px;
font-size: 15px;
vertical-align: middle;
}
.profile-contribution-body {
margin: 10px 0;
}
.profile-contribution-list>.profile-contribution {
border-top: 1px solid #eee;
}
@media (min-width: 768px) {
.profile-contribution-list>.profile-contribution {
padding-left: 30px;
}
[dir=rtl] .profile-contribution-list>.profile-contribution {
padding-right: 30px;
padding-left: 0;
}
}
.profile-contribution-list>.profile-contribution:last-child {
border-bottom: 1px solid #eee;
}
.profile-contribution-icon {
left: 0;
position: absolute;
color: #ccc;
line-height: 25px;
}
[dir=rtl] .profile-contribution-icon {
right: 0;
}
.profile-contribution-icon svg {
vertical-align: middle;
}
.profile-contribution-list .profile-contribution-header {
margin-left: 30px;
}
[dir=rtl] .profile-contribution-list .profile-contribution-header {
padding-right: 30px;
padding-left: 0;
}
@media (min-width: 768px) {
.profile-contribution-list .profile-contribution-header {
margin-left: 0;
}
[dir=rtl] .profile-contribution-list .profile-contribution-header {
padding-right: 0;
}
}
.profile-comments .profile-contribution-breadcrumbs {
margin-left: 30px;
}
[dir=rtl] .profile-comments .profile-contribution-breadcrumbs {
padding-right: 30px;
padding-left: 0;
}
@media (min-width: 768px) {
.profile-comments .profile-contribution-breadcrumbs {
margin-left: 0;
}
[dir=rtl] .profile-comments .profile-contribution-breadcrumbs {
padding-right: 0;
}
}
.profile-section .no-activity,
.profile-section .private-activity {
display: block;
margin-top: 40px;
color: #999;
}
.private-activity-icon {
margin-right: 10px;
}
[dir=rtl] .private-activity-icon {
margin-right: 0;
margin-left: 10px;
}
.profile-activity-list {
margin-top: 25px;
}
.profile-activity {
position: relative;
padding-bottom: 30px;
}
@media (min-width: 768px) {
.profile-activity {
padding-left: 20px;
}
[dir=rtl] .profile-activity {
padding-right: 20px;
padding-left: 0;
}
}
@media (min-width: 768px) {
.profile-activity:not(:last-child) {
border-left: 1px solid var(--border);
}
[dir=rtl] .profile-activity:not(:last-child) {
border-left: 0;
border-right: 1px solid var(--border);
}
}
.profile-activity-header {
display: flex;
align-items: center;
margin-left: 35px;
}
[dir=rtl] .profile-activity-header {
margin-left: 0;
margin-right: 35px;
}
@media (min-width: 768px) {
.profile-activity-header {
margin-left: 0;
}
[dir=rtl] .profile-activity-header {
margin-right: 0;
}
}
.profile-activity-header .user-avatar {
width: 40px;
height: 40px;
margin-right: 10px;
min-width: 40px;
align-self: flex-start;
}
[dir=rtl] .profile-activity-header .user-avatar {
margin-left: 10px;
margin-right: 0;
}
.profile-activity-description {
-moz-hyphens: auto;
-ms-hyphens: auto;
-webkit-hyphens: auto;
word-break: break-word;
word-wrap: break-word;
margin: 0;
min-width: 0;
width: 100%;
}
.profile-activity-description span:first-child {
font-weight: 600;
display: inline;
}
.profile-activity-contribution {
padding: 20px;
margin-top: 10px;
border-radius: 8px;
background-color: #f7f7f7;
}
@media (min-width: 768px) {
.profile-activity-contribution {
margin-top: 0;
margin-left: 50px;
}
[dir=rtl] .profile-activity-contribution {
margin-left: 0;
margin-right: 50px;
}
}
.profile-activity-icon {
position: absolute;
left: 0;
width: 28px;
height: 28px;
border-radius: 50%;
background-size: 14px 14px;
background-repeat: no-repeat;
background-color: #FFFFFF;
background-position: 50% 50%;
text-align: center;
color: #ccc;
}
[dir=rtl] .profile-activity-icon {
right: 0;
}
@media (min-width: 768px) {
.profile-activity-icon {
left: -14px;
}
[dir=rtl] .profile-activity-icon {
right: -14px;
}
}
.profile-activity-icon svg {
position: relative;
top: 50%;
transform: translateY(-50%);
width: 1em;
height: 1em;
margin: auto;
}
.search-results {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: space-between;
}
@media (min-width: 1024px) {
.search-results {
flex-direction: row;
}
}
.search-results-column {
flex: 1;
}
@media (min-width: 1024px) {
.search-results-column {
flex: 0 0 75%;
}
}
.search-results-sidebar {
border-top: 1px solid var(--border);
flex: 1 0 auto;
margin-bottom: 20px;
padding: 0;
}
@media (min-width: 1024px) {
.search-results-sidebar {
border: 0;
flex: 0 0 20%;
height: auto;
}
}
.search-results-sidebar .sidenav-item {
border-radius: 4px;
padding: 10px 36px;
margin-bottom: 4px;
color: #2F3941;
}
.search-results-sidebar .sidenav-item:hover,
.search-results-sidebar .sidenav-item.current {
background-color: #e9ebed;
text-decoration: none;
}
.search-results-sidebar .sidenav-subitem {
unicode-bidi: embed;
}
.search-results-sidebar .sidenav-tag {
display: flex;
flex-direction: row;
align-items: flex-start;
flex-grow: 0;
}
.search-results-sidebar .sidenav-tag .content-tag {
background: #E9EBED;
border-radius: 4px;
padding: 4px 12px;
text-decoration: none;
}
.search-results-sidebar .sidenav-tag .content-tag .label {
font-style: normal;
font-weight: 600;
font-size: 12px;
line-height: 24px;
text-align: center;
letter-spacing: -0.000427656px;
color: #49545C;
flex-grow: 0;
vertical-align: middle;
display: inline-block;
}
.search-results-sidebar .sidenav-tag .content-tag .close-icon {
color: #555555;
vertical-align: middle;
display: inline-block;
}
.search-results-sidebar .collapsible-sidebar {
margin-bottom: 30px;
}
.search-results-sidebar .collapsible-sidebar[aria-expanded=false] .multibrand-filter-list {
display: none;
}
@media (min-width: 1024px) {
.search-results-sidebar .collapsible-sidebar[aria-expanded=false] .multibrand-filter-list {
display: block;
}
}
.search-results-sidebar .multibrand-filter-list--collapsed li:nth-child(1n+6) {
display: none;
}
.search-results-sidebar .multibrand-filter-list .doc-count {
color: var(--muted);
}
.search-results-sidebar .see-all-filters {
background: none;
border: none;
cursor: pointer;
display: block;
padding: 10px;
color: #1F73B7;
}
.search-results-sidebar .see-all-filters[aria-hidden=true] {
display: none;
}
.search-results-sidebar .see-all-filters:hover {
text-decoration: underline;
}
.search-results-sidebar .see-all-filters::after {
content: " ??;
font-weight: bold;
}
.search-results-subheading {
font-size: 18px;
font-weight: 600;
}
.search-results-list {
margin-bottom: 25px;
}
.search-results-list>li {
padding: 20px 0;
}
.search-results-list>li:first-child {
border-top: 1px solid var(--border);
}
.search-results .no-results {
display: flex;
flex-direction: column;
align-items: center;
padding-top: 4rem;
}
.search-results .no-results .headline {
color: #2F3941;
font-weight: 400;
font-size: 18px;
line-height: 24px;
letter-spacing: -0.45px;
}
.search-results .no-results .action-prompt {
color: #68737D;
font-weight: 400;
font-size: 14px;
line-height: 20px;
letter-spacing: -0.154px;
}
.search-results .no-results .action-prompt a {
color: #1F73B7;
}
.search-results .no-results .action-prompt a:visited {
color: #1F73B7;
}
.search-result-title-container {
display: flex;
justify-content: space-between;
align-items: center;
}
.search-result-title {
font-size: 16px;
margin-bottom: 0;
}
.search-result-votes,
.search-result-meta-count {
color: #5a6d7c;
font-size: 13px;
}
.search-result-votes-icon,
.search-result-meta-count-icon {
color: #17494D;
vertical-align: middle;
width: 13px;
height: 13px;
}
[dir=ltr] .search-result-votes,
[dir=ltr] .search-result-meta-count {
margin-left: 20px;
}
[dir=rtl] .search-result-votes,
[dir=rtl] .search-result-meta-count {
margin-right: 20px;
}
.search-result-meta-container {
color: var(--muted);
display: flex;
flex-direction: column;
}
@media (min-width: 1024px) {
.search-result-meta-container {
flex-direction: row;
align-items: center;
}
}
@media (min-width: 1024px) {
.search-result-meta-container nav {
flex: 1;
}
}
@media (min-width: 1024px) {
[dir=ltr] .search-result-meta-container .meta-data {
margin-left: 20px;
}
}
@media (min-width: 1024px) {
[dir=rtl] .search-result-meta-container .meta-data {
margin-right: 20px;
}
}
.search-result-meta-container .meta-data::after {
content: none;
}
.search-result-breadcrumbs {
margin: 0;
}
.search-result-description {
margin-top: 10px;
margin-bottom: 0;
word-break: break-word;
}
.search-results-description em {
font-style: normal;
font-weight: bold;
}
html[lang|=zh] .search-results-description em {
font-style: normal;
background: yellow;
}
.notification {
border: 1px solid;
display: table;
font-family: sans-serif;
font-size: 12px;
padding: 13px 15px;
transition: height 0.2s;
width: 100%;
color: #555;
}
.notification a {
color: #158ec2;
}
.notification-inner {
margin: 0 auto;
padding: 0 20px;
max-width: 980px;
}
.notification-icon,
.notification-inline.notification-error::before,
.notification-text,
.notification-dismiss {
display: table-cell;
vertical-align: middle;
}
.notification-text {
padding: 0 15px;
width: 100%;
}
.notification+.notification {
margin-bottom: -1px;
position: relative;
top: -1px;
}
.notification-error {
background: #ffeded;
border-color: #f7cbcb;
}
.notification-error .notification-icon::before,
.notification-error .notification-inline.notification-error::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' focusable='false' viewBox='0 0 12 12'%3E%3Cg fill='none' stroke='%23555555'%3E%3Ccircle cx='5.5' cy='6.5' r='5'/%3E%3Cpath stroke-linecap='round' d='M5.5 3.5v3'/%3E%3C/g%3E%3Ccircle cx='5.5' cy='9' r='1' fill='%23555555'/%3E%3C/svg%3E");
}
.notification-notice {
background: #dbf3ff;
border-color: #b5e0f5;
}
.notification-notice .notification-icon::before,
.notification-notice .notification-inline.notification-error::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' focusable='false' viewBox='0 0 12 12'%3E%3Cg fill='none' stroke='%23555555'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3.5 6l2 2L9 4.5'/%3E%3Ccircle cx='6' cy='6' r='5.5'/%3E%3C/g%3E%3C/svg%3E");
}
.notification-alert {
color: #ad5e18;
background: #fff8ed;
border-color: #fcdba9;
}
.notification-alert .notification-icon::before,
.notification-alert .notification-inline.notification-error::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' focusable='false' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23ad5e18' stroke-linecap='round' d='M5.06 1.27l-4.5 8.5c-.18.33.06.73.44.73h9c.38 0 .62-.4.44-.73l-4.5-8.5a.494.494 0 00-.88 0zM5.5 4v2'/%3E%3Ccircle cx='5.5' cy='8' r='.8' fill='%23ad5e18'/%3E%3C/svg%3E");
}
.notification-icon::before,
.notification-inline.notification-error::before {
background-size: cover;
content: "";
display: inline-block;
height: 14px;
width: 14px;
vertical-align: middle;
}
.notification-dismiss,
a.notification-dismiss {
color: #555;
cursor: pointer;
opacity: 0.6;
transition: opacity 100ms ease;
text-decoration: none !important;
}
.notification-dismiss:hover {
opacity: 1;
}
.notification-inline {
border-radius: 4px;
line-height: 14px;
margin-top: 5px;
padding: 5px;
position: relative;
text-align: left;
vertical-align: middle;
}
[dir=rtl] .notification-inline {
text-align: right;
}
.notification-inline[aria-hidden=true] {
display: none;
}
.notification-inline.notification-error::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' focusable='false' viewBox='0 0 12 12'%3E%3Cg fill='none' stroke='%23e35b66'%3E%3Ccircle cx='5.5' cy='6.5' r='5'/%3E%3Cpath stroke-linecap='round' d='M5.5 3.5v3'/%3E%3C/g%3E%3Ccircle cx='5.5' cy='9' r='1' fill='%23e35b66'/%3E%3C/svg%3E");
margin: -2px 5px 0 0;
}
[dir=rtl] .notification-inline.notification-error::before {
margin: 0 0 0 5px;
}
.notification-inline.notification-error {
background-color: #fff0f1;
border: 1px solid #e35b66;
color: #cc3340;
}
.notification-inline.notification-large {
padding: 13px 15px;
margin-bottom: 25px;
}
.notification-left-aligned {
text-align: left;
padding-left: 0;
}
html[dir=rtl] .notification-left-aligned {
text-align: right;
padding-left: auto;
padding-right: 0;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-toggle {
cursor: pointer;
background: none;
border: 0;
display: inline-block;
padding: 0;
text-align: initial;
vertical-align: middle;
}
.dropdown-toggle:hover {
text-decoration: none;
}
.dropdown-toggle>* {
display: inline-block;
}
.dropdown-toggle[aria-expanded=true]+.dropdown-menu {
display: block;
}
.dropdown-menu {
background: var(--surface);
border: 1px solid #d8dcde;
border-radius: 3px;
box-shadow: 0px 20px 30px 0px rgba(23, 73, 77, 0.15);
display: none;
font-size: 14px;
font-style: normal;
font-weight: normal;
left: 0;
margin-top: 1px;
min-width: 170px;
padding: 10px 0;
position: absolute;
text-align: left;
z-index: 1000;
}
[dir=rtl] .dropdown-menu {
text-align: right;
}
.dropdown-menu [role=separator] {
border-bottom: 1px solid #e9ebed;
margin: 4px 0;
}
.dropdown-menu [role=menuitem],
.dropdown-menu [role=menuitemradio] {
color: #2f3941;
cursor: pointer;
display: block;
padding: 7px 40px 7px 20px;
white-space: nowrap;
background-color: transparent;
border: 0;
-webkit-appearance: none;
text-align: start;
line-height: inherit;
width: 100%;
}
[dir=rtl] .dropdown-menu [role=menuitem],
[dir=rtl] .dropdown-menu [role=menuitemradio] {
padding: 7px 20px 7px 40px;
}
.dropdown-menu [role=menuitem]:hover,
.dropdown-menu [role=menuitem]:focus,
.dropdown-menu [role=menuitemradio]:hover,
.dropdown-menu [role=menuitemradio]:focus {
background: rgba(31, 115, 183, 0.08);
text-decoration: none;
color: #2f3941;
}
.dropdown-menu [role=menuitem][aria-selected=true],
.dropdown-menu [role=menuitem][aria-checked=true],
.dropdown-menu [role=menuitemradio][aria-selected=true],
.dropdown-menu [role=menuitemradio][aria-checked=true] {
cursor: default;
}
.dropdown-menu [role=menuitem][aria-selected=true]::after,
.dropdown-menu [role=menuitem][aria-checked=true]::after,
.dropdown-menu [role=menuitemradio][aria-selected=true]::after,
.dropdown-menu [role=menuitemradio][aria-checked=true]::after {
content: "";
background-image: url("data:image/svg+xml,%3Csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M1 7l3 3 7-7'%3E%3C/path%3E%3C/svg%3E");
display: inline-block;
height: 12px;
margin-left: 10px;
width: 12px;
}
[dir=rtl] .dropdown-menu [role=menuitem][aria-selected=true]::after,
[dir=rtl] .dropdown-menu [role=menuitem][aria-checked=true]::after,
[dir=rtl] .dropdown-menu [role=menuitemradio][aria-selected=true]::after,
[dir=rtl] .dropdown-menu [role=menuitemradio][aria-checked=true]::after {
margin-left: 0;
margin-right: 10px;
float: left;
}
.dropdown-menu [role=menuitem][hidden],
.dropdown-menu [role=menuitem][aria-hidden=true],
.dropdown-menu [role=menuitemradio][hidden],
.dropdown-menu [role=menuitemradio][aria-hidden=true] {
display: none !important;
}
.dropdown-menu-end {
left: auto;
right: 0;
}
.dropdown-menu-top {
bottom: 100%;
margin-bottom: 1px;
}
[dir=rtl] .dropdown-menu {
left: auto;
right: 0;
text-align: right;
}
[dir=rtl] .dropdown-menu-end {
left: 0;
right: auto;
}
.dropdown-chevron-icon {
vertical-align: middle;
}
.content-tags>p {
color: #68737D;
margin-top: 32px;
margin-bottom: 4px;
}
.content-tags-add-hint {
color: #68737D;
font-size: 14px;
}
.content-tag-list {
display: flex;
flex-wrap: wrap;
word-break: break-word;
}
.content-tag-list li {
border-right: 1px solid #C2C8CC;
margin-bottom: 4px;
}
[dir=ltr] .content-tag-list li {
padding-right: 8px;
margin-right: 8px;
}
[dir=rtl] .content-tag-list li {
padding-left: 8px;
margin-left: 8px;
}
.content-tag-list li:last-child {
border: none;
}
#hc-wysiwyg {
border: 1px solid #87929D;
}
.upload-dropzone {
border: 1px solid #87929D;
}
html body zd-summary-block,
html body .zd-summary-block {
display: block !important;
background: rgba(56, 189, 248, 0.07) !important;
border: 1px solid rgba(56, 189, 248, 0.28) !important;
border-radius: 14px !important;
padding: 18px 22px !important;
margin: 24px 0 !important;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
}
html body zd-summary-block *,
html body .zd-summary-block * {
color: #F8FAFC !important;
line-height: 1.65 !important;
font-size: 14.5px !important;
}
html body .article-body blockquote {
background: rgba(56, 189, 248, 0.06) !important;
border: 1px solid rgba(56, 189, 248, 0.25) !important;
border-radius: 12px !important;
padding: 16px 20px !important;
margin: 20px 0 !important;
color: #F8FAFC !important;
}
html body .article-body blockquote * {
color: inherit !important;
}
html body .article-body table {
background: rgba(15, 23, 42, 0.6) !important;
border: 1px solid rgba(255, 255, 255, 0.12) !important;
border-radius: 10px !important;
color: #F8FAFC !important;
}
html body .article-body th {
background: rgba(30, 41, 59, 0.9) !important;
color: #38BDF8 !important;
border-bottom: 1px solid rgba(56, 189, 248, 0.3) !important;
}
html body .article-body td {
color: #F8FAFC !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}
html body .article-body code {
background: rgba(56, 189, 248, 0.15) !important;
color: #38BDF8 !important;
padding: 2px 6px !important;
border-radius: 4px !important;
font-family: monospace !important;
}
html body .article-body kbd {
background: rgba(30, 41, 59, 0.9) !important;
border: 1px solid rgba(255, 255, 255, 0.2) !important;
color: #F8FAFC !important;
padding: 2px 6px !important;
border-radius: 4px !important;
}
html body .article-body .light-box,
html body .article-body .bg-light,
html body .article-body [style*="background: white"],
html body .article-body [style*="background: #fff"],
html body .article-body [style*="background-color: white"],
html body .article-body [style*="background-color: #fff"],
html body .article-body [style*="background: rgb(255"],
html body .article-body [style*="background-color: rgb(255"] {
background-color: #F8FAFC !important;
color: #0F172A !important;
border-radius: 10px !important;
}
html body .article-body .light-box *,
html body .article-body .bg-light *,
html body .article-body [style*="background: white"] *,
html body .article-body [style*="background: #fff"] *,
html body .article-body [style*="background-color: white"] *,
html body .article-body [style*="background-color: #fff"] *,
html body .article-body [style*="background: rgb(255"] *,
html body .article-body [style*="background-color: rgb(255"] * {
color: #0F172A !important;
}
.service-catalog-description {
display: flow-root;
}
.service-catalog-description a {
color: #1F73B7;
text-decoration: underline;
}
.service-catalog-description a:visited {
color: #9358B0;
}
.service-catalog-description a:hover,
.service-catalog-description a:active,
.service-catalog-description a:focus {
color: #0F3554;
}
.service-catalog-description img {
height: auto;
max-width: 100%;
}
.service-catalog-description p>img.image-style-align-left {
float: left;
margin: 8px 20px 6px 0;
}
.service-catalog-description p>img.image-style-align-right {
float: right;
margin: 8px 0px 6px 20px;
}
.service-catalog-description p>img.image-style-block-align-right {
margin-left: auto;
margin-right: 0;
}
.service-catalog-description p>img.image-style-block-align-left {
margin-left: 0;
margin-right: auto;
}
.service-catalog-description figure.image {
display: table;
margin: 0 auto;
}
.service-catalog-description figure.image>img {
display: block;
width: 100%;
}
.service-catalog-description figure.image.image-style-align-left {
float: left;
margin: 8px 20px 6px 0;
}
.service-catalog-description figure.image.image-style-align-right {
float: right;
margin: 8px 0px 6px 20px;
}
.service-catalog-description figure.image.image-style-block-align-right {
margin-left: auto;
margin-right: 0;
}
.service-catalog-description figure.image.image-style-block-align-left {
margin-left: 0;
margin-right: auto;
}
.service-catalog-description figcaption {
padding: 10px 0;
font-size: 12px;
text-align: center;
background-color: #f2f2f2;
}
.service-catalog-description ul,
.service-catalog-description ol {
padding-left: 20px;
list-style-position: outside;
margin: 20px 0 20px 20px;
}
[dir=rtl] .service-catalog-description ul,
[dir=rtl] .service-catalog-description ol {
padding-right: 20px;
padding-left: 0;
margin-left: 0;
margin-right: 20px;
}
.service-catalog-description ul>ul,
.service-catalog-description ol>ol,
.service-catalog-description ol>ul,
.service-catalog-description ul>ol,
.service-catalog-description li>ul,
.service-catalog-description li>ol {
margin: 0;
}
.service-catalog-description ul {
list-style-type: disc;
}
.service-catalog-description :not(pre)>code {
background: #f7f7f7;
border: 1px solid var(--border);
border-radius: 3px;
padding: 0 5px;
margin: 0 2px;
}
.service-catalog-description pre {
background: #f7f7f7;
border: 1px solid var(--border);
border-radius: 3px;
padding: 10px 15px;
overflow: auto;
white-space: pre;
}
.service-catalog-description blockquote {
border-left: 1px solid var(--border);
color: #5a6d7c;
font-style: italic;
padding: 0 15px;
}
.hub-hero {
margin: 24px 0 8px;
padding: 20px;
background: #f7fafc;
border-radius: 16px;
}
.hub-hero__title {
font-size: 24px;
font-weight: 700;
margin-bottom: 4px;
}
.hub-hero__subtitle {
color: #4a5568;
margin: 0 0 16px;
}
.quick-actions {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
.qa-card {
display: flex;
flex-direction: column;
gap: 4px;
padding: 14px;
border: 1px solid #e2e8f0;
border-radius: 14px;
background: var(--surface);
text-decoration: none;
}
.qa-card:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, .06);
transform: translateY(-1px);
}
.qa-emoji {
font-size: 20px;
line-height: 1;
}
.qa-title {
font-weight: 700;
color: #1a202c;
}
.qa-desc {
font-size: 13px;
color: #4a5568;
}
.quick-filters {
margin-top: 16px;
}
.chip-label {
font-size: 13px;
color: #4a5568;
margin: 10px 0 6px;
}
.chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.chip {
display: inline-block;
padding: 6px 10px;
border: 1px solid #e2e8f0;
border-radius: 999px;
font-size: 13px;
color: #1a202c;
text-decoration: none;
background: var(--surface);
}
.chip.is-active,
.chip:hover {
border-color: #3182ce;
box-shadow: 0 0 0 2px rgba(49, 130, 206, .15);
}
.hub-highlights {
margin: 20px 0 8px;
}
.hub-section-title {
font-size: 18px;
font-weight: 700;
margin: 0 0 10px;
}
.highlight-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
.highlight-card {
display: block;
border: 1px solid #e2e8f0;
border-radius: 14px;
padding: 14px;
text-decoration: none;
background: var(--surface);
}
.highlight-card:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, .06);
transform: translateY(-1px);
}
.hc-eyebrow {
font-size: 12px;
color: #718096;
text-transform: uppercase;
letter-spacing: .04em;
}
.hc-title {
font-weight: 700;
margin: 4px 0;
color: #1a202c;
}
.hc-desc {
font-size: 13px;
color: #4a5568;
}
@media (max-width: 1024px) {
.quick-actions {
grid-template-columns: repeat(2, 1fr);
}
.highlight-grid {
grid-template-columns: 1fr;
}
}
.section-headline {
display: flex;
justify-content: flex-end;
align-items: center;
margin: 4px 0 8px
}
.result-hint {
font-size: .85rem;
color: var(--muted)
}
.flat-cards {
list-style: none;
padding: 0;
margin: 8px 0;
display: grid;
grid-template-columns: 1fr;
gap: 8px
}
@media(min-width:768px) {
.flat-cards {
grid-template-columns: 1fr
}
}
@media(min-width:1200px) {
.flat-cards {
grid-template-columns: 1fr
}
}
.flat-cards.dense .flat-card {
padding: 10px 12px
}
.section-headline {
display: flex;
justify-content: flex-end;
align-items: center;
margin: 4px 0 8px
}
.result-hint {
font-size: .85rem;
color: var(--muted)
}
.flat-cards {
list-style: none;
padding: 0;
margin: 12px 0;
display: grid;
grid-template-columns: 1fr;
gap: 12px;
}
.flat-card {
position: relative;
border: 1px solid rgba(0, 0, 0, .08);
border-radius: 12px;
background: var(--surface);
box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
transition: box-shadow .2s ease, transform .12s ease;
}
.flat-card:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
transform: translateY(-2px);
}
.flat-link {
display: block;
padding: 8px 12px 36px;
text-decoration: none;
color: inherit;
}
.flat-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 4px;
background: var(--brand);
}
.promoted::before {
background: linear-gradient(180deg, #f59e0b, #ffb74d);
}
.flat-main {
min-width: 0;
}
.flat-title {
margin: 0 0 4px;
font-size: .95rem;
font-weight: 600;
line-height: 1.3;
color: var(--ink);
}
.flat-meta {
font-size: .75rem;
color: #555;
display: flex;
flex-wrap: wrap;
gap: 3px 6px;
}
.flat-meta .dot {
color: #bbb
}
.flat-date {
font-size: .75rem;
font-style: italic;
color: #0066cc;
}
.badge {
display: inline-block;
font-size: .7rem;
font-weight: 600;
border-radius: 6px;
padding: 2px 6px;
border: none;
box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
}
.badge-star {
background: #fff3da;
color: #b45309;
}
.badge-lock {
background: #f3e5f5;
color: #6a1b9a;
}
.flat-badges {
position: absolute;
right: 12px;
bottom: 12px;
display: flex;
gap: 6px;
}
.user-info.dropdown {
position: relative;
z-index: 1100;
}
.user-info .dropdown-menu {
position: absolute;
top: 100%;
right: 0;
min-width: 160px;
margin-top: 6px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
box-shadow: 0 10px 24px rgba(0, 0, 0, .08);
z-index: 1200;
max-height: 300px;
overflow-y: auto;
}
.header-language-selector {
position: relative !important;
}
.header-language-selector .dropdown-menu {
position: absolute !important;
top: calc(100% + 12px) !important;
right: 0 !important;
left: auto !important;
min-width: 180px !important;
background: rgba(10, 22, 34, 0.95) !important;
backdrop-filter: blur(16px) !important;
-webkit-backdrop-filter: blur(16px) !important;
border: 1px solid rgba(255, 255, 255, 0.15) !important;
border-radius: 12px !important;
padding: 8px !important;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
z-index: 2000 !important;
transition: opacity 0.25s ease, transform 0.25s ease !important;
}
.header-language-selector .dropdown-menu a {
display: flex !important;
align-items: center !important;
gap: 10px !important;
padding: 10px 14px !important;
color: #CBD5E1 !important;
font-size: 13.5px !important;
font-weight: 600 !important;
border-radius: 8px !important;
text-decoration: none !important;
white-space: nowrap !important;
transition: all 0.2s ease !important;
}
.header-language-selector .dropdown-menu a:hover {
background-color: rgba(255, 255, 255, 0.1) !important;
color: #FFFFFF !important;
transform: translateX(-3px) !important;
box-shadow: inset -3px 0 0 #EA0029 !important;
}
.header-language-selector .dropdown-menu a[aria-selected="true"],
.header-language-selector .dropdown-menu a[aria-checked="true"] {
color: #FFFFFF !important;
background-color: rgba(234, 0, 41, 0.2) !important;
font-weight: 700 !important;
}
@media (max-width: 1024px) {
.header-language-selector .dropdown-menu {
display: none !important;
width: 100%;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
padding: 16px;
margin-top: 10px;
z-index: 1200;
max-height: none;
overflow: visible;
}
@media (min-width: 441px) {
.header-language-selector .dropdown-menu {
position: relative;
box-shadow: none;
}
.nav-wrapper-mobile .header-language-selector,
.nav-wrapper-mobile .header-language-selector .dropdown-toggle {
justify-content: flex-start;
text-align: left;
}
.menu-list-mobile-items button,
.menu-list-mobile-items a {
justify-content: flex-start;
text-align: left;
padding-left: 24px;
padding-right: 24px;
}
}
@media (max-width: 440px) {
.header-language-selector .dropdown-menu {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
box-shadow: 0 15px 35px rgba(0, 0, 0, .15);
width: 300px;
max-width: 95vw;
}
.nav-wrapper-mobile .header-language-selector,
.nav-wrapper-mobile .header-language-selector .dropdown-toggle {
justify-content: center;
text-align: center;
}
.menu-list-mobile-items button,
.menu-list-mobile-items a {
justify-content: center;
text-align: center;
}
}
.header-language-selector .dropdown-menu[style*="display: block"],
.header-language-selector:has(.dropdown-toggle[aria-expanded="true"]) .dropdown-menu {
display: block !important;
}
.rl-body {
display: flex;
flex-direction: column;
gap: 16px;
}
.rl-group {
background: #f8f9fa;
border-radius: 10px;
padding: 12px;
border: 1px solid #edf2f7;
}
.rl-group-title {
font-size: 12px;
font-weight: 800;
color: #718096;
margin-bottom: 10px;
text-transform: uppercase;
letter-spacing: 0.05em;
display: flex;
align-items: center;
}
.rl-item {
display: block !important;
padding: 12px 14px !important;
background: var(--surface);
border: 1px solid #e2e8f0;
border-radius: 8px;
color: #2d3748 !important;
text-decoration: none;
font-weight: 600;
font-size: 14px;
margin-bottom: 8px;
text-align: left !important;
transition: all 0.2s ease;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}
.rl-item:last-child {
margin-bottom: 0;
}
.rl-item:hover {
background: #ebf8ff !important;
border-color: #3182ce !important;
color: #2b6cb0 !important;
transform: translateY(-1px);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}
.rl-item.is-current {
background: var(--brand) !important;
color: #ffffff !important;
border-color: #002C5F !important;
}
.rl-footer {
margin-top: 16px;
padding-top: 12px;
border-top: 1px solid #edf2f7;
}
.rl-notice {
font-size: 11px;
color: #a0aec0;
line-height: 1.5;
}
.nav-wrapper-mobile .header-language-selector {
display: flex;
position: relative;
width: 100%;
}
.nav-wrapper-mobile .header-language-selector .dropdown-toggle {
width: 100%;
display: flex;
align-items: center;
padding: 8px 24px;
}
}
.user-info .dropdown-toggle[aria-expanded="true"]+.dropdown-menu {
display: block !important;
}
.header-language-selector:has(.dropdown-toggle[aria-expanded="true"]) .dropdown-menu,
.user-info.dropdown:has(.dropdown-toggle[aria-expanded="true"]) .dropdown-menu {
display: block !important;
}
.nav-wrapper-desktop,
.user-nav {
overflow: visible;
}
.community-restricted {
display: none !important;
}
li.community-restricted.is-visible {
display: inline-block !important;
}
section.community-restricted.is-visible {
display: block !important;
}
.nav-wrapper-mobile .menu-list-mobile-items li.item.community-restricted.is-visible {
display: list-item !important;
}
.escalation-restricted {
display: none !important;
}
div.escalation-restricted.is-visible {
display: block !important;
}
body {
background: var(--bg);
color: var(--ink);
}
a {
color: var(--brand);
}
hr,
.container-divider,
.table tr,
.blocks-item-internal,
.section-list-item,
.article-sidebar,
.request-sidebar,
.breadcrumbs li+li::before {
border-color: var(--border);
}
.blocks-card-list .blocks-item,
.qcard,
.flat-card,
.support-cta-link {
background: var(--surface);
box-shadow: var(--shadow-1);
border: 1px solid var(--border);
}
.blocks-card-list .blocks-item:hover,
.qcard:hover,
.flat-card:hover,
.support-cta-link:hover {
background: var(--surface-hover);
box-shadow: var(--shadow-2);
}
.blocks-card-list .blocks-item-title,
.qcard-title,
.support-cta-title {
color: var(--ink);
}
.blocks-card-list .badge {
background: var(--brand);
color: var(--on-brand);
}
.section.hero.is-dark .hero-title {
color: var(--on-brand);
}
.navblocks-bar {
backdrop-filter: saturate(180%) blur(6px);
}
.search {
border-color: var(--border);
background: var(--surface);
}
.search input[type=search] {
color: var(--ink);
}
.search .clear-button {
color: var(--muted);
}
.search .clear-button:hover {
background: var(--brand);
color: var(--on-brand);
}
.search-icon {
color: var(--muted);
}
.table tr {
border-bottom: 1px solid var(--border);
}
.blocks-item-internal {
border-color: var(--border);
}
.footer {
border-top: 1px solid var(--border);
}
.navblocks-bar {
border-bottom: 1px solid var(--border);
}
.notification {
color: var(--ink);
}
@media (max-width: 768px) {
.hero {
height: auto;
padding: 28px 16px 18px;
text-align: center;
background-position: center top;
}
.hero-inner {
top: auto;
transform: none;
max-width: none;
margin: 0;
}
.hero-title {
font-size: clamp(20px, 5.6vw, 28px);
}
.search-wrap {
margin-top: 12px;
}
}
@media (max-width: 860px) {
.hero2-quick .qgrid {
flex-direction: column;
gap: 10px;
}
.qcard {
padding: 14px 14px;
}
.qcard-ico svg {
width: 40px;
height: 40px;
}
.qcard-title {
font-size: 16px;
}
}
.navblocks-list {
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
}
.navblocks-item {
scroll-snap-align: start;
}
.navblocks-link {
min-height: 44px;
}
@media (max-width: 600px) {
.blocks-list.blocks-card-list {
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 12px;
}
.blocks-card-list .blocks-item-link {
min-height: 170px;
padding: 14px;
gap: 8px;
}
.blocks-card-list .blocks-item-link img {
max-width: 180px;
max-height: 90px;
}
.blocks-card-list .blocks-item-title {
font-size: 16px;
}
}
@media (max-width: 768px) {
.flat-cards {
gap: 10px;
}
.flat-link {
padding: 10px 12px 32px;
}
.flat-title {
font-size: .95rem;
}
}
@media (max-width: 768px) {
.sub-nav {
gap: 12px 16px;
margin-bottom: 28px;
}
.breadcrumbs {
font-size: 13px;
}
}
@media (max-width: 768px) {
.support-cta-row {
grid-template-columns: 1fr;
}
.support-cta-link {
padding: 14px 16px;
}
}
@media (max-width: 1024px) {
.quick-actions {
grid-template-columns: repeat(2, 1fr);
}
.highlight-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 480px) {
.qa-card {
padding: 12px;
}
.hc-title {
font-size: 15px;
}
.hc-desc {
font-size: 12px;
}
}
@media (max-width: 480px) {
:root {
--search-ico: 20px;
--search-gap: 12px;
--search-pad-extra: 8px;
}
}
@media (max-width: 768px) {
.header {
z-index: 9999;
}
.nav-wrapper-mobile .menu-list-mobile {
z-index: 9999;
}
.user-info .dropdown-menu {
z-index: 1200;
}
}
.header-language-selector .rl-group-title {
padding: 8px 12px 4px;
font-size: 12px;
opacity: .7;
pointer-events: none;
}
.header-language-selector .rl-item {
display: block;
padding: 8px 12px 8px 22px;
text-decoration: none;
}
.header-language-selector .rl-item.is-current {
font-weight: 600;
cursor: default;
}
.site-logo .logo-dark {
display: none;
}
.notice-page {
padding: 32px 0 60px;
}
.notice-page .page-header {
margin-bottom: 48px;
text-align: center;
}
.notice-page .page-header h1 {
color: var(--ink);
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 12px;
letter-spacing: -0.02em;
}
.notice-page .page-header-description {
color: var(--muted);
font-size: 1.125rem;
margin: 0;
line-height: 1.6;
}
.notice-controls {
margin-bottom: 40px;
}
.notice-filters {
margin-bottom: 28px;
}
.notice-filters .filter-title {
font-size: 0.9375rem;
font-weight: 700;
color: var(--ink);
margin: 0 0 16px 0;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.filter-buttons {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.filter-btn {
background: var(--surface);
border: 2px solid var(--border);
border-radius: 12px;
padding: 12px 24px;
font-size: 0.9375rem;
font-weight: 600;
color: var(--ink);
cursor: pointer;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
display: inline-flex;
align-items: center;
gap: 8px;
}
.filter-btn:hover {
background: var(--surface-hover);
border-color: var(--brand);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.filter-btn.active {
background: var(--brand);
color: var(--on-brand);
border-color: var(--brand);
box-shadow: 0 4px 16px rgba(127, 176, 255, 0.3);
}
.filter-btn .filter-count {
opacity: 0.8;
font-size: 0.875em;
font-weight: 700;
}
.notice-toolbar {
display: flex;
flex-direction: column;
gap: 16px;
}
@media (min-width: 768px) {
.notice-toolbar {
flex-direction: row;
justify-content: space-between;
align-items: center;
}
}
.notice-search-wrapper {
position: relative;
flex: 1;
max-width: 100%;
}
@media (min-width: 768px) {
.notice-search-wrapper {
max-width: 460px;
}
}
.notice-search-icon {
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
color: var(--muted);
pointer-events: none;
}
.notice-search-input {
width: 100%;
padding: 14px 16px 14px 48px;
border: 2px solid var(--border);
border-radius: 12px;
background: var(--surface);
color: var(--ink);
font-size: 1rem;
font-weight: 500;
transition: all 0.25s ease;
}
.notice-search-input:focus {
outline: none;
border-color: var(--brand);
box-shadow: 0 0 0 4px rgba(127, 176, 255, 0.12);
}
.notice-search-input::placeholder {
color: var(--muted);
font-weight: 400;
}
.notice-sort {
display: flex;
align-items: center;
gap: 12px;
}
.notice-sort .sort-label {
font-size: 0.9375rem;
font-weight: 600;
color: var(--ink);
white-space: nowrap;
}
.notice-sort .sort-select {
padding: 12px 40px 12px 16px;
border: 2px solid var(--border);
border-radius: 12px;
background: var(--surface);
color: var(--ink);
font-size: 0.9375rem;
font-weight: 500;
cursor: pointer;
transition: all 0.25s ease;
}
.notice-sort .sort-select:hover {
border-color: var(--brand);
}
.notice-sort .sort-select:focus {
outline: none;
border-color: var(--brand);
box-shadow: 0 0 0 4px rgba(127, 176, 255, 0.12);
}
.notice-loading {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 80px 20px;
color: var(--muted);
}
.notice-loading[hidden] {
display: none !important;
}
.loading-spinner {
width: 48px;
height: 48px;
border: 4px solid var(--border);
border-top-color: var(--brand);
border-radius: 50%;
animation: spin 0.8s linear infinite;
margin-bottom: 20px;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.notice-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 80px 20px;
color: var(--muted);
text-align: center;
}
.notice-empty[hidden] {
display: none !important;
}
.notice-empty svg {
margin-bottom: 20px;
opacity: 0.5;
}
.notice-empty p {
font-size: 1.125rem;
font-weight: 500;
}
.notice-list {
display: flex;
flex-direction: column;
gap: 24px;
margin-bottom: 48px;
}
.notice-card {
background: var(--surface);
border: 2px solid var(--border);
border-radius: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
overflow: hidden;
}
.notice-card:hover {
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
transform: translateY(-4px);
border-color: var(--brand);
}
.notice-card-link {
display: block;
padding: 32px;
text-decoration: none;
color: inherit;
}
.notice-card-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 16px;
gap: 12px;
}
.notice-card-badges {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
font-size: 0.875rem;
min-width: 0;
}
.notice-category,
.notice-section {
display: inline-block;
padding: 6px 14px;
border-radius: 8px;
font-weight: 700;
font-size: 0.8125rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.notice-category {
background: var(--brand);
color: var(--on-brand);
box-shadow: 0 2px 8px rgba(127, 176, 255, 0.25);
}
.notice-section {
background: rgba(127, 176, 255, 0.15);
color: var(--brand);
border: 2px solid rgba(127, 176, 255, 0.3);
}
.notice-date {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--muted);
font-weight: 500;
}
.notice-date svg {
flex-shrink: 0;
}
.notice-card-title {
font-size: 1.5rem;
font-weight: 700;
color: var(--ink);
margin: 0 0 20px 0;
line-height: 1.4;
letter-spacing: -0.02em;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.notice-card:hover .notice-card-title {
color: var(--brand);
}
.notice-card-footer {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 12px;
padding-top: 16px;
border-top: 1px solid var(--border);
}
.notice-card-author {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.9375rem;
color: var(--muted);
font-weight: 600;
min-width: 0;
}
.notice-card-author svg {
flex-shrink: 0;
opacity: 0.7;
}
.notice-card-dates {
display: flex;
align-items: center;
gap: 16px;
font-size: 0.9375rem;
color: var(--muted);
font-weight: 500;
flex-shrink: 0;
}
.notice-card-dates > span {
display: inline-flex;
align-items: center;
gap: 6px;
}
.notice-card-dates svg {
flex-shrink: 0;
opacity: 0.7;
}
.notice-updated {
color: #059669;
font-weight: 600;
}
.notice-status-badge {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px;
border-radius: 6px;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
line-height: 1.4;
white-space: nowrap;
flex-shrink: 0;
}
.notice-status-badge svg {
flex-shrink: 0;
}
.notice-status-badge--draft {
background-color: #FFF3E0;
color: #E65100;
border: 1.5px solid #FFB74D;
}
.notice-status-badge--apo {
background-color: #E3F2FD;
color: #1565C0;
border: 1.5px solid #64B5F6;
}
.notice-card--draft {
border-left: 4px solid #FFB74D;
}
.notice-card--apo {
border-left: 4px solid #64B5F6;
}
.notice-status-badge--featured {
background-color: #EDE9FE;
color: #7C3AED;
border: 1.5px solid #A78BFA;
}
.notice-card--featured {
border-left: 4px solid #A78BFA;
}
.section-container {
display: flex;
gap: 48px;
align-items: flex-start;
}
.section-sidebar {
flex: 0 0 220px;
position: sticky;
top: 120px;
max-height: calc(100vh - 140px);
overflow-y: auto;
}
.section-sidebar-nav {
background: transparent;
border: none;
border-radius: 0;
padding: 0;
}
.section-sidebar-title {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.95rem;
font-weight: 700;
color: var(--ink);
margin: 0 0 16px;
padding: 0 0 0 2px;
border-bottom: none;
}
.section-sidebar-title svg {
flex-shrink: 0;
color: #1565C0;
opacity: 0.8;
}
.section-sidebar-title a {
color: inherit;
text-decoration: none;
}
.section-sidebar-title a:hover {
color: #1565C0;
}
.section-sidebar-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0;
border-left: 2px solid #E5E7EB;
}
.section-sidebar-item {
border-radius: 0;
}
.section-sidebar-link {
display: block;
padding: 9px 16px;
margin-left: -2px;
font-size: 0.875rem;
color: #6B7280;
text-decoration: none;
border-left: 2px solid transparent;
transition: color 0.15s ease, border-color 0.15s ease;
line-height: 1.45;
}
.section-sidebar-link:hover {
color: #1565C0;
border-left-color: #93C5FD;
background: transparent;
}
.section-sidebar-item.is-current .section-sidebar-link {
color: #1565C0;
font-weight: 600;
border-left-color: #1565C0;
background: transparent;
}
.section-sidebar-loading {
font-size: 0.8rem;
color: #9CA3AF;
padding: 9px 16px;
}
.section-sidebar-empty {
font-size: 0.8rem;
color: #9CA3AF;
padding: 9px 16px;
}
.section-sidebar-row {
display: flex;
align-items: center;
}
.section-sidebar-row .section-sidebar-link {
flex: 1;
min-width: 0;
}
.section-sidebar-toggle {
flex-shrink: 0;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: none;
cursor: pointer;
color: #9CA3AF;
border-radius: 4px;
transition: color 0.15s ease, transform 0.2s ease;
padding: 0;
}
.section-sidebar-toggle:hover {
color: #1565C0;
background: rgba(21, 101, 192, 0.06);
}
.section-sidebar-toggle svg {
transition: transform 0.2s ease;
}
.section-sidebar-toggle.is-open svg {
transform: rotate(180deg);
}
.section-sidebar-children {
list-style: none;
padding: 0;
margin: 0;
overflow: hidden;
max-height: 0;
transition: max-height 0.25s ease;
}
.section-sidebar-children.is-open {
max-height: 500px;
}
.section-sidebar-child .section-sidebar-link {
padding-left: 28px;
font-size: 0.825rem;
border-left-color: transparent;
}
.section-content {
flex: 1;
min-width: 0;
}
@media (max-width: 768px) {
.section-container {
flex-direction: column;
gap: 20px;
}
.section-sidebar {
flex: none;
width: 100%;
position: static;
max-height: none;
}
.section-sidebar-list {
border-left: none;
flex-direction: row;
flex-wrap: wrap;
gap: 4px;
}
.section-sidebar-link {
border-left: none;
margin-left: 0;
padding: 6px 12px;
border-radius: 20px;
border: 1px solid #E5E7EB;
}
.section-sidebar-link:hover {
border-color: #93C5FD;
background: #EFF6FF;
}
.section-sidebar-item.is-current .section-sidebar-link {
border-color: #1565C0;
background: #EFF6FF;
}
}
.flat-cards {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.flat-cards.dense {
gap: 8px;
}
.flat-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
overflow: hidden;
transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.flat-card:hover {
border-color: #D1D5DB;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
.flat-card.promoted {
border-left: 4px solid #A78BFA;
}
.flat-link {
display: flex;
flex-direction: column;
padding: 20px 24px;
text-decoration: none;
color: inherit;
gap: 14px;
}
.flat-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.flat-main {
flex: 1;
min-width: 0;
}
.flat-title {
font-size: 1.05rem;
font-weight: 600;
color: var(--ink);
margin: 0;
line-height: 1.4;
}
.flat-card:hover .flat-title {
color: #1565C0;
}
.flat-meta {
font-size: 0.875rem;
color: #6B7280;
}
.flat-badges {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
position: static;
}
.flat-footer {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 12px;
padding-top: 14px;
border-top: 1px solid #F0F0F0;
}
.flat-author {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.875rem;
color: #6B7280;
font-weight: 600;
}
.flat-author svg {
flex-shrink: 0;
opacity: 0.7;
}
.flat-stats {
display: flex;
align-items: center;
gap: 16px;
font-size: 0.875rem;
color: #6B7280;
}
.flat-stat {
display: inline-flex;
align-items: center;
gap: 5px;
}
.flat-stat svg {
flex-shrink: 0;
opacity: 0.7;
}
.flat-stat--updated {
color: #059669;
font-weight: 600;
}
.notice-pagination {
display: flex;
justify-content: center;
margin-top: 48px;
}
.pagination {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
justify-content: center;
}
.pagination-btn {
min-width: 44px;
height: 44px;
padding: 0 16px;
background: var(--surface);
border: 2px solid var(--border);
border-radius: 12px;
color: var(--ink);
font-size: 0.9375rem;
font-weight: 600;
cursor: pointer;
transition: all 0.25s ease;
display: inline-flex;
align-items: center;
justify-content: center;
}
.pagination-btn:hover:not(.active) {
background: var(--surface-hover);
border-color: var(--brand);
transform: translateY(-2px);
}
.pagination-btn.active {
background: var(--brand);
color: var(--on-brand);
border-color: var(--brand);
cursor: default;
box-shadow: 0 4px 12px rgba(127, 176, 255, 0.3);
}
.pagination-ellipsis {
padding: 0 6px;
color: var(--muted);
user-select: none;
font-weight: 600;
}
@media (max-width: 1024px) {
.notice-page .page-header h1 {
font-size: 2rem;
}
.notice-card-link {
padding: 28px;
}
.notice-card-title {
font-size: 1.375rem;
}
}
@media (max-width: 640px) {
.notice-page {
padding: 24px 0 40px;
}
.notice-page .page-header {
margin-bottom: 32px;
}
.notice-page .page-header h1 {
font-size: 1.75rem;
}
.notice-page .page-header-description {
font-size: 1rem;
}
.notice-card {
border-radius: 16px;
}
.notice-card-link {
padding: 24px;
}
.notice-card-title {
font-size: 1.25rem;
}
.notice-card-dates,
.notice-card-author {
font-size: 0.875rem;
}
.notice-card-dates {
gap: 12px;
}
.filter-buttons {
gap: 8px;
}
.filter-btn {
padding: 10px 18px;
font-size: 0.875rem;
}
.pagination-btn {
min-width: 40px;
height: 40px;
padding: 0 12px;
font-size: 0.875rem;
}
.notice-list {
gap: 20px;
}
}
.container-notice-full {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
background: var(--surface);
}
.container-notice-full .sub-nav {
width: 100%;
max-width: 1160px;
padding: 20px 0;
display: flex;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
}
.section-container.notice-full-width {
width: 100%;
max-width: 1160px;
margin: 0 auto;
padding: 0;
box-sizing: border-box;
}
.section-content.notice-page {
width: 100%;
padding: 0;
}
@media (max-width: 1160px) {
.container-notice-full .sub-nav,
.section-container.notice-full-width {
padding-left: 20px;
padding-right: 20px;
}
}
.notice-draft {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
background-color: #fee2e2;
color: #ef4444;
border-radius: 4px;
font-size: 12px;
font-weight: 600;
margin-left: 8px;
vertical-align: middle;
}
.notice-draft svg {
width: 12px;
height: 12px;
}
.article-app-notice .article {
flex: 1 0 100%;
max-width: 100%;
padding: 0;
}
@media print {
.article-body figure,
.article-body .wysiwyg-table {
display: block !important;
float: none !important;
overflow: visible !important;
height: auto !important;
margin-bottom: 30px !important;
max-height: none !important;
}
.article-body h2,
.article-body h3 {
clear: both !important;
margin-top: 20px !important;
position: relative !important;
background: var(--surface);
}
tr {
page-break-inside: avoid;
break-inside: avoid;
}
}
@charset "UTF-8";
@font-face {
font-family: 'NanumSquare';
font-weight: 800;
src: url(./NanumSquare-Eb.woff2) format('woff2'),
url(./NanumSquare-Eb.woff) format('woff');
}
@font-face {
font-family: 'Pretendard';
font-weight: 400;
src: url(./Pretendard-R.woff2) format('woff2'),
url(./Pretendard-R.woff) format('woff');
}
@font-face {
font-family: 'Pretendard';
font-weight: 600;
src: url(./Pretendard-Sb.woff2) format('woff2'),
url(./Pretendard-Sb.woff) format('woff');
}
@font-face {
font-family: 'Pretendard';
font-weight: 500;
src: url(./Pretendard-M.woff2) format('woff2'),
url(./Pretendard-M.woff) format('woff');
}
@font-face {
font-family: 'Pretendard';
font-weight: 700;
src: url(./Pretendard-B.woff2) format('woff2'),
url(./Pretendard-B.woff) format('woff');
}
@font-face {
font-family: 'Pretendard';
font-weight: 800;
src: url(./Pretendard-Eb.woff2) format('woff2'),
url(./Pretendard-Eb.woff) format('woff');
}
@font-face {
font-family: 'Pretendard';
font-weight: 900;
src: url(./Pretendard-Bk.woff2) format('woff2'),
url(./Pretendard-Bk.woff) format('woff');
}
@charset "UTF-8";
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body,
html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
body {
font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
background-color: var(--bg-surface);
color: var(--text-main);
line-height: 1.6;
}
@charset "UTF-8";
.main-wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.nav {
background: var(--brand);
color: white;
padding: 1rem 1.5rem;
position: relative;
flex-shrink: 0;
width: 100%;
top: 0;
z-index: 1000;
display: flex;
justify-content: space-between;
align-items: center;
}
.nav h1 {
font-size: 1.5rem;
font-weight: 700;
letter-spacing: -0.025em;
}
.nav-buttons {
display: flex;
gap: 10px;
margin-left: auto;
}
.nav .shortcut {
font-size: 0.875rem;
color: white;
background: rgba(255, 255, 255, 0.15);
padding: 0.5rem 1rem;
border: 1px solid white;
border-radius: 6px;
backdrop-filter: blur(10px);
cursor: pointer;
transition: all 0.2s ease;
outline: none;
}
.nav .shortcut:hover {
background: rgba(255, 255, 255, 0.3);
transform: translateY(-1px);
}
.nav-right {
display: flex;
align-items: center;
gap: 20px;
margin-left: auto;
}
.nav-utils {
display: flex;
align-items: center;
gap: 15px;
border-left: 1px solid rgba(255, 255, 255, 0.3);
padding-left: 20px;
}
.lang-select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: transparent;
color: white;
border: 1px solid rgba(255, 255, 255, 0.5);
padding: 8px 30px 8px 12px;
font-size: 0.8rem;
cursor: pointer;
outline: none;
border-radius: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: calc(100% - 8px) center;
background-size: 12px;
}
.lang-select option {
color: black;
}
.logout-btn {
font-size: 0.875rem;
color: white;
background: transparent;
border: none;
cursor: pointer;
text-decoration: underline;
opacity: 0.8;
transition: opacity 0.2s;
}
.logout-btn:hover {
opacity: 1;
}
.footer {
background: #f8f9fa;
color: var(--muted);
padding: 2rem;
border-top: 1px solid #eee;
width: 100%;
position: relative;
bottom: 0;
flex-shrink: 0;
}
.footer-content {
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
}
.footer-content p {
font-size: 0.875rem;
margin: 0;
}
@media (max-width: 768px) {
.nav {
flex-direction: column;
gap: 0.75rem;
}
.footer-content {
flex-direction: column;
text-align: center;
}
}
@charset "UTF-8";
.container {
width: 100%;
}
.form-card {
background: var(--surface);
border-radius: var(--radius);
box-shadow: var(--shadow-lg);
padding: 2rem;
margin-bottom: 2rem;
}
.form-header {
margin-bottom: 1.5rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid var(--border);
}
.form-header h1 {
margin: 0 0 0.5rem 0;
font-size: 2rem;
font-weight: 700;
color: var(--brand);
}
.form-header p {
margin: 0;
color: var(--text-muted);
font-size: 1rem;
}
.section {
margin-bottom: 1.5rem;
}
.section-title {
font-size: 1.25rem;
font-weight: 700;
margin-bottom: 0.8rem;
color: var(--text-main);
display: flex;
align-items: center;
gap: 0.5rem;
}
.section-subtitle {
font-size: 0.9rem;
color: var(--text-muted);
margin-bottom: 1.2rem;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
@media (max-width: 768px) {
.form-row {
grid-template-columns: 1fr;
}
}
.form-label {
display: block;
font-weight: 600;
margin-bottom: 0.5rem;
color: var(--text-main);
font-size: 0.9375rem;
}
.required {
color: var(--warning);
margin-left: 0.25rem;
}
.form-input {
width: 100%;
padding: 0.875rem 1rem;
border: 1px solid var(--border);
border-radius: 8px;
font-size: 0.9375rem;
font-family: inherit;
transition: all 0.2s;
background: var(--surface);
color: var(--text-main);
}
.form-input:focus {
outline: none;
border-color: var(--brand);
box-shadow: 0 0 0 3px rgba(0, 44, 95, 0.1);
}
.form-input:disabled {
background: var(--bg-light);
cursor: not-allowed;
opacity: 0.7;
}
textarea.form-input {
min-height: 150px;
resize: vertical;
font-family: inherit;
}
.checkbox-group {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 1rem;
}
.checkbox-card {
position: relative;
background: var(--surface);
border: 2px solid var(--border);
border-radius: 8px;
padding: 1rem;
cursor: pointer;
transition: all 0.2s;
display: flex;
align-items: center;
gap: 0.75rem;
}
.checkbox-card:hover {
border-color: var(--brand);
background: rgba(0, 44, 95, 0.02);
transform: translateY(-2px);
box-shadow: var(--shadow);
}
.checkbox-card input[type="checkbox"] {
width: 20px;
height: 20px;
cursor: pointer;
accent-color: var(--brand);
}
.checkbox-card.checked {
border-color: var(--brand);
background: rgba(0, 44, 95, 0.05);
}
.checkbox-label {
font-weight: 500;
color: var(--text-main);
cursor: pointer;
flex: 1;
}
.file-upload-area {
border: 2px dashed var(--border);
border-radius: 8px;
padding: 2rem;
text-align: center;
transition: all 0.2s;
background: var(--surface);
cursor: pointer;
}
.file-upload-area:hover {
border-color: var(--brand);
background: rgba(0, 44, 95, 0.02);
}
.file-upload-area.dragover {
border-color: var(--brand);
background: rgba(0, 44, 95, 0.05);
}
.file-upload-icon {
color: var(--text-muted);
margin-bottom: 1rem;
}
.file-input-hidden {
display: none;
}
.file-list {
margin-top: 1rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.file-item {
display: flex;
align-items: center;
justify-content: space-between;
background: var(--bg-light);
padding: 0.75rem 1rem;
border-radius: 6px;
font-size: 0.875rem;
}
.file-item-name {
display: flex;
align-items: center;
gap: 0.5rem;
color: var(--text-main);
}
.remove-file {
background: none;
border: none;
color: var(--text-muted);
cursor: pointer;
padding: 0.25rem;
transition: color 0.2s;
}
.remove-file:hover {
color: #ef4444;
}
.btn {
padding: 1rem 1.5rem;
border-radius: 8px;
font-weight: 700;
font-size: 1rem;
cursor: pointer;
transition: all 0.2s;
border: none;
font-family: inherit;
height: 47px;
align-items: center;
}
.btn-primary {
background: var(--brand);
color: white;
}
.btn-primary:hover {
background: var(--brand-hover);
transform: translateY(-1px);
box-shadow: var(--shadow-lg);
}
.btn-secondary {
background: var(--gsw-primary);
color: white;
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
}
.btn-secondary:hover {
background: #999;
transform: translateY(-1px);
box-shadow: var(--shadow-lg);
}
.form-actions {
display: flex;
gap: 1rem;
justify-content: flex-end;
}
.help-text {
font-size: 0.8125rem;
color: var(--text-muted);
margin-top: 0.375rem;
}
.divider {
height: 1px;
background: var(--border);
margin: 1.5rem 0;
}
.mgt1 {
margin-top: 1rem;
}
.mgt0 {
margin-top: 0;
}
@charset "UTF-8";
.screen-section {
flex: 1;
overflow-y: auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 2rem;
box-sizing: border-box;
}
.screen-label {
position: absolute;
top: 2rem;
left: 2rem;
background: var(--brand);
color: white;
padding: 0.5rem 1.25rem;
border-radius: 50px;
font-weight: 700;
font-size: 0.875rem;
box-shadow: var(--shadow-lg);
z-index: 10;
}
.screen-container {
width: 100%;
position: relative;
}
.login-container {
max-width: 430px;
margin: 0 auto;
}
.login-card {
background: var(--surface);
border-radius: var(--radius);
padding: 2rem;
box-shadow: var(--shadow-xl);
}
.login-header {
text-align: center;
margin-bottom: 1.5rem;
}
.login-logo {
width: 80px;
height: 80px;
margin: 0 auto 1.5rem;
background: linear-gradient(135deg, var(--brand) 0%, var(--brand-light) 100%);
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.8rem;
font-weight: 700;
color: white;
box-shadow: var(--shadow-lg);
flex-direction: column;
line-height: 1.2;
padding-top: 5px;
}
.login-logo span {
font-size: 1.8rem;
font-weight: 700;
display: block;
margin-bottom: -2px;
}
.login-logo p {
font-size: 0.7rem !important;
font-weight: 100;
display: block;
color: #ddd !important;
margin: 0;
letter-spacing: 0.5px;
}
.login-header h2 {
font-size: 1.6rem;
font-weight: 700;
margin-bottom: 1.5rem;
line-height: 1.2;
}
.login-form {
display: flex;
flex-direction: column;
gap: 0.7rem;
}
.form-group {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.form-label {
font-weight: 600;
font-size: 0.9rem;
color: var(--text-main);
}
.form-input {
padding: 0.7rem 1rem;
border: 1px solid var(--border);
border-radius: 8px;
font-size: 1rem;
font-family: inherit;
transition: all 0.2s;
background: var(--surface);
color: var(--text-main);
}
.form-input:focus {
outline: none;
border-color: var(--brand);
box-shadow: 0 0 0 3px rgba(0, 44, 95, 0.1);
}
.btn {
padding: 1rem 1.5rem;
border-radius: 8px;
font-weight: 700;
font-size: 1rem;
cursor: pointer;
transition: all 0.2s;
border: none;
font-family: inherit;
height: 47px;
align-items: center
}
.btn-primary {
background: var(--brand);
color: white;
margin-top: 0.5rem;
}
.btn-primary:hover {
background: var(--brand-hover);
transform: translateY(-1px);
box-shadow: var(--shadow-lg);
}
.btn-gsw {
background: var(--gsw-primary);
color: white;
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
}
.btn-gsw:hover {
background: #999;
transform: translateY(-1px);
box-shadow: var(--shadow-lg);
}
.divider {
display: flex;
align-items: center;
margin: 0.5rem 0;
color: var(--text-muted);
font-size: 0.875rem;
}
.divider::before,
.divider::after {
content: '';
flex: 1;
height: 1px;
background: var(--border);
}
.login-footer {
text-align: center;
margin-top: 1.5rem;
font-size: 0.9rem;
color: var(--text-muted);
}
.login-footer a {
color: var(--brand);
text-decoration: none;
font-weight: 600;
}
.login-footer a:hover {
text-decoration: underline;
}
.forgot_pw {
margin-top: 0.5rem;
}
.region-container {
text-align: center;
}
.region-header {
margin-bottom: 3rem;
}
.region-header h2 {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 1rem;
}
.region-header p {
font-size: 1.125rem;
color: var(--text-muted);
}
.region-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
max-width: 1200px;
margin: 0 auto;
}
.region-card {
background: var(--surface);
border: 2px solid var(--border);
border-radius: var(--radius);
padding: 2rem;
cursor: pointer;
transition: all 0.3s;
text-align: center;
}
.region-card:hover {
border-color: var(--brand);
transform: translateY(-4px);
box-shadow: var(--shadow-xl);
}
.region-icon {
font-size: 1.2rem;
font-weight: 400;
width: 4.5rem;
height: 4.5rem;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--gsw-primary);
color: white;
border-radius: 50%;
margin-bottom: 1.1rem;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.region-card h3 {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 0.1rem;
}
.region-card p {
font-size: 0.875rem;
color: var(--text-muted);
}
.hero-section {
background: var(--surface);
padding: 1.8rem;
color: var(--brand);
text-align: center;
background-color: #f6f6f6;
}
.hero-section h1 {
margin: 0 0 1rem 0;
font-size: 2rem;
font-weight: 600;
}
.search-container {
max-width: 700px;
margin: 0 auto;
position: relative;
}
.search-input {
width: 100%;
padding: 1.25rem 1.5rem 1.25rem 3.5rem;
border-radius: 50px;
border: none;
font-size: 1.125rem;
border: 1px solid var(--border);
background: var(--surface);
color: var(--text-main);
font-family: inherit;
}
.search-icon {
position: absolute;
left: 1.25rem;
top: 50%;
transform: translateY(-50%);
color: var(--text-muted);
}
.alert-banner {
background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
padding: 1rem;
display: flex;
align-items: center;
gap: 1rem;
color: #9a3412;
animation: slideDown 0.5s ease-out;
border-top: 1px solid #fed291;
border-bottom: 1px solid #fed291;
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.alert-icon {
color: var(--warning);
flex-shrink: 0;
}
.main-content {
display: grid;
grid-template-columns: 1fr 320px;
gap: 2rem;
align-items: start;
}
@media (max-width: 1024px) {
.main-content {
grid-template-columns: 1fr;
}
}
.post-list {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.section-title {
font-size: 1.25rem;
font-weight: 700;
margin-bottom: 1rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.post-card-advanced {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1.5rem;
box-shadow: var(--shadow);
transition: all 0.3s;
position: relative;
}
.post-card-advanced:hover {
transform: translateX(4px);
border-color: var(--brand);
box-shadow: var(--shadow-lg);
}
.post-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
}
.post-id {
color: var(--brand);
font-weight: 700;
font-size: 1rem;
}
.status-badge {
font-size: 0.9rem;
font-weight: 700;
padding: 4px 12px;
border-radius: 50px;
text-transform: uppercase;
}
.status-solved {
background: #dcfce7;
color: #166534;
}
.status-progress {
background: #e0f2fe;
color: #0369a1;
}
.status-new {
background: #fef9c3;
color: #854d0e;
}
.header-left {
display: flex;
gap: 0.75rem;
align-items: center;
}
.bookmark-btn {
padding: 0.7rem 1rem;
font-size: 1rem;
display: flex;
align-items: center;
gap: 0.4rem;
height: 37px;
}
.bookmark-btn:hover {
background: var(--bg-light);
}
.post-title {
margin: 0 0 0.5rem 0;
font-size: 1.8rem;
font-weight: 700;
}
.post-excerpt {
color: var(--text-muted);
font-size: 1.2rem;
margin-bottom: 1rem;
}
.post-meta {
margin-top: 1rem;
display: flex;
justify-content: space-between;
font-size: 1rem;
color: var(--text-muted);
border-top: 1px solid var(--border);
padding-top: 1rem;
}
.sidebar {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.sidebar-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1.5rem;
box-shadow: var(--shadow);
}
.sidebar-card h3 {
margin: 0 0 1rem 0;
font-size: 1.2rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: black;
display: flex;
align-items: center;
gap: 0.5rem;
border-bottom: 1px solid var(--border);
padding-bottom: 0.5rem;
}
.quick-links {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.quick-link-item {
display: flex;
align-items: center;
gap: 0.75rem;
text-decoration: none;
color: var(--text-main);
font-size: 1rem;
font-weight: 500;
padding: 0.625rem;
transition: all 0.2s;
}
.quick-link-item:hover {
background: var(--bg-light);
color: var(--brand);
}
.trending-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 1rem;
}
.trending-item {
font-size: 1rem;
}
.trending-item a {
text-decoration: none;
color: var(--text-main);
font-weight: 600;
display: block;
margin-bottom: 0.25rem;
transition: color 0.2s;
padding-left: 0.625rem;
}
.trending-item:hover {
background: var(--bg-light);
color: var(--brand);
}
.trending-item span {
color: var(--text-muted);
font-size: 0.9rem;
padding-left: 0.625rem;
}
.filter_box {
background: #f6f6f6;
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1.5rem;
box-shadow: var(--shadow);
transition: all 0.3s;
position: relative;
}
.filters-bar {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
}
.filters-bar .btn-primary {
flex: 0 0 auto;
margin-top: 0;
padding: 0 1.5rem;
white-space: nowrap;
display: flex;
align-items: center;
justify-content: center;
min-width: fit-content;
height: 47px;
}
@media (max-width: 768px) {
.screen-section {
padding: 2rem 1rem;
}
.login-card {
padding: 2rem 1.5rem;
}
.hero-section h1 {
font-size: 1.75rem;
}
.region-header h2 {
font-size: 1.75rem;
}
}
.multi-select {
position: relative;
min-width: 180px;
}
.select-trigger {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
padding: 0.6rem 1rem;
font-size: 1rem;
color: var(--text-main);
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
user-select: none;
}
.select-trigger:hover {
border-color: var(--brand);
}
.select-trigger::after {
content: '';
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid var(--text-muted);
margin-left: 10px;
}
.select-options {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
box-shadow: var(--shadow-lg);
margin-top: 4px;
z-index: 100;
display: none;
max-height: 300px;
overflow-y: auto;
padding: 0.5rem 0;
}
.multi-select.open .select-options {
display: block;
}
.option-item {
padding: 0.5rem 1rem;
display: flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
transition: background 0.2s;
}
.filters-bar .option-item:hover {
background: var(--bg-light);
}
.option-item input[type="checkbox"] {
width: 16px;
height: 16px;
accent-color: var(--brand);
}
.back-link {
color: var(--brand);
font-weight: 600;
font-size: 1rem;
display: inline-flex;
align-items: center;
gap: 0.5rem;
text-decoration: none;
}
.back-link:hover {
text-decoration: underline;
}
.post-meta-bar {
display: flex;
align-items: center;
gap: 2rem;
padding: 1rem 0;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
font-size: 1rem;
color: var(--text-muted);
flex-wrap: wrap;
}
.meta-item {
display: flex;
align-items: center;
gap: 0.5rem;
}
.detail-tags {
display: flex;
gap: 0.5rem;
margin-top: 1rem;
flex-wrap: wrap;
}
.tag {
background: var(--bg-light);
color: var(--brand);
padding: 0.375rem 0.75rem;
border-radius: 50px;
font-size: 1rem;
font-weight: 600;
}
.content-section-title {
margin: 0 0 1rem 0;
font-size: 1.5rem;
font-weight: 700;
}
.article-content {
color: var(--text-main);
line-height: 1.8;
}
.article-content p {
margin-bottom: 0.5rem;
}
.styled-list {
margin: 0 0 1rem 1.5rem;
line-height: 1.8;
}
.attachment-stack {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.attachment-row {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem;
background: var(--bg-light);
border-radius: 8px;
}
.file-details {
flex: 1;
}
.file-name {
font-weight: 600;
color: var(--text-main);
}
.file-info-text {
font-size: 0.875rem;
color: var(--text-muted);
}
.btn-download {
color: var(--brand);
font-weight: 600;
text-decoration: none;
}
.btn-download:hover {
text-decoration: underline;
}
.comment-main-title {
margin: 0 0 1.5rem 0;
font-size: 1.5rem;
font-weight: 700;
display: flex;
align-items: center;
gap: 0.5rem;
}
.comment-block {
padding: 1.5rem 0;
}
.comment-block.border-bottom {
border-bottom: 1px solid var(--border);
}
.solution-block {
padding: 1.5rem;
background: #dcfce7;
border-left: 4px solid #10b981;
margin-bottom: 1rem;
}
.comment-header {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1.5rem;
}
.avatar {
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 700;
}
.avatar-brand {
background: var(--brand);
}
.avatar-accent {
background: var(--accent);
}
.avatar-warning {
background: var(--warning);
}
.user-name {
font-weight: 700;
color: var(--text-main);
}
.comment-time {
font-size: 0.875rem;
color: var(--text-muted);
}
.solution-label {
margin-left: auto;
background: #10b981;
color: white;
padding: 0.25rem 0.75rem;
border-radius: 50px;
font-size: 0.75rem;
font-weight: 700;
}
.comment-text {
color: var(--text-main);
line-height: 1.6;
}
.comment-footer-form {
margin-top: 1.5rem;
}
.form-title {
margin: 0 0 1rem 0;
font-size: 1rem;
font-weight: 700;
}
.comment-textarea {
width: 100%;
padding: 1rem;
border: 1px solid var(--border);
border-radius: 8px;
min-height: 100px;
font-family: inherit;
font-size: 1rem;
}
.form-btn-group {
margin-top: 0.5rem;
display: flex;
justify-content: flex-end;
gap: 0.75rem;
height: 47px;
align-items: center;
}
.form-btn-group .btn-primary {
margin-top: 0;
}
.btn-secondary {
background: var(--gsw-primary);
color: white;
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
}
.btn-secondary:hover {
background: #999;
transform: translateY(-1px);
box-shadow: var(--shadow-lg);
}
.sidebar-section-title {
font-size: 0.875rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-muted);
margin: 0 0 1rem 0;
display: flex;
align-items: center;
gap: 0.5rem;
}
.related-nav {
display: flex;
flex-direction: column;
gap: 1rem;
}
.related-link {
text-decoration: none;
color: inherit;
padding: 0.75rem;
border-radius: 8px;
transition: background 0.2s;
}
.related-link:hover {
background: var(--bg-light);
}
.related-post-title {
font-weight: 600;
color: var(--text-main);
margin-bottom: 0.25rem;
font-size: 0.9375rem;
}
.related-post-info {
font-size: 0.8125rem;
color: var(--text-muted);
}
@media (max-width: 1024px) {
.main-content-layout {
flex-direction: column;
}
.sidebar-area {
width: 100%;
position: static;
}
}
.screen-section {
flex: 1;
overflow-y: auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 2rem;
box-sizing: border-box;
}
.screen-container {
width: 100%;
position: relative;
}
.hero-section {
background: var(--surface);
padding: 1.8rem;
color: var(--brand);
text-align: center;
background-color: #f6f6f6;
}
.hero-section h1 {
margin: 0 0 1rem 0;
font-size: 2rem;
font-weight: 600;
}
.search-container {
max-width: 700px;
margin: 0 auto;
position: relative;
}
.search-input {
width: 100%;
padding: 1.25rem 1.5rem 1.25rem 3.5rem;
border-radius: 50px;
border: none;
font-size: 1.125rem;
border: 1px solid var(--border);
background: var(--surface);
color: var(--text-main);
font-family: inherit;
}
.search-icon {
position: absolute;
left: 1.25rem;
top: 50%;
transform: translateY(-50%);
color: var(--text-muted);
}
.main-content {
display: grid;
grid-template-columns: 1fr 320px;
gap: 2rem;
align-items: start;
}
@media (max-width: 1024px) {
.main-content {
grid-template-columns: 1fr;
}
}
.post-list {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.section-title {
font-size: 1.25rem;
font-weight: 700;
margin-bottom: 1rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.filter_box {
background: #f6f6f6;
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1.5rem;
box-shadow: var(--shadow);
transition: all 0.3s;
position: relative;
}
.filters-bar {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
}
.filters-bar .btn-primary {
flex: 0 0 auto;
margin-top: 0;
padding: 0 1.5rem;
white-space: nowrap;
display: flex;
align-items: center;
justify-content: center;
min-width: fit-content;
height: 47px;
}
.btn {
padding: 1rem 1.5rem;
border-radius: 8px;
font-weight: 700;
font-size: 1rem;
cursor: pointer;
transition: all 0.2s;
border: none;
font-family: inherit;
height: 47px;
align-items: center;
text-decoration: none;
}
.btn-primary {
background: var(--brand);
color: white;
margin-top: 0.5rem;
}
.btn-primary:hover {
background: var(--brand-hover);
transform: translateY(-1px);
box-shadow: var(--shadow-lg);
}
.btn-secondary {
background: var(--gsw-primary);
color: white;
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
}
.btn-secondary:hover {
background: #999;
transform: translateY(-1px);
box-shadow: var(--shadow-lg);
}
.post-card-advanced {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1.5rem;
box-shadow: var(--shadow);
transition: all 0.3s;
position: relative;
display: block;
text-decoration: none;
color: inherit;
}
.post-card-advanced:hover {
transform: translateX(4px);
border-color: var(--brand);
box-shadow: var(--shadow-lg);
text-decoration: none;
color: inherit;
}
.post-card-advanced-none .post-card-advanced:hover {
transform: none;
border: 1px solid var(--border);
box-shadow: var(--shadow);
}
.post-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
}
.post-id {
color: var(--brand);
font-weight: 700;
font-size: 1rem;
}
.status-badge {
font-size: 0.9rem;
font-weight: 700;
padding: 4px 12px;
border-radius: 50px;
text-transform: uppercase;
}
.status-solved {
background: #dcfce7;
color: #166534;
}
.status-progress {
background: #e0f2fe;
color: #0369a1;
}
.status-new {
background: #fef9c3;
color: #854d0e;
}
.post-title {
margin: 0 0 0.5rem 0;
font-size: 1.8rem;
font-weight: 700;
}
.post-excerpt {
color: var(--text-muted);
font-size: 1.2rem;
margin-bottom: 1rem;
}
.post-meta {
margin-top: 1rem;
display: flex;
justify-content: space-between;
font-size: 1rem;
color: var(--text-muted);
border-top: 1px solid var(--border);
padding-top: 1rem;
}
.sidebar {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.sidebar-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1.5rem;
box-shadow: var(--shadow);
}
.sidebar-card h3 {
margin: 0 0 1rem 0;
font-size: 1.2rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: black;
display: flex;
align-items: center;
gap: 0.5rem;
border-bottom: 1px solid var(--border);
padding-bottom: 0.5rem;
}
.quick-links {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.quick-link-item {
display: flex;
align-items: center;
gap: 0.75rem;
text-decoration: none;
color: var(--text-main);
font-size: 1rem;
font-weight: 500;
padding: 0.625rem;
transition: all 0.2s;
}
.quick-link-item:hover {
background: var(--bg-light);
color: var(--brand);
}
.trending-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 1rem;
}
.trending-item {
font-size: 1rem;
}
.trending-item a {
text-decoration: none;
color: var(--text-main);
font-weight: 600;
display: block;
margin-bottom: 0.25rem;
transition: color 0.2s;
padding-left: 0.625rem;
}
.trending-item:hover {
background: var(--bg-light);
color: var(--brand);
}
.trending-item span {
color: var(--text-muted);
font-size: 0.9rem;
padding-left: 0.625rem;
}
.multi-select {
position: relative;
min-width: 180px;
}
.select-trigger {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
padding: 0.6rem 1rem;
font-size: 1rem;
color: var(--text-main);
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
user-select: none;
}
.select-trigger:hover {
border-color: var(--brand);
}
.select-trigger::after {
content: '';
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid var(--text-muted);
margin-left: 10px;
}
.select-options {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
box-shadow: var(--shadow-lg);
margin-top: 4px;
z-index: 100;
display: none;
max-height: 300px;
overflow-y: auto;
padding: 0.5rem 0;
}
.multi-select.open .select-options {
display: block;
}
.option-item {
padding: 0.5rem 1rem;
display: flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
transition: background 0.2s;
}
.option-item:hover {
background: var(--bg-light);
}
.option-item input[type="checkbox"] {
width: 16px;
height: 16px;
accent-color: var(--brand);
}
.back-link {
color: var(--brand);
font-weight: 600;
font-size: 1rem;
display: inline-flex;
align-items: center;
gap: 0.5rem;
text-decoration: none;
}
.back-link:hover {
text-decoration: underline;
}
.post-meta-bar {
display: flex;
align-items: center;
gap: 2rem;
padding: 1rem 0;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
font-size: 1rem;
color: var(--text-muted);
flex-wrap: wrap;
}
.meta-item {
display: flex;
align-items: center;
gap: 0.5rem;
}
.header-left {
display: flex;
gap: 0.75rem;
align-items: center;
}
.bookmark-btn {
padding: 0.7rem 1rem;
font-size: 1rem;
display: flex;
align-items: center;
gap: 0.4rem;
height: 37px;
}
.bookmark-btn:hover {
background: var(--bg-light);
}
.detail-tags {
display: flex;
gap: 0.5rem;
margin-top: 1rem;
flex-wrap: wrap;
}
.tag {
background: var(--bg-light);
color: var(--brand);
padding: 0.375rem 0.75rem;
border-radius: 50px;
font-size: 1rem;
font-weight: 600;
}
.content-section-title {
margin: 0 0 1rem 0;
font-size: 1.5rem;
font-weight: 700;
}
.article-content {
color: var(--text-main);
line-height: 1.8;
}
.article-content p {
margin-bottom: 0.5rem;
}
.styled-list {
margin: 0 0 1rem 1.5rem;
line-height: 1.8;
}
.attachment-stack {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.attachment-row {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem;
background: var(--bg-light);
border-radius: 8px;
}
.file-details {
flex: 1;
}
.file-name {
font-weight: 600;
color: var(--text-main);
}
.file-info-text {
font-size: 0.875rem;
color: var(--text-muted);
}
.btn-download {
color: var(--brand);
font-weight: 600;
text-decoration: none;
}
.btn-download:hover {
text-decoration: underline;
}
.comment-main-title {
margin: 0 0 1.5rem 0;
font-size: 1.5rem;
font-weight: 700;
display: flex;
align-items: center;
gap: 0.5rem;
}
.comment-block {
padding: 1.5rem 0;
}
.comment-block.border-bottom {
border-bottom: 1px solid var(--border);
}
.solution-block {
padding: 1.5rem;
background: #dcfce7;
border-left: 4px solid #10b981;
margin-bottom: 1rem;
}
.comment-header {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1.5rem;
}
.user-name {
font-weight: 700;
color: var(--text-main);
}
.comment-time {
font-size: 0.875rem;
color: var(--text-muted);
}
.solution-label {
margin-left: auto;
background: #10b981;
color: white;
padding: 0.25rem 0.75rem;
border-radius: 50px;
font-size: 0.75rem;
font-weight: 700;
}
.comment-text {
color: var(--text-main);
line-height: 1.6;
}
.comment-footer-form {
margin-top: 1.5rem;
}
.form-title {
margin: 0 0 1rem 0;
font-size: 1rem;
font-weight: 700;
}
.comment-textarea {
width: 100%;
padding: 1rem;
border: 1px solid var(--border);
border-radius: 8px;
min-height: 100px;
font-family: inherit;
font-size: 1rem;
}
.form-btn-group {
margin-top: 0.5rem;
display: flex;
justify-content: flex-end;
gap: 0.75rem;
height: 47px;
align-items: center;
}
.form-btn-group .btn-primary {
margin-top: 0;
}
.sidebar-section-title {
font-size: 0.875rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-muted);
margin: 0 0 1rem 0;
display: flex;
align-items: center;
gap: 0.5rem;
}
.related-nav {
display: flex;
flex-direction: column;
gap: 1rem;
}
.related-link {
text-decoration: none;
color: inherit;
padding: 0.75rem;
border-radius: 8px;
transition: background 0.2s;
}
.related-link:hover {
background: var(--bg-light);
}
.related-post-title {
font-weight: 600;
color: var(--text-main);
margin-bottom: 0.25rem;
font-size: 0.9375rem;
}
.related-post-info {
font-size: 0.8125rem;
color: var(--text-muted);
}
.form-card {
background: var(--surface);
border-radius: var(--radius);
box-shadow: var(--shadow-lg);
padding: 2rem;
margin-bottom: 2rem;
}
.form-header {
margin-bottom: 1.5rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid var(--border);
}
.form-header h1 {
margin: 0 0 0.5rem 0;
font-size: 2rem;
font-weight: 700;
color: var(--brand);
}
.form-header p {
margin: 0;
color: var(--text-muted);
font-size: 1rem;
}
.section-subtitle {
font-size: 0.9rem;
color: var(--text-muted);
margin-bottom: 1.2rem;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
@media (max-width: 768px) {
.form-row {
grid-template-columns: 1fr;
}
.screen-section {
padding: 2rem 1rem;
}
.hero-section h1 {
font-size: 1.75rem;
}
}
.form-label {
display: block;
font-weight: 600;
margin-bottom: 0.5rem;
color: var(--text-main);
font-size: 0.9375rem;
}
.required {
color: var(--warning);
margin-left: 0.25rem;
}
.form-input {
width: 100%;
padding: 0.875rem 1rem;
border: 1px solid var(--border);
border-radius: 8px;
font-size: 0.9375rem;
font-family: inherit;
transition: all 0.2s;
background: var(--surface);
color: var(--text-main);
}
.form-input:focus {
outline: none;
border-color: var(--brand);
box-shadow: 0 0 0 3px rgba(0, 44, 95, 0.1);
}
.form-input:disabled {
background: var(--bg-light);
cursor: not-allowed;
opacity: 0.7;
}
textarea.form-input {
min-height: 150px;
resize: vertical;
font-family: inherit;
}
.checkbox-group {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 1rem;
}
.checkbox-card {
position: relative;
background: var(--surface);
border: 2px solid var(--border);
border-radius: 8px;
padding: 1rem;
cursor: pointer;
transition: all 0.2s;
display: flex;
align-items: center;
gap: 0.75rem;
}
.checkbox-card:hover {
border-color: var(--brand);
background: rgba(0, 44, 95, 0.02);
transform: translateY(-2px);
box-shadow: var(--shadow);
}
.checkbox-card input[type="checkbox"] {
width: 20px;
height: 20px;
cursor: pointer;
accent-color: var(--brand);
}
.checkbox-card.checked {
border-color: var(--brand);
background: rgba(0, 44, 95, 0.05);
}
.checkbox-label {
font-weight: 500;
color: var(--text-main);
cursor: pointer;
flex: 1;
}
.file-upload-area {
border: 2px dashed var(--border);
border-radius: 8px;
padding: 2rem;
text-align: center;
transition: all 0.2s;
background: var(--surface);
cursor: pointer;
}
.file-upload-area:hover {
border-color: var(--brand);
background: rgba(0, 44, 95, 0.02);
}
.file-upload-area.dragover {
border-color: var(--brand);
background: rgba(0, 44, 95, 0.05);
}
.file-upload-icon {
color: var(--text-muted);
margin-bottom: 1rem;
}
.file-input-hidden {
display: none;
}
.comment-form {
display: flex !important;
flex-direction: row !important;
align-items: flex-start !important;
gap: 16px !important;
width: 100% !important;
padding-top: 24px !important;
}
.comment-avatar {
width: 44px !important;
height: 44px !important;
flex-shrink: 0 !important;
margin: 0 !important;
}
.comment-avatar .user-avatar,
.comment-avatar img {
width: 44px !important;
height: 44px !important;
border-radius: 50% !important;
border: 1px solid rgba(255, 255, 255, 0.16) !important;
object-fit: cover !important;
background: #FFFFFF !important;
display: block !important;
}
.comment-container {
flex: 1 1 auto !important;
width: auto !important;
}
.comment-container textarea,
textarea#comment_body,
.comment-textarea-wrapper textarea {
width: 100% !important;
min-height: 84px !important;
background: rgba(15, 30, 48, 0.8) !important;
border: 1px solid rgba(255, 255, 255, 0.16) !important;
border-radius: 10px !important;
padding: 14px 16px !important;
color: #FFFFFF !important;
font-size: 14.5px !important;
line-height: 1.6 !important;
box-sizing: border-box !important;
backdrop-filter: blur(8px) !important;
font-family: inherit !important;
resize: vertical !important;
transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
}
.comment-container textarea:focus,
textarea#comment_body:focus,
.comment-textarea-wrapper textarea:focus {
outline: none !important;
border-color: #38BDF8 !important;
box-shadow: 0 0 16px rgba(56, 189, 248, 0.25) !important;
background: rgba(15, 35, 52, 0.95) !important;
}
.comment-container textarea::placeholder,
textarea#comment_body::placeholder {
color: #94A3B8 !important;
}
.comment-form-controls,
.comment-form .form-btn-group {
margin-top: 12px !important;
display: flex !important;
justify-content: flex-end !important;
gap: 10px !important;
}
.comment-form-controls input[type="submit"],
.comment-form-controls .button,
.comment-form .form-btn-group .btn-submit-comment {
background: rgba(56, 189, 248, 0.15) !important;
border: 1px solid #38BDF8 !important;
color: #38BDF8 !important;
font-weight: 700 !important;
border-radius: 8px !important;
padding: 8px 24px !important;
font-size: 14px !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
}
.comment-form-controls input[type="submit"]:hover,
.comment-form-controls .button:hover,
.comment-form .form-btn-group .btn-submit-comment:hover {
background: #38BDF8 !important;
color: #05141F !important;
box-shadow: 0 0 16px rgba(56, 189, 248, 0.4) !important;
}
.file-list {
margin-top: 1rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.file-item {
display: flex;
align-items: center;
justify-content: space-between;
background: var(--bg-light);
padding: 0.75rem 1rem;
border-radius: 6px;
font-size: 0.875rem;
}
.file-item-name {
display: flex;
align-items: center;
gap: 0.5rem;
color: var(--text-main);
}
.remove-file {
background: none;
border: none;
color: var(--text-muted);
cursor: pointer;
padding: 0.25rem;
transition: color 0.2s;
}
.remove-file:hover {
color: #ef4444;
}
.form-actions {
display: flex;
gap: 1rem;
justify-content: flex-end;
}
.help-text {
font-size: 0.8125rem;
color: var(--text-muted);
margin-top: 0.375rem;
}
.alert-banner {
background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
padding: 1rem;
display: flex;
align-items: center;
gap: 1rem;
color: #9a3412;
animation: slideDown 0.5s ease-out;
border-top: 1px solid #fed291;
border-bottom: 1px solid #fed291;
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.alert-icon {
color: var(--warning);
flex-shrink: 0;
}
.mgt1 {
margin-top: 1rem;
}
.mgt0 {
margin-top: 0;
}
.post-card-advanced-none .post-card-advanced:hover {
transform: none;
border: 1px solid var(--border);
box-shadow: var(--shadow);
}
.breadcrumbs,
.search-result-breadcrumbs {
list-style: none !important;
padding: 0;
margin: 0;
}
.breadcrumbs li {
display: inline-block;
margin-right: 5px;
}
.breadcrumbs li+li::before {
content: '>';
margin-right: 5px;
color: #87929D;
}
.comment-textarea-wrapper iframe {
min-height: 150px !important;
border-radius: 8px !important;
}
.vote-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.5rem 1rem;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--surface);
cursor: pointer;
font-size: 0.95rem;
font-weight: 600;
font-family: inherit;
transition: all 0.2s;
color: var(--text-main);
text-decoration: none;
}
.vote-btn:hover {
border-color: var(--brand);
color: var(--brand);
}
.vote-btn.active {
background: var(--brand);
color: white;
border-color: var(--brand);
}
.btn-primary:active,
.btn-primary:focus {
color: white;
text-decoration: none;
}
.btn-secondary:active,
.btn-secondary:focus {
color: white;
text-decoration: none;
}
.gdx-dynamic-summary {
background: #f7f9fa;
border: 1px solid #e1e3e8;
border-radius: 8px;
padding: 1.25rem;
margin-bottom: 1.5rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.gdx-dynamic-summary h4 {
margin-top: 0;
margin-bottom: 1rem;
font-size: 1rem;
color: #1f2328;
display: flex;
align-items: center;
gap: 0.5rem;
border-bottom: 1px solid #e1e3e8;
padding-bottom: 0.75rem;
}
.gdx-summary-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 1rem;
}
.gdx-summary-item {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.gdx-summary-label {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #59636e;
font-weight: 600;
}
.gdx-summary-value {
font-size: 0.9rem;
color: #1f2328;
font-weight: 500;
word-break: break-word;
}
.gdx-summary-value.empty-value {
color: #8c959f;
font-style: italic;
font-weight: 400;
}
.sidebar {
position: sticky;
top: 20px;
align-self: flex-start;
}
.screen-section {
overflow: visible !important;
}
.vote-row {
display: inline-flex;
align-items: center;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 6px;
overflow: hidden;
}
.vote-row .vote-btn {
background: transparent;
border: none;
padding: 8px 16px;
font-weight: 500;
color: var(--muted);
cursor: pointer;
transition: all 0.2s;
font-size: 13px;
}
.vote-row .vote-btn:hover {
background: var(--surface-hover);
color: var(--ink);
}
.vote-row .vote-btn[aria-pressed="true"] {
background: var(--surface-hover);
color: var(--primary);
font-weight: 600;
}
.vote-row .vote-count {
padding: 8px 14px;
font-weight: 600;
color: var(--ink);
background: #f8f9fa;
border-left: 1px solid var(--border);
border-right: 1px solid var(--border);
min-width: 40px;
text-align: center;
font-size: 14px;
}
.comment-form {
display: flex !important;
flex-direction: column;
width: 100%;
}
.comment-textarea-wrapper {
width: 100%;
display: block;
}
.comment-textarea-wrapper textarea {
width: 100% !important;
min-height: 120px;
padding: 12px;
border: 1px solid var(--border);
border-radius: 6px;
font-family: inherit;
resize: vertical;
box-sizing: border-box;
}
.comment-textarea-wrapper textarea:focus {
border-color: var(--primary);
outline: none;
box-shadow: 0 0 0 3px rgba(11,88,206,0.1);
}
.comment-textarea-wrapper iframe,
.comment-textarea-wrapper .tox-tinymce {
width: 100% !important;
border-radius: 6px;
}
.comment-form .form-btn-group {
margin-top: 12px;
text-align: right;
display: flex;
justify-content: flex-end;
}
.custom-attachments-wrapper {
margin: 24px 0;
padding-top: 16px;
border-top: 1px solid #e5e7eb;
}
.custom-attachments-title {
font-size: 14px;
font-weight: 600;
color: #4b5563;
margin-bottom: 12px;
}
.custom-attachments-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 12px;
}
.custom-attachment-card {
display: flex;
align-items: center;
padding: 12px 16px;
background: #fbfbfd;
border: 1px solid #d1d5db;
border-radius: 8px;
text-decoration: none !important;
color: inherit;
transition: all 0.2s;
}
.custom-attachment-card:hover {
background: var(--surface);
border-color: #0b58ce;
box-shadow: 0 2px 8px rgba(11, 88, 206, 0.1);
}
.custom-attachment-card .attachment-icon {
color: #0b58ce;
margin-right: 12px;
display: flex;
}
.custom-attachment-card .attachment-details {
flex: 1;
min-width: 0;
}
.custom-attachment-card .attachment-name {
font-weight: 500;
font-size: 14px;
color: var(--ink);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.custom-attachment-card .attachment-size {
font-size: 12px;
color: var(--muted);
margin-top: 2px;
}
.custom-attachment-card .attachment-download {
color: #999;
margin-left: 12px;
transition: color 0.2s;
}
.custom-attachment-card:hover .attachment-download {
color: #0b58ce;
}
.btn-service-manual {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 16px;
border-radius: 980px;                font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif;
font-size: 13px;
font-weight: 500;
letter-spacing: -0.01em;
color: #e2e8f0;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.15);
text-decoration: none !important;
cursor: pointer;
transition: all 0.25s cubic-bezier(0.25, 0.1, 0.25, 1);
white-space: nowrap;
line-height: 1.4;
-webkit-font-smoothing: antialiased;
}
.btn-service-manual:hover {
background: rgba(255, 255, 255, 0.16);
color: #ffffff;
border-color: rgba(255, 255, 255, 0.3);
transform: scale(1.02);
text-decoration: none !important;
}
.btn-service-manual:active {
transform: scale(0.97);
background: rgba(0, 113, 227, 0.18);
}
.btn-service-manual svg {
flex-shrink: 0;
opacity: 0.8;
transition: opacity 0.25s ease;
}
.btn-service-manual:hover svg {
opacity: 1;
color: #0071e3;
}
.header .logo {
display: flex;
align-items: center;
gap: 0;
}
.service-manual-wrapper {
display: none;                        align-items: center;
margin-left: 6px;
flex-shrink: 0;
}
.service-manual-wrapper.is-visible {
display: flex !important;
}
@media (max-width: 768px) {
.service-manual-wrapper {
display: none !important;
}
}
.post-card-advanced,
.sidebar-card,
.filter_box,
.community-hero-section,
.post-card-container .post-card-advanced,
.custom-attachments-wrapper,
.custom-attachment-card {
border-radius: var(--radius-apple) !important;
}
.comment-block,
.upload-dropzone,
.upload-file-item,
.upload-error-banner {
border-radius: 12px !important;
}
.form-input,
.search input[type="search"],
.custom-inline-search input[type="search"],
textarea.form-input {
border-radius: 10px !important;
}
.status-badge,
.checkbox-card,
.btn,
.btn-primary,
.select-trigger {
border-radius: 8px !important;
}
.hero-badge {
border-radius: 20px !important;
}
.upload-progress-bar,
.upload-progress-fill {
border-radius: 6px !important;
}
.rl-notice {
background-color: #fff3cd !important;
color: #856404 !important;
border: 1px solid #ffeeba !important;
padding: 12px 15px !important;
border-radius: 4px !important;
font-weight: 500 !important;
font-size: 14px !important;
line-height: 1.4 !important;
}
.header-language-selector .dropdown-menu.community-lang-menu {
position: absolute !important;
top: 100% !important;
right: 0 !important;
left: auto !important;
transform: none !important;
width: min(90vw, 1100px) !important;
min-width: unset !important;
max-width: 1100px !important;
padding: 20px 24px !important;
max-height: 80vh !important;
height: auto !important;
overflow-y: auto !important;
overflow-x: auto !important;   background-color: #ffffff !important;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.18) !important;
border-radius: 12px !important;
border: 1px solid #ddd !important;
box-sizing: border-box !important;
z-index: 9999 !important;
}
.header-language-selector .dropdown-menu.community-lang-menu .rl-body {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 16px 24px !important;
padding: 0 !important;
width: 100% !important;
box-sizing: border-box !important;
}
.header-language-selector .dropdown-menu.community-lang-menu .rl-group {
flex: unset !important;
display: flex !important;
flex-direction: column !important;
gap: 4px !important;
}
.header-language-selector .dropdown-menu.community-lang-menu .rl-item {
display: block !important;
padding: 8px 12px !important;
border-radius: 6px !important;
font-size: 13px !important;
white-space: normal !important;
word-break: keep-all !important;
}
.header-language-selector .dropdown-menu.community-lang-menu .rl-item.is-current {
background-color: #eef3f8 !important;
color: var(--brand) !important;
font-weight: 700 !important;
cursor: default !important;
}
.header-language-selector .dropdown-menu.community-lang-menu .rl-item:hover,
.header-language-selector .dropdown-menu.community-lang-menu .rl-item:focus:hover {
background-color: #f5f7f9 !important;
color: var(--brand) !important;
}
.header-language-selector .dropdown-menu.community-lang-menu .rl-item:focus {
background-color: transparent !important;
color: #333 !important;
outline: none !important;
box-shadow: none !important;
}
.header-language-selector .dropdown-menu.community-lang-menu .rl-item.is-current:focus {
background-color: #eef3f8 !important;
color: var(--brand) !important;
}
@media (max-width: 1024px) {
.header-language-selector .dropdown-menu.community-lang-menu {
min-width: unset !important;
width: 95vw !important;
max-width: 95vw !important;
right: 0 !important;
left: auto !important;
transform: none !important;
padding: 16px !important;
}
.header-language-selector .dropdown-menu.community-lang-menu .rl-body {
grid-template-columns: repeat(2, 1fr) !important;
}
}
.nav-item-wrapper-column {
display: inline-flex !important;
align-items: center !important;         justify-content: center !important;
background: none !important;
border: none !important;
padding: 0 !important;
text-decoration: none !important;
color: inherit !important;
cursor: pointer;
height: 42px;                           line-height: 1;
transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.nav-item-wrapper-column:hover {
transform: scale(1.08) !important;
}
.nav-item-wrapper-column svg,
.nav-item-wrapper-column .user-avatar {
width: 30px !important;                 height: 30px !important;
flex-shrink: 0;
display: block;                          transition: stroke 0.2s;
}
.nav-item-wrapper-column:hover svg {
stroke: #0070f3 !important;
}
.avatar-ring-wrapper {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
width: 38px;                            height: 38px;
box-sizing: border-box;
padding: 3px;
border: 1px solid rgba(0, 0, 0, 0.05);
background: transparent;
transition: border-color 0.25s, box-shadow 0.25s;
}
.nav-item-wrapper-column:hover .avatar-ring-wrapper {
border-color: rgba(0, 112, 243, 0.45);
box-shadow: 0 0 8px rgba(0, 112, 243, 0.25);
}
.nav-item-wrapper-column .user-avatar {
border-radius: 50% !important;
object-fit: cover !important;
margin: 0 !important;
}
.dropdown-menu {
visibility: hidden;
opacity: 0;
transform: translateY(8px);
pointer-events: none;
transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
visibility 0.25s;
backdrop-filter: blur(14px) !important;
-webkit-backdrop-filter: blur(14px) !important;
background: rgba(255, 255, 255, 0.85) !important;
border: 1px solid rgba(0, 0, 0, 0.06) !important;
border-radius: 12px !important;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
padding: 8px !important;
margin-top: 6px !important;
}
.header-language-selector:has(.dropdown-toggle[aria-expanded="true"]) .dropdown-menu,
.user-info.dropdown:has(.dropdown-toggle[aria-expanded="true"]) .dropdown-menu {
visibility: visible;
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.dropdown-menu .rl-item {
border-radius: 6px !important;
padding: 8px 12px !important;
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s !important;
color: #333 !important;
font-weight: 500 !important;
font-size: 13px !important;
display: block !important;                text-decoration: none !important;
outline: none !important;
}
.dropdown-menu .rl-item:hover,
.dropdown-menu .rl-item:focus {
background-color: rgba(0, 112, 243, 0.08) !important;
color: #0070f3 !important;
}
.dropdown-menu .rl-item.is-current {
background-color: rgba(0, 112, 243, 0.06) !important;
color: #0070f3 !important;
font-weight: 700 !important;
cursor: default !important;
}
.dropdown-menu .rl-item.is-current:focus,
.dropdown-menu .rl-item.is-current:hover {
box-shadow: 0 0 0 2px rgba(0, 112, 243, 0.25) !important;
}
@media (min-width: 1024px) {
.nav-wrapper-desktop {
display: inline-flex !important;
align-items: center !important;
gap: 0 !important;                       }
.user-nav {
display: inline-flex !important;
align-items: center !important;
overflow: visible;                       }
.user-nav-list {
display: inline-flex !important;
align-items: center !important;
gap: 24px !important;                      list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
}
.user-nav-list > li:has(> a[href*="service_catalog"]),
.user-nav-list > li:empty {
display: none !important;
}
.user-nav-list > li {
display: inline-flex !important;
align-items: center !important;
margin: 0 !important;
}
.header-profile-selector {
margin-left: 24px !important;          }
@media (max-width: 768px) {
.nav-item-wrapper-column svg,
.nav-item-wrapper-column .user-avatar {
width: 20px !important;
height: 20px !important;
}
.user-nav-list {
gap: 16px !important;
}
.header-profile-selector {
margin-left: 16px !important;
}
}
.header-tabs-container {
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex: 1 1 auto !important;
gap: 6px !important;
margin: 0 12px !important;
white-space: nowrap !important;
position: relative !important;
left: auto !important;
transform: none !important;
z-index: 100 !important;
overflow: visible !important;
}
.header-tab-dropdown {
position: relative !important;
padding: 20px 0 !important;
flex-shrink: 0 !important;
}
.header-tab-item {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
color: #F1F5F9 !important;
font-size: 12px !important;
font-weight: 600 !important;
letter-spacing: 0.1px !important;
text-decoration: none !important;
padding: 6px 7px !important;
border-radius: 6px !important;
opacity: 0.92 !important;
transition: all 0.2s ease !important;
cursor: pointer;
position: relative;
white-space: nowrap !important;
display: inline-block !important;
}
.header-tab-dropdown:hover .header-tab-item {
color: #FFFFFF !important;
opacity: 1 !important;
background-color: rgba(255, 255, 255, 0.14) !important;
box-shadow: none !important;
}
.header-tab-item::after {
display: none !important;
}
@media (max-width: 1400px) {
.header-tabs-container {
gap: 3px !important;
margin: 0 8px !important;
}
.header-tab-item {
font-size: 11.5px !important;
padding: 5px 6px !important;
}
}
@media (max-width: 1200px) {
.header-tabs-container {
gap: 2px !important;
margin: 0 4px !important;
}
.header-tab-item {
font-size: 11px !important;
padding: 4px 5px !important;
}
}
.btn-service-manual {
font-size: 13.5px !important;
font-weight: 700 !important;
color: #F1F5F9 !important;
border: 1.5px solid rgba(255, 255, 255, 0.35) !important;
padding: 6px 14px !important;
border-radius: 20px !important;
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
transition: all 0.25s ease !important;
}
.btn-service-manual:hover {
border-color: #FFFFFF !important;
background-color: rgba(255, 255, 255, 0.15) !important;
color: #FFFFFF !important;
}
.nav-wrapper-desktop svg {
width: 24px !important;
height: 24px !important;
stroke: #F8FAFC !important;
stroke-width: 2.3px !important;
opacity: 0.9 !important;
transition: all 0.25s ease !important;
}
.nav-wrapper-desktop a:hover svg,
.nav-wrapper-desktop button:hover svg {
stroke: #FFFFFF !important;
opacity: 1 !important;
transform: scale(1.12) !important;
filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.5)) !important;
}
.header-tab-dropdown {
position: relative !important;
padding: 24px 0 !important;
}
.header-tab-menu {
position: absolute !important;
top: 100% !important;
left: 50% !important;
transform: translateX(-50%) translateY(8px) !important;
background: rgba(10, 22, 34, 0.95) !important;
backdrop-filter: blur(16px) !important;
-webkit-backdrop-filter: blur(16px) !important;
border: 1px solid rgba(255, 255, 255, 0.12) !important;
border-radius: 12px !important;
width: 260px !important;
padding: 10px !important;
display: flex !important;
flex-direction: column !important;
gap: 4px !important;
opacity: 0 !important;
visibility: hidden !important;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6) !important;
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
z-index: 1000 !important;
}
.header-tab-dropdown:hover .header-tab-menu {
opacity: 1 !important;
visibility: visible !important;
transform: translateX(-50%) translateY(0) !important;
}
.header-tab-menu a {
position: relative !important;
color: #cbd5e1 !important;
font-size: 13.5px !important;
font-weight: 500 !important;
line-height: 1.4 !important;
text-decoration: none !important;
padding: 10px 14px 10px 18px !important;
border-radius: 8px !important;
transition: all 0.2s ease !important;
display: block !important;
text-align: left !important;
white-space: normal !important;
word-break: keep-all !important;
}
.header-tab-menu a::before {
content: '' !important;
position: absolute !important;
left: 6px !important;
top: 50% !important;
width: 3px !important;
height: 16px !important;
background-color: #EA0029 !important;
border-radius: 2px !important;
transform: translateY(-50%) scaleY(0) !important;
transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
transform-origin: center !important;
}
.header-tab-menu a:hover {
background-color: rgba(255, 255, 255, 0.08) !important;
color: #FFFFFF !important;
}
.header-tab-menu a:hover::before {
transform: translateY(-50%) scaleY(1) !important;
}
@media (max-width: 1023px) {
.header-tabs-container {
display: none !important;
}
}
.emergency-alert-bar {
background-color: #0c0203;   border-bottom: 1px solid rgba(234, 0, 41, 0.2);
border-top: 1px solid rgba(255, 255, 255, 0.03);
padding: 12px 0;
width: 100%;
position: relative;
z-index: 99;
}
.alert-bar-inner {
max-width: 1160px;
margin: 0 auto;
padding: 0 5%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
@media (min-width: 1160px) {
.alert-bar-inner {
padding: 0;
width: 90%;
}
}
.alert-bar-badge {
display: flex;
align-items: center;
gap: 8px;
background-color: rgba(234, 0, 41, 0.1);
border: 1px solid rgba(234, 0, 41, 0.3);
color: var(--kia-live-red, #EA0029);
font-size: 11px;
font-weight: 700;
padding: 3px 8px;
border-radius: 2px;
letter-spacing: 0.5px;
text-transform: uppercase;
white-space: nowrap;
}
.alert-bar-rolling {
flex: 1;
height: 24px;
overflow: hidden;
position: relative;
}
.alert-rolling-track {
display: flex;
flex-direction: column;
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
will-change: transform;
}
.alert-rolling-item {
height: 24px !important;
line-height: 24px !important;
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
color: #cbd5e1;
font-size: 13.5px;
font-weight: 500;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.alert-rolling-item a.alert-link {
color: #E2E8F0 !important;
text-decoration: none !important;
font-size: 13.5px !important;
font-weight: 500 !important;
transition: color 0.2s ease !important;
display: inline-block !important;
max-width: 100% !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
.alert-rolling-item a.alert-link:hover {
color: #38BDF8 !important;
text-decoration: underline !important;
}
.alert-bar-actions {
display: flex;
align-items: center;
gap: 16px;
}
.alert-btn-details {
font-family: 'Oswald', sans-serif;
border: 1px solid rgba(255, 255, 255, 0.3);
background-color: transparent;
color: #ffffff;
padding: 6px 14px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
text-decoration: none;
cursor: pointer;
transition: all 0.25s ease;
display: inline-flex;
align-items: center;
gap: 6px;
border-radius: 2px;
white-space: nowrap;
}
.alert-btn-details:hover {
background-color: #ffffff;
color: #000000;
border-color: #ffffff;
}
.alert-btn-details svg {
transition: transform 0.2s;
}
.alert-btn-details:hover svg {
transform: translateX(3px);
}
.alert-bar-close {
background: none;
border: none;
color: #64748b;
font-size: 20px;
cursor: pointer;
line-height: 1;
padding: 0 4px;
transition: color 0.2s;
}
.alert-bar-close:hover {
color: #ffffff;
}
.system-bulletin-board {
background-color: rgba(12, 26, 37, 0.6);   border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 8px;
padding: 24px;
margin: 32px 0 48px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
backdrop-filter: blur(15px);
}
.bulletin-header {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
padding-bottom: 16px;
margin-bottom: 20px;
flex-wrap: wrap;
gap: 16px;
}
.bulletin-title {
font-family: 'Oswald', sans-serif;
font-size: 15px;
font-weight: 700;
letter-spacing: 1.5px;
color: #ffffff;
display: flex;
align-items: center;
gap: 10px;
text-transform: uppercase;
}
.pulsing-alert-dot {
width: 8px;
height: 8px;
background-color: var(--kia-live-red, #EA0029);
border-radius: 50%;
display: inline-block;
position: relative;
}
.pulsing-alert-dot::after {
content: '';
width: 100%;
height: 100%;
background-color: var(--kia-live-red, #EA0029);
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
animation: pulse-ring 1.8s infinite ease-in-out;
}
@keyframes pulse-ring {
0% { transform: scale(1); opacity: 0.8; }
100% { transform: scale(3); opacity: 0; }
}
.bulletin-tabs {
display: flex;
gap: 6px;
}
.bulletin-tab-btn {
background-color: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
color: #94a3b8;
padding: 8px 16px;
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: all 0.25s ease;
border-radius: 4px;
}
.bulletin-tab-btn:hover {
background-color: rgba(255, 255, 255, 0.08);
color: #ffffff;
}
.bulletin-tab-btn.active {
background-color: var(--kia-live-red, #EA0029);
border-color: var(--kia-live-red, #EA0029);
color: #ffffff;
}
.bulletin-panes {
min-height: 110px;
}
.bulletin-pane {
animation: tabFadeIn 0.4s ease-out forwards;
}
@keyframes tabFadeIn {
from { opacity: 0; transform: translateY(5px); }
to { opacity: 1; transform: translateY(0); }
}
.bulletin-item {
display: flex;
align-items: center;
gap: 16px;
padding: 14px 12px;
border-radius: 6px;
transition: background-color 0.2s;
}
.bulletin-item:hover {
background-color: rgba(255, 255, 255, 0.03);
}
.bulletin-item:not(:last-child) {
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.item-tag {
font-size: 10.5px;
font-weight: 700;
padding: 2px 8px;
border-radius: 2px;
text-transform: uppercase;
letter-spacing: 0.5px;
white-space: nowrap;
}
.bulletin-item .item-tag {
background-color: rgba(234, 0, 41, 0.15);
color: var(--kia-live-red, #EA0029);
border: 1px solid rgba(234, 0, 41, 0.3);
}
.bulletin-item.urgent .item-tag {
background-color: var(--kia-live-red, #EA0029);
color: #ffffff;
border-color: var(--kia-live-red, #EA0029);
}
.bulletin-item .item-tag.warning {
background-color: rgba(245, 158, 11, 0.15);
color: #f59e0b;
border: 1px solid rgba(245, 158, 11, 0.3);
}
.bulletin-item .item-tag.update {
background-color: rgba(59, 130, 246, 0.15);
color: #3b82f6;
border: 1px solid rgba(59, 130, 246, 0.3);
}
.bulletin-item .item-tag.info {
background-color: rgba(255, 255, 255, 0.06);
color: #cbd5e1;
border: 1px solid rgba(255, 255, 255, 0.15);
}
.item-body {
display: flex;
justify-content: space-between;
align-items: center;
flex: 1;
gap: 16px;
flex-wrap: wrap;
}
.item-title {
color: #e2e8f0;
font-size: 14.5px;
text-decoration: none;
font-weight: 500;
transition: color 0.15s;
}
.bulletin-item:hover .item-title {
color: #ffffff;
}
.item-date {
color: #64748b;
font-size: 12.5px;
font-family: 'Outfit', sans-serif;
}
.emergency-article-header-banner {
display: flex;
align-items: center;
gap: 14px;
background: rgba(234, 0, 41, 0.12);
border: 1px solid rgba(234, 0, 41, 0.35);
border-radius: 8px;
padding: 14px 18px;
margin-bottom: 24px;
box-shadow: 0 4px 20px rgba(234, 0, 41, 0.15);
}
.emergency-header-badge {
display: inline-flex;
align-items: center;
gap: 6px;
background: #EA0029;
color: #FFFFFF;
font-size: 11px;
font-weight: 800;
padding: 4px 8px;
border-radius: 4px;
letter-spacing: 0.5px;
white-space: nowrap;
}
.emergency-header-text {
font-size: 14px;
color: #F8FAFC;
line-height: 1.5;
}
.emergency-header-text strong {
color: #FF4D6D;
}
.emergency-badge-tag {
display: inline-block;
color: #EA0029;
font-weight: 800;
margin-right: 6px;
}
@media (max-width: 768px) {
.emergency-alert-bar {
padding: 10px 0;
}
.alert-bar-inner {
flex-wrap: wrap;
gap: 10px;
}
.alert-bar-rolling {
width: 100%;
order: 3;
flex: none;
}
.alert-bar-actions {
margin-left: auto;
}
.bulletin-header {
flex-direction: column;
align-items: flex-start;
}
.bulletin-tabs {
width: 100%;
overflow-x: auto;
padding-bottom: 6px;
}
.bulletin-tab-btn {
flex: 1;
text-align: center;
white-space: nowrap;
font-size: 12px;
padding: 8px 12px;
}
.item-body {
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
}
.hero .search-wrap {
max-width: 680px;
margin: 0 auto;
position: relative;
}
.hero .search-wrap::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background-color: var(--kia-live-red, #EA0029);
z-index: 10;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.hero .search input[type="search"] {
background-color: rgba(12, 26, 37, 0.45) !important;
border: 1px solid rgba(255, 255, 255, 0.12) !important;
border-radius: 4px !important;
color: #ffffff !important;
font-size: 15px !important;
height: 52px !important;
padding: 0 16px 0 46px !important;
backdrop-filter: blur(10px) !important;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3) !important;
transition: all 0.3s ease !important;
box-sizing: border-box !important;
}
.hero .search input[type="search"]::placeholder {
color: rgba(255, 255, 255, 0.35) !important;
}
.hero .search input[type="search"]:focus {
border-color: rgba(234, 0, 41, 0.4) !important;
box-shadow: 0 0 30px rgba(234, 0, 41, 0.15), 0 10px 40px rgba(0, 0, 0, 0.4) !important;
background-color: rgba(12, 26, 37, 0.6) !important;
}
.hero .search-wrap .search-icon {
left: 20px !important;
color: rgba(255, 255, 255, 0.4) !important;
transition: color 0.3s ease;
z-index: 5;
}
.hero .search-wrap:focus-within .search-icon {
color: var(--kia-live-red, #EA0029) !important;
}
.search-trending-tags {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-top: 20px;
flex-wrap: wrap;
width: 100%;
max-width: 680px;
margin-left: auto;
margin-right: auto;
}
.tag-label {
font-family: 'Oswald', sans-serif;
font-size: 11px;
font-weight: 700;
color: rgba(255, 255, 255, 0.4);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.trend-tag {
font-size: 11.5px;
font-weight: 500;
color: rgba(255, 255, 255, 0.6) !important;
text-decoration: none !important;
transition: all 0.2s ease;
background-color: rgba(255, 255, 255, 0.03);
padding: 4px 10px;
border-radius: 2px;
border: 1px solid rgba(255, 255, 255, 0.05);
}
.trend-tag:hover {
color: #ffffff !important;
background-color: rgba(234, 0, 41, 0.1) !important;
border-color: rgba(234, 0, 41, 0.3) !important;
transform: translateY(-1px);
}
html, body, main, #main-content, .layout, .main-section {
background-color: #05141F !important;
color: #ffffff !important;
font-family: 'Oswald', 'Noto Sans KR', sans-serif !important;
}
svg {
max-width: 100%;
}
.search-input-icon {
width: 18px !important;
height: 18px !important;
min-width: 18px !important;
min-height: 18px !important;
max-width: 18px !important;
max-height: 18px !important;
color: rgba(255, 255, 255, 0.5) !important;
position: absolute !important;
left: 18px !important;
top: 50% !important;
transform: translateY(-50%) !important;
pointer-events: none !important;
}
.card-icon-svg {
width: 24px !important;
height: 24px !important;
min-width: 24px !important;
min-height: 24px !important;
max-width: 24px !important;
max-height: 24px !important;
color: rgba(255, 255, 255, 0.7) !important;
}
.hero-section {
position: relative !important;
min-height: 520px !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
padding: 80px 5% 60px 5% !important;
background-color: #030A12 !important;
background-image:
linear-gradient(to bottom, rgba(5, 15, 25, 0.70) 0%, rgba(5, 15, 25, 0.45) 50%, rgba(3, 10, 18, 0.95) 100%),
radial-gradient(circle at 15% 30%, rgba(0, 210, 255, 0.25) 0%, transparent 50%),
radial-gradient(circle at 85% 70%, rgba(138, 43, 226, 0.28) 0%, transparent 55%),
url(/hc/theming_assets/01KYHTD7W1NJH4EP5SE3R9GE20) !important;
background-position: center 40% !important;
background-size: cover !important;
background-repeat: no-repeat !important;
box-sizing: border-box !important;
}
.hero-inner-left {
max-width: 800px !important;
margin: 0 auto !important;
text-align: center !important;
}
.hero-micro {
font-family: 'Oswald', sans-serif !important;
font-size: 13px !important;
font-weight: 600 !important;
letter-spacing: 3px !important;
text-transform: uppercase !important;
color: var(--kia-live-red, #EA0029) !important;
margin-bottom: 12px !important;
}
.hero-title {
font-family: 'Oswald', sans-serif !important;
font-size: clamp(32px, 4vw, 54px) !important;
font-weight: 700 !important;
line-height: 1.1 !important;
letter-spacing: 1px !important;
color: #ffffff !important;
margin-bottom: 36px !important;
text-transform: uppercase !important;
}
.search-wrapper-spacex {
width: 100% !important;
max-width: 680px !important;
margin: 0 auto !important;
}
.search-input-container {
position: relative !important;
display: flex !important;
align-items: center !important;
background: linear-gradient(135deg, rgba(15, 30, 48, 0.88), rgba(10, 22, 36, 0.92)) !important;
border: 1px solid rgba(255, 255, 255, 0.18) !important;
border-radius: 30px !important;
padding: 4px 16px 4px 48px !important;
backdrop-filter: blur(16px) !important;
box-shadow: 0 10px 35px rgba(0, 0, 0, 0.45) !important;
transition: all 0.25s ease !important;
}
.search-input-container:focus-within {
border-color: #38BDF8 !important;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55), 0 0 24px rgba(56, 189, 248, 0.25) !important;
}
.search-input-container form {
flex: 1 !important;
display: flex !important;
align-items: center !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
background: transparent !important;
box-shadow: none !important;
}
html body .search-input-container input[type="search"],
html body .search-input-container form input[type="search"],
.search-input-spacex {
background: transparent !important;
border: none !important;
border-radius: 0 !important;
outline: none !important;
box-shadow: none !important;
color: #FFFFFF !important;
font-size: 15px !important;
font-weight: 500 !important;
padding: 14px 12px 14px 0 !important;
width: 100% !important;
}
.search-input-container input[type="search"]::-webkit-search-cancel-button,
.search-input-container input[type="search"]::-webkit-search-decoration,
.search-input-spacex::-webkit-search-cancel-button,
.search-input-spacex::-webkit-search-decoration {
-webkit-appearance: none !important;
display: none !important;
}
html body .search-input-container input[type="search"]::placeholder,
.search-input-spacex::placeholder {
color: rgba(255, 255, 255, 0.45) !important;
}
.search-input-container .clear-button {
width: 28px !important;
height: 28px !important;
min-width: 28px !important;
padding: 0 !important;
margin: 0 4px 0 0 !important;
display: none !important;
align-items: center !important;
justify-content: center !important;
background: transparent !important;
border: none !important;
border-radius: 6px !important;
color: #94A3B8 !important;
cursor: pointer !important;
transition: background 0.15s ease, color 0.15s ease !important;
box-shadow: none !important;
}
.search-input-container form.search-has-value .clear-button,
.search-input-container.search-has-value .clear-button {
display: inline-flex !important;
}
.search-input-container .clear-button:hover {
background: rgba(255, 255, 255, 0.06) !important;
color: #F8FAFC !important;
box-shadow: none !important;
}
.search-input-container .clear-button svg {
width: 11px !important;
height: 11px !important;
stroke-width: 2.2 !important;
}
.scroll-down-indicator {
position: absolute !important;
bottom: 20px !important;
left: 50% !important;
transform: translateX(-50%) !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 8px !important;
font-family: 'Oswald', sans-serif !important;
font-size: 10px !important;
font-weight: 600 !important;
letter-spacing: 2px !important;
color: rgba(255, 255, 255, 0.35) !important;
cursor: pointer !important;
text-decoration: none !important;
transition: color 0.3s ease !important;
}
.scroll-down-indicator:hover {
color: #ffffff !important;
}
.scroll-down-line {
width: 1px !important;
height: 24px !important;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.4), transparent) !important;
}
.categories-section {
padding: clamp(32px, 5vw, 60px) 5% !important;
background-color: #05141F !important;
max-width: 1540px !important;
margin: 0 auto !important;
}
.system-bulletin-board {
background-color: rgba(15, 35, 52, 0.85) !important;
border: 1px solid rgba(255, 255, 255, 0.16) !important;
border-radius: 16px !important;
padding: 26px 30px !important;
margin-bottom: 40px !important;
backdrop-filter: blur(16px) !important;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35) !important;
}
.bulletin-header {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
padding-bottom: 16px !important;
margin-bottom: 16px !important;
}
.bulletin-title {
display: flex !important;
align-items: center !important;
gap: 10px !important;
font-family: 'Oswald', sans-serif !important;
font-size: 13px !important;
font-weight: 700 !important;
letter-spacing: 1.5px !important;
color: #ffffff !important;
text-transform: uppercase !important;
}
.pulsing-alert-dot {
width: 9px !important;
height: 9px !important;
background-color: #FF3B5C !important;
border-radius: 50% !important;
box-shadow: 0 0 12px #FF3B5C !important;
animation: alertPulse 2s infinite !important;
}
@keyframes alertPulse {
0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 59, 92, 0.7); }
70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(255, 59, 92, 0); }
100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 59, 92, 0); }
}
.bulletin-tabs {
display: flex !important;
gap: 8px !important;
}
.bulletin-tab-btn {
background: rgba(255, 255, 255, 0.05) !important;
border: 1px solid rgba(255, 255, 255, 0.12) !important;
border-radius: 6px !important;
color: #94A3B8 !important;
font-size: 12px !important;
font-weight: 600 !important;
padding: 6px 14px !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
}
.bulletin-tab-btn.active {
background-color: #38BDF8 !important;
border-color: #38BDF8 !important;
color: #05141F !important;
font-weight: 700 !important;
}
.bulletin-tab-btn:hover:not(.active) {
background-color: rgba(255, 255, 255, 0.12) !important;
color: #FFFFFF !important;
}
.bulletin-item {
display: flex !important;
align-items: center !important;
gap: 16px !important;
padding: 14px 0 !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
transition: background-color 0.15s ease !important;
}
.bulletin-item:last-child {
border-bottom: none !important;
}
.item-tag {
font-size: 11px !important;
font-weight: 700 !important;
padding: 3px 10px !important;
border-radius: 6px !important;
letter-spacing: 0.5px !important;
background-color: rgba(255, 59, 92, 0.18) !important;
color: #FF3B5C !important;
border: 1px solid rgba(255, 59, 92, 0.35) !important;
white-space: nowrap !important;
}
.item-body {
flex: 1 !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 16px !important;
}
.item-title {
color: #F8FAFC !important;
font-size: 14.5px !important;
font-weight: 500 !important;
text-decoration: none !important;
transition: color 0.2s ease !important;
}
.item-title:hover {
color: #38BDF8 !important;
text-decoration: underline !important;
}
.item-date {
color: #94A3B8 !important;
font-size: 12.5px !important;
white-space: nowrap !important;
}
@media (min-width: 1024px) {
.categories-section {
display: flex !important;
flex-direction: column !important;
gap: 32px !important;
}
.system-bulletin-board {
margin-bottom: 0 !important;
width: 100% !important;
}
.categories-grid {
width: 100% !important;
}
}
.categories-grid {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)) !important;
gap: 24px !important;
width: 100% !important;
}
.categories-grid[data-count="1"] {
grid-template-columns: 1fr !important;
}
.categories-grid[data-count="2"] {
grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)) !important;
}
.categories-grid[data-count="3"],
.categories-grid[data-count="4"],
.categories-grid[data-count="5"],
.categories-grid[data-count="6"],
.categories-grid:not([data-count="1"]):not([data-count="2"]):not([data-count="3"]):not([data-count="4"]):not([data-count="5"]):not([data-count="6"]) {
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)) !important;
max-width: 100% !important;
}
.category-card-kia[data-category-id="61584136339609"],
.category-card-spacex[data-category-id="61584136339609"],
.category-card-kia[data-category-id="59244515175449"],
.category-card-spacex[data-category-id="59244515175449"] {
display: none !important;
}
.category-card-kia[data-category-id="61584115916569"],
.category-card-spacex[data-category-id="61584115916569"],
.header-tab-dropdown[data-category-id="61584115916569"],
.chip-btn[data-cat-id="61584115916569"],
[data-category-id="61584115916569"],
[data-cat-id="61584115916569"],
a[href*="/categories/61584115916569"],
li:has(> a[href*="/categories/61584115916569"]),
.category-card-kia[data-category-id="63187291205785"],
.category-card-spacex[data-category-id="63187291205785"],
.header-tab-dropdown[data-category-id="63187291205785"],
.chip-btn[data-cat-id="63187291205785"],
[data-category-id="63187291205785"],
[data-cat-id="63187291205785"],
a[href*="/categories/63187291205785"],
li:has(> a[href*="/categories/63187291205785"]) {
display: none !important;
}
.category-card-kia {
background: var(--kia-surface, #0B1926) !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
border-radius: 14px !important;
padding: 24px 22px !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
cursor: pointer !important;
position: relative !important;
overflow: hidden !important;
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
}
.category-card-kia:hover {
background: var(--kia-surface-hover, #102334) !important;
border-color: rgba(255, 255, 255, 0.22) !important;
transform: translateY(-3px) !important;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.16) !important;
}
.category-card-kia::after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 0;
height: 2px;
background: var(--kia-live-red, #EA0029);
transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.category-card-kia:hover::after {
width: 48px;
}
.card-meta-row {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
margin-bottom: 16px !important;
}
.category-badge {
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 0.8px !important;
text-transform: uppercase !important;
color: var(--kia-live-red, #EA0029) !important;
background: rgba(234, 0, 41, 0.12) !important;
padding: 3px 8px !important;
border-radius: 6px !important;
border: 1px solid rgba(234, 0, 41, 0.2) !important;
}
.card-arrow-indicator {
width: 30px !important;
height: 30px !important;
border-radius: 50% !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
color: #64748B !important;
transition: all 0.25s ease !important;
}
.category-card-kia:hover .card-arrow-indicator {
color: var(--kia-live-red, #EA0029) !important;
border-color: var(--kia-live-red, #EA0029) !important;
transform: translateX(2px) !important;
}
.category-card-kia .category-title {
font-family: 'Oswald', 'Inter', -apple-system, sans-serif !important;
font-size: 22px !important;
font-weight: 700 !important;
color: #F8FAFC !important;
margin: 0 0 8px 0 !important;
line-height: 1.25 !important;
letter-spacing: 0.5px !important;
transition: color 0.2s ease !important;
}
.category-card-kia:hover .category-title {
color: #FFFFFF !important;
}
.category-card-kia .category-sub-desc {
font-size: 12.5px !important;
color: #94A3B8 !important;
line-height: 1.6 !important;
margin: 0 !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
.card-inner-bottom {
margin-top: 24px !important;
padding-top: 16px !important;
border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}
.quick-links-segment {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 8px !important;
}
@media (max-width: 599px) {
.quick-links-segment {
grid-template-columns: 1fr !important;
}
}
.segment-btn {
min-height: 44px !important;   padding: 0 12px !important;
border-radius: 8px !important;
background: rgba(255, 255, 255, 0.04) !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
color: #E2E8F0 !important;
text-decoration: none !important;
font-size: 12.5px !important;
font-weight: 600 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
transition: all 0.2s ease !important;
cursor: pointer !important;
}
.segment-btn:hover, .segment-btn:active {
background: rgba(234, 0, 41, 0.12) !important;
border-color: rgba(234, 0, 41, 0.4) !important;
color: #FFFFFF !important;
transform: translateY(-1px) !important;
}
.segment-icon-svg {
width: 15px !important;
height: 15px !important;
flex-shrink: 0 !important;
color: inherit !important;
}
.segment-label {
font-size: 12.5px !important;
font-weight: 600 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.pulse-badge {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
background-color: rgba(0, 230, 153, 0.1) !important;
color: #00E699 !important;
border: 1px solid rgba(0, 230, 153, 0.3) !important;
font-size: 10px !important;
font-weight: 700 !important;
padding: 2px 8px !important;
border-radius: 2px !important;
}
.badge-dot {
width: 6px !important;
height: 6px !important;
background-color: #00E699 !important;
border-radius: 50% !important;
}
.tag-new {
background-color: rgba(234, 0, 41, 0.1) !important;
color: var(--kia-live-red, #EA0029) !important;
border: 1px solid rgba(234, 0, 41, 0.3) !important;
font-size: 10px !important;
font-weight: 700 !important;
padding: 2px 8px !important;
border-radius: 2px !important;
}
.hero__bg-effects {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
pointer-events: none;
overflow: hidden !important;
max-width: 100% !important;
z-index: 0;
}
.hero__orb {
position: absolute;
border-radius: 50%;
filter: blur(80px);
opacity: 0.25;
animation: orbFloat 12s infinite alternate ease-in-out;
}
.hero__orb--1 {
width: 350px; height: 350px;
background: radial-gradient(circle, #EA0029 0%, transparent 70%);
top: -80px; left: -50px;
}
.hero__orb--2 {
width: 320px; height: 320px;
background: radial-gradient(circle, #00E699 0%, transparent 70%);
bottom: -100px; right: -50px;
animation-delay: -4s;
}
@media (min-width: 768px) {
.hero__orb--2 {
width: 450px; height: 450px;
}
}
.hero__orb--3 {
width: 300px; height: 300px;
background: radial-gradient(circle, #05141F 0%, transparent 70%);
top: 40%; left: 40%;
animation-delay: -8s;
}
@keyframes orbFloat {
0% { transform: translate(0, 0) scale(1); }
100% { transform: translate(30px, -20px) scale(1.1); }
}
.category-container {
max-width: 1720px;
margin: 0 auto;
padding: 30px 30px 60px;
}
.page-header h1 {
font-size: clamp(26px, 3.5vw, 36px);
font-weight: 800;
color: #FFFFFF !important;
letter-spacing: -0.5px;
margin-bottom: 10px;
}
.page-header-description {
color: #94A3B8 !important;
font-size: 15px;
line-height: 1.6;
}
.section-tree {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
gap: 24px;
margin-top: 36px;
}
.section-tree .section {
background: rgba(15, 30, 48, 0.75) !important;
border: 1px solid rgba(255, 255, 255, 0.12) !important;
border-radius: 16px !important;
padding: 24px 28px !important;
backdrop-filter: blur(12px);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease, box-shadow 0.25s ease;
}
.section-tree .section:hover {
transform: translateY(-4px);
border-color: rgba(56, 189, 248, 0.4) !important;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4), 0 0 20px rgba(56, 189, 248, 0.15);
}
.section-tree-title a {
color: #FFFFFF !important;
font-size: 19px !important;
font-weight: 700 !important;
text-decoration: none !important;
transition: color 0.2s ease;
}
.section-tree-title a:hover {
color: #38BDF8 !important;
}
.article-list {
list-style: none;
padding: 0;
margin: 16px 0 0;
}
.article-list-item {
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 8px;
}
.article-list-link {
color: #CBD5E1 !important;
font-size: 14.5px !important;
line-height: 1.5;
text-decoration: none !important;
transition: color 0.15s ease;
}
.article-list-link:hover {
color: #FFFFFF !important;
text-decoration: underline !important;
}
.see-all-articles {
display: inline-block;
margin-top: 16px;
color: #38BDF8 !important;
font-size: 14px;
font-weight: 600;
text-decoration: none !important;
transition: opacity 0.2s ease;
}
.see-all-articles:hover {
opacity: 0.8;
text-decoration: underline !important;
}
.sub-nav {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 16px;
padding: 16px 0;
margin-bottom: 16px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.breadcrumbs li,
.breadcrumbs li a {
color: #94A3B8 !important;
font-size: 14px;
text-decoration: none !important;
}
.breadcrumbs li a:hover {
color: #FFFFFF !important;
}
.article-container {
max-width: 1350px !important;
margin: 0 auto !important;
padding: 30px 20px 80px !important;
}
.article-title {
color: #FFFFFF !important;
font-size: clamp(24px, 3.2vw, 36px) !important;
font-weight: 800 !important;
line-height: 1.3 !important;
letter-spacing: -0.5px !important;
margin-bottom: 16px !important;
}
.article-author .article-meta,
.article-author .meta-data,
.article-meta a {
color: #94A3B8 !important;
font-size: 13.5px !important;
}
.article-body {
color: #E2E8F0 !important;
font-size: 16px !important;
line-height: 1.75 !important;
margin-top: 30px !important;
}
.article-body p,
.article-body span,
.article-body div,
.article-body li,
.article-body td {
color: #E2E8F0 !important;
}
.article-body h1,
.article-body h2,
.article-body h3,
.article-body h4,
.article-body h5,
.article-body h6 {
color: #FFFFFF !important;
font-weight: 700 !important;
margin-top: 32px !important;
margin-bottom: 14px !important;
line-height: 1.35 !important;
}
.article-body h1 { font-size: 26px !important; border-bottom: 1px solid rgba(255, 255, 255, 0.12); padding-bottom: 10px; }
.article-body h2 { font-size: 22px !important; }
.article-body h3 { font-size: 19px !important; }
.article-body a {
color: #38BDF8 !important;
text-decoration: underline !important;
font-weight: 500 !important;
transition: opacity 0.2s ease !important;
}
.article-body a:hover {
opacity: 0.8 !important;
}
.article-body table {
width: 100% !important;
border-collapse: collapse !important;
margin: 24px 0 !important;
background: rgba(15, 30, 48, 0.7) !important;
border: 1px solid rgba(255, 255, 255, 0.14) !important;
border-radius: 10px !important;
}
html body .sub-nav #query,
html body .sub-nav input[type="search"],
html body .sub-nav .search-container input,
html body .sub-nav form.search input {
display: block !important;
width: 100% !important;
background: rgba(8, 18, 34, 0.88) !important;
color: #FFFFFF !important;
border: 1.5px solid rgba(255, 255, 255, 0.13) !important;
border-radius: 26px !important;
padding: 10px 18px 10px 40px !important;    font-size: 13px !important;
font-weight: 500 !important;
letter-spacing: 0.1px !important;
outline: none !important;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4) !important;
transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
-webkit-appearance: none !important;
}
html body .sub-nav #query:focus,
html body .sub-nav input[type="search"]:focus {
border-color: rgba(56, 189, 248, 0.55) !important;
box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.12), 0 4px 18px rgba(0, 0, 0, 0.5) !important;
}
html body .sub-nav #query::placeholder,
html body .sub-nav input[type="search"]::placeholder {
color: rgba(148, 163, 184, 0.7) !important;
font-weight: 400 !important;
}
html body .category-container,
html body .category-content {
display: block !important;
width: 100% !important;
max-width: 1720px !important;
margin: 0 auto !important;
float: none !important;
flex: none !important;
}
html body .category-container .section-tree,
html body #main-content.section-tree,
html body .section-tree-grid {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)) !important;
gap: 24px !important;
width: 100% !important;
margin-top: 32px !important;
}
html body .sub-nav .search-container {
position: relative !important;       background: transparent !important;
border: none !important;
box-shadow: none !important;
width: clamp(200px, 18vw, 260px) !important;    flex-shrink: 0 !important;
margin-left: auto !important;        padding: 0 !important;
}
html body .sub-nav form.search {
position: static !important;         background: transparent !important;
border: none !important;
box-shadow: none !important;
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
html body .sub-nav .search-container::before {
content: "" !important;
position: absolute !important;
left: 14px !important;
top: 50% !important;
transform: translateY(-50%) !important;
width: 14px !important;
height: 14px !important;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2338BDF8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") center / contain no-repeat !important;
z-index: 20 !important;              pointer-events: none !important;
opacity: 0.85 !important;
}
.article-body th {
background: rgba(15, 35, 52, 0.95) !important;
color: #FFFFFF !important;
font-weight: 700 !important;
font-size: 14.5px !important;
padding: 14px 18px !important;
border-bottom: 2px solid rgba(255, 255, 255, 0.18) !important;
text-align: left !important;
}
.article-body td {
padding: 12px 18px !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
font-size: 14.5px !important;
}
.article-body tr:last-child td {
border-bottom: none !important;
}
.article-body code,
.article-body pre {
background: rgba(10, 20, 32, 0.95) !important;
color: #00E6FF !important;
border: 1px solid rgba(255, 255, 255, 0.15) !important;
border-radius: 8px !important;
padding: 4px 10px !important;
font-family: SFMono-Regular, Consolas, Monaco, monospace !important;
font-size: 14px !important;
}
.article-body pre {
padding: 16px 20px !important;
overflow-x: auto !important;
line-height: 1.5 !important;
}
.article-body blockquote {
border: 1px solid rgba(56, 189, 248, 0.25) !important;
background: rgba(56, 189, 248, 0.06) !important;
color: #CBD5E1 !important;
padding: 16px 20px !important;
border-radius: 10px !important;
margin: 24px 0 !important;
}
html body .article-body .wysiwyg-callout {
border-radius: 12px !important;
padding: 18px 22px !important;
margin: 24px 0 !important;
border: 1px solid !important;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4) !important;
}
html body .article-body .wysiwyg-callout-info {
background: rgba(56, 189, 248, 0.07) !important;
border: 1px solid rgba(56, 189, 248, 0.35) !important;
box-shadow: 0 4px 20px rgba(56, 189, 248, 0.12) !important;
}
html body .article-body .wysiwyg-callout-info,
html body .article-body .wysiwyg-callout-info p,
html body .article-body .wysiwyg-callout-info span,
html body .article-body .wysiwyg-callout-info div,
html body .article-body .wysiwyg-callout-info li,
html body .article-body .wysiwyg-callout-info td,
html body .article-body .wysiwyg-callout-info em {
color: #E2E8F0 !important;
}
html body .article-body .wysiwyg-callout-info strong,
html body .article-body .wysiwyg-callout-info b {
color: #FFFFFF !important;
}
html body .article-body .wysiwyg-callout-info a {
color: #38BDF8 !important;
text-decoration: underline !important;
}
html body .article-body .wysiwyg-callout-error {
background: rgba(239, 68, 68, 0.08) !important;
border: 1px solid rgba(248, 113, 113, 0.35) !important;
box-shadow: 0 4px 20px rgba(239, 68, 68, 0.12) !important;
}
html body .article-body .wysiwyg-callout-error,
html body .article-body .wysiwyg-callout-error p,
html body .article-body .wysiwyg-callout-error span,
html body .article-body .wysiwyg-callout-error div,
html body .article-body .wysiwyg-callout-error li,
html body .article-body .wysiwyg-callout-error td,
html body .article-body .wysiwyg-callout-error em {
color: #FEE2E2 !important;
}
html body .article-body .wysiwyg-callout-error strong,
html body .article-body .wysiwyg-callout-error b {
color: #FFFFFF !important;
}
html body .article-body .wysiwyg-callout-error a {
color: #F87171 !important;
text-decoration: underline !important;
}
html body .article-body .wysiwyg-callout-warning {
background: rgba(245, 158, 11, 0.08) !important;
border: 1px solid rgba(251, 191, 36, 0.35) !important;
box-shadow: 0 4px 20px rgba(245, 158, 11, 0.12) !important;
}
html body .article-body .wysiwyg-callout-warning,
html body .article-body .wysiwyg-callout-warning p,
html body .article-body .wysiwyg-callout-warning span,
html body .article-body .wysiwyg-callout-warning div,
html body .article-body .wysiwyg-callout-warning li,
html body .article-body .wysiwyg-callout-warning td,
html body .article-body .wysiwyg-callout-warning em {
color: #FEF3C7 !important;
}
html body .article-body .wysiwyg-callout-warning strong,
html body .article-body .wysiwyg-callout-warning b {
color: #FFFFFF !important;
}
html body .article-body .wysiwyg-callout-warning a {
color: #FBBF24 !important;
text-decoration: underline !important;
}
html body .article-body .wysiwyg-callout-tip {
background: rgba(16, 185, 129, 0.08) !important;
border: 1px solid rgba(52, 211, 153, 0.35) !important;
box-shadow: 0 4px 20px rgba(16, 185, 129, 0.12) !important;
}
html body .article-body .wysiwyg-callout-tip,
html body .article-body .wysiwyg-callout-tip p,
html body .article-body .wysiwyg-callout-tip span,
html body .article-body .wysiwyg-callout-tip div,
html body .article-body .wysiwyg-callout-tip li,
html body .article-body .wysiwyg-callout-tip td,
html body .article-body .wysiwyg-callout-tip em {
color: #D1FAE5 !important;
}
html body .article-body .wysiwyg-callout-tip strong,
html body .article-body .wysiwyg-callout-tip b {
color: #FFFFFF !important;
}
html body .article-body .wysiwyg-callout-tip a {
color: #34D399 !important;
text-decoration: underline !important;
}
html body .article-body .light-box,
html body .article-body .bg-light,
html body .article-body [style*="background: white" i],
html body .article-body [style*="background: #fff" i],
html body .article-body [style*="background-color: white" i],
html body .article-body [style*="background-color: #fff" i] {
background-color: #F8FAFC !important;
color: #0F172A !important;
border-radius: 10px !important;
}
html body .article-body .light-box *,
html body .article-body .bg-light *,
html body .article-body [style*="background: white" i] *,
html body .article-body [style*="background: #fff" i] *,
html body .article-body [style*="background-color: white" i] *,
html body .article-body [style*="background-color: #fff" i] * {
color: #0F172A !important;
}
.sidenav-title {
color: #94A3B8 !important;
font-size: 12.5px !important;
font-weight: 700 !important;
letter-spacing: 1px !important;
text-transform: uppercase !important;
margin-bottom: 14px !important;
}
.sidenav-item {
color: #CBD5E1 !important;
font-size: 14px !important;
padding: 8px 12px !important;
display: block !important;
text-decoration: none !important;
border-radius: 6px !important;
transition: all 0.2s ease !important;
}
.sidenav-item:hover {
color: #FFFFFF !important;
background: rgba(255, 255, 255, 0.08) !important;
}
.sidenav-item.current-article {
color: #38BDF8 !important;
font-weight: 700 !important;
background: rgba(56, 189, 248, 0.14) !important;
border-left: 3px solid #38BDF8 !important;
}
.article-votes {
border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
padding: 36px 0 !important;
text-align: center !important;
}
.article-votes-question {
color: #FFFFFF !important;
font-size: 17px !important;
font-weight: 700 !important;
margin-bottom: 16px !important;
letter-spacing: -0.3px !important;
}
.article-votes-controls {
display: flex !important;
justify-content: center !important;
gap: 12px !important;
}
.article-vote {
background-color: rgba(15, 35, 52, 0.85) !important;
border: 1px solid rgba(56, 189, 248, 0.35) !important;
border-radius: 8px !important;
color: #F1F5F9 !important;
font-size: 14px !important;
font-weight: 600 !important;
line-height: 2.2 !important;
margin: 0 !important;
min-width: 96px !important;
padding: 0 24px !important;
cursor: pointer !important;
backdrop-filter: blur(8px) !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.article-vote:hover,
.article-vote:focus {
background-color: rgba(56, 189, 248, 0.16) !important;
border-color: #38BDF8 !important;
color: #38BDF8 !important;
transform: translateY(-2px) !important;
box-shadow: 0 6px 18px rgba(56, 189, 248, 0.25) !important;
}
.article-vote:active {
transform: translateY(0) !important;
}
.article-vote[aria-pressed="true"],
.article-vote.button-primary {
background-color: #38BDF8 !important;
border-color: #38BDF8 !important;
color: #05141F !important;
font-weight: 700 !important;
box-shadow: 0 0 20px rgba(56, 189, 248, 0.5) !important;
transform: translateY(-1px) !important;
}
.article-votes-count {
display: block !important;
margin-top: 14px !important;
}
.article-vote-label {
color: #94A3B8 !important;
font-size: 13.5px !important;
font-weight: 500 !important;
}
.article-relatives {
border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
}
.recent-articles-title,
.related-articles-title {
color: #FFFFFF !important;
font-size: 17px !important;
font-weight: 700 !important;
margin-bottom: 12px !important;
}
.recent-articles li a,
.related-articles li a {
color: #CBD5E1 !important;
font-size: 14.5px !important;
text-decoration: none !important;
transition: color 0.15s ease !important;
}
.recent-articles li a:hover,
.related-articles li a:hover {
color: #38BDF8 !important;
text-decoration: underline !important;
}
.section-container {
max-width: 1350px !important;
margin: 0 auto !important;
padding: 30px 20px 80px !important;
}
.section-content .page-header {
display: flex !important;
flex-direction: column !important;
gap: 12px !important;
margin-bottom: 28px !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
padding-bottom: 20px !important;
}
.section-content .page-header h1 {
color: #FFFFFF !important;
font-size: clamp(26px, 3.5vw, 36px) !important;
font-weight: 800 !important;
letter-spacing: -0.5px !important;
margin: 0 !important;
}
.section-list {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
gap: 20px !important;
margin: 24px 0 36px !important;
list-style: none !important;
padding: 0 !important;
}
.section-list-item {
margin: 0 !important;
}
.section-list-item a {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
background: rgba(15, 35, 52, 0.85) !important;
border: 1px solid rgba(255, 255, 255, 0.16) !important;
border-radius: 12px !important;
padding: 20px 24px !important;
color: #FFFFFF !important;
font-size: 17px !important;
font-weight: 700 !important;
text-decoration: none !important;
backdrop-filter: blur(14px) !important;
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25) !important;
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.section-list-item a:hover {
background: rgba(20, 45, 68, 0.95) !important;
border-color: #38BDF8 !important;
color: #38BDF8 !important;
transform: translateY(-3px) !important;
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4), 0 0 16px rgba(56, 189, 248, 0.2) !important;
}
.section-list-item a svg {
color: #38BDF8 !important;
transition: transform 0.2s ease !important;
}
.section-list-item a:hover svg {
transform: translateX(5px) !important;
}
.section-content .article-list {
background: rgba(15, 30, 48, 0.7) !important;
border: 1px solid rgba(255, 255, 255, 0.12) !important;
border-radius: 16px !important;
padding: 24px 30px !important;
margin-top: 24px !important;
backdrop-filter: blur(12px) !important;
list-style: none !important;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
}
.section-content .article-list-item {
padding: 12px 0 !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
display: flex !important;
align-items: center !important;
gap: 10px !important;
}
.section-content .article-list-item:last-child {
border-bottom: none !important;
}
.section-content .article-list-item a,
.section-content .article-list-link {
color: #CBD5E1 !important;
font-size: 15.5px !important;
font-weight: 500 !important;
text-decoration: none !important;
transition: color 0.15s ease !important;
}
.section-content .article-list-item a:hover,
.section-content .article-list-link:hover {
color: #FFFFFF !important;
text-decoration: underline !important;
}
.section-subscribe .button,
.subscribe-button,
.article-subscribe .button {
background: rgba(56, 189, 248, 0.15) !important;
border: 1px solid #38BDF8 !important;
color: #38BDF8 !important;
font-weight: 700 !important;
border-radius: 20px !important;
padding: 8px 20px !important;
font-size: 13.5px !important;
transition: all 0.2s ease !important;
}
.section-subscribe .button:hover,
.subscribe-button:hover,
.article-subscribe .button:hover {
background: #38BDF8 !important;
color: #05141F !important;
box-shadow: 0 0 16px rgba(56, 189, 248, 0.4) !important;
}
.sub-nav .search-container input[type="search"]::placeholder {
color: #94A3B8 !important;
}
.header {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 20px !important;
padding: 0 30px !important;
height: 76px !important;
background: #05141F !important;
overflow: hidden !important;
}
.logo {
display: flex !important;
align-items: center !important;
gap: 16px !important;
flex-shrink: 0 !important;
}
.service-manual-wrapper {
flex-shrink: 0 !important;
white-space: nowrap !important;
}
.btn-service-manual {
white-space: nowrap !important;
flex-shrink: 0 !important;
font-size: 13px !important;
padding: 6px 14px !important;
}
@media (min-width: 1024px) {
.header-tabs-container {
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex: 1 1 auto !important;
gap: 6px !important;
position: relative !important;
left: auto !important;
transform: none !important;
margin: 0 12px !important;
white-space: nowrap !important;
overflow: visible !important;
z-index: 100 !important;
}
}
@media (max-width: 1023px) {
.header-tabs-container {
display: none !important;
}
}
.header-tab-dropdown {
position: relative !important;
padding: 20px 0 !important;
flex-shrink: 0 !important;
white-space: nowrap !important;
}
.header-tab-item {
color: #E2E8F0 !important;
font-size: 12px !important;
font-weight: 600 !important;
letter-spacing: 0.1px !important;
padding: 6px 7px !important;
border-radius: 6px !important;
white-space: nowrap !important;
text-decoration: none !important;
transition: all 0.2s ease !important;
}
.header-tab-item:hover {
color: #FFFFFF !important;
background-color: rgba(255, 255, 255, 0.12) !important;
}
@media (min-width: 1024px) {
.nav-wrapper-desktop {
display: flex !important;
align-items: center !important;
gap: 16px !important;
flex-shrink: 0 !important;
white-space: nowrap !important;
}
}
:root {
color-scheme: dark;
}
html body .section-card-custom {
background: linear-gradient(135deg, rgba(15, 30, 48, 0.88), rgba(10, 22, 36, 0.92)) !important;
border: 1px solid rgba(255, 255, 255, 0.14) !important;
border-radius: 16px !important;
padding: 26px 28px !important;
backdrop-filter: blur(16px) !important;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35) !important;
transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease, box-shadow 0.25s ease !important;
}
html body .section-card-custom:hover {
transform: translateY(-4px) !important;
border-color: rgba(56, 189, 248, 0.45) !important;
box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5), 0 0 24px rgba(56, 189, 248, 0.2) !important;
}
html body .section-tree-title a,
html body .section-tree-title a:link,
html body .section-tree-title a:visited {
color: #FFFFFF !important;
font-size: 20px !important;
font-weight: 700 !important;
text-decoration: none !important;
}
html body .section-tree-title a:hover {
color: #38BDF8 !important;
}
html body .article-list-link,
html body .article-list-link:link,
html body .article-list-link:visited,
html body .article-list-item a,
html body .article-list-item a:link,
html body .article-list-item a:visited {
color: #CBD5E1 !important;
font-size: 15px !important;
font-weight: 500 !important;
text-decoration: none !important;
}
html body .article-list-link:hover,
html body .article-list-item a:hover {
color: #38BDF8 !important;
text-decoration: underline !important;
}
html body .section-container .section-list .section-list-item a,
html body .section-container .section-list .section-list-item a:link,
html body .section-container .section-list .section-list-item a:visited {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
background: linear-gradient(135deg, rgba(15, 30, 48, 0.88), rgba(10, 22, 36, 0.92)) !important;
border: 1px solid rgba(255, 255, 255, 0.14) !important;
border-radius: 12px !important;
padding: 18px 22px !important;
color: #FFFFFF !important;
font-size: 16.5px !important;
font-weight: 700 !important;
text-decoration: none !important;
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25) !important;
transition: all 0.25s ease !important;
}
html body .section-container .section-list .section-list-item a:hover {
background: rgba(20, 45, 68, 0.95) !important;
border-color: #38BDF8 !important;
color: #38BDF8 !important;
transform: translateY(-3px) !important;
}
html body .kia-accent-card {
position: relative !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
align-items: stretch !important;
height: 100% !important;
min-height: 390px !important;
background: linear-gradient(145deg, rgba(15, 30, 48, 0.92), rgba(8, 20, 34, 0.96)) !important;
border: 1px solid rgba(255, 255, 255, 0.12) !important;
border-radius: 18px !important;
padding: 28px !important;
backdrop-filter: blur(16px) !important;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}
html body .section-tree-grid > .kia-accent-card:nth-child(6n+1) { border-color: rgba(56, 189, 248, 0.3) !important; }
html body .section-tree-grid > .kia-accent-card:nth-child(6n+2) { border-color: rgba(129, 140, 248, 0.3) !important; }
html body .section-tree-grid > .kia-accent-card:nth-child(6n+3) { border-color: rgba(192, 132, 252, 0.3) !important; }
html body .section-tree-grid > .kia-accent-card:nth-child(6n+4) { border-color: rgba(52, 211, 153, 0.3) !important; }
html body .section-tree-grid > .kia-accent-card:nth-child(6n+5) { border-color: rgba(245, 158, 11, 0.3) !important; }
html body .section-tree-grid > .kia-accent-card:nth-child(6n+6) { border-color: rgba(244, 63, 94, 0.3) !important; }
html body .section-tree-grid > .kia-accent-card:nth-child(6n+1):hover { background: rgba(56, 189, 248, 0.06) !important; border-color: rgba(56, 189, 248, 0.5) !important; box-shadow: 0 16px 40px rgba(0,0,0,0.5), 0 0 24px rgba(56, 189, 248, 0.15) !important; transform: translateY(-4px) !important; }
html body .section-tree-grid > .kia-accent-card:nth-child(6n+2):hover { background: rgba(129, 140, 248, 0.06) !important; border-color: rgba(129, 140, 248, 0.5) !important; box-shadow: 0 16px 40px rgba(0,0,0,0.5), 0 0 24px rgba(129, 140, 248, 0.15) !important; transform: translateY(-4px) !important; }
html body .section-tree-grid > .kia-accent-card:nth-child(6n+3):hover { background: rgba(192, 132, 252, 0.06) !important; border-color: rgba(192, 132, 252, 0.5) !important; box-shadow: 0 16px 40px rgba(0,0,0,0.5), 0 0 24px rgba(192, 132, 252, 0.15) !important; transform: translateY(-4px) !important; }
html body .section-tree-grid > .kia-accent-card:nth-child(6n+4):hover { background: rgba(52, 211, 153, 0.06) !important; border-color: rgba(52, 211, 153, 0.5) !important; box-shadow: 0 16px 40px rgba(0,0,0,0.5), 0 0 24px rgba(52, 211, 153, 0.15) !important; transform: translateY(-4px) !important; }
html body .section-tree-grid > .kia-accent-card:nth-child(6n+5):hover { background: rgba(245, 158, 11, 0.06) !important; border-color: rgba(245, 158, 11, 0.5) !important; box-shadow: 0 16px 40px rgba(0,0,0,0.5), 0 0 24px rgba(245, 158, 11, 0.15) !important; transform: translateY(-4px) !important; }
html body .section-tree-grid > .kia-accent-card:nth-child(6n+6):hover { background: rgba(244, 63, 94, 0.06) !important; border-color: rgba(244, 63, 94, 0.5) !important; box-shadow: 0 16px 40px rgba(0,0,0,0.5), 0 0 24px rgba(244, 63, 94, 0.15) !important; transform: translateY(-4px) !important; }
html body .kia-card-header {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
height: 46px !important;
margin-bottom: 20px !important;
flex-shrink: 0 !important;
}
html body .kia-card-icon-wrapper {
width: 46px !important;
height: 46px !important;
border-radius: 12px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: linear-gradient(135deg, rgba(56, 189, 248, 0.16), rgba(99, 102, 241, 0.12)) !important;
border: 1px solid rgba(56, 189, 248, 0.35) !important;
color: #38BDF8 !important;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
transition: all 0.3s ease !important;
}
html body .kia-accent-card:hover .kia-card-icon-wrapper {
transform: scale(1.1) rotate(3deg) !important;
background: linear-gradient(135deg, rgba(56, 189, 248, 0.3), rgba(99, 102, 241, 0.25)) !important;
color: #FFFFFF !important;
border-color: #38BDF8 !important;
box-shadow: 0 0 16px rgba(56, 189, 248, 0.4) !important;
}
html body .kia-card-badge {
background: rgba(56, 189, 248, 0.14) !important;
border: 1px solid rgba(56, 189, 248, 0.35) !important;
color: #38BDF8 !important;
font-size: 12px !important;
font-weight: 700 !important;
padding: 4px 12px !important;
border-radius: 20px !important;
letter-spacing: 0.3px !important;
}
html body .kia-card-badge-purple {
background: rgba(192, 132, 252, 0.14) !important;
border: 1px solid rgba(192, 132, 252, 0.35) !important;
color: #C084FC !important;
font-size: 12px !important;
font-weight: 700 !important;
padding: 4px 12px !important;
border-radius: 20px !important;
letter-spacing: 0.3px !important;
}
html body .kia-card-badge-muted {
background: rgba(255, 255, 255, 0.06) !important;
border: 1px solid rgba(255, 255, 255, 0.12) !important;
color: #94A3B8 !important;
font-size: 12px !important;
font-weight: 600 !important;
padding: 4px 12px !important;
border-radius: 20px !important;
}
html body .kia-card-title {
font-size: 21px !important;
font-weight: 800 !important;
letter-spacing: -0.4px !important;
margin: 0 0 16px 0 !important;
min-height: 32px !important;
display: flex !important;
align-items: center !important;
flex-shrink: 0 !important;
}
html body .kia-card-title a,
html body .kia-card-title a:link,
html body .kia-card-title a:visited {
color: #FFFFFF !important;
text-decoration: none !important;
transition: color 0.2s ease !important;
}
html body .kia-card-title a:hover {
color: #38BDF8 !important;
}
html body .kia-card-body {
flex: 1 1 auto !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
margin-bottom: 20px !important;
}
html body .kia-empty-body-placeholder {
display: flex !important;
align-items: center !important;
gap: 10px !important;
background: rgba(255, 255, 255, 0.03) !important;
border: 1px dashed rgba(255, 255, 255, 0.1) !important;
border-radius: 10px !important;
padding: 16px !important;
color: #64748B !important;
font-size: 13.5px !important;
font-weight: 500 !important;
margin-top: 10px !important;
}
html body .kia-subsection-list {
list-style: none !important;
padding: 0 !important;
margin: 16px 0 0 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
}
html body .kia-subsection-item {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
background: rgba(255, 255, 255, 0.04) !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
border-left: 3px solid rgba(56, 189, 248, 0.4) !important;
border-radius: 8px !important;
padding: 10px 14px !important;
color: #E2E8F0 !important;
font-size: 14.5px !important;
font-weight: 600 !important;
text-decoration: none !important;
transition: all 0.2s ease !important;
}
html body .kia-subsection-item .sub-dot {
width: 6px !important;
height: 6px !important;
border-radius: 50% !important;
background: #38BDF8 !important;
margin-right: 8px !important;
flex-shrink: 0 !important;
}
html body .kia-subsection-item .sub-name {
flex: 1 !important;
}
html body .kia-subsection-item .sub-arrow {
color: #38BDF8 !important;
transition: transform 0.2s ease !important;
}
html body .kia-subsection-item:hover {
background: rgba(56, 189, 248, 0.12) !important;
border-color: rgba(56, 189, 248, 0.5) !important;
border-left-color: #38BDF8 !important;
color: #FFFFFF !important;
transform: translateX(4px) !important;
}
html body .kia-subsection-item:hover .sub-arrow {
transform: translateX(3px) !important;
}
html body .kia-article-list {
list-style: none !important;
padding: 0 !important;
margin: 16px 0 0 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
}
html body .kia-article-item {
display: flex !important;
align-items: center !important;
gap: 10px !important;
padding: 6px 0 !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}
html body .kia-article-item .art-icon {
color: #64748B !important;
flex-shrink: 0 !important;
}
html body .kia-article-item .art-link,
html body .kia-article-item .art-link:link,
html body .kia-article-item .art-link:visited {
color: #CBD5E1 !important;
font-size: 15px !important;
font-weight: 500 !important;
text-decoration: none !important;
transition: color 0.15s ease !important;
}
html body .kia-article-item .art-link:hover {
color: #38BDF8 !important;
text-decoration: underline !important;
}
html body .kia-card-footer {
margin-top: 22px !important;
padding-top: 16px !important;
border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}
html body .kia-footer-btn,
html body .kia-footer-btn:link,
html body .kia-footer-btn:visited {
color: #38BDF8 !important;
font-weight: 700 !important;
font-size: 14px !important;
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
text-decoration: none !important;
transition: all 0.2s ease !important;
}
html body .kia-footer-btn:hover {
color: #FFFFFF !important;
transform: translateX(4px) !important;
}
html body .kia-accent-card--hub {
background: linear-gradient(145deg, rgba(26, 20, 52, 0.95), rgba(12, 16, 38, 0.98)) !important;
border: 1px solid rgba(192, 132, 252, 0.35) !important;
box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5) !important;
}
html body .kia-accent-card--hub:hover {
background: rgba(192, 132, 252, 0.08) !important;
border-color: #C084FC !important;
box-shadow: 0 22px 50px rgba(0, 0, 0, 0.65), 0 0 32px rgba(192, 132, 252, 0.3) !important;
transform: translateY(-4px) !important;
}
html body .kia-card-icon-wrapper--hub {
background: linear-gradient(135deg, rgba(192, 132, 252, 0.25), rgba(139, 92, 246, 0.18)) !important;
border-color: rgba(192, 132, 252, 0.45) !important;
color: #C084FC !important;
box-shadow: 0 0 18px rgba(192, 132, 252, 0.3) !important;
}
html body .kia-accent-card--hub:hover .kia-card-icon-wrapper--hub {
background: linear-gradient(135deg, rgba(192, 132, 252, 0.4), rgba(139, 92, 246, 0.35)) !important;
color: #FFFFFF !important;
box-shadow: 0 0 24px rgba(192, 132, 252, 0.55) !important;
}
html body .kia-card-badge-purple-glow {
background: rgba(192, 132, 252, 0.18) !important;
border: 1px solid rgba(192, 132, 252, 0.45) !important;
color: #E9D5FF !important;
font-size: 12px !important;
font-weight: 700 !important;
padding: 5px 14px !important;
border-radius: 20px !important;
letter-spacing: 0.4px !important;
box-shadow: 0 0 12px rgba(192, 132, 252, 0.25) !important;
display: inline-flex !important;
align-items: center !important;
gap: 4px !important;
vertical-align: middle !important;
}
html body .kia-hub-section-container {
margin-top: 14px !important;
}
html body .kia-hub-label {
font-size: 11px !important;
font-weight: 800 !important;
letter-spacing: 0.8px !important;
color: #C084FC !important;
margin-bottom: 10px !important;
text-transform: uppercase !important;
display: flex !important;
align-items: center !important;
gap: 6px !important;
}
html body .kia-hub-label::after {
content: "" !important;
flex: 1 !important;
height: 1px !important;
background: linear-gradient(90deg, rgba(192, 132, 252, 0.4), transparent) !important;
}
html body .kia-subsection-item--hub {
background: linear-gradient(135deg, rgba(192, 132, 252, 0.08), rgba(56, 189, 248, 0.05)) !important;
border: 1px solid rgba(192, 132, 252, 0.2) !important;
border-left: 3.5px solid #C084FC !important;
border-radius: 10px !important;
padding: 11px 13px !important;
color: #F3E8FF !important;
}
html body .kia-subsection-item--hub:hover {
background: linear-gradient(135deg, rgba(192, 132, 252, 0.2), rgba(56, 189, 248, 0.15)) !important;
border-color: #C084FC !important;
color: #FFFFFF !important;
transform: translateX(5px) !important;
box-shadow: 0 4px 16px rgba(192, 132, 252, 0.25) !important;
}
html body .kia-footer-btn--hub,
html body .kia-footer-btn--hub:link,
html body .kia-footer-btn--hub:visited {
color: #C084FC !important;
}
html body .kia-footer-btn--hub:hover {
color: #FFFFFF !important;
text-shadow: 0 0 8px rgba(192, 132, 252, 0.6) !important;
}
html body .main-column,
html body main.main-content,
html body #main-content {
max-width: 100% !important;
width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
float: none !important;
}
html body .sub-nav {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 16px !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
padding: 16px 0 !important;
margin-bottom: 36px !important;
width: 100% !important;
flex-wrap: nowrap !important;
justify-content: flex-start !important;   }
html body .sub-nav .kia-breadcrumb {
flex: 1 1 auto !important;     min-width: 0 !important;
overflow: hidden !important;
}
html body .sub-nav .search-container {
flex: 0 0 auto !important;
margin-left: 0 !important;   }
html body .kia-breadcrumb .breadcrumbs,
html body .kia-breadcrumb nav[aria-label="breadcrumb"] {
background: transparent !important;
border: none !important;
margin: 0 !important;
padding: 0 !important;
}
html body .kia-breadcrumb .breadcrumbs ol,
html body .kia-breadcrumb .breadcrumbs ul {
display: flex !important;
align-items: center !important;
flex-wrap: nowrap !important;
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
gap: 0 !important;
overflow: hidden !important;
}
html body .kia-breadcrumb .breadcrumbs li {
display: flex !important;
align-items: center !important;
white-space: nowrap !important;
color: #475569 !important;
}
html body .kia-breadcrumb .breadcrumbs li::before {
display: none !important;
}
html body .kia-breadcrumb .breadcrumbs li + li::before {
display: inline-block !important;
content: "›" !important;
padding: 0 9px !important;
color: rgba(255, 255, 255, 0.16) !important;
font-size: 17px !important;
line-height: 1 !important;
font-weight: 300 !important;
}
html body .kia-breadcrumb .breadcrumbs a,
html body .kia-breadcrumb .breadcrumbs a:link,
html body .kia-breadcrumb .breadcrumbs a:visited {
color: #64748B !important;
font-size: 12px !important;
font-weight: 500 !important;
text-decoration: none !important;
letter-spacing: 0.1px !important;
transition: color 0.15s ease !important;
}
html body .kia-breadcrumb .breadcrumbs a:hover {
color: #38BDF8 !important;
}
html body .kia-breadcrumb .breadcrumbs li:last-child span,
html body .kia-breadcrumb .breadcrumbs li:last-child a {
color: #CBD5E1 !important;
font-size: 12px !important;
font-weight: 600 !important;
background: rgba(56, 189, 248, 0.07) !important;
border: 1px solid rgba(56, 189, 248, 0.18) !important;
border-radius: 6px !important;
padding: 2px 9px !important;
text-decoration: none !important;
}
html body .kia-page-header {
position: relative !important;
margin-bottom: 40px !important;
padding-bottom: 28px !important;
}
html body .kia-page-header-body {
display: flex !important;
flex-direction: column !important;
gap: 0 !important;
}
html body .kia-category-type-label {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
color: rgba(56, 189, 248, 0.75) !important;
font-size: 10.5px !important;
font-weight: 800 !important;
letter-spacing: 1.4px !important;
text-transform: uppercase !important;
margin-bottom: 10px !important;
}
html body .kia-page-h1 {
color: #FFFFFF !important;
font-size: clamp(22px, 2.6vw, 30px) !important;
font-weight: 800 !important;
letter-spacing: -0.5px !important;
line-height: 1.15 !important;
margin: 0 0 10px 0 !important;
}
html body .kia-page-desc {
color: #94A3B8 !important;
font-size: 14.5px !important;
line-height: 1.55 !important;
max-width: 100% !important;
margin: 0 !important;
font-weight: 400 !important;
white-space: normal !important;
}
html body .kia-page-header-line {
position: absolute !important;
bottom: 0 !important;
left: 30px !important;
width: 72px !important;
height: 2px !important;
background: linear-gradient(90deg, #38BDF8 0%, rgba(56, 189, 248, 0) 100%) !important;
border-radius: 1px !important;
}
html body .category-container {
display: block !important;
width: 100% !important;
max-width: 1720px !important;
margin: 0 auto !important;
padding: 0 30px 60px !important;
}
.category-sidebar-layout {
display: grid !important;
grid-template-columns: 260px 1fr !important;
gap: 32px !important;
}
html body .lang-panel-header {
display: flex !important;
align-items: center !important;
gap: 6px !important;
padding: 14px 16px 10px 16px !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
margin-bottom: 10px !important;
flex-wrap: nowrap !important;
}
.section-sidebar-toc {
position: sticky !important;
top: 90px !important;
align-self: start !important;
margin-top: 32px !important;
background: rgba(15, 35, 52, 0.8) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
border-radius: 14px !important;
padding: 20px !important;
backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important;
max-height: calc(100vh - 120px) !important;
overflow-y: auto !important;
scrollbar-width: thin !important;
scrollbar-color: rgba(56, 189, 248, 0.3) transparent !important;
}
.section-sidebar-toc::-webkit-scrollbar {
width: 3px !important;
}
.section-sidebar-toc::-webkit-scrollbar-track {
background: transparent !important;
}
.section-sidebar-toc::-webkit-scrollbar-thumb {
background: rgba(56, 189, 248, 0.3) !important;
border-radius: 3px !important;
}
.sidebar-toc-title {
display: flex !important;
align-items: center !important;
gap: 7px !important;
font-size: 11px !important;
font-weight: 800 !important;
letter-spacing: 1.2px !important;
color: rgba(56, 189, 248, 0.75) !important;
text-transform: uppercase !important;
margin-bottom: 14px !important;
padding-bottom: 12px !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.sidebar-toc-nav {
display: flex !important;
flex-direction: column !important;
gap: 4px !important;
}
.sidebar-toc-link {
display: flex !important;
align-items: center !important;
gap: 9px !important;
padding: 10px 12px !important;
border-radius: 8px !important;
color: #94A3B8 !important;
font-size: 13.5px !important;
font-weight: 500 !important;
text-decoration: none !important;
transition: background 0.18s ease, color 0.18s ease !important;
border: 1px solid transparent !important;
}
.sidebar-toc-link:hover {
background: rgba(56, 189, 248, 0.1) !important;
color: #38BDF8 !important;
border-color: rgba(56, 189, 248, 0.2) !important;
}
.sidebar-toc-link.is-active {
background: rgba(56, 189, 248, 0.15) !important;
color: #38BDF8 !important;
border-color: rgba(56, 189, 248, 0.35) !important;
font-weight: 700 !important;
}
.sidebar-toc-icon {
flex-shrink: 0 !important;
}
.sidebar-toc-name {
flex: 1 !important;
line-height: 1.35 !important;
word-break: keep-all !important;
}
.sidebar-toc-badge {
flex-shrink: 0 !important;
font-size: 11px !important;
font-weight: 700 !important;
padding: 2px 7px !important;
border-radius: 8px !important;
background: rgba(56, 189, 248, 0.12) !important;
color: rgba(56, 189, 248, 0.85) !important;
border: 1px solid rgba(56, 189, 248, 0.2) !important;
line-height: 1.5 !important;
}
.sidebar-toc-badge--hub {
background: rgba(192, 132, 252, 0.12) !important;
color: rgba(192, 132, 252, 0.85) !important;
border-color: rgba(192, 132, 252, 0.25) !important;
}
.section-tree-grid {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
gap: 24px !important;
}
.section-tree-grid > section[id^="section-"] {
scroll-margin-top: 100px !important;
}
.tablet-toc-fab {
display: none !important;
}
.category-bottom-sheet-backdrop {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.65);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
z-index: 998;
opacity: 0;
transition: opacity 0.25s ease;
pointer-events: none;
}
.category-bottom-sheet {
display: none;
position: fixed;
bottom: 0;
left: 0;
width: 100vw;
max-height: 75vh;
background: rgba(13, 23, 38, 0.98);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-top: 1px solid rgba(56, 189, 248, 0.25);
border-radius: 20px 20px 0 0;
box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.6);
z-index: 999;
transform: translateY(100%);
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
overflow-y: auto;
box-sizing: border-box;
padding: 12px 20px 28px 20px;
}
@media (max-width: 1024px) {
#gitdocs-floating-badge,
.gitdocs-floating-badge {
display: none !important;
}
}
@media (min-width: 768px) and (max-width: 1024px) {
.section-sidebar-toc {
display: none !important;
}
html body .category-sidebar-layout {
grid-template-columns: 1fr !important;
gap: 0 !important;
padding-left: 24px !important;
padding-right: 24px !important;
width: 100% !important;
}
html body #main-content.section-tree,
html body #main-content.section-tree-grid,
html body .category-sidebar-layout .section-tree-grid,
html body .category-container .section-tree,
html body .section-tree-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 16px !important;
width: 100% !important;
}
.tech-article-card {
padding: 12px 14px !important;
min-height: unset !important;
gap: 8px !important;
}
.tech-card-title {
font-size: 14px !important;
line-height: 1.35 !important;
}
.tech-card-desc {
display: none !important;
}
.tech-card-footer {
margin-top: 6px !important;
font-size: 12px !important;
}
.tablet-toc-fab {
display: flex !important;
align-items: center;
justify-content: center;
gap: 8px;
position: fixed !important;
bottom: 24px !important;
right: 24px !important;
z-index: 900 !important;
min-height: 50px;
padding: 10px 20px;
border-radius: 9999px;
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
color: #38bdf8 !important;
border: 1px solid rgba(56, 189, 248, 0.35) !important;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 16px rgba(56, 189, 248, 0.25) !important;
font-size: 14px;
font-weight: 700;
letter-spacing: -0.2px;
cursor: pointer;
transition: transform 0.2s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.2s ease, border-color 0.2s ease;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
.tablet-toc-fab:hover,
.tablet-toc-fab:focus-visible {
transform: translateY(-2px) scale(1.03);
box-shadow: 0 12px 32px rgba(56, 189, 248, 0.4), 0 0 20px rgba(56, 189, 248, 0.3) !important;
border-color: #38bdf8 !important;
color: #ffffff !important;
outline: none;
}
.tablet-toc-fab:active {
transform: translateY(1px) scale(0.98);
}
.category-bottom-sheet-backdrop {
display: block;
}
.category-bottom-sheet-backdrop.is-open {
opacity: 1;
pointer-events: auto;
}
.category-bottom-sheet {
display: block;
}
.category-bottom-sheet.is-open {
transform: translateY(0);
}
.sheet-drag-handle {
width: 44px;
height: 4px;
background: rgba(255, 255, 255, 0.2);
border-radius: 4px;
margin: 4px auto 16px auto;
}
.sheet-header {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 14px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
margin-bottom: 16px;
}
.sheet-title {
display: flex;
align-items: center;
gap: 8px;
color: #38bdf8;
font-size: 13px;
font-weight: 800;
letter-spacing: 0.8px;
}
.sheet-close-btn {
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.1);
color: #94a3b8;
border-radius: 8px;
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.15s ease;
}
.sheet-close-btn:hover {
background: rgba(255, 255, 255, 0.12);
color: #ffffff;
}
.sheet-nav-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
max-height: calc(70vh - 90px);
overflow-y: auto;
padding: 2px 2px 16px 2px;
}
.sheet-nav-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 12px 14px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
color: #cbd5e1;
text-decoration: none;
font-size: 13px;
font-weight: 600;
transition: all 0.15s ease;
}
.sheet-nav-item:hover,
.sheet-nav-item:focus-visible {
background: rgba(56, 189, 248, 0.12);
border-color: rgba(56, 189, 248, 0.35);
color: #ffffff;
}
.sheet-nav-item.is-active {
background: rgba(56, 189, 248, 0.15) !important;
border-color: #38bdf8 !important;
color: #ffffff !important;
box-shadow: 0 0 12px rgba(56, 189, 248, 0.3) !important;
}
.sheet-item-left {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
overflow: hidden;
}
.sheet-item-name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sheet-item-badge {
background: rgba(255, 255, 255, 0.1);
color: #cbd5e1;
font-size: 11px;
font-weight: 700;
padding: 2px 7px;
border-radius: 9999px;
flex-shrink: 0;
}
.sheet-item-badge--hub {
background: rgba(192, 132, 252, 0.2);
color: #c084fc;
border: 1px solid rgba(192, 132, 252, 0.3);
}
}
@media (max-width: 767px) {
.tablet-toc-fab,
.category-bottom-sheet-backdrop,
.category-bottom-sheet {
display: none !important;
}
html body .sub-nav {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 10px !important;
padding: 12px 16px !important;
margin-bottom: 12px !important;
}
html body .sub-nav nav,
html body .sub-nav .breadcrumbs {
width: 100% !important;
display: flex !important;
flex-wrap: wrap !important;
font-size: 12px !important;
min-width: 0 !important;
}
html body .sub-nav .search-container {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
}
html body .category-sidebar-layout {
grid-template-columns: 1fr !important;
gap: 16px !important;
padding-left: 16px !important;
padding-right: 16px !important;
width: 100% !important;
}
.section-sidebar-toc {
position: sticky !important;
top: 0 !important;
z-index: 35 !important;
background: rgba(8, 17, 30, 0.94) !important;
backdrop-filter: blur(16px) !important;
-webkit-backdrop-filter: blur(16px) !important;
padding: 10px 12px !important;
margin-bottom: 8px !important;
border-radius: 0 0 14px 14px !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
border-top: none !important;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35) !important;
max-height: none !important;
overflow-y: visible !important;
overflow-x: hidden !important;
width: 100% !important;
box-sizing: border-box !important;
}
.sidebar-toc-title {
display: none !important;
}
.sidebar-toc-nav {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
overflow-y: hidden !important;
gap: 8px !important;
padding: 2px 2px 4px 2px !important;
scrollbar-width: none !important;
-webkit-overflow-scrolling: touch !important;
}
.sidebar-toc-nav::-webkit-scrollbar {
display: none !important;
}
.sidebar-toc-link {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
border-radius: 20px !important;
padding: 8px 14px !important;
font-size: 12px !important;
font-weight: 700 !important;
letter-spacing: -0.2px !important;
background: rgba(16, 32, 54, 0.85) !important;
border: 1px solid rgba(56, 189, 248, 0.22) !important;
color: #cbd5e1 !important;
white-space: nowrap !important;
flex-shrink: 0 !important;
text-decoration: none !important;
transition: all 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
box-sizing: border-box !important;
}
.sidebar-toc-link:hover {
background: rgba(30, 58, 92, 0.9) !important;
border-color: rgba(56, 189, 248, 0.45) !important;
color: #ffffff !important;
}
.sidebar-toc-link.is-active {
background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
color: #ffffff !important;
border-color: #38bdf8 !important;
box-shadow: 0 2px 12px rgba(2, 132, 199, 0.45) !important;
}
.sidebar-toc-icon {
width: 12px !important;
height: 12px !important;
flex-shrink: 0 !important;
}
.sidebar-toc-name {
white-space: nowrap !important;
}
.sidebar-toc-badge {
background: rgba(255, 255, 255, 0.15) !important;
color: #ffffff !important;
font-size: 10px !important;
font-weight: 700 !important;
padding: 1px 5px !important;
border-radius: 9999px !important;
margin-left: 2px !important;
}
.sidebar-toc-badge--hub {
background: rgba(192, 132, 252, 0.25) !important;
color: #e9d5ff !important;
border: 1px solid rgba(192, 132, 252, 0.35) !important;
}
html body #main-content.section-tree,
html body #main-content.section-tree-grid,
html body .category-sidebar-layout .section-tree-grid,
html body .category-container .section-tree,
html body .section-tree-grid {
grid-template-columns: 1fr !important;
gap: 16px !important;
width: 100% !important;
}
.kia-accent-card {
width: 100% !important;
box-sizing: border-box !important;
}
.tech-article-card {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
padding: 12px 14px !important;
min-height: 48px !important;
gap: 12px !important;
border-radius: 10px !important;
}
.tech-card-header-row {
width: auto !important;
flex: 1 1 auto !important;
min-width: 0 !important;
margin: 0 !important;
}
.tech-card-title {
font-size: 13.5px !important;
line-height: 1.35 !important;
font-weight: 600 !important;
white-space: normal !important;
margin: 0 !important;
color: #ffffff !important;
}
.tech-card-bottom-row {
display: flex !important;
align-items: center !important;
margin: 0 !important;
flex-shrink: 0 !important;
}
.tech-card-desc,
.tech-card-desc-placeholder,
.promoted-badge {
display: none !important;
}
.tech-card-footer {
display: inline-flex !important;
align-items: center !important;
gap: 4px !important;
font-size: 12px !important;
color: #38bdf8 !important;
margin: 0 !important;
white-space: nowrap !important;
}
}
.kia-section-page {
width: 100%;
max-width: 1720px;
margin: 0 auto;
padding: 0 clamp(16px, 3vw, 40px);
box-sizing: border-box;
}
.kia-section-page-header {
display: flex !important;
justify-content: space-between !important;
align-items: flex-start !important;
flex-wrap: wrap !important;
gap: 20px !important;
padding-bottom: 28px !important;
margin-bottom: 36px !important;
position: relative !important;
}
.kia-section-page-header-body {
flex: 1 !important;
min-width: 0 !important;
}
.kia-page-h1 {
color: #FFFFFF !important;
font-size: clamp(22px, 2.6vw, 30px) !important;
font-weight: 800 !important;
letter-spacing: -0.4px !important;
margin: 8px 0 10px !important;
line-height: 1.25 !important;
}
.kia-page-desc {
color: #94A3B8 !important;
font-size: 15px !important;
line-height: 1.7 !important;
margin: 0 !important;
}
.kia-section-subscribe {
flex-shrink: 0 !important;
padding-top: 28px !important;
}
.kia-page-header-line {
position: absolute !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
height: 1px !important;
background: linear-gradient(90deg, rgba(56, 189, 248, 0.4), rgba(255,255,255,0.06) 70%) !important;
}
.kia-section-content {
display: flex !important;
flex-direction: column !important;
gap: 44px !important;
padding-bottom: 72px !important;
}
.kia-zone-title {
display: flex !important;
align-items: center !important;
gap: 8px !important;
color: #FFFFFF !important;
font-size: 17px !important;
font-weight: 700 !important;
letter-spacing: 0.2px !important;
margin-bottom: 18px !important;
}
html body header.header,
html body .header {
overflow: visible !important;
}
html body .kia-lang-capsule-btn {
display: flex !important;
align-items: center !important;
gap: 7px !important;
background: rgba(15, 23, 42, 0.75) !important;
border: 1px solid rgba(56, 189, 248, 0.3) !important;
border-radius: 20px !important;
padding: 6px 14px !important;
color: #E2E8F0 !important;
font-size: 12.5px !important;
font-weight: 600 !important;
transition: all 0.2s ease !important;
cursor: pointer !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}
html body .kia-lang-capsule-btn:hover {
background: rgba(56, 189, 248, 0.15) !important;
border-color: rgba(56, 189, 248, 0.6) !important;
color: #FFFFFF !important;
box-shadow: 0 0 16px rgba(56, 189, 248, 0.3) !important;
}
html body .icon-globe-nav {
stroke: #38BDF8 !important;
}
html body .header-language-selector .dropdown-menu.region-lang-island-menu,
html body #locale-menu.region-lang-island-menu {
display: none !important;
position: absolute !important;
top: calc(100% + 12px) !important;
right: 0 !important;
left: auto !important;
width: min(560px, calc(100vw - 32px)) !important;
max-width: 580px !important;
max-height: 640px !important;
background: rgba(10, 22, 34, 0.96) !important;
backdrop-filter: blur(20px) !important;
-webkit-backdrop-filter: blur(20px) !important;
border: 1px solid rgba(56, 189, 248, 0.35) !important;
border-radius: 16px !important;
padding: 0 !important;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
z-index: 2500 !important;
overflow: hidden !important;
}
@media (min-width: 768px) {
html body .header-language-selector .dropdown-menu.region-lang-island-menu,
html body #locale-menu.region-lang-island-menu {
width: 560px !important;
min-width: 560px !important;
}
}
html body .region-hub-warning-banner {
background: linear-gradient(135deg, rgba(245, 158, 11, 0.16) 0%, rgba(217, 119, 6, 0.08) 100%) !important;
border-bottom: 1px solid rgba(245, 158, 11, 0.35) !important;
padding: 12px 16px !important;
display: flex !important;
align-items: flex-start !important;
gap: 12px !important;
box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.05) !important;
}
html body .warning-banner-icon {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 30px !important;
height: 30px !important;
border-radius: 8px !important;
background: rgba(245, 158, 11, 0.20) !important;
border: 1px solid rgba(245, 158, 11, 0.40) !important;
flex-shrink: 0 !important;
margin-top: 1px !important;
}
html body .warning-banner-body {
flex: 1 !important;
}
html body .warning-banner-title {
display: block !important;
font-size: 12px !important;
font-weight: 800 !important;
color: #FBBF24 !important;
letter-spacing: -0.2px !important;
margin-bottom: 3px !important;
}
html body .warning-banner-desc {
font-size: 11.5px !important;
line-height: 1.5 !important;
color: #CBD5E1 !important;
margin: 0 !important;
white-space: normal !important;
word-break: keep-all !important;
}
html body .warning-banner-desc strong {
color: #38BDF8 !important;
font-weight: 700 !important;
}
html body .step-badge {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 2px 7px !important;
border-radius: 4px !important;
font-size: 10px !important;
font-weight: 800 !important;
letter-spacing: 0.5px !important;
margin-right: 4px !important;
flex-shrink: 0 !important;
text-transform: none !important;
white-space: nowrap !important;
}
html body .step-badge.step-1 {
background: rgba(56, 189, 248, 0.18) !important;
color: #38BDF8 !important;
border: 1px solid rgba(56, 189, 248, 0.45) !important;
}
html body .step-badge.step-2 {
background: rgba(245, 158, 11, 0.18) !important;
color: #F59E0B !important;
border: 1px solid rgba(245, 158, 11, 0.45) !important;
}
html body .header-language-selector .dropdown-toggle[aria-expanded="true"] + #locale-menu.region-lang-island-menu,
html body .header-language-selector:has(.dropdown-toggle[aria-expanded="true"]) #locale-menu.region-lang-island-menu,
html body #locale-menu.region-lang-island-menu[style*="display: block"] {
display: block !important;
animation: kiaLangIslandFadeIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}
@keyframes kiaLangIslandFadeIn {
from { opacity: 0; transform: translateY(-8px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
html body .region-lang-hub-container {
display: grid !important;
grid-template-columns: 200px 1fr !important;
min-height: 290px !important;
}
html body .region-sidebar {
background: rgba(6, 14, 24, 0.92) !important;
border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
padding: 14px 10px !important;
display: flex !important;
flex-direction: column !important;
gap: 4px !important;
}
html body .region-sidebar-title {
font-size: 11px !important;
font-weight: 700 !important;
color: #64748B !important;
letter-spacing: 0.03em !important;
padding: 4px 8px 10px 8px !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
margin-bottom: 6px !important;
display: flex !important;
align-items: center !important;
flex-wrap: nowrap !important;
gap: 4px !important;
}
html body .region-tab-btn {
display: flex !important;
align-items: center !important;
gap: 10px !important;
width: 100% !important;
padding: 9px 12px !important;
background: transparent !important;
border: none !important;
border-radius: 8px !important;
color: #94A3B8 !important;
font-size: 12.5px !important;
font-weight: 600 !important;
cursor: pointer !important;
text-align: left !important;
transition: all 0.18s ease !important;
}
html body .region-tab-btn:hover {
background: rgba(255, 255, 255, 0.08) !important;
color: #F8FAFC !important;
}
html body .region-tab-btn.active {
background: rgba(56, 189, 248, 0.18) !important;
color: #38BDF8 !important;
font-weight: 700 !important;
box-shadow: inset 3px 0 0 #38BDF8 !important;
}
html body .region-svg-icon {
flex-shrink: 0 !important;
stroke: currentColor !important;
}
html body .lang-content-panel {
padding: 16px 18px !important;
display: flex !important;
flex-direction: column !important;
gap: 12px !important;
background: rgba(10, 22, 34, 0.6) !important;
}
html body .lang-panel-header {
border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
padding-bottom: 10px !important;
}
html body .lang-panel-title {
font-size: 13px !important;
font-weight: 700 !important;
color: #38BDF8 !important;
}
html body .lang-chips-grid {
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
}
html body .lang-chip-item {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
padding: 10px 14px !important;
background: rgba(255, 255, 255, 0.04) !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
border-radius: 10px !important;
text-decoration: none !important;
transition: all 0.18s ease !important;
}
html body .lang-chip-item:hover {
background: rgba(56, 189, 248, 0.12) !important;
border-color: rgba(56, 189, 248, 0.35) !important;
transform: translateX(3px) !important;
}
html body .lang-chip-item.active {
background: rgba(56, 189, 248, 0.22) !important;
border-color: rgba(56, 189, 248, 0.6) !important;
box-shadow: 0 0 14px rgba(56, 189, 248, 0.25) !important;
}
html body .lang-chip-name {
font-size: 13px !important;
font-weight: 700 !important;
color: #F8FAFC !important;
display: block !important;
}
html body .lang-chip-native {
font-size: 11px !important;
color: #94A3B8 !important;
display: block !important;
margin-top: 2px !important;
}
.kia-zone-count {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
background: rgba(56, 189, 248, 0.15) !important;
color: #38BDF8 !important;
font-size: 12px !important;
font-weight: 700 !important;
padding: 2px 8px !important;
border-radius: 20px !important;
border: 1px solid rgba(56, 189, 248, 0.3) !important;
margin-left: 2px !important;
}
.kia-subsec-grid {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
gap: 16px !important;
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
.kia-subsec-card-wrap {
margin: 0 !important;
padding: 0 !important;
}
.kia-subsec-card {
display: flex !important;
align-items: center !important;
gap: 14px !important;
background: linear-gradient(135deg, rgba(15, 30, 48, 0.88), rgba(10, 22, 36, 0.92)) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
border-top: 2px solid rgba(56, 189, 248, 0.5) !important;
border-radius: 12px !important;
padding: 18px 20px !important;
text-decoration: none !important;
backdrop-filter: blur(14px) !important;
-webkit-backdrop-filter: blur(14px) !important;
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25) !important;
transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease !important;
}
.kia-subsec-card:hover {
transform: translateY(-3px) !important;
box-shadow: 0 10px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(56, 189, 248, 0.35) !important;
border-color: rgba(56, 189, 248, 0.55) !important;
}
.kia-subsec-card-icon {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 40px !important;
height: 40px !important;
background: rgba(56, 189, 248, 0.12) !important;
border-radius: 10px !important;
flex-shrink: 0 !important;
color: #38BDF8 !important;
transition: background 0.22s ease !important;
}
.kia-subsec-card:hover .kia-subsec-card-icon {
background: rgba(56, 189, 248, 0.22) !important;
}
.kia-subsec-card-body {
flex: 1 !important;
min-width: 0 !important;
}
.kia-subsec-card-name {
display: block !important;
color: #FFFFFF !important;
font-size: 15px !important;
font-weight: 700 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.kia-subsec-card-chevron {
flex-shrink: 0 !important;
color: #38BDF8 !important;
opacity: 0.7 !important;
transition: transform 0.22s ease, opacity 0.22s ease !important;
}
.kia-subsec-card:hover .kia-subsec-card-chevron {
transform: translateX(3px) !important;
opacity: 1 !important;
}
.kia-article-grid {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
gap: 14px !important;
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
.kia-article-card {
position: relative !important;
background: linear-gradient(135deg, rgba(15, 30, 48, 0.85), rgba(10, 22, 36, 0.9)) !important;
border: 1px solid rgba(255, 255, 255, 0.09) !important;
border-radius: 12px !important;
overflow: hidden !important;
backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important;
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}
.kia-article-card:hover {
transform: translateY(-2px) !important;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(56, 189, 248, 0.25) !important;
border-color: rgba(56, 189, 248, 0.3) !important;
}
.kia-article-card-promoted-bar {
height: 2px !important;
background: linear-gradient(90deg, #F59E0B, #F43F5E) !important;
width: 100% !important;
}
.kia-article-card-inner {
display: flex !important;
align-items: center !important;
gap: 12px !important;
padding: 16px 20px !important;
}
.kia-article-card-icon-wrap {
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0 !important;
width: 32px !important;
height: 32px !important;
background: rgba(100, 116, 139, 0.12) !important;
border-radius: 8px !important;
transition: background 0.2s ease !important;
}
.kia-article-card:hover .kia-article-card-icon-wrap {
background: rgba(56, 189, 248, 0.1) !important;
}
.kia-article-card-link {
flex: 1 !important;
color: #E2E8F0 !important;
font-size: 14.5px !important;
font-weight: 500 !important;
text-decoration: none !important;
line-height: 1.45 !important;
transition: color 0.15s ease !important;
}
.kia-article-card-link:hover {
color: #38BDF8 !important;
}
.kia-article-card:hover .kia-article-card-link {
color: #38BDF8 !important;
}
.kia-article-card-lock {
flex-shrink: 0 !important;
opacity: 0.6 !important;
}
@media (max-width: 768px) {
.kia-subsec-grid {
grid-template-columns: 1fr !important;
}
.kia-article-grid {
grid-template-columns: 1fr !important;
}
.kia-section-page-header {
flex-direction: column !important;
gap: 12px !important;
}
.kia-section-subscribe {
padding-top: 0 !important;
}
}
@media (max-width: 480px) {
.kia-page-h1 {
font-size: 22px !important;
}
}
html body [class^="IJD"],
html body [class*=" IJD"] {
display: none !important;
visibility: hidden !important;
width: 0 !important;
height: 0 !important;
overflow: hidden !important;
position: absolute !important;
}
html body .kia-section-subscribe button,
html body .kia-section-subscribe [id^="follow-button"] {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
padding: 9px 20px !important;
background: rgba(56, 189, 248, 0.10) !important;
color: #38BDF8 !important;
border: 1.5px solid rgba(56, 189, 248, 0.45) !important;
border-radius: 24px !important;
font-size: 13px !important;
font-weight: 700 !important;
letter-spacing: 0.3px !important;
cursor: pointer !important;
transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
backdrop-filter: blur(8px) !important;
box-shadow: 0 2px 10px rgba(56, 189, 248, 0.12) !important;
white-space: nowrap !important;
-webkit-appearance: none !important;
appearance: none !important;
outline: none !important;
text-decoration: none !important;
}
html body .kia-section-subscribe button:hover,
html body .kia-section-subscribe [id^="follow-button"]:hover {
background: rgba(56, 189, 248, 0.22) !important;
border-color: #38BDF8 !important;
color: #FFFFFF !important;
box-shadow: 0 0 18px rgba(56, 189, 248, 0.30), 0 4px 16px rgba(0,0,0,0.25) !important;
transform: translateY(-1px) !important;
}
html body .kia-section-subscribe button:active,
html body .kia-section-subscribe [id^="follow-button"]:active {
transform: translateY(0) !important;
box-shadow: 0 0 10px rgba(56, 189, 248, 0.20) !important;
}
html body .kia-section-subscribe button[data-selected="true"],
html body .kia-section-subscribe [id^="follow-button"][data-selected="true"] {
background: rgba(56, 189, 248, 0.22) !important;
border-color: #38BDF8 !important;
color: #38BDF8 !important;
box-shadow: 0 0 14px rgba(56, 189, 248, 0.25) !important;
}
span[id^="subscriptons-description"] {
display: none !important;
visibility: hidden !important;
width: 0 !important;
height: 0 !important;
overflow: hidden !important;
position: absolute !important;
}
html body .container.kia-article-page-fluid-container,
html body .kia-article-page-fluid-container {
width: 100% !important;
max-width: 100% !important;
padding: 0 40px !important;
box-sizing: border-box !important;
margin: 0 auto !important;
}
html body .sub-nav {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
width: 100% !important;
max-width: 1640px !important;
margin: 0 auto 20px auto !important;
}
html body .sub-nav .search-container {
margin-left: auto !important;
flex-shrink: 0 !important;
width: clamp(240px, 22vw, 320px) !important;
}
html body .article-sidebar a,
html body .article-sidebar .sidenav-item,
html body .collapsible-sidebar-body li a,
html body .article-sidebar-item {
display: block !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
max-width: 100% !important;
line-height: 1.5 !important;
padding: 8px 12px !important;
border-radius: 6px !important;
}
html body .article-container,
html body #article-container {
display: grid !important;
grid-template-columns: minmax(220px, 260px) minmax(0, 1fr) minmax(220px, 260px) !important;
gap: 28px !important;
width: 100% !important;
max-width: 1720px !important;
margin: 24px auto !important;
padding: 0 30px !important;
box-sizing: border-box !important;
align-items: start !important;
float: none !important;
}
html body .article-sidebar {
grid-column: 1 !important;
width: 100% !important;
max-width: 260px !important;
float: none !important;
margin: 0 !important;
position: sticky !important;
top: 100px !important;
height: fit-content !important;
max-height: calc(100vh - 120px) !important;
overflow-y: auto !important;
z-index: 10 !important;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
scrollbar-width: thin;
scrollbar-color: rgba(56, 189, 248, 0.3) transparent;
}
html body .article-sidebar::-webkit-scrollbar {
width: 4px;
}
html body .article-sidebar::-webkit-scrollbar-track {
background: transparent;
}
html body .article-sidebar::-webkit-scrollbar-thumb {
background: rgba(56, 189, 248, 0.25);
border-radius: 4px;
}
html body .article-sidebar::-webkit-scrollbar-thumb:hover {
background: rgba(56, 189, 248, 0.45);
}
html body #main-content.article,
html body .article {
grid-column: 2 !important;
width: 100% !important;
max-width: 100% !important;
float: none !important;
margin: 0 !important;
}
html body .article-toc-sidebar {
grid-column: 3 !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
width: 100% !important;
max-width: 260px !important;
position: sticky !important;
top: 100px !important;
height: fit-content !important;
flex-shrink: 0 !important;
z-index: 10 !important;
float: none !important;
margin: 0 !important;
}
html body .toc-card {
display: flex !important;
flex-direction: column !important;
max-height: calc(100vh - 130px) !important;
background: rgba(18, 24, 36, 0.88) !important;
border: 1.5px solid rgba(56, 189, 248, 0.35) !important;
border-radius: 14px !important;
padding: 18px 16px !important;
backdrop-filter: blur(12px) !important;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}
html body .toc-header {
display: flex !important;
align-items: center !important;
gap: 8px !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
padding-bottom: 12px !important;
margin-bottom: 12px !important;
color: #38BDF8 !important;
font-weight: 700 !important;
font-size: 14px !important;
flex-shrink: 0 !important;
}
html body .toc-title {
color: #38BDF8 !important;
font-size: 14px !important;
font-weight: 700 !important;
}
html body .toc-nav {
display: flex !important;
flex-direction: column !important;
gap: 4px !important;
flex: 1 1 auto !important;
overflow-y: auto !important;
padding-right: 4px !important;
overscroll-behavior: contain !important;
scrollbar-width: thin !important;
scrollbar-color: rgba(56, 189, 248, 0.4) transparent !important;
}
html body .toc-nav::-webkit-scrollbar {
width: 4px !important;
}
html body .toc-nav::-webkit-scrollbar-track {
background: transparent !important;
}
html body .toc-nav::-webkit-scrollbar-thumb {
background: rgba(56, 189, 248, 0.4) !important;
border-radius: 4px !important;
}
html body .toc-link {
display: block !important;
color: #94A3B8 !important;
font-size: 13px !important;
font-weight: 500 !important;
text-decoration: none !important;
padding: 7px 12px !important;
border-radius: 6px !important;
transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease !important;
line-height: 1.45 !important;
border-left: 2.5px solid transparent !important;
word-break: break-word !important;
backface-visibility: hidden !important;
}
html body .toc-link.toc-link-h3 {
padding-left: 22px !important;
font-size: 12px !important;
}
html body .toc-link:hover,
html body .toc-link.active {
color: #38BDF8 !important;
background: rgba(56, 189, 248, 0.14) !important;
border-left-color: #38BDF8 !important;
font-weight: 500 !important;
box-shadow: inset 0 0 10px rgba(56, 189, 248, 0.08) !important;
}
@media (max-width: 1200px) {
html body .article-container,
html body #article-container {
grid-template-columns: 240px minmax(0, 1fr) !important;
}
html body .article-toc-sidebar {
display: none !important;
}
}
@media (max-width: 768px) {
html body .article-container,
html body #article-container {
grid-template-columns: 1fr !important;
gap: 20px !important;
margin: 16px auto !important;
}
}
html body .kia-section-articles-wrapper {
background: rgba(15, 23, 42, 0.65) !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
border-radius: 16px !important;
padding: 24px !important;
backdrop-filter: blur(16px) !important;
-webkit-backdrop-filter: blur(16px) !important;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
}
html body .articles-section-header {
margin-bottom: 20px !important;
padding-bottom: 16px !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}
html body .header-title-group {
display: flex !important;
align-items: center !important;
gap: 10px !important;
}
html body .articles-section-title {
font-size: 20px !important;
font-weight: 700 !important;
color: #F8FAFC !important;
margin: 0 !important;
letter-spacing: -0.3px !important;
}
html body .articles-count-badge {
background: rgba(56, 189, 248, 0.12) !important;
border: 1px solid rgba(56, 189, 248, 0.3) !important;
color: #38BDF8 !important;
font-size: 12px !important;
font-weight: 700 !important;
padding: 3px 10px !important;
border-radius: 12px !important;
margin-left: 4px !important;
}
html body .kia-articles-list {
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
}
html body .kia-article-row-card {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
min-height: 56px !important;   padding: 14px 20px !important;
background: rgba(30, 41, 59, 0.5) !important;
border: 1px solid rgba(255, 255, 255, 0.06) !important;
border-radius: 12px !important;
text-decoration: none !important;
color: #F1F5F9 !important;
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
cursor: pointer !important;
}
html body .kia-article-row-card:hover,
html body .kia-article-row-card:active {
background: rgba(234, 0, 41, 0.12) !important;
border-color: rgba(234, 0, 41, 0.45) !important;
transform: translateY(-2px) !important;
box-shadow: 0 6px 20px rgba(234, 0, 41, 0.15) !important;
color: #FFFFFF !important;
}
html body .article-icon-box {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 32px !important;
height: 32px !important;
background: rgba(255, 255, 255, 0.04) !important;
border-radius: 8px !important;
margin-right: 14px !important;
flex-shrink: 0 !important;
}
html body .article-info-content {
flex: 1 !important;
display: flex !important;
align-items: center !important;
gap: 12px !important;
min-width: 0 !important;
}
html body .article-title-text {
font-size: 15px !important;
font-weight: 600 !important;
color: #F8FAFC !important;
line-height: 1.4 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
html body .kia-article-row-card:hover .article-title-text {
color: #FFFFFF !important;
}
html body .promoted-label {
background: rgba(245, 158, 11, 0.15) !important;
border: 1px solid rgba(245, 158, 11, 0.4) !important;
color: #FBBF24 !important;
font-size: 11px !important;
font-weight: 700 !important;
padding: 2px 8px !important;
border-radius: 6px !important;
white-space: nowrap !important;
flex-shrink: 0 !important;
}
html body .article-action-arrow {
display: flex !important;
align-items: center !important;
gap: 6px !important;
font-size: 13px !important;
font-weight: 600 !important;
color: #64748B !important;
margin-left: 16px !important;
flex-shrink: 0 !important;
transition: all 0.2s ease !important;
}
html body .kia-article-row-card:hover .article-action-arrow {
color: var(--kia-live-red, #EA0029) !important;
}
html body .kia-article-row-card:hover .article-action-arrow svg {
transform: translateX(4px) !important;
}
@media (max-width: 599px) {
html body .kia-section-articles-wrapper {
padding: 16px !important;
}
html body .kia-article-row-card {
padding: 12px 14px !important;
}
html body .article-action-arrow span {
display: none !important;   }
}
html body .section-sidebar-toc:not(:has(.sidebar-toc-nav a)) {
display: none !important;
}
html body .section-tree-grid:has(> #section-direct-articles) {
grid-template-columns: 1fr !important;
}
html body .full-width-articles-wrapper {
width: 100% !important;
background: rgba(15, 23, 42, 0.75) !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
border-radius: 20px !important;
padding: 28px !important;
backdrop-filter: blur(20px) !important;
-webkit-backdrop-filter: blur(20px) !important;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4) !important;
}
html body .wrapper-top-info {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
margin-bottom: 24px !important;
padding-bottom: 18px !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}
html body .wrapper-top-title {
font-size: 22px !important;
font-weight: 700 !important;
display: flex !important;
align-items: center !important;
gap: 12px !important;
color: #F8FAFC !important;
}
html body .articles-count-tag {
font-size: 14px !important;
color: #38BDF8 !important;
font-weight: 700 !important;
}
html body .article-accordion-list {
display: flex !important;
flex-direction: column !important;
gap: 14px !important;
}
a.article-card-item {
text-decoration: none !important;
color: inherit !important;
display: block !important;
}
html body .article-card-item {
background: rgba(30, 41, 59, 0.45) !important;
border: 1px solid rgba(255, 255, 255, 0.06) !important;
border-radius: 16px !important;
overflow: hidden !important;
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
html body .article-card-item:hover {
border-color: rgba(234, 0, 41, 0.45) !important;
background: rgba(30, 41, 59, 0.7) !important;
}
html body .article-card-item:hover .direct-link-btn .arrow-svg {
transform: translateX(4px) !important;
}
html body .direct-link-btn .arrow-svg {
transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
html body .article-header-info {
display: flex !important;
flex-direction: column !important;
gap: 6px !important;
}
html body .article-meta-row {
display: flex !important;
align-items: center !important;
gap: 8px !important;
font-size: 13px !important;
color: #94A3B8 !important;
flex-wrap: wrap !important;
}
html body .meta-item {
display: inline-flex !important;
align-items: center !important;
gap: 5px !important;
color: #94A3B8 !important;
font-weight: 500 !important;
}
html body .meta-item.meta-author {
color: #CBD5E1 !important;
}
html body .meta-item.meta-created {
color: #94A3B8 !important;
}
html body .meta-item.meta-updated {
color: #38BDF8 !important;
}
html body .meta-dot {
color: #475569 !important;
font-size: 11px !important;
}
html body .card-header-row {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
padding: 18px 24px !important;
min-height: 58px !important;   cursor: pointer !important;
user-select: none !important;
}
html body .card-header-left {
display: flex !important;
align-items: center !important;
gap: 16px !important;
flex: 1 !important;
min-width: 0 !important;
}
html body .article-icon-wrap {
width: 38px !important;
height: 38px !important;
background: rgba(255, 255, 255, 0.05) !important;
border-radius: 10px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0 !important;
}
html body .article-header-info {
flex: 1 !important;
min-width: 0 !important;
}
html body .article-title-row {
display: flex !important;
align-items: center !important;
gap: 12px !important;
}
html body .article-title-16px {
font-size: 16.5px !important;
font-weight: 700 !important;
color: #F8FAFC !important;
letter-spacing: -0.3px !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
margin: 0 !important;
}
html body .card-header-right {
display: flex !important;
align-items: center !important;
gap: 12px !important;
margin-left: 20px !important;
flex-shrink: 0 !important;
}
html body .toggle-read-btn {
background: rgba(56, 189, 248, 0.12) !important;
border: 1px solid rgba(56, 189, 248, 0.3) !important;
color: #38BDF8 !important;
font-size: 14px !important;
font-weight: 700 !important;
height: 40px !important;
padding: 0 18px !important;
border-radius: 20px !important;
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
transition: all 0.2s ease !important;
cursor: pointer !important;
}
html body .article-card-item:hover .toggle-read-btn {
background: rgba(234, 0, 41, 0.18) !important;
border-color: rgba(234, 0, 41, 0.5) !important;
color: #FFFFFF !important;
}
html body .arrow-svg {
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
html body .article-card-item.is-open .arrow-svg {
transform: rotate(180deg) !important;
}
html body .article-body-panel {
padding: 28px !important;
background: rgba(15, 23, 42, 0.65) !important;
border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
font-size: 15.5px !important;
line-height: 1.75 !important;
color: #E2E8F0 !important;
}
html body .article-body-panel:not([hidden]) {
display: block !important;
animation: expandPanel 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
@keyframes expandPanel {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: translateY(0); }
}
html body .article-body-loading {
display: flex !important;
align-items: center !important;
gap: 10px !important;
font-size: 14px !important;
color: #94A3B8 !important;
padding: 12px 0 !important;
}
html body .kia-spinner {
width: 18px !important;
height: 18px !important;
border: 2px solid rgba(56, 189, 248, 0.2) !important;
display: inline-block !important;
}
html body .article-body-loading.is-hidden {
display: none !important;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
@media (max-width: 599px) {
html body .full-width-articles-wrapper {
padding: 16px !important;
}
html body .card-header-row {
padding: 14px 16px !important;
}
html body .article-body-panel {
padding: 18px !important;
}
html body .toggle-read-btn .btn-text {
display: none !important;
}
}
html, body {
max-width: 100% !important;
}
html body .header-inner,
html body .header .container,
html body .urgent-banner-inner,
html body .kia-notice-bar-container,
html body .kia-section-page,
html body .kia-article-page-fluid-container,
html body .sub-nav,
html body .page-header,
html body .category-sidebar-layout,
html body main#main-content,
html body .main-wrapper,
html body .full-width-articles-wrapper,
html body .category-container,
html body .article-container,
html body #article-container,
html body .kia-master-detail-layout {
max-width: 1720px !important;
width: 100% !important;
box-sizing: border-box !important;
margin-left: auto !important;
margin-right: auto !important;
}
html body .header,
html body .global-header,
html body header.header {
max-width: 100% !important;
box-sizing: border-box !important;
}
html body .container.kia-article-page-fluid-container,
html body .kia-article-page-fluid-container,
html body .sub-nav,
html body .page-header,
html body .full-width-articles-wrapper,
html body .category-container,
html body .kia-section-page,
html body .category-sidebar-layout {
padding-left: 30px !important;
padding-right: 30px !important;
}
html body .category-sidebar-layout:not(:has(.sidebar-toc-nav a)),
html body .category-sidebar-layout:has(#section-direct-articles),
html body .category-sidebar-layout.no-sidebar {
display: block !important;
grid-template-columns: 1fr !important;
width: 100% !important;
max-width: 100% !important;
gap: 0 !important;
}
html body .section-sidebar-toc:not(:has(.sidebar-toc-nav a)) {
display: none !important;
}
html body .section-tree-grid {
width: 100% !important;
max-width: 100% !important;
}
html body .kia-page-header {
margin-bottom: 16px !important;
padding-bottom: 12px !important;
}
html body .sub-nav {
margin-bottom: 12px !important;
}
html body .wrapper-top-info {
margin-bottom: 16px !important;
padding-bottom: 12px !important;
}
.region-selector-container {
max-width: 1280px;
margin: -24px auto 32px auto;
padding: 0 20px;
position: relative;
z-index: 10;
}
.accordion-card-hub {
width: 100%;
background: #0F172A;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 20px;
padding: 24px;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), 0 0 30px rgba(56, 189, 248, 0.08);
}
.notice-alert-banner {
background: rgba(245, 158, 11, 0.1);
border: 1px solid rgba(245, 158, 11, 0.3);
border-radius: 14px;
padding: 12px 16px;
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
}
.notice-icon-circle {
width: 32px;
height: 32px;
border-radius: 8px;
background: rgba(245, 158, 11, 0.2);
display: flex;
align-items: center;
justify-content: center;
color: #F59E0B;
flex-shrink: 0;
}
.notice-text {
font-size: 12.5px;
line-height: 1.45;
color: #FDE68A;
}
.notice-text strong {
color: #F59E0B;
font-weight: 700;
}
.step-title-row {
font-size: 13px;
font-weight: 700;
color: #38BDF8;
margin-bottom: 12px;
display: flex;
align-items: center;
justify-content: space-between;
}
.step-sub-hint {
font-size: 11.5px;
font-weight: 400;
color: #94A3B8;
}
.touch-region-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin-bottom: 18px;
}
@media (max-width: 599px) {
.touch-region-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 8px !important;
}
.grid-touch-card {
min-height: 48px !important;
font-size: 13px !important;
}
}
.grid-touch-card {
min-height: 52px;
padding: 12px 14px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.1);
color: #F8FAFC;
font-size: 13.5px;
font-weight: 500;
cursor: pointer;
display: flex;
align-items: center;
gap: 10px;
transition: all 0.2s ease;
-webkit-tap-highlight-color: transparent;
}
.grid-touch-card:hover {
background: rgba(56, 189, 248, 0.08);
border-color: rgba(56, 189, 248, 0.3);
}
.grid-touch-card.active {
background: rgba(56, 189, 248, 0.15);
border-color: #38BDF8;
font-weight: 600;
box-shadow: 0 4px 12px rgba(56, 189, 248, 0.15);
}
.expand-lang-panel {
background: rgba(16, 185, 129, 0.08);
border: 1px solid rgba(16, 185, 129, 0.3);
border-radius: 14px;
padding: 16px;
transition: all 0.3s ease;
}
.expand-header-row {
font-size: 12.5px;
font-weight: 700;
color: #10B981;
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 6px;
}
.lang-touch-row {
min-height: 52px;
padding: 12px 16px;
border-radius: 10px;
background: rgba(15, 23, 42, 0.9);
border: 1px solid rgba(16, 185, 129, 0.4);
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
cursor: pointer;
}
.lang-touch-row.default-sub {
border-color: rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.02);
}
.lang-touch-row:last-child {
margin-bottom: 0;
}
.lang-name-title {
font-weight: 600;
font-size: 14px;
color: #F8FAFC;
}
.lang-sub-tag {
font-size: 12px;
color: #94A3B8;
margin-left: 8px;
}
.lang-selected-check {
color: #10B981;
font-weight: 700;
}
html body .accordion-card-hub-inner {
padding: 16px 18px !important;
display: flex !important;
flex-direction: column !important;
gap: 12px !important;
background: rgba(10, 22, 34, 0.96) !important;
}
html body .step-title-row {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
padding-bottom: 4px !important;
}
html body .step-label-main {
font-size: 12.5px !important;
font-weight: 700 !important;
color: #38BDF8 !important;
margin-left: 4px !important;
}
html body .step-sub-hint {
font-size: 11px !important;
color: #94A3B8 !important;
}
html body .touch-region-grid {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 8px !important;
}
html body .grid-touch-card {
min-height: 44px !important;
padding: 8px 10px !important;
border-radius: 10px !important;
background: rgba(255, 255, 255, 0.05) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
color: #F8FAFC !important;
font-size: 12.5px !important;
font-weight: 500 !important;
cursor: pointer !important;
display: flex !important;
align-items: center !important;
gap: 8px !important;
transition: all 0.2s ease !important;
text-align: left !important;
}
html body .grid-touch-card:hover {
background: rgba(56, 189, 248, 0.12) !important;
border-color: rgba(56, 189, 248, 0.4) !important;
}
html body .grid-touch-card.active {
background: rgba(56, 189, 248, 0.20) !important;
border-color: #38BDF8 !important;
color: #38BDF8 !important;
font-weight: 700 !important;
box-shadow: 0 4px 12px rgba(56, 189, 248, 0.25) !important;
}
html body .expand-lang-panel {
background: rgba(16, 185, 129, 0.08) !important;
border: 1px solid rgba(16, 185, 129, 0.3) !important;
border-radius: 12px !important;
padding: 12px 14px !important;
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
margin-top: 4px !important;
}
html body .expand-header-row {
display: flex !important;
align-items: center !important;
gap: 6px !important;
font-size: 12px !important;
font-weight: 700 !important;
color: #10B981 !important;
margin-bottom: 2px !important;
}
html body .expand-header-title {
color: #10B981 !important;
font-weight: 700 !important;
}
html body .expand-header-title #header-selected-region-title {
color: #34D399 !important;
text-decoration: underline !important;
}
html body .lang-touch-row {
min-height: 44px !important;
padding: 8px 12px !important;
border-radius: 8px !important;
background: rgba(15, 23, 42, 0.9) !important;
border: 1px solid rgba(16, 185, 129, 0.35) !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
text-decoration: none !important;
color: #F8FAFC !important;
transition: all 0.18s ease !important;
}
html body .lang-touch-row:hover {
background: rgba(16, 185, 129, 0.18) !important;
border-color: #10B981 !important;
}
html body .lang-touch-row.active {
background: rgba(16, 185, 129, 0.22) !important;
border-color: #10B981 !important;
box-shadow: 0 0 10px rgba(16, 185, 129, 0.2) !important;
}
html body .lang-info-group {
display: flex !important;
align-items: center !important;
gap: 8px !important;
}
html body .lang-name-title {
font-size: 13px !important;
font-weight: 600 !important;
color: #F8FAFC !important;
}
html body .lang-sub-tag {
font-size: 11.5px !important;
color: #94A3B8 !important;
}
html body .lang-selected-check {
color: #10B981 !important;
font-weight: 700 !important;
font-size: 12px !important;
}
html body .btn-section-shortcut {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
margin-left: auto !important;
padding: 6px 14px !important;
background: rgba(56, 189, 248, 0.10) !important;
border: 1px solid rgba(56, 189, 248, 0.35) !important;
border-radius: 20px !important;
color: #38BDF8 !important;
font-size: 12px !important;
font-weight: 600 !important;
text-decoration: none !important;
transition: all 0.2s ease !important;
}
html body .btn-section-shortcut:hover {
background: #38BDF8 !important;
color: #050F19 !important;
border-color: #38BDF8 !important;
box-shadow: 0 4px 14px rgba(56, 189, 248, 0.35) !important;
transform: translateY(-1px) !important;
}
html body .btn-section-shortcut svg {
transition: transform 0.2s ease !important;
}
html body .btn-section-shortcut:hover svg {
transform: translateX(3px) !important;
}
html body .article-count-pill {
display: inline-flex !important;
align-items: center !important;
padding: 3px 10px !important;
background: rgba(255, 255, 255, 0.08) !important;
border: 1px solid rgba(255, 255, 255, 0.12) !important;
border-radius: 12px !important;
color: #94A3B8 !important;
font-size: 11.5px !important;
font-weight: 500 !important;
}
html body .tech-article-card-grid {
display: flex !important;
flex-direction: column !important;
gap: 16px !important;
width: 100% !important;
margin-top: 16px !important;
margin-bottom: 24px !important;
}
html body .tech-article-card {
width: 100% !important;
background: #0D1624 !important;
border: 1px solid rgba(56, 189, 248, 0.22) !important;
border-radius: 16px !important;
padding: 20px 26px !important;
text-decoration: none !important;
color: inherit !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
gap: 12px !important;
transition: all 0.25s ease !important;
}
html body .tech-article-card:hover {
border-color: #38BDF8 !important;
background: rgba(13, 22, 36, 0.95) !important;
box-shadow: 0 0 24px rgba(56, 189, 248, 0.25) !important;
transform: translateY(-2px) !important;
}
html body .tech-article-card.is-promoted {
border-color: rgba(245, 158, 11, 0.4) !important;
}
html body .tech-article-card.is-promoted:hover {
border-color: #F59E0B !important;
box-shadow: 0 0 24px rgba(245, 158, 11, 0.25) !important;
}
html body .tech-card-header-row {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 16px !important;
width: 100% !important;
}
html body .tech-card-title {
font-size: 16.5px !important;
font-weight: 700 !important;
color: #F8FAFC !important;
line-height: 1.35 !important;
margin-bottom: 0 !important;
flex: 1 1 auto !important;
min-width: 0 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
html body .tech-card-meta-row {
flex: 0 0 auto !important;
display: flex !important;
align-items: center !important;
gap: 8px !important;
margin-top: 0 !important;
font-size: 12px !important;
color: #94A3B8 !important;
line-height: 1 !important;
white-space: nowrap !important;
}
html body .tech-card-meta-row .meta-item {
display: inline-flex !important;
align-items: center !important;
gap: 5px !important;
line-height: 1 !important;
vertical-align: middle !important;
}
html body .tech-card-meta-row .meta-item svg {
display: inline-block !important;
vertical-align: middle !important;
flex-shrink: 0 !important;
transform: translateY(-0.5px) !important;
}
html body .tech-card-meta-row .meta-dot {
color: rgba(255, 255, 255, 0.2) !important;
line-height: 1 !important;
}
html body .tech-card-meta-row .meta-updated {
color: #38BDF8 !important;
}
html body .tech-card-bottom-row {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 20px !important;
width: 100% !important;
}
html body .tech-card-desc {
font-size: 13.5px !important;
color: #94A3B8 !important;
line-height: 1.5 !important;
margin-bottom: 0 !important;
flex: 1 1 auto !important;
min-width: 0 !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
html body .tech-card-desc-placeholder {
flex: 1 1 auto !important;
}
html body .tech-card-footer {
flex: 0 0 auto !important;
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
padding: 7px 16px !important;
background: rgba(56, 189, 248, 0.10) !important;
border: 1px solid rgba(56, 189, 248, 0.3) !important;
border-radius: 20px !important;
font-size: 12.5px !important;
font-weight: 700 !important;
color: #38BDF8 !important;
transition: all 0.2s ease !important;
margin-left: auto !important;
}
html body .tech-article-card.is-promoted .tech-card-footer {
color: #F59E0B !important;
background: rgba(245, 158, 11, 0.10) !important;
border-color: rgba(245, 158, 11, 0.3) !important;
}
html body .tech-article-card:hover .tech-card-footer {
background: #38BDF8 !important;
color: #050F19 !important;
border-color: #38BDF8 !important;
box-shadow: 0 4px 14px rgba(56, 189, 248, 0.35) !important;
}
html body .tech-article-card.is-promoted:hover .tech-card-footer {
background: #F59E0B !important;
color: #050F19 !important;
border-color: #F59E0B !important;
box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35) !important;
}
html body .tech-card-footer svg {
transition: transform 0.2s ease !important;
}
html body .tech-article-card:hover .tech-card-footer svg {
transform: translateX(4px) !important;
}
@media (max-width: 900px) {
html body .tech-card-header-row {
flex-direction: column !important;
align-items: flex-start !important;
gap: 8px !important;
}
html body .tech-card-title {
white-space: normal !important;
}
html body .tech-card-bottom-row {
flex-direction: column !important;
align-items: stretch !important;
gap: 14px !important;
}
html body .tech-card-footer {
align-self: flex-end !important;
}
}
html body .kia-footer-split {
width: 100% !important;
background: #06080B !important;
border-top: 2px solid rgba(56, 189, 248, 0.45) !important;
padding: 56px 0 32px 0 !important;
color: #94A3B8 !important;
font-size: 13.5px !important;
box-sizing: border-box !important;
}
html body .kia-footer-container {
max-width: 1715px !important;
width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 30px !important;
padding-right: 30px !important;
box-sizing: border-box !important;
}
html body .kia-footer-top-split {
display: grid !important;
grid-template-columns: 1fr 1.5fr !important;
gap: 60px !important;
margin-bottom: 44px !important;
}
html body .kia-footer-brand-title {
font-family: 'Outfit', sans-serif !important;
font-weight: 700 !important;
font-size: 24px !important;
color: #F8FAFC !important;
margin-bottom: 12px !important;
letter-spacing: -0.3px !important;
}
html body .kia-footer-brand-desc {
font-size: 13.5px !important;
color: #94A3B8 !important;
line-height: 1.7 !important;
margin: 0 !important;
}
html body .kia-footer-links-matrix {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 24px !important;
}
html body .kia-footer-nav-heading {
font-size: 13.5px !important;
font-weight: 700 !important;
color: #F8FAFC !important;
margin: 0 0 16px 0 !important;
letter-spacing: 0.2px !important;
}
html body .kia-footer-nav-list {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
display: flex !important;
flex-direction: column !important;
}
html body .kia-footer-nav-list li a {
display: inline-flex !important;
align-items: center !important;
min-height: 48px !important;
color: #94A3B8 !important;
text-decoration: none !important;
font-size: 13.5px !important;
transition: color 0.2s ease !important;
}
html body .kia-footer-nav-list li a:hover {
color: #38BDF8 !important;
}
html body .kia-footer-nav-list li a.privacy-highlight {
color: #38BDF8 !important;
font-weight: 600 !important;
}
html body .kia-footer-bottom-line {
border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
padding-top: 24px !important;
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
flex-wrap: wrap !important;
gap: 16px !important;
font-size: 12.5px !important;
color: #64748B !important;
}
html body .kia-footer-copyright {
color: #64748B !important;
}
@media (max-width: 900px) {
html body .kia-footer-split {
padding: 40px 0 28px 0 !important;
}
html body .kia-footer-container {
padding-left: 20px !important;
padding-right: 20px !important;
}
html body .kia-footer-top-split {
grid-template-columns: 1fr !important;
gap: 36px !important;
margin-bottom: 32px !important;
}
}
@media (max-width: 599px) {
html body .kia-footer-links-matrix {
grid-template-columns: 1fr !important;
gap: 20px !important;
}
}
html body .gitdocs-floating-badge {
position: fixed !important;
bottom: 32px !important;
right: 32px !important;
z-index: 900 !important;
display: inline-flex !important;
align-items: center !important;
gap: 10px !important;
background: rgba(13, 19, 28, 0.92) !important;
backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important;
border: 1px solid rgba(56, 189, 248, 0.4) !important;
color: #38BDF8 !important;
padding: 12px 20px !important;
border-radius: 30px !important;
font-size: 13.5px !important;
font-weight: 600 !important;
text-decoration: none !important;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5), 0 0 15px rgba(56, 189, 248, 0.2) !important;
min-height: 48px !important;
transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, opacity 0.2s ease !important;
}
.nav-wrapper-mobile.is-active ~ * .gitdocs-floating-badge,
.nav-wrapper-mobile.is-active .gitdocs-floating-badge,
body:has(.menu-list-mobile[aria-expanded="true"]) .gitdocs-floating-badge,
body:has(.opt3-mega-flyout.open) .gitdocs-floating-badge,
body:has(.mobile-menu-backdrop[style*="opacity: 1"]) .gitdocs-floating-badge,
body.drawer-opened .gitdocs-floating-badge,
body.modal-open .gitdocs-floating-badge,
.menu-list-mobile[aria-expanded="true"] ~ .gitdocs-floating-badge,
.opt3-mega-flyout.open ~ .gitdocs-floating-badge {
z-index: 100 !important;
opacity: 0 !important;
pointer-events: none !important;
}
html body .gitdocs-floating-badge:hover {
transform: translateY(-3px) !important;
box-shadow: 0 14px 30px rgba(0, 0, 0, 0.6), 0 0 20px rgba(56, 189, 248, 0.4) !important;
background: rgba(19, 28, 40, 0.96) !important;
color: #38BDF8 !important;
}
@media (max-width: 1023px) {
html body .gitdocs-floating-badge {
bottom: 84px !important;
right: 16px !important;
padding: 10px 16px !important;
font-size: 12.5px !important;
}
}
html body .gitdocs-hero-pill-wrap {
display: flex !important;
justify-content: flex-start !important;
margin-top: 14px !important;
}
html body .gitdocs-hero-pill-badge {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
background: rgba(56, 189, 248, 0.12) !important;
border: 1px solid rgba(56, 189, 248, 0.35) !important;
color: #38BDF8 !important;
padding: 8px 18px !important;
border-radius: 20px !important;
font-size: 13px !important;
font-weight: 600 !important;
text-decoration: none !important;
min-height: 48px !important;
transition: all 0.2s ease !important;
}
html body .gitdocs-hero-pill-badge:hover {
background: rgba(56, 189, 248, 0.25) !important;
transform: translateY(-2px) !important;
border-color: #38BDF8 !important;
box-shadow: 0 4px 16px rgba(56, 189, 248, 0.3) !important;
color: #38BDF8 !important;
}
.menu-all-link.menu-all-link-highlight {
font-weight: 700 !important;
color: #38BDF8 !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
margin-bottom: 6px !important;
padding-bottom: 8px !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
}
.menu-all-link.menu-all-link-highlight .menu-all-arrow {
margin-left: 6px;
transition: transform 0.2s ease;
}
.menu-all-link.menu-all-link-highlight:hover .menu-all-arrow {
transform: translateX(3px);
}
.kia-subsection-item-left {
display: flex;
align-items: center;
gap: 10px;
min-width: 0 !important;
flex: 1 1 auto !important;
}
.kia-subsection-item-left .sub-name {
word-break: keep-all !important;
}
.kia-subsection-item-right {
display: flex;
align-items: center;
gap: 4px;
color: #C084FC;
font-size: 12.5px;
font-weight: 700;
flex-shrink: 0 !important;
white-space: nowrap !important;
}
.kia-subsection-item-right span {
white-space: nowrap !important;
}
.card-title-link {
color: inherit !important;
text-decoration: none !important;
}
.card-title-link:hover {
text-decoration: underline !important;
}
.card-cta-bar .cta-arrow-svg {
transition: transform 0.2s ease;
}
.card-cta-bar:hover .cta-arrow-svg {
transform: translateX(4px);
}
.bulletin-view-all-btn {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(203, 213, 225, 0.25);
color: #e2e8f0;
font-size: 12.5px;
font-weight: 600;
padding: 8px 16px;
border-radius: 999px;
text-decoration: none;
white-space: nowrap;
transition: all 0.25s ease;
}
.bulletin-view-all-btn svg {
transition: transform 0.25s ease;
}
.bulletin-view-all-btn:hover {
background: rgba(56, 189, 248, 0.12);
border-color: rgba(56, 189, 248, 0.45);
color: #ffffff;
box-shadow: 0 0 16px rgba(56, 189, 248, 0.35);
}
.bulletin-view-all-btn:hover svg {
transform: translateX(3px);
}
.notice-hub-container {
max-width: 1120px;
margin: 0 auto;
padding: 8px 24px 80px;
}
.notice-hub-container .kia-breadcrumb-home {
color: #64748b;
font-size: 12px;
font-weight: 500;
text-decoration: none;
letter-spacing: 0.1px;
transition: color 0.15s ease;
}
.notice-hub-container .kia-breadcrumb-home:hover {
color: #38bdf8;
}
.notice-hub-container .kia-breadcrumb-sep {
margin: 0 6px;
color: rgba(255, 255, 255, 0.16);
}
.notice-hub-container .kia-breadcrumb-current {
color: #94a3b8;
font-size: 12px;
font-weight: 500;
}
.notice-hub-hero {
padding: 36px 0 28px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
margin-bottom: 28px;
}
.notice-hub-hero-tagline {
font-family: 'Oswald', sans-serif;
font-size: 12.5px;
font-weight: 700;
letter-spacing: 2px;
color: rgba(56, 189, 248, 0.85);
text-transform: uppercase;
margin-bottom: 10px;
}
.notice-hub-hero-title {
font-size: 26px;
font-weight: 800;
color: #ffffff;
letter-spacing: 0.5px;
margin: 0 0 10px;
}
.notice-hub-hero-desc {
font-size: 14.5px;
color: #94a3b8;
line-height: 1.6;
margin: 0;
}
.multi-select-chip-group {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
padding-bottom: 20px;
margin-bottom: 24px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.chip-btn {
position: relative;
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.1);
color: #94a3b8;
font-size: 13.5px;
font-weight: 600;
padding: 10px 18px;
min-height: 40px;
border-radius: 999px;
cursor: pointer;
transition: all 0.25s ease;
}
.chip-btn:hover {
color: #ffffff;
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.22);
}
.chip-btn[aria-pressed="true"] {
color: #ffffff;
background: rgba(56, 189, 248, 0.16);
border-color: rgba(56, 189, 248, 0.55);
box-shadow: 0 0 16px rgba(56, 189, 248, 0.3);
}
.chip-btn[aria-pressed="true"]::after {
content: '';
position: absolute;
bottom: -21px;
left: 12px;
right: 12px;
height: 3px;
background: #38bdf8;
box-shadow: 0 0 12px rgba(56, 189, 248, 0.7);
border-radius: 3px;
}
.chip-btn--all[aria-pressed="true"] {
background: var(--kia-live-red, #EA0029);
border-color: var(--kia-live-red, #EA0029);
box-shadow: 0 0 16px rgba(234, 0, 41, 0.35);
}
.chip-btn--all[aria-pressed="true"]::after {
background: var(--kia-live-red, #EA0029);
box-shadow: 0 0 12px rgba(234, 0, 41, 0.6);
}
.chip-count-badge {
background: rgba(255, 255, 255, 0.1);
color: inherit;
font-size: 11px;
font-weight: 700;
padding: 1px 8px;
border-radius: 10px;
}
.chip-btn[aria-pressed="true"] .chip-count-badge {
background: rgba(255, 255, 255, 0.85);
color: #050f19;
}
.notice-search-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
flex-wrap: wrap;
margin-bottom: 24px;
}
.notice-search-input-wrap {
position: relative;
flex: 1;
min-width: 240px;
max-width: 420px;
}
.notice-search-icon {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
color: #64748b;
pointer-events: none;
}
.notice-search-input {
width: 100%;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.12);
color: #e2e8f0;
font-size: 13.5px;
padding: 11px 14px 11px 40px;
border-radius: 10px;
min-height: 44px;
transition: all 0.25s ease;
}
.notice-search-input::placeholder {
color: #64748b;
}
.notice-search-input:focus {
outline: none;
border-color: rgba(56, 189, 248, 0.55);
box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.14);
}
.notice-result-count {
font-size: 13px;
color: #64748b;
white-space: nowrap;
}
.notice-timeline-list {
display: flex;
flex-direction: column;
gap: 14px;
}
.notice-timeline-card {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
background: rgba(12, 26, 37, 0.6);
border: 1px solid rgba(255, 255, 255, 0.08);
border-left: 4px solid rgba(56, 189, 248, 0.85);
border-radius: 10px;
padding: 20px 22px;
text-decoration: none;
color: inherit;
transition: all 0.25s ease;
}
.notice-timeline-card.urgent {
border-left-color: var(--kia-live-red, #EA0029);
}
.notice-timeline-card:hover {
background: rgba(18, 34, 48, 0.85);
border-color: rgba(255, 255, 255, 0.16);
transform: translateX(4px);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}
.notice-card-left {
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0;
}
.notice-card-meta {
display: flex;
align-items: center;
gap: 10px;
font-size: 12px;
color: #64748b;
flex-wrap: wrap;
}
.notice-card-meta .notice-cat-name {
color: #38bdf8;
font-weight: 700;
}
.notice-tag-badge {
font-size: 10.5px;
font-weight: 700;
padding: 2px 9px;
border-radius: 2px;
text-transform: uppercase;
letter-spacing: 0.5px;
white-space: nowrap;
}
.notice-tag-badge.tag-urgent {
background: var(--kia-live-red, #EA0029);
color: #ffffff;
}
.notice-tag-badge.tag-update {
background: rgba(59, 130, 246, 0.18);
color: #60a5fa;
border: 1px solid rgba(59, 130, 246, 0.35);
}
.notice-tag-badge.tag-maintenance {
background: rgba(245, 158, 11, 0.18);
color: #f59e0b;
border: 1px solid rgba(245, 158, 11, 0.35);
}
.notice-tag-badge.tag-general {
background: rgba(255, 255, 255, 0.08);
color: #cbd5e1;
border: 1px solid rgba(255, 255, 255, 0.15);
}
.notice-card-title {
font-size: 15.5px;
font-weight: 600;
color: #ffffff;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.notice-card-arrow {
flex-shrink: 0;
color: #64748b;
transition: transform 0.2s ease;
}
.notice-timeline-card:hover .notice-card-arrow {
transform: translateX(3px);
color: #38bdf8;
}
.notice-skeleton-card {
height: 76px;
border-radius: 10px;
background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.08) 37%, rgba(255,255,255,0.04) 63%);
background-size: 400% 100%;
animation: notice-skeleton-shimmer 1.6s ease-in-out infinite;
margin-bottom: 14px;
}
@keyframes notice-skeleton-shimmer {
0% { background-position: 100% 50%; }
100% { background-position: 0 50%; }
}
.notice-timeline-empty {
padding: 48px 24px;
text-align: center;
color: #94a3b8;
font-size: 14px;
background: rgba(12, 26, 37, 0.6);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 10px;
}
.notice-load-more-wrap {
display: flex;
justify-content: center;
align-items: center;
margin-top: 28px;
padding-bottom: 20px;
}
.notice-load-more-btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 13px 32px;
background: rgba(12, 26, 37, 0.85);
border: 1px solid rgba(56, 189, 248, 0.35);
border-radius: 9999px;
color: #e2e8f0;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
backdrop-filter: blur(10px);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}
.notice-load-more-btn:hover {
background: rgba(56, 189, 248, 0.12);
border-color: #38bdf8;
color: #38bdf8;
box-shadow: 0 0 24px rgba(56, 189, 248, 0.35);
transform: translateY(-2px);
}
.notice-load-more-btn:active {
transform: translateY(0);
}
.notice-load-more-count {
color: #94a3b8;
font-size: 13px;
font-weight: 500;
}
.notice-load-more-icon {
color: #38bdf8;
transition: transform 0.2s ease;
}
.notice-load-more-btn:hover .notice-load-more-icon {
transform: translateY(3px);
}
@media (max-width: 768px) {
.notice-hub-container {
padding: 8px 16px 60px;
}
.multi-select-chip-group {
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
padding-bottom: 22px;
}
.chip-btn {
flex-shrink: 0;
}
.notice-search-bar {
flex-direction: column;
align-items: stretch;
}
.notice-search-input-wrap {
max-width: none;
}
.notice-timeline-card {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.notice-card-title {
white-space: normal;
}
.notice-card-arrow {
display: none;
}
.notice-load-more-btn {
width: 100%;
justify-content: center;
padding: 14px 20px;
}
}
.opt3-backdrop {
position: fixed;
inset: 0;
background: rgba(2, 6, 18, 0.48);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
z-index: 10040 !important;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.25s ease;
}
.opt3-backdrop.active {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
body.kia-lang-flyout-open #header-region-lang-hub,
body.kia-lang-flyout-open .header-language-selector,
body.kia-lang-flyout-open .user-info.dropdown,
body.kia-lang-flyout-open .kia-lang-capsule-btn,
header.header:has(.opt3-backdrop.active) #header-region-lang-hub,
header.header:has(.opt3-mega-flyout.open) #header-region-lang-hub,
header.header:has(#opt3-flyout.open) #header-region-lang-hub,
header.header:has(.opt3-backdrop.active) .header-language-selector,
header.header:has(.opt3-mega-flyout.open) .header-language-selector,
header.header:has(#opt3-flyout.open) .header-language-selector,
header.header:has(.opt3-backdrop.active) .kia-lang-capsule-btn,
header.header:has(.opt3-mega-flyout.open) .kia-lang-capsule-btn,
header.header:has(#opt3-flyout.open) .kia-lang-capsule-btn,
#header-region-lang-hub:has(.kia-lang-capsule-btn[aria-expanded="true"]),
.header-language-selector:has(.kia-lang-capsule-btn[aria-expanded="true"]),
.kia-lang-capsule-btn[aria-expanded="true"] {
z-index: 1 !important;
}
.opt3-mega-flyout {
position: fixed !important;
top: 84px !important;
left: 16px !important;
right: 16px !important;
max-width: 1320px;
max-height: calc(100vh - 100px) !important;
max-height: calc(100dvh - 100px) !important;
overflow-y: auto !important;
overscroll-behavior: contain;
margin: 0 auto;
background: rgba(8, 17, 30, 0.95);
backdrop-filter: blur(20px) saturate(140%);
-webkit-backdrop-filter: blur(20px) saturate(140%);
border: 1px solid rgba(56, 189, 248, 0.35);
border-radius: 18px;
box-shadow: 0 32px 80px -10px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.08), 0 0 36px rgba(56, 189, 248, 0.12);
padding: 18px 26px 20px;
z-index: 10050 !important;
visibility: hidden;
opacity: 0;
transform: translateY(-12px) scale(0.985);
transition: opacity 0.24s cubic-bezier(0.16, 1, 0.3, 1), transform 0.24s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.24s;
pointer-events: none;
box-sizing: border-box;
}
@media (min-width: 1025px) {
.opt3-mega-flyout {
top: 86px !important;
left: 36px !important;
right: 36px !important;
max-height: calc(100vh - 102px) !important;
max-height: calc(100dvh - 102px) !important;
}
}
.opt3-mega-flyout.open {
visibility: visible;
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
}
.kia-lang-capsule-btn {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(15, 23, 42, 0.65);
border: 1px solid rgba(148, 163, 184, 0.25);
border-radius: 9999px;
padding: 6px 14px;
color: #F8FAFC;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
}
.kia-lang-capsule-btn:hover {
background: rgba(30, 41, 59, 0.85);
border-color: rgba(56, 189, 248, 0.5);
box-shadow: 0 0 12px rgba(56, 189, 248, 0.2);
}
.kia-lang-capsule-btn:focus-visible {
outline: 2px solid #38BDF8;
outline-offset: 2px;
}
.opt3-trigger-sw {
font-size: 11px;
font-weight: 500;
color: #94A3B8;
padding-left: 4px;
border-left: 1px solid rgba(148, 163, 184, 0.3);
}
.opt3-ico {
width: 16px;
height: 16px;
stroke: currentColor;
flex-shrink: 0;
}
.opt3-chevron-icon {
width: 12px;
height: 12px;
transition: transform 0.2s ease;
}
.kia-lang-capsule-btn[aria-expanded="true"] .opt3-chevron-icon {
transform: rotate(180deg);
}
.opt3-flyout-top-bar {
max-width: 1440px;
margin: 0 auto 14px;
padding-bottom: 12px;
padding-right: 52px !important;
border-bottom: 1px solid rgba(148, 163, 184, 0.18);
display: flex !important;
flex-direction: row !important;
align-items: flex-start !important;
justify-content: space-between !important;
gap: 16px;
position: relative !important;
}
.opt3-flyout-title-group {
display: flex;
align-items: center;
gap: 12px;
flex: 1 1 auto;
min-width: 0;
}
.opt3-flyout-heading {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.opt3-globe-title-ico {
width: 22px;
height: 22px;
color: #38BDF8;
flex-shrink: 0;
}
.opt3-flyout-title {
font-size: 16px;
font-weight: 800;
color: #FFFFFF;
letter-spacing: -0.01em;
}
.opt3-flyout-subtitle {
font-size: 12px;
color: #94A3B8;
}
.opt3-close-btn {
position: absolute !important;
top: -2px !important;
right: 0 !important;
margin-left: auto !important;
width: 38px;
height: 38px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(148, 163, 184, 0.28);
color: #CBD5E1;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0;
flex-shrink: 0;
z-index: 20;
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.opt3-close-btn:hover {
background: rgba(234, 0, 41, 0.18);
border-color: rgba(234, 0, 41, 0.65);
color: #FFFFFF;
transform: rotate(90deg);
box-shadow: 0 0 16px rgba(234, 0, 41, 0.35);
}
.opt3-close-btn:active {
transform: rotate(90deg) scale(0.92);
}
.opt3-close-btn:focus-visible {
outline: 2px solid #38BDF8;
outline-offset: 2px;
}
.opt3-close-icon {
width: 17px;
height: 17px;
stroke: currentColor;
transition: stroke 0.2s ease;
}
.opt3-columns-wrapper {
max-width: 1440px;
margin: 0 auto;
display: grid;
gap: 12px 14px;
}
.opt3-columns-wrapper.opt3-columns-5 {
grid-template-columns: repeat(12, minmax(0, 1fr));
grid-template-rows: repeat(3, auto);
align-items: stretch;
}
.opt3-col {
display: flex;
flex-direction: column;
gap: 8px;
border: 1px solid rgba(148, 163, 184, 0.16);
background: rgba(15, 23, 42, 0.62);
backdrop-filter: blur(14px) saturate(140%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
border-radius: 12px;
padding: 12px 14px;
min-height: 0;
transition: border-color 0.25s, background-color 0.25s, box-shadow 0.25s;
position: relative;
}
.opt3-col:hover {
border-color: rgba(56, 189, 248, 0.4);
background: rgba(22, 36, 56, 0.78);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
.opt3-col-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding-bottom: 8px;
border-bottom: 1px solid rgba(148, 163, 184, 0.15);
}
.opt3-cat-icon {
width: 18px;
height: 18px;
flex-shrink: 0;
}
.opt3-col-title {
font-size: 13px;
font-weight: 700;
color: #F8FAFC;
letter-spacing: -0.01em;
}
section[data-category="kr"] { border-top: 2px solid #38BDF8; }
section[data-category="cn"] { border-top: 2px solid #F472B6; }
section[data-category="na"] {
border-color: rgba(245, 158, 11, 0.32);
border-top: 2px solid #F59E0B;
background: linear-gradient(180deg, rgba(15, 23, 42, 0.78) 0%, rgba(10, 16, 29, 0.88) 100%);
overflow: hidden;
}
section[data-category="na"]:hover {
border-color: rgba(245, 158, 11, 0.48);
border-top: 2px solid #F59E0B;
background: linear-gradient(180deg, rgba(15, 23, 42, 0.82) 0%, rgba(10, 16, 29, 0.92) 100%);
}
section[data-category="eu"] { border-top: 2px solid #10B981; }
section[data-category="ust"] { border-top: 2px solid #FBBF24; }
section[data-category="kr"] .opt3-cat-icon { color: #38BDF8; }
section[data-category="cn"] .opt3-cat-icon { color: #F472B6; }
section[data-category="na"] .opt3-cat-icon { color: #38BDF8; }
section[data-category="eu"] .opt3-cat-icon { color: #10B981; }
section[data-category="ust"] .opt3-cat-icon { color: #FBBF24; }
@media (min-width: 1025px) {
.opt3-columns-wrapper.opt3-columns-5 > section.opt3-col[data-category="kr"] {
grid-column: 1 / 4;
grid-row: 1 / 2;
}
.opt3-columns-wrapper.opt3-columns-5 > section.opt3-col[data-category="cn"] {
grid-column: 1 / 4;
grid-row: 2 / 3;
}
.opt3-columns-wrapper.opt3-columns-5 > section.opt3-col[data-category="ust"] {
grid-column: 1 / 4;
grid-row: 3 / 4;
justify-content: space-between;
}
.opt3-columns-wrapper.opt3-columns-5 > section.opt3-col[data-category="na"] {
grid-column: 4 / 7;
grid-row: 1 / 4;
padding: 14px 16px;
justify-content: space-between;
}
.opt3-columns-wrapper.opt3-columns-5 > section.opt3-col[data-category="eu"] {
grid-column: 7 / 13;
grid-row: 1 / 4;
padding: 14px 16px;
}
}
.opt3-link-list {
display: flex;
flex-direction: column;
gap: 7px;
max-height: none !important;
overflow-y: visible !important;
padding-right: 0 !important;
}
.opt3-link-list::-webkit-scrollbar {
width: 4px;
}
.opt3-link-list::-webkit-scrollbar-thumb {
background: rgba(148, 163, 184, 0.3);
border-radius: 4px;
}
section.opt3-col[data-category="eu"] .opt3-link-list {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 7px !important;
}
section.opt3-col[data-category="eu"] .opt3-link-list > .opt3-link-item.opt3-featured-item,
section.opt3-col[data-category="eu"] .opt3-link-list > .opt3-link-item:first-child {
grid-column: 1 / -1 !important;
background: linear-gradient(90deg, rgba(16, 185, 129, 0.14) 0%, rgba(15, 23, 42, 0.78) 100%) !important;
border-color: rgba(16, 185, 129, 0.38) !important;
}
@media (max-width: 1024px) and (min-width: 600px) {
#opt3-flyout section.opt3-col[data-category="eu"] {
grid-column: 1 / -1 !important;
}
section.opt3-col[data-category="eu"] .opt3-link-list {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
@media (max-width: 599px) {
section.opt3-col[data-category="eu"] .opt3-link-list {
grid-template-columns: 1fr !important;
}
}
.opt3-link-item {
background: rgba(255, 255, 255, 0.035) !important;
border: 1px solid rgba(148, 163, 184, 0.14) !important;
border-radius: 8px !important;
padding: 0 11px !important;
height: 38px !important;
min-height: 38px !important;
box-sizing: border-box !important;
color: #E2E8F0 !important;
text-decoration: none !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 6px !important;
cursor: pointer !important;
transition: all 0.18s ease !important;
}
.opt3-link-item:hover {
background: rgba(56, 189, 248, 0.15) !important;
border-color: rgba(56, 189, 248, 0.55) !important;
color: #FFFFFF !important;
transform: translateY(-1px) !important;
}
.opt3-link-item:focus-visible {
outline: 2px solid #38BDF8 !important;
outline-offset: 1px !important;
}
.opt3-link-item.active-item {
border-color: #38BDF8 !important;
background: rgba(56, 189, 248, 0.2) !important;
color: #FFFFFF !important;
box-shadow: 0 0 12px rgba(56, 189, 248, 0.25) !important;
}
.opt3-link-name {
font-size: 12.5px !important;
font-weight: 600 !important;
display: inline-flex !important;
align-items: center !important;
line-height: 1.25 !important;
margin: 0 !important;
padding: 0 !important;
text-align: left !important;
min-width: 0 !important;
flex: 1 1 auto !important;
}
.opt3-iso-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 23px;
height: 19px;
padding: 0 4px;
margin-right: 7px;
border-radius: 4px;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.03em;
background: rgba(15, 23, 42, 0.88);
border: 1px solid rgba(148, 163, 184, 0.26);
color: #94A3B8;
flex-shrink: 0;
transition: all 0.18s ease;
}
.opt3-link-item:hover .opt3-iso-badge,
.opt3-link-item.active-item .opt3-iso-badge {
background: rgba(56, 189, 248, 0.22);
border-color: rgba(56, 189, 248, 0.6);
color: #38BDF8;
}
.opt3-link-label-text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.opt3-ext-icon {
font-size: 12px !important;
margin-left: auto !important;
opacity: 0.85 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
line-height: 1 !important;
flex-shrink: 0 !important;
color: #38BDF8 !important;
transition: transform 0.15s ease, opacity 0.15s ease, color 0.15s ease !important;
}
.opt3-link-item:hover .opt3-ext-icon {
opacity: 1 !important;
color: #FFFFFF !important;
transform: translate(2px, -2px) !important;
}
.visually-hidden {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
.opt3-link-badges {
display: flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
}
.opt3-current-badge {
font-size: 10px;
font-weight: 700;
background: rgba(56, 189, 248, 0.25);
color: #38BDF8;
border: 1px solid rgba(56, 189, 248, 0.4);
padding: 2px 6px;
border-radius: 4px;
white-space: nowrap;
}
.opt3-law-badge {
font-size: 10px;
font-weight: 700;
background: rgba(16, 185, 129, 0.2);
color: #34D399;
border: 1px solid rgba(16, 185, 129, 0.4);
padding: 2px 6px;
border-radius: 4px;
white-space: nowrap;
}
.na-status-pill {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 7px;
border-radius: 999px;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.01em;
background: rgba(245, 158, 11, 0.18);
border: 1px solid rgba(245, 158, 11, 0.5);
color: #FBBF24;
white-space: nowrap;
flex-shrink: 0;
}
.na-status-dot {
width: 5px;
height: 5px;
border-radius: 50%;
background: #FBBF24;
box-shadow: 0 0 6px #FBBF24;
flex-shrink: 0;
}
.opt3-link-item.na-disabled-row,
.opt3-link-item.na-disabled-row:hover,
.opt3-link-item.na-disabled-row:focus-visible {
background: rgba(15, 23, 42, 0.45) !important;
border: 1px dashed rgba(148, 163, 184, 0.22) !important;
color: #64748B !important;
cursor: not-allowed !important;
transform: none !important;
box-shadow: none !important;
user-select: none !important;
}
.opt3-link-item.na-disabled-row .opt3-iso-badge,
.opt3-link-item.na-disabled-row:hover .opt3-iso-badge {
background: rgba(15, 23, 42, 0.55) !important;
border-color: rgba(148, 163, 184, 0.16) !important;
color: #64748B !important;
}
.na-row-lock-tag {
display: inline-flex;
align-items: center;
gap: 3px;
font-size: 11px;
font-weight: 700;
color: #F59E0B;
opacity: 0.9;
flex-shrink: 0;
margin-left: auto;
}
.opt3-na-hub-pod {
margin-top: auto;
padding: 9px 11px;
border-radius: 8px;
background: rgba(2, 6, 23, 0.55);
border: 1px solid rgba(148, 163, 184, 0.15);
}
.opt3-na-hub-pod.opt3-na-hub-pod-disabled {
background: rgba(245, 158, 11, 0.08);
border: 1px solid rgba(245, 158, 11, 0.28);
}
.opt3-na-hub-pod-inner {
display: flex;
align-items: center;
gap: 8px;
}
.opt3-na-hub-pod-ico {
width: 16px;
height: 16px;
color: #38BDF8;
flex-shrink: 0;
}
.opt3-na-hub-pod.opt3-na-hub-pod-disabled .opt3-na-hub-pod-ico {
color: #FBBF24;
}
.opt3-na-hub-pod-text {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
}
.opt3-na-hub-pod-title {
font-size: 11px;
font-weight: 700;
color: #E2E8F0;
line-height: 1.2;
}
.opt3-na-hub-pod.opt3-na-hub-pod-disabled .opt3-na-hub-pod-title {
font-size: 11.5px;
color: #FDE68A;
}
.opt3-na-hub-pod-sub {
font-size: 10.5px;
color: #94A3B8;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.opt3-bottom-bar {
max-width: 1440px;
margin: 14px auto 0;
padding-top: 12px;
border-top: 1px solid rgba(148, 163, 184, 0.16);
display: flex;
align-items: center;
}
.opt3-bottom-alert {
width: 100%;
display: flex;
align-items: center;
gap: 12px;
background: linear-gradient(135deg, rgba(245, 158, 11, 0.12) 0%, rgba(217, 119, 6, 0.05) 100%);
border: 1px solid rgba(245, 158, 11, 0.35);
border-radius: 10px;
padding: 8px 14px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2), inset 0 0 12px rgba(245, 158, 11, 0.05);
}
.opt3-alert-badge {
display: inline-flex;
align-items: center;
gap: 5px;
background: rgba(245, 158, 11, 0.25);
border: 1px solid rgba(245, 158, 11, 0.5);
color: #FBBF24;
font-size: 11px;
font-weight: 700;
padding: 3px 8px;
border-radius: 6px;
white-space: nowrap;
flex-shrink: 0;
}
.opt3-alert-icon {
width: 14px;
height: 14px;
stroke: #FBBF24;
}
.opt3-alert-text {
display: flex;
flex-direction: column;
gap: 2px;
flex: 1 1 0%;
min-width: 0;
white-space: normal !important;
}
.opt3-alert-kr {
color: #FEF3C7;
font-size: 12.5px;
font-weight: 600;
line-height: 1.4;
letter-spacing: -0.01em;
white-space: normal !important;
word-break: break-word;
overflow-wrap: break-word;
}
@media (max-width: 900px) {
.opt3-bottom-alert {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
}
@media (prefers-reduced-motion: reduce) {
.opt3-backdrop,
.opt3-mega-flyout,
.opt3-col,
.opt3-link-item,
.opt3-safety-overlay,
.opt3-safety-box,
.opt3-chevron-icon {
transition: none;
transform: none;
animation: none;
}
}
.kia-master-detail-layout {
display: grid;
grid-template-columns: 300px minmax(0, 1fr);
gap: 28px;
align-items: flex-start;
margin-top: 24px;
margin-bottom: 48px;
}
.kia-master-nav {
position: sticky;
top: 90px;
background: rgba(18, 26, 36, 0.85);
border: 1px solid rgba(56, 189, 248, 0.16);
border-radius: 16px;
padding: 16px;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.5);
display: flex;
flex-direction: column;
gap: 12px;
}
.master-nav-header {
display: flex;
align-items: center;
gap: 8px;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.08em;
color: #94A3B8;
padding: 6px 8px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.master-nav-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.master-nav-item {
width: 100%;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 12px;
padding: 12px 14px;
display: flex;
align-items: center;
gap: 12px;
cursor: pointer;
text-align: left;
font-family: inherit;
color: #F1F5F9;
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
position: relative;
}
.master-nav-item:hover {
background: rgba(56, 189, 248, 0.08);
border-color: rgba(56, 189, 248, 0.3);
transform: translateX(3px);
}
.master-nav-item.is-active {
background: linear-gradient(135deg, rgba(56, 189, 248, 0.18), rgba(18, 26, 36, 0.9));
border-color: #38BDF8;
box-shadow: 0 0 16px rgba(56, 189, 248, 0.25);
color: #FFFFFF;
}
.master-item-icon-wrap {
width: 36px;
height: 36px;
border-radius: 8px;
background: rgba(56, 189, 248, 0.1);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.master-nav-item.is-active .master-item-icon-wrap {
background: #38BDF8;
}
.master-nav-item.is-active .master-item-icon-wrap svg {
stroke: #05141F !important;
}
.master-item-text {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.master-item-name {
font-size: 14px;
font-weight: 700;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.master-item-count {
font-size: 11px;
color: #94A3B8;
}
.master-nav-item.is-active .master-item-count {
color: #38BDF8;
font-weight: 600;
}
.master-arrow-svg {
color: #64748B;
flex-shrink: 0;
transition: transform 0.2s ease, color 0.2s ease;
}
.master-nav-item:hover .master-arrow-svg,
.master-nav-item.is-active .master-arrow-svg {
color: #38BDF8;
transform: translateX(2px);
}
.kia-detail-panels {
min-width: 0;
display: flex;
flex-direction: column;
}
.kia-detail-panel {
display: none;
animation: kiaPanelFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.kia-detail-panel.is-active {
display: block;
}
@keyframes kiaPanelFadeIn {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
.detail-panel-header {
margin-bottom: 20px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 22px 26px !important;
}
.detail-type-badge {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.06em;
color: #38BDF8;
margin-bottom: 6px;
}
.pulse-dot {
width: 7px;
height: 7px;
border-radius: 999px;
background: #38BDF8;
box-shadow: 0 0 8px #38BDF8;
}
.detail-panel-title {
font-size: 22px;
font-weight: 800;
color: #FFFFFF;
letter-spacing: -0.02em;
margin-bottom: 4px;
}
.detail-panel-desc {
font-size: 13.5px;
color: #94A3B8;
line-height: 1.5;
margin: 0;
}
.detail-header-link {
flex-shrink: 0;
}
@media (max-width: 992px) {
.kia-master-detail-layout {
grid-template-columns: 1fr;
gap: 20px;
}
.kia-master-nav {
position: static;
top: auto;
padding: 12px;
}
.master-nav-list {
flex-direction: row;
overflow-x: auto;
padding-bottom: 4px;
gap: 8px;
scrollbar-width: thin;
}
.master-nav-item {
width: auto;
white-space: nowrap;
padding: 8px 14px;
flex-shrink: 0;
}
.master-arrow-svg {
display: none;
}
.detail-panel-header {
flex-direction: column;
align-items: flex-start;
}
}
html body .category-container,
html body .kia-section-page,
html body .kia-article-page-fluid-container,
html body .container,
html body .search-results {
max-width: 1715px !important;
width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
html body .sub-nav,
html body .page-header,
html body .kia-section-page header#main-content,
html body .category-sidebar-layout,
html body .full-width-articles-wrapper,
html body .kia-master-detail-layout,
html body .kia-leaf-section-layout {
max-width: 100% !important;
width: 100% !important;
padding-left: 30px !important;
padding-right: 30px !important;
box-sizing: border-box !important;
}
@media (min-width: 1024px) {
html body .category-sidebar-layout {
grid-template-columns: 280px minmax(0, 1fr) !important;
gap: 36px !important;
}
}
html body .kia-master-detail-layout {
max-width: 100% !important;
width: 100% !important;
grid-template-columns: 340px 1fr !important;
gap: 32px !important;
}
html body .kia-master-nav {
width: 340px !important;
}
html body .tech-article-card {
overflow: hidden !important;
word-break: break-word !important;
overflow-wrap: anywhere !important;
}
html body .tech-card-header-row {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 8px !important;
width: 100% !important;
min-width: 0 !important;
overflow: hidden !important;
}
html body .tech-card-title-wrap {
display: flex !important;
align-items: center !important;
flex-wrap: wrap !important;
gap: 8px !important;
width: 100% !important;
min-width: 0 !important;
}
html body .tech-card-title {
font-size: 17.5px !important;
font-weight: 700 !important;
color: #FFFFFF !important;
line-height: 1.4 !important;
margin: 0 !important;
white-space: normal !important;
overflow: visible !important;
text-overflow: unset !important;
word-break: break-word !important;
overflow-wrap: anywhere !important;
}
html body .tech-card-meta-row {
display: none !important;
}
html body .tech-card-meta-row.is-section-meta {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 4px 8px !important;
width: 100% !important;
max-width: 100% !important;
overflow: hidden !important;
font-size: 11.5px !important;
color: #94A3B8 !important;
white-space: normal !important;
line-height: 1.4 !important;
}
html body .tech-card-meta-row .meta-item {
display: inline-flex !important;
align-items: center !important;
gap: 4px !important;
white-space: nowrap !important;
font-size: 11.5px !important;
color: #94A3B8 !important;
flex-shrink: 0 !important;
}
html body .tech-card-meta-row .meta-dot {
color: rgba(255, 255, 255, 0.25) !important;
flex-shrink: 0 !important;
}
html body .tech-card-desc {
word-break: break-word !important;
overflow-wrap: anywhere !important;
}
html body .promoted-badge {
display: inline-flex !important;
align-items: center !important;
gap: 4px !important;
padding: 3px 8px !important;
background: rgba(245, 158, 11, 0.16) !important;
border: 1px solid rgba(245, 158, 11, 0.45) !important;
border-radius: 6px !important;
color: #F59E0B !important;
font-size: 11.5px !important;
font-weight: 700 !important;
line-height: 1 !important;
letter-spacing: -0.01em !important;
flex-shrink: 0 !important;
}
html body .load-more-container {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
margin-top: 24px;
margin-bottom: 20px;
}
html body .btn-load-more {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(18, 26, 36, 0.85);
border: 1px solid rgba(56, 189, 248, 0.35);
border-radius: 12px;
color: #38BDF8;
font-size: 14px;
font-weight: 600;
padding: 12px 28px;
cursor: pointer;
transition: all 0.2s ease;
backdrop-filter: blur(8px);
}
html body .btn-load-more:hover {
background: rgba(56, 189, 248, 0.15);
border-color: #38BDF8;
color: #FFFFFF;
transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(56, 189, 248, 0.25);
}
html body .kia-leaf-section-layout {
display: grid !important;
grid-template-columns: 1fr 340px !important;
gap: 32px !important;
width: 100% !important;
margin-top: 16px !important;
}
html body .leaf-main-column {
min-width: 0 !important;
}
html body .leaf-sticky-sidebar {
position: sticky !important;
top: 96px !important;
height: fit-content !important;
}
html body .sticky-popular-card {
background: #0D1624 !important;
border: 1px solid rgba(56, 189, 248, 0.25) !important;
border-radius: 16px !important;
padding: 22px 20px !important;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
}
html body .sidebar-widget-header {
display: flex !important;
align-items: center !important;
gap: 8px !important;
margin-bottom: 16px !important;
padding-bottom: 12px !important;
border-bottom: 1px solid rgba(56, 189, 248, 0.15) !important;
}
html body .widget-title-text {
font-size: 14.5px !important;
font-weight: 700 !important;
color: #F1F5F9 !important;
}
html body .sticky-popular-list {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 12px !important;
}
html body .popular-item {
margin: 0 !important;
padding: 0 !important;
}
html body .popular-link {
display: flex !important;
align-items: flex-start !important;
gap: 8px !important;
font-size: 13.5px !important;
color: #CBD5E1 !important;
text-decoration: none !important;
line-height: 1.4 !important;
transition: color 0.2s ease !important;
}
html body .popular-link:hover {
color: #38BDF8 !important;
}
html body .popular-bullet {
color: #F59E0B !important;
font-size: 12px !important;
line-height: 1.4 !important;
flex-shrink: 0 !important;
}
html body .popular-bullet--dot {
color: #64748B !important;
}
html body .sub-nav {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
gap: 20px !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
padding: 18px 30px !important;
margin-bottom: 32px !important;
width: 100% !important;
max-width: 1715px !important;
margin-left: auto !important;
margin-right: auto !important;
box-sizing: border-box !important;
flex-wrap: nowrap !important;
}
html body .sub-nav nav,
html body .sub-nav .breadcrumbs,
html body .sub-nav .kia-breadcrumb {
flex: 1 1 auto !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
html body .sub-nav .search-container {
position: relative !important;
margin-left: auto !important;
width: clamp(280px, 22vw, 380px) !important;
flex: 0 0 auto !important;
display: flex !important;
align-items: center !important;
padding: 0 !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
html body .sub-nav .search-container > svg.search-icon,
html body .sub-nav .search-container > svg {
display: none !important;
}
html body .sub-nav .search-container::before {
content: "" !important;
position: absolute !important;
left: 16px !important;
top: 50% !important;
transform: translateY(-50%) !important;
width: 16px !important;
height: 16px !important;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2338BDF8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") center / contain no-repeat !important;
z-index: 10 !important;
pointer-events: none !important;
}
html body .sub-nav form.search,
html body form.search {
position: relative !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
html body .sub-nav #query,
html body .sub-nav input[type="search"],
html body form.search input[type="search"] {
display: block !important;
width: 100% !important;
height: 42px !important;
background: rgba(8, 18, 34, 0.9) !important;
color: #FFFFFF !important;
border: 1.5px solid rgba(56, 189, 248, 0.28) !important;
border-radius: 22px !important;
padding: 0 44px 0 44px !important;   font-size: 13.5px !important;
font-weight: 500 !important;
outline: none !important;
box-shadow: 0 2px 14px rgba(0, 0, 0, 0.45) !important;
transition: all 0.2s ease !important;
box-sizing: border-box !important;
-webkit-appearance: none !important;
}
html body .sub-nav #query:focus,
html body .sub-nav input[type="search"]:focus {
border-color: #38BDF8 !important;
box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2), 0 4px 20px rgba(0, 0, 0, 0.6) !important;
}
html body form.search.search-has-value .clear-button,
html body .search-has-value .clear-button {
position: absolute !important;
right: 14px !important;
top: 50% !important;
transform: translateY(-50%) !important;
width: 28px !important;
height: 28px !important;
border: none !important;
box-shadow: none !important;
background: transparent !important;
border-radius: 6px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
color: #94A3B8 !important;
cursor: pointer !important;
z-index: 20 !important;
padding: 0 !important;
margin: 0 !important;
transition: background 0.15s ease, color 0.15s ease !important;
}
html body form.search .clear-button:hover,
html body .search-has-value .clear-button:hover {
background: rgba(255, 255, 255, 0.06) !important;
color: #F8FAFC !important;
}
html body .search-results-sidebar {
background: #09101A !important;
border: 1px solid rgba(56, 189, 248, 0.2) !important;
border-radius: 16px !important;
padding: 24px 18px !important;
}
html body .search-results-sidebar .collapsible-sidebar-title {
color: #38BDF8 !important;
font-size: 12px !important;
font-weight: 700 !important;
letter-spacing: 0.05em !important;
text-transform: uppercase !important;
}
html body .search-results-sidebar .sidenav-item {
color: #CBD5E1 !important;
border-radius: 8px !important;
padding: 8px 12px !important;
transition: all 0.2s ease !important;
}
html body .search-results-sidebar .sidenav-item:hover,
html body .search-results-sidebar .sidenav-item.current {
background: rgba(56, 189, 248, 0.15) !important;
color: #38BDF8 !important;
}
html body .search-results {
display: grid !important;
grid-template-columns: 280px minmax(0, 1fr) !important;
gap: 36px !important;
width: 100% !important;
max-width: 1715px !important;
margin: 0 auto 60px !important;
padding: 0 30px !important;
box-sizing: border-box !important;
align-items: start !important;
}
html body .search-results-column {
width: 100% !important;
flex: none !important;
}
html body .search-results-list {
list-style: none !important;
padding: 0 !important;
margin: 24px 0 0 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 16px !important;
width: 100% !important;
}
html body .search-results-list > li {
border: none !important;
padding: 0 !important;
margin: 0 !important;
}
html body .search-results-list article {
background: rgba(14, 25, 45, 0.7) !important;
border: 1px solid rgba(56, 189, 248, 0.15) !important;
border-radius: 14px !important;
padding: 22px 26px !important;
transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
}
html body .search-results-list article:hover {
transform: translateY(-2px) !important;
border-color: rgba(56, 189, 248, 0.45) !important;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}
html body .search-result-title a {
color: #38BDF8 !important;
font-size: 17px !important;
font-weight: 700 !important;
text-decoration: none !important;
}
html body .search-result-title a:hover {
color: #7DD3FC !important;
text-decoration: underline !important;
}
html body .search-result-description {
color: #94A3B8 !important;
font-size: 14px !important;
line-height: 1.6 !important;
margin-top: 10px !important;
}
html body .search-result-description em {
color: #F8FAFC !important;
background: rgba(56, 189, 248, 0.2) !important;
padding: 2px 5px !important;
border-radius: 4px !important;
font-style: normal !important;
font-weight: 600 !important;
}
html body .search-result-meta-container {
display: flex !important;
align-items: center !important;
gap: 12px !important;
margin-top: 6px !important;
font-size: 12.5px !important;
color: #64748B !important;
}
html body .search-result-breadcrumbs a {
color: #64748B !important;
text-decoration: none !important;
}
html body .search-result-breadcrumbs a:hover {
color: #94A3B8 !important;
}
html body .kia-error-page-wrapper {
display: flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 65vh !important;
width: 100% !important;
padding: 48px 24px !important;
box-sizing: border-box !important;
}
html body .kia-error-card {
max-width: 620px !important;
width: 100% !important;
background: #0D1624 !important;
border: 1px solid rgba(56, 189, 248, 0.25) !important;
border-radius: 24px !important;
padding: 56px 40px !important;
text-align: center !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 30px rgba(56, 189, 248, 0.12) !important;
}
html body .error-illustration-wrap {
position: relative !important;
margin-bottom: 24px !important;
}
html body .error-badge-glow {
font-size: 72px !important;
font-weight: 900 !important;
color: transparent !important;
background: linear-gradient(135deg, #38BDF8 0%, #818CF8 100%) !important;
-webkit-background-clip: text !important;
letter-spacing: 0.05em !important;
line-height: 1 !important;
margin-bottom: 12px !important;
}
html body .error-main-title {
font-size: 24px !important;
font-weight: 800 !important;
color: #F8FAFC !important;
margin-bottom: 8px !important;
}
html body .error-sub-title {
font-size: 16px !important;
font-weight: 600 !important;
color: #94A3B8 !important;
margin-bottom: 8px !important;
}
html body .error-desc-text {
font-size: 14px !important;
color: #64748B !important;
margin-bottom: 28px !important;
line-height: 1.5 !important;
}
html body .btn-error-home {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
background: linear-gradient(135deg, #0284C7 0%, #0369A1 100%) !important;
color: #FFFFFF !important;
text-decoration: none !important;
font-size: 14.5px !important;
font-weight: 600 !important;
padding: 12px 28px !important;
border-radius: 12px !important;
transition: all 0.25s ease !important;
box-shadow: 0 4px 16px rgba(2, 132, 199, 0.4) !important;
}
html body .btn-error-home:hover {
transform: translateY(-2px) !important;
box-shadow: 0 8px 24px rgba(2, 132, 199, 0.6) !important;
}
@media (max-width: 992px) {
html body .kia-leaf-section-layout {
grid-template-columns: 1fr !important;
}
html body .leaf-sticky-sidebar {
position: static !important;
}
}
.mobile-lang-item {
display: block;
width: 100%;
padding: 8px 0;
}
.mobile-lang-trigger.lang-capsule {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
min-height: 56px !important;
padding: 12px 16px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 10px;
color: #f8fafc;
font-size: 14px;
font-weight: 600;
text-align: left;
cursor: pointer;
transition: all 0.2s ease;
}
.mobile-lang-trigger.lang-capsule:hover,
.mobile-lang-trigger.lang-capsule:active {
background: rgba(56, 189, 248, 0.15);
border-color: #38bdf8;
}
@media (max-width: 1024px) {
#opt3-flyout.opt3-mega-flyout,
.opt3-mega-flyout.mobile-lang-sheet.lang-bottom-sheet {
position: fixed !important;
top: auto !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
max-width: 100vw !important;
max-height: 85vh !important;
border-radius: 20px 20px 0 0 !important;
border-bottom: none !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
overscroll-behavior-y: contain !important;
touch-action: pan-y !important;
z-index: 10050 !important;
padding: 24px 20px 36px !important;
box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.75) !important;
box-sizing: border-box !important;
}
#opt3-flyout .opt3-columns-wrapper,
.opt3-mega-flyout.mobile-lang-sheet .opt3-columns-wrapper {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 16px !important;
max-width: 100% !important;
}
#opt3-flyout .opt3-col,
.opt3-mega-flyout.mobile-lang-sheet .opt3-col {
min-height: auto !important;
padding: 16px !important;
gap: 8px !important;
}
#opt3-flyout .opt3-col-header,
.opt3-mega-flyout.mobile-lang-sheet .opt3-col-header {
margin-bottom: 6px !important;
}
}
@media (max-width: 767px) {
#opt3-flyout.opt3-mega-flyout,
.opt3-mega-flyout.mobile-lang-sheet.lang-bottom-sheet {
max-height: 90vh !important;
padding: 18px 14px 28px !important;
}
#opt3-flyout .opt3-columns-wrapper,
.opt3-mega-flyout.mobile-lang-sheet .opt3-columns-wrapper {
grid-template-columns: 1fr !important;
gap: 12px !important;
}
#opt3-flyout .opt3-col,
.opt3-mega-flyout.mobile-lang-sheet .opt3-col {
padding: 12px 14px !important;
border-radius: 10px !important;
}
#opt3-flyout .opt3-col-header,
.opt3-mega-flyout.mobile-lang-sheet .opt3-col-header {
padding-bottom: 6px !important;
}
#opt3-flyout .opt3-link-item,
.opt3-mega-flyout.mobile-lang-sheet .opt3-link-item {
padding: 10px 12px !important;
min-height: 48px !important;
}
#opt3-flyout .opt3-flyout-top-bar,
.opt3-mega-flyout.mobile-lang-sheet .opt3-flyout-top-bar {
margin-bottom: 14px !important;
}
#opt3-flyout .opt3-bottom-bar,
.opt3-mega-flyout.mobile-lang-sheet .opt3-bottom-bar {
margin-top: 14px !important;
padding-top: 12px !important;
}
}
@media (max-width: 1024px) {
html body.kia-lang-flyout-open header.header,
html body.kia-lang-flyout-open .header {
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
}
}
body.kia-lang-flyout-open iframe#launcher,
body.kia-lang-flyout-open div:has(> iframe[title*="메시지"]),
body.kia-lang-flyout-open div:has(> iframe[title*="message" i]),
body.kia-lang-flyout-open div:has(> div > iframe[title*="메시지"]),
body.kia-lang-flyout-open div:has(> div > iframe[title*="message" i]),
body.kia-lang-flyout-open .git-ai-chips-container {
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
transition: opacity 0.2s ease, visibility 0.2s ease !important;
}
html body.kia-lang-flyout-open .git-cookie-banner {
z-index: 9998 !important;
}
.menu-button-mobile,
.mobile-menu-button,
.hamburger-button {
min-height: 56px !important;
min-width: 56px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
.alert-bar-close {
min-height: 56px !important;
min-width: 56px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
.lang-sheet-close,
.sheet-close,
.drawer-close,
.bottom-sheet-close,
.toc-drawer-close {
min-height: 56px !important;
min-width: 56px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
.menu-list-mobile .item a,
.menu-list-mobile-items .item a,
.menu-list-mobile-items .item {
min-height: 56px !important;
display: flex !important;
align-items: center !important;
}
.toc-drawer-toggle,
.toc-fab,
.article-toc-fab,
.toc-drawer-btn,
.toc-sticky-capsule,
.mobile-toc-toggle {
min-height: 64px !important;
min-width: 64px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
.viewer-zoom,
.zoom-in,
.zoom-out,
.img-viewer-zoom,
.lightbox-zoom,
.pswp__button--zoom {
min-height: 64px !important;
min-width: 64px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
.table-responsive-wrapper,
.table-responsive,
.table-scroll-wrapper,
.article-table-wrapper,
.responsive-table-wrapper {
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
position: relative !important;
width: 100% !important;
margin: 20px 0 !important;
touch-action: pan-x pan-y !important;
background:
linear-gradient(to right, rgba(10, 22, 34, 1) 30%, rgba(10, 22, 34, 0)),
linear-gradient(to right, rgba(10, 22, 34, 0), rgba(10, 22, 34, 1) 70%) 0 100%,
radial-gradient(farthest-side at 0% 50%, rgba(56, 189, 248, 0.4), rgba(0, 0, 0, 0)),
radial-gradient(farthest-side at 100% 50%, rgba(56, 189, 248, 0.4), rgba(0, 0, 0, 0)) 0 100% !important;
background-repeat: no-repeat !important;
background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100% !important;
background-position: 0 0, 100% 0, 0 0, 100% 0 !important;
background-attachment: local, local, scroll, scroll !important;
}
.article-image-viewer.lightbox[hidden],
.article-image-viewer.lightbox[aria-hidden="true"],
.kia-image-viewer[hidden],
.kia-image-viewer[aria-hidden="true"],
.lightbox[hidden],
.lightbox[aria-hidden="true"] {
display: none !important;
visibility: hidden !important;
pointer-events: none !important;
opacity: 0 !important;
}
.article-image-viewer.lightbox:not([hidden]):not([aria-hidden="true"]),
.kia-image-viewer:not([hidden]):not([aria-hidden="true"]),
.lightbox:not([hidden]):not([aria-hidden="true"]) {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100vw !important;
height: 100vh !important;
background: rgba(5, 12, 20, 0.95) !important;
backdrop-filter: blur(12px) !important;
z-index: 10000 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
touch-action: pinch-zoom !important;
}
.article-image-viewer img,
.lightbox img {
max-width: 90vw !important;
max-height: 85vh !important;
object-fit: contain !important;
transition: transform 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
touch-action: pinch-zoom !important;
}
.viewer-zoom-controls {
position: absolute !important;
bottom: 24px !important;
left: 50% !important;
transform: translateX(-50%) !important;
display: flex !important;
gap: 16px !important;
z-index: 10001 !important;
}
.viewer-zoom, .zoom-in, .zoom-out, .img-viewer-zoom {
background: rgba(15, 30, 48, 0.9) !important;
color: #f8fafc !important;
border: 2px solid rgba(56, 189, 248, 0.5) !important;
border-radius: 50% !important;
font-size: 24px !important;
font-weight: 700 !important;
cursor: pointer !important;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
}
@media (min-width: 1024px) {
#mobile-toc-toggle,
.mobile-toc-toggle,
.toc-drawer-toggle,
.toc-sticky-capsule,
#mobile-toc-drawer,
.toc-drawer {
display: none !important;
visibility: hidden !important;
pointer-events: none !important;
}
}
@media (max-width: 1023px) {
.toc-drawer-toggle.toc-sticky-capsule {
display: inline-flex !important;
position: fixed !important;
bottom: 24px !important;
right: 20px !important;
background: #0284c7 !important;
color: #ffffff !important;
border: 2px solid rgba(255, 255, 255, 0.4) !important;
border-radius: 32px !important;
box-shadow: 0 10px 30px rgba(2, 132, 199, 0.5) !important;
z-index: 9000 !important;
padding: 0 20px !important;
font-size: 15px !important;
font-weight: 700 !important;
}
.toc-drawer {
position: fixed !important;
bottom: 0 !important;
left: 0 !important;
width: 100vw !important;
max-height: 80vh !important;
background: #0a1622 !important;
border-radius: 20px 20px 0 0 !important;
border-top: 1px solid rgba(56, 189, 248, 0.4) !important;
box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.8) !important;
z-index: 9500 !important;
overflow-y: auto !important;
padding: 24px !important;
transform: translateY(100%);
transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1) !important;
}
.toc-drawer.open {
transform: translateY(0) !important;
}
}
:root[data-illumination="pit-dark"],
html[data-illumination="pit-dark"],
body[data-illumination="pit-dark"],
[data-illumination="pit-dark"] {
--bg-primary: #050b14;
--bg-surface: #0a1626;
--text-main: #ffffff;
--text-sub: #cbd5e1;
--border-color: #38bdf8;
--accent-kia: #05141f;
}
:root[data-illumination="sunlight"],
html[data-illumination="sunlight"],
body[data-illumination="sunlight"],
[data-illumination="sunlight"] {
--bg-primary: #ffffff;
--bg-surface: #f1f5f9;
--text-main: #000000;
--text-sub: #0f172a;
--border-color: #0f172a;
--accent-kia: #05141f;
--border-width: 2px;
--font-weight-body: 600;
}
[data-illumination="sunlight"] body {
background-color: var(--bg-primary) !important;
color: var(--text-main) !important;
font-weight: var(--font-weight-body) !important;
}
[data-illumination="sunlight"] .article-body table,
[data-illumination="sunlight"] .card,
[data-illumination="sunlight"] .article-body-panel {
border: var(--border-width) solid var(--border-color) !important;
background-color: var(--bg-surface) !important;
}
.btn-illumination,
.pit-sunlight-toggle,
.kia-illumination {
min-height: 56px !important;
min-width: 56px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
padding: 8px 16px !important;
background: rgba(255, 255, 255, 0.08) !important;
border: 1px solid rgba(255, 255, 255, 0.2) !important;
border-radius: 28px !important;
color: #f8fafc !important;
font-size: 13px !important;
font-weight: 600 !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
}
.btn-illumination:hover,
.pit-sunlight-toggle:hover {
background: rgba(56, 189, 248, 0.2) !important;
border-color: #38bdf8 !important;
}
@media (max-width: 1023px) {
.header {
display: flex !important;
flex-direction: row !important;
justify-content: space-between !important;
align-items: center !important;
padding: 0 16px !important;
height: 64px !important;
min-height: 64px !important;
max-height: 64px !important;
flex-wrap: nowrap !important;
gap: 8px !important;
box-sizing: border-box !important;
}
.logo {
display: flex !important;
align-items: center !important;
flex: 0 0 auto !important;
margin: 0 !important;
padding: 0 !important;
}
.logo img,
.site-logo-img {
height: 26px !important;
max-height: 26px !important;
width: auto !important;
}
.header-tabs-container,
.header .header-tabs-container {
display: none !important;
}
.desktop-only-nav,
.nav-wrapper-desktop,
.header .nav-wrapper-desktop {
display: none !important;
}
.nav-wrapper-mobile {
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
flex: 0 0 auto !important;
margin: 0 !important;
margin-left: auto !important;
padding: 0 !important;
}
.menu-button-mobile {
min-width: 56px !important;
min-height: 56px !important;
width: 56px !important;
height: 56px !important;
padding: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
background: transparent !important;
border: 0 !important;
color: #ffffff !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
-webkit-tap-highlight-color: transparent !important;
-webkit-touch-callout: none !important;
user-select: none !important;
-webkit-user-select: none !important;
outline: none !important;
box-shadow: none !important;
}
.menu-button-mobile:focus,
.menu-button-mobile:active,
.menu-button-mobile:focus:not(:focus-visible) {
outline: none !important;
box-shadow: none !important;
border: 0 !important;
-webkit-tap-highlight-color: transparent !important;
}
.menu-button-mobile:focus-visible {
outline: 2px solid #38bdf8 !important;
outline-offset: 2px !important;
border-radius: 8px !important;
}
.staggered-bars {
width: 32px !important;
height: 24px !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
align-items: flex-end !important;
}
.staggered-bar {
height: 3px !important;
border-radius: 999px !important;
background: #ffffff !important;
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.staggered-bar.top {
width: 32px !important;
}
.staggered-bar.mid {
width: 22px !important;
background: #38bdf8 !important;
}
.staggered-bar.bot {
width: 27px !important;
}
.menu-button-mobile:hover .staggered-bar.mid,
.menu-button-mobile:active .staggered-bar.mid {
width: 32px !important;
background: #ea0029 !important;
}
.menu-button-mobile:hover .staggered-bar.bot,
.menu-button-mobile:active .staggered-bar.bot {
width: 32px !important;
}
}
@media (min-width: 1024px) {
.nav-wrapper-mobile {
display: none !important;
}
.nav-wrapper-desktop {
display: flex !important;
}
}
.service-catalog-item,
.nav-wrapper-desktop a[href*="service_catalog"],
.nav-wrapper-mobile a[href*="service_catalog"],
li:has(a[href*="service_catalog"]) {
display: none !important;
}
@media (max-width: 1023px) {
.mobile-menu-backdrop {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100vw !important;
height: 100vh !important;
background: rgba(0, 0, 0, 0.7) !important;
backdrop-filter: blur(4px) !important;
-webkit-backdrop-filter: blur(4px) !important;
z-index: 9998 !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
transition: opacity 0.3s ease, visibility 0.3s ease !important;
}
.nav-wrapper-mobile.is-active .mobile-menu-backdrop,
.nav-wrapper-mobile:has(.menu-list-mobile[aria-expanded="true"]) .mobile-menu-backdrop {
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
}
.nav-wrapper-mobile .menu-list-mobile,
.nav-wrapper-mobile .c1-panel {
position: fixed !important;
top: 0 !important;
right: 0 !important;
left: auto !important;
bottom: 0 !important;
width: 84vw !important;
max-width: 400px !important;
height: 100dvh !important;
background: linear-gradient(180deg, #0c1017 0%, #05141f 100%) !important;
box-shadow: -10px 0 35px rgba(0, 0, 0, 0.85) !important;
border-left: 1px solid rgba(255, 255, 255, 0.12) !important;
border-top: none !important;
border-bottom: none !important;
z-index: 10000 !important;
display: flex !important;
flex-direction: column !important;
transform: translateX(100%) !important;
transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
overflow: hidden !important;
padding: 0 !important;
margin: 0 !important;
box-sizing: border-box !important;
visibility: visible !important;
}
.nav-wrapper-mobile .menu-list-mobile[aria-expanded="true"],
.nav-wrapper-mobile.is-active .menu-list-mobile,
.nav-wrapper-mobile.is-active .c1-panel {
display: flex !important;
transform: translateX(0) !important;
}
.drawer-header,
.mobile-drawer-header {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
padding: 16px 20px !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
background: rgba(12, 16, 23, 0.95) !important;
flex-shrink: 0 !important;
box-sizing: border-box !important;
}
.drawer-title,
.mobile-drawer-title {
font-size: 15px !important;
font-weight: 700 !important;
color: #ffffff !important;
display: flex !important;
align-items: center !important;
gap: 6px !important;
}
.mobile-drawer-brand {
color: #ea0029 !important;
font-weight: 900 !important;
font-size: 16px !important;
letter-spacing: 1.5px !important;
margin-right: 8px !important;
}
.drawer-close-btn,
.mobile-drawer-close-btn,
.drawer-close {
width: 56px !important;
height: 56px !important;
min-width: 56px !important;
min-height: 56px !important;
border-radius: 50% !important;
background: rgba(255, 255, 255, 0.06) !important;
border: 1px solid rgba(255, 255, 255, 0.12) !important;
color: #ffffff !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
padding: 0 !important;
font-size: 18px !important;
transition: all 0.2s ease !important;
}
.drawer-close-btn:hover,
.drawer-close-btn:active,
.mobile-drawer-close-btn:hover,
.mobile-drawer-close-btn:active {
background: #ea0029 !important;
border-color: #ea0029 !important;
transform: rotate(90deg) !important;
}
.drawer-body,
.mobile-drawer-body {
flex: 1 !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
padding: 18px 16px !important;
box-sizing: border-box !important;
display: flex !important;
flex-direction: column !important;
gap: 14px !important;
}
.drawer-body::-webkit-scrollbar,
.mobile-drawer-body::-webkit-scrollbar {
width: 4px !important;
}
.drawer-body::-webkit-scrollbar-thumb,
.mobile-drawer-body::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.15) !important;
border-radius: 4px !important;
}
.nav-wrapper-mobile .menu-list-mobile-items {
display: flex !important;
flex-direction: column !important;
gap: 14px !important;
padding: 0 !important;
margin: 0 !important;
list-style: none !important;
}
.nav-wrapper-mobile .menu-list-mobile-items li:empty,
.nav-wrapper-mobile .menu-list-mobile-items li.item:empty,
.nav-wrapper-mobile .menu-list-mobile .header-language-selector {
display: none !important;
}
.real-lang-capsule,
.nav-wrapper-mobile .mobile-lang-trigger {
width: 100% !important;
min-height: 56px !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
background: rgba(56, 189, 248, 0.08) !important;
border: 1px solid rgba(56, 189, 248, 0.3) !important;
border-radius: 14px !important;
padding: 0 18px !important;
color: #38bdf8 !important;
font-size: 15px !important;
font-weight: 600 !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
box-sizing: border-box !important;
margin-bottom: 2px !important;
}
.real-lang-capsule:hover,
.real-lang-capsule:active,
.nav-wrapper-mobile .mobile-lang-trigger:hover,
.nav-wrapper-mobile .mobile-lang-trigger:active {
background: rgba(56, 189, 248, 0.18) !important;
border-color: #38bdf8 !important;
color: #ffffff !important;
}
.sign-in-box {
width: 100% !important;
box-sizing: border-box !important;
}
.btn-sign-in {
width: 100% !important;
min-height: 56px !important;
background: #2563eb !important;
color: #ffffff !important;
border-radius: 14px !important;
border: none !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
font-size: 15px !important;
font-weight: 700 !important;
text-decoration: none !important;
box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35) !important;
transition: all 0.2s ease !important;
box-sizing: border-box !important;
}
.btn-sign-in:hover,
.btn-sign-in:active {
background: #1d4ed8 !important;
box-shadow: 0 6px 18px rgba(37, 99, 235, 0.5) !important;
transform: translateY(-1px) !important;
}
.real-account-card,
.nav-wrapper-mobile .menu-list-mobile-items .user-avatar-item {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)) !important;
border: 1px solid rgba(255, 255, 255, 0.12) !important;
border-radius: 16px !important;
padding: 16px !important;
display: flex !important;
align-items: center !important;
gap: 14px !important;
box-sizing: border-box !important;
}
.account-avatar,
.nav-wrapper-mobile .menu-list-mobile-items .menu-profile-avatar {
width: 44px !important;
height: 44px !important;
border-radius: 50% !important;
border: 2px solid #ea0029 !important;
box-shadow: 0 0 12px rgba(234, 0, 41, 0.4) !important;
margin: 0 !important;
overflow: hidden !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: #1e293b !important;
flex-shrink: 0 !important;
}
.account-avatar img,
.account-avatar .user-avatar {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
.account-name-group {
flex: 1 !important;
display: flex !important;
flex-direction: column !important;
gap: 3px !important;
}
.account-user-name,
.nav-wrapper-mobile .menu-list-mobile-items .menu-profile-name {
font-size: 16px !important;
font-weight: 700 !important;
color: #ffffff !important;
}
.account-profile-link,
.nav-wrapper-mobile .menu-list-mobile-items .my-profile .my-profile-tooltip {
font-size: 13px !important;
font-weight: 500 !important;
color: #94a3b8 !important;
text-decoration: none !important;
}
.account-profile-link:hover {
color: #38bdf8 !important;
}
.real-cat-header-label {
font-size: 12px !important;
font-weight: 800 !important;
color: #38bdf8 !important;
letter-spacing: 1.5px !important;
text-transform: uppercase !important;
padding: 10px 4px 4px !important;
}
.real-cat-list {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 14px !important;
}
.real-cat-list li {
margin: 0 !important;
padding: 0 !important;
}
.real-cat-item-link,
.nav-wrapper-mobile .menu-list-mobile-items .item a,
.nav-wrapper-mobile .menu-list-mobile-items .item button {
min-height: 56px !important;
width: 100% !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
background: rgba(255, 255, 255, 0.04) !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
border-radius: 14px !important;
padding: 0 18px !important;
color: #f1f5f9 !important;
font-size: 15px !important;
font-weight: 600 !important;
text-decoration: none !important;
box-sizing: border-box !important;
transition: all 0.2s ease !important;
}
.real-cat-item-link:hover,
.real-cat-item-link:active,
.nav-wrapper-mobile .menu-list-mobile-items .item a:hover,
.nav-wrapper-mobile .menu-list-mobile-items .item a:active {
background: rgba(234, 0, 41, 0.12) !important;
border-color: rgba(234, 0, 41, 0.35) !important;
color: #ffffff !important;
box-shadow: 0 4px 20px rgba(234, 0, 41, 0.12) !important;
transform: none !important;
}
.cat-icon-wrap {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 32px !important;
height: 32px !important;
border-radius: 8px !important;
background: rgba(234, 0, 41, 0.12) !important;
border: 1px solid rgba(234, 0, 41, 0.25) !important;
flex-shrink: 0 !important;
}
.cat-icon-svg {
width: 18px !important;
height: 18px !important;
color: #ea0029 !important;
stroke: #ea0029 !important;
transition: transform 0.2s ease !important;
}
.real-cat-item-link:hover .cat-icon-svg {
transform: scale(1.12) !important;
}
.lang-chevron-svg {
width: 14px !important;
height: 14px !important;
stroke: #38bdf8 !important;
display: inline-block !important;
vertical-align: middle !important;
transition: transform 0.2s ease !important;
}
.mobile-lang-trigger[aria-expanded="true"] .lang-chevron-svg,
.real-lang-capsule[aria-expanded="true"] .lang-chevron-svg {
transform: rotate(180deg) !important;
}
.real-divider,
.nav-wrapper-mobile .menu-list-mobile-items .nav-divider {
border: none !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
margin: 8px 0 !important;
height: 0 !important;
padding: 0 !important;
}
.sign-out-link,
.nav-wrapper-mobile .menu-list-mobile-items li a[href*="sign_out"] {
color: #f87171 !important;
border-color: rgba(239, 68, 68, 0.25) !important;
border-left-color: #ef4444 !important;
background: rgba(239, 68, 68, 0.06) !important;
}
.sign-out-link:hover,
.nav-wrapper-mobile .menu-list-mobile-items li a[href*="sign_out"]:hover {
background: rgba(239, 68, 68, 0.15) !important;
border-color: #ef4444 !important;
color: #ffffff !important;
}
.drawer-footer,
.mobile-drawer-footer {
position: relative !important;
padding: 14px 18px 24px !important;
border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
background: rgba(8, 12, 16, 0.95) !important;
flex-shrink: 0 !important;
box-sizing: border-box !important;
display: flex !important;
align-items: center !important;
gap: 10px !important;
}
.btn-submit-request,
.btn-drawer-submit {
min-height: 56px !important;
flex: 1 1 auto !important;
width: auto !important;
background: #ea0029 !important;
color: #ffffff !important;
border-radius: 14px !important;
border: none !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
font-size: 15px !important;
font-weight: 700 !important;
text-decoration: none !important;
box-shadow: 0 6px 18px rgba(234, 0, 41, 0.35) !important;
transition: all 0.2s ease !important;
box-sizing: border-box !important;
white-space: nowrap !important;
}
.kia-drawer-chat-btn {
position: relative !important;
min-width: 64px !important;
height: 56px !important;
min-height: 56px !important;
padding: 0 10px !important;
flex-shrink: 0 !important;
border-radius: 14px !important;
background: linear-gradient(135deg, #05141f 0%, #0c2b40 100%) !important;
border: 1.5px solid rgba(56, 189, 248, 0.6) !important;
color: #38bdf8 !important;
display: inline-flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 2px !important;
box-shadow: 0 6px 18px rgba(2, 132, 199, 0.25) !important;
transition: all 0.2s ease !important;
box-sizing: border-box !important;
cursor: pointer !important;
-webkit-tap-highlight-color: transparent !important;
}
.kia-drawer-chat-btn:hover,
.kia-drawer-chat-btn:active {
background: linear-gradient(135deg, #082338 0%, #0369a1 100%) !important;
border-color: #7dd3fc !important;
color: #ffffff !important;
transform: translateY(-1px) !important;
}
.btn-drawer-logout-icon {
width: 56px !important;
height: 56px !important;
min-height: 56px !important;
flex-shrink: 0 !important;
border-radius: 14px !important;
background: rgba(239, 68, 68, 0.12) !important;
border: 1.5px solid rgba(239, 68, 68, 0.35) !important;
color: #f87171 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
transition: all 0.2s ease !important;
box-sizing: border-box !important;
cursor: pointer !important;
}
.btn-drawer-logout-icon:hover,
.btn-drawer-logout-icon:active {
background: rgba(239, 68, 68, 0.25) !important;
color: #ffffff !important;
border-color: #ef4444 !important;
box-shadow: 0 0 16px rgba(239, 68, 68, 0.4) !important;
transform: translateY(-1px) !important;
}
.btn-submit-request:hover,
.btn-submit-request:active,
.btn-drawer-submit:hover,
.btn-drawer-submit:active {
background: #c40022 !important;
box-shadow: 0 8px 24px rgba(234, 0, 41, 0.5) !important;
transform: translateY(-1px) !important;
}
.opt3-mega-flyout.mobile-lang-sheet.lang-bottom-sheet {
z-index: 10050 !important;
}
.opt3-backdrop {
z-index: 10040 !important;
}
.nav-wrapper-mobile .menu-list-mobile,
.nav-wrapper-mobile .menu-list-mobile-items {
min-height: 56px !important;
}
.nav-wrapper-mobile .menu-list-mobile a,
.nav-wrapper-mobile .menu-list-mobile button:not(.kia-chat-callout-close),
.nav-wrapper-mobile .menu-list-mobile-items .item,
.nav-wrapper-mobile .menu-list-mobile-items a {
min-height: 56px !important;
}
.user-sub-nav-list li:empty,
.user-sub-nav-list li:has(.real-cat-item-link:empty),
.user-sub-nav-list li:has(span:empty),
.user-sub-nav-list a:empty {
display: none !important;
}
}
.drawer-header.c1-header {
background: linear-gradient(180deg, #101e33 0%, #0b1524 100%) !important;
padding: 16px !important;
border-bottom: 1px solid #1e314b !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
min-height: 76px !important;
box-sizing: border-box !important;
}
.c1-user-info {
display: flex !important;
align-items: center !important;
gap: 12px !important;
flex-grow: 1 !important;
overflow: hidden !important;
}
.c1-avatar {
width: 44px !important;
height: 44px !important;
border-radius: 50% !important;
background: linear-gradient(135deg, #ea0029, #7f1d1d) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
position: relative !important;
flex-shrink: 0 !important;
border: 2px solid #38bdf8 !important;
box-shadow: 0 0 12px rgba(56, 189, 248, 0.3) !important;
}
.c1-avatar .user-avatar,
.c1-avatar img {
width: 100% !important;
height: 100% !important;
border-radius: 50% !important;
object-fit: cover !important;
}
.c1-online-dot {
position: absolute !important;
bottom: 0 !important;
right: 0 !important;
width: 11px !important;
height: 11px !important;
background: #10b981 !important;
border-radius: 50% !important;
border: 2px solid #0b1524 !important;
}
.c1-details {
display: flex !important;
flex-direction: column !important;
gap: 2px !important;
overflow: hidden !important;
}
.c1-name {
font-size: 15px !important;
font-weight: 700 !important;
color: #ffffff !important;
display: flex !important;
align-items: center !important;
gap: 6px !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.c1-badge {
font-size: 10px !important;
padding: 1px 6px !important;
background: rgba(234, 0, 41, 0.2) !important;
border: 1px solid #ea0029 !important;
color: #ff6b81 !important;
border-radius: 4px !important;
font-weight: 700 !important;
flex-shrink: 0 !important;
}
.c1-sub,
.c1-profile-link {
font-size: 12px !important;
color: #38bdf8 !important;
text-decoration: none !important;
}
.c1-profile-link:hover {
text-decoration: underline !important;
}
.c1-guest-info {
display: flex !important;
flex-direction: column !important;
gap: 2px !important;
flex-grow: 1 !important;
}
.c1-guest-title {
font-size: 15px !important;
font-weight: 700 !important;
color: #ffffff !important;
}
.c1-guest-sub {
font-size: 12px !important;
color: #94a3b8 !important;
}
.close-icon-btn {
width: 40px !important;
height: 40px !important;
border-radius: 10px !important;
background: rgba(255, 255, 255, 0.05) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
color: #94a3b8 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
flex-shrink: 0 !important;
transition: all 0.2s ease !important;
}
.close-icon-btn:hover {
background: rgba(255, 255, 255, 0.15) !important;
color: #ffffff !important;
}
.kia-footer-lang-wrap .dropdown.language-selector {
position: relative !important;
}
.kia-footer-lang-wrap .dropdown-toggle {
background: rgba(255, 255, 255, 0.05) !important;
border: 1px solid rgba(255, 255, 255, 0.15) !important;
border-radius: 8px !important;
padding: 8px 14px !important;
color: #f1f5f9 !important;
cursor: pointer !important;
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
font-size: 13px !important;
font-weight: 600 !important;
}
.kia-footer-lang-wrap .dropdown-toggle:hover,
.kia-footer-lang-wrap .dropdown-toggle[aria-expanded="true"] {
background: rgba(255, 255, 255, 0.1) !important;
border-color: #38bdf8 !important;
}
.kia-footer-lang-wrap .dropdown-menu {
display: none !important;
position: absolute !important;
bottom: calc(100% + 8px) !important;
right: 0 !important;
background: #0d1a2d !important;
border: 1px solid #1e3352 !important;
border-radius: 12px !important;
padding: 8px 0 !important;
min-width: 220px !important;
max-height: 280px !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
overscroll-behavior: contain !important;
box-shadow: 0 16px 36px rgba(0, 0, 0, 0.8) !important;
z-index: 1050 !important;
scrollbar-width: thin !important;
scrollbar-color: #38bdf8 #0a1622 !important;
}
.kia-footer-lang-wrap .dropdown-menu::-webkit-scrollbar {
width: 6px !important;
}
.kia-footer-lang-wrap .dropdown-menu::-webkit-scrollbar-track {
background: #0a1622 !important;
border-radius: 4px !important;
}
.kia-footer-lang-wrap .dropdown-menu::-webkit-scrollbar-thumb {
background: #38bdf8 !important;
border-radius: 4px !important;
}
.kia-footer-lang-wrap .dropdown:has(.dropdown-toggle[aria-expanded="true"]) .dropdown-menu,
.kia-footer-lang-wrap .dropdown-toggle[aria-expanded="true"] + .dropdown-menu,
.kia-footer-lang-wrap .dropdown-menu.is-open {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
pointer-events: auto !important;
z-index: 99999 !important;
}
.kia-footer-lang-wrap .dropdown-menu {
max-width: calc(100vw - 32px) !important;
}
.kia-footer-lang-wrap .dropdown-menu.align-left {
left: 0 !important;
right: auto !important;
}
.kia-footer-lang-wrap .dropdown-menu.align-right {
right: 0 !important;
left: auto !important;
}
@media (max-width: 767px) {
.kia-footer-lang-wrap .dropdown-menu:not(.align-right) {
left: 0 !important;
right: auto !important;
}
}
.kia-footer-lang-wrap .dropdown-menu a {
display: block !important;
padding: 10px 16px !important;
color: #cbd5e1 !important;
font-size: 13px !important;
text-decoration: none !important;
transition: background 0.15s ease, color 0.15s ease !important;
}
.kia-footer-lang-wrap .dropdown-menu a:hover,
.kia-footer-lang-wrap .dropdown-menu a:focus {
background: rgba(56, 189, 248, 0.12) !important;
color: #38bdf8 !important;
}
html body [id^="follow-button"],
html body .article-subscribe button,
html body .kia-section-subscribe [id^="follow-button"] {
background: rgba(234, 0, 41, 0.15) !important;
border: 1.5px solid #ea0029 !important;
color: #ffffff !important;
font-weight: 700 !important;
font-size: 13px !important;
border-radius: 8px !important;
padding: 8px 18px !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
box-shadow: 0 2px 10px rgba(234, 0, 41, 0.25) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
}
html body [id^="follow-button"]:hover,
html body .article-subscribe button:hover,
html body .kia-section-subscribe [id^="follow-button"]:hover {
background: #ea0029 !important;
color: #ffffff !important;
box-shadow: 0 4px 14px rgba(234, 0, 41, 0.45) !important;
transform: translateY(-1px) !important;
}
html body [id^="follow-button"][data-selected="true"],
html body [id^="follow-button"][aria-pressed="true"] {
background: #1e293b !important;
border-color: #38bdf8 !important;
color: #38bdf8 !important;
box-shadow: 0 2px 8px rgba(56, 189, 248, 0.2) !important;
}
.c1-header {
background: linear-gradient(180deg, #101e33 0%, #0b1524 100%) !important;
padding: 14px 16px !important;
border-bottom: 1px solid #1e314b !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
gap: 12px !important;
min-height: 72px !important;
box-sizing: border-box !important;
}
.c1-user-info {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 12px !important;
flex: 1 !important;
min-width: 0 !important;
text-align: left !important;
}
.c1-avatar {
width: 44px !important;
height: 44px !important;
min-width: 44px !important;
min-height: 44px !important;
max-width: 44px !important;
max-height: 44px !important;
border-radius: 50% !important;
background: linear-gradient(135deg, #ea0029, #7f1d1d) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-weight: 800 !important;
font-size: 15px !important;
color: #fff !important;
border: 2px solid #38bdf8 !important;
box-shadow: 0 0 12px rgba(56, 189, 248, 0.35) !important;
position: relative !important;
overflow: visible !important;
flex-shrink: 0 !important;
margin: 0 !important;
}
.c1-avatar img.user-avatar {
width: 100% !important;
height: 100% !important;
border-radius: 50% !important;
object-fit: cover !important;
}
.c1-avatar .c1-online-dot {
position: absolute !important;
bottom: -1px !important;
right: -1px !important;
width: 12px !important;
height: 12px !important;
background: #10b981 !important;
border-radius: 50% !important;
border: 2px solid #0b1524 !important;
}
.c1-guest-avatar {
background: linear-gradient(135deg, #1e293b, #0f172a) !important;
border-color: #64748b !important;
color: #94a3b8 !important;
box-shadow: none !important;
}
.c1-details {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
justify-content: center !important;
gap: 3px !important;
min-width: 0 !important;
flex: 1 !important;
text-align: left !important;
}
.c1-name {
font-size: 15px !important;
font-weight: 700 !important;
color: #ffffff !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 6px !important;
min-height: auto !important;
height: 22px !important;
line-height: 1 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
text-align: left !important;
}
.c1-name a.c1-signin-link,
.c1-header .c1-name a.c1-signin-link,
html body .c1-header a.c1-signin-link {
min-height: auto !important;
height: auto !important;
max-height: 22px !important;
display: inline-flex !important;
align-items: center !important;
line-height: 1 !important;
padding: 0 !important;
margin: 0 !important;
color: #ffffff !important;
text-decoration: none !important;
font-weight: 700 !important;
font-size: 15px !important;
}
.c1-badge {
font-size: 10px !important;
font-weight: 700 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
height: 18px !important;
min-height: 18px !important;
max-height: 18px !important;
line-height: 1 !important;
padding: 0 6px !important;
margin: 0 !important;
border-radius: 4px !important;
background: rgba(56, 189, 248, 0.15) !important;
color: #38bdf8 !important;
border: 1px solid rgba(56, 189, 248, 0.3) !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
box-sizing: border-box !important;
vertical-align: middle !important;
}
.c1-guest-badge {
background: rgba(148, 163, 184, 0.15) !important;
color: #94a3b8 !important;
border-color: rgba(148, 163, 184, 0.3) !important;
}
.c1-sub {
font-size: 12px !important;
color: #94a3b8 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
line-height: 1.2 !important;
text-align: left !important;
}
.c1-sub a.c1-profile-link {
color: #38bdf8 !important;
text-decoration: none !important;
}
.c1-header .c1-close-btn,
.c1-header button.c1-close-btn {
width: 38px !important;
height: 38px !important;
min-width: 38px !important;
min-height: 38px !important;
max-width: 38px !important;
max-height: 38px !important;
border-radius: 8px !important;
background: rgba(255, 255, 255, 0.08) !important;
border: 1px solid rgba(255, 255, 255, 0.15) !important;
color: #94a3b8 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
flex-shrink: 0 !important;
padding: 0 !important;
margin: 0 !important;
box-sizing: border-box !important;
}
.c1-header .c1-close-btn:hover,
.c1-header button.c1-close-btn:hover {
background: rgba(255, 255, 255, 0.15) !important;
color: #ffffff !important;
}
.c1-c3-fusion-wrap {
position: relative !important;
display: inline-flex !important;
flex-direction: column !important;
align-items: flex-end !important;
margin-top: 8px !important;
}
@media (max-width: 767px) {
html body .container.kia-article-page-fluid-container,
html body .kia-article-page-fluid-container {
padding-left: 16px !important;
padding-right: 16px !important;
}
html body .article-container,
html body #article-container {
display: flex !important;
flex-direction: column !important;
padding: 0 !important;
margin: 12px 0 24px 0 !important;
width: 100% !important;
max-width: 100% !important;
}
html body .article,
html body #main-content.article {
grid-column: auto !important;
width: 100% !important;
max-width: 100% !important;
}
.article-header {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
align-items: center !important;
justify-content: space-between !important;
gap: 8px 12px !important;
margin-bottom: 24px !important;
width: 100% !important;
}
.article-header .article-title {
flex: 0 0 100% !important;
width: 100% !important;
margin-bottom: 10px !important;
}
.article-header .article-author {
flex: 1 1 auto !important;
min-width: 0 !important;
margin-bottom: 0 !important;
display: flex !important;
align-items: center !important;
}
.article-header .article-meta {
min-width: 0 !important;
}
.article-header .c1-c3-fusion-wrap {
flex: 0 0 auto !important;
margin-top: 0 !important;
margin-left: auto !important;
align-self: center !important;
}
.article-header .c1-speech-bubble {
display: none !important;
}
.btn-follow-c3-fusion {
height: 36px !important;
border-radius: 8px !important;
box-shadow: none !important;
flex-shrink: 0 !important;
}
.btn-follow-c3-fusion .article-subscribe button,
.btn-follow-c3-fusion [id^="follow-button"] {
padding: 0 14px !important;
font-size: 12.5px !important;
height: 100% !important;
font-weight: 700 !important;
}
.btn-follow-c3-fusion .c3-count {
padding: 0 11px !important;
font-size: 12px !important;
height: 100% !important;
font-weight: 600 !important;
}
}
.c1-speech-bubble {
position: absolute !important;
bottom: calc(100% + 12px) !important;
right: 0 !important;
background: #0F2334 !important;
border: 1px solid rgba(56, 189, 248, 0.35) !important;
border-radius: 10px !important;
padding: 6px 6px 6px 12px !important;
width: max-content !important;
min-width: 0 !important;
max-width: min(92vw, 420px) !important;
box-sizing: border-box !important;
color: #f1f5f9 !important;
font-size: 11px !important;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45) !important;
animation: none !important;
z-index: 60 !important;
pointer-events: auto !important;
}
.c1-speech-bubble::after {
content: "" !important;
position: absolute !important;
top: -6px !important;
right: 40px !important;
width: 10px !important;
height: 10px !important;
background: #0F2334 !important;
border-width: 0 !important;
border-left: 1px solid rgba(56, 189, 248, 0.35) !important;
border-top: 1px solid rgba(56, 189, 248, 0.35) !important;
transform: rotate(45deg) !important;
}
.c1-bubble-title {
font-weight: 600 !important;
color: #F8FAFC !important;
display: flex !important;
align-items: center !important;
gap: 6px !important;
margin-bottom: 0 !important;
font-size: 12px !important;
white-space: nowrap !important;
}
.c1-bubble-desc {
color: #cbd5e1 !important;
line-height: 1.4 !important;
font-size: 11px !important;
white-space: normal !important;
word-break: keep-all !important;
overflow-wrap: break-word !important;
}
.btn-follow-c3-fusion {
display: inline-flex !important;
align-items: stretch !important;
height: 36px !important;
border-radius: 8px !important;
overflow: hidden !important;
border: 1px solid rgba(148, 163, 184, 0.26) !important;
background: #0B1927 !important;
box-shadow: none !important;
}
.btn-follow-c3-fusion .article-subscribe,
.btn-follow-c3-fusion .article-subscribe > div {
margin: 0 !important;
padding: 0 !important;
height: 100% !important;
display: inline-flex !important;
align-items: stretch !important;
}
.btn-follow-c3-fusion .article-subscribe button,
.btn-follow-c3-fusion [id^="follow-button"] {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
height: 100% !important;
padding: 0 14px !important;
background: rgba(255, 255, 255, 0.04) !important;
color: #F8FAFC !important;
border: none !important;
border-radius: 0 !important;
font-size: 12.5px !important;
font-weight: 700 !important;
cursor: pointer !important;
transition: background 0.15s ease, color 0.15s ease !important;
box-shadow: none !important;
transform: none !important;
}
.btn-follow-c3-fusion .article-subscribe button:hover,
.btn-follow-c3-fusion [id^="follow-button"]:hover {
background: rgba(56, 189, 248, 0.10) !important;
color: #FFFFFF !important;
box-shadow: none !important;
transform: none !important;
}
.btn-follow-c3-fusion .c3-count {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 5px !important;
height: 100% !important;
padding: 0 11px !important;
background: #081320 !important;
color: #94A3B8 !important;
font-size: 12px !important;
font-weight: 600 !important;
border-left: 1px solid rgba(148, 163, 184, 0.18) !important;
}
@keyframes c1FloatPulse {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-3px); }
}
.gitdocs-drawer-card-wrap {
width: 100% !important;
margin-top: 14px !important;
box-sizing: border-box !important;
}
.gitdocs-drawer-card-link {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
min-height: 56px !important;
padding: 12px 16px !important;
border-radius: 14px !important;
background: linear-gradient(135deg, rgba(16, 32, 54, 0.92) 0%, rgba(8, 18, 30, 0.96) 100%) !important;
border: 1px solid rgba(56, 189, 248, 0.35) !important;
text-decoration: none !important;
box-sizing: border-box !important;
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
}
.gitdocs-drawer-card-link:hover,
.gitdocs-drawer-card-link:active {
background: linear-gradient(135deg, rgba(22, 44, 72, 0.95) 0%, rgba(10, 22, 36, 0.98) 100%) !important;
border-color: #38bdf8 !important;
box-shadow: 0 6px 24px rgba(56, 189, 248, 0.28) !important;
transform: translateY(-1px) !important;
}
.gitdocs-drawer-card-left {
display: flex !important;
align-items: center !important;
gap: 12px !important;
flex: 1 !important;
min-width: 0 !important;
}
.gitdocs-drawer-card-icon {
width: 36px !important;
height: 36px !important;
min-width: 36px !important;
min-height: 36px !important;
border-radius: 10px !important;
background: rgba(56, 189, 248, 0.16) !important;
border: 1px solid rgba(56, 189, 248, 0.3) !important;
color: #38bdf8 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0 !important;
transition: all 0.2s ease !important;
}
.gitdocs-drawer-card-link:hover .gitdocs-drawer-card-icon {
background: rgba(56, 189, 248, 0.28) !important;
border-color: #38bdf8 !important;
transform: scale(1.05) !important;
}
.gitdocs-drawer-card-text {
display: flex !important;
flex-direction: column !important;
gap: 2px !important;
min-width: 0 !important;
text-align: left !important;
}
.gitdocs-drawer-card-title {
font-size: 13.5px !important;
font-weight: 700 !important;
color: #ffffff !important;
line-height: 1.3 !important;
letter-spacing: -0.2px !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.gitdocs-drawer-card-sub {
font-size: 11px !important;
font-weight: 500 !important;
color: #38bdf8 !important;
line-height: 1.3 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
opacity: 0.9 !important;
}
.gitdocs-drawer-card-arrow {
color: #94a3b8 !important;
flex-shrink: 0 !important;
margin-left: 8px !important;
transition: all 0.2s ease !important;
}
.gitdocs-drawer-card-link:hover .gitdocs-drawer-card-arrow {
color: #ffffff !important;
transform: translateX(3px) !important;
}
@media (max-width: 768px) {
.bulletin-header {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
padding-bottom: 14px !important;
margin-bottom: 14px !important;
}
.bulletin-title {
font-size: 13px !important;
letter-spacing: 1px !important;
}
.bulletin-view-all-btn {
padding: 5px 10px !important;
font-size: 11.5px !important;
}
.bulletin-item {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 8px !important;
padding: 14px 0 !important;
}
.bulletin-item .item-tag {
align-self: flex-start !important;
font-size: 11px !important;
padding: 2.5px 8px !important;
}
.item-body {
width: 100% !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;     justify-content: flex-start !important;
gap: 6px !important;
}
.item-title {
width: 100% !important;
text-align: left !important;
font-size: 14px !important;
line-height: 1.45 !important;
color: #F8FAFC !important;
word-break: keep-all !important;
}
.item-date {
text-align: left !important;
font-size: 11.5px !important;
color: #64748B !important;
}
}
@media (min-width: 769px) and (max-width: 1024px) {
.bulletin-header {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
}
.bulletin-item {
display: flex !important;
align-items: center !important;
gap: 14px !important;
}
.bulletin-item .item-tag {
flex-shrink: 0 !important;
}
.item-body {
flex: 1 !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
gap: 16px !important;
}
.item-title {
flex: 1 !important;
text-align: left !important;
font-size: 14px !important;
line-height: 1.4 !important;
}
.item-date {
flex-shrink: 0 !important;
text-align: right !important;
white-space: nowrap !important;
font-size: 12.5px !important;
color: #94A3B8 !important;
}
}
@media (max-width: 1024px) {
#gitdocs-floating-badge,
.gitdocs-floating-badge {
display: none !important;
}
}
@media (min-width: 768px) and (max-width: 1024px) {
html body .tech-article-card {
padding: 12px 14px !important;
min-height: unset !important;
gap: 8px !important;
}
html body .tech-card-title {
font-size: 14px !important;
line-height: 1.35 !important;
}
html body .tech-card-desc,
html body .tech-card-desc-placeholder {
display: none !important;
}
html body .tech-card-footer {
margin-top: 6px !important;
font-size: 12px !important;
padding: 5px 12px !important;
}
}
@media (max-width: 767px) {
html body .category-page .sub-nav,
html body .section-page .sub-nav {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 10px !important;
padding: 10px 16px !important;
margin-bottom: 12px !important;
width: 100% !important;
max-width: 100% !important;
}
html body .category-page .sub-nav nav,
html body .category-page .sub-nav .breadcrumbs,
html body .category-page .sub-nav .kia-breadcrumb,
html body .section-page .sub-nav nav,
html body .section-page .sub-nav .breadcrumbs,
html body .section-page .sub-nav .kia-breadcrumb {
width: 100% !important;
max-width: 100% !important;
display: flex !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
scrollbar-width: none !important;
-webkit-overflow-scrolling: touch !important;
font-size: 12px !important;
line-height: 1.4 !important;
min-width: 0 !important;
white-space: nowrap !important;
align-items: center !important;
gap: 6px !important;
}
html body .category-page .sub-nav .breadcrumbs li:first-child,
html body .section-page .sub-nav .breadcrumbs li:first-child {
display: none !important;
}
html body .category-page .sub-nav .breadcrumbs li:nth-child(2)::before,
html body .section-page .sub-nav .breadcrumbs li:nth-child(2)::before {
display: none !important;
content: none !important;
}
html body .category-page .sub-nav .search-container,
html body .section-page .sub-nav .search-container {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
}
html body .section-sidebar-toc {
position: fixed !important;
bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
top: auto !important;
left: 14px !important;
right: 14px !important;
width: auto !important;
max-width: 480px !important;
margin: 0 auto !important;
border-radius: 9999px !important;
border: 1px solid rgba(56, 189, 248, 0.45) !important;
background: rgba(10, 20, 35, 0.94) !important;
backdrop-filter: blur(20px) !important;
-webkit-backdrop-filter: blur(20px) !important;
box-shadow: 0 10px 32px rgba(0, 0, 0, 0.65), 0 0 18px rgba(56, 189, 248, 0.25) !important;
padding: 6px 10px !important;
z-index: 950 !important;
overflow-x: auto !important;
overflow-y: hidden !important;
max-height: none !important;
}
html body main.blocks-page,
html body .kia-section-page .container,
html body .category-sidebar-layout .category-sections {
padding-bottom: 96px !important;
}
.sidebar-toc-nav {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
gap: 6px !important;
overflow-x: auto !important;
scrollbar-width: none !important;
-webkit-overflow-scrolling: touch !important;
padding: 2px !important;
}
.sidebar-toc-link {
border-radius: 20px !important;
padding: 6px 14px !important;
font-size: 11.5px !important;
}
html body .tech-article-card {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
padding: 12px 14px !important;
min-height: 48px !important;
gap: 12px !important;
border-radius: 10px !important;
}
html body .tech-card-header-row {
width: auto !important;
flex: 1 1 auto !important;
min-width: 0 !important;
margin: 0 !important;
}
html body .tech-card-title {
font-size: 13.5px !important;
line-height: 1.35 !important;
font-weight: 600 !important;
white-space: normal !important;
margin: 0 !important;
color: #ffffff !important;
}
html body .tech-card-bottom-row {
display: flex !important;
align-items: center !important;
margin: 0 !important;
flex-shrink: 0 !important;
width: auto !important;
gap: 0 !important;
}
html body .tech-card-desc,
html body .tech-card-desc-placeholder,
html body .promoted-badge {
display: none !important;
}
html body .tech-card-footer {
display: inline-flex !important;
align-items: center !important;
gap: 4px !important;
font-size: 12px !important;
color: #38bdf8 !important;
margin: 0 !important;
padding: 6px 10px !important;
white-space: nowrap !important;
}
}
@media (max-width: 992px) {
html body .kia-master-detail-layout {
display: flex !important;
flex-direction: column !important;
grid-template-columns: 1fr !important;
width: 100% !important;
max-width: 100% !important;
gap: 20px !important;
padding-left: 16px !important;
padding-right: 16px !important;
}
html body .kia-master-nav {
width: 100% !important;
max-width: 100% !important;
position: static !important;
}
html body .master-nav-list {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
gap: 8px !important;
padding-bottom: 6px !important;
scrollbar-width: none !important;
-webkit-overflow-scrolling: touch !important;
}
html body .master-nav-item {
width: auto !important;
white-space: nowrap !important;
flex-shrink: 0 !important;
padding: 8px 14px !important;
}
html body .master-arrow-svg {
display: none !important;
}
html body .kia-detail-panels {
width: 100% !important;
min-width: 0 !important;
}
}
.kia-section-page .kia-section-subscribe button,
.kia-section-page .kia-section-subscribe [id^="follow-button"] {
height: 34px !important;
border-radius: 17px !important;
background: #ea0029 !important;
color: #ffffff !important;
border: 1px solid #ea0029 !important;
padding: 0 16px !important;
font-size: 13px !important;
font-weight: 700 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
line-height: 1 !important;
box-shadow: 0 2px 10px rgba(234, 0, 41, 0.25) !important;
cursor: pointer !important;
box-sizing: border-box !important;
transition: all 0.2s ease !important;
}
.kia-section-page .kia-section-subscribe button:hover,
.kia-section-page .kia-section-subscribe [id^="follow-button"]:hover {
background: #c50022 !important;
border-color: #c50022 !important;
transform: translateY(-1px) !important;
box-shadow: 0 4px 14px rgba(234, 0, 41, 0.4) !important;
}
@media (max-width: 767px) {
.article-header .c1-speech-bubble {
display: none !important;
}
.btn-follow-c3-fusion {
height: 36px !important;
max-height: 36px !important;
border-radius: 8px !important;
overflow: hidden !important;
display: inline-flex !important;
align-items: stretch !important;
box-shadow: none !important;
flex-shrink: 0 !important;
border: 1px solid rgba(148, 163, 184, 0.26) !important;
background: #0B1927 !important;
}
.btn-follow-c3-fusion .article-subscribe,
.btn-follow-c3-fusion .article-subscribe > div {
margin: 0 !important;
padding: 0 !important;
height: 100% !important;
display: inline-flex !important;
align-items: stretch !important;
}
.btn-follow-c3-fusion .article-subscribe button,
.btn-follow-c3-fusion [id^="follow-button"] {
height: 100% !important;
max-height: none !important;
min-height: 0 !important;
padding: 0 14px !important;
margin: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
line-height: 1 !important;
font-size: 12.5px !important;
font-weight: 700 !important;
box-sizing: border-box !important;
border-radius: 0 !important;
border: none !important;
background: rgba(255, 255, 255, 0.04) !important;
color: #F8FAFC !important;
vertical-align: middle !important;
}
.btn-follow-c3-fusion .c3-count {
height: 100% !important;
max-height: none !important;
min-height: 0 !important;
padding: 0 11px !important;
margin: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 5px !important;
line-height: 1 !important;
font-size: 12px !important;
font-weight: 600 !important;
background: #081320 !important;
color: #94A3B8 !important;
box-sizing: border-box !important;
border-left: 1px solid rgba(148, 163, 184, 0.18) !important;
}
html body .kia-section-page header#main-content,
html body .kia-section-page .kia-page-header {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
align-items: center !important;
justify-content: space-between !important;
padding: 0 16px 14px !important;
padding-left: 16px !important;
padding-right: 16px !important;
margin: 10px 0 16px !important;
gap: 8px 12px !important;
}
html body .kia-section-page .kia-page-header-body {
flex: 1 1 auto !important;
min-width: 0 !important;
}
html body .kia-section-page .kia-page-header .kia-page-h1 {
font-size: 20px !important;
line-height: 1.3 !important;
margin-bottom: 4px !important;
}
.kia-section-page .kia-page-header .kia-page-desc {
font-size: 12.5px !important;
line-height: 1.4 !important;
margin: 0 !important;
}
.kia-section-page .kia-section-subscribe {
flex: 0 0 auto !important;
margin: 0 !important;
align-self: flex-start !important;
}
.kia-section-page .kia-section-subscribe button,
.kia-section-page .kia-section-subscribe [id^="follow-button"] {
height: 32px !important;
max-height: 32px !important;
min-height: 32px !important;
border-radius: 16px !important;
background: #ea0029 !important;
color: #ffffff !important;
border: 1px solid #ea0029 !important;
padding: 0 14px !important;
font-size: 12px !important;
font-weight: 700 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
line-height: 1 !important;
box-shadow: 0 2px 8px rgba(234, 0, 41, 0.25) !important;
box-sizing: border-box !important;
}
.kia-section-page .kia-page-header-line {
flex: 0 0 100% !important;
width: 100% !important;
margin-top: 10px !important;
}
html body .category-container .kia-page-header {
padding: 0 16px 14px !important;
margin: 10px 0 16px !important;
}
html body .category-container .kia-page-header .kia-page-h1 {
font-size: 20px !important;
line-height: 1.3 !important;
}
}
html body .article-sidebar,
html body .article-sidebar.collapsible-sidebar,
html body .article-toc-sidebar,
html body #article-toc-sidebar,
html body .toc-drawer-toggle,
html body #mobile-toc-toggle,
html body .toc-drawer,
html body #mobile-toc-drawer {
display: none !important;
visibility: hidden !important;
width: 0 !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
pointer-events: none !important;
}
html body .article-container,
html body #article-container {
display: block !important;
grid-template-columns: none !important;
width: 100% !important;
max-width: 1080px !important;
margin: 28px auto 60px !important;
padding: 0 28px !important;
box-sizing: border-box !important;
float: none !important;
}
html body #main-content.article,
html body .article {
grid-column: auto !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 auto !important;
float: none !important;
}
.article-header {
margin-bottom: 28px !important;
padding-bottom: 20px !important;
border-bottom: 1px solid rgba(56, 189, 248, 0.2) !important;
}
.article-title {
font-size: 26px !important;
line-height: 1.35 !important;
font-weight: 800 !important;
letter-spacing: -0.3px !important;
color: #ffffff !important;
margin-bottom: 14px !important;
}
.article-body {
font-size: 15px !important;
line-height: 1.8 !important;
color: #cbd5e1 !important;
}
.article-body h2 {
font-size: 20px !important;
font-weight: 800 !important;
color: #ffffff !important;
margin-top: 36px !important;
margin-bottom: 14px !important;
padding-bottom: 8px !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.article-body h3 {
font-size: 17px !important;
font-weight: 700 !important;
color: #38bdf8 !important;
margin-top: 24px !important;
margin-bottom: 10px !important;
}
.article-body img {
max-width: 100% !important;
height: auto !important;
border-radius: 10px !important;
margin: 20px auto !important;
display: block !important;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4) !important;
}
.article-body table {
width: 100% !important;
margin: 20px 0 !important;
border-collapse: collapse !important;
}
@media (min-width: 768px) and (max-width: 1024px) {
html body .article-container,
html body #article-container {
display: block !important;
width: 100% !important;
max-width: 100% !important;
margin: 16px auto 40px !important;
padding: 0 24px !important;
}
html body #main-content.article,
html body .article {
width: 100% !important;
max-width: 100% !important;
}
html body .sub-nav {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
padding: 14px 24px !important;
}
html body .sub-nav .breadcrumbs {
flex: 1 1 auto !important;
min-width: 0 !important;
display: flex !important;
align-items: center !important;
overflow: hidden !important;
white-space: nowrap !important;
}
html body .sub-nav .breadcrumbs li:first-child a {
font-size: 0 !important;
display: inline-flex !important;
align-items: center !important;
}
html body .sub-nav .breadcrumbs li:first-child a::before {
content: "HOME" !important;
font-size: 11.5px !important;
font-weight: 700 !important;
padding: 3px 8px !important;
border-radius: 6px !important;
background: rgba(56, 189, 248, 0.15) !important;
color: #38bdf8 !important;
border: 1px solid rgba(56, 189, 248, 0.3) !important;
display: inline-block !important;
margin-right: 4px !important;
}
}
@media (max-width: 767px) {
html body .article-container,
html body #article-container {
display: block !important;
width: 100% !important;
max-width: 100% !important;
margin: 12px 0 24px 0 !important;
padding: 0 !important;
}
html body #main-content.article,
html body .article {
width: 100% !important;
max-width: 100% !important;
padding: 0 !important;
}
.article-title {
font-size: 20px !important;
line-height: 1.35 !important;
}
}
html body .sub-nav-proposal-a .sub-nav-search-container::before,
html body .sub-nav-proposal-a .sub-nav-search-container::after,
html body .sub-nav-proposal-a .search-container::before,
html body .sub-nav-proposal-a .search-container::after {
display: none !important;
content: none !important;
}
html body .sub-nav.sub-nav-proposal-a {
background: transparent !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
margin-bottom: 20px !important;
}
@media (max-width: 767px) {
html body .sub-nav.sub-nav-proposal-a {
position: relative !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
min-height: 48px !important;
padding: 8px 0 !important;
background: transparent !important;
}
html body .sub-nav.sub-nav-proposal-a .kia-breadcrumb,
body.article-page .sub-nav.sub-nav-proposal-a .kia-breadcrumb {
display: none !important;
width: 0 !important;
height: 0 !important;
overflow: hidden !important;
padding: 0 !important;
margin: 0 !important;
pointer-events: none !important;
}
html body .sub-nav.sub-nav-proposal-a {
justify-content: flex-end !important;
}
html body .sub-nav.sub-nav-proposal-a .sub-nav-search-container,
html body .sub-nav.sub-nav-proposal-a .search-container {
display: flex !important;
align-items: center !important;
position: static !important;
width: auto !important;
max-width: none !important;
margin-left: auto !important;
margin-right: 0 !important;
}
html body .sub-nav.sub-nav-proposal-a .sub-nav-search-toggle-btn {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 36px !important;
height: 36px !important;
border-radius: 50% !important;
border: 1px solid rgba(255, 255, 255, 0.15) !important;
background: rgba(255, 255, 255, 0.08) !important;
color: #38bdf8 !important;
cursor: pointer !important;
flex-shrink: 0 !important;
transition: all 0.2s ease !important;
padding: 0 !important;
}
html body .sub-nav.sub-nav-proposal-a .sub-nav-search-toggle-btn:hover {
background: rgba(56, 189, 248, 0.15) !important;
border-color: #38bdf8 !important;
}
html body .sub-nav.sub-nav-proposal-a .sub-nav-search-form-slide {
position: absolute !important;
right: 0 !important;
top: 50% !important;
transform: translateY(-50%) !important;
width: 0 !important;
opacity: 0 !important;
pointer-events: none !important;
transition: width 0.26s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease !important;
display: flex !important;
align-items: center !important;
background: #0b1e2d !important;
border: 1.5px solid #38bdf8 !important;
border-radius: 999px !important;
padding: 0 6px 0 14px !important;
height: 40px !important;
z-index: 50 !important;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6) !important;
overflow: hidden !important;
}
html body .sub-nav.sub-nav-proposal-a.search-expanded .sub-nav-search-form-slide {
width: 100% !important;
opacity: 1 !important;
pointer-events: auto !important;
}
html body .sub-nav.sub-nav-proposal-a .sub-nav-search-form-slide form.search {
flex: 1 1 auto !important;
display: flex !important;
align-items: center !important;
width: 100% !important;
border: none !important;
background: transparent !important;
padding: 0 !important;
margin: 0 !important;
}
html body .sub-nav.sub-nav-proposal-a .sub-nav-search-form-slide #query,
html body .sub-nav.sub-nav-proposal-a .sub-nav-search-form-slide input[type="search"],
html body .sub-nav.sub-nav-proposal-a .sub-nav-search-form-slide form.search input {
flex: 1 1 auto !important;
width: 100% !important;
height: 100% !important;
min-height: 36px !important;
border: none !important;
outline: none !important;
box-shadow: none !important;
border-radius: 0 !important;
background: transparent !important;
font-size: 14px !important;
font-family: inherit !important;
color: #f8fafc !important;
padding: 0 4px !important;
margin: 0 !important;
-webkit-appearance: none !important;
}
html body .sub-nav.sub-nav-proposal-a .sub-nav-search-form-slide #query:focus,
html body .sub-nav.sub-nav-proposal-a .sub-nav-search-form-slide input[type="search"]:focus,
html body .sub-nav.sub-nav-proposal-a .sub-nav-search-form-slide form.search input:focus {
border: none !important;
outline: none !important;
box-shadow: none !important;
border-color: transparent !important;
}
html body .sub-nav.sub-nav-proposal-a .sub-nav-search-form-slide input[type="search"]::placeholder,
html body .sub-nav.sub-nav-proposal-a .sub-nav-search-form-slide #query::placeholder {
color: #64748b !important;
}
html body .sub-nav.sub-nav-proposal-a .sub-nav-search-form-slide .clear-button {
display: none !important;
}
html body .sub-nav.sub-nav-proposal-a .sub-nav-search-close-btn {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 28px !important;
height: 28px !important;
border-radius: 50% !important;
background: rgba(255, 255, 255, 0.12) !important;
color: #cbd5e1 !important;
border: none !important;
cursor: pointer !important;
font-size: 13px !important;
font-weight: 700 !important;
margin-left: 6px !important;
flex-shrink: 0 !important;
transition: all 0.2s ease !important;
}
html body .sub-nav.sub-nav-proposal-a .sub-nav-search-close-btn:hover {
background: rgba(234, 0, 41, 0.8) !important;
color: #FFFFFF !important;
}
}
@media (min-width: 768px) {
html body .sub-nav.sub-nav-proposal-a {
position: static !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
min-height: 56px !important;
padding: 14px 0 !important;
background: transparent !important;
}
html body .sub-nav.sub-nav-proposal-a .kia-breadcrumb {
opacity: 1 !important;
transform: none !important;
pointer-events: auto !important;
flex: 1 1 auto !important;
min-width: 0 !important;
display: flex !important;
align-items: center !important;
overflow: hidden !important;
white-space: nowrap !important;
}
html body .sub-nav.sub-nav-proposal-a .sub-nav-search-container,
html body .sub-nav.sub-nav-proposal-a .search-container {
position: static !important;
display: block !important;
width: 260px !important;
max-width: 260px !important;
flex-shrink: 0 !important;
margin-left: auto !important;
margin-right: 0 !important;
}
html body .sub-nav.sub-nav-proposal-a .sub-nav-search-toggle-btn,
html body .sub-nav.sub-nav-proposal-a .sub-nav-search-close-btn {
display: none !important;
}
html body .sub-nav.sub-nav-proposal-a .sub-nav-search-form-slide {
position: static !important;
transform: none !important;
width: 260px !important;
opacity: 1 !important;
pointer-events: auto !important;
height: 38px !important;
border: 1px solid rgba(56, 189, 248, 0.35) !important;
border-radius: 8px !important;
box-shadow: none !important;
background: rgba(15, 35, 52, 0.85) !important;
padding: 0 10px !important;
display: flex !important;
align-items: center !important;
}
html body .sub-nav.sub-nav-proposal-a .sub-nav-search-form-slide:focus-within {
border-color: #38bdf8 !important;
box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.2) !important;
}
html body .sub-nav.sub-nav-proposal-a .sub-nav-search-form-slide form.search {
width: 100% !important;
display: flex !important;
align-items: center !important;
border: none !important;
background: transparent !important;
padding: 0 !important;
margin: 0 !important;
}
html body .sub-nav.sub-nav-proposal-a .sub-nav-search-form-slide #query,
html body .sub-nav.sub-nav-proposal-a .sub-nav-search-form-slide input[type="search"],
html body .sub-nav.sub-nav-proposal-a .sub-nav-search-form-slide form.search input {
width: 100% !important;
height: 100% !important;
border: none !important;
outline: none !important;
font-size: 13.5px !important;
color: #f8fafc !important;
background: transparent !important;
padding: 0 4px !important;
margin: 0 !important;
box-shadow: none !important;
border-radius: 0 !important;
-webkit-appearance: none !important;
}
html body .sub-nav.sub-nav-proposal-a .sub-nav-search-form-slide #query:focus,
html body .sub-nav.sub-nav-proposal-a .sub-nav-search-form-slide input[type="search"]:focus {
border: none !important;
outline: none !important;
box-shadow: none !important;
border-color: transparent !important;
}
}
@media (max-width: 1023px) {
body.search-results-page footer,
body.search-results-page footer.kia-footer-split,
body.search-results-page footer.footer,
body.search-results-page footer.site-footer,
body.search-results-page .footer-container,
body.search-results-page .kia-footer-split,
body.search-results-page .pagination,
body.search-results-page nav.pagination,
body:has(.search-results) footer,
body:has(.search-results) footer.kia-footer-split,
body:has(.search-results) footer.footer,
body:has(.search-results) footer.site-footer,
body:has(.search-results) .footer-container,
body:has(.search-results) .kia-footer-split,
body:has(.search-results) .pagination,
body:has(.search-results) nav.pagination,
body:has(#kia-standard-pagination-wrap) .pagination,
html body #kia-standard-pagination-wrap,
html body .kia-standard-pagination-wrap {
display: none !important;
visibility: hidden !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
overflow: hidden !important;
}
body.search-results-page .sub-nav .breadcrumbs,
body.search-results-page .sub-nav nav[aria-label="breadcrumbs"],
body.search-results-page .sub-nav nav[aria-label="이동 경로"],
body:has(.search-results) .sub-nav .breadcrumbs,
body:has(.search-results) .sub-nav nav[aria-label="이동 경로"] {
display: none !important;
width: 0 !important;
height: 0 !important;
overflow: hidden !important;
margin: 0 !important;
padding: 0 !important;
}
body.search-results-page .sub-nav,
body:has(.search-results) .sub-nav {
display: flex !important;
width: 100% !important;
padding: 10px 0 !important;
margin-bottom: 16px !important;
justify-content: stretch !important;
}
body.search-results-page .sub-nav .search-container,
body:has(.search-results) .sub-nav .search-container {
display: flex !important;
width: 100% !important;
max-width: 100% !important;
flex: 1 1 100% !important;
margin: 0 !important;
}
body.search-results-page .sub-nav form.search,
body:has(.search-results) .sub-nav form.search {
width: 100% !important;
max-width: 100% !important;
}
body.search-results-page .sub-nav #query,
body:has(.search-results) .sub-nav #query {
width: 100% !important;
max-width: 100% !important;
}
html body .search-results {
display: block !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 16px !important;
box-sizing: border-box !important;
}
html body .search-results-sidebar,
html body aside.search-results-sidebar {
display: none !important;
}
html body .search-results-column {
display: block !important;
width: 100% !important;
max-width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
html body .kia-search-chip-bar {
display: block !important;
position: sticky !important;
top: 0 !important;
z-index: 40 !important;
background: rgba(11, 30, 45, 0.92) !important;
backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important;
border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
padding: 12px 0 !important;
margin: 0 0 20px 0 !important;
width: 100% !important;
box-sizing: border-box !important;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
}
html body .kia-chip-scroll-track {
display: flex !important;
align-items: center !important;
gap: 8px !important;
padding: 0 16px !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
scrollbar-width: none !important;
}
html body .kia-chip-scroll-track::-webkit-scrollbar {
display: none !important;
}
html body .kia-chip-btn {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
padding: 6px 14px !important;
border-radius: 9999px !important;
font-size: 13px !important;
font-weight: 500 !important;
color: #94a3b8 !important;
background: rgba(255, 255, 255, 0.05) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
text-decoration: none !important;
white-space: nowrap !important;
flex-shrink: 0 !important;
transition: all 0.2s ease !important;
}
html body .kia-chip-btn:hover {
background: rgba(255, 255, 255, 0.1) !important;
color: #ffffff !important;
}
html body .kia-chip-btn.is-active {
background: #38bdf8 !important;
color: #05141f !important;
border-color: #38bdf8 !important;
font-weight: 700 !important;
box-shadow: 0 2px 8px rgba(56, 189, 248, 0.3) !important;
}
html body .kia-chip-btn.is-active .kia-chip-count {
color: #05141f !important;
font-weight: 700 !important;
}
html body .kia-chip-count {
font-size: 11.5px !important;
opacity: 0.85 !important;
}
}
@media (min-width: 1024px) {
html body .kia-search-chip-bar {
display: none !important;
}
html body .search-results {
display: grid !important;
grid-template-columns: 260px 1fr !important;
gap: 36px !important;
align-items: start !important;
margin-top: 24px !important;
}
html body .search-results-sidebar {
display: block !important;
width: 260px !important;
}
html body .search-results-column {
min-width: 0 !important;
width: 100% !important;
}
html body .search-results-sidebar .collapsible-sidebar {
display: block !important;
visibility: visible !important;
width: auto !important;
height: auto !important;
}
}
html body .kia-search-header-row {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 16px !important;
margin-top: 4px !important;
margin-bottom: 20px !important;
}
html body .kia-search-header-row .search-results-subheading {
margin: 0 !important;
font-size: 16px !important;
font-weight: 700 !important;
color: #ffffff !important;
}
html body .kia-search-sort-box {
display: inline-flex !important;
align-items: center !important;
}
html body .kia-search-sort-dropdown {
background: rgba(11, 30, 45, 0.9) !important;
color: #cbd5e1 !important;
border: 1px solid rgba(255, 255, 255, 0.15) !important;
border-radius: 8px !important;
padding: 6px 12px !important;
font-size: 12.5px !important;
font-weight: 500 !important;
outline: none !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
}
html body .kia-search-sort-dropdown:hover,
html body .kia-search-sort-dropdown:focus {
border-color: #38bdf8 !important;
color: #ffffff !important;
box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.2) !important;
}
html body .search-results-list {
list-style: none !important;
padding: 0 !important;
margin: 0 0 24px !important;
display: flex !important;
flex-direction: column !important;
gap: 12px !important;
}
html body .search-results-list > li {
padding: 0 !important;
background: transparent !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
margin: 0 !important;
}
html body .search-results-list > li:hover {
background: transparent !important;
border: none !important;
transform: none !important;
box-shadow: none !important;
}
html body .search-results-list > li.dynamic-loaded {
animation: kiaFadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
@keyframes kiaFadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
html body .search-results-list article,
html body .search-results-list .kia-search-card {
padding: 16px 20px !important;
background: rgba(255, 255, 255, 0.03) !important;
border: 1px solid rgba(255, 255, 255, 0.07) !important;
border-radius: 12px !important;
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
box-sizing: border-box !important;
display: flex !important;
flex-direction: column !important;
}
html body .search-results-list article:hover,
html body .search-results-list .kia-search-card:hover {
background: rgba(255, 255, 255, 0.06) !important;
border-color: rgba(56, 189, 248, 0.35) !important;
transform: translateY(-2px) !important;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35) !important;
}
html body .kia-search-card-header {
margin-bottom: 8px !important;
}
html body .kia-search-card-nav .breadcrumbs {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 6px !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
html body .kia-search-card-nav .breadcrumbs li:first-child {
display: none !important;
}
html body .kia-search-card-nav .breadcrumbs li:nth-child(2)::before {
display: none !important;
content: none !important;
}
html body .kia-search-card-nav .breadcrumbs li a {
display: inline-block !important;
font-size: 11.5px !important;
font-weight: 500 !important;
color: #38bdf8 !important;
background: rgba(56, 189, 248, 0.1) !important;
padding: 2px 8px !important;
border-radius: 4px !important;
text-decoration: none !important;
transition: background 0.15s ease, color 0.15s ease !important;
}
html body .kia-search-card-nav .breadcrumbs li a:hover {
background: rgba(56, 189, 248, 0.2) !important;
color: #7dd3fc !important;
}
html body .search-result-title {
margin: 0 0 8px !important;
}
html body .search-result-title a {
font-size: 16px !important;
font-weight: 600 !important;
color: #f1f5f9 !important;
text-decoration: none !important;
line-height: 1.45 !important;
transition: color 0.15s ease !important;
}
html body .search-result-title a:hover {
color: #38bdf8 !important;
text-decoration: underline !important;
}
@media (max-width: 767px) {
html body .search-result-description {
display: none !important;
}
}
@media (min-width: 768px) {
html body .search-result-description {
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
font-size: 13.5px !important;
line-height: 1.6 !important;
color: #94a3b8 !important;
margin: 0 0 12px !important;
}
}
html body .kia-search-meta-row {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-start !important;
flex-wrap: wrap !important;
gap: 12px !important;
font-size: 12px !important;
margin-top: auto !important;
padding-top: 6px !important;
width: 100% !important;
}
html body .kia-search-meta-badges {
display: inline-flex !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 8px !important;
flex-wrap: wrap !important;
margin: 0 !important;
}
html body .kia-meta-badge {
display: inline-flex !important;
align-items: center !important;
gap: 4px !important;
font-size: 11.5px !important;
color: #64748b !important;
}
html body .kia-meta-badge svg {
vertical-align: middle !important;
}
html body .kia-meta-votes,
html body .kia-meta-comments {
background: rgba(56, 189, 248, 0.1) !important;
color: #38bdf8 !important;
padding: 2px 7px !important;
border-radius: 4px !important;
font-weight: 600 !important;
}
html body .kia-search-loadmore-wrap {
margin: 32px 0 48px !important;
padding: 24px 20px !important;
background: rgba(255, 255, 255, 0.03) !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
border-radius: 12px !important;
text-align: center !important;
box-sizing: border-box !important;
}
html body .kia-loadmore-progress-box {
max-width: 440px !important;
margin: 0 auto 20px !important;
}
html body .kia-progress-text-row {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
margin-bottom: 8px !important;
font-size: 13px !important;
color: #94a3b8 !important;
}
html body .kia-progress-label {
font-weight: 600 !important;
color: #f1f5f9 !important;
}
html body .kia-progress-counter {
font-weight: 500 !important;
color: #cbd5e1 !important;
}
html body .kia-progress-bar-track {
height: 6px !important;
background: rgba(255, 255, 255, 0.08) !important;
border-radius: 9999px !important;
overflow: hidden !important;
}
html body .kia-progress-bar-fill {
height: 100% !important;
background: linear-gradient(90deg, #38bdf8 0%, #60a5fa 100%) !important;
border-radius: 9999px !important;
transition: width 0.35s ease !important;
box-shadow: 0 0 10px rgba(56, 189, 248, 0.5) !important;
}
html body .kia-btn-loadmore {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
min-width: 260px !important;
padding: 14px 32px !important;
background: #0b1e2d !important;
color: #38bdf8 !important;
border: 1px solid rgba(56, 189, 248, 0.3) !important;
border-radius: 8px !important;
font-size: 15px !important;
font-weight: 600 !important;
cursor: pointer !important;
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
outline: none !important;
}
html body .kia-btn-loadmore:hover:not(:disabled) {
background: #112d44 !important;
border-color: #38bdf8 !important;
color: #ffffff !important;
transform: translateY(-2px) !important;
box-shadow: 0 6px 18px rgba(56, 189, 248, 0.25) !important;
}
html body .kia-btn-loadmore:active:not(:disabled) {
transform: translateY(0) !important;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) !important;
}
html body .kia-btn-loadmore:disabled {
background: rgba(255, 255, 255, 0.05) !important;
border-color: rgba(255, 255, 255, 0.1) !important;
color: #64748b !important;
cursor: not-allowed !important;
transform: none !important;
box-shadow: none !important;
}
html body .kia-btn-loadmore-icon svg {
vertical-align: middle !important;
transition: transform 0.2s ease !important;
}
html body .kia-btn-loadmore:hover:not(:disabled) .kia-btn-loadmore-icon svg {
transform: rotate(90deg) !important;
}
html body .kia-btn-loadmore.is-loading .kia-btn-loadmore-icon svg {
animation: kiaSpin 0.8s linear infinite !important;
}
@keyframes kiaSpin {
100% {
transform: rotate(360deg);
}
}
@media (max-width: 1024px) {
body {
padding-bottom: 78px !important;
}
html body iframe#launcher {
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
width: 0 !important;
height: 0 !important;
}
.kia-mobile-sticky-dock {
position: fixed !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
background: rgba(7, 13, 20, 0.95) !important;
backdrop-filter: blur(16px) !important;
-webkit-backdrop-filter: blur(16px) !important;
border-top: 1px solid rgba(56, 189, 248, 0.28) !important;
padding: 10px 14px calc(env(safe-area-inset-bottom, 12px) + 6px) !important;
z-index: 850 !important;
box-shadow: 0 -8px 25px rgba(0, 0, 0, 0.6) !important;
transition: opacity 0.2s ease !important;
}
.kia-mobile-sticky-dock .dock-content-wrap {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
gap: 10px !important;
max-width: 800px !important;
margin: 0 auto !important;
}
.kia-mobile-sticky-dock .dock-text-group {
min-width: 0 !important;
flex: 1 1 auto !important;
}
.kia-mobile-sticky-dock .dock-headline {
font-size: 13px !important;
color: #F8FAFC !important;
display: block !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.kia-mobile-sticky-dock .dock-subline {
font-size: 11px !important;
color: #94A3B8 !important;
display: block !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.kia-dock-actions-group {
position: relative !important;
display: flex !important;
align-items: center !important;
gap: 8px !important;
flex-shrink: 0 !important;
}
.kia-mobile-sticky-dock .dock-action-btn {
flex-shrink: 0 !important;
background: linear-gradient(135deg, #0284C7, #0369A1) !important;
border: 1px solid #38BDF8 !important;
color: #FFFFFF !important;
padding: 0 13px !important;
height: 48px !important;
min-height: 48px !important;
border-radius: 12px !important;
font-size: 13px !important;
font-weight: 700 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
text-decoration: none !important;
white-space: nowrap !important;
box-sizing: border-box !important;
box-shadow: 0 4px 14px rgba(2, 132, 199, 0.28) !important;
}
.kia-dock-chat-btn {
position: relative !important;
min-width: 58px !important;
height: 48px !important;
min-height: 48px !important;
padding: 0 9px !important;
border-radius: 12px !important;
background: linear-gradient(135deg, #05141f 0%, #0c2b40 100%) !important;
border: 1.5px solid rgba(56, 189, 248, 0.65) !important;
color: #38bdf8 !important;
display: inline-flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 1px !important;
flex-shrink: 0 !important;
cursor: pointer !important;
box-sizing: border-box !important;
box-shadow: 0 4px 14px rgba(2, 132, 199, 0.25) !important;
transition: all 0.2s ease !important;
-webkit-tap-highlight-color: transparent !important;
}
.kia-dock-chat-btn:hover,
.kia-dock-chat-btn:active {
background: linear-gradient(135deg, #082338 0%, #0369a1 100%) !important;
border-color: #7dd3fc !important;
color: #ffffff !important;
transform: translateY(-1px) !important;
}
.kia-chat-online-dot {
position: absolute !important;
top: -3px !important;
right: -3px !important;
width: 10px !important;
height: 10px !important;
border-radius: 50% !important;
background: #10b981 !important;
border: 2px solid #070d14 !important;
pointer-events: none !important;
}
.kia-chat-micro-label {
font-size: 9.5px !important;
font-weight: 800 !important;
line-height: 1 !important;
color: #e0f2fe !important;
letter-spacing: -0.02em !important;
white-space: nowrap !important;
}
.kia-chat-callout {
position: absolute !important;
right: 0 !important;
bottom: calc(100% + 12px) !important;
background: #05141f !important;
color: #f8fafc !important;
border: 1.5px solid rgba(56, 189, 248, 0.6) !important;
border-radius: 14px !important;
padding: 7px 9px 7px 11px !important;
display: inline-flex !important;
align-items: center !important;
gap: 7px !important;
white-space: nowrap !important;
box-shadow: 0 10px 26px rgba(0, 0, 0, 0.55), 0 0 14px rgba(56, 189, 248, 0.18) !important;
z-index: 860 !important;
cursor: pointer !important;
transition: opacity 0.2s ease, transform 0.2s ease !important;
-webkit-tap-highlight-color: transparent !important;
}
.kia-chat-callout.kia-drawer-callout {
right: 18px !important;
bottom: 90px !important;
}
.drawer-footer:has(.kia-chat-callout:not(.is-dismissed)) {
padding-top: 58px !important;
}
.kia-chat-callout::after {
content: "" !important;
position: absolute !important;
bottom: -6px !important;
right: 22px !important;
width: 10px !important;
height: 10px !important;
background: #05141f !important;
border-right: 1.5px solid rgba(56, 189, 248, 0.6) !important;
border-bottom: 1.5px solid rgba(56, 189, 248, 0.6) !important;
transform: rotate(45deg) !important;
pointer-events: none !important;
}
.kia-chat-callout-badge {
padding: 2px 6px !important;
border-radius: 6px !important;
background: rgba(56, 189, 248, 0.18) !important;
color: #38bdf8 !important;
font-size: 10.5px !important;
font-weight: 800 !important;
letter-spacing: 0.01em !important;
}
.kia-chat-callout-text {
font-size: 12px !important;
font-weight: 700 !important;
color: #ffffff !important;
letter-spacing: -0.01em !important;
}
.kia-chat-callout-close {
width: 22px !important;
height: 22px !important;
min-width: 22px !important;
min-height: 22px !important;
border-radius: 50% !important;
border: none !important;
background: rgba(255, 255, 255, 0.1) !important;
color: #cbd5e1 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
margin-left: 2px !important;
cursor: pointer !important;
}
.kia-chat-callout-close:hover,
.kia-chat-callout-close:active {
background: rgba(255, 255, 255, 0.24) !important;
color: #ffffff !important;
}
.kia-chat-callout.is-dismissed,
body.kia-cookie-banner-visible #kia-dock-chat-callout,
body.kia-cookie-drawer-open .kia-chat-callout,
body.kia-lang-flyout-open .kia-chat-callout,
body:has(#git-ai-chips-container.is-visible) #kia-dock-chat-callout {
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}
body:has(.menu-list-mobile[aria-expanded="true"]) .kia-mobile-sticky-dock,
body:has(.opt3-mega-flyout.open) .kia-mobile-sticky-dock,
body:has(#opt3-flyout.open) .kia-mobile-sticky-dock,
body.drawer-opened .kia-mobile-sticky-dock,
body.modal-open .kia-mobile-sticky-dock {
opacity: 0 !important;
pointer-events: none !important;
}
}
@media (min-width: 1025px) {
.kia-mobile-sticky-dock,
.kia-drawer-chat-btn,
.kia-chat-callout {
display: none !important;
}
}
body.kia-page-new-request {
padding-bottom: 0 !important;
}
body.kia-page-new-request .kia-mobile-sticky-dock {
display: none !important;
}
.kia-hidden-maker-field,
.kia-hidden-by-repeater,
#new-request-form .request_custom_fields_52507777869081,
#new-request-form .request_custom_fields_47859668847513,
body.kia-request-screen2-mode #new-request-form [data-kia-field-id="ticket_form_id"] {
display: none !important;
}
body.kia-request-screen1-mode #main-content.form {
display: none !important;
}
.container.kia-new-request-page-container {
max-width: 1240px !important;
margin: 0 auto !important;
padding: 20px 24px 72px !important;
box-sizing: border-box !important;
}
@media (max-width: 768px) {
.container.kia-new-request-page-container {
padding: 16px 14px 56px !important;
}
}
.sub-nav.kia-request-subnav {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
justify-content: space-between !important;
gap: 12px !important;
margin-bottom: 20px !important;
padding-bottom: 14px !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.sub-nav.kia-request-subnav .breadcrumbs li,
.sub-nav.kia-request-subnav .breadcrumbs li a {
color: #94A3B8 !important;
font-size: 13px !important;
}
.sub-nav.kia-request-subnav .search-container input[type="search"] {
background: #0B1927 !important;
color: #F8FAFC !important;
border: 1px solid rgba(56, 189, 248, 0.25) !important;
border-radius: 10px !important;
height: 40px !important;
padding-left: 34px !important;
}
.kia-request-hero-header {
margin-bottom: 22px !important;
}
.kia-request-hero-top {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
justify-content: space-between !important;
gap: 10px !important;
margin-bottom: 10px !important;
}
.kia-request-eyebrow {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
padding: 5px 12px !important;
border-radius: 9999px !important;
background: rgba(56, 189, 248, 0.12) !important;
border: 1px solid rgba(56, 189, 248, 0.32) !important;
color: #7DD3FC !important;
font-size: 11.5px !important;
font-weight: 700 !important;
letter-spacing: 0.04em !important;
text-transform: uppercase !important;
}
.kia-request-eyebrow-dot {
width: 7px !important;
height: 7px !important;
border-radius: 50% !important;
background: #38BDF8 !important;
box-shadow: 0 0 8px #38BDF8 !important;
}
.kia-request-sla-badge {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
padding: 5px 12px !important;
border-radius: 8px !important;
background: rgba(11, 25, 39, 0.85) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
color: #CBD5E1 !important;
font-size: 12px !important;
font-weight: 600 !important;
}
.kia-request-sla-badge svg {
color: #38BDF8 !important;
}
#kia-request-main-title {
color: #FFFFFF !important;
font-size: 28px !important;
font-weight: 800 !important;
letter-spacing: -0.02em !important;
margin: 0 0 8px 0 !important;
line-height: 1.25 !important;
}
.kia-request-hero-subtitle {
color: #94A3B8 !important;
font-size: 14.5px !important;
line-height: 1.55 !important;
margin: 0 !important;
}
.kia-screen1-triage-hub {
display: flex !important;
flex-direction: column !important;
gap: 24px !important;
}
.kia-screen1-triage-grid {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 18px !important;
margin-bottom: 0 !important;
}
@media (max-width: 767px) {
.kia-screen1-triage-grid {
grid-template-columns: 1fr !important;
}
}
.kia-triage-card {
background: rgba(11, 25, 39, 0.88) !important;
border: 1px solid rgba(56, 189, 248, 0.22) !important;
border-radius: 16px !important;
padding: 24px !important;
text-align: left !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
gap: 16px !important;
cursor: pointer !important;
transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease !important;
box-shadow: 0 14px 32px rgba(0, 0, 0, 0.42) !important;
color: #F8FAFC !important;
font-family: inherit !important;
}
.kia-triage-card:hover,
.kia-triage-card:focus-visible {
transform: translateY(-2px) !important;
border-color: #38BDF8 !important;
box-shadow: 0 18px 38px rgba(2, 132, 199, 0.25) !important;
outline: none !important;
}
.kia-triage-card-top {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 12px !important;
margin-bottom: 4px !important;
}
.kia-triage-card-icon,
.kia-triage-icon-box {
width: 48px !important;
height: 48px !important;
border-radius: 12px !important;
background: rgba(56, 189, 248, 0.14) !important;
border: 1px solid rgba(56, 189, 248, 0.35) !important;
color: #38BDF8 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0 !important;
}
.kia-triage-card[data-form-id="50080908741657"] .kia-triage-card-icon,
.kia-triage-card[data-form-id="50080908741657"] .kia-triage-icon-box {
background: rgba(16, 185, 129, 0.14) !important;
border-color: rgba(16, 185, 129, 0.4) !important;
color: #34D399 !important;
}
.kia-triage-card-badge,
.kia-triage-badge {
padding: 5px 11px !important;
border-radius: 9999px !important;
background: rgba(56, 189, 248, 0.14) !important;
border: 1px solid rgba(56, 189, 248, 0.32) !important;
color: #7DD3FC !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 0.03em !important;
}
.kia-triage-card[data-form-id="50080908741657"] .kia-triage-card-badge,
.kia-triage-card[data-form-id="50080908741657"] .kia-triage-badge {
background: rgba(16, 185, 129, 0.16) !important;
border-color: rgba(16, 185, 129, 0.4) !important;
color: #6EE7B7 !important;
}
.kia-triage-card-title,
.kia-triage-title {
font-size: 18px !important;
font-weight: 800 !important;
color: #FFFFFF !important;
margin: 0 !important;
line-height: 1.35 !important;
}
.kia-triage-card-desc,
.kia-triage-desc {
font-size: 13.5px !important;
color: #CBD5E1 !important;
line-height: 1.6 !important;
margin: 0 !important;
}
.kia-triage-card-foot,
.kia-triage-meta-row {
padding-top: 14px !important;
border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
justify-content: space-between !important;
gap: 10px !important;
margin-top: auto !important;
font-size: 12px !important;
color: #94A3B8 !important;
}
.kia-triage-chips {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 6px !important;
}
.kia-triage-chip {
display: inline-flex !important;
align-items: center !important;
padding: 4px 10px !important;
border-radius: 6px !important;
background: rgba(5, 20, 31, 0.9) !important;
border: 1px solid rgba(148, 163, 184, 0.26) !important;
color: #CBD5E1 !important;
font-size: 11.5px !important;
font-weight: 600 !important;
}
.kia-triage-card-cta,
.kia-triage-cta {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
color: #38BDF8 !important;
font-size: 12.5px !important;
font-weight: 700 !important;
white-space: nowrap !important;
}
.kia-triage-card[data-form-id="50080908741657"] .kia-triage-cta {
color: #34D399 !important;
}
.kia-screen1-deflection-bar {
margin-top: 24px !important;
background: rgba(2, 132, 199, 0.09) !important;
border: 1px solid rgba(56, 189, 248, 0.28) !important;
border-radius: 14px !important;
padding: 18px 22px !important;
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
justify-content: space-between !important;
gap: 16px !important;
}
.kia-screen1-triage-hub > .kia-screen1-deflection-bar {
margin-top: 0 !important;
}
.kia-deflection-bar-info {
display: flex !important;
align-items: center !important;
gap: 14px !important;
}
.kia-deflection-bar-icon {
width: 40px !important;
height: 40px !important;
border-radius: 10px !important;
background: rgba(56, 189, 248, 0.16) !important;
border: 1px solid rgba(56, 189, 248, 0.35) !important;
color: #38BDF8 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0 !important;
}
.kia-deflection-bar-title {
display: block !important;
color: #FFFFFF !important;
font-size: 14px !important;
font-weight: 700 !important;
margin-bottom: 2px !important;
}
.kia-deflection-bar-desc {
color: #CBD5E1 !important;
font-size: 12.5px !important;
margin: 0 !important;
}
.kia-deflection-chip {
display: inline-flex !important;
align-items: center !important;
min-height: 42px !important;
padding: 8px 16px !important;
border-radius: 10px !important;
background: #0B1927 !important;
border: 1px solid rgba(56, 189, 248, 0.4) !important;
color: #7DD3FC !important;
font-size: 12.5px !important;
font-weight: 700 !important;
text-decoration: none !important;
}
body.kia-request-screen1-mode #kia-form-switcher-bar,
body.kia-request-screen1-mode #kia-tablet-helper-bar,
body.kia-request-screen1-mode #kia-request-helper-rail {
display: none !important;
}
body.kia-request-screen2-mode .kia-form-switcher-bar {
background: rgba(8, 22, 36, 0.92) !important;
border: 1px solid rgba(56, 189, 248, 0.25) !important;
border-radius: 14px !important;
padding: 14px 18px !important;
margin-bottom: 16px !important;
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
justify-content: space-between !important;
gap: 12px !important;
}
.kia-form-switcher-meta {
display: flex !important;
align-items: center !important;
gap: 10px !important;
}
.kia-active-form-badge {
padding: 4px 10px !important;
border-radius: 6px !important;
background: rgba(56, 189, 248, 0.18) !important;
border: 1px solid rgba(56, 189, 248, 0.4) !important;
color: #38BDF8 !important;
font-size: 11px !important;
font-weight: 800 !important;
}
.kia-active-form-title {
color: #FFFFFF !important;
font-size: 14px !important;
font-weight: 700 !important;
}
.kia-form-switcher-pills {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 8px !important;
}
.kia-switcher-pill,
.kia-form-pill {
display: inline-flex !important;
align-items: center !important;
gap: 7px !important;
min-height: 40px !important;
padding: 7px 14px !important;
border-radius: 10px !important;
background: #0B1927 !important;
border: 1px solid rgba(148, 163, 184, 0.28) !important;
color: #CBD5E1 !important;
font-size: 12.5px !important;
font-weight: 700 !important;
text-decoration: none !important;
cursor: pointer !important;
transition: all 0.15s ease !important;
}
.kia-switcher-pill:hover,
.kia-form-pill:hover {
border-color: #38BDF8 !important;
color: #FFFFFF !important;
text-decoration: none !important;
}
.kia-switcher-pill.is-active,
.kia-form-pill.is-active {
background: rgba(56, 189, 248, 0.2) !important;
border-color: #38BDF8 !important;
color: #FFFFFF !important;
font-weight: 800 !important;
}
.kia-form-pill-hub {
background: rgba(5, 20, 31, 0.9) !important;
border-color: rgba(56, 189, 248, 0.35) !important;
color: #7DD3FC !important;
}
.kia-form-pill-dot {
width: 6px !important;
height: 6px !important;
border-radius: 50% !important;
background: rgba(148, 163, 184, 0.5) !important;
flex-shrink: 0 !important;
}
.kia-form-pill.is-active .kia-form-pill-dot {
background: #38BDF8 !important;
box-shadow: 0 0 6px #38BDF8 !important;
}
@media (min-width: 1025px) {
.kia-tablet-helper-bar {
display: none !important;
}
}
.kia-tablet-helper-bar {
background: rgba(11, 25, 39, 0.9) !important;
border: 1px solid rgba(56, 189, 248, 0.28) !important;
border-radius: 12px !important;
padding: 12px 16px !important;
margin-bottom: 16px !important;
}
.kia-tablet-helper-row {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
justify-content: space-between !important;
gap: 10px !important;
}
.kia-tablet-helper-label {
color: #38BDF8 !important;
font-size: 12px !important;
font-weight: 800 !important;
text-transform: uppercase !important;
}
.kia-tablet-helper-btns {
display: flex !important;
flex-wrap: wrap !important;
gap: 8px !important;
}
.kia-tablet-helper-btn {
min-height: 44px !important;
padding: 8px 12px !important;
border-radius: 9px !important;
background: #05141F !important;
border: 1px solid rgba(56, 189, 248, 0.35) !important;
color: #E2E8F0 !important;
font-size: 12px !important;
font-weight: 700 !important;
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
cursor: pointer !important;
}
.kia-tablet-helper-drawer {
margin-top: 12px !important;
padding: 14px !important;
border-radius: 10px !important;
background: #05141F !important;
border: 1px solid rgba(56, 189, 248, 0.35) !important;
color: #E2E8F0 !important;
font-size: 12.5px !important;
line-height: 1.6 !important;
}
.kia-tablet-drawer-head {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
margin-bottom: 6px !important;
color: #38BDF8 !important;
}
.kia-tablet-drawer-close {
background: transparent !important;
border: 1px solid rgba(148, 163, 184, 0.3) !important;
color: #94A3B8 !important;
border-radius: 6px !important;
padding: 3px 8px !important;
font-size: 11px !important;
cursor: pointer !important;
}
.kia-request-bento-shell.is-screen2 {
display: grid !important;
grid-template-columns: minmax(0, 8fr) minmax(300px, 4fr) !important;
gap: 24px !important;
align-items: start !important;
}
@media (max-width: 1024px) {
.kia-request-bento-shell.is-screen2 {
grid-template-columns: 1fr !important;
}
.kia-request-helper-rail {
display: none !important;
}
}
.kia-request-helper-rail {
position: sticky !important;
top: 96px !important;
display: flex;
flex-direction: column;
gap: 16px;
}
.kia-rail-card {
background: rgba(11, 25, 39, 0.86) !important;
border: 1px solid rgba(56, 189, 248, 0.22) !important;
border-radius: 14px !important;
padding: 18px 20px !important;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4) !important;
}
.kia-rail-card.kia-rail-card-callout {
background: rgba(2, 132, 199, 0.09) !important;
border: 1px solid rgba(56, 189, 248, 0.32) !important;
}
.kia-rail-card-head {
display: flex !important;
align-items: center !important;
gap: 8px !important;
color: #38BDF8 !important;
font-size: 12px !important;
font-weight: 800 !important;
text-transform: uppercase !important;
letter-spacing: 0.04em !important;
margin-bottom: 12px !important;
}
.kia-rail-serial-visual {
display: flex !important;
align-items: center !important;
gap: 12px !important;
padding: 12px !important;
border-radius: 10px !important;
background: #05141F !important;
border: 1px solid rgba(56, 189, 248, 0.2) !important;
}
.kia-rail-serial-visual svg {
color: #38BDF8 !important;
flex-shrink: 0 !important;
}
.kia-rail-serial-copy strong {
display: block !important;
color: #FFFFFF !important;
font-size: 12.5px !important;
margin-bottom: 3px !important;
}
.kia-rail-serial-copy p {
color: #CBD5E1 !important;
font-size: 11.5px !important;
line-height: 1.45 !important;
margin: 0 0 6px 0 !important;
}
.kia-rail-code-pill {
display: inline-block !important;
padding: 2px 8px !important;
border-radius: 5px !important;
background: rgba(56, 189, 248, 0.14) !important;
color: #7DD3FC !important;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
font-size: 11.5px !important;
}
.kia-rail-card-text {
color: #CBD5E1 !important;
font-size: 12.5px !important;
line-height: 1.6 !important;
margin: 0 0 10px 0 !important;
}
.kia-rail-log-paths {
padding: 10px 12px !important;
border-radius: 8px !important;
background: #05141F !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
color: #7DD3FC !important;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
font-size: 11.5px !important;
line-height: 1.65 !important;
}
#main-content.form {
background: rgba(11, 25, 39, 0.84) !important;
border: 1px solid rgba(56, 189, 248, 0.22) !important;
border-radius: 16px !important;
padding: 28px 26px !important;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45) !important;
max-width: 100% !important;
width: 100% !important;
box-sizing: border-box !important;
}
@media (max-width: 768px) {
#main-content.form {
padding: 18px 14px !important;
border-radius: 12px !important;
}
}
#new-request-form form {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 20px 20px !important;
align-items: start !important;
}
#new-request-form form > * {
grid-column: 1 / -1;
min-width: 0;
width: 100% !important;
max-width: 100% !important;
margin-top: 0 !important;
box-sizing: border-box !important;
}
@media (min-width: 768px) {
#new-request-form form > [data-kia-span="half"]:not(.kia-hidden-by-repeater):not([data-kia-field-id="ticket_form_id"]):not([data-kia-field-id="request_ticket_form_id"]) {
grid-column: span 1 !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
}
#new-request-form form > [data-kia-span="half"] > label,
#new-request-form form > [data-kia-span="half"] > [data-garden-id="forms.input_label"],
#new-request-form form > [data-kia-span="half"] > [data-garden-id="dropdowns.combobox.label"] {
order: 1 !important;
margin-bottom: 6px !important;
line-height: 1.4 !important;
}
#new-request-form form > [data-kia-span="half"] > input:not([type="hidden"]),
#new-request-form form > [data-kia-span="half"] > [data-garden-id="dropdowns.combobox"],
#new-request-form form > [data-kia-span="half"] > .git-country-combobox {
order: 2 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
width: 100% !important;
max-width: 100% !important;
}
#new-request-form form > [data-kia-span="half"] > [id*="--hint"],
#new-request-form form > [data-kia-span="half"] > [data-garden-id="forms.input_hint"],
#new-request-form form > [data-kia-span="half"] > [data-garden-id="dropdowns.combobox.hint"] {
order: 3 !important;
margin-top: 6px !important;
margin-bottom: 0 !important;
}
#new-request-form form > [data-kia-span="half"] > [data-garden-id*=".message"],
#new-request-form form > [data-kia-span="half"] > [role="alert"] {
order: 4 !important;
margin-top: 6px !important;
}
#new-request-form form > [data-kia-span="full"] {
grid-column: 1 / -1 !important;
}
}
#new-request-form form > .kia-hidden-by-repeater,
#new-request-form .kia-hidden-by-repeater,
#new-request-form form > [data-kia-field-id="ticket_form_id"],
#new-request-form form > [data-kia-field-id="request_ticket_form_id"],
#new-request-form form > [data-kia-field-name="request[ticket_form_id]"] {
display: none !important;
}
@media (max-width: 767px) {
#new-request-form form {
grid-template-columns: 1fr !important;
gap: 16px !important;
}
#new-request-form form > * {
grid-column: 1 / -1 !important;
}
}
.kia-form-section-banner {
grid-column: 1 / -1 !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
padding: 10px 14px !important;
margin-top: 6px !important;
border-radius: 10px !important;
background: rgba(5, 20, 31, 0.78) !important;
border: 1px solid rgba(56, 189, 248, 0.22) !important;
}
.kia-form-section-banner-left {
display: flex !important;
align-items: center !important;
gap: 10px !important;
}
.kia-form-section-num {
width: 26px !important;
height: 26px !important;
border-radius: 7px !important;
background: rgba(56, 189, 248, 0.18) !important;
border: 1px solid rgba(56, 189, 248, 0.4) !important;
color: #38BDF8 !important;
font-size: 11.5px !important;
font-weight: 800 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
.kia-form-section-title {
color: #FFFFFF !important;
font-size: 14px !important;
font-weight: 700 !important;
}
.kia-form-section-tag {
color: #94A3B8 !important;
font-size: 11.5px !important;
font-weight: 600 !important;
}
#new-request-form p[data-garden-id="typography.paragraph"] {
color: #CBD5E1 !important;
font-size: 13px !important;
line-height: 1.55 !important;
margin: 0 0 16px 0 !important;
}
#new-request-form .kia-repair-address-notice-row {
grid-column: 1 / -1 !important;
display: block !important;
padding: 10px 14px !important;
margin: 2px 0 -6px 0 !important;
border-radius: 10px !important;
background: rgba(56, 189, 248, 0.09) !important;
border: 1px solid rgba(56, 189, 248, 0.32) !important;
color: #E0F2FE !important;
font-size: 12.75px !important;
font-weight: 500 !important;
line-height: 1.55 !important;
word-break: keep-all !important;
}
#new-request-form label:not(.radio-label),
#new-request-form [data-garden-id="forms.input_label"],
#new-request-form [data-garden-id="forms.checkbox_label"],
#new-request-form [data-garden-id="dropdowns.combobox.label"] {
color: #F8FAFC !important;
font-weight: 700 !important;
font-size: 13px !important;
margin-bottom: 6px !important;
display: block !important;
}
#new-request-form [data-garden-id="forms.checkbox_label"] {
display: inline-block !important;
margin-bottom: 0 !important;
}
#new-request-form [data-garden-id="forms.input_hint"],
#new-request-form [data-garden-id="dropdowns.combobox.hint"],
#new-request-form [id*="--hint"] {
color: #94A3B8 !important;
font-size: 12px !important;
line-height: 1.45 !important;
}
#new-request-form [data-garden-id="dropdowns.combobox"] {
width: 100% !important;
max-width: 100% !important;
}
#new-request-form input[type="text"]:not(.git-country-search-input),
#new-request-form input[type="email"],
#new-request-form input[type="tel"],
#new-request-form input[type="number"],
#new-request-form [data-garden-id="dropdowns.combobox.trigger"],
#new-request-form [data-garden-id="forms.faux_input"]:not([aria-hidden="true"]),
#new-request-form [data-garden-id="forms.input"]:not(.git-country-search-input),
#new-request-form [role="combobox"]:not(.git-country-search-input) {
width: 100% !important;
max-width: 100% !important;
background-color: #05141F !important;
color: #F8FAFC !important;
border: 1px solid rgba(148, 163, 184, 0.34) !important;
border-radius: 10px !important;
min-height: 50px !important;
padding: 10px 14px !important;
font-size: 15px !important;
box-sizing: border-box !important;
transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
#new-request-form [data-garden-id="dropdowns.combobox.trigger"],
#new-request-form [data-garden-id="forms.faux_input"]:not([aria-hidden="true"]),
#new-request-form [role="combobox"]:not(.git-country-search-input) {
max-height: none !important;
height: auto !important;
overflow: hidden !important;
overflow-y: hidden !important;
overflow-x: hidden !important;
scrollbar-width: none !important;
-ms-overflow-style: none !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
}
html body #new-request-form [data-garden-id="forms.faux_input"]:not([aria-hidden="true"]) {
min-height: 50px !important;
padding: 6px 14px !important;
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 6px !important;
}
html body #new-request-form [data-garden-id="forms.faux_input"][aria-hidden="true"],
html body #new-request-form [data-garden-id="forms.faux_input"] [data-garden-id="forms.faux_input"] {
min-height: 32px !important;
height: 32px !important;
width: auto !important;
min-width: 140px !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
border-width: 0 !important;
background: transparent !important;
box-shadow: none !important;
opacity: 0 !important;
pointer-events: none !important;
}
html body #new-request-form [data-garden-id="tags.tag_view"],
html body #new-request-form [data-garden-id="dropdowns.combobox.tag"] {
background-color: rgba(56, 189, 248, 0.18) !important;
border: 1px solid rgba(56, 189, 248, 0.48) !important;
color: #F8FAFC !important;
border-radius: 6px !important;
height: 32px !important;
min-height: 32px !important;
padding: 0 10px !important;
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
font-size: 13.5px !important;
font-weight: 600 !important;
line-height: 1 !important;
}
html body #new-request-form [data-garden-id="tags.tag_view"] span,
html body #new-request-form [data-garden-id="dropdowns.combobox.tag"] span {
color: #F8FAFC !important;
font-size: 13.5px !important;
font-weight: 600 !important;
line-height: 1 !important;
}
html body #new-request-form [data-garden-id="tags.close"],
html body #new-request-form [data-garden-id="tags.close"] svg {
color: #38BDF8 !important;
opacity: 1 !important;
}
#new-request-form [data-garden-id="dropdowns.combobox.trigger"]::-webkit-scrollbar,
#new-request-form [data-garden-id="forms.faux_input"]::-webkit-scrollbar,
#new-request-form [role="combobox"]::-webkit-scrollbar {
display: none !important;
width: 0 !important;
height: 0 !important;
}
html body #new-request-form [data-garden-id="forms.faux_input"] input,
html body #new-request-form [data-garden-id="forms.faux_input"] input[type="text"]:not(.git-country-search-input),
html body #new-request-form [data-garden-id="forms.faux_input"] [data-garden-id="forms.input"]:not(.git-country-search-input),
html body #new-request-form [data-garden-id="dropdowns.combobox.trigger"] input,
html body #new-request-form [data-garden-id="dropdowns.combobox.trigger"] input[type="text"]:not(.git-country-search-input),
html body #new-request-form [data-garden-id="dropdowns.combobox.trigger"] [data-garden-id="dropdowns.combobox.input"],
html body #new-request-form [data-garden-id="dropdowns.combobox.trigger"] [data-garden-id="forms.input"]:not(.git-country-search-input),
html body #new-request-form [data-garden-id="forms.file_upload"] input,
html body #new-request-form [data-garden-id="forms.file_upload"] [data-garden-id="forms.input"]:not(.git-country-search-input) {
border: 0 !important;
border-width: 0 !important;
border-radius: 0 !important;
background: transparent !important;
background-color: transparent !important;
box-shadow: none !important;
min-height: 32px !important;
height: 32px !important;
line-height: 32px !important;
padding: 0 4px !important;
color: #F8FAFC !important;
caret-color: #38BDF8 !important;
font-size: 14.5px !important;
opacity: 1 !important;
outline: none !important;
}
#new-request-form [data-garden-id="dropdowns.combobox.container"] {
width: 100% !important;
flex: 1 1 100% !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
min-width: 0 !important;
}
#new-request-form [data-garden-id="dropdowns.combobox.input_group"] {
flex: 1 1 auto !important;
display: flex !important;
align-items: center !important;
min-width: 0 !important;
width: auto !important;
}
#new-request-form [data-garden-id="dropdowns.combobox.value"] {
flex: 1 1 auto !important;
min-width: 0 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
color: #F8FAFC !important;
}
#new-request-form [data-garden-id="dropdowns.combobox.trigger"] svg,
#new-request-form [data-garden-id="dropdowns.combobox.input_icon"] {
color: #94A3B8 !important;
width: 16px !important;
height: 16px !important;
flex: 0 0 16px !important;
flex-shrink: 0 !important;
margin-left: auto !important;
}
#new-request-form textarea,
#new-request-form [data-garden-id="forms.textarea"],
.kia-user-repair-memo {
width: 100% !important;
max-width: 100% !important;
background-color: #05141F !important;
color: #F8FAFC !important;
border: 1px solid rgba(148, 163, 184, 0.34) !important;
border-radius: 10px !important;
min-height: 160px !important;
padding: 12px 14px !important;
font-size: 14.5px !important;
line-height: 1.6 !important;
box-sizing: border-box !important;
overflow-y: hidden !important;
resize: vertical !important;
}
.kia-user-repair-memo {
min-height: 120px !important;
margin-top: 6px !important;
}
textarea.kia-synced-hidden-desc {
display: none !important;
}
@media (max-width: 1024px) {
#new-request-form input[type="text"]:not(.git-country-search-input),
#new-request-form input[type="email"],
#new-request-form input[type="tel"],
#new-request-form input[type="number"],
#new-request-form textarea,
.kia-user-repair-memo,
#new-request-form [data-garden-id="dropdowns.combobox.trigger"],
#new-request-form [data-garden-id="forms.faux_input"]:not([aria-hidden="true"]),
#new-request-form [role="combobox"]:not(.git-country-search-input) {
font-size: 16px !important;
min-height: 52px !important;
}
.git-country-input-wrapper {
min-height: 52px !important;
}
#new-request-form .git-country-input-wrapper input.git-country-search-input {
font-size: 16px !important;
}
}
#new-request-form input[type="text"]:not(.git-country-search-input):focus,
#new-request-form input[type="email"]:focus,
#new-request-form input[type="tel"]:focus,
#new-request-form input[type="number"]:focus,
#new-request-form textarea:focus,
.kia-user-repair-memo:focus,
#new-request-form [data-garden-id="dropdowns.combobox.trigger"]:focus,
#new-request-form [data-garden-id="dropdowns.combobox.trigger"]:focus-within,
#new-request-form [data-garden-id="forms.faux_input"]:focus,
#new-request-form [data-garden-id="forms.faux_input"]:focus-within,
#new-request-form [role="combobox"]:not(.git-country-search-input):focus {
border-color: #38BDF8 !important;
box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.22) !important;
outline: none !important;
}
#new-request-form [data-garden-id="forms.faux_input"] input:focus,
#new-request-form [data-garden-id="dropdowns.combobox.trigger"] input:focus {
border: 0 !important;
box-shadow: none !important;
outline: none !important;
}
[data-garden-id="dropdowns.combobox.listbox"],
#new-request-form [role="listbox"],
body [data-garden-id="dropdowns.combobox.listbox"] {
background-color: #0F2334 !important;
border: 1px solid rgba(56, 189, 248, 0.35) !important;
color: #F8FAFC !important;
box-shadow: 0 14px 34px rgba(0, 0, 0, 0.65) !important;
}
[data-garden-id="dropdowns.combobox.option"],
body [data-garden-id="dropdowns.combobox.option"],
#new-request-form [role="option"] {
color: #E2E8F0 !important;
background-color: transparent !important;
min-height: 42px !important;
}
[data-garden-id="dropdowns.combobox.option"]:hover,
[data-garden-id="dropdowns.combobox.option"][aria-selected="true"],
[data-garden-id="dropdowns.combobox.option"][data-garden-focus-visible="true"],
body [data-garden-id="dropdowns.combobox.option"]:hover,
body [data-garden-id="dropdowns.combobox.option"][aria-selected="true"],
#new-request-form [role="option"]:hover,
#new-request-form [role="option"][aria-selected="true"] {
background-color: rgba(56, 189, 248, 0.18) !important;
color: #38BDF8 !important;
}
#new-request-form [data-kia-field-id="attachments"] {
border: 0 !important;
background: transparent !important;
padding: 0 !important;
}
#new-request-form [data-garden-id="forms.file_upload"] {
background-color: rgba(5, 20, 31, 0.78) !important;
border: 1.5px dashed rgba(56, 189, 248, 0.42) !important;
border-radius: 12px !important;
padding: 20px !important;
color: #CBD5E1 !important;
min-height: 68px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
}
#new-request-form [data-garden-id="forms.file_upload"] * {
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
#new-request-form button[type="submit"],
#new-request-form input[type="submit"] {
background: linear-gradient(135deg, #0284C7 0%, #0369A1 100%) !important;
color: #FFFFFF !important;
border: 1px solid #38BDF8 !important;
border-radius: 10px !important;
font-weight: 800 !important;
font-size: 15px !important;
padding: 12px 32px !important;
min-height: 52px !important;
cursor: pointer !important;
box-shadow: 0 6px 20px rgba(2, 132, 199, 0.35) !important;
transition: all 0.2s ease !important;
}
#new-request-form button[type="submit"]:hover,
#new-request-form input[type="submit"]:hover {
background: linear-gradient(135deg, #0369A1 0%, #075985 100%) !important;
box-shadow: 0 8px 24px rgba(56, 189, 248, 0.45) !important;
}
.kia-desc-quick-chips-bar {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 8px !important;
margin: 6px 0 10px 0 !important;
}
.kia-desc-quick-label {
color: #94A3B8 !important;
font-size: 12px !important;
font-weight: 700 !important;
}
.kia-desc-quick-chip {
min-height: 38px !important;
padding: 6px 12px !important;
border-radius: 8px !important;
background: rgba(56, 189, 248, 0.14) !important;
border: 1px solid rgba(56, 189, 248, 0.35) !important;
color: #7DD3FC !important;
font-size: 12px !important;
font-weight: 700 !important;
cursor: pointer !important;
transition: all 0.15s ease !important;
}
.kia-desc-quick-chip:hover {
background: rgba(56, 189, 248, 0.25) !important;
color: #FFFFFF !important;
}
.kia-hidden-by-repeater {
display: none !important;
}
#new-request-form form > .kia-repeater-host-field {
grid-column: 1 / -1 !important;
}
.kia-repeater-host-field > *:not(#kia-repair-repeater-card) {
display: none !important;
}
.kia-repair-repeater-card {
grid-column: 1 / -1 !important;
background: rgba(5, 20, 31, 0.85) !important;
border: 1px solid rgba(16, 185, 129, 0.38) !important;
border-radius: 14px !important;
padding: 20px !important;
display: flex !important;
flex-direction: column !important;
gap: 16px !important;
}
.kia-repair-repeater-banner {
background: rgba(16, 185, 129, 0.08) !important;
border: 1px solid rgba(16, 185, 129, 0.32) !important;
border-radius: 10px !important;
padding: 14px 16px !important;
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
justify-content: space-between !important;
gap: 12px !important;
}
.kia-repair-repeater-banner-title {
color: #6EE7B7 !important;
font-size: 12.5px !important;
font-weight: 800 !important;
text-transform: uppercase !important;
margin-bottom: 4px !important;
}
.kia-repair-repeater-banner-desc {
color: #E2E8F0 !important;
font-size: 12.5px !important;
line-height: 1.55 !important;
margin: 0 !important;
}
.kia-repair-unit-count-badge {
padding: 6px 12px !important;
border-radius: 8px !important;
background: rgba(16, 185, 129, 0.18) !important;
border: 1px solid rgba(16, 185, 129, 0.45) !important;
color: #6EE7B7 !important;
font-size: 12px !important;
font-weight: 800 !important;
white-space: nowrap !important;
}
.kia-repair-units-list {
display: flex !important;
flex-direction: column !important;
gap: 14px !important;
}
.kia-repair-unit-card {
background: #081624 !important;
border: 1px solid rgba(16, 185, 129, 0.35) !important;
border-radius: 12px !important;
padding: 18px !important;
display: flex !important;
flex-direction: column !important;
gap: 14px !important;
}
.kia-repair-unit-head {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
justify-content: space-between !important;
gap: 10px !important;
padding-bottom: 10px !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.kia-repair-unit-badge {
padding: 4px 10px !important;
border-radius: 6px !important;
background: #10B981 !important;
color: #05141F !important;
font-size: 11.5px !important;
font-weight: 800 !important;
}
.kia-repair-unit-remove-btn {
padding: 5px 12px !important;
border-radius: 8px !important;
background: rgba(244, 63, 94, 0.15) !important;
border: 1px solid rgba(244, 63, 94, 0.45) !important;
color: #FDA4AF !important;
font-size: 12px !important;
font-weight: 700 !important;
cursor: pointer !important;
}
.kia-repair-unit-grid {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 14px !important;
align-items: start !important;
}
@media (max-width: 767px) {
.kia-repair-unit-grid {
grid-template-columns: 1fr !important;
}
}
.kia-repair-input,
.kia-repair-select {
width: 100% !important;
min-height: 50px !important;
padding: 10px 14px !important;
border-radius: 10px !important;
background-color: #05141F !important;
border: 1px solid rgba(148, 163, 184, 0.35) !important;
color: #F8FAFC !important;
font-size: 14.5px !important;
box-sizing: border-box !important;
}
.kia-repair-select {
appearance: none !important;
-webkit-appearance: none !important;
-moz-appearance: none !important;
padding-right: 40px !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6L8 10L12 6' stroke='%2394A3B8' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: right 14px center !important;
background-size: 16px 16px !important;
text-overflow: ellipsis !important;
cursor: pointer !important;
}
.kia-repair-serial-input {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
text-transform: uppercase !important;
border-color: rgba(16, 185, 129, 0.45) !important;
}
.kia-repair-symptom-chips {
display: flex !important;
flex-wrap: wrap !important;
gap: 8px !important;
}
.kia-repair-symptom-chip {
min-height: 44px !important;
padding: 8px 14px !important;
border-radius: 9px !important;
background: #05141F !important;
border: 1px solid rgba(148, 163, 184, 0.32) !important;
color: #CBD5E1 !important;
font-size: 12.5px !important;
font-weight: 700 !important;
cursor: pointer !important;
transition: all 0.15s ease !important;
}
.kia-repair-symptom-chip.is-selected {
background: #10B981 !important;
border-color: #6EE7B7 !important;
color: #05141F !important;
font-weight: 800 !important;
}
.kia-repair-quick-notes {
display: flex !important;
flex-wrap: wrap !important;
gap: 6px !important;
margin-bottom: 6px !important;
}
.kia-repair-quick-note-btn {
padding: 4px 10px !important;
border-radius: 6px !important;
background: rgba(56, 189, 248, 0.14) !important;
border: 1px solid rgba(56, 189, 248, 0.32) !important;
color: #7DD3FC !important;
font-size: 11.5px !important;
font-weight: 700 !important;
cursor: pointer !important;
}
.kia-btn-add-repair-unit {
width: 100% !important;
min-height: 52px !important;
border-radius: 12px !important;
background: rgba(16, 185, 129, 0.14) !important;
border: 2px dashed rgba(16, 185, 129, 0.55) !important;
color: #6EE7B7 !important;
font-size: 14px !important;
font-weight: 800 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
cursor: pointer !important;
transition: all 0.15s ease !important;
}
.kia-btn-add-repair-unit:hover {
background: rgba(16, 185, 129, 0.24) !important;
border-color: #6EE7B7 !important;
}
html body #termsBox.terms-box {
background-color: #05141F !important;
border: 1px solid rgba(56, 189, 248, 0.3) !important;
border-radius: 12px !important;
padding: 20px 22px !important;
margin-top: 8px !important;
margin-bottom: 22px !important;
max-width: 100% !important;
color: #E2E8F0 !important;
box-sizing: border-box !important;
}
html body #termsBox .terms-title {
color: #F8FAFC !important;
font-size: 15px !important;
font-weight: 700 !important;
margin-bottom: 10px !important;
}
html body #termsBox .terms-text,
html body #termsBox .terms-text p {
color: #CBD5E1 !important;
font-size: 13.5px !important;
line-height: 1.6 !important;
}
html body #termsBox a.terms-link {
color: #38BDF8 !important;
font-weight: 600 !important;
text-decoration: underline !important;
}
html body #termsBox .radio-group {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 24px !important;
margin-top: 16px !important;
padding-top: 14px !important;
border-top: 1px solid rgba(148, 163, 184, 0.18) !important;
}
html body #new-request-form #termsBox .radio-group label,
html body #termsBox .radio-group label {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
margin: 0 !important;
margin-bottom: 0 !important;
color: #F8FAFC !important;
font-weight: 600 !important;
font-size: 14px !important;
line-height: 1.4 !important;
cursor: pointer !important;
}
html body #termsBox .radio-group input[type="radio"] {
width: 18px !important;
height: 18px !important;
min-height: 18px !important;
margin: 0 !important;
padding: 0 !important;
accent-color: #38BDF8 !important;
cursor: pointer !important;
flex-shrink: 0 !important;
}
html body #termsBox .error-msg {
color: #F87171 !important;
margin-top: 10px !important;
}
#new-request-form [data-kia-field-id="360000438208"] [data-garden-id="forms.checkbox"] {
margin-top: 6px !important;
}
.kia-domestic-guidance-banner {
margin-top: 12px;
padding: 14px 16px;
background: rgba(2, 132, 199, 0.11);
border: 1px solid rgba(56, 189, 248, 0.36);
border-radius: 10px;
color: #E2E8F0;
font-size: 13px;
line-height: 1.55;
}
.kia-domestic-guidance-banner .kia-guidance-title {
font-weight: 700;
color: #38BDF8;
margin-bottom: 4px;
font-size: 13.5px;
}
.kia-domestic-guidance-banner .kia-guidance-body a {
color: #7DD3FC !important;
font-weight: 700;
text-decoration: underline;
}
.git-country-combobox {
position: relative;
width: 100%;
font-family: inherit;
margin-top: 0 !important;
box-sizing: border-box;
}
.git-country-input-wrapper {
position: relative;
display: flex;
align-items: center;
width: 100%;
min-height: 50px;
background: #05141F !important;
border: 1px solid rgba(148, 163, 184, 0.34) !important;
border-radius: 10px;
box-sizing: border-box;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
cursor: pointer;
}
.git-country-input-wrapper:hover {
border-color: rgba(56, 189, 248, 0.55) !important;
}
.git-country-input-wrapper:focus-within {
border-color: #38BDF8 !important;
box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.22) !important;
outline: none;
}
.git-country-search-input,
#new-request-form .git-country-input-wrapper input.git-country-search-input {
flex: 1 !important;
height: 48px !important;
min-height: 48px !important;
border: 0 !important;
border-width: 0 !important;
outline: none !important;
background: transparent !important;
background-color: transparent !important;
border-radius: 0 !important;
padding: 0 14px !important;
font-size: 15px !important;
color: #F8FAFC !important;
font-family: inherit !important;
line-height: 48px !important;
min-width: 0 !important;
box-sizing: border-box !important;
box-shadow: none !important;
}
.git-country-search-input::placeholder {
color: #64748B !important;
font-style: normal;
}
.git-country-actions {
display: flex;
align-items: center;
gap: 6px;
padding-right: 14px;
flex-shrink: 0;
}
.git-country-clear-btn {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border: none;
background: transparent;
cursor: pointer;
color: #94A3B8;
border-radius: 50%;
padding: 0;
transition: color 0.15s, background 0.15s;
}
.git-country-clear-btn:hover {
color: #FFFFFF;
background: rgba(255, 255, 255, 0.1);
}
.git-country-arrow-icon {
display: flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
color: #94A3B8;
pointer-events: none;
transition: transform 0.2s ease;
}
.git-country-combobox[data-open="true"] .git-country-arrow-icon {
transform: rotate(180deg);
}
.git-country-menu {
position: absolute;
top: calc(100% + 4px);
left: 0;
right: 0;
background: #0F2334 !important;
border: 1px solid rgba(56, 189, 248, 0.35) !important;
border-radius: 10px;
box-shadow: 0 14px 32px rgba(0, 0, 0, 0.65);
z-index: 10005;
max-height: 280px;
overflow-y: auto;
box-sizing: border-box;
}
.git-country-options-list {
list-style: none;
margin: 0;
padding: 4px 0;
}
.git-country-option {
display: block;
padding: 10px 14px;
cursor: pointer;
font-size: 14px;
color: #E2E8F0 !important;
line-height: 1.4;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: background 0.1s;
}
.git-country-option:hover,
.git-country-option.highlighted,
.git-country-option.git-option-highlighted {
background: rgba(56, 189, 248, 0.16) !important;
color: #38BDF8 !important;
}
.git-country-option.selected {
background: rgba(56, 189, 248, 0.22) !important;
color: #38BDF8 !important;
font-weight: 600;
}
.git-match-highlight {
font-weight: 700;
color: #38BDF8 !important;
}
.git-country-no-results {
padding: 12px 14px;
font-size: 14px;
color: #94A3B8;
text-align: center;
}
.git-deflection-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(5, 20, 31, 0.82);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
z-index: 999999;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.2s;
}
.git-deflection-overlay.git-modal-active {
opacity: 1;
visibility: visible;
}
.git-deflection-dialog {
background: #0F2334;
color: #F8FAFC;
border: 1px solid rgba(56, 189, 248, 0.32);
border-radius: 20px;
padding: 28px 24px 24px;
max-width: 460px;
width: 100%;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.65);
transform: scale(0.95) translateY(10px);
transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
box-sizing: border-box;
}
.git-deflection-overlay.git-modal-active .git-deflection-dialog {
transform: scale(1) translateY(0);
}
.git-deflection-header {
text-align: center;
margin-bottom: 16px;
}
.git-deflection-icon-wrap {
width: 44px;
height: 44px;
background: rgba(56, 189, 248, 0.14);
color: #38BDF8;
border: 1px solid rgba(56, 189, 248, 0.35);
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 12px;
}
.git-deflection-title {
font-size: 17px;
font-weight: 700;
color: #FFFFFF;
letter-spacing: -0.02em;
margin: 0 0 6px 0;
line-height: 1.35;
}
.git-deflection-desc {
font-size: 13px;
color: #CBD5E1;
line-height: 1.55;
margin: 0;
}
.git-deflection-channels {
background: #0B1927;
border: 1px solid rgba(56, 189, 248, 0.22);
border-radius: 12px;
padding: 12px 14px;
margin-bottom: 20px;
}
.git-deflection-channel-item {
display: flex;
align-items: center;
font-size: 12.5px;
font-weight: 600;
color: #E2E8F0;
padding: 4px 0;
}
.git-deflection-channel-item + .git-deflection-channel-item {
border-top: 1px solid rgba(255, 255, 255, 0.08);
margin-top: 4px;
padding-top: 8px;
}
.git-deflection-channel-icon {
width: 16px;
height: 16px;
color: #38BDF8;
margin-right: 8px;
flex-shrink: 0;
}
.git-deflection-actions {
display: flex;
flex-direction: column;
gap: 8px;
}
.git-deflection-btn-primary {
width: 100%;
background: linear-gradient(135deg, #0284C7 0%, #0369A1 100%);
color: #FFFFFF !important;
font-size: 13.5px;
font-weight: 700;
border: 1px solid #38BDF8;
border-radius: 10px;
padding: 11px 16px;
cursor: pointer;
box-shadow: 0 4px 12px rgba(2, 132, 199, 0.3);
transition: all 0.15s ease;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none !important;
}
.git-deflection-btn-primary:hover {
background: linear-gradient(135deg, #0369A1 0%, #075985 100%);
}
.git-deflection-btn-secondary {
width: 100%;
background: transparent;
color: #94A3B8 !important;
font-size: 12.5px;
font-weight: 600;
border: none;
padding: 8px 16px;
cursor: pointer;
transition: color 0.15s ease;
text-align: center;
text-decoration: none !important;
}
.git-deflection-btn-secondary:hover {
color: #F8FAFC !important;
}
.kia-request-detail-page-container {
max-width: 1240px !important;
margin: 0 auto !important;
padding: 28px 24px 72px !important;
}
.kia-request-detail-page-container .request-breadcrumbs {
margin-bottom: 22px !important;
}
.kia-request-detail-hero {
background: rgba(11, 27, 42, 0.88) !important;
border: 1px solid rgba(148, 163, 184, 0.24) !important;
border-radius: 16px !important;
padding: 24px 28px !important;
margin-bottom: 24px !important;
box-shadow: 0 16px 36px rgba(0, 0, 0, 0.28) !important;
}
.kia-request-detail-hero-top {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 12px !important;
flex-wrap: wrap !important;
margin-bottom: 12px !important;
}
.kia-request-detail-badges {
display: flex !important;
align-items: center !important;
gap: 8px !important;
flex-wrap: wrap !important;
}
.kia-ticket-id-pill {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
padding: 5px 12px !important;
border-radius: 8px !important;
background: rgba(56, 189, 248, 0.14) !important;
border: 1px solid rgba(56, 189, 248, 0.36) !important;
color: #38BDF8 !important;
font-size: 12.5px !important;
font-weight: 800 !important;
letter-spacing: 0.03em !important;
}
.kia-ticket-form-type-pill {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
padding: 5px 12px !important;
border-radius: 8px !important;
background: rgba(16, 185, 129, 0.14) !important;
border: 1px solid rgba(16, 185, 129, 0.38) !important;
color: #34D399 !important;
font-size: 12px !important;
font-weight: 700 !important;
}
.kia-request-detail-hero .request-title {
font-size: 24px !important;
font-weight: 800 !important;
color: #FFFFFF !important;
margin: 0 0 14px 0 !important;
padding: 0 !important;
border: 0 !important;
max-width: 100% !important;
line-height: 1.35 !important;
}
.kia-request-detail-meta-strip {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 20px !important;
padding-top: 14px !important;
border-top: 1px solid rgba(148, 163, 184, 0.15) !important;
font-size: 13px !important;
color: #94A3B8 !important;
}
.kia-request-detail-meta-strip strong {
color: #E2E8F0 !important;
font-weight: 600 !important;
}
.kia-request-detail-page-container .request-container {
display: grid !important;
grid-template-columns: minmax(0, 1fr) 360px !important;
gap: 24px !important;
align-items: start !important;
}
@media (max-width: 1023px) {
.kia-request-detail-page-container .request-container {
grid-template-columns: 1fr !important;
gap: 18px !important;
}
}
.kia-request-detail-page-container .request-main {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
order: 0 !important;
}
.kia-request-detail-page-container .comment-list {
list-style: none !important;
margin: 0 0 20px 0 !important;
padding: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 16px !important;
}
.kia-request-detail-page-container .comment {
background: rgba(11, 27, 42, 0.86) !important;
border: 1px solid rgba(148, 163, 184, 0.22) !important;
border-radius: 16px !important;
padding: 24px 26px !important;
box-shadow: 0 14px 32px rgba(0, 0, 0, 0.24) !important;
}
.kia-request-detail-page-container .comment-wrapper {
border: 0 !important;
padding: 0 !important;
margin: 0 !important;
}
.kia-request-detail-page-container .comment-author {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 12px !important;
padding-bottom: 14px !important;
margin-bottom: 18px !important;
border-bottom: 1px solid rgba(148, 163, 184, 0.14) !important;
}
.kia-request-detail-page-container .comment-meta span a,
.kia-request-detail-page-container .comment-meta span {
color: #FFFFFF !important;
font-weight: 700 !important;
font-size: 14.5px !important;
text-decoration: none !important;
}
.kia-request-detail-page-container .comment-meta .meta-data {
color: #94A3B8 !important;
font-size: 12.5px !important;
font-weight: 500 !important;
}
.kia-request-detail-page-container .comment-body {
color: #F1F5F9 !important;
font-size: 14.5px !important;
line-height: 1.65 !important;
word-break: break-word !important;
}
.kia-repair-spec-panel {
background: rgba(5, 20, 31, 0.92) !important;
border: 1px solid rgba(56, 189, 248, 0.34) !important;
border-radius: 12px !important;
overflow: hidden !important;
margin-bottom: 16px !important;
}
.kia-repair-spec-header {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
flex-wrap: wrap !important;
gap: 8px !important;
padding: 12px 16px !important;
background: rgba(56, 189, 248, 0.11) !important;
border-bottom: 1px solid rgba(56, 189, 248, 0.24) !important;
}
.kia-repair-spec-header-title {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
color: #38BDF8 !important;
font-size: 13.5px !important;
font-weight: 800 !important;
}
.kia-repair-spec-header-sub {
color: #94A3B8 !important;
font-size: 12px !important;
font-weight: 600 !important;
}
.kia-repair-spec-table-wrap {
width: 100% !important;
overflow-x: auto !important;
}
.kia-repair-spec-table {
width: 100% !important;
border-collapse: collapse !important;
font-size: 13px !important;
}
.kia-repair-spec-table th {
text-align: left !important;
padding: 10px 14px !important;
font-size: 11.5px !important;
font-weight: 700 !important;
color: #94A3B8 !important;
background: rgba(15, 35, 54, 0.65) !important;
border-bottom: 1px solid rgba(148, 163, 184, 0.16) !important;
white-space: nowrap !important;
}
.kia-repair-spec-table td {
padding: 12px 14px !important;
border-bottom: 1px solid rgba(148, 163, 184, 0.12) !important;
color: #F8FAFC !important;
vertical-align: middle !important;
}
.kia-repair-spec-table tr:last-child td {
border-bottom: 0 !important;
}
.kia-symptom-summary-rows {
display: flex !important;
flex-direction: column !important;
padding: 6px 16px !important;
}
.kia-symptom-summary-row {
display: grid !important;
grid-template-columns: 200px minmax(0, 1fr) !important;
gap: 12px !important;
padding: 10px 0 !important;
border-bottom: 1px solid rgba(148, 163, 184, 0.12) !important;
font-size: 13.5px !important;
}
.kia-symptom-summary-row:last-child {
border-bottom: 0 !important;
}
.kia-symptom-summary-key {
color: #94A3B8 !important;
font-weight: 600 !important;
}
.kia-symptom-summary-val {
color: #F8FAFC !important;
font-weight: 600 !important;
}
.kia-serial-code-badge {
display: inline-block !important;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
font-size: 12.5px !important;
font-weight: 700 !important;
padding: 4px 9px !important;
border-radius: 6px !important;
background: rgba(56, 189, 248, 0.14) !important;
border: 1px solid rgba(56, 189, 248, 0.36) !important;
color: #E0F2FE !important;
}
.kia-symptom-chip {
display: inline-flex !important;
align-items: center !important;
padding: 3px 9px !important;
border-radius: 6px !important;
font-size: 12px !important;
font-weight: 600 !important;
background: rgba(248, 250, 252, 0.08) !important;
border: 1px solid rgba(148, 163, 184, 0.28) !important;
color: #E2E8F0 !important;
margin: 2px 6px 2px 0 !important;
}
.kia-customer-memo-box {
background: rgba(15, 35, 54, 0.58) !important;
border: 1px solid rgba(148, 163, 184, 0.22) !important;
border-radius: 12px !important;
padding: 16px 18px !important;
color: #F8FAFC !important;
}
.kia-customer-memo-label {
font-size: 11.5px !important;
font-weight: 700 !important;
color: #38BDF8 !important;
text-transform: uppercase !important;
letter-spacing: 0.04em !important;
margin-bottom: 6px !important;
}
.kia-customer-memo-content {
font-size: 14.5px !important;
color: #F8FAFC !important;
white-space: pre-wrap !important;
}
.kia-request-detail-page-container .comment-form {
background: rgba(11, 27, 42, 0.86) !important;
border: 1px solid rgba(148, 163, 184, 0.22) !important;
border-radius: 16px !important;
padding: 20px 24px !important;
display: flex !important;
gap: 14px !important;
align-items: flex-start !important;
}
.kia-request-detail-page-container .comment-container {
flex: 1 1 auto !important;
width: 100% !important;
}
.kia-request-detail-page-container .request-sidebar,
.kia-request-detail-page-container .request-sidebar.collapsible-sidebar {
width: 100% !important;
max-height: none !important;
height: auto !important;
overflow: visible !important;
background: rgba(11, 27, 42, 0.88) !important;
border: 1px solid rgba(148, 163, 184, 0.24) !important;
border-radius: 16px !important;
padding: 22px 24px !important;
box-shadow: 0 16px 36px rgba(0, 0, 0, 0.28) !important;
order: 1 !important;
box-sizing: border-box !important;
}
.kia-request-detail-page-container .request-sidebar .collapsible-sidebar-toggle {
display: none !important;
}
.kia-request-detail-page-container .request-sidebar .collapsible-sidebar-body {
max-height: none !important;
height: auto !important;
overflow: visible !important;
display: block !important;
}
@media (min-width: 1024px) {
.kia-request-detail-page-container .request-sidebar {
position: sticky !important;
top: 24px !important;
}
}
.kia-request-detail-page-container .request-sidebar .collapsible-sidebar-title {
display: block !important;
font-size: 15px !important;
font-weight: 800 !important;
color: #FFFFFF !important;
padding-bottom: 12px !important;
margin-bottom: 12px !important;
border-bottom: 1px solid rgba(148, 163, 184, 0.18) !important;
}
.kia-request-detail-page-container .request-details {
display: grid !important;
grid-template-columns: 118px minmax(0, 1fr) !important;
row-gap: 10px !important;
column-gap: 12px !important;
font-size: 13px !important;
padding: 12px 0 !important;
margin: 0 !important;
border-bottom: 1px solid rgba(148, 163, 184, 0.14) !important;
}
.kia-request-detail-page-container .request-details:last-child {
border-bottom: 0 !important;
padding-bottom: 0 !important;
}
.kia-request-detail-page-container .request-details dt,
.kia-request-detail-page-container .request-details dd {
display: block !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
font-size: 13px !important;
line-height: 1.5 !important;
}
.kia-request-detail-page-container .request-details dd::after {
content: none !important;
}
.kia-request-detail-page-container .request-details dt {
color: #94A3B8 !important;
font-weight: 600 !important;
}
.kia-request-detail-page-container .request-details dd {
color: #F8FAFC !important;
font-weight: 600 !important;
word-break: break-word !important;
}
.kia-symptom-chips-wrap {
display: flex !important;
flex-wrap: wrap !important;
gap: 6px !important;
align-items: center !important;
}
@media (max-width: 640px) {
.kia-request-detail-page-container {
padding: 0 12px !important;
margin: 14px auto 40px auto !important;
}
.kia-request-detail-hero {
padding: 18px 16px !important;
border-radius: 14px !important;
}
.kia-request-detail-hero .request-title {
font-size: 19px !important;
}
.kia-request-detail-meta-strip {
gap: 10px 14px !important;
font-size: 12px !important;
}
.kia-request-detail-page-container .comment {
padding: 16px 14px !important;
border-radius: 14px !important;
}
.kia-request-detail-page-container .request-sidebar,
.kia-request-detail-page-container .request-sidebar.collapsible-sidebar {
padding: 18px 16px !important;
border-radius: 14px !important;
max-height: none !important;
height: auto !important;
}
.kia-repair-spec-table thead {
display: none !important;
}
.kia-repair-spec-table,
.kia-repair-spec-table tbody,
.kia-repair-spec-table tr,
.kia-repair-spec-table td {
display: block !important;
width: 100% !important;
box-sizing: border-box !important;
}
.kia-repair-spec-table tr {
padding: 10px 14px !important;
border-bottom: 1px solid rgba(56, 189, 248, 0.22) !important;
}
.kia-repair-spec-table tr:last-child {
border-bottom: 0 !important;
}
.kia-repair-spec-table td {
padding: 5px 0 !important;
border-bottom: 0 !important;
display: flex !important;
align-items: flex-start !important;
justify-content: space-between !important;
gap: 10px !important;
}
.kia-repair-spec-table td::before {
content: attr(data-label);
color: #94A3B8 !important;
font-size: 11.5px !important;
font-weight: 700 !important;
flex: 0 0 110px !important;
}
.kia-symptom-chips-wrap {
flex: 1 1 auto !important;
justify-content: flex-end !important;
}
.kia-symptom-chip {
margin: 0 !important;
}
.kia-symptom-summary-row {
grid-template-columns: 1fr !important;
gap: 4px !important;
}
}
.git-ai-chips-container {
position: fixed;
bottom: 92px;
right: 32px;
z-index: 999990;
width: 328px;
max-width: calc(100vw - 32px);
background: rgba(15, 23, 42, 0.92);
-webkit-backdrop-filter: blur(14px) saturate(160%);
backdrop-filter: blur(14px) saturate(160%);
border: 1px solid rgba(56, 189, 248, 0.30);
border-radius: 16px;
box-shadow: 0 14px 38px rgba(0, 0, 0, 0.48), 0 0 18px rgba(56, 189, 248, 0.12);
padding: 14px;
box-sizing: border-box;
user-select: none;
-webkit-user-select: none;
-webkit-tap-highlight-color: transparent;
opacity: 0;
pointer-events: none;
transform: translateY(16px) scale(0.96);
transition: opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1), transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
.git-ai-chips-container.is-visible {
opacity: 1;
pointer-events: auto;
transform: translateY(0) scale(1);
}
.git-ai-chips-container.is-hidden,
body.drawer-opened .git-ai-chips-container,
body.modal-open .git-ai-chips-container {
opacity: 0 !important;
pointer-events: none !important;
transform: translateY(16px) scale(0.96) !important;
}
.git-ai-chips-header {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 10px;
border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}
.git-ai-chips-title {
display: flex;
align-items: center;
gap: 7px;
color: #F8FAFC;
font-size: 13px;
font-weight: 700;
letter-spacing: -0.2px;
}
.git-ai-chips-icon {
color: #38BDF8;
flex-shrink: 0;
}
.git-ai-chips-close {
width: 24px;
height: 24px;
border-radius: 50%;
border: 1px solid rgba(148, 163, 184, 0.22);
background: rgba(30, 41, 59, 0.85);
color: #94A3B8;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0;
transition: all 0.2s ease;
}
.git-ai-chips-close:hover {
background: rgba(51, 65, 85, 0.95);
color: #FFFFFF;
border-color: rgba(56, 189, 248, 0.45);
}
.git-ai-chips-list {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 10px;
}
.git-ai-chip-btn {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
width: 100%;
padding: 10px 12px;
border: 1px solid rgba(148, 163, 184, 0.20);
border-radius: 11px;
background: rgba(30, 41, 59, 0.78);
color: #E2E8F0;
font-size: 12.5px;
font-weight: 600;
line-height: 1.38;
text-align: left;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
box-sizing: border-box;
}
.git-ai-chip-btn:hover {
background: rgba(14, 165, 233, 0.16);
border-color: rgba(56, 189, 248, 0.55);
color: #38BDF8;
transform: translateY(-1px);
box-shadow: 0 4px 14px rgba(14, 165, 233, 0.18);
}
.git-ai-chip-text {
flex: 1;
word-break: keep-all;
overflow-wrap: break-word;
}
.git-ai-chip-arrow {
flex-shrink: 0;
color: #64748B;
transition: transform 0.2s ease, color 0.2s ease;
}
.git-ai-chip-btn:hover .git-ai-chip-arrow {
color: #38BDF8;
transform: translateX(3px);
}
.git-ai-toast {
position: fixed;
bottom: 28px;
left: 50%;
transform: translateX(-50%) translateY(20px);
background: rgba(15, 23, 42, 0.96);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border: 1px solid rgba(56, 189, 248, 0.45);
color: #F8FAFC;
padding: 11px 22px;
border-radius: 30px;
font-size: 13px;
font-weight: 600;
letter-spacing: -0.2px;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
z-index: 999999;
opacity: 0;
pointer-events: none;
transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1), transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
display: flex;
align-items: center;
gap: 8px;
white-space: nowrap;
}
.git-ai-toast.is-active {
opacity: 1;
pointer-events: auto;
transform: translateX(-50%) translateY(0);
}
@media (max-width: 767px) {
.git-ai-chips-container {
bottom: calc(84px + env(safe-area-inset-bottom, 0px));
right: 16px;
left: 16px;
width: auto;
max-width: none;
padding: 12px;
border-radius: 14px;
}
.git-ai-chip-btn {
padding: 9px 11px;
font-size: 12px;
}
.git-ai-toast {
bottom: calc(88px + env(safe-area-inset-bottom, 0px));
font-size: 12px;
padding: 9px 16px;
}
}
html,
body,
html:has(body.kia-page-requests),
body.kia-page-requests {
overflow-x: clip !important;
overflow-y: visible !important;
}
html body header.header,
html body .header {
position: sticky !important;
top: 0 !important;
z-index: 9999 !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
background: rgba(5, 20, 31, 0.92) !important;
-webkit-backdrop-filter: blur(16px) saturate(160%) !important;
backdrop-filter: blur(16px) saturate(160%) !important;
border-bottom: 1px solid rgba(148, 163, 184, 0.16) !important;
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.38) !important;
overflow: visible !important;
}
@media (min-width: 1025px) {
html body #gitdocs-floating-badge,
html body .gitdocs-floating-badge {
display: none !important;
}
}
@media (min-width: 1024px) {
.kia-request-detail-page-container .request-sidebar {
top: 100px !important;
}
}
body.kia-page-requests .kia-requests-page-container,
.container.kia-requests-page-container,
.kia-requests-page-container {
max-width: 1240px !important;
width: 100% !important;
margin: 0 auto !important;
padding: 28px 24px 96px !important;
box-sizing: border-box !important;
}
body.kia-page-requests .my-activities-header,
.kia-requests-page-container .my-activities-header {
margin-bottom: 18px;
border: none;
}
body.kia-page-requests .my-activities-header h1,
.kia-requests-page-container .my-activities-header h1 {
font-size: 28px !important;
font-weight: 800 !important;
color: #FFFFFF !important;
letter-spacing: -0.02em;
margin: 0 !important;
line-height: 1.3;
}
body.kia-page-requests #main-content [data-garden-id="tabs.tabs"],
.kia-requests-page-container #main-content [data-garden-id="tabs.tabs"] {
margin-bottom: 4px;
}
body.kia-page-requests #main-content [data-garden-id="tabs.tablist"],
body.kia-page-requests #main-content [role="tablist"],
.kia-requests-page-container #main-content [data-garden-id="tabs.tablist"],
.kia-requests-page-container #main-content [role="tablist"] {
border-bottom: 1px solid rgba(148, 163, 184, 0.2) !important;
margin-bottom: 24px !important;
gap: 24px;
}
body.kia-page-requests #main-content [data-garden-id="tabs.tab"],
body.kia-page-requests #main-content [role="tab"],
.kia-requests-page-container #main-content [data-garden-id="tabs.tab"],
.kia-requests-page-container #main-content [role="tab"] {
color: #94A3B8 !important;
font-size: 14px !important;
font-weight: 600 !important;
padding: 10px 4px 12px !important;
margin-right: 0 !important;
border-bottom: 3px solid transparent !important;
background: transparent !important;
transition: color 0.18s ease, border-color 0.18s ease;
}
body.kia-page-requests #main-content [data-garden-id="tabs.tab"]:hover,
body.kia-page-requests #main-content [role="tab"]:hover,
.kia-requests-page-container #main-content [data-garden-id="tabs.tab"]:hover,
.kia-requests-page-container #main-content [role="tab"]:hover {
color: #E2E8F0 !important;
}
body.kia-page-requests #main-content [data-garden-id="tabs.tab"][aria-selected="true"],
body.kia-page-requests #main-content [role="tab"][aria-selected="true"],
.kia-requests-page-container #main-content [data-garden-id="tabs.tab"][aria-selected="true"],
.kia-requests-page-container #main-content [role="tab"][aria-selected="true"] {
color: #38BDF8 !important;
font-weight: 700 !important;
border-bottom: 3px solid #38BDF8 !important;
}
body.kia-page-requests #main-content [data-garden-id="typography.font"],
.kia-requests-page-container #main-content [data-garden-id="typography.font"] {
color: #E2E8F0 !important;
font-size: 13.5px !important;
font-weight: 600 !important;
}
body.kia-page-requests #main-content [data-garden-id="forms.input_label"]:not([hidden]),
.kia-requests-page-container #main-content [data-garden-id="forms.input_label"]:not([hidden]) {
color: #CBD5E1 !important;
font-weight: 600 !important;
}
body.kia-page-requests #main-content [data-garden-id="forms.faux_input"],
.kia-requests-page-container #main-content [data-garden-id="forms.faux_input"] {
background-color: #0B1927 !important;
border: 1px solid rgba(148, 163, 184, 0.36) !important;
border-radius: 8px !important;
min-height: 42px !important;
padding: 0 12px !important;
color: #F8FAFC !important;
box-shadow: none !important;
display: inline-flex !important;
align-items: center !important;
gap: 8px;
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
body.kia-page-requests #main-content [data-garden-id="forms.faux_input"]:hover,
.kia-requests-page-container #main-content [data-garden-id="forms.faux_input"]:hover {
border-color: rgba(56, 189, 248, 0.55) !important;
}
body.kia-page-requests #main-content [data-garden-id="forms.faux_input"]:focus-within,
.kia-requests-page-container #main-content [data-garden-id="forms.faux_input"]:focus-within {
border-color: #38BDF8 !important;
box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.18) !important;
}
body.kia-page-requests #main-content [data-garden-id="forms.media_figure"],
.kia-requests-page-container #main-content [data-garden-id="forms.media_figure"] {
color: #94A3B8 !important;
flex-shrink: 0 !important;
margin: auto 0 !important;
align-self: center !important;
position: static !important;
transform: none !important;
display: block !important;
}
body.kia-page-requests #main-content [data-garden-id="forms.faux_input"] input,
body.kia-page-requests #main-content [data-garden-id="forms.media_input"],
.kia-requests-page-container #main-content [data-garden-id="forms.faux_input"] input,
.kia-requests-page-container #main-content [data-garden-id="forms.media_input"] {
background: transparent !important;
background-color: transparent !important;
border: 0 !important;
border-width: 0px !important;
box-shadow: none !important;
outline: none !important;
color: #F8FAFC !important;
font-size: 14px !important;
padding: 0 !important;
min-height: 38px !important;
}
body.kia-page-requests #main-content [data-garden-id="forms.media_input"]::placeholder,
.kia-requests-page-container #main-content [data-garden-id="forms.media_input"]::placeholder {
color: #64748B !important;
}
body.kia-page-requests #main-content [data-garden-id="buttons.button"]:not([data-garden-id="tables.overflow_button"]),
.kia-requests-page-container #main-content [data-garden-id="buttons.button"]:not([data-garden-id="tables.overflow_button"]) {
background-color: #0B1927 !important;
border: 1px solid rgba(56, 189, 248, 0.38) !important;
border-radius: 8px !important;
color: #38BDF8 !important;
font-size: 13.5px !important;
font-weight: 600 !important;
min-height: 42px !important;
padding: 0 18px !important;
box-shadow: none !important;
transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
body.kia-page-requests #main-content [data-garden-id="buttons.button"]:not([data-garden-id="tables.overflow_button"]):hover,
.kia-requests-page-container #main-content [data-garden-id="buttons.button"]:not([data-garden-id="tables.overflow_button"]):hover {
background-color: rgba(56, 189, 248, 0.15) !important;
border-color: #38BDF8 !important;
color: #FFFFFF !important;
}
body.kia-page-requests #main-content [aria-live="polite"],
.kia-requests-page-container #main-content [aria-live="polite"] {
width: 100% !important;
max-width: 100% !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch;
}
body.kia-page-requests #main-content [data-garden-id="tables.table"],
body.kia-page-requests #main-content table,
.kia-requests-page-container #main-content [data-garden-id="tables.table"],
.kia-requests-page-container #main-content table {
width: 100% !important;
min-width: 720px !important;
border-collapse: collapse !important;
background-color: transparent !important;
}
body.kia-page-requests #main-content [data-garden-id="tables.head"],
body.kia-page-requests #main-content [data-garden-id="tables.header_row"],
body.kia-page-requests #main-content thead tr,
.kia-requests-page-container #main-content [data-garden-id="tables.head"],
.kia-requests-page-container #main-content [data-garden-id="tables.header_row"],
.kia-requests-page-container #main-content thead tr {
background-color: #0F2334 !important;
border-top: 1px solid rgba(56, 189, 248, 0.22) !important;
border-bottom: 1px solid rgba(56, 189, 248, 0.22) !important;
}
body.kia-page-requests #main-content [data-garden-id="tables.header_cell"],
body.kia-page-requests #main-content thead th,
.kia-requests-page-container #main-content [data-garden-id="tables.header_cell"],
.kia-requests-page-container #main-content thead th {
background-color: #0F2334 !important;
color: #CBD5E1 !important;
font-size: 13px !important;
font-weight: 700 !important;
padding: 13px 16px !important;
border: none !important;
vertical-align: middle !important;
}
body.kia-page-requests #main-content [data-garden-id="tables.header_cell"] [data-garden-id="typography.ellipsis"],
body.kia-page-requests #main-content [data-garden-id="tables.sortable"],
body.kia-page-requests #main-content [data-garden-id="tables.sortable"] [data-garden-id="typography.ellipsis"],
.kia-requests-page-container #main-content [data-garden-id="tables.header_cell"] [data-garden-id="typography.ellipsis"],
.kia-requests-page-container #main-content [data-garden-id="tables.sortable"],
.kia-requests-page-container #main-content [data-garden-id="tables.sortable"] [data-garden-id="typography.ellipsis"] {
color: #CBD5E1 !important;
font-size: 13px !important;
font-weight: 700 !important;
text-decoration: none !important;
}
body.kia-page-requests #main-content [data-garden-id="tables.sortable"] svg,
.kia-requests-page-container #main-content [data-garden-id="tables.sortable"] svg {
color: #38BDF8 !important;
}
body.kia-page-requests #main-content [data-garden-id="tables.sortable"]:hover,
body.kia-page-requests #main-content [data-garden-id="tables.sortable"]:hover [data-garden-id="typography.ellipsis"],
.kia-requests-page-container #main-content [data-garden-id="tables.sortable"]:hover,
.kia-requests-page-container #main-content [data-garden-id="tables.sortable"]:hover [data-garden-id="typography.ellipsis"] {
color: #38BDF8 !important;
}
body.kia-page-requests #main-content [data-garden-id="tables.overflow_button"],
.kia-requests-page-container #main-content [data-garden-id="tables.overflow_button"] {
background-color: transparent !important;
border: 1px solid transparent !important;
border-radius: 6px !important;
color: #94A3B8 !important;
width: 32px !important;
height: 32px !important;
min-height: 32px !important;
padding: 0 !important;
}
body.kia-page-requests #main-content [data-garden-id="tables.overflow_button"] svg,
.kia-requests-page-container #main-content [data-garden-id="tables.overflow_button"] svg {
color: #94A3B8 !important;
fill: currentColor !important;
}
body.kia-page-requests #main-content [data-garden-id="tables.overflow_button"]:hover,
body.kia-page-requests #main-content [data-garden-id="tables.overflow_button"]:hover svg,
.kia-requests-page-container #main-content [data-garden-id="tables.overflow_button"]:hover,
.kia-requests-page-container #main-content [data-garden-id="tables.overflow_button"]:hover svg {
background-color: rgba(56, 189, 248, 0.12) !important;
color: #38BDF8 !important;
}
body.kia-page-requests #main-content [data-garden-id="tables.body"],
body.kia-page-requests #main-content [data-garden-id="tables.row"],
body.kia-page-requests #main-content tbody tr,
.kia-requests-page-container #main-content [data-garden-id="tables.body"],
.kia-requests-page-container #main-content [data-garden-id="tables.row"],
.kia-requests-page-container #main-content tbody tr {
background-color: transparent !important;
border-bottom: 1px solid rgba(148, 163, 184, 0.15) !important;
transition: background-color 0.15s ease;
}
body.kia-page-requests #main-content [data-garden-id="tables.row"]:hover,
body.kia-page-requests #main-content tbody tr:hover,
.kia-requests-page-container #main-content [data-garden-id="tables.row"]:hover,
.kia-requests-page-container #main-content tbody tr:hover {
background-color: rgba(56, 189, 248, 0.06) !important;
}
body.kia-page-requests #main-content [data-garden-id="tables.cell"],
body.kia-page-requests #main-content tbody td,
.kia-requests-page-container #main-content [data-garden-id="tables.cell"],
.kia-requests-page-container #main-content tbody td {
color: #CBD5E1 !important;
font-size: 13.5px !important;
padding: 16px !important;
border-top: none !important;
border-bottom: 1px solid rgba(148, 163, 184, 0.15) !important;
background-color: transparent !important;
vertical-align: middle !important;
}
body.kia-page-requests #main-content [data-garden-id="tables.cell"] [data-garden-id="typography.ellipsis"],
.kia-requests-page-container #main-content [data-garden-id="tables.cell"] [data-garden-id="typography.ellipsis"] {
color: #CBD5E1 !important;
}
body.kia-page-requests #main-content [data-garden-id="buttons.anchor"],
body.kia-page-requests #main-content [data-garden-id="buttons.anchor"] [data-garden-id="typography.ellipsis"],
body.kia-page-requests #main-content tbody td a,
.kia-requests-page-container #main-content [data-garden-id="buttons.anchor"],
.kia-requests-page-container #main-content [data-garden-id="buttons.anchor"] [data-garden-id="typography.ellipsis"],
.kia-requests-page-container #main-content tbody td a {
color: #38BDF8 !important;
font-weight: 600 !important;
text-decoration: none !important;
}
body.kia-page-requests #main-content [data-garden-id="buttons.anchor"]:hover,
body.kia-page-requests #main-content [data-garden-id="buttons.anchor"]:hover [data-garden-id="typography.ellipsis"],
body.kia-page-requests #main-content tbody td a:hover,
.kia-requests-page-container #main-content [data-garden-id="buttons.anchor"]:hover,
.kia-requests-page-container #main-content [data-garden-id="buttons.anchor"]:hover [data-garden-id="typography.ellipsis"],
.kia-requests-page-container #main-content tbody td a:hover {
color: #7DD3FC !important;
text-decoration: underline !important;
}
body.kia-page-requests #main-content [data-garden-id="tags.tag_view"]:not([data-kia-probing]),
.kia-requests-page-container #main-content [data-garden-id="tags.tag_view"]:not([data-kia-probing]) {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 2px 10px !important;
height: 24px !important;
max-width: none !important;
white-space: nowrap !important;
border-radius: 6px !important;
font-size: 12px !important;
font-weight: 600 !important;
background-color: rgba(148, 163, 184, 0.16) !important;
color: #CBD5E1 !important;
border: 1px solid rgba(148, 163, 184, 0.35) !important;
box-shadow: none !important;
}
body.kia-page-requests #main-content [data-garden-id="tags.tag_view"] [data-garden-id="typography.ellipsis"],
.kia-requests-page-container #main-content [data-garden-id="tags.tag_view"] [data-garden-id="typography.ellipsis"] {
color: inherit !important;
font-weight: 600 !important;
overflow: visible !important;
text-overflow: clip !important;
white-space: nowrap !important;
}
body.kia-page-requests #main-content [data-garden-id="tags.tag_view"][data-kia-status="open"],
.kia-requests-page-container #main-content [data-garden-id="tags.tag_view"][data-kia-status="open"] {
background-color: rgba(56, 189, 248, 0.14) !important;
color: #38BDF8 !important;
border: 1px solid rgba(56, 189, 248, 0.38) !important;
}
body.kia-page-requests #main-content [data-garden-id="tags.tag_view"][data-kia-status="pending"],
.kia-requests-page-container #main-content [data-garden-id="tags.tag_view"][data-kia-status="pending"] {
background-color: rgba(16, 185, 129, 0.14) !important;
color: #34D399 !important;
border: 1px solid rgba(16, 185, 129, 0.38) !important;
}
body.kia-page-requests #main-content [aria-hidden="true"]:has(> [data-garden-id="tooltip.tooltip"]),
.kia-requests-page-container #main-content [aria-hidden="true"]:has(> [data-garden-id="tooltip.tooltip"]),
body.kia-page-requests #main-content [data-garden-id="dropdowns.menu.floating"]:has(> ul:empty),
.kia-requests-page-container #main-content [data-garden-id="dropdowns.menu.floating"]:has(> ul:empty) {
display: none !important;
}
body.kia-page-requests [data-garden-id="dropdowns.menu"],
body.kia-page-requests [data-garden-id*="modals"],
body.kia-page-requests [role="menu"][data-garden-id],
body.kia-page-requests [role="dialog"][data-garden-id],
.kia-requests-page-container [data-garden-id="dropdowns.menu"] {
background-color: #0F2334 !important;
color: #F8FAFC !important;
border: 1px solid rgba(56, 189, 248, 0.35) !important;
border-radius: 10px !important;
box-shadow: 0 16px 36px rgba(0, 0, 0, 0.65) !important;
}
body.kia-page-requests [data-garden-id="dropdowns.menu"] li,
body.kia-page-requests [data-garden-id="dropdowns.menu"] [role="menuitem"],
body.kia-page-requests [data-garden-id="dropdowns.menu"] [role="menuitemcheckbox"],
body.kia-page-requests [data-garden-id="dropdowns.menu"] [role="option"],
.kia-requests-page-container [data-garden-id="dropdowns.menu"] li,
.kia-requests-page-container [data-garden-id="dropdowns.menu"] [role="menuitem"],
.kia-requests-page-container [data-garden-id="dropdowns.menu"] [role="menuitemcheckbox"] {
background-color: transparent !important;
color: #E2E8F0 !important;
}
body.kia-page-requests [data-garden-id="dropdowns.menu"] li:hover,
body.kia-page-requests [data-garden-id="dropdowns.menu"] [role="menuitem"]:hover,
body.kia-page-requests [data-garden-id="dropdowns.menu"] [role="menuitemcheckbox"]:hover,
body.kia-page-requests [data-garden-id="dropdowns.menu"] [aria-selected="true"],
.kia-requests-page-container [data-garden-id="dropdowns.menu"] li:hover {
background-color: rgba(56, 189, 248, 0.14) !important;
color: #38BDF8 !important;
}
body.kia-page-requests [data-garden-id="tooltip.tooltip"],
.kia-requests-page-container [data-garden-id="tooltip.tooltip"] {
background-color: #0B1927 !important;
color: #F8FAFC !important;
border: 1px solid rgba(56, 189, 248, 0.35) !important;
}
@media (max-width: 1024px) {
body.kia-page-requests #main-content [data-garden-id="forms.faux_input"],
.kia-requests-page-container #main-content [data-garden-id="forms.faux_input"] {
min-height: 46px !important;
}
body.kia-page-requests #main-content [data-garden-id="buttons.button"]:not([data-garden-id="tables.overflow_button"]),
.kia-requests-page-container #main-content [data-garden-id="buttons.button"]:not([data-garden-id="tables.overflow_button"]) {
min-height: 46px !important;
}
}
@media (max-width: 767px) {
body.kia-page-requests .kia-requests-page-container,
.kia-requests-page-container {
padding-top: 20px;
padding-bottom: 56px;
}
body.kia-page-requests .my-activities-header h1,
.kia-requests-page-container .my-activities-header h1 {
font-size: 24px !important;
}
body.kia-page-requests #main-content [data-garden-id="tables.header_cell"],
body.kia-page-requests #main-content [data-garden-id="tables.cell"],
.kia-requests-page-container #main-content [data-garden-id="tables.header_cell"],
.kia-requests-page-container #main-content [data-garden-id="tables.cell"] {
padding: 12px 10px !important;
font-size: 13px !important;
}
}
#kia-global-app-rail {
display: none;
}
@media (min-width: 1025px) {
body > main,
main[role="main"],
main#main-content,
footer.kia-footer-split,
.footer,
#emergency-alert-bar {
padding-left: 88px !important;
box-sizing: border-box !important;
transition: padding-left 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (min-width: 1560px) {
body.kia-rail-pinned > main,
body.kia-rail-pinned main[role="main"],
body.kia-rail-pinned main#main-content,
body.kia-rail-pinned footer.kia-footer-split,
body.kia-rail-pinned .footer,
body.kia-rail-pinned #emergency-alert-bar {
padding-left: 328px !important;
}
}
#kia-global-app-rail {
position: fixed !important;
top: var(--kia-header-bottom, 76px) !important;
left: 0 !important;
bottom: 0 !important;
width: 88px !important;
z-index: 9985 !important;
background: #0B111C !important;
backdrop-filter: blur(18px) !important;
-webkit-backdrop-filter: blur(18px) !important;
border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
transition: width 0.24s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.24s cubic-bezier(0.22, 1, 0.36, 1),
border-color 0.24s ease !important;
}
#kia-global-app-rail.is-pinned {
width: 328px !important;
background: rgba(11, 16, 25, 0.96) !important;
border-right-color: rgba(56, 189, 248, 0.28) !important;
box-shadow: 18px 0 44px rgba(0, 0, 0, 0.72) !important;
}
.kia-rail-top-bar {
height: 64px !important;
min-height: 64px !important;
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
padding: 0 14px 0 18px !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
white-space: nowrap !important;
}
.kia-rail-group-label {
font-size: 10.5px !important;
font-weight: 800 !important;
letter-spacing: 0.9px !important;
text-transform: uppercase !important;
color: #64748B !important;
opacity: 0 !important;
transform: translateX(-6px) !important;
transition: opacity 0.18s ease, transform 0.18s ease !important;
pointer-events: none !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
#kia-global-app-rail.is-pinned .kia-rail-group-label {
opacity: 1 !important;
transform: translateX(0) !important;
}
.kia-rail-pin-btn {
width: 48px !important;
height: 48px !important;
min-width: 48px !important;
min-height: 48px !important;
border-radius: 14px !important;
border: none !important;
background: rgba(56, 189, 248, 0.12) !important;
color: #38BDF8 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
opacity: 1 !important;
pointer-events: auto !important;
transition: all 0.18s ease !important;
flex-shrink: 0 !important;
padding: 0 !important;
}
.kia-rail-pin-btn:hover {
color: #7DD3FC !important;
background: rgba(56, 189, 248, 0.2) !important;
}
#kia-global-app-rail.is-pinned .kia-rail-pin-btn {
color: #38BDF8 !important;
border: 1px solid rgba(56, 189, 248, 0.45) !important;
background: rgba(56, 189, 248, 0.18) !important;
}
.kia-rail-scroll-area {
flex: 1 1 auto !important;
overflow-y: auto !important;
overflow-x: hidden !important;
padding: 8px 0 !important;
scrollbar-width: thin !important;
}
.kia-rail-nav-list {
list-style: none !important;
margin: 0 !important;
padding: 4px 10px !important;
display: flex !important;
flex-direction: column !important;
gap: 4px !important;
}
.kia-rail-nav-link {
display: flex !important;
align-items: center !important;
gap: 13px !important;
height: 44px !important;
padding: 0 9px !important;
border-radius: 10px !important;
color: #CBD5E1 !important;
text-decoration: none !important;
white-space: nowrap !important;
position: relative !important;
border: 1px solid transparent !important;
transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease !important;
}
.kia-rail-nav-link:hover {
background: rgba(255, 255, 255, 0.06) !important;
color: #F8FAFC !important;
text-decoration: none !important;
}
.kia-rail-nav-link.is-active {
background: rgba(56, 189, 248, 0.12) !important;
color: #38BDF8 !important;
border-color: rgba(56, 189, 248, 0.28) !important;
}
.kia-rail-nav-link.is-active::before {
content: "" !important;
position: absolute !important;
left: -10px !important;
top: 10px !important;
bottom: 10px !important;
width: 3px !important;
border-radius: 0 3px 3px 0 !important;
background: #38BDF8 !important;
box-shadow: 0 0 8px rgba(56, 189, 248, 0.7) !important;
}
.kia-rail-icon {
width: 26px !important;
height: 26px !important;
min-width: 26px !important;
border-radius: 7px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
color: inherit !important;
flex-shrink: 0 !important;
}
.kia-rail-icon.ext-icon {
background: rgba(56, 189, 248, 0.1) !important;
color: #38BDF8 !important;
border: 1px solid rgba(56, 189, 248, 0.22) !important;
}
.kia-rail-text {
display: flex !important;
flex-direction: column !important;
min-width: 0 !important;
flex: 1 1 auto !important;
opacity: 0 !important;
transform: translateX(-6px) !important;
transition: opacity 0.18s ease, transform 0.18s ease !important;
}
#kia-global-app-rail.is-pinned .kia-rail-text {
opacity: 1 !important;
transform: translateX(0) !important;
}
.kia-rail-title {
font-size: 13px !important;
font-weight: 700 !important;
color: #F8FAFC !important;
line-height: 1.25 !important;
display: flex !important;
align-items: center !important;
gap: 6px !important;
min-width: 0 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.kia-rail-title > span {
min-width: 0 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
.kia-rail-nav-link.is-active .kia-rail-title {
color: #38BDF8 !important;
}
.kia-rail-sub {
font-size: 11px !important;
color: #64748B !important;
line-height: 1.25 !important;
margin-top: 2px !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.kia-rail-badge {
font-size: 9.5px !important;
font-weight: 800 !important;
padding: 1px 5px !important;
border-radius: 4px !important;
letter-spacing: 0.3px !important;
flex-shrink: 0 !important;
}
.kia-rail-badge.custom {
background: rgba(56, 189, 248, 0.15) !important;
color: #38BDF8 !important;
border: 1px solid rgba(56, 189, 248, 0.3) !important;
}
.kia-rail-badge.ext {
background: rgba(16, 185, 129, 0.14) !important;
color: #34D399 !important;
border: 1px solid rgba(16, 185, 129, 0.3) !important;
}
.kia-rail-ext-arrow {
color: #64748B !important;
flex-shrink: 0 !important;
opacity: 0 !important;
transition: opacity 0.18s ease, transform 0.18s ease, color 0.18s ease !important;
}
#kia-global-app-rail.is-pinned .kia-rail-ext-arrow {
opacity: 1 !important;
}
.kia-rail-ext-link:hover .kia-rail-ext-arrow {
color: #38BDF8 !important;
transform: translate(2px, -2px) !important;
}
.kia-rail-divider {
height: 1px !important;
background: rgba(255, 255, 255, 0.07) !important;
margin: 8px 14px !important;
}
.kia-rail-section-head {
padding: 4px 18px 2px !important;
min-height: 20px !important;
display: flex !important;
align-items: center !important;
}
.kia-rail-footer {
margin-top: auto !important;
padding: 12px 18px !important;
border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
display: flex !important;
align-items: center !important;
gap: 10px !important;
white-space: nowrap !important;
overflow: hidden !important;
}
.kia-rail-footer-dot {
width: 8px !important;
height: 8px !important;
min-width: 8px !important;
border-radius: 50% !important;
background: #10B981 !important;
box-shadow: 0 0 8px rgba(16, 185, 129, 0.6) !important;
margin-left: 9px !important;
}
.kia-rail-footer-meta {
font-size: 11px !important;
color: #64748B !important;
opacity: 0 !important;
transition: opacity 0.18s ease !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
#kia-global-app-rail.is-pinned .kia-rail-footer-meta {
opacity: 1 !important;
}
}
html body .request-details dt[style*="display: none"],
html body .request-details dd[style*="display: none"],
html body .request-details dt.kia-cf-hidden,
html body .request-details dd.kia-cf-hidden {
display: none !important;
}
.git-privacy-terms-box {
margin: 22px 0 14px 0;
border-radius: 12px;
overflow: hidden;
border: 1px solid #cbd5e1;
background: #f8fafc;
color: #0f172a;
box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans KR", sans-serif;
}
.git-privacy-terms-box.is-kia-dark {
border-color: rgba(56, 189, 248, 0.32);
background: rgba(15, 23, 42, 0.88);
color: #f8fafc;
box-shadow: 0 8px 24px rgba(2, 6, 23, 0.42);
}
html[data-illumination="sunlight"] .git-privacy-terms-box.is-kia-dark,
body[data-illumination="sunlight"] .git-privacy-terms-box.is-kia-dark {
border-color: #cbd5e1;
background: #f8fafc;
color: #0f172a;
box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
}
.git-terms-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 18px;
border-bottom: 1px solid rgba(148, 163, 184, 0.25);
background: rgba(15, 23, 42, 0.03);
flex-wrap: wrap;
}
.git-privacy-terms-box.is-kia-dark .git-terms-header {
background: rgba(30, 41, 59, 0.75);
border-bottom-color: rgba(56, 189, 248, 0.2);
}
html[data-illumination="sunlight"] .git-privacy-terms-box.is-kia-dark .git-terms-header,
body[data-illumination="sunlight"] .git-privacy-terms-box.is-kia-dark .git-terms-header {
background: rgba(15, 23, 42, 0.03);
border-bottom-color: rgba(148, 163, 184, 0.25);
}
.git-terms-header-left {
display: flex;
align-items: center;
gap: 12px;
}
.git-terms-shield-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 8px;
background: rgba(2, 132, 199, 0.12);
color: #0284c7;
flex-shrink: 0;
}
.git-privacy-terms-box.is-kia-dark .git-terms-shield-icon {
background: rgba(56, 189, 248, 0.16);
color: #38bdf8;
}
.git-terms-badge {
display: inline-block;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #0284c7;
margin-bottom: 2px;
}
.git-privacy-terms-box.is-kia-dark .git-terms-badge {
color: #38bdf8;
}
.git-terms-title {
margin: 0;
font-size: 14.5px;
font-weight: 700;
line-height: 1.35;
color: inherit;
}
.git-terms-full-link {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 12.5px;
font-weight: 600;
color: #0284c7 !important;
text-decoration: none;
padding: 6px 10px;
border-radius: 6px;
border: 1px solid rgba(2, 132, 199, 0.3);
background: rgba(2, 132, 199, 0.06);
transition: all 0.15s ease;
}
.git-privacy-terms-box.is-kia-dark .git-terms-full-link {
color: #38bdf8 !important;
border-color: rgba(56, 189, 248, 0.35);
background: rgba(56, 189, 248, 0.1);
}
.git-terms-full-link:hover {
text-decoration: underline;
opacity: 0.92;
}
.git-terms-scroll-area {
max-height: 220px;
overflow-y: auto;
padding: 14px 18px;
font-size: 13px;
line-height: 1.62;
background: rgba(255, 255, 255, 0.7);
}
.git-privacy-terms-box.is-kia-dark .git-terms-scroll-area {
background: rgba(15, 23, 42, 0.55);
color: #e2e8f0;
}
html[data-illumination="sunlight"] .git-privacy-terms-box.is-kia-dark .git-terms-scroll-area,
body[data-illumination="sunlight"] .git-privacy-terms-box.is-kia-dark .git-terms-scroll-area {
background: #ffffff;
color: #1e293b;
}
.git-terms-intro {
margin: 0 0 12px 0;
font-weight: 500;
}
.git-terms-clause {
margin-bottom: 12px;
padding-bottom: 10px;
border-bottom: 1px dashed rgba(148, 163, 184, 0.25);
}
.git-terms-clause:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}
.git-terms-clause-title {
margin: 0 0 4px 0;
font-size: 13px;
font-weight: 700;
color: #0284c7;
}
.git-privacy-terms-box.is-kia-dark .git-terms-clause-title {
color: #38bdf8;
}
.git-terms-clause-lead {
margin: 0 0 6px 0;
}
.git-terms-clause-list {
margin: 4px 0 0 18px !important;
padding: 0 !important;
list-style: disc !important;
}
.git-terms-clause-list li {
margin-bottom: 4px;
list-style: disc !important;
}
.git-terms-footer-note {
padding: 10px 18px;
font-size: 12px;
border-top: 1px solid rgba(148, 163, 184, 0.22);
background: rgba(15, 23, 42, 0.02);
color: #475569;
}
.git-privacy-terms-box.is-kia-dark .git-terms-footer-note {
background: rgba(15, 23, 42, 0.8);
color: #94a3b8;
border-top-color: rgba(56, 189, 248, 0.16);
}
html[data-illumination="sunlight"] .git-privacy-terms-box.is-kia-dark .git-terms-footer-note,
body[data-illumination="sunlight"] .git-privacy-terms-box.is-kia-dark .git-terms-footer-note {
background: rgba(15, 23, 42, 0.02);
color: #475569;
}
.git-terms-required-error {
padding: 10px 18px;
background: rgba(239, 68, 68, 0.14);
border-top: 1px solid rgba(239, 68, 68, 0.4);
color: #dc2626;
font-size: 12.5px;
font-weight: 700;
}
.git-privacy-terms-box.is-kia-dark .git-terms-required-error {
color: #fca5a5;
}
.git-privacy-checkbox-field {
padding: 12px 16px !important;
border-radius: 10px !important;
border: 1.5px solid rgba(2, 132, 199, 0.45) !important;
background: rgba(2, 132, 199, 0.06) !important;
margin-top: 8px !important;
margin-bottom: 20px !important;
}
.git-cookie-banner {
position: fixed;
left: 16px;
right: 16px;
bottom: 16px;
z-index: 2147483000 !important;
max-width: 1120px;
margin: 0 auto;
border-radius: 14px;
padding: 16px 20px;
background: rgba(255, 255, 255, 0.97);
color: #0f172a;
border: 1px solid #cbd5e1;
box-shadow: 0 14px 36px rgba(15, 23, 42, 0.18);
backdrop-filter: blur(12px);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans KR", sans-serif;
}
.git-cookie-banner.is-kia-dark {
background: rgba(11, 25, 39, 0.96);
color: #f8fafc;
border-color: rgba(56, 189, 248, 0.35);
box-shadow: 0 16px 42px rgba(2, 6, 23, 0.65);
}
.git-cookie-banner[hidden] {
display: none !important;
}
.git-cookie-banner-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
flex-wrap: wrap;
}
.git-cookie-banner-copy {
flex: 1 1 460px;
min-width: 260px;
}
.git-cookie-banner-title-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 4px;
color: #0284c7;
}
.git-cookie-banner.is-kia-dark .git-cookie-banner-title-row {
color: #38bdf8;
}
.git-cookie-banner-title {
font-size: 14px;
font-weight: 700;
color: #0f172a;
}
.git-cookie-banner.is-kia-dark .git-cookie-banner-title {
color: #f8fafc;
}
.git-cookie-banner-desc {
margin: 0;
font-size: 12.5px;
line-height: 1.5;
color: #475569;
}
.git-cookie-banner.is-kia-dark .git-cookie-banner-desc {
color: #cbd5e1;
}
.git-cookie-banner-link {
color: #0284c7 !important;
font-weight: 600;
text-decoration: underline;
}
.git-cookie-banner.is-kia-dark .git-cookie-banner-link,
.git-cookie-drawer.is-kia-dark .git-cookie-banner-link {
color: #38bdf8 !important;
}
.git-cookie-banner-actions {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.git-cookie-btn.git-cookie-btn-equal {
min-height: 40px;
padding: 8px 16px;
font-size: 13px;
font-weight: 600;
line-height: 1.2;
border-radius: 8px;
border: 1.5px solid #64748b;
background: transparent;
color: #0f172a;
cursor: pointer;
transition: all 0.15s ease;
white-space: nowrap;
}
.git-cookie-banner.is-kia-dark .git-cookie-btn.git-cookie-btn-equal,
.git-cookie-drawer.is-kia-dark .git-cookie-btn.git-cookie-btn-equal {
border-color: rgba(148, 163, 184, 0.55);
color: #f8fafc;
background: rgba(30, 41, 59, 0.7);
}
.git-cookie-btn.git-cookie-btn-equal.git-cookie-btn-primary {
border-color: #0284c7;
background: #0284c7;
color: #ffffff !important;
}
.git-cookie-btn.git-cookie-btn-equal:hover {
opacity: 0.9;
transform: translateY(-1px);
}
.git-cookie-drawer-backdrop {
position: fixed;
inset: 0;
z-index: 2147483001 !important;
background: rgba(2, 6, 23, 0.6);
backdrop-filter: blur(3px);
}
.git-cookie-drawer-backdrop[hidden],
.git-cookie-drawer[hidden] {
display: none !important;
}
.git-cookie-drawer {
position: fixed;
top: 0;
right: 0;
bottom: 0;
z-index: 2147483002 !important;
width: 100%;
max-width: 460px;
background: #ffffff;
color: #0f172a;
box-shadow: -12px 0 36px rgba(15, 23, 42, 0.25);
display: flex;
flex-direction: column;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans KR", sans-serif;
}
.git-cookie-drawer.is-kia-dark {
background: #0b1927;
color: #f8fafc;
border-left: 1px solid rgba(56, 189, 248, 0.28);
}
.git-cookie-drawer-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
padding: 20px 22px 16px;
border-bottom: 1px solid rgba(148, 163, 184, 0.22);
}
.git-cookie-drawer-eyebrow {
display: block;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.08em;
color: #0284c7;
margin-bottom: 4px;
}
.git-cookie-drawer.is-kia-dark .git-cookie-drawer-eyebrow {
color: #38bdf8;
}
.git-cookie-drawer-title {
margin: 0;
font-size: 18px;
font-weight: 700;
color: inherit;
}
.git-cookie-drawer-close {
background: transparent;
border: 1px solid rgba(148, 163, 184, 0.35);
border-radius: 8px;
width: 34px;
height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
color: inherit;
cursor: pointer;
}
.git-cookie-drawer-body {
flex: 1;
overflow-y: auto;
padding: 18px 22px;
}
.git-cookie-drawer-subtitle {
margin: 0 0 16px 0;
font-size: 13px;
line-height: 1.55;
color: #475569;
}
.git-cookie-drawer.is-kia-dark .git-cookie-drawer-subtitle {
color: #cbd5e1;
}
.git-cookie-cat-card {
border: 1px solid rgba(148, 163, 184, 0.28);
border-radius: 10px;
padding: 14px 16px;
margin-bottom: 12px;
background: rgba(15, 23, 42, 0.02);
}
.git-cookie-drawer.is-kia-dark .git-cookie-cat-card {
background: rgba(30, 41, 59, 0.55);
border-color: rgba(56, 189, 248, 0.2);
}
.git-cookie-cat-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 6px;
font-size: 13.5px;
}
.git-cookie-always-badge {
font-size: 11px;
font-weight: 700;
padding: 3px 8px;
border-radius: 999px;
background: rgba(16, 185, 129, 0.14);
color: #059669;
}
.git-cookie-drawer.is-kia-dark .git-cookie-always-badge {
color: #34d399;
}
.git-cookie-cat-desc {
margin: 0 0 8px 0;
font-size: 12.5px;
line-height: 1.5;
color: #475569;
}
.git-cookie-drawer.is-kia-dark .git-cookie-cat-desc {
color: #cbd5e1;
}
.git-cookie-cat-keys {
display: block;
font-size: 11px;
padding: 5px 8px;
border-radius: 6px;
background: rgba(15, 23, 42, 0.05);
color: #64748b;
word-break: break-all;
}
.git-cookie-drawer.is-kia-dark .git-cookie-cat-keys {
background: rgba(15, 23, 42, 0.65);
color: #94a3b8;
}
.git-cookie-switch {
position: relative;
display: inline-block;
width: 44px;
height: 24px;
flex-shrink: 0;
}
.git-cookie-switch input {
opacity: 0;
width: 0;
height: 0;
}
.git-cookie-slider {
position: absolute;
cursor: pointer;
inset: 0;
background-color: #94a3b8;
transition: 0.2s;
border-radius: 24px;
}
.git-cookie-slider:before {
position: absolute;
content: "";
height: 18px;
width: 18px;
left: 3px;
bottom: 3px;
background-color: #ffffff;
transition: 0.2s;
border-radius: 50%;
}
.git-cookie-switch input:checked + .git-cookie-slider {
background-color: #0284c7;
}
.git-cookie-switch input:checked + .git-cookie-slider:before {
transform: translateX(20px);
}
.git-cookie-drawer-footer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
padding: 14px 22px;
border-top: 1px solid rgba(148, 163, 184, 0.22);
flex-wrap: wrap;
}
.footer-legal-links {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 12.5px;
margin-left: 14px;
}
.footer-legal-link {
color: inherit;
opacity: 0.85;
text-decoration: none;
}
.footer-legal-link:hover {
opacity: 1;
text-decoration: underline;
}
.footer-legal-sep {
opacity: 0.4;
}
@media (max-width: 767px) {
.git-cookie-banner {
left: 10px;
right: 10px;
bottom: 74px;
padding: 14px;
}
.git-cookie-banner-actions {
width: 100%;
justify-content: stretch;
}
.git-cookie-banner-actions .git-cookie-btn {
flex: 1 1 auto;
text-align: center;
}
}
body.kia-cookie-drawer-open iframe#launcher,
body.kia-cookie-drawer-open iframe[title="메시지"],
body.kia-cookie-drawer-open div:has(> iframe[title*="메시지"]),
body.kia-cookie-drawer-open div:has(> iframe[title*="message" i]),
body.kia-cookie-drawer-open .git-ai-chips-container {
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
transition: opacity 0.2s ease, visibility 0.2s ease !important;
}
body.kia-cookie-banner-visible:not(.kia-cookie-drawer-open) iframe#launcher,
body.kia-cookie-banner-visible:not(.kia-cookie-drawer-open) iframe[title="메시지"],
body.kia-cookie-banner-visible:not(.kia-cookie-drawer-open) div:has(> iframe[title*="메시지"]),
body.kia-cookie-banner-visible:not(.kia-cookie-drawer-open) div:has(> iframe[title*="message" i]),
body.kia-cookie-banner-visible:not(.kia-cookie-drawer-open) .git-ai-chips-container.is-visible {
transform: translateY(var(--git-cookie-banner-offset, -136px)) !important;
transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease !important;
}
@media (max-width: 1024px) {
html body #tablet-toc-fab,
html body .tablet-toc-fab {
display: none !important;
visibility: hidden !important;
pointer-events: none !important;
}
html body .kia-mobile-sticky-dock.has-dock-toc .dock-text-group {
display: none !important;
}
html body .kia-mobile-sticky-dock.has-dock-toc .dock-content-wrap {
justify-content: space-between !important;
gap: 10px !important;
}
html body .kia-mobile-sticky-dock .dock-toc-btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
min-height: 48px !important;
height: 48px !important;
padding: 0 14px !important;
border-radius: 12px !important;
background: transparent !important;
border: 1px solid rgba(255, 255, 255, 0.18) !important;
color: #E2E8F0 !important;
font-size: 13px !important;
font-weight: 700 !important;
cursor: pointer !important;
white-space: nowrap !important;
flex-shrink: 0 !important;
transition: all 0.2s ease !important;
}
html body .kia-mobile-sticky-dock .dock-toc-btn .dock-toc-title {
color: #E2E8F0 !important;
font-size: 13px !important;
font-weight: 700 !important;
}
html body .kia-mobile-sticky-dock .dock-toc-btn .dock-toc-count {
color: #94A3B8 !important;
font-size: 12px !important;
font-weight: 600 !important;
}
html body .kia-mobile-sticky-dock .dock-toc-btn .dock-toc-chevron {
color: #94A3B8 !important;
margin-left: 2px !important;
transition: transform 0.2s ease !important;
}
html body .kia-mobile-sticky-dock .dock-toc-btn.is-active .dock-toc-chevron,
html body .kia-mobile-sticky-dock .dock-toc-btn[aria-expanded="true"] .dock-toc-chevron {
transform: rotate(180deg) !important;
}
html body .kia-mobile-sticky-dock .dock-toc-btn.is-active,
html body .kia-mobile-sticky-dock .dock-toc-btn:active {
background: rgba(56, 189, 248, 0.14) !important;
border-color: rgba(56, 189, 248, 0.5) !important;
color: #FFFFFF !important;
}
html body #kia-dock-chat-callout {
bottom: calc(100% + 12px) !important;
}
}
@media (min-width: 1025px) {
html body .kia-mobile-sticky-dock .dock-toc-btn {
display: none !important;
}
}
html body #category-bottom-sheet-backdrop,
html body .category-bottom-sheet-backdrop {
z-index: 9998 !important;
}
html body #category-bottom-sheet,
html body .category-bottom-sheet {
z-index: 9999 !important;
}
html body #git-ai-chips-container.git-ai-chips-inline-card {
position: static !important;
right: auto !important;
bottom: auto !important;
left: auto !important;
top: auto !important;
transform: none !important;
width: 100% !important;
max-width: 100% !important;
margin: 12px 0 20px 0 !important;
padding: 12px 14px !important;
border-radius: 12px !important;
background: rgba(11, 25, 39, 0.75) !important;
border: 1px solid rgba(255, 255, 255, 0.07) !important;
box-shadow: none !important;
z-index: 1 !important;
box-sizing: border-box !important;
}
html body #git-ai-chips-container.git-ai-chips-inline-card.is-hidden {
display: none !important;
}
html body #git-ai-chips-container.git-ai-chips-inline-card.is-visible {
display: block !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
transform: none !important;
}
html body #git-ai-chips-container.git-ai-chips-inline-card .git-ai-chips-header {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
margin-bottom: 10px !important;
padding-bottom: 0 !important;
border-bottom: none !important;
}
html body #git-ai-chips-container.git-ai-chips-inline-card.is-collapsed .git-ai-chips-header {
margin-bottom: 0 !important;
}
html body #git-ai-chips-container.git-ai-chips-inline-card.is-collapsed .git-ai-chips-list {
display: none !important;
}
html body #git-ai-chips-container.git-ai-chips-inline-card .git-ai-chips-title {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
}
html body #git-ai-chips-container.git-ai-chips-inline-card .git-ai-chips-icon {
color: #38BDF8 !important;
stroke: #38BDF8 !important;
width: 16px !important;
height: 16px !important;
flex-shrink: 0 !important;
}
html body #git-ai-chips-container.git-ai-chips-inline-card .git-ai-chips-label {
color: #F8FAFC !important;
font-size: 13px !important;
font-weight: 700 !important;
line-height: 19.5px !important;
}
html body #git-ai-chips-container.git-ai-chips-inline-card .git-ai-chips-sub {
color: #64748B !important;
font-size: 11.5px !important;
font-weight: 500 !important;
line-height: 17.25px !important;
padding: 0 0 0 8px !important;
margin-left: 0 !important;
border-left: 1px solid rgba(148, 163, 184, 0.2) !important;
}
html body #git-ai-chips-container.git-ai-chips-inline-card #git-ai-chips-close-btn {
min-width: 44px !important;
min-height: 44px !important;
width: 44px !important;
height: 44px !important;
margin: -10px -8px -10px 0 !important;
border-radius: 8px !important;
background: transparent !important;
border: none !important;
color: #94A3B8 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
}
html body #git-ai-chips-container.git-ai-chips-inline-card .git-ai-chips-chevron {
transition: transform 0.2s ease !important;
}
html body #git-ai-chips-container.git-ai-chips-inline-card.is-collapsed .git-ai-chips-chevron {
transform: rotate(180deg) !important;
}
html body #git-ai-chips-container.git-ai-chips-inline-card .git-ai-chips-list {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 8px !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
}
@media (max-width: 767px) {
html body #git-ai-chips-container.git-ai-chips-inline-card .git-ai-chips-list {
grid-template-columns: 1fr !important;
}
}
html body #git-ai-chips-container.git-ai-chips-inline-card .git-ai-chip-btn {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 8px !important;
width: 100% !important;
min-width: 0 !important;
min-height: 39.75px !important;
height: auto !important;
padding: 10px 12px !important;
border-radius: 9px !important;
border: none !important;
background: rgba(255, 255, 255, 0.035) !important;
color: #E2E8F0 !important;
font-size: 12.5px !important;
font-weight: 600 !important;
line-height: 1.5 !important;
white-space: nowrap !important;
box-shadow: none !important;
transform: none !important;
box-sizing: border-box !important;
cursor: pointer !important;
transition: background 0.18s ease, box-shadow 0.18s ease, color 0.18s ease !important;
}
html body #git-ai-chips-container.git-ai-chips-inline-card .git-ai-chip-btn:hover,
html body #git-ai-chips-container.git-ai-chips-inline-card .git-ai-chip-btn:focus-visible,
html body #git-ai-chips-container.git-ai-chips-inline-card .git-ai-chip-btn.force-hover {
background: rgba(56, 189, 248, 0.11) !important;
box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.42) !important;
color: #FFFFFF !important;
border: none !important;
transform: none !important;
}
html body #git-ai-chips-container.git-ai-chips-inline-card .git-ai-chip-main {
display: flex !important;
align-items: center !important;
gap: 8px !important;
min-width: 0 !important;
flex: 1 1 auto !important;
overflow: hidden !important;
}
html body #git-ai-chips-container.git-ai-chips-inline-card .git-ai-chip-tag {
display: block !important;
font-size: 10.5px !important;
font-weight: 700 !important;
line-height: 15.75px !important;
color: #38BDF8 !important;
background: rgba(56, 189, 248, 0.12) !important;
padding: 2px 6px !important;
border-radius: 5px !important;
flex-shrink: 0 !important;
}
html body #git-ai-chips-container.git-ai-chips-inline-card .git-ai-chip-text {
flex: 1 1 auto !important;
min-width: 0 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
html body #git-ai-chips-container.git-ai-chips-inline-card .git-ai-chip-arrow {
display: inline-flex !important;
flex-shrink: 0 !important;
width: 14px !important;
height: 14px !important;
color: #64748B !important;
stroke: #64748B !important;
transform: none !important;
transition: color 0.18s ease, stroke 0.18s ease !important;
}
html body #git-ai-chips-container.git-ai-chips-inline-card .git-ai-chip-btn:hover .git-ai-chip-arrow,
html body #git-ai-chips-container.git-ai-chips-inline-card .git-ai-chip-btn:focus-visible .git-ai-chip-arrow,
html body #git-ai-chips-container.git-ai-chips-inline-card .git-ai-chip-btn.force-hover .git-ai-chip-arrow {
color: #38BDF8 !important;
stroke: #38BDF8 !important;
transform: none !important;
}
html body .c1-c3-fusion-wrap {
position: relative !important;
}
html body .btn-follow-c3-fusion {
display: inline-flex !important;
align-items: stretch !important;
height: 36px !important;
min-height: 36px !important;
max-height: 36px !important;
padding: 0 !important;
border-radius: 8px !important;
overflow: hidden !important;
border: 1px solid rgba(148, 163, 184, 0.26) !important;
background: #0B1927 !important;
color: #F8FAFC !important;
box-shadow: none !important;
transform: none !important;
box-sizing: border-box !important;
}
html body .btn-follow-c3-fusion[data-selected="true"],
html body .btn-follow-c3-fusion:has([data-selected="true"]),
html body .btn-follow-c3-fusion:has([aria-pressed="true"]) {
border-color: rgba(56, 189, 248, 0.45) !important;
box-shadow: none !important;
}
html body .btn-follow-c3-fusion .article-subscribe,
html body .btn-follow-c3-fusion .article-subscribe > div {
margin: 0 !important;
padding: 0 !important;
height: 100% !important;
display: inline-flex !important;
align-items: stretch !important;
}
html body .btn-follow-c3-fusion .article-subscribe button,
html body .btn-follow-c3-fusion [id^="follow-button"] {
display: inline-flex !important;
align-items: center !important;
justify-content: normal !important;
gap: 6px !important;
height: 100% !important;
min-height: 0 !important;
max-height: none !important;
padding: 0 14px !important;
border: none !important;
border-radius: 0 !important;
background: rgba(255, 255, 255, 0.04) !important;
color: #F8FAFC !important;
font-size: 12.5px !important;
font-weight: 700 !important;
box-shadow: none !important;
transform: none !important;
cursor: pointer !important;
transition: background 0.18s ease, color 0.18s ease !important;
}
html body .btn-follow-c3-fusion .article-subscribe button:hover,
html body .btn-follow-c3-fusion [id^="follow-button"]:hover {
background: rgba(56, 189, 248, 0.10) !important;
color: #FFFFFF !important;
border: none !important;
box-shadow: none !important;
transform: none !important;
}
html body .btn-follow-c3-fusion[data-selected="true"] .article-subscribe button,
html body .btn-follow-c3-fusion[data-selected="true"] [id^="follow-button"],
html body .btn-follow-c3-fusion .article-subscribe button[data-selected="true"],
html body .btn-follow-c3-fusion .article-subscribe button[aria-pressed="true"],
html body .btn-follow-c3-fusion [id^="follow-button"][data-selected="true"],
html body .btn-follow-c3-fusion [id^="follow-button"][aria-pressed="true"] {
background: rgba(56, 189, 248, 0.14) !important;
color: #38BDF8 !important;
border: none !important;
box-shadow: none !important;
transform: none !important;
}
html body .btn-follow-c3-fusion .c3-follow-bell-icon {
width: 13px !important;
height: 13px !important;
flex-shrink: 0 !important;
stroke: currentColor !important;
}
html body .btn-follow-c3-fusion .c3-count {
display: inline-flex !important;
align-items: center !important;
justify-content: normal !important;
gap: 5px !important;
height: 100% !important;
min-height: 0 !important;
max-height: none !important;
padding: 0 11px !important;
border-radius: 0 !important;
background: #081320 !important;
color: #94A3B8 !important;
font-size: 12px !important;
font-weight: 600 !important;
border-top: none !important;
border-right: none !important;
border-bottom: none !important;
border-left: 1px solid rgba(148, 163, 184, 0.18) !important;
box-shadow: none !important;
transform: none !important;
}
html body .c1-c3-fusion-wrap .c1-speech-bubble {
top: calc(100% + 10px) !important;
bottom: auto !important;
right: 0 !important;
left: auto !important;
z-index: 60 !important;
background: #0F2334 !important;
border: 1px solid rgba(56, 189, 248, 0.35) !important;
border-radius: 10px !important;
padding: 6px 6px 6px 12px !important;
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
white-space: nowrap !important;
min-width: 0 !important;
max-width: min(92vw, 420px) !important;
width: max-content !important;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45) !important;
}
html body .c1-c3-fusion-wrap .c1-speech-bubble::after {
content: "" !important;
position: absolute !important;
top: -6px !important;
bottom: auto !important;
right: 40px !important;
width: 10px !important;
height: 10px !important;
background: #0F2334 !important;
border-width: 0 !important;
border-left: 1px solid rgba(56, 189, 248, 0.35) !important;
border-top: 1px solid rgba(56, 189, 248, 0.35) !important;
border-right: none !important;
border-bottom: none !important;
transform: rotate(45deg) !important;
}
html body .c1-c3-fusion-wrap .c1-speech-bubble.is-dismissed {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}
html body .c1-speech-bubble .c1-bubble-desc {
display: none !important;
}
html body .c1-speech-bubble .c1-bubble-header-row {
display: inline-flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 8px !important;
margin-bottom: 0 !important;
}
html body .c1-speech-bubble .c1-bubble-header-row .c1-bubble-title {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
margin-bottom: 0 !important;
font-size: 12px !important;
font-weight: 600 !important;
color: #F8FAFC !important;
}
html body .c1-speech-bubble .c1-bubble-header-row .c1-bubble-title svg {
color: #38BDF8 !important;
stroke: #38BDF8 !important;
flex-shrink: 0 !important;
}
html body #kia-global-app-rail .kia-rail-short-label {
display: none;
}
html body #kia-global-app-rail button.kia-rail-nav-link {
width: 100%;
background: transparent;
border: 1px solid transparent;
font-family: inherit;
cursor: pointer;
text-align: left;
}
@media (min-width: 1025px) {
html body #kia-global-app-rail:not(.is-pinned) {
width: 88px !important;
padding: 10px 8px !important;
background: #0B111C !important;
border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
box-shadow: none !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 6px !important;
}
html body:not(.kia-rail-pinned) > main,
html body:not(.kia-rail-pinned) main[role="main"],
html body:not(.kia-rail-pinned) main#main-content,
html body:not(.kia-rail-pinned) footer.kia-footer-split,
html body:not(.kia-rail-pinned) .footer,
html body:not(.kia-rail-pinned) #emergency-alert-bar {
padding-left: 88px !important;
}
html body #kia-global-app-rail:not(.is-pinned) .kia-rail-top-bar {
width: 100% !important;
height: auto !important;
min-height: 0 !important;
justify-content: center !important;
padding: 0 0 8px 0 !important;
margin-bottom: 2px !important;
border-bottom: none !important;
position: relative !important;
}
html body #kia-global-app-rail:not(.is-pinned) .kia-rail-top-bar::after {
content: "" !important;
position: absolute !important;
bottom: 0 !important;
left: 50% !important;
transform: translateX(-50%) !important;
width: 44px !important;
height: 1px !important;
background: rgba(255, 255, 255, 0.08) !important;
}
html body #kia-global-app-rail .kia-rail-pin-btn {
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
transform: none !important;
width: 48px !important;
height: 48px !important;
min-width: 48px !important;
min-height: 48px !important;
border-radius: 14px !important;
background: rgba(56, 189, 248, 0.12) !important;
border: none !important;
color: #38BDF8 !important;
}
html body #kia-global-app-rail .kia-rail-pin-btn:hover {
background: rgba(56, 189, 248, 0.22) !important;
color: #7DD3FC !important;
}
html body #kia-global-app-rail:not(.is-pinned) .kia-rail-scroll-area {
width: 100% !important;
padding: 0 !important;
overflow: visible !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 6px !important;
}
html body #kia-global-app-rail:not(.is-pinned) .kia-rail-nav-list {
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
gap: 6px !important;
align-items: center !important;
}
html body #kia-global-app-rail:not(.is-pinned) .kia-rail-nav-list > li {
width: 72px !important;
display: flex !important;
justify-content: center !important;
}
html body #kia-global-app-rail:not(.is-pinned) .kia-rail-section-head,
html body #kia-global-app-rail:not(.is-pinned) .kia-rail-divider,
html body #kia-global-app-rail:not(.is-pinned) .kia-rail-footer {
display: none !important;
}
html body #kia-global-app-rail:not(.is-pinned) .kia-rail-nav-link {
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
width: 72px !important;
height: 56px !important;
min-height: 56px !important;
padding: 6px 4px !important;
gap: 4px !important;
border-radius: 14px !important;
border: none !important;
background: transparent !important;
color: #94A3B8 !important;
text-align: center !important;
}
html body #kia-global-app-rail:not(.is-pinned) .kia-rail-nav-link:hover:not(.is-active) {
background: rgba(255, 255, 255, 0.06) !important;
color: #F8FAFC !important;
}
html body #kia-global-app-rail:not(.is-pinned) .kia-rail-nav-link.is-active {
background: rgba(56, 189, 248, 0.12) !important;
color: #38BDF8 !important;
border: none !important;
}
html body #kia-global-app-rail:not(.is-pinned) .kia-rail-nav-link.is-active::before {
display: none !important;
}
html body #kia-global-app-rail:not(.is-pinned) .kia-rail-text,
html body #kia-global-app-rail:not(.is-pinned) .kia-rail-ext-arrow {
display: none !important;
}
html body #kia-global-app-rail:not(.is-pinned) .kia-rail-icon,
html body #kia-global-app-rail:not(.is-pinned) .kia-rail-icon.ext-icon {
width: 22px !important;
height: 22px !important;
min-width: 22px !important;
margin: 0 !important;
background: transparent !important;
border: none !important;
color: inherit !important;
}
html body #kia-global-app-rail:not(.is-pinned) .kia-rail-icon svg {
width: 20px !important;
height: 20px !important;
}
html body #kia-global-app-rail:not(.is-pinned) .kia-rail-short-label {
display: block !important;
font-size: 11px !important;
font-weight: 700 !important;
line-height: 1.15 !important;
color: #E2E8F0 !important;
max-width: 68px !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
html body #kia-global-app-rail:not(.is-pinned) .kia-rail-nav-link.is-active .kia-rail-short-label {
color: #38BDF8 !important;
}
}
html body .category-card-kia {
position: relative !important;
}
html body .category-card-kia .category-title a.card-stretched-link {
color: inherit !important;
text-decoration: underline !important;
text-decoration-color: rgba(56, 189, 248, 0.6) !important;
text-underline-offset: 4px !important;
}
html body .category-card-kia .category-title a.card-stretched-link::after {
content: "" !important;
position: absolute !important;
inset: 0 !important;
z-index: 1 !important;
border-radius: inherit !important;
}
html body .category-card-kia:has(.card-stretched-link:focus-visible) {
outline: 3px solid #38BDF8 !important;
outline-offset: 3px !important;
}
html body .category-card-kia .card-inner-bottom,
html body .category-card-kia .quick-links-segment,
html body .category-card-kia .segment-btn {
position: relative !important;
z-index: 2 !important;
}
html body .category-card-kia .category-badge {
color: #FF8598 !important;
background: rgba(234, 0, 41, 0.16) !important;
border-color: rgba(255, 133, 152, 0.38) !important;
}
html body .system-bulletin-board .bulletin-item .item-tag,
html body .system-bulletin-board .bulletin-item.urgent .item-tag {
background-color: #C80022 !important;
color: #FFFFFF !important;
border: 1px solid rgba(255, 255, 255, 0.22) !important;
}
html body .kia-footer-copyright,
html body .kia-footer-operator,
html body .footer-legal-link {
color: #94A3B8 !important;
opacity: 1 !important;
}
html body.kia-cookie-banner-visible .kia-mobile-sticky-dock,
html body.kia-cookie-banner-visible #kia-dock-chat-callout,
html body.kia-cookie-drawer-open .kia-mobile-sticky-dock,
html body.kia-cookie-drawer-open #kia-dock-chat-callout {
transform: translateY(120%) !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}
@media (max-width: 1024px) {
html body #git-cookie-banner.git-cookie-banner {
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100% !important;
max-width: 100% !important;
background: #0A1824 !important;
border: none !important;
border-top: 1px solid rgba(56, 189, 248, 0.35) !important;
border-radius: 16px 16px 0 0 !important;
padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px)) !important;
z-index: 9995 !important;
}
html body #git-cookie-banner .git-cookie-banner-inner {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 12px !important;
height: auto !important;
}
html body #git-cookie-banner .git-cookie-banner-copy {
flex: 0 0 auto !important;
min-width: 0 !important;
height: auto !important;
}
html body #git-cookie-banner .git-cookie-banner-actions {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 8px !important;
width: 100% !important;
}
html body #git-cookie-banner .git-cookie-btn,
html body #git-cookie-banner .git-cookie-btn.git-cookie-btn-primary,
html body #git-cookie-banner .git-cookie-btn.git-cookie-btn-secondary {
min-height: 48px !important;
height: 48px !important;
border-radius: 12px !important;
border: 1px solid rgba(255, 255, 255, 0.3) !important;
background: transparent !important;
color: #FFFFFF !important;
font-size: 13px !important;
font-weight: 700 !important;
box-shadow: none !important;
justify-content: center !important;
}
}
@media (max-width: 1024px) {
html body .hero-inner-left {
width: min(92vw, 680px) !important;
max-width: 680px !important;
}
html body .hero-inner-left .search-wrapper-spacex {
display: block !important;
width: min(92vw, 640px) !important;
max-width: 640px !important;
}
}
html body .kia-hero-keyword-chips {
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-wrap: wrap !important;
gap: 8px !important;
margin-top: 12px !important;
padding: 0 4px !important;
}
html body .kia-hero-keyword-chips .kia-keyword-label {
font-size: 12px !important;
font-weight: 600 !important;
color: #94A3B8 !important;
margin-right: 2px !important;
}
html body .kia-hero-keyword-chips .kia-keyword-chip {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 40px !important;
height: 40px !important;
padding: 0 14px !important;
border-radius: 999px !important;
background: rgba(56, 189, 248, 0.07) !important;
border: 1px solid rgba(56, 189, 248, 0.35) !important;
color: #E2E8F0 !important;
font-size: 12.5px !important;
font-weight: 600 !important;
text-decoration: none !important;
backdrop-filter: blur(8px) !important;
transition: all 0.2s ease !important;
}
html body .kia-hero-keyword-chips .kia-keyword-chip:hover,
html body .kia-hero-keyword-chips .kia-keyword-chip:focus-visible {
background: rgba(56, 189, 248, 0.18) !important;
border-color: #38BDF8 !important;
color: #FFFFFF !important;
}
html body #opt3-flyout .opt3-link-item {
min-height: 46px !important;
padding: 6px 10px !important;
}
html body #opt3-flyout .opt3-link-label-text {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
justify-content: center !important;
line-height: 1.2 !important;
gap: 1px !important;
font-family: Roboto, "Segoe UI", "Noto Sans", system-ui, -apple-system, sans-serif !important;
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
}
html body #opt3-flyout .opt3-link-label-text .lang-native {
font-family: Roboto, "Segoe UI", "Noto Sans", system-ui, -apple-system, sans-serif !important;
font-size: 13px !important;
font-weight: 700 !important;
color: #F1F5F9 !important;
line-height: 1.25 !important;
letter-spacing: 0 !important;
}
html body #opt3-flyout .opt3-link-label-text .lang-en {
font-family: Roboto, "Segoe UI", "Noto Sans", system-ui, -apple-system, sans-serif !important;
font-size: 11px !important;
font-weight: 500 !important;
color: #94A3B8 !important;
line-height: 1.15 !important;
}
html body .kia-chat-callout-close,
html body .c1-bubble-close {
position: relative !important;
width: 44px !important;
height: 44px !important;
min-width: 44px !important;
min-height: 44px !important;
margin: -10px -8px -10px 0 !important;
background: transparent !important;
border: none !important;
color: #CBD5E1 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
flex-shrink: 0 !important;
z-index: 1 !important;
}
html body .kia-chat-callout-close::before,
html body .c1-bubble-close::before {
content: "" !important;
position: absolute !important;
width: 24px !important;
height: 24px !important;
border-radius: 999px !important;
background: rgba(255, 255, 255, 0.12) !important;
z-index: -1 !important;
pointer-events: none !important;
}
html body #git-ai-chips-close-btn,
html body .article-share a,
html body .share-facebook,
html body .share-twitter,
html body .share-linkedin {
min-width: 44px !important;
min-height: 44px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
html body .search-input-container:not(.search-has-value) .clear-button,
html body form.search:not(.search-has-value) .clear-button {
display: none !important;
}
html body .search-input-container.search-has-value .clear-button,
html body form.search.search-has-value .clear-button {
display: inline-flex !important;
}
html body .header-tab-item {
min-height: 44px !important;
display: inline-flex !important;
align-items: center !important;
}
html body .article-vote {
min-height: 44px !important;
min-width: 88px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
html body .c1-signin-link {
min-height: 36px !important;
padding: 6px 12px !important;
display: inline-flex !important;
align-items: center !important;
}
html body.kia-lang-flyout-open header.header,
html body.kia-lang-flyout-open .header {
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
}
html body.kia-lang-flyout-open #kia-global-app-rail {
opacity: 0.45 !important;
pointer-events: none !important;
}
html body #opt3-flyout.opt3-mega-flyout,
html body .opt3-mega-flyout.mobile-lang-sheet.lang-bottom-sheet {
background: #07111E !important;
border: none !important;
box-shadow: 0 36px 90px -10px rgba(0, 0, 0, 0.92) !important;
}
html body #opt3-flyout .opt3-flyout-top-bar {
border-bottom: none !important;
padding-bottom: 4px !important;
margin-bottom: 14px !important;
}
html body #opt3-flyout .opt3-close-btn {
border: none !important;
background: rgba(255, 255, 255, 0.06) !important;
width: 44px !important;
height: 44px !important;
min-width: 44px !important;
min-height: 44px !important;
}
html body #opt3-flyout .opt3-close-btn:hover {
background: rgba(234, 0, 41, 0.2) !important;
border: none !important;
color: #FFFFFF !important;
box-shadow: none !important;
}
html body #opt3-flyout .opt3-col,
html body #opt3-flyout .opt3-col:hover,
html body #opt3-flyout section.opt3-col[data-category="kr"],
html body #opt3-flyout section.opt3-col[data-category="cn"],
html body #opt3-flyout section.opt3-col[data-category="na"],
html body #opt3-flyout section.opt3-col[data-category="na"]:hover,
html body #opt3-flyout section.opt3-col[data-category="eu"],
html body #opt3-flyout section.opt3-col[data-category="ust"] {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
html body #opt3-flyout .opt3-col-header {
border-bottom: none !important;
padding-bottom: 4px !important;
margin-bottom: 0 !important;
}
html body #opt3-flyout .opt3-col-title {
display: inline-flex !important;
align-items: center !important;
gap: 7px !important;
}
html body #opt3-flyout .opt3-col-title::before {
content: "" !important;
width: 6px !important;
height: 6px !important;
border-radius: 50% !important;
flex-shrink: 0 !important;
}
html body #opt3-flyout section.opt3-col[data-category="kr"] .opt3-col-title::before {
background: #38BDF8 !important;
}
html body #opt3-flyout section.opt3-col[data-category="cn"] .opt3-col-title::before {
background: #F472B6 !important;
}
html body #opt3-flyout section.opt3-col[data-category="na"] .opt3-col-title::before {
background: #F59E0B !important;
}
html body #opt3-flyout section.opt3-col[data-category="eu"] .opt3-col-title::before {
background: #10B981 !important;
}
html body #opt3-flyout section.opt3-col[data-category="ust"] .opt3-col-title::before {
background: #FBBF24 !important;
}
html body #opt3-flyout .opt3-link-item {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
gap: 8px !important;
background: rgba(15, 27, 46, 0.78) !important;
border: none !important;
border-radius: 10px !important;
padding: 6px 11px !important;
min-height: 46px !important;
height: 46px !important;
box-shadow: none !important;
}
html body #opt3-flyout .opt3-link-item:hover {
background: rgba(56, 189, 248, 0.16) !important;
border: none !important;
color: #FFFFFF !important;
transform: translateY(-1px) !important;
}
html body #opt3-flyout .opt3-link-item.active-item {
background: rgba(56, 189, 248, 0.22) !important;
border: none !important;
color: #FFFFFF !important;
box-shadow: none !important;
}
html body #opt3-flyout section.opt3-col[data-category="eu"] .opt3-link-list > .opt3-link-item.opt3-featured-item,
html body #opt3-flyout section.opt3-col[data-category="eu"] .opt3-link-list > .opt3-link-item:first-child {
grid-column: 1 / -1 !important;
background: rgba(16, 185, 129, 0.14) !important;
border: none !important;
}
html body #opt3-flyout section.opt3-col[data-category="eu"] .opt3-link-list > .opt3-link-item.opt3-featured-item:hover,
html body #opt3-flyout section.opt3-col[data-category="eu"] .opt3-link-list > .opt3-link-item:first-child:hover {
background: rgba(16, 185, 129, 0.22) !important;
border: none !important;
}
html body #opt3-flyout .opt3-iso-badge,
html body #opt3-flyout .opt3-link-item:hover .opt3-iso-badge,
html body #opt3-flyout .opt3-link-item.active-item .opt3-iso-badge {
background: transparent !important;
border: none !important;
padding: 0 !important;
margin-right: 8px !important;
min-width: 22px !important;
height: auto !important;
font-size: 12px !important;
font-weight: 800 !important;
letter-spacing: 0.02em !important;
color: #38BDF8 !important;
justify-content: flex-start !important;
}
html body #opt3-flyout .opt3-link-item.opt3-featured-item .opt3-iso-badge,
html body #opt3-flyout .opt3-link-item.opt3-featured-item:hover .opt3-iso-badge {
color: #34D399 !important;
}
html body #opt3-flyout .opt3-link-item.na-disabled-row,
html body #opt3-flyout .opt3-link-item.na-disabled-row:hover,
html body #opt3-flyout .opt3-link-item.na-disabled-row:focus-visible {
background: rgba(15, 23, 42, 0.42) !important;
border: none !important;
color: #64748B !important;
box-shadow: none !important;
transform: none !important;
}
html body #opt3-flyout .opt3-link-item.na-disabled-row .opt3-iso-badge,
html body #opt3-flyout .opt3-link-item.na-disabled-row:hover .opt3-iso-badge {
background: transparent !important;
border: none !important;
color: #475569 !important;
}
html body #opt3-flyout .opt3-link-item.na-disabled-row .opt3-link-label-text .lang-native {
color: #94A3B8 !important;
}
html body #opt3-flyout .opt3-link-item.na-disabled-row .opt3-link-label-text .lang-en {
color: #64748B !important;
}
html body #opt3-flyout .na-row-lock-tag {
opacity: 1 !important;
color: #F59E0B !important;
}
html body #opt3-flyout .opt3-link-label-text {
min-width: 0 !important;
flex: 1 1 auto !important;
}
html body #opt3-flyout .opt3-link-label-text .lang-native,
html body #opt3-flyout .opt3-link-label-text .lang-en {
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
max-width: 100% !important;
}
html body #opt3-flyout .opt3-current-badge,
html body #opt3-flyout .opt3-law-badge,
html body #opt3-flyout .na-status-pill,
html body #opt3-flyout .opt3-na-hub-pod,
html body #opt3-flyout .opt3-na-hub-pod.opt3-na-hub-pod-disabled,
html body #opt3-flyout .opt3-bottom-alert,
html body #opt3-flyout .opt3-alert-badge {
border: none !important;
box-shadow: none !important;
}
html body #opt3-flyout .opt3-current-badge {
font-size: 11px !important;
font-weight: 700 !important;
background: rgba(56, 189, 248, 0.25) !important;
color: #38BDF8 !important;
padding: 2px 7px !important;
border-radius: 5px !important;
}
html body #opt3-flyout .opt3-law-badge {
font-size: 11px !important;
font-weight: 700 !important;
background: rgba(16, 185, 129, 0.2) !important;
color: #34D399 !important;
padding: 2px 7px !important;
border-radius: 5px !important;
}
html body #opt3-flyout .na-status-pill {
gap: 5px !important;
padding: 2px 8px !important;
border-radius: 999px !important;
font-size: 11px !important;
font-weight: 800 !important;
background: rgba(245, 158, 11, 0.16) !important;
color: #FBBF24 !important;
}
html body #opt3-flyout .na-status-dot {
box-shadow: none !important;
}
html body #opt3-flyout .opt3-na-hub-pod,
html body #opt3-flyout .opt3-na-hub-pod.opt3-na-hub-pod-disabled {
background: rgba(15, 27, 46, 0.65) !important;
padding: 10px 12px !important;
border-radius: 10px !important;
}
html body #opt3-flyout .opt3-na-hub-pod:not(.opt3-na-hub-pod-disabled) .opt3-na-hub-pod-ico {
color: #38BDF8 !important;
}
html body #opt3-flyout .opt3-na-hub-pod:not(.opt3-na-hub-pod-disabled) .opt3-na-hub-pod-title {
font-size: 11.5px !important;
font-weight: 700 !important;
color: #E2E8F0 !important;
line-height: 1.2 !important;
}
html body #opt3-flyout .opt3-na-hub-pod.opt3-na-hub-pod-disabled .opt3-na-hub-pod-title {
font-size: 11.5px !important;
font-weight: 700 !important;
color: #FDE68A !important;
line-height: 1.2 !important;
}
html body #opt3-flyout .opt3-na-hub-pod-sub {
font-size: 11px !important;
color: #94A3B8 !important;
line-height: 1.2 !important;
}
html body #opt3-flyout .opt3-bottom-bar {
border-top: none !important;
padding-top: 0 !important;
margin-top: 14px !important;
}
html body #opt3-flyout .opt3-bottom-alert {
background: rgba(15, 27, 46, 0.72) !important;
padding: 10px 14px !important;
border-radius: 12px !important;
flex-direction: row !important;
align-items: center !important;
gap: 12px !important;
}
html body #opt3-flyout .opt3-alert-badge {
gap: 5px !important;
background: rgba(245, 158, 11, 0.2) !important;
color: #FBBF24 !important;
font-size: 11.5px !important;
font-weight: 700 !important;
padding: 4px 9px !important;
border-radius: 6px !important;
}
@media (min-width: 1025px) {
html body #opt3-flyout.opt3-mega-flyout {
top: 86px !important;
left: 108px !important;
right: 20px !important;
max-width: 1320px !important;
border-radius: 18px !important;
padding: 18px 26px 20px !important;
}
@media (min-width: 1560px) {
html body.kia-rail-pinned #opt3-flyout.opt3-mega-flyout {
left: 348px !important;
}
}
html body #opt3-flyout .opt3-columns-wrapper.opt3-columns-5 {
grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
grid-template-rows: auto auto 1fr !important;
gap: 16px 28px !important;
}
html body #opt3-flyout .opt3-columns-wrapper.opt3-columns-5 > section.opt3-col[data-category="ust"] {
justify-content: flex-start !important;
}
}
@media (max-width: 1024px) and (min-width: 600px) {
html body #opt3-flyout.opt3-mega-flyout,
html body .opt3-mega-flyout.mobile-lang-sheet.lang-bottom-sheet {
border-radius: 22px 22px 0 0 !important;
padding: 22px 20px 28px !important;
}
html body #opt3-flyout .opt3-close-btn {
width: 48px !important;
height: 48px !important;
min-width: 48px !important;
min-height: 48px !important;
}
html body #opt3-flyout .opt3-link-item {
min-height: 48px !important;
height: 48px !important;
}
html body #opt3-flyout .opt3-columns-wrapper.opt3-columns-5 {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
grid-template-rows: auto auto auto auto !important;
gap: 16px 24px !important;
}
html body #opt3-flyout section.opt3-col[data-category="kr"] {
grid-column: 1 / 2 !important;
grid-row: 1 / 2 !important;
}
html body #opt3-flyout section.opt3-col[data-category="cn"] {
grid-column: 1 / 2 !important;
grid-row: 2 / 3 !important;
}
html body #opt3-flyout section.opt3-col[data-category="ust"] {
grid-column: 1 / 2 !important;
grid-row: 3 / 4 !important;
justify-content: flex-start !important;
}
html body #opt3-flyout section.opt3-col[data-category="na"] {
grid-column: 2 / 3 !important;
grid-row: 1 / 4 !important;
justify-content: space-between !important;
}
html body #opt3-flyout section.opt3-col[data-category="eu"] {
grid-column: 1 / -1 !important;
grid-row: 4 / 5 !important;
}
html body #opt3-flyout section.opt3-col[data-category="eu"] .opt3-link-list {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 8px !important;
}
}
@media (max-width: 599px) {
html body #opt3-flyout.opt3-mega-flyout,
html body .opt3-mega-flyout.mobile-lang-sheet.lang-bottom-sheet {
border-radius: 20px 20px 0 0 !important;
padding: 18px 14px 24px !important;
}
html body #opt3-flyout .opt3-close-btn {
width: 48px !important;
height: 48px !important;
min-width: 48px !important;
min-height: 48px !important;
}
html body #opt3-flyout .opt3-link-item {
min-height: 48px !important;
height: 48px !important;
padding: 6px 9px !important;
}
html body #opt3-flyout .opt3-iso-badge,
html body #opt3-flyout .opt3-link-item:hover .opt3-iso-badge,
html body #opt3-flyout .opt3-link-item.active-item .opt3-iso-badge {
margin-right: 6px !important;
min-width: 20px !important;
}
html body #opt3-flyout .opt3-bottom-alert {
flex-direction: column !important;
align-items: flex-start !important;
gap: 8px !important;
}
html body #opt3-flyout .opt3-columns-wrapper.opt3-columns-5 {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 14px 10px !important;
}
html body #opt3-flyout section.opt3-col[data-category="kr"] {
grid-column: 1 / 2 !important;
grid-row: 1 / 2 !important;
}
html body #opt3-flyout section.opt3-col[data-category="cn"] {
grid-column: 2 / 3 !important;
grid-row: 1 / 2 !important;
}
html body #opt3-flyout section.opt3-col[data-category="eu"] {
grid-column: 1 / -1 !important;
grid-row: 2 / 3 !important;
}
html body #opt3-flyout section.opt3-col[data-category="ust"] {
grid-column: 1 / -1 !important;
grid-row: 3 / 4 !important;
}
html body #opt3-flyout section.opt3-col[data-category="na"] {
grid-column: 1 / -1 !important;
grid-row: 4 / 5 !important;
}
html body #opt3-flyout section.opt3-col[data-category="eu"] .opt3-link-list,
html body #opt3-flyout section.opt3-col[data-category="ust"] .opt3-link-list,
html body #opt3-flyout section.opt3-col[data-category="na"] .opt3-link-list {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 8px !important;
}
}
html body .sub-nav.kia-request-subnav {
border-bottom: none !important;
padding-bottom: 6px !important;
margin-bottom: 18px !important;
}
html body .sub-nav.kia-request-subnav .search-container input[type="search"] {
background: rgba(15, 29, 46, 0.85) !important;
border: none !important;
box-shadow: none !important;
transition: background-color 0.15s ease, box-shadow 0.15s ease !important;
}
html body .sub-nav.kia-request-subnav .search-container input[type="search"]:focus,
html body .sub-nav.kia-request-subnav .search-container input[type="search"]:focus-visible {
background: #0F2338 !important;
box-shadow: 0 0 0 2px #38BDF8 !important;
outline: none !important;
}
html body .kia-request-eyebrow {
background: rgba(56, 189, 248, 0.12) !important;
border: none !important;
color: #38BDF8 !important;
}
html body .kia-request-sla-badge {
background: rgba(255, 255, 255, 0.045) !important;
border: none !important;
color: #CBD5E1 !important;
}
html body.kia-request-screen2-mode #kia-screen1-triage-grid,
html body .kia-screen1-triage-grid:empty {
display: none !important;
}
html body.kia-request-screen2-mode #kia-screen1-triage-hub,
html body.kia-request-screen2-mode .kia-screen1-triage-hub {
display: flex !important;
gap: 0 !important;
margin-bottom: 20px !important;
}
html body .kia-triage-card {
background: #081523 !important;
border: none !important;
box-shadow: 0 14px 32px rgba(0, 0, 0, 0.36) !important;
}
html body .kia-triage-card:hover,
html body .kia-triage-card:focus-visible {
background: #0D1E31 !important;
border: none !important;
box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.45), 0 18px 38px rgba(0, 0, 0, 0.45) !important;
}
html body .kia-triage-card-icon,
html body .kia-triage-icon-box,
html body .kia-triage-card-badge,
html body .kia-triage-badge,
html body .kia-triage-chip {
border: none !important;
}
html body .kia-triage-card-foot,
html body .kia-triage-meta-row {
border-top: none !important;
padding-top: 6px !important;
}
html body .kia-screen1-deflection-bar {
background: linear-gradient(90deg, rgba(2, 132, 199, 0.14) 0%, rgba(11, 25, 39, 0.78) 100%) !important;
border: none !important;
box-shadow: none !important;
margin-top: 0 !important;
margin-bottom: 20px !important;
}
html body .kia-screen1-triage-hub > .kia-screen1-deflection-bar {
margin-bottom: 0 !important;
}
html body .kia-deflection-bar-icon {
background: rgba(56, 189, 248, 0.15) !important;
border: none !important;
color: #38BDF8 !important;
}
html body .kia-deflection-chip {
background: rgba(56, 189, 248, 0.16) !important;
border: none !important;
color: #7DD3FC !important;
transition: background-color 0.15s ease, color 0.15s ease !important;
}
html body .kia-deflection-chip:hover,
html body .kia-deflection-chip:focus-visible {
background: rgba(56, 189, 248, 0.26) !important;
color: #FFFFFF !important;
}
html body.kia-request-screen2-mode .kia-form-switcher-bar {
background: #081523 !important;
border: none !important;
box-shadow: none !important;
margin-bottom: 18px !important;
}
html body .kia-active-form-badge {
background: rgba(56, 189, 248, 0.16) !important;
border: none !important;
color: #38BDF8 !important;
}
html body .kia-switcher-pill,
html body .kia-form-pill {
background: rgba(255, 255, 255, 0.04) !important;
border: none !important;
color: #94A3B8 !important;
}
html body .kia-switcher-pill:hover,
html body .kia-form-pill:hover,
html body .kia-switcher-pill:focus-visible,
html body .kia-form-pill:focus-visible {
background: rgba(255, 255, 255, 0.08) !important;
border: none !important;
color: #F8FAFC !important;
}
html body .kia-switcher-pill.is-active,
html body .kia-form-pill.is-active {
background: rgba(56, 189, 248, 0.18) !important;
border: none !important;
color: #FFFFFF !important;
}
html body .kia-form-pill-hub {
background: rgba(56, 189, 248, 0.1) !important;
border: none !important;
color: #7DD3FC !important;
}
html body .kia-tablet-helper-bar {
background: #081523 !important;
border: none !important;
}
html body .kia-tablet-helper-btn {
background: #0E2034 !important;
border: none !important;
}
html body .kia-tablet-helper-drawer {
background: #0B1B2D !important;
border: none !important;
}
html body .kia-tablet-drawer-close {
background: rgba(255, 255, 255, 0.06) !important;
border: none !important;
}
html body.kia-page-new-request #main-content.form,
html body .kia-new-request-page-container #main-content.form {
background: #081523 !important;
border: none !important;
border-radius: 18px !important;
padding: 30px 28px !important;
box-shadow: 0 24px 54px -12px rgba(0, 0, 0, 0.55) !important;
}
@media (max-width: 768px) {
html body.kia-page-new-request #main-content.form,
html body .kia-new-request-page-container #main-content.form {
padding: 20px 16px !important;
border-radius: 14px !important;
}
}
html body .kia-form-section-banner {
background: #0C1C2E !important;
border: none !important;
}
html body .kia-form-section-num {
background: rgba(56, 189, 248, 0.18) !important;
border: none !important;
}
html body #new-request-form .kia-repair-address-notice-row,
html body .kia-domestic-guidance-banner {
background: rgba(56, 189, 248, 0.1) !important;
border: none !important;
}
html body #new-request-form input[type="text"]:not(.git-country-search-input),
html body #new-request-form input[type="email"],
html body #new-request-form input[type="tel"],
html body #new-request-form input[type="number"],
html body #new-request-form [data-garden-id="dropdowns.combobox.trigger"],
html body #new-request-form [data-garden-id="forms.faux_input"]:not([aria-hidden="true"]),
html body #new-request-form [data-garden-id="forms.input"]:not(.git-country-search-input),
html body #new-request-form [role="combobox"]:not(.git-country-search-input),
html body #new-request-form textarea,
html body #new-request-form [data-garden-id="forms.textarea"],
html body .kia-user-repair-memo,
html body .git-country-input-wrapper,
html body .kia-repair-input,
html body .kia-repair-select {
background-color: #0E2034 !important;
border: none !important;
box-shadow: none !important;
transition: background-color 0.15s ease, box-shadow 0.15s ease !important;
}
@media (hover: hover) {
html body #new-request-form input[type="text"]:not(.git-country-search-input):hover,
html body #new-request-form input[type="email"]:hover,
html body #new-request-form input[type="tel"]:hover,
html body #new-request-form input[type="number"]:hover,
html body #new-request-form [data-garden-id="dropdowns.combobox.trigger"]:hover,
html body #new-request-form [data-garden-id="forms.faux_input"]:not([aria-hidden="true"]):hover,
html body #new-request-form [data-garden-id="forms.input"]:not(.git-country-search-input):hover,
html body #new-request-form [role="combobox"]:not(.git-country-search-input):hover,
html body #new-request-form textarea:hover,
html body #new-request-form [data-garden-id="forms.textarea"]:hover,
html body .kia-user-repair-memo:hover,
html body .git-country-input-wrapper:hover,
html body .kia-repair-input:hover,
html body .kia-repair-select:hover {
background-color: #12273F !important;
border: none !important;
}
}
html body #new-request-form input[type="text"]:not(.git-country-search-input):focus,
html body #new-request-form input[type="email"]:focus,
html body #new-request-form input[type="tel"]:focus,
html body #new-request-form input[type="number"]:focus,
html body #new-request-form textarea:focus,
html body #new-request-form [data-garden-id="forms.textarea"]:focus,
html body .kia-user-repair-memo:focus,
html body #new-request-form [data-garden-id="dropdowns.combobox.trigger"]:focus,
html body #new-request-form [data-garden-id="dropdowns.combobox.trigger"]:focus-within,
html body #new-request-form [data-garden-id="forms.faux_input"]:not([aria-hidden="true"]):focus,
html body #new-request-form [data-garden-id="forms.faux_input"]:not([aria-hidden="true"]):focus-within,
html body #new-request-form [role="combobox"]:not(.git-country-search-input):focus,
html body .git-country-input-wrapper:focus-within,
html body .kia-repair-input:focus,
html body .kia-repair-select:focus {
background-color: #0F2338 !important;
border: none !important;
box-shadow: 0 0 0 2px #38BDF8 !important;
outline: none !important;
}
html body #new-request-form [data-garden-id="tags.tag_view"],
html body #new-request-form [data-garden-id="dropdowns.combobox.tag"] {
border: none !important;
background-color: rgba(56, 189, 248, 0.2) !important;
}
html body .kia-desc-quick-chip {
background: rgba(56, 189, 248, 0.11) !important;
border: none !important;
color: #7DD3FC !important;
}
html body .kia-desc-quick-chip:hover,
html body .kia-desc-quick-chip:focus-visible {
background: rgba(56, 189, 248, 0.22) !important;
border: none !important;
color: #FFFFFF !important;
}
html body #new-request-form [data-garden-id="forms.file_upload"] {
background-color: #0E2034 !important;
border: none !important;
border-radius: 12px !important;
transition: background-color 0.15s ease, box-shadow 0.15s ease !important;
}
html body #new-request-form [data-garden-id="forms.file_upload"]:hover,
html body #new-request-form [data-garden-id="forms.file_upload"]:focus-visible,
html body #new-request-form [data-garden-id="forms.file_upload"]:focus-within {
background-color: #132942 !important;
box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.45) !important;
outline: none !important;
}
html body #new-request-form button[type="submit"],
html body #new-request-form input[type="submit"] {
border: none !important;
}
html body .kia-repair-repeater-card {
background: #0B1B2D !important;
border: none !important;
}
html body .kia-repair-repeater-banner,
html body .kia-repair-unit-count-badge,
html body .kia-repair-unit-card,
html body .kia-repair-unit-remove-btn,
html body .kia-repair-symptom-chip,
html body .kia-repair-quick-note-btn {
border: none !important;
}
html body .kia-repair-unit-head {
border-bottom: none !important;
padding-bottom: 4px !important;
}
html body .kia-repair-symptom-chip {
background: #0E2034 !important;
}
html body .kia-repair-symptom-chip.is-selected {
background: #10B981 !important;
color: #05141F !important;
}
html body .kia-btn-add-repair-unit {
background: rgba(16, 185, 129, 0.16) !important;
border: none !important;
}
html body .kia-btn-add-repair-unit:hover {
background: rgba(16, 185, 129, 0.26) !important;
border: none !important;
}
html body #termsBox.git-privacy-terms-box.is-kia-dark {
background: #0B1B2D !important;
border: none !important;
box-shadow: none !important;
border-radius: 14px 14px 0 0 !important;
margin: 4px 0 0 0 !important;
}
html body #termsBox.git-privacy-terms-box.is-kia-dark .git-terms-header {
background: rgba(255, 255, 255, 0.025) !important;
border-bottom: none !important;
}
html body #termsBox.git-privacy-terms-box.is-kia-dark .git-terms-full-link {
border: none !important;
background: rgba(56, 189, 248, 0.12) !important;
border-radius: 8px !important;
}
html body #termsBox.git-privacy-terms-box.is-kia-dark .git-terms-scroll-area {
background: transparent !important;
border: none !important;
}
html body #termsBox.git-privacy-terms-box.is-kia-dark .git-terms-clause {
border-bottom: none !important;
margin-bottom: 14px !important;
padding-bottom: 0 !important;
}
html body #termsBox.git-privacy-terms-box.is-kia-dark .git-terms-clause:last-child {
margin-bottom: 0 !important;
}
html body #termsBox.git-privacy-terms-box.is-kia-dark .git-terms-footer-note {
background: transparent !important;
border-top: none !important;
padding-top: 4px !important;
}
html body #new-request-form .git-privacy-checkbox-field {
border: none !important;
background: rgba(56, 189, 248, 0.11) !important;
border-radius: 0 0 14px 14px !important;
margin-top: -20px !important;
margin-bottom: 8px !important;
padding: 14px 18px !important;
box-shadow: none !important;
}
@media (max-width: 767px) {
html body #new-request-form .git-privacy-checkbox-field {
margin-top: -16px !important;
}
}
html body #new-request-form .git-privacy-checkbox-field [data-garden-id="forms.checkbox_hint"],
html body #new-request-form .git-privacy-checkbox-field [data-garden-id="forms.input_hint"],
html body #new-request-form .git-privacy-checkbox-field [id*="--hint"] {
display: none !important;
}
html body .kia-rail-card,
html body .kia-rail-card.kia-rail-card-callout {
background: #081523 !important;
border: none !important;
box-shadow: none !important;
}
html body .kia-rail-card.kia-rail-card-callout {
background: linear-gradient(135deg, rgba(2, 132, 199, 0.14) 0%, #081523 100%) !important;
}
html body .kia-rail-serial-visual,
html body .kia-rail-log-paths {
background: transparent !important;
border: none !important;
padding: 0 !important;
}
html body .kia-rail-interactive-list {
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
margin-top: 4px !important;
}
html body .kia-helper-interactive-row {
display: flex !important;
align-items: flex-start !important;
justify-content: space-between !important;
gap: 10px !important;
min-height: 48px !important;
padding: 11px 13px !important;
border-radius: 10px !important;
background: #0E2034 !important;
border: none !important;
color: #E2E8F0 !important;
text-decoration: none !important;
transition: background-color 0.16s ease, transform 0.16s ease, color 0.16s ease !important;
-webkit-tap-highlight-color: transparent !important;
}
@media (hover: hover) {
html body .kia-helper-interactive-row:hover {
background: rgba(56, 189, 248, 0.15) !important;
color: #FFFFFF !important;
transform: translateY(-1px) !important;
}
html body .kia-helper-interactive-row:hover .kia-helper-row-arrow {
color: #7DD3FC !important;
transform: translate(1px, -1px) !important;
}
}
html body .kia-helper-interactive-row:active,
html body .kia-helper-interactive-row:focus-visible {
background: rgba(56, 189, 248, 0.20) !important;
color: #FFFFFF !important;
box-shadow: 0 0 0 2px #38BDF8 !important;
outline: none !important;
}
html body .kia-helper-row-copy {
display: flex !important;
flex-direction: column !important;
gap: 3px !important;
min-width: 0 !important;
flex: 1 1 auto !important;
}
html body .kia-helper-row-title {
font-size: 12.5px !important;
font-weight: 700 !important;
color: #F8FAFC !important;
line-height: 1.4 !important;
}
html body .kia-helper-row-desc {
font-size: 11.5px !important;
color: #CBD5E1 !important;
line-height: 1.5 !important;
word-break: break-word !important;
}
html body .kia-helper-row-desc.kia-helper-row-mono {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
color: #7DD3FC !important;
font-size: 11px !important;
}
html body .kia-helper-row-arrow {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 22px !important;
height: 22px !important;
border-radius: 6px !important;
background: rgba(56, 189, 248, 0.10) !important;
color: #38BDF8 !important;
flex-shrink: 0 !important;
margin-top: 1px !important;
transition: transform 0.16s ease, color 0.16s ease, background-color 0.16s ease !important;
}
html body #main-content.categories-section,
html body .category-container,
html body .kia-section-page,
html body .container.kia-article-page-fluid-container,
html body .container.kia-new-request-page-container,
html body .kia-requests-page-container,
html body .kia-request-detail-page-container,
html body .notice-hub-container#notice-hub-app,
html body main > .container,
html body footer.kia-footer-split > .kia-footer-container {
width: 100% !important;
max-width: 1600px !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: clamp(16px, 3.2vw, 48px) !important;
padding-right: clamp(16px, 3.2vw, 48px) !important;
box-sizing: border-box !important;
}
html body #main-content.categories-section > .categories-grid,
html body .category-container > .sub-nav,
html body .category-container > .page-header,
html body .category-container > .kia-page-header,
html body .category-container > .category-sidebar-layout,
html body .category-container > .full-width-articles-wrapper,
html body .kia-section-page > .sub-nav,
html body .kia-section-page > header#main-content,
html body .kia-section-page > .kia-page-header,
html body .kia-section-page > .kia-master-detail-layout,
html body .kia-section-page > .kia-leaf-section-layout,
html body .container.kia-article-page-fluid-container > .sub-nav,
html body .container.kia-article-page-fluid-container > #article-container,
html body .container.kia-article-page-fluid-container > #article-container.article-container,
html body .container.kia-new-request-page-container > .sub-nav,
html body .container.kia-new-request-page-container > .kia-request-bento-shell,
html body .kia-requests-page-container > .sub-nav,
html body .kia-requests-page-container > .my-activities-header,
html body .kia-requests-page-container > #main-content,
html body .kia-request-detail-page-container > .sub-nav,
html body .kia-request-detail-page-container > .request-container,
html body main > .container > .sub-nav,
html body main > .container > .page-header,
html body main > .container > .search-results,
html body main > .container > .my-activities-nav,
html body main > .container > .my-activities-header,
html body main > .container > #main-content {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
box-sizing: border-box !important;
}
html body #kia-prop-a-desktop-launcher,
html body .kia-prop-c-header-item,
html body #kia-global-app-rail .kia-prop-c-rail-item {
display: none !important;
}
.kia-prop-online-dot {
width: 8px !important;
height: 8px !important;
border-radius: 50% !important;
background: #10B981 !important;
box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.24) !important;
display: inline-block !important;
flex-shrink: 0 !important;
}
@media (min-width: 1025px) {
html body .user-nav-list > li.kia-prop-c-header-item,
html body #kia-prop-c-header-slot {
display: inline-flex !important;
align-items: center !important;
margin: 0 !important;
}
html body #kia-header-chat-btn.kia-prop-c-header-btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
height: 36px !important;
min-height: 36px !important;
padding: 0 14px !important;
border-radius: 999px !important;
border: none !important;
background: rgba(56, 189, 248, 0.14) !important;
color: #F8FAFC !important;
font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif !important;
font-size: 13px !important;
font-weight: 700 !important;
line-height: 1 !important;
white-space: nowrap !important;
cursor: pointer !important;
box-shadow: inset 0 1px 0 rgba(56, 189, 248, 0.28) !important;
transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease !important;
-webkit-tap-highlight-color: transparent !important;
}
html body #kia-header-chat-btn.kia-prop-c-header-btn:hover,
html body #kia-header-chat-btn.kia-prop-c-header-btn:focus-visible {
background: rgba(56, 189, 248, 0.24) !important;
transform: translateY(-1px) !important;
box-shadow: 0 0 0 1.5px rgba(56, 189, 248, 0.55) !important;
outline: none !important;
}
html body .nav-wrapper-desktop #kia-header-chat-btn svg.kia-prop-c-header-svg,
html body #kia-header-chat-btn.kia-prop-c-header-btn svg {
width: 16px !important;
height: 16px !important;
stroke: #38BDF8 !important;
stroke-width: 2px !important;
opacity: 1 !important;
flex-shrink: 0 !important;
display: block !important;
}
html body .nav-wrapper-desktop #kia-header-chat-btn:hover svg.kia-prop-c-header-svg,
html body #kia-header-chat-btn.kia-prop-c-header-btn:hover svg {
stroke: #7DD3FC !important;
transform: none !important;
filter: none !important;
}
html body #kia-header-chat-btn .kia-prop-c-header-label {
display: inline-flex !important;
align-items: center !important;
line-height: 1 !important;
color: #F8FAFC !important;
font-size: 13px !important;
font-weight: 700 !important;
}
body.kia-lang-flyout-open #kia-prop-c-header-slot,
body.kia-lang-flyout-open #kia-header-chat-btn,
header.header:has(.opt3-backdrop.active) #kia-prop-c-header-slot,
header.header:has(.opt3-mega-flyout.open) #kia-prop-c-header-slot,
header.header:has(#opt3-flyout.open) #kia-prop-c-header-slot {
z-index: 1 !important;
}
html body #kia-global-app-rail:not(.is-pinned) .kia-rail-nav-list > li.kia-prop-c-rail-item {
width: 72px !important;
display: flex !important;
justify-content: center !important;
}
html body #kia-global-app-rail.is-pinned .kia-rail-nav-list > li.kia-prop-c-rail-item {
width: 100% !important;
display: flex !important;
}
html body #kia-global-app-rail:not(.is-pinned) #kia-rail-chat-btn.kia-prop-c-rail-btn {
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
width: 72px !important;
height: 56px !important;
min-height: 56px !important;
padding: 6px 4px !important;
gap: 4px !important;
border-radius: 14px !important;
border: none !important;
background: rgba(56, 189, 248, 0.14) !important;
color: #38BDF8 !important;
box-shadow: none !important;
text-align: center !important;
}
html body #kia-global-app-rail.is-pinned #kia-rail-chat-btn.kia-prop-c-rail-btn {
flex-direction: row !important;
align-items: center !important;
justify-content: flex-start !important;
width: 100% !important;
height: auto !important;
min-height: 50px !important;
padding: 8px 10px !important;
gap: 13px !important;
border-radius: 10px !important;
border: none !important;
background: rgba(56, 189, 248, 0.14) !important;
color: #38BDF8 !important;
box-shadow: none !important;
text-align: left !important;
}
html body #kia-global-app-rail #kia-rail-chat-btn.kia-prop-c-rail-btn:hover,
html body #kia-global-app-rail #kia-rail-chat-btn.kia-prop-c-rail-btn:focus-visible {
background: rgba(56, 189, 248, 0.24) !important;
color: #7DD3FC !important;
box-shadow: none !important;
outline: none !important;
}
html body #kia-global-app-rail #kia-rail-chat-btn .kia-prop-c-rail-icon-wrap {
position: relative !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
color: #38BDF8 !important;
}
html body #kia-global-app-rail #kia-rail-chat-btn .kia-prop-c-rail-icon-wrap .kia-prop-online-dot {
position: absolute !important;
top: -2px !important;
right: -3px !important;
width: 7px !important;
height: 7px !important;
}
html body #kia-global-app-rail:not(.is-pinned) #kia-rail-chat-btn .kia-rail-short-label {
color: #7DD3FC !important;
font-weight: 800 !important;
}
html body #kia-global-app-rail #kia-rail-chat-btn .kia-rail-sub {
color: #38BDF8 !important;
font-weight: 600 !important;
}
html body iframe#launcher {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}
html body #git-cookie-banner.git-cookie-banner {
left: calc(88px + var(--kia-content-left-gutter, 48px)) !important;
right: var(--kia-content-right-gutter, 48px) !important;
bottom: 20px !important;
margin: 0 !important;
width: auto !important;
max-width: none !important;
}
}
html body .kia-new-request-page-container input,
html body .kia-new-request-page-container .sub-nav .search-container input,
html body .kia-new-request-page-container .sub-nav form.search input,
html body .kia-new-request-page-container .search-container input#query,
html body .kia-new-request-page-container .search input[type="search"],
html body .kia-new-request-page-container #new-request-form [data-garden-id="dropdowns.combobox.listbox"],
html body .kia-new-request-page-container #new-request-form ul[id$="--listbox"],
html body .kia-new-request-page-container .git-country-menu,
html body .kia-new-request-page-container #termsRequiredError,
html body .kia-new-request-page-container .git-terms-required-error {
border: none !important;
outline: none !important;
}
html body .kia-new-request-page-container .sub-nav .search-container input,
html body .kia-new-request-page-container .sub-nav form.search input,
html body .kia-new-request-page-container .search-container input#query,
html body .kia-new-request-page-container .search input[type="search"],
html body .kia-new-request-page-container #new-request-form [data-garden-id="dropdowns.combobox.listbox"],
html body .kia-new-request-page-container #new-request-form ul[id$="--listbox"],
html body .kia-new-request-page-container .git-country-menu {
background: #0D2034 !important;
}
html body .kia-new-request-page-container .search-container input#query:focus-visible,
html body .kia-new-request-page-container .search input[type="search"]:focus-visible {
box-shadow: 0 0 0 2px #38BDF8 !important;
}
@media (max-width: 1024px) {
html body,
html body.kia-page-new-request {
padding-bottom: 84px !important;
}
html body .kia-mobile-sticky-dock,
html body.kia-page-new-request .kia-mobile-sticky-dock,
html body.kia-cookie-banner-visible:not(.kia-cookie-drawer-open) .kia-mobile-sticky-dock {
display: block !important;
transform: translateY(0) !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
z-index: 9994 !important;
}
html body .kia-mobile-sticky-dock #kia-dock-chat-btn,
html body.kia-page-new-request .kia-mobile-sticky-dock #kia-dock-chat-btn {
display: inline-flex !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
}
html body:not(.kia-cookie-banner-visible):not(.kia-cookie-drawer-open) #kia-dock-chat-callout:not(.is-dismissed) {
display: inline-flex !important;
transform: translateY(0) !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
}
html body #git-cookie-banner.git-cookie-banner {
bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
border-radius: 16px !important;
left: 12px !important;
right: 12px !important;
width: auto !important;
max-width: calc(100vw - 24px) !important;
padding: 14px 16px !important;
z-index: 9993 !important;
}
html body.kia-messenger-active div:has(> div > iframe:is([title*="messaging" i], [title*="message" i], [title*="메시징"], [title*="메시지"], [title*="채팅"]):not(#launcher):not([title*="button" i]):not([title*="launch" i]):not([title*="버튼"])) {
right: var(--kia-content-right-gutter, 16px) !important;
left: auto !important;
bottom: 86px !important;
z-index: 9996 !important;
}
}
html body #main-content.categories-section {
scroll-margin-top: 72px !important;
padding-top: clamp(28px, 3vw, 44px) !important;
padding-bottom: clamp(44px, 5vw, 72px) !important;
}
html body #main-content.categories-section > .visibility-hidden,
html body #main-content.categories-section > #grid-start {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: -1px !important;
padding: 0 !important;
overflow: hidden !important;
clip: rect(0 0 0 0) !important;
border: 0 !important;
}
html body #main-content.categories-section > .system-bulletin-board {
margin: 0 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
padding: 22px 26px !important;
border-radius: 16px !important;
background: linear-gradient(145deg, rgba(13, 28, 44, 0.94), rgba(8, 19, 31, 0.98)) !important;
border: 1px solid rgba(56, 189, 248, 0.22) !important;
box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
box-sizing: border-box !important;
}
html body #main-content.categories-section > #categories-grid-root.categories-grid {
margin: 0 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
html body .system-bulletin-board .bulletin-header {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: space-between !important;
gap: 8px !important;
margin: 0 0 14px 0 !important;
padding: 0 0 12px 0 !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
overflow: visible !important;
}
html body .system-bulletin-board .bulletin-title {
flex: 1 1 auto !important;
min-width: 0 !important;
display: flex !important;
align-items: center !important;
gap: 9px !important;
font-size: clamp(12.5px, 0.95vw, 15.5px) !important;
font-weight: 700 !important;
letter-spacing: 0px !important;
color: #F8FAFC !important;
margin: 0 !important;
padding-left: 4px !important;
white-space: nowrap !important;
overflow: visible !important;
}
html body .system-bulletin-board .bulletin-title .pulsing-alert-dot {
flex-shrink: 0 !important;
overflow: visible !important;
}
html body .system-bulletin-board .bulletin-view-all-btn {
flex-shrink: 0 !important;
white-space: nowrap !important;
padding: 5px 10px !important;
font-size: 11.5px !important;
gap: 5px !important;
}
html body .system-bulletin-board .notice-list,
html body .system-bulletin-board .bulletin-pane#system-bulletin-list {
display: flex !important;
flex-direction: column !important;
gap: 0 !important;
}
html body .system-bulletin-board .notice-item,
html body .system-bulletin-board .bulletin-item {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto !important;
grid-template-rows: auto auto !important;
row-gap: 3px !important;
column-gap: 10px !important;
align-items: center !important;
padding: 8px 4px !important;
min-height: 0 !important;
border-radius: 0 !important;
background: transparent !important;
border: none !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
box-sizing: border-box !important;
text-decoration: none !important;
transition: background-color 0.15s ease !important;
}
html body .system-bulletin-board .notice-item:first-child,
html body .system-bulletin-board .bulletin-item:first-child {
padding-top: 2px !important;
}
html body .system-bulletin-board .notice-item:last-child,
html body .system-bulletin-board .bulletin-item:last-child {
border-bottom: none !important;
padding-bottom: 2px !important;
}
html body .system-bulletin-board .notice-item:hover,
html body .system-bulletin-board .notice-item:focus-visible,
html body .system-bulletin-board .bulletin-item:hover {
background: rgba(56, 189, 248, 0.05) !important;
border-color: rgba(255, 255, 255, 0.07) !important;
transform: none !important;
}
html body .system-bulletin-board .notice-item .notice-badge,
html body .system-bulletin-board .bulletin-item .item-tag,
html body .system-bulletin-board .bulletin-item.urgent .item-tag,
html body .system-bulletin-board .bulletin-item .item-tag[style] {
grid-column: 1 / 2 !important;
grid-row: 1 / 2 !important;
justify-self: start !important;
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
background: transparent !important;
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
border-radius: 0 !important;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
font-size: 10.5px !important;
font-weight: 600 !important;
letter-spacing: 0.04em !important;
line-height: 1.25 !important;
color: #38BDF8 !important;
max-width: 100% !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
html body .system-bulletin-board .notice-item .notice-badge::before,
html body .system-bulletin-board .bulletin-item .item-tag::before {
content: "" !important;
display: inline-block !important;
width: 5px !important;
height: 5px !important;
border-radius: 50% !important;
background-color: #38BDF8 !important;
flex-shrink: 0 !important;
}
html body .system-bulletin-board .notice-item:first-child .notice-badge,
html body .system-bulletin-board .bulletin-item:first-child .item-tag,
html body .system-bulletin-board .bulletin-item.urgent:first-child .item-tag,
html body .system-bulletin-board .bulletin-item:first-child .item-tag[style] {
color: #FDA4AF !important;
}
html body .system-bulletin-board .notice-item:first-child .notice-badge::before,
html body .system-bulletin-board .bulletin-item:first-child .item-tag::before {
background-color: #FF3B5C !important;
box-shadow: 0 0 6px rgba(255, 59, 92, 0.55) !important;
}
html body .system-bulletin-board .bulletin-item .item-body {
display: contents !important;
}
html body .system-bulletin-board .notice-item .notice-title,
html body .system-bulletin-board .bulletin-item .item-title {
grid-column: 1 / -1 !important;
grid-row: 2 / 3 !important;
width: 100% !important;
min-width: 0 !important;
white-space: normal !important;
display: -webkit-box !important;
-webkit-box-orient: vertical !important;
-webkit-line-clamp: 2 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
word-break: keep-all !important;
overflow-wrap: break-word !important;
font-size: clamp(13px, 0.92vw, 14px) !important;
font-weight: 500 !important;
color: #F1F5F9 !important;
line-height: 1.38 !important;
letter-spacing: -0.01em !important;
margin: 0 !important;
padding: 0 !important;
}
html body .system-bulletin-board .notice-item:hover .notice-title,
html body .system-bulletin-board .bulletin-item:hover .item-title {
color: #FFFFFF !important;
text-decoration: underline !important;
text-decoration-color: rgba(56, 189, 248, 0.45) !important;
text-underline-offset: 3px !important;
}
html body .system-bulletin-board .bulletin-item:not(.urgent) .item-title {
grid-row: 1 / -1 !important;
}
html body .system-bulletin-board .notice-item .notice-date,
html body .system-bulletin-board .bulletin-item .item-date {
grid-column: 2 / 3 !important;
grid-row: 1 / 2 !important;
justify-self: end !important;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
font-variant-numeric: tabular-nums !important;
font-size: 11px !important;
line-height: 1.25 !important;
color: #64748B !important;
white-space: nowrap !important;
flex-shrink: 0 !important;
}
html body .category-card-kia[hidden],
html body .category-card-kia.is-locale-hidden {
display: none !important;
}
html body .category-card-kia {
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
min-height: 188px !important;
padding: 22px 22px 20px !important;
border-radius: 16px !important;
background: linear-gradient(160deg, rgba(15, 31, 48, 0.92) 0%, rgba(9, 20, 32, 0.96) 100%) !important;
border: 1px solid rgba(56, 189, 248, 0.18) !important;
box-shadow: 0 14px 32px -12px rgba(0, 0, 0, 0.55) !important;
box-sizing: border-box !important;
}
html body .category-card-kia .card-inner-top {
padding: 0 !important;
margin: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
}
html body .category-card-kia .card-meta-row {
margin-bottom: 2px !important;
}
html body .category-card-kia .category-title {
font-size: clamp(18px, 1.25vw, 21px) !important;
font-weight: 700 !important;
line-height: 1.3 !important;
margin: 0 !important;
color: #F8FAFC !important;
}
html body .category-card-kia .category-sub-desc {
font-size: 13.5px !important;
line-height: 1.5 !important;
color: #94A3B8 !important;
margin: 0 !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
html body .category-card-kia .card-inner-bottom {
padding: 14px 0 0 !important;
margin-top: 14px !important;
border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
}
html body .category-card-kia .quick-links-segment {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 10px !important;
}
html body .category-card-kia .segment-btn {
min-height: 44px !important;
height: 44px !important;
padding: 0 12px !important;
border-radius: 10px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 7px !important;
font-size: 13.5px !important;
font-weight: 600 !important;
white-space: nowrap !important;
}
@media (min-width: 1025px) {
html body #main-content.categories-section {
max-width: 1720px !important;
display: grid !important;
grid-template-columns: minmax(340px, 4.3fr) minmax(0, 7.7fr) !important;
gap: clamp(18px, 1.8vw, 28px) !important;
align-items: start !important;
}
html body #main-content.categories-section[data-cat-count="3"],
html body #main-content.categories-section[data-cat-count="4"] {
align-items: stretch !important;
}
html body #main-content.categories-section[data-cat-count="0"] {
grid-template-columns: minmax(0, 1fr) !important;
}
html body #main-content.categories-section > .system-bulletin-board {
grid-column: 1 / 2 !important;
grid-row: 1 / 2 !important;
margin: 0 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
display: flex !important;
flex-direction: column !important;
position: relative !important;
top: auto !important;
}
html body #main-content.categories-section > .system-bulletin-board .notice-list,
html body #main-content.categories-section > .system-bulletin-board .bulletin-panes,
html body #main-content.categories-section > .system-bulletin-board .bulletin-pane#system-bulletin-list {
flex: 1 1 auto !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
}
html body #main-content.categories-section > #categories-grid-root.categories-grid {
grid-column: 2 / 3 !important;
grid-row: 1 / 2 !important;
margin: 0 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
padding: 0 !important;
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 16px !important;
align-content: start !important;
}
html body #main-content.categories-section[data-cat-count="3"] > #categories-grid-root.categories-grid,
html body #main-content.categories-section[data-cat-count="4"] > #categories-grid-root.categories-grid {
align-content: stretch !important;
}
html body #main-content.categories-section > #categories-grid-root.categories-grid[data-count="1"] {
grid-template-columns: minmax(0, 1fr) !important;
}
html body #main-content.categories-section > #categories-grid-root.categories-grid[data-count="0"] {
display: none !important;
}
}
@media (min-width: 1280px) {
html body #main-content.categories-section {
grid-template-columns: minmax(420px, 4.5fr) minmax(580px, 7.5fr) !important;
gap: clamp(20px, 2vw, 28px) !important;
}
html body #main-content.categories-section > #categories-grid-root.categories-grid {
gap: 18px !important;
}
}
@media (min-width: 680px) and (max-width: 1024px) {
html body #main-content.categories-section {
display: flex !important;
flex-direction: column !important;
gap: 22px !important;
}
html body #main-content.categories-section > .system-bulletin-board {
margin: 0 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
padding: 20px 24px !important;
}
html body #main-content.categories-section > #categories-grid-root.categories-grid {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 16px !important;
}
html body #main-content.categories-section > #categories-grid-root.categories-grid[data-count="1"] {
grid-template-columns: minmax(0, 1fr) !important;
}
html body #main-content.categories-section > #categories-grid-root.categories-grid[data-count="0"] {
display: none !important;
}
}
@media (max-width: 679px) {
html body #main-content.categories-section {
display: flex !important;
flex-direction: column !important;
gap: 18px !important;
padding-top: 20px !important;
padding-bottom: 36px !important;
}
html body #main-content.categories-section > .system-bulletin-board {
padding: 16px !important;
margin: 0 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
border-radius: 14px !important;
}
html body .system-bulletin-board .bulletin-header {
gap: 8px !important;
margin-bottom: 10px !important;
padding-bottom: 10px !important;
}
html body .system-bulletin-board .bulletin-title {
font-size: 12.5px !important;
letter-spacing: 0px !important;
gap: 6px !important;
}
html body .system-bulletin-board .bulletin-view-all-btn {
padding: 4px 8px !important;
font-size: 11px !important;
gap: 4px !important;
}
html body .system-bulletin-board .notice-list,
html body .system-bulletin-board .bulletin-pane#system-bulletin-list {
gap: 0 !important;
}
html body .system-bulletin-board .notice-item,
html body .system-bulletin-board .bulletin-item {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto !important;
grid-template-rows: auto auto !important;
row-gap: 3px !important;
column-gap: 8px !important;
align-items: center !important;
padding: 8px 2px !important;
min-height: 0 !important;
background: transparent !important;
border: none !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
border-radius: 0 !important;
}
html body .system-bulletin-board .notice-item:first-child,
html body .system-bulletin-board .bulletin-item:first-child {
padding-top: 2px !important;
}
html body .system-bulletin-board .notice-item:last-child,
html body .system-bulletin-board .bulletin-item:last-child {
border-bottom: none !important;
padding-bottom: 2px !important;
}
html body .system-bulletin-board .notice-item .notice-badge,
html body .system-bulletin-board .bulletin-item .item-tag,
html body .system-bulletin-board .bulletin-item.urgent .item-tag,
html body .system-bulletin-board .bulletin-item .item-tag[style] {
grid-column: 1 / 2 !important;
grid-row: 1 / 2 !important;
justify-self: start !important;
font-size: 10px !important;
padding: 0 !important;
max-width: 100% !important;
}
html body .system-bulletin-board .bulletin-item .item-body {
display: contents !important;
}
html body .system-bulletin-board .notice-item .notice-date,
html body .system-bulletin-board .bulletin-item .item-date {
grid-column: 2 / 3 !important;
grid-row: 1 / 2 !important;
justify-self: end !important;
font-size: 11px !important;
white-space: nowrap !important;
}
html body .system-bulletin-board .notice-item .notice-title,
html body .system-bulletin-board .bulletin-item .item-title {
grid-column: 1 / -1 !important;
grid-row: 2 / 3 !important;
width: 100% !important;
min-width: 0 !important;
min-height: 0 !important;
height: auto !important;
padding: 0 !important;
line-height: 1.38 !important;
font-size: 13.5px !important;
white-space: normal !important;
display: -webkit-box !important;
-webkit-box-orient: vertical !important;
-webkit-line-clamp: 2 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
html body .system-bulletin-board .bulletin-item:not(.urgent) .item-title {
grid-row: 1 / -1 !important;
}
html body #main-content.categories-section > #categories-grid-root.categories-grid {
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
gap: 14px !important;
}
html body #main-content.categories-section > #categories-grid-root.categories-grid[data-count="0"] {
display: none !important;
}
html body .category-card-kia {
padding: 18px 16px !important;
min-height: 0 !important;
border-radius: 14px !important;
}
html body .category-card-kia .card-inner-bottom {
padding-top: 12px !important;
margin-top: 12px !important;
}
html body .category-card-kia .quick-links-segment {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 8px !important;
}
html body .category-card-kia .segment-btn {
height: 48px !important;
min-height: 48px !important;
font-size: 13px !important;
padding: 0 8px !important;
}
}
html body .header-tab-item,
html body .category-card-kia .segment-btn {
min-height: 48px !important;
display: inline-flex !important;
align-items: center !important;
}
@media (max-width: 599px) {
html body #git-cookie-banner {
max-width: calc(100vw - 24px) !important;
box-sizing: border-box !important;
}
html body #git-cookie-banner .git-cookie-actions {
display: flex !important;
flex-wrap: wrap !important;
gap: 8px !important;
width: 100% !important;
}
html body #git-cookie-banner .git-cookie-actions button {
flex: 1 1 auto !important;
min-height: 48px !important;
padding-left: 10px !important;
padding-right: 10px !important;
box-sizing: border-box !important;
}
}
html body #kia-request-bento-shell.is-screen2.is-no-rail {
grid-template-columns: minmax(0, 1fr) !important;
}
html body #kia-request-bento-shell.is-screen2.is-no-rail #kia-request-main-col {
grid-column: 1 / -1 !important;
max-width: 100% !important;
}
html body .article-attachments,
html body .comment-attachments {
margin-top: 24px;
background: transparent !important;
border: none !important;
border-radius: 0 !important;
padding: 0 !important;
box-shadow: none !important;
}
html body .article-attachments::before,
html body .comment-attachments::before {
content: none !important;
display: none !important;
}
html body .article-attachments .attachments,
html body .comment-attachments .attachments {
display: flex;
flex-direction: column;
gap: 8px;
list-style: none;
padding: 0;
margin: 0;
}
html body .attachments .attachment-item {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 10px 16px;
min-height: 48px;
padding: 10px 16px 10px 42px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.045) !important;
border: none !important;
box-shadow: none !important;
transition: background-color 0.15s ease;
}
html body .attachments .attachment-item:hover {
background: rgba(56, 189, 248, 0.08) !important;
border: none !important;
}
html body .attachments .attachment-item .attachment-icon {
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
width: 18px;
height: 18px;
color: #38BDF8 !important;
flex-shrink: 0;
}
html body .attachments .attachment-item > a {
color: #F1F5F9 !important;
font-size: 14.5px;
font-weight: 500;
text-decoration: none;
word-break: break-all;
flex: 1 1 220px;
transition: color 0.15s ease;
}
html body .attachments .attachment-item:hover > a {
color: #38BDF8 !important;
}
html body .attachments .attachment-item .attachment-meta {
display: inline-flex;
align-items: center;
gap: 14px;
margin-left: auto;
flex-shrink: 0;
}
html body .attachments .attachment-item .meta-data:not(:last-child)::after {
content: none !important;
display: none !important;
}
html body .attachments .attachment-item span.meta-data {
color: #94A3B8 !important;
font-family: inherit;
font-size: 13px;
}
html body .attachments .attachment-item a.meta-data {
color: #38BDF8 !important;
font-size: 13px;
font-weight: 500;
text-decoration: none !important;
padding: 0 !important;
border-radius: 0 !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
transition: color 0.15s ease;
}
html body .attachments .attachment-item:hover a.meta-data {
color: #7DD3FC !important;
background: transparent !important;
border: none !important;
text-decoration: underline !important;
}
html body .article-footer .share,
html body .article-share .share {
display: inline-flex;
align-items: center;
gap: 8px;
list-style: none;
padding: 0;
margin: 0;
}
html body .article-footer .share li,
html body .article-share .share li {
width: auto;
height: auto;
display: inline-flex;
}
html body .article-footer .share a,
html body .article-share a {
width: 36px;
height: 36px;
border-radius: 8px;
background: transparent !important;
border: none !important;
box-shadow: none !important;
color: #94A3B8 !important;
display: inline-flex;
align-items: center;
justify-content: center;
transition: color 0.15s ease, background-color 0.15s ease;
}
html body .article-footer .share a:hover,
html body .article-share a:hover {
color: #38BDF8 !important;
border: none !important;
background: rgba(255, 255, 255, 0.05) !important;
}
html[dir="rtl"] body .attachments .attachment-item {
padding: 10px 42px 10px 16px;
}
html[dir="rtl"] body .attachments .attachment-item .attachment-icon {
left: auto;
right: 16px;
}
html[dir="rtl"] body .attachments .attachment-item .attachment-meta {
margin-left: 0;
margin-right: auto;
}
html body #new-request-form .git-country-combobox,
html body #new-request-form .git-country-input-wrapper,
html body #new-request-form .git-country-input-wrapper input.git-country-search-input {
height: 52px !important;
min-height: 52px !important;
}
html body #new-request-form [id*="--hint"]:empty,
html body #new-request-form [data-garden-id="forms.input_hint"]:empty,
html body #new-request-form [data-garden-id="dropdowns.combobox.hint"]:empty {
display: none !important;
margin: 0 !important;
}
@media (min-width: 1024px) {
html body header.header,
html body .header {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
align-items: center !important;
justify-content: stretch !important;
padding: 0 30px !important;
height: 76px !important;
box-sizing: border-box !important;
gap: 12px !important;
overflow: visible !important;
}
html body .header > .logo {
grid-column: 1 !important;
grid-row: 1 !important;
justify-self: start !important;
flex-shrink: 0 !important;
min-width: 0 !important;
}
html body .header > .header-tabs-container,
html body .header > #dynamic-header-tabs {
grid-column: 2 !important;
grid-row: 1 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
justify-self: center !important;
margin: 0 !important;
flex: 0 1 auto !important;
gap: 6px !important;
position: relative !important;
left: auto !important;
transform: none !important;
white-space: nowrap !important;
overflow: visible !important;
z-index: 100 !important;
}
html body .header > .nav-wrapper-desktop {
grid-column: 3 !important;
grid-row: 1 !important;
display: flex !important;
align-items: center !important;
justify-self: end !important;
flex-shrink: 0 !important;
min-width: 0 !important;
gap: 14px !important;
white-space: nowrap !important;
}
}
@media (min-width: 1024px) and (max-width: 1400px) {
html body .header > .header-tabs-container,
html body .header > #dynamic-header-tabs {
gap: 4px !important;
}
html body .header .header-tab-item {
font-size: 11.5px !important;
padding: 5px 6px !important;
}
}
@media (min-width: 1024px) and (max-width: 1280px) {
html body header.header,
html body .header {
padding: 0 20px !important;
gap: 8px !important;
}
html body .header > .header-tabs-container,
html body .header > #dynamic-header-tabs {
gap: 3px !important;
}
html body .header .header-tab-item {
font-size: 11px !important;
padding: 4px 5px !important;
}
html body .header > .nav-wrapper-desktop {
gap: 10px !important;
}
html body .header .kia-prop-c-header-label {
display: none !important;
}
html body .header .current-region-label {
max-width: 85px !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
}
html body #kia-global-app-rail .kia-rail-ext-link,
html body .kia-rail-ext-link,
html body .kia-rail-ext-link:hover,
html body .kia-rail-ext-link:focus-visible {
background: transparent !important;
border: none !important;
box-shadow: none !important;
outline: none !important;
}
html body #kia-global-app-rail .kia-rail-icon.ext-icon,
html body .kia-rail-ext-link .kia-rail-icon.ext-icon,
html body .kia-rail-ext-link:hover .kia-rail-icon.ext-icon {
width: 18px !important;
height: 18px !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
color: #64748B !important;
}
html body .kia-rail-ext-link:hover .kia-rail-icon.ext-icon {
color: #38BDF8 !important;
}
html body #kia-global-app-rail.is-pinned .kia-rail-ext-link .kia-rail-text {
display: flex !important;
flex-direction: row !important;
align-items: baseline !important;
gap: 8px !important;
}
html body .kia-rail-ext-link .kia-rail-label {
color: #F8FAFC !important;
font-size: 13.5px !important;
font-weight: 700 !important;
}
html body .kia-rail-ext-link .kia-rail-sub {
color: #64748B !important;
font-size: 12px !important;
font-weight: 400 !important;
}
html body #kia-header-chat-btn,
html body #kia-header-chat-btn.kia-prop-c-header-btn,
html body #kia-header-chat-btn:hover,
html body #kia-header-chat-btn:focus,
html body #kia-header-chat-btn:focus-visible,
html body #kia-header-chat-btn:active {
height: 34px !important;
padding: 0 8px !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
outline: none !important;
}
html body #kia-header-chat-btn .kia-prop-online-dot,
html body #kia-rail-chat-btn .kia-prop-online-dot,
html body .kia-prop-online-dot {
width: 5px !important;
height: 5px !important;
background: #10B981 !important;
border: none !important;
box-shadow: none !important;
}
html body #kia-header-chat-btn .kia-prop-c-header-svg {
color: #94A3B8 !important;
}
html body #kia-header-chat-btn:hover .kia-prop-c-header-svg {
color: #38BDF8 !important;
}
html body #kia-header-chat-btn .kia-prop-c-header-label {
color: #CBD5E1 !important;
font-size: 13px !important;
font-weight: 600 !important;
}
html body #kia-header-chat-btn:hover .kia-prop-c-header-label {
color: #F8FAFC !important;
}
html body .kia-lang-capsule-btn,
html body .kia-lang-capsule-btn:hover,
html body .kia-lang-capsule-btn:focus,
html body .kia-lang-capsule-btn:focus-visible,
html body .kia-lang-dropdown-wrapper.is-open .kia-lang-capsule-btn {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 4px 6px !important;
color: #CBD5E1 !important;
outline: none !important;
}
html body .kia-lang-capsule-btn:hover {
color: #F8FAFC !important;
}
html body .kia-lang-capsule-btn .icon-globe-nav {
color: #64748B !important;
}
html body .kia-lang-capsule-btn:hover .icon-globe-nav {
color: #38BDF8 !important;
}
html body .user-nav .submit-a-request,
html body .user-nav .submit-a-request:hover,
html body .user-nav .submit-a-request:focus-visible {
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
html body .avatar-ring-wrapper,
html body .avatar-ring-wrapper:hover,
html body .user-info .dropdown-toggle,
html body .user-info .dropdown-toggle:hover {
padding: 0 !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
html body .category-card-kia,
html body .category-card-kia:hover,
html body .category-card-kia:focus-within {
background: #0B1320 !important;
border: none !important;
box-shadow: none !important;
}
html body .category-card-kia::before,
html body .category-card-kia::after {
display: none !important;
border: none !important;
box-shadow: none !important;
}
html body .category-card-kia .category-badge {
color: #64748B !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
}
html body .category-card-kia .category-title,
html body .category-card-kia .category-title a,
html body .category-card-kia .category-title a.card-stretched-link,
html body .category-card-kia:hover .category-title,
html body .category-card-kia:hover .category-title a,
html body .category-card-kia:hover .category-title a.card-stretched-link {
text-decoration: none !important;
text-decoration-line: none !important;
border-bottom: none !important;
box-shadow: none !important;
background-image: none !important;
color: #F8FAFC !important;
}
html body .category-card-kia .category-title::after,
html body .category-card-kia .category-title a::after {
display: none !important;
content: none !important;
}
html body .category-card-kia .card-arrow-btn,
html body .category-card-kia:hover .card-arrow-btn {
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
html body .category-card-kia .quick-links-segment,
html body .category-card-kia .segment-btn,
html body .category-card-kia .segment-btn:hover {
border: none !important;
box-shadow: none !important;
}
html body zd-autocomplete,
html body zd-autocomplete-multibrand,
html body [ data-garden-id*="autocomplete" ],
html body .zd-autocomplete {
background: #0A101A !important;
border: none !important;
box-shadow: none !important;
border-radius: 10px !important;
color: #F8FAFC !important;
overflow: hidden !important;
}
html body zd-autocomplete-header,
html body zd-autocomplete-multibrand-header {
background: #0A101A !important;
border: none !important;
color: #94A3B8 !important;
}
html body zd-autocomplete-option,
html body zd-autocomplete-multibrand-option,
html body zd-autocomplete li,
html body zd-autocomplete [role="option"] {
background: transparent !important;
border: none !important;
box-shadow: none !important;
color: #F8FAFC !important;
padding: 10px 14px !important;
}
html body zd-autocomplete-option:hover,
html body zd-autocomplete-option[aria-selected="true"],
html body zd-autocomplete-option[data-focused="true"],
html body zd-autocomplete-multibrand-option:hover,
html body zd-autocomplete-multibrand-option[aria-selected="true"],
html body zd-autocomplete [role="option"]:hover,
html body zd-autocomplete [role="option"][aria-selected="true"] {
background: rgba(255, 255, 255, 0.04) !important;
border: none !important;
box-shadow: none !important;
}
html body zd-autocomplete *,
html body zd-autocomplete-multibrand * {
color: #F8FAFC !important;
background-color: transparent !important;
border-color: transparent !important;
box-shadow: none !important;
text-decoration: none !important;
}
html body zd-autocomplete :is(a, p, li, div, span, small, ol, zd-autocomplete-breadcrumbs, zd-autocomplete-breadcrumbs-multibrand, zd-autocomplete-multibrand-breadcrumbs),
html body zd-autocomplete-multibrand :is(a, p, li, div, span, small, ol) {
color: #94A3B8 !important;
}
html body zd-autocomplete :is(zd-autocomplete-title, zd-autocomplete-title-multibrand, zd-autocomplete-multibrand-title, zd-autocomplete-title-multibrand *, zd-autocomplete-title *),
html body zd-autocomplete-multibrand :is(zd-autocomplete-title-multibrand, zd-autocomplete-title-multibrand *) {
color: #F8FAFC !important;
}
html body zd-autocomplete :is(em, b, strong, mark),
html body zd-autocomplete-multibrand :is(em, b, strong, mark) {
color: #38BDF8 !important;
font-weight: 700 !important;
font-style: normal !important;
background: transparent !important;
}
html body [data-helper="generative_answers"],
html body [data-helper="generative_answers"] > div,
html body .search-results-column > div:first-child:not(.search-results-subheader):not(#kia-loadmore-container) {
background: #0A121E !important;
border: none !important;
box-shadow: none !important;
outline: none !important;
border-radius: 12px !important;
color: #E2E8F0 !important;
}
html body [data-helper="generative_answers"] *,
html body .search-results-column > div:first-child:not(.search-results-subheader):not(#kia-loadmore-container) * {
border-color: transparent !important;
box-shadow: none !important;
}
html body [data-helper="generative_answers"] h2,
html body [data-helper="generative_answers"] h3,
html body [data-helper="generative_answers"] strong,
html body [data-helper="generative_answers"] b {
color: #F8FAFC !important;
}
html body [data-helper="generative_answers"] p,
html body [data-helper="generative_answers"] div,
html body [data-helper="generative_answers"] span {
color: #E2E8F0 !important;
}
html body [data-helper="generative_answers"] a,
html body [data-helper="generative_answers"] a:visited,
html body .search-results-column > div:first-child:not(.search-results-subheader):not(#kia-loadmore-container) a,
html body .search-results-column > div:first-child:not(.search-results-subheader):not(#kia-loadmore-container) a:visited {
color: #E2E8F0 !important;
font-weight: 600 !important;
text-decoration: none !important;
border: none !important;
}
html body [data-helper="generative_answers"] a:hover,
html body .search-results-column > div:first-child:not(.search-results-subheader):not(#kia-loadmore-container) a:hover {
color: #38BDF8 !important;
}
html body #kia-standard-pagination-wrap,
html body .kia-standard-pagination-wrap,
html body.search-results-page .pagination,
html body.search-results-page nav.pagination,
html body .search-results-column .pagination,
html body .search-results-column nav.pagination,
html body .search-results .pagination,
html body .search-results nav.pagination {
display: none !important;
}
html body #kia-loadmore-container,
html body .kia-search-loadmore-wrap {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 4px 0 !important;
}
html body #kia-loadmore-container .kia-progress-bar-track,
html body .kia-progress-bar-track {
background: rgba(255, 255, 255, 0.08) !important;
border: none !important;
box-shadow: none !important;
}
html body #kia-loadmore-container .kia-progress-bar-fill,
html body .kia-progress-bar-fill {
background: #38BDF8 !important;
border: none !important;
box-shadow: none !important;
}
html body #kia-loadmore-container .kia-btn-loadmore,
html body .kia-btn-loadmore {
background: rgba(255, 255, 255, 0.04) !important;
border: none !important;
box-shadow: none !important;
color: #E2E8F0 !important;
}
html body #kia-loadmore-container .kia-btn-loadmore.is-all-loaded,
html body #kia-loadmore-container .kia-btn-loadmore[disabled],
html body .kia-btn-loadmore.is-all-loaded,
html body .kia-btn-loadmore[disabled] {
display: none !important;
}
html body #kia-global-app-rail #kia-rail-chat-btn,
html body #kia-global-app-rail:not(.is-pinned) #kia-rail-chat-btn,
html body #kia-global-app-rail:not(.is-pinned) #kia-rail-chat-btn.kia-prop-c-rail-btn,
html body #kia-global-app-rail.is-pinned #kia-rail-chat-btn,
html body #kia-global-app-rail.is-pinned #kia-rail-chat-btn.kia-prop-c-rail-btn,
html body #kia-global-app-rail #kia-rail-chat-btn.kia-prop-c-rail-btn:hover,
html body #kia-global-app-rail #kia-rail-chat-btn.kia-prop-c-rail-btn:focus-visible,
html body #kia-rail-chat-btn,
html body #kia-rail-chat-btn.kia-prop-c-rail-btn,
html body #kia-rail-chat-btn:hover,
html body #kia-rail-chat-btn:focus,
html body #kia-rail-chat-btn:focus-visible {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 8px !important;
outline: none !important;
}
html body #kia-rail-chat-btn .kia-prop-c-rail-icon-wrap {
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
html body #kia-rail-chat-btn .kia-prop-c-rail-title {
color: #F8FAFC !important;
font-weight: 700 !important;
}
html body #kia-rail-chat-btn .kia-prop-c-rail-sub {
color: #64748B !important;
font-weight: 400 !important;
}
@media (min-width: 1025px) {
html body.kia-messenger-active:has(#kia-global-app-rail.is-pinned) iframe[title*="메시징"]:not([style*="width: 64px"]):not([style*="height: 64px"]),
html body.kia-messenger-active:has(#kia-global-app-rail.is-pinned) iframe[title*="Messaging"]:not([style*="width: 64px"]):not([style*="height: 64px"]),
html body.kia-messenger-active:has(#kia-global-app-rail.is-pinned) iframe[title*="채팅"]:not([style*="width: 64px"]):not([style*="height: 64px"]),
html body.kia-messenger-active:has(#kia-global-app-rail.is-pinned) .zEWidget-messenger {
left: 344px !important;
right: auto !important;
}
}
html body form.search.search :is(.clear-button, button[type="reset"], button[aria-label*="Clear" i]),
html body .search-input-container.search-input-container :is(.clear-button, button[type="reset"], button[aria-label*="Clear" i]) {
position: absolute !important;
top: 50% !important;
right: 14px !important;
transform: translateY(-50%) !important;
width: 28px !important;
height: 28px !important;
min-width: 28px !important;
min-height: 28px !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
backdrop-filter: none !important;
border-radius: 6px !important;
color: #94A3B8 !important;
}
html body form.search.search :is(.clear-button, button[type="reset"], button[aria-label*="Clear" i]):is(:hover, :focus, :active),
html body .search-input-container.search-input-container :is(.clear-button, button[type="reset"], button[aria-label*="Clear" i]):is(:hover, :focus, :active) {
background: rgba(255, 255, 255, 0.06) !important;
color: #F8FAFC !important;
box-shadow: none !important;
border: none !important;
outline: none !important;
transform: translateY(-50%) !important;
}
html body form.search.search :is(.clear-button, button[type="reset"], button[aria-label*="Clear" i]):focus-visible,
html body .search-input-container.search-input-container :is(.clear-button, button[type="reset"], button[aria-label*="Clear" i]):focus-visible {
outline: 2px solid #38BDF8 !important;
outline-offset: 1px !important;
}
html body form.search input[type="search"]::-webkit-search-cancel-button,
html body .search-input-container input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none !important;
appearance: none !important;
display: none !important;
}
html body form.search input#query,
html body form.search input[type="search"],
html body .search-input-container input#query,
html body .search-input-container input[type="search"] {
line-height: 1.4 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
display: flex !important;
align-items: center !important;
}
html body .search-input-container input#query,
html body .search-input-container input[type="search"] {
min-height: 44px !important;
box-sizing: border-box !important;
}
@media (min-width: 1025px) {
html body #kia-global-app-rail:not(.is-pinned):hover .kia-rail-ext-link .kia-rail-text,
html body #kia-global-app-rail:not(.is-pinned):hover .kia-rail-ext-link .kia-rail-ext-arrow {
display: none !important;
}
html body #kia-global-app-rail:not(.is-pinned) .kia-rail-ext-link .kia-rail-short-label {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
}
html body :is(form.search.search, .search-input-container.search-input-container, .hero form.search, .sub-nav form.search, form.search, .search-input-container) :is(.clear-button.clear-button, .clear-button, button[type="reset"], button[aria-label*="Clear" i]) {
position: absolute !important;
right: 12px !important;
top: 50% !important;
bottom: auto !important;
left: auto !important;
transform: translateY(-50%) !important;
width: 24px !important;
height: 24px !important;
min-width: 24px !important;
min-height: 24px !important;
max-width: 24px !important;
max-height: 24px !important;
padding: 0 !important;
margin: 0 !important;
border-radius: 0 !important;
background: transparent !important;
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
outline: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
color: #64748B !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
transition: color 0.15s ease !important;
}
html body :is(form.search.search, .search-input-container.search-input-container, .hero form.search, .sub-nav form.search, form.search, .search-input-container) :is(.clear-button.clear-button, .clear-button, button[type="reset"], button[aria-label*="Clear" i]):is(:hover, :focus, :focus-visible, :active) {
background: transparent !important;
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
outline: none !important;
transform: translateY(-50%) !important;
color: #F8FAFC !important;
}
html body :is(form.search.search, .search-input-container.search-input-container, .hero form.search, .sub-nav form.search, form.search, .search-input-container) :is(.clear-button.clear-button, .clear-button, button[type="reset"], button[aria-label*="Clear" i]) svg {
position: static !important;
transform: none !important;
width: 14px !important;
height: 14px !important;
min-width: 14px !important;
min-height: 14px !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
color: inherit !important;
pointer-events: none !important;
}
html body iframe#launcher,
html body iframe[title*="button" i],
html body iframe[title*="launch" i],
html body iframe[title*="버튼"],
html body iframe[title*="닫기"],
html body iframe[title*="보낸 메시지"],
html body iframe[title*="close message" i],
html body iframe[title*="message from" i],
html body div:has(> iframe#launcher),
html body div:has(> iframe[title*="button" i]),
html body div:has(> iframe[title*="버튼"]),
html body div:has(> iframe[title*="닫기"]),
html body div:has(> iframe[title*="보낸 메시지"]),
html body div:has(> iframe[title*="close message" i]),
html body div:has(> iframe[title*="message from" i]) {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
width: 0 !important;
height: 0 !important;
pointer-events: none !important;
transition: none !important;
animation: none !important;
}
:root {
--kia-dock-shift: 16px;
--kia-dock-ease: cubic-bezier(0.22, 1, 0.36, 1);
--kia-dock-dur-in: 0.28s;
--kia-dock-dur-out: 0.22s;
}
@media (prefers-reduced-motion: reduce) {
:root {
--kia-dock-shift: 0px;
--kia-dock-dur-in: 0.01s;
--kia-dock-dur-out: 0.01s;
}
}
@media (min-width: 1025px) {
html body iframe:is([title*="messaging" i], [title*="message" i], [title*="메시징"], [title*="메시지"], [title*="채팅"]):not(#launcher):not([title*="button" i]):not([title*="launch" i]):not([title*="버튼"]):not([title*="닫기"]):not([title*="보낸 메시지"]),
html body div:has(> iframe:is([title*="messaging" i], [title*="message" i], [title*="메시징"], [title*="메시지"], [title*="채팅"]):not(#launcher):not([title*="button" i]):not([title*="launch" i]):not([title*="버튼"]):not([title*="닫기"]):not([title*="보낸 메시지"])) {
left: var(--kia-messenger-left-offset, 104px) !important;
right: auto !important;
bottom: 28px !important;
max-height: calc(100dvh - 162px) !important;
}
html body:has(#kia-global-app-rail.is-pinned) iframe:is([title*="messaging" i], [title*="message" i], [title*="메시징"], [title*="메시지"], [title*="채팅"]):not(#launcher):not([title*="button" i]):not([title*="launch" i]):not([title*="버튼"]):not([title*="닫기"]):not([title*="보낸 메시지"]),
html body:has(#kia-global-app-rail.is-pinned) div:has(> iframe:is([title*="messaging" i], [title*="message" i], [title*="메시징"], [title*="메시지"], [title*="채팅"]):not(#launcher):not([title*="button" i]):not([title*="launch" i]):not([title*="버튼"]):not([title*="닫기"]):not([title*="보낸 메시지"])) {
left: 344px !important;
right: auto !important;
}
}
@media (max-width: 1024px) {
html body iframe:is([title*="messaging" i], [title*="message" i], [title*="메시징"], [title*="메시지"], [title*="채팅"]):not(#launcher):not([title*="button" i]):not([title*="launch" i]):not([title*="버튼"]):not([title*="닫기"]):not([title*="보낸 메시지"]),
html body div:has(> iframe:is([title*="messaging" i], [title*="message" i], [title*="메시징"], [title*="메시지"], [title*="채팅"]):not(#launcher):not([title*="button" i]):not([title*="launch" i]):not([title*="버튼"]):not([title*="닫기"]):not([title*="보낸 메시지"])) {
right: var(--kia-content-right-gutter, 24px) !important;
left: auto !important;
bottom: 86px !important;
max-height: calc(100dvh - 218px) !important;
}
}
html body:not(.kia-messenger-active):not(.kia-messenger-closing) > div > div > iframe:not(#launcher),
html body:not(.kia-messenger-active):not(.kia-messenger-closing) iframe:is([title*="messaging" i], [title*="message" i], [title*="메시징"], [title*="메시지"], [title*="채팅"]):not(#launcher):not([title*="button" i]):not([title*="launch" i]):not([title*="버튼"]):not([title*="닫기"]):not([title*="보낸 메시지"]) {
display: block !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
transform: translate3d(0, var(--kia-dock-shift), 0) !important;
transition: none !important;
animation: none !important;
will-change: transform, opacity !important;
border-top-left-radius: 0px !important;
border-top-right-radius: 0px !important;
border-bottom-left-radius: 16px !important;
border-bottom-right-radius: 16px !important;
border-radius: 0 0 16px 16px !important;
border: none !important;
box-shadow: none !important;
}
html body.kia-messenger-closing:not(.kia-messenger-active) iframe:is([title*="messaging" i], [title*="message" i], [title*="메시징"], [title*="메시지"], [title*="채팅"]):not(#launcher):not([title*="button" i]):not([title*="launch" i]):not([title*="버튼"]):not([title*="닫기"]):not([title*="보낸 메시지"]) {
display: block !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
transform: translate3d(0, var(--kia-dock-shift), 0) !important;
transition: opacity var(--kia-dock-dur-out) var(--kia-dock-ease),
transform var(--kia-dock-dur-out) var(--kia-dock-ease),
visibility 0s linear var(--kia-dock-dur-out) !important;
will-change: transform, opacity !important;
border-top-left-radius: 0px !important;
border-top-right-radius: 0px !important;
border-bottom-left-radius: 16px !important;
border-bottom-right-radius: 16px !important;
border-radius: 0 0 16px 16px !important;
border: none !important;
box-shadow: none !important;
}
html body.kia-messenger-active iframe:is([title*="messaging" i], [title*="message" i], [title*="메시징"], [title*="메시지"], [title*="채팅"]):not(#launcher):not([title*="button" i]):not([title*="launch" i]):not([title*="버튼"]):not([title*="닫기"]):not([title*="보낸 메시지"]) {
display: block !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
transform: translate3d(0, 0, 0) !important;
transition: opacity var(--kia-dock-dur-in) var(--kia-dock-ease),
transform var(--kia-dock-dur-in) var(--kia-dock-ease),
visibility 0s linear 0s !important;
will-change: transform, opacity !important;
border-top-left-radius: 0px !important;
border-top-right-radius: 0px !important;
border-bottom-left-radius: 16px !important;
border-bottom-right-radius: 16px !important;
border-radius: 0 0 16px 16px !important;
border: none !important;
box-shadow: none !important;
z-index: 2147483000 !important;
}
html body:not(.kia-messenger-active):not(.kia-messenger-closing) > div:has(> div > iframe:not(#launcher)),
html body:not(.kia-messenger-active):not(.kia-messenger-closing) div:has(> iframe:is([title*="messaging" i], [title*="message" i], [title*="메시징"], [title*="메시지"], [title*="채팅"]):not(#launcher):not([title*="button" i]):not([title*="launch" i]):not([title*="버튼"]):not([title*="닫기"]):not([title*="보낸 메시지"])) {
display: block !important;
opacity: 1 !important;
visibility: hidden !important;
pointer-events: none !important;
transform: none !important;
will-change: auto !important;
transition: none !important;
animation: none !important;
}
html body.kia-messenger-closing:not(.kia-messenger-active) div:has(> iframe:is([title*="messaging" i], [title*="message" i], [title*="메시징"], [title*="메시지"], [title*="채팅"]):not(#launcher):not([title*="button" i]):not([title*="launch" i]):not([title*="버튼"]):not([title*="닫기"]):not([title*="보낸 메시지"])) {
display: block !important;
opacity: 1 !important;
visibility: hidden !important;
pointer-events: none !important;
transform: none !important;
will-change: auto !important;
transition: visibility 0s linear var(--kia-dock-dur-out) !important;
}
html body.kia-messenger-active div:has(> iframe:is([title*="messaging" i], [title*="message" i], [title*="메시징"], [title*="메시지"], [title*="채팅"]):not(#launcher):not([title*="button" i]):not([title*="launch" i]):not([title*="버튼"]):not([title*="닫기"]):not([title*="보낸 메시지"])) {
display: block !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
transform: none !important;
will-change: auto !important;
transition: visibility 0s linear 0s !important;
border-top-left-radius: 0px !important;
border-top-right-radius: 0px !important;
border-bottom-left-radius: 16px !important;
border-bottom-right-radius: 16px !important;
border-radius: 0 0 16px 16px !important;
border: none !important;
box-shadow: none !important;
z-index: 2147483000 !important;
}
html body:not(.kia-messenger-active):not(.kia-messenger-closing) div:has(> div > iframe:is([title*="messaging" i], [title*="message" i], [title*="메시징"], [title*="메시지"], [title*="채팅"]):not(#launcher):not([title*="button" i]):not([title*="launch" i]):not([title*="버튼"]):not([title*="닫기"]):not([title*="보낸 메시지"])) {
opacity: 1 !important;
visibility: hidden !important;
pointer-events: none !important;
transform: none !important;
transition: none !important;
animation: none !important;
}
html body.kia-messenger-closing:not(.kia-messenger-active) div:has(> div > iframe:is([title*="messaging" i], [title*="message" i], [title*="메시징"], [title*="메시지"], [title*="채팅"]):not(#launcher):not([title*="button" i]):not([title*="launch" i]):not([title*="버튼"]):not([title*="닫기"]):not([title*="보낸 메시지"])) {
opacity: 1 !important;
visibility: hidden !important;
pointer-events: none !important;
transform: none !important;
transition: visibility 0s linear var(--kia-dock-dur-out) !important;
}
html body.kia-messenger-active div:has(> div > iframe:is([title*="messaging" i], [title*="message" i], [title*="메시징"], [title*="메시지"], [title*="채팅"]):not(#launcher):not([title*="button" i]):not([title*="launch" i]):not([title*="버튼"]):not([title*="닫기"]):not([title*="보낸 메시지"])) {
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
transform: none !important;
transition: visibility 0s linear 0s !important;
}
html body #kia-chat-dock-header {
display: flex !important;
position: fixed !important;
height: 42px !important;
min-height: 42px !important;
max-height: 42px !important;
background: #080E1A !important;
background-color: #080E1A !important;
color: #F8FAFC !important;
border-radius: 16px 16px 0 0 !important;
border: none !important;
box-shadow: none !important;
outline: none !important;
padding: 0 14px !important;
margin: 0 !important;
box-sizing: border-box !important;
align-items: center !important;
justify-content: space-between !important;
z-index: 2147483002 !important;
user-select: none !important;
font-family: 'Kia Signature', 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
transform: translate3d(0, var(--kia-dock-shift), 0) !important;
transition: none !important;
will-change: transform, opacity !important;
}
html body.kia-messenger-closing:not(.kia-messenger-active) #kia-chat-dock-header {
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
transform: translate3d(0, var(--kia-dock-shift), 0) !important;
transition: opacity var(--kia-dock-dur-out) var(--kia-dock-ease),
transform var(--kia-dock-dur-out) var(--kia-dock-ease),
visibility 0s linear var(--kia-dock-dur-out) !important;
}
html body #kia-chat-dock-header::after {
content: "" !important;
position: absolute !important;
left: 0 !important;
right: 0 !important;
top: 100% !important;
height: 1px !important;
background: #080E1A !important;
pointer-events: none !important;
}
html body.kia-messenger-active #kia-chat-dock-header.is-visible {
display: flex !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
transform: translate3d(0, 0, 0) !important;
transition: opacity var(--kia-dock-dur-in) var(--kia-dock-ease),
transform var(--kia-dock-dur-in) var(--kia-dock-ease),
visibility 0s linear 0s !important;
}
html body #kia-chat-dock-header .kia-chat-dock-title {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
font-size: 12.5px !important;
font-weight: 700 !important;
color: #E2E8F0 !important;
line-height: 1 !important;
letter-spacing: 0.01em !important;
}
html body #kia-chat-dock-header .kia-chat-dock-dot {
width: 8px !important;
height: 8px !important;
border-radius: 50% !important;
background: #10B981 !important;
box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2) !important;
flex-shrink: 0 !important;
}
html body #kia-chat-dock-header .kia-chat-dock-actions {
display: inline-flex !important;
align-items: center !important;
gap: 4px !important;
}
html body #kia-chat-dock-header #kia-chat-dock-close-btn {
width: 28px !important;
height: 28px !important;
min-width: 28px !important;
min-height: 28px !important;
max-width: 28px !important;
max-height: 28px !important;
padding: 0 !important;
margin: 0 !important;
border-radius: 7px !important;
border: none !important;
box-shadow: none !important;
outline: none !important;
background: transparent !important;
background-color: transparent !important;
color: #94A3B8 !important;
cursor: pointer !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
pointer-events: auto !important;
transition: background-color 0.14s ease, color 0.14s ease !important;
}
html body #kia-chat-dock-header #kia-chat-dock-close-btn:is(:hover, :focus-visible, :active) {
background: rgba(244, 63, 94, 0.18) !important;
background-color: rgba(244, 63, 94, 0.18) !important;
color: #FDA4AF !important;
border: none !important;
box-shadow: none !important;
outline: none !important;
}
html body #kia-chat-dock-header #kia-chat-dock-close-btn svg {
width: 16px !important;
height: 16px !important;
min-width: 16px !important;
min-height: 16px !important;
pointer-events: none !important;
color: inherit !important;
}
html body.kia-messenger-open:not(.kia-messenger-active) :is(#kia-header-chat-btn, #kia-rail-chat-btn, .kia-custom-chat-trigger) {
cursor: progress !important;
}
html body .hero-inner-left {
width: 100% !important;
max-width: 800px !important;
margin-left: auto !important;
margin-right: auto !important;
box-sizing: border-box !important;
}
html body .hero-inner-left .search-wrapper-spacex {
display: block !important;
width: 100% !important;
max-width: 680px !important;
margin-left: auto !important;
margin-right: auto !important;
box-sizing: border-box !important;
}
@media (max-width: 1024px) {
html body .hero-inner-left {
width: min(92vw, 680px) !important;
max-width: 680px !important;
}
html body .hero-inner-left .search-wrapper-spacex {
display: block !important;
width: min(92vw, 640px) !important;
max-width: 640px !important;
}
}
html body .hero-inner-left .search-input-container {
width: 100% !important;
min-height: 54px !important;
height: 54px !important;
padding: 4px 16px 4px 48px !important;
border: 1px solid rgba(255, 255, 255, 0.18) !important;
border-radius: 30px !important;
box-sizing: border-box !important;
display: flex !important;
align-items: center !important;
position: relative !important;
}
html body .hero-inner-left .search-input-container form.search,
html body .hero-inner-left .search-input-container .search-input-spacex {
flex: 1 1 0% !important;
width: 100% !important;
height: 44px !important;
min-height: 44px !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
box-sizing: border-box !important;
}
html body .hero-inner-left .search-input-container input#query,
html body .hero-inner-left .search-input-container input[type="search"] {
width: 100% !important;
height: 44px !important;
min-height: 44px !important;
max-height: 44px !important;
padding: 0 12px 0 0 !important;
margin: 0 !important;
line-height: 1.4 !important;
font-size: 15px !important;
box-sizing: border-box !important;
display: flex !important;
align-items: center !important;
}
html body .kia-hero-keyword-chips {
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-wrap: wrap !important;
gap: 8px !important;
margin-top: 12px !important;
padding: 0 4px !important;
}
html body .kia-hero-keyword-chips .kia-keyword-label {
font-size: 12px !important;
font-weight: 600 !important;
color: #94A3B8 !important;
margin-right: 2px !important;
}
html body .kia-hero-keyword-chips .kia-keyword-chip {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 40px !important;
height: 40px !important;
padding: 0 14px !important;
border-radius: 999px !important;
background: rgba(56, 189, 248, 0.07) !important;
border: 1px solid rgba(56, 189, 248, 0.35) !important;
color: #E2E8F0 !important;
font-size: 12.5px !important;
font-weight: 600 !important;
text-decoration: none !important;
backdrop-filter: blur(8px) !important;
transition: all 0.2s ease !important;
}
html body .kia-hero-keyword-chips .kia-keyword-chip:hover,
html body .kia-hero-keyword-chips .kia-keyword-chip:focus-visible {
background: rgba(56, 189, 248, 0.18) !important;
border-color: #38BDF8 !important;
color: #FFFFFF !important;
}
/* [KIA-OUTLINELESS-CONCEPT-A:BEGIN] */
:root {
--kia-ol-bg: #05141F;
--kia-ol-s1: #091926;
--kia-ol-s2: #0E2233;
--kia-ol-s3: #142D42;
--kia-ol-s4: #1B3B56;
--kia-ol-accent: #38BDF8;
--kia-ol-text-1: #F8FAFC;
--kia-ol-text-2: #94A3B8;
--kia-ol-text-3: #64748B;
}
html body :is(a, button, input, select, textarea, [tabindex]):focus-visible {
outline: 2px solid #38BDF8 !important;
outline-offset: 2px !important;
}
html body {
font-family: 'Kia Signature', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif !important;
}
html body .header,
html body .header-wrapper,
html body .header-inner,
html body header.kia-header {
border: 0 !important;
border-bottom: 0 !important;
box-shadow: none !important;
}
html body #kia-global-app-rail#kia-global-app-rail,
html body aside#kia-global-app-rail,
html body #kia-global-app-rail,
html body .kia-rail-nav,
html body .kia-rail-item,
html body .kia-rail-toggle-btn,
html body .kia-rail-divider {
border: 0 !important;
border-right: 0 !important;
border-left: 0 !important;
border-top: 0 !important;
border-bottom: 0 !important;
box-shadow: none !important;
}
html body #kia-global-app-rail#kia-global-app-rail,
html body #kia-global-app-rail {
background: #07131E !important;
}
html body .kia-rail-item {
border-radius: 12px !important;
}
html body .kia-rail-item:hover {
background: var(--kia-ol-s2) !important;
}
html body .kia-rail-item.active,
html body .kia-rail-item.is-active,
html body .kia-rail-item[aria-current="page"],
html body .kia-rail-item[aria-selected="true"] {
background: var(--kia-ol-s3) !important;
}
html body .kia-rail-divider {
background: var(--kia-ol-s2) !important;
height: 2px !important;
}
html body #opt3-flyout#opt3-flyout,
html body #opt3-flyout.opt3-mega-flyout,
html body .opt3-mega-flyout.opt3-mega-flyout,
html body #opt3-flyout,
html body .opt3-mega-flyout,
html body .opt3-grid,
html body .opt3-col,
html body .opt3-col-header,
html body .opt3-link-item,
html body .opt3-iso-badge,
html body .na-disabled-row,
html body .opt3-na-hub-pod,
html body .kia-lang-dropdown-menu,
html body .kia-lang-option {
border: 0 !important;
border-top: 0 !important;
border-bottom: 0 !important;
border-left: 0 !important;
border-right: 0 !important;
box-shadow: none !important;
}
html body .na-disabled-row {
background: rgba(255, 255, 255, 0.025) !important;
border-radius: 10px !important;
}
html body .opt3-na-hub-pod {
background: rgba(56, 189, 248, 0.10) !important;
border: 0 !important;
border-radius: 12px !important;
}
html body footer.kia-footer-split,
html body .footer,
html body .footer-inner,
html body .footer-language-selector .dropdown-toggle,
html body .footer-language-selector .dropdown-menu {
border: 0 !important;
border-top: 0 !important;
box-shadow: none !important;
}
html body #git-cookie-banner,
html body #git-cookie-drawer,
html body .git-cookie-modal-box,
html body .git-cookie-cat-item,
html body .git-cookie-btn-equal,
html body #git-cookie-reopen-btn {
border: 0 !important;
box-shadow: none !important;
}
html body #git-cookie-banner,
html body #git-cookie-drawer,
html body .git-cookie-modal-box {
background: var(--kia-ol-s1) !important;
}
html body .git-cookie-cat-item,
html body .git-cookie-btn-equal,
html body #git-cookie-reopen-btn {
background: var(--kia-ol-s2) !important;
}
html body .git-cookie-cat-item:hover,
html body .git-cookie-btn-equal:hover,
html body #git-cookie-reopen-btn:hover {
background: var(--kia-ol-s3) !important;
}
html body .kia-mobile-sticky-dock,
html body .kia-mobile-sticky-dock a,
html body .kia-mobile-sticky-dock button {
border: 0 !important;
border-top: 0 !important;
box-shadow: none !important;
}
html body .hero-inner-left .search-input-container {
border: 0 !important;
box-shadow: none !important;
background: rgba(14, 34, 51, 0.88) !important;
-webkit-backdrop-filter: blur(14px) !important;
backdrop-filter: blur(14px) !important;
}
html body .hero-inner-left .search-input-container:focus-within {
background: rgba(20, 45, 66, 0.96) !important;
outline: 2px solid #38BDF8 !important;
outline-offset: 2px !important;
}
html body .kia-hero-keyword-chips .kia-keyword-chip {
border: 0 !important;
box-shadow: none !important;
background: rgba(56, 189, 248, 0.11) !important;
}
html body .kia-hero-keyword-chips .kia-keyword-chip:hover,
html body .kia-hero-keyword-chips .kia-keyword-chip:focus-visible {
background: rgba(56, 189, 248, 0.22) !important;
border: 0 !important;
}
html body .system-bulletin-board,
html body .bulletin-header,
html body .bulletin-list,
html body .bulletin-item,
html body .bulletin-badge,
html body .bulletin-more-btn {
border: 0 !important;
box-shadow: none !important;
}
html body .system-bulletin-board {
background: var(--kia-ol-s1) !important;
border-radius: 16px !important;
}
html body .bulletin-item {
background: var(--kia-ol-s2) !important;
border-radius: 12px !important;
}
html body .bulletin-item:hover {
background: var(--kia-ol-s3) !important;
}
html body .category-container,
html body .category-content,
html body .section-tree,
html body .section-tree .section,
html body .section-tree-title,
html body .article-list,
html body .article-list-item,
html body .article-list-item a,
html body .see-all-articles {
border: 0 !important;
border-bottom: 0 !important;
box-shadow: none !important;
}
html body .section-tree .section {
background: var(--kia-ol-s1) !important;
border-radius: 16px !important;
padding: 20px !important;
}
html body .article-list-item {
background: var(--kia-ol-s2) !important;
border-radius: 12px !important;
padding: 12px 16px !important;
margin-bottom: 8px !important;
}
html body .article-list-item:hover {
background: var(--kia-ol-s3) !important;
}
html body #notice-hub-app,
html body .notice-hub-hero,
html body .multi-select-chip-group .chip-btn,
html body .multi-select-chip-group .chip-btn[aria-pressed="true"],
html body .chip-count-badge,
html body .notice-search-bar,
html body .notice-search-input-wrap,
html body .notice-search-input,
html body .notice-timeline-list,
html body .notice-card,
html body .notice-card-badge,
html body .notice-skeleton-card,
html body .notice-load-more-btn {
border: 0 !important;
box-shadow: none !important;
}
html body .notice-hub-hero,
html body .notice-timeline-list {
background: var(--kia-ol-s1) !important;
}
html body .multi-select-chip-group .chip-btn,
html body .notice-search-bar,
html body .notice-search-input-wrap,
html body .notice-search-input,
html body .notice-card,
html body .notice-skeleton-card,
html body .notice-load-more-btn {
background: var(--kia-ol-s2) !important;
}
html body .multi-select-chip-group .chip-btn:hover,
html body .notice-card:hover,
html body .notice-load-more-btn:hover {
background: var(--kia-ol-s3) !important;
}
html body .multi-select-chip-group .chip-btn[aria-pressed="true"] {
background: var(--kia-ol-s4) !important;
}
html body .chip-count-badge,
html body .notice-card-badge {
background: var(--kia-ol-s3) !important;
}
html body {
--kia-ol-s1: #091926;
--kia-ol-s2: #0E2233;
--kia-ol-s3: #142D42;
--kia-ol-s4: #1B3B56;
}
html body .article-container,
html body .article,
html body .article-sidebar,
html body .collapsible-sidebar,
html body .collapsible-sidebar-title,
html body .sidenav-item,
html body .sidenav-item.current-article {
border: 0 !important;
box-shadow: none !important;
font-family: 'Kia Signature', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif !important;
}
html body .sidenav-item {
border-radius: 10px !important;
padding: 10px 14px !important;
background: transparent !important;
transition: background-color 0.15s ease, color 0.15s ease;
}
html body .sidenav-item:hover {
background: var(--kia-ol-s2) !important;
}
html body .sidenav-item.current-article {
background: var(--kia-ol-s3) !important;
color: #38BDF8 !important;
}
html body #git-ai-chips-container,
html body .git-ai-chip,
html body .article-header,
html body .article-author,
html body .article-meta,
html body .btn-follow-c3-fusion,
html body .c1-speech-bubble,
html body .article-subscribe,
html body .article-unsubscribe {
border: 0 !important;
box-shadow: none !important;
}
html body #git-ai-chips-container {
background: var(--kia-ol-s1) !important;
border-radius: 14px !important;
}
html body .git-ai-chip,
html body .btn-follow-c3-fusion {
background: var(--kia-ol-s2) !important;
transition: background-color 0.15s ease;
}
html body .git-ai-chip:hover,
html body .btn-follow-c3-fusion:hover {
background: var(--kia-ol-s3) !important;
}
html body .article-body table,
html body .article-body thead,
html body .article-body th,
html body .article-body tbody,
html body .article-body tr,
html body .article-body td {
border: 0 !important;
border-left: 0 !important;
border-top: 0 !important;
border-right: 0 !important;
border-bottom: 0 !important;
box-shadow: none !important;
}
html body .article-body table {
background: var(--kia-ol-s1) !important;
border-radius: 12px !important;
overflow: hidden !important;
border-collapse: separate !important;
border-spacing: 0 !important;
}
html body .article-body table thead th {
background: var(--kia-ol-s2) !important;
}
html body .article-body table tbody tr:nth-child(even) td {
background: rgba(255, 255, 255, 0.02) !important;
}
html body .article-body table tbody tr:hover td {
background: var(--kia-ol-s3) !important;
}
html body .article-body pre,
html body .article-body code {
border: 0 !important;
border-left: 0 !important;
border-top: 0 !important;
border-right: 0 !important;
border-bottom: 0 !important;
box-shadow: none !important;
}
html body .article-body pre {
background: #07121C !important;
border-radius: 12px !important;
padding: 16px !important;
}
html body .article-body blockquote,
html body .article-body .callout,
html body .article-body .note,
html body .article-body .warning,
html body .article-body .tip,
html body .article-body .caution,
html body .article-body .alert,
html body .article-body [class*="callout"] {
border: 0 !important;
border-left: 0 !important;
border-top: 0 !important;
border-right: 0 !important;
border-bottom: 0 !important;
box-shadow: none !important;
background: var(--kia-ol-s2) !important;
border-radius: 12px !important;
padding: 16px 20px !important;
}
html body .article-votes,
html body .article-vote,
html body .article-vote-up,
html body .article-vote-down,
html body .article-footer,
html body .article-return-to-top,
html body .recent-articles,
html body .related-articles,
html body .recent-articles li,
html body .related-articles li {
border: 0 !important;
box-shadow: none !important;
}
html body .article-votes {
background: var(--kia-ol-s1) !important;
border-radius: 14px !important;
}
html body .article-vote,
html body .article-vote-up,
html body .article-vote-down,
html body .article-return-to-top {
background: var(--kia-ol-s2) !important;
border-radius: 999px !important;
transition: background-color 0.15s ease;
}
html body .article-vote:hover,
html body .article-vote-up:hover,
html body .article-vote-down:hover,
html body .article-return-to-top:hover {
background: var(--kia-ol-s3) !important;
}
html body .recent-articles li,
html body .related-articles li {
background: var(--kia-ol-s1) !important;
border-radius: 10px !important;
padding: 10px 14px !important;
margin-bottom: 6px !important;
transition: background-color 0.15s ease;
}
html body .recent-articles li:hover,
html body .related-articles li:hover {
background: var(--kia-ol-s2) !important;
}
html body .article-comments,
html body .comment-overview,
html body .comment-list,
html body .comment,
html body .comment-wrapper,
html body .comment-form,
html body textarea#comment_body,
html body .comment-form-controls input[type="submit"] {
border: 0 !important;
box-shadow: none !important;
}
html body .comment-overview {
background: var(--kia-ol-s1) !important;
border-radius: 14px !important;
}
html body .comment-wrapper {
background: var(--kia-ol-s2) !important;
border-radius: 12px !important;
}
html body .comment-form {
background: var(--kia-ol-s1) !important;
border-radius: 14px !important;
}
html body textarea#comment_body {
background: var(--kia-ol-s2) !important;
border-radius: 12px !important;
outline: 0 !important;
}
html body textarea#comment_body:focus {
background: var(--kia-ol-s3) !important;
}
html body .comment-form-controls input[type="submit"] {
background: var(--kia-ol-s4) !important;
border-radius: 10px !important;
}
html body .comment-form-controls input[type="submit"]:hover {
background: var(--kia-ol-s3) !important;
color: #38BDF8 !important;
}
html body .search-results,
html body .search-results-sidebar,
html body .multibrand-filter-list,
html body .filter-item,
html body .search-results-column,
html body .search-results-subheader,
html body .search-result-list,
html body .search-result-list-item,
html body .search-result-votes,
html body .search-result-meta-count,
html body #kia-loadmore-container,
html body #kia-loadmore-btn {
border: 0 !important;
box-shadow: none !important;
}
html body .search-result-list-item {
background: var(--kia-ol-s1) !important;
border-radius: 16px !important;
padding: 20px 24px !important;
margin-bottom: 12px !important;
transition: background-color 0.15s ease;
}
html body .search-result-list-item:hover {
background: var(--kia-ol-s2) !important;
}
html body .search-result-votes,
html body .search-result-meta-count {
background: var(--kia-ol-s2) !important;
border-radius: 999px !important;
}
html body .filter-item {
border-radius: 10px !important;
background: transparent !important;
transition: background-color 0.15s ease, color 0.15s ease;
}
html body .filter-item:hover {
background: var(--kia-ol-s2) !important;
}
html body .filter-item.current {
background: var(--kia-ol-s3) !important;
color: #38BDF8 !important;
}
html body #kia-loadmore-btn {
background: var(--kia-ol-s2) !important;
border-radius: 12px !important;
}
html body #kia-loadmore-btn:hover {
background: var(--kia-ol-s3) !important;
}
html body .community-hero,
html body .topics-list,
html body .topics-item,
html body .blocks-list,
html body .blocks-item,
html body .community-featured-posts,
html body .topic-header,
html body .topic-filters,
html body .topic-filters .dropdown-toggle,
html body .topic-filters .dropdown-menu,
html body .post-to-community a,
html body .striped-list,
html body .striped-list-item,
html body .post-overview-item,
html body .post-overview-count,
html body .post-overview-status,
html body .status-label {
border: 0 !important;
box-shadow: none !important;
}
html body .community-hero {
background: var(--kia-ol-s1) !important;
border-radius: 20px !important;
}
html body .topics-item,
html body .blocks-item,
html body .community-featured-posts,
html body .topic-header {
background: var(--kia-ol-s1) !important;
border-radius: 16px !important;
transition: background-color 0.15s ease;
}
html body .topics-item:hover,
html body .blocks-item:hover {
background: var(--kia-ol-s2) !important;
}
html body .topic-filters .dropdown-toggle,
html body .post-to-community a {
background: var(--kia-ol-s2) !important;
border-radius: 10px !important;
}
html body .topic-filters .dropdown-toggle:hover,
html body .post-to-community a:hover {
background: var(--kia-ol-s3) !important;
}
html body .topic-filters .dropdown-menu {
background: var(--kia-ol-s2) !important;
border-radius: 12px !important;
}
html body .striped-list-item,
html body .post-overview-item {
background: var(--kia-ol-s1) !important;
border-radius: 12px !important;
margin-bottom: 6px !important;
transition: background-color 0.15s ease;
}
html body .striped-list-item:nth-child(even),
html body .post-overview-item:nth-child(even) {
background: var(--kia-ol-s2) !important;
}
html body .striped-list-item:hover,
html body .post-overview-item:hover {
background: var(--kia-ol-s3) !important;
}
html body .post-overview-count,
html body .post-overview-status,
html body .status-label {
background: var(--kia-ol-s3) !important;
border-radius: 999px !important;
}
html body .post-container,
html body .post,
html body .post-header,
html body .post-info-container,
html body .post-actions,
html body .vote,
html body .vote-sum,
html body .vote-control,
html body .post-callout,
html body .official-comment,
html body .comment-official,
html body .new-post-form,
html body zd-wysiwyg,
html body [id^="zd-wysiwyg"] {
border: 0 !important;
box-shadow: none !important;
}
html body .post-container,
html body .post-info-container {
background: var(--kia-ol-s1) !important;
border-radius: 16px !important;
}
html body .post-actions,
html body .vote,
html body .vote-sum,
html body .vote-control {
background: var(--kia-ol-s2) !important;
border-radius: 999px !important;
}
html body .vote-control:hover {
background: var(--kia-ol-s3) !important;
}
html body .post-callout {
background: var(--kia-ol-s2) !important;
border-radius: 12px !important;
padding: 16px 20px !important;
}
html body .official-comment,
html body .comment-official {
border-left: 0 !important;
border-top: 0 !important;
background: rgba(56, 189, 248, 0.10) !important;
border-radius: 16px !important;
}
html body .new-post-form {
background: var(--kia-ol-s1) !important;
border-radius: 16px !important;
}
html body zd-wysiwyg,
html body [id^="zd-wysiwyg"] {
background: var(--kia-ol-s2) !important;
border-radius: 12px !important;
}
html body {
--kia-ol-s1: #091926;
--kia-ol-s2: #0E2233;
--kia-ol-s3: #142D42;
--kia-ol-s4: #1B3B56;
}
html body .request-form,
html body .request-form input,
html body .request-form textarea,
html body .request-form select,
html body #termsBox,
html body .terms-box,
html body .requests-table,
html body .my-activities-table,
html body .subscriptions-table,
html body .service-card,
html body .service-item,
html body .error-page,
html body .error-container,
html body [data-garden-id^="forms."],
html body [data-garden-id^="dropdowns."],
html body [data-garden-id^="tables."],
html body [data-garden-id="buttons.button"] {
font-family: 'Kia Signature', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif !important;
}
html body #termsBox#termsBox,
html body #termsBox.terms-box,
html body #termsBox,
html body .terms-box.terms-box,
html body .terms-box,
html body #termsScrollArea#termsScrollArea,
html body #termsScrollArea.terms-scroll-area,
html body #termsScrollArea,
html body .terms-scroll-area,
html body #termsBox#termsBox .radio-group,
html body #termsBox .radio-group,
html body .consent-radio-card {
border: 0 !important;
border-top: 0 !important;
border-right: 0 !important;
border-bottom: 0 !important;
border-left: 0 !important;
box-shadow: none !important;
}
html body #termsBox#termsBox,
html body #termsBox.terms-box,
html body #termsBox,
html body .terms-box {
background: var(--kia-ol-s1) !important;
border-radius: 16px !important;
padding: 20px !important;
}
html body #termsScrollArea#termsScrollArea,
html body #termsScrollArea,
html body .terms-scroll-area,
html body #termsBox#termsBox .radio-group,
html body #termsBox .radio-group {
background: var(--kia-ol-s2) !important;
border-radius: 12px !important;
border: 0 !important;
}
html body .consent-radio-card {
background: var(--kia-ol-s2) !important;
border-radius: 12px !important;
}
html body .consent-radio-card:hover {
background: var(--kia-ol-s3) !important;
}
html body .request-form,
html body .form-field {
border: 0 !important;
box-shadow: none !important;
}
html body .form-field input:not([type="checkbox"]):not([type="radio"]),
html body .form-field textarea,
html body .form-field select,
html body .nesty-input,
html body .nesty-panel,
html body [data-garden-id="forms.faux_input"],
html body [data-garden-id="forms.input"],
html body [data-garden-id="forms.textarea"],
html body [data-garden-id="forms.select"],
html body [data-garden-id="dropdowns.combobox"] {
border: 0 !important;
box-shadow: none !important;
background: var(--kia-ol-s2) !important;
border-radius: 10px !important;
color: #F8FAFC !important;
}
html body .form-field input:not([type="checkbox"]):not([type="radio"]):hover,
html body .form-field textarea:hover,
html body .form-field select:hover,
html body .nesty-input:hover,
html body .nesty-panel:hover,
html body [data-garden-id="forms.faux_input"]:hover,
html body [data-garden-id="forms.input"]:hover,
html body [data-garden-id="forms.textarea"]:hover,
html body [data-garden-id="forms.select"]:hover,
html body [data-garden-id="dropdowns.combobox"]:hover {
background: var(--kia-ol-s3) !important;
border: 0 !important;
}
html body .form-field input:not([type="checkbox"]):not([type="radio"]):focus,
html body .form-field textarea:focus,
html body .form-field select:focus,
html body .nesty-input:focus,
html body .nesty-panel:focus,
html body [data-garden-id="forms.faux_input"]:focus,
html body [data-garden-id="forms.input"]:focus,
html body [data-garden-id="forms.textarea"]:focus,
html body [data-garden-id="forms.select"]:focus,
html body [data-garden-id="dropdowns.combobox"]:focus,
html body .form-field input:not([type="checkbox"]):not([type="radio"]):focus-within,
html body .form-field textarea:focus-within,
html body .form-field select:focus-within,
html body .nesty-input:focus-within,
html body .nesty-panel:focus-within,
html body [data-garden-id="forms.faux_input"]:focus-within,
html body [data-garden-id="forms.input"]:focus-within,
html body [data-garden-id="forms.textarea"]:focus-within,
html body [data-garden-id="forms.select"]:focus-within,
html body [data-garden-id="dropdowns.combobox"]:focus-within,
html body .form-field input:not([type="checkbox"]):not([type="radio"]):focus-visible,
html body .form-field textarea:focus-visible,
html body .form-field select:focus-visible,
html body .nesty-input:focus-visible,
html body .nesty-panel:focus-visible,
html body [data-garden-id="forms.faux_input"]:focus-visible,
html body [data-garden-id="forms.input"]:focus-visible,
html body [data-garden-id="forms.textarea"]:focus-visible,
html body [data-garden-id="forms.select"]:focus-visible,
html body [data-garden-id="dropdowns.combobox"]:focus-visible,
html body .form-field input[data-garden-focus-visible="true"],
html body .form-field textarea[data-garden-focus-visible="true"],
html body .form-field select[data-garden-focus-visible="true"],
html body .nesty-input[data-garden-focus-visible="true"],
html body [data-garden-id="forms.faux_input"][data-garden-focus-visible="true"],
html body [data-garden-id="forms.input"][data-garden-focus-visible="true"],
html body [data-garden-id="forms.textarea"][data-garden-focus-visible="true"],
html body [data-garden-id="forms.select"][data-garden-focus-visible="true"],
html body [data-garden-id="dropdowns.combobox"][data-garden-focus-visible="true"] {
background: var(--kia-ol-s3) !important;
border: 0 !important;
box-shadow: none !important;
outline: 2px solid #38BDF8 !important;
outline-offset: 2px !important;
}
html body [data-garden-id="dropdowns.menu"]:not([aria-hidden="true"]),
html body [data-garden-id="dropdowns.item"] {
border: 0 !important;
box-shadow: none !important;
background: var(--kia-ol-s3) !important;
border-radius: 12px !important;
color: #F8FAFC !important;
}
html body [data-garden-id="dropdowns.item"]:hover,
html body [data-garden-id="dropdowns.item"][data-garden-focus-visible="true"] {
background: var(--kia-ol-s4) !important;
border: 0 !important;
box-shadow: none !important;
}
html body #upload-dropzone,
html body .upload-dropzone,
html body [data-garden-id="forms.file_upload"] {
border: 0 !important;
box-shadow: none !important;
background: var(--kia-ol-s2) !important;
border-radius: 12px !important;
color: #CBD5E1 !important;
}
html body #upload-dropzone:hover,
html body .upload-dropzone:hover,
html body [data-garden-id="forms.file_upload"]:hover {
background: var(--kia-ol-s3) !important;
border: 0 !important;
}
html body .request-form footer input[type="submit"],
html body [data-garden-id="buttons.button"],
html body .request-sidebar,
html body .suggestion-list {
border: 0 !important;
box-shadow: none !important;
}
html body .request-sidebar,
html body .suggestion-list {
background: var(--kia-ol-s1) !important;
border-radius: 16px !important;
}
html body #main-content.requests,
html body .requests-table-toolbar,
html body .requests-filter,
html body .requests-search,
html body .requests-table,
html body .requests-table th,
html body .requests-table td,
html body .requests-table tbody tr,
html body [data-garden-id="tables.table"],
html body [data-garden-id="tables.header_row"],
html body [data-garden-id="tables.header_cell"],
html body [data-garden-id="tables.row"],
html body [data-garden-id="tables.cell"],
html body .status-label {
border: 0 !important;
box-shadow: none !important;
}
html body .requests-table,
html body [data-garden-id="tables.table"] {
background: var(--kia-ol-s1) !important;
border-radius: 16px !important;
overflow: hidden !important;
border-collapse: separate !important;
border-spacing: 0 !important;
}
html body .requests-table-toolbar,
html body .requests-filter,
html body .requests-search {
background: transparent !important;
}
html body .requests-table th,
html body [data-garden-id="tables.header_row"],
html body [data-garden-id="tables.header_cell"] {
background: var(--kia-ol-s2) !important;
color: #94A3B8 !important;
}
html body .requests-table tbody tr,
html body [data-garden-id="tables.row"] {
background: var(--kia-ol-s1) !important;
}
html body .requests-table tbody tr:nth-child(even),
html body [data-garden-id="tables.row"]:nth-child(even) {
background: rgba(255, 255, 255, 0.02) !important;
}
html body .requests-table tbody tr:hover,
html body [data-garden-id="tables.row"]:hover {
background: var(--kia-ol-s3) !important;
}
html body .requests-table td,
html body [data-garden-id="tables.cell"] {
background: transparent !important;
color: #E2E8F0 !important;
}
html body .status-label {
background: var(--kia-ol-s3) !important;
border-radius: 999px !important;
color: #F8FAFC !important;
}
html body .request-container,
html body .request-main,
html body .request-sidebar,
html body .request-details,
html body .request-id,
html body .comment-list,
html body .comment-form,
html body .satisfaction-box {
border: 0 !important;
box-shadow: none !important;
}
html body .request-main,
html body .comment-list,
html body .comment-form {
background: var(--kia-ol-s1) !important;
border-radius: 16px !important;
}
html body .request-details,
html body .satisfaction-box {
background: var(--kia-ol-s2) !important;
border-radius: 12px !important;
}
html body .request-id {
background: var(--kia-ol-s3) !important;
border-radius: 10px !important;
}
html body #approval-request-list,
html body .approval-request-container,
html body [class*="approval"] {
border: 0 !important;
box-shadow: none !important;
}
html body #approval-request-list,
html body .approval-request-container {
background: var(--kia-ol-s1) !important;
border-radius: 16px !important;
}
html body .my-activities-nav,
html body .my-activities-sub-nav,
html body .my-activities-table,
html body .my-activities-table th,
html body .my-activities-table td,
html body .subscriptions-table,
html body .subscriptions-table th,
html body .subscriptions-table td,
html body .unsubscribe {
border: 0 !important;
box-shadow: none !important;
}
html body .my-activities-nav,
html body .my-activities-sub-nav {
background: var(--kia-ol-s1) !important;
border-radius: 999px !important;
}
html body .my-activities-nav a,
html body .my-activities-sub-nav a {
border: 0 !important;
border-radius: 999px !important;
}
html body .my-activities-nav a:hover,
html body .my-activities-sub-nav a:hover,
html body .my-activities-nav a[aria-selected="true"],
html body .my-activities-sub-nav a[aria-selected="true"],
html body .my-activities-nav .current,
html body .my-activities-sub-nav .current {
background: var(--kia-ol-s3) !important;
}
html body .my-activities-table,
html body .subscriptions-table {
background: var(--kia-ol-s1) !important;
border-radius: 16px !important;
overflow: hidden !important;
border-collapse: separate !important;
border-spacing: 0 !important;
}
html body .my-activities-table th,
html body .subscriptions-table th {
background: var(--kia-ol-s2) !important;
color: #94A3B8 !important;
}
html body .my-activities-table td,
html body .subscriptions-table td {
background: var(--kia-ol-s1) !important;
color: #E2E8F0 !important;
}
html body .my-activities-table tbody tr:nth-child(even) td,
html body .subscriptions-table tbody tr:nth-child(even) td {
background: rgba(255, 255, 255, 0.02) !important;
}
html body .my-activities-table tbody tr:hover td,
html body .subscriptions-table tbody tr:hover td {
background: var(--kia-ol-s3) !important;
}
html body .unsubscribe {
background: var(--kia-ol-s2) !important;
border-radius: 999px !important;
}
html body .unsubscribe:hover {
background: var(--kia-ol-s4) !important;
}
html body #service-catalog-list,
html body #service-catalog-item,
html body [class*="service-catalog"],
html body .service-card,
html body .service-item {
border: 0 !important;
box-shadow: none !important;
}
html body #service-catalog-list,
html body #service-catalog-item {
background: var(--kia-ol-s1) !important;
border-radius: 16px !important;
}
html body .service-card,
html body .service-item {
background: var(--kia-ol-s2) !important;
border-radius: 14px !important;
}
html body .service-card:hover,
html body .service-item:hover {
background: var(--kia-ol-s3) !important;
}
html body #service-catalog-item input:not([type="checkbox"]):not([type="radio"]),
html body #service-catalog-item textarea,
html body #service-catalog-item select,
html body [class*="service-catalog"] input:not([type="checkbox"]):not([type="radio"]),
html body [class*="service-catalog"] textarea,
html body [class*="service-catalog"] select {
border: 0 !important;
box-shadow: none !important;
background: var(--kia-ol-s2) !important;
border-radius: 10px !important;
color: #F8FAFC !important;
}
html body .error-page,
html body .error-container {
border: 0 !important;
box-shadow: none !important;
background: var(--kia-ol-s1) !important;
border-radius: 18px !important;
padding: 36px !important;
}
:root {
--kia-prof-bg: #05141F;
--kia-prof-low: #091B29;
--kia-prof-mid: #0D2233;
--kia-prof-high: #132E44;
--kia-prof-hover: #183852;
--kia-prof-ac: #38BDF8;
--kia-prof-ac-text: #7DD3FC;
--kia-prof-tint: rgba(56, 189, 248, 0.14);
--kia-prof-t1: #F8FAFC;
--kia-prof-t2: #D6E0EB;
--kia-prof-lbl: #8CA3B8;
}
@media (prefers-reduced-motion: reduce) {
html body .profile-header *,
html body .profile-nav *,
html body .profile-section * {
transition: none !important;
}
}
html body .profile-header,
html body .profile-nav,
html body .profile-section {
font-family: 'Kia Signature', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif !important;
}
html body header#main-content.profile-header {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 22px 0 14px !important;
border: 0 !important;
box-shadow: none !important;
background-color: var(--kia-prof-bg) !important;
background-image: radial-gradient(62% 115% at 10% 0%, rgba(56, 189, 248, 0.10) 0%, rgba(5, 20, 31, 0) 72%) !important;
color: var(--kia-prof-t2) !important;
font-size: 14px !important;
}
html body header#main-content.profile-header > .container,
html body .profile-nav > .container,
html body .container:has(> .profile-section) {
width: 100% !important;
max-width: 1176px !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 16px !important;
padding-right: 16px !important;
box-sizing: border-box !important;
}
html body header#main-content.profile-header > .container {
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
gap: 14px !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
html body .profile-header .avatar.profile-avatar,
html body .profile-header .profile-avatar {
grid-area: avatar !important;
position: relative !important;
display: block !important;
width: 68px !important;
height: 68px !important;
min-width: 68px !important;
max-width: 68px !important;
flex: 0 0 68px !important;
margin: 0 !important;
padding: 0 !important;
line-height: 0 !important;
border: 0 !important;
box-shadow: none !important;
border-radius: 50% !important;
align-self: center !important;
background: transparent !important;
}
html body .profile-header .profile-avatar .user-avatar {
display: block !important;
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
border: 0 !important;
border-radius: 50% !important;
object-fit: cover !important;
background: var(--kia-prof-mid) !important;
box-shadow: none !important;
}
html body .profile-header .profile-avatar .icon-agent {
position: absolute !important;
bottom: 2px !important;
right: 2px !important;
z-index: 2 !important;
width: 22px !important;
height: 22px !important;
padding: 3px !important;
border: 0 !important;
border-radius: 50% !important;
background: var(--kia-prof-ac) !important;
color: var(--kia-prof-bg) !important;
box-shadow: 0 0 0 3px var(--kia-prof-bg) !important;
font-size: 0 !important;
line-height: 0 !important;
}
html body .profile-header .profile-info {
display: grid !important;
grid-template-columns: 68px minmax(0, 1fr) !important;
grid-template-areas: "avatar info" "options options" "desc desc" "stats stats" !important;
column-gap: 16px !important;
row-gap: 14px !important;
align-items: center !important;
margin: 0 !important;
padding: 0 !important;
min-width: 0 !important;
flex-basis: auto !important;
border: 0 !important;
box-shadow: none !important;
background: transparent !important;
}
html body .profile-header .basic-info {
grid-area: info !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
gap: 6px !important;
min-width: 0 !important;
border: 0 !important;
box-shadow: none !important;
hyphens: manual !important;
word-break: normal !important;
overflow-wrap: anywhere !important;
}
html body .profile-header .community-name-and-title-badges {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 6px 10px !important;
min-width: 0 !important;
border: 0 !important;
box-shadow: none !important;
}
html body .profile-header .basic-info .name {
display: block !important;
margin: 0 !important;
font-size: 24px !important;
line-height: 1.25 !important;
font-weight: 600 !important;
letter-spacing: -0.02em !important;
color: var(--kia-prof-t1) !important;
}
html body .profile-header .basic-info .name a {
color: var(--kia-prof-t1) !important;
text-decoration: none !important;
}
html body .profile-header .basic-info .name a:hover,
html body .profile-header .basic-info .name a:focus-visible {
color: var(--kia-prof-ac-text) !important;
}
html body .profile-header .community-badge-titles,
html body .profile-header .community-badge-achievements {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 6px !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
border: 0 !important;
box-shadow: none !important;
}
html body .profile-header .community-badge {
margin: 0 !important;
border: 0 !important;
box-shadow: none !important;
}
html body .profile-header .community-badge-title,
html body .profile-header .community-badge-achievements-rest {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
height: 24px !important;
padding: 0 11px !important;
border: 0 !important;
box-shadow: none !important;
border-radius: 999px !important;
background: var(--kia-prof-tint) !important;
color: var(--kia-prof-ac-text) !important;
font-size: 12px !important;
font-weight: 600 !important;
line-height: 1 !important;
text-decoration: none !important;
}
html body .profile-header .community-badge-achievement {
display: inline-flex !important;
align-items: center !important;
width: auto !important;
height: auto !important;
border: 0 !important;
box-shadow: none !important;
}
html body .profile-header .community-badge-achievement img {
display: block !important;
width: 28px !important;
height: 28px !important;
padding: 3px !important;
border: 0 !important;
box-shadow: none !important;
border-radius: 10px !important;
background: var(--kia-prof-mid) !important;
}
html body .profile-header .options {
grid-area: options !important;
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 8px !important;
margin: 0 !important;
padding: 0 !important;
flex-basis: auto !important;
border: 0 !important;
box-shadow: none !important;
}
html body .profile-header .options > :not(:last-child) {
margin: 0 !important;
}
html body .profile-header .options > :empty,
html body .profile-header .community-follow:empty,
html body .profile-header .community-badge-titles:empty,
html body .profile-header .community-badge-achievements:empty {
display: none !important;
}
html body .profile-header .profile-private-badge {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
height: 38px !important;
padding: 0 16px !important;
border: 0 !important;
box-shadow: none !important;
border-radius: 999px !important;
background: var(--kia-prof-mid) !important;
color: var(--kia-prof-t2) !important;
font-size: 12px !important;
font-weight: 600 !important;
flex-basis: auto !important;
}
html body .profile-header .profile-private-badge .profile-private-icon {
margin: 0 !important;
}
html body .profile-header .user-profile-actions {
width: auto !important;
margin: 0 !important;
border: 0 !important;
box-shadow: none !important;
}
html body .profile-header .split-button {
display: inline-flex !important;
align-items: center !important;
gap: 2px !important;
border: 0 !important;
box-shadow: none !important;
}
html body .profile-header .split-button button {
height: 38px !important;
line-height: 1 !important;
padding: 0 18px !important;
white-space: nowrap !important;
font-size: 13px !important;
font-weight: 600 !important;
color: var(--kia-prof-t1) !important;
background: var(--kia-prof-high) !important;
border: 0 !important;
border-radius: 999px !important;
box-shadow: none !important;
transition: background-color 0.16s ease !important;
}
html body .profile-header .split-button button:hover,
html body .profile-header .split-button button:focus-visible {
background: var(--kia-prof-hover) !important;
border: 0 !important;
box-shadow: none !important;
}
html body .profile-header .split-button button:not(:only-child):first-child {
border: 0 !important;
border-radius: 999px 6px 6px 999px !important;
}
html body .profile-header .split-button button:not(:only-child):last-child {
flex: 0 0 36px !important;
width: 36px !important;
min-width: 36px !important;
max-width: 36px !important;
padding: 0 !important;
border: 0 !important;
border-radius: 6px 999px 999px 6px !important;
}
html body .profile-header .community-follow {
width: auto !important;
flex: 0 0 auto !important;
margin: 0 !important;
border: 0 !important;
box-shadow: none !important;
}
html body .profile-header .community-follow button,
html body .profile-header .community-follow a[role="button"] {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: auto !important;
min-width: 0 !important;
height: 38px !important;
padding: 0 20px !important;
white-space: nowrap !important;
font-size: 13px !important;
font-weight: 600 !important;
color: var(--kia-prof-bg) !important;
background: var(--kia-prof-ac) !important;
border: 0 !important;
box-shadow: none !important;
border-radius: 999px !important;
text-decoration: none !important;
text-align: center !important;
}
html body .profile-header .community-follow button::after,
html body .profile-header .community-follow a[role="button"]::after {
display: none !important;
content: none !important;
border: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
html body .profile-header .description {
grid-area: desc !important;
margin: 0 !important;
color: var(--kia-prof-t2) !important;
font-size: 14px !important;
line-height: 1.65 !important;
max-width: 66ch !important;
hyphens: manual !important;
word-break: normal !important;
overflow-wrap: anywhere !important;
}
html body .profile-header .profile-stats {
display: grid !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
border: 0 !important;
box-shadow: none !important;
background: transparent !important;
font-size: 13px !important;
}
html body .profile-header .profile-stats .stat {
display: flex !important;
flex-direction: column !important;
gap: 4px !important;
margin: 0 !important;
min-width: 0 !important;
border: 0 !important;
box-shadow: none !important;
}
html body .profile-header .profile-stats .stat-label {
flex: 0 1 auto !important;
margin: 0 !important;
color: var(--kia-prof-lbl) !important;
font-size: 12px !important;
font-weight: 400 !important;
letter-spacing: -0.005em !important;
text-transform: none !important;
line-height: 1.3 !important;
}
html body .profile-header .profile-stats .stat-value {
color: var(--kia-prof-t1) !important;
font-size: 16px !important;
font-weight: 600 !important;
letter-spacing: -0.01em !important;
line-height: 1.3 !important;
font-variant-numeric: tabular-nums !important;
overflow-wrap: anywhere !important;
}
html body .profile-header .profile-stats-activity {
grid-area: stats !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 8px !important;
}
html body .profile-header .profile-stats-activity .stat {
padding: 12px 13px !important;
background: var(--kia-prof-low) !important;
border-radius: 16px !important;
}
html body .profile-header .profile-stats-counters {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 8px !important;
}
html body .profile-header .profile-stats-counters .stat {
padding: 14px 16px !important;
background: var(--kia-prof-mid) !important;
border-radius: 18px !important;
transition: background-color 0.16s ease !important;
}
html body .profile-header .profile-stats-counters .stat:hover {
background: var(--kia-prof-high) !important;
border: 0 !important;
box-shadow: none !important;
}
html body .profile-header .profile-stats-counters .stat-value {
font-size: 20px !important;
}
html body .profile-nav {
margin: 6px 0 24px !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
font-size: 14px !important;
}
html body .profile-nav .collapsible-nav {
position: relative !important;
display: flex !important;
flex-direction: column !important;
padding: 4px !important;
border: 0 !important;
box-shadow: none !important;
border-radius: 16px !important;
background: var(--kia-prof-mid) !important;
font-size: 14px !important;
}
html body .profile-nav .collapsible-nav-toggle {
position: absolute !important;
top: 25px !important;
right: 8px !important;
z-index: 3 !important;
cursor: pointer !important;
transform: translateY(-50%) !important;
display: grid !important;
place-items: center !important;
width: 32px !important;
height: 32px !important;
padding: 0 !important;
border: 0 !important;
box-shadow: none !important;
border-radius: 10px !important;
background: var(--kia-prof-high) !important;
color: var(--kia-prof-ac-text) !important;
}
html body .profile-nav .collapsible-nav-list {
display: flex !important;
flex-direction: column !important;
gap: 2px !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
border: 0 !important;
box-shadow: none !important;
}
html body .profile-nav .collapsible-nav-list li {
margin: 0 !important;
padding: 0 46px 0 14px !important;
line-height: 42px !important;
border: 0 !important;
box-shadow: none !important;
border-radius: 12px !important;
color: var(--kia-prof-t2) !important;
}
html body .profile-nav .collapsible-nav-list li:not(.current):not([aria-selected="true"]) {
display: none !important;
}
html body .profile-nav .collapsible-nav[aria-expanded="true"] .collapsible-nav-list li:not(.current):not([aria-selected="true"]),
html body .profile-nav .collapsible-nav-toggle[aria-expanded="true"] ~ .collapsible-nav-list li:not(.current):not([aria-selected="true"]) {
display: block !important;
border: 0 !important;
}
html body .profile-nav .collapsible-nav-list li.current,
html body .profile-nav .collapsible-nav-list li[aria-selected="true"] {
display: block !important;
order: 0 !important;
color: var(--kia-prof-t1) !important;
font-weight: 600 !important;
border: 0 !important;
box-shadow: none !important;
background: transparent !important;
}
html body .profile-nav .collapsible-nav[aria-expanded="true"] .collapsible-nav-list li.current,
html body .profile-nav .collapsible-nav-toggle[aria-expanded="true"] ~ .collapsible-nav-list li.current {
background: var(--kia-prof-high) !important;
}
html body .profile-nav .collapsible-nav-list li a {
display: block !important;
padding: 0 !important;
color: inherit !important;
text-decoration: none !important;
border: 0 !important;
}
html body .profile-nav .collapsible-nav[aria-expanded="true"] .collapsible-nav-list li:not(.current):hover,
html body .profile-nav .collapsible-nav-toggle[aria-expanded="true"] ~ .collapsible-nav-list li:not(.current):hover {
background: var(--kia-prof-high) !important;
color: var(--kia-prof-t1) !important;
}
html body .profile-section {
width: 100% !important;
max-width: 100% !important;
margin: 0 auto 96px !important;
padding: 0 !important;
border: 0 !important;
box-shadow: none !important;
font-size: 14px !important;
}
html body .profile-section-header {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
justify-content: space-between !important;
gap: 6px 16px !important;
border: 0 !important;
box-shadow: none !important;
}
html body .profile-section-title {
flex: 1 1 100% !important;
margin: 0 !important;
font-size: 21px !important;
line-height: 1.3 !important;
font-weight: 600 !important;
letter-spacing: -0.015em !important;
color: var(--kia-prof-t1) !important;
}
html body .profile-section-description {
flex: 1 1 auto !important;
padding: 2px 0 0 !important;
margin: 0 !important;
color: var(--kia-prof-lbl) !important;
font-size: 13px !important;
white-space: normal !important;
}
html body .profile-section-sorter {
flex: 0 0 auto !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
box-shadow: none !important;
position: relative !important;
}
html body .profile-section-sorter .dropdown-toggle {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
height: 36px !important;
width: auto !important;
padding: 0 14px !important;
border: 0 !important;
box-shadow: none !important;
border-radius: 999px !important;
background: var(--kia-prof-mid) !important;
color: var(--kia-prof-t1) !important;
font-size: 13px !important;
font-weight: 600 !important;
}
html body .profile-section-sorter .dropdown-toggle:hover {
background: var(--kia-prof-high) !important;
border: 0 !important;
box-shadow: none !important;
}
html body .profile-section-sorter .dropdown-menu {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
position: absolute !important;
right: 0 !important;
left: auto !important;
top: 100% !important;
z-index: 30 !important;
min-width: 180px !important;
margin-top: 6px !important;
padding: 6px !important;
border: 0 !important;
border-radius: 14px !important;
background: var(--kia-prof-high) !important;
box-shadow: none !important;
}
html body .profile-section-sorter .dropdown-toggle[aria-expanded="true"] + .dropdown-menu,
html body .profile-section-sorter .dropdown-toggle[aria-expanded="true"] ~ .dropdown-menu,
html body .profile-section-sorter .dropdown-menu[aria-expanded="true"],
html body .profile-section-sorter.dropdown-open .dropdown-menu {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
pointer-events: auto !important;
transform: none !important;
}
html body .profile-section-sorter .dropdown-menu a {
display: block !important;
padding: 8px 12px !important;
border: 0 !important;
box-shadow: none !important;
border-radius: 10px !important;
color: var(--kia-prof-t2) !important;
text-decoration: none !important;
}
html body .profile-section-sorter .dropdown-menu a:hover,
html body .profile-section-sorter .dropdown-menu a[aria-checked="true"] {
background: var(--kia-prof-hover) !important;
color: var(--kia-prof-t1) !important;
border: 0 !important;
box-shadow: none !important;
}
html body .profile-activity-list,
html body .profile-contribution-list,
html body .profile-badges-items {
display: flex !important;
flex-direction: column !important;
gap: 14px !important;
margin: 18px 0 0 !important;
padding: 0 !important;
list-style: none !important;
border: 0 !important;
box-shadow: none !important;
}
html body .profile-activity,
html body .profile-activity:not(:last-child) {
position: relative !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
box-shadow: none !important;
}
html body .profile-activity-icon,
html body .profile-contribution-icon {
position: absolute !important;
top: 0 !important;
left: 0 !important;
display: grid !important;
place-items: center !important;
width: 30px !important;
height: 30px !important;
border: 0 !important;
box-shadow: none !important;
border-radius: 10px !important;
background: var(--kia-prof-tint) !important;
color: var(--kia-prof-ac-text) !important;
line-height: 1 !important;
}
html body .profile-activity-icon svg,
html body .profile-contribution-icon svg {
position: static !important;
transform: none !important;
width: 14px !important;
height: 14px !important;
margin: 0 !important;
}
html body .profile-activity-header {
display: flex !important;
align-items: center !important;
gap: 10px !important;
min-height: 30px !important;
margin: 0 0 0 40px !important;
padding: 0 !important;
border: 0 !important;
box-shadow: none !important;
}
html body .profile-activity-header .user-avatar {
width: 26px !important;
height: 26px !important;
min-width: 26px !important;
margin: 0 !important;
align-self: center !important;
border: 0 !important;
box-shadow: none !important;
border-radius: 50% !important;
}
html body .profile-activity-description {
width: auto !important;
flex: 1 1 auto !important;
min-width: 0 !important;
margin: 0 !important;
color: var(--kia-prof-t2) !important;
font-size: 14px !important;
line-height: 1.45 !important;
hyphens: manual !important;
word-break: normal !important;
overflow-wrap: anywhere !important;
}
html body .profile-activity-description a,
html body .profile-activity-description span:first-child {
color: var(--kia-prof-t1) !important;
font-weight: 600 !important;
text-decoration: none !important;
}
html body .profile-activity-contribution,
html body .profile-contribution-list > .profile-contribution,
html body .profile-badges-item {
position: relative !important;
margin: 10px 0 0 !important;
padding: 18px 20px !important;
background: var(--kia-prof-mid) !important;
border: 0 !important;
border-radius: 20px !important;
box-shadow: none !important;
transition: background-color 0.18s ease !important;
}
html body .profile-contribution-list > .profile-contribution {
margin: 0 !important;
padding: 18px 20px 18px 60px !important;
}
html body .profile-contribution-list > .profile-contribution .profile-contribution-icon {
top: 18px !important;
left: 18px !important;
}
html body .profile-contribution-list .profile-contribution-header,
html body .profile-comments .profile-contribution-breadcrumbs {
margin-left: 0 !important;
padding-left: 0 !important;
}
html body .profile-activity-contribution:hover,
html body .profile-contribution-list > .profile-contribution:hover,
html body .profile-badges-item:hover {
background: var(--kia-prof-high) !important;
border: 0 !important;
box-shadow: none !important;
transform: none !important;
}
html body .profile-contribution-header {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 6px 8px !important;
margin: 0 0 6px !important;
}
html body .profile-contribution-title {
display: block !important;
margin: 0 !important;
font-size: 16px !important;
line-height: 1.4 !important;
font-weight: 600 !important;
letter-spacing: -0.01em !important;
color: var(--kia-prof-t1) !important;
}
html body .profile-contribution-title a {
color: var(--kia-prof-t1) !important;
text-decoration: none !important;
}
html body .profile-contribution-title a:hover,
html body .profile-contribution-title a:focus-visible {
color: var(--kia-prof-ac-text) !important;
}
html body .profile-section .status-label,
html body .profile-section .status-label-official {
position: static !important;
top: auto !important;
right: auto !important;
bottom: auto !important;
left: auto !important;
width: auto !important;
margin: 0 !important;
display: inline-flex !important;
align-items: center !important;
border: 0 !important;
box-shadow: none !important;
border-radius: 999px !important;
padding: 2px 10px !important;
font-size: 11px !important;
font-weight: 600 !important;
line-height: 18px !important;
background: var(--kia-prof-tint) !important;
color: var(--kia-prof-ac-text) !important;
}
html body .profile-section .breadcrumbs,
html body .profile-section .profile-contribution-breadcrumbs {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
box-shadow: none !important;
background: transparent !important;
color: var(--kia-prof-lbl) !important;
font-size: 12px !important;
list-style: none !important;
}
html body .profile-section .breadcrumbs li {
color: var(--kia-prof-lbl) !important;
}
html body .profile-section .breadcrumbs li + li::before {
content: "\203A" !important;
margin: 0 6px !important;
color: var(--kia-prof-lbl) !important;
}
html body .profile-section .breadcrumbs a {
color: var(--kia-prof-lbl) !important;
text-decoration: none !important;
}
html body .profile-section .breadcrumbs a:hover {
color: var(--kia-prof-ac-text) !important;
}
html body .profile-section .profile-contribution-body {
margin: 8px 0 10px !important;
max-width: 74ch !important;
color: var(--kia-prof-t2) !important;
font-size: 14px !important;
line-height: 1.6 !important;
}
html body .profile-section .meta-group {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 2px 0 !important;
color: var(--kia-prof-lbl) !important;
font-size: 12px !important;
}
html body .profile-section .meta-group .meta-data {
color: var(--kia-prof-lbl) !important;
}
html body .profile-section .meta-group .meta-data:not(:last-child)::after {
content: "\00B7" !important;
margin: 0 8px !important;
color: var(--kia-prof-lbl) !important;
}
html body .profile-section .meta-group .comment-link {
color: var(--kia-prof-ac-text) !important;
text-decoration: none !important;
font-weight: 600 !important;
}
html body .profile-badges-item {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 14px 16px !important;
margin: 0 !important;
}
html body .profile-badges-item > div {
padding: 0 !important;
}
html body .profile-badges-item-image {
display: grid !important;
place-items: center !important;
width: 48px !important;
height: 48px !important;
margin: 0 !important;
border: 0 !important;
box-shadow: none !important;
border-radius: 14px !important;
background: var(--kia-prof-high) !important;
}
html body .profile-badges-item-title,
html body .profile-badges-item-metadata-title {
margin: 0 0 4px !important;
color: var(--kia-prof-t1) !important;
font-size: 15px !important;
font-weight: 600 !important;
}
html body .profile-badges-item-description,
html body .profile-badges-item-metadata-description {
margin: 0 !important;
color: var(--kia-prof-lbl) !important;
font-size: 13px !important;
}
html body .profile-section .no-activity,
html body .profile-section .private-activity {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
margin: 20px 0 0 !important;
padding: 32px 24px !important;
border: 0 !important;
box-shadow: none !important;
border-radius: 20px !important;
background: var(--kia-prof-low) !important;
color: var(--kia-prof-lbl) !important;
font-size: 14px !important;
}
html body .profile-section .pagination *,
html body .profile-section .pagination a,
html body .profile-section .pagination span {
border: 0 !important;
box-shadow: none !important;
}
html body .profile-section .pagination a,
html body .profile-section .pagination .pagination-current {
border-radius: 999px !important;
background: var(--kia-prof-mid) !important;
color: var(--kia-prof-t1) !important;
}
html body .profile-badges-item-image img {
max-height: 40px !important;
width: auto !important;
}
html body .profile-badges-item-metadata {
margin-left: auto !important;
text-align: right !important;
}
[dir="rtl"] html body .profile-badges-item-metadata {
margin-left: 0 !important;
margin-right: auto !important;
text-align: left !important;
}
@media (min-width: 768px) {
html body header#main-content.profile-header {
padding: 34px 0 18px !important;
}
html body header#main-content.profile-header > .container,
html body .profile-nav > .container,
html body .container:has(> .profile-section) {
padding-left: 24px !important;
padding-right: 24px !important;
}
html body header#main-content.profile-header > .container {
gap: 20px !important;
}
html body .profile-header .avatar.profile-avatar,
html body .profile-header .profile-avatar {
width: 84px !important;
height: 84px !important;
min-width: 84px !important;
max-width: 84px !important;
flex: 0 0 84px !important;
}
html body .profile-header .profile-info {
grid-template-columns: 84px minmax(0, 1fr) auto !important;
grid-template-areas: "avatar info options" "desc desc desc" "stats stats stats" !important;
column-gap: 22px !important;
row-gap: 16px !important;
}
html body .profile-header .basic-info .name {
font-size: 30px !important;
}
html body .profile-header .profile-stats-activity {
display: inline-grid !important;
grid-template-columns: repeat(3, minmax(0, auto)) !important;
column-gap: clamp(20px, 3vw, 36px) !important;
width: fit-content !important;
max-width: 100% !important;
padding: 14px 24px !important;
background: var(--kia-prof-low) !important;
border-radius: 18px !important;
}
html body .profile-header .profile-stats-activity .stat {
padding: 0 !important;
background: transparent !important;
border-radius: 0 !important;
}
html body .profile-header .profile-stats-counters {
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 10px !important;
}
html body .profile-nav .collapsible-nav {
flex-direction: row !important;
padding: 0 !important;
background: transparent !important;
border-radius: 0 !important;
}
html body .profile-nav .collapsible-nav-toggle {
display: none !important;
}
html body .profile-nav .collapsible-nav-list {
display: inline-flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
gap: 4px !important;
padding: 5px !important;
background: var(--kia-prof-low) !important;
border: 0 !important;
box-shadow: none !important;
border-radius: 14px !important;
}
html body .profile-nav .collapsible-nav-list li,
html body .profile-nav .collapsible-nav-list li:not(.current):not([aria-selected="true"]),
html body .profile-nav .collapsible-nav-list li:hover,
html body .profile-nav .collapsible-nav-list li.current,
html body .profile-nav .collapsible-nav-list li[aria-selected="true"] {
display: block !important;
margin: 0 !important;
padding: 0 !important;
line-height: 1 !important;
order: 0 !important;
border: 0 !important;
box-shadow: none !important;
border-radius: 10px !important;
}
html body .profile-nav .collapsible-nav-list li a,
html body .profile-nav .collapsible-nav-list li:hover a:not([aria-current="page"]) {
padding: 10px 18px !important;
border-radius: 10px !important;
color: var(--kia-prof-lbl) !important;
font-weight: 600 !important;
text-decoration: none !important;
}
html body .profile-nav .collapsible-nav-list li:hover {
background: var(--kia-prof-mid) !important;
}
html body .profile-nav .collapsible-nav-list li:hover a:not([aria-current="page"]) {
color: var(--kia-prof-t1) !important;
}
html body .profile-nav .collapsible-nav-list li.current,
html body .profile-nav .collapsible-nav-list li[aria-selected="true"] {
background: var(--kia-prof-high) !important;
border: 0 !important;
box-shadow: none !important;
}
html body .profile-nav .collapsible-nav-list li.current a,
html body .profile-nav .collapsible-nav-list li[aria-selected="true"] a {
color: var(--kia-prof-t1) !important;
}
html body .profile-activity,
html body .profile-activity:not(:last-child) {
padding: 0 0 4px 42px !important;
border: 0 !important;
}
[dir="rtl"] html body .profile-activity,
[dir="rtl"] html body .profile-activity:not(:last-child) {
padding: 0 42px 4px 0 !important;
border: 0 !important;
}
html body .profile-activity-icon {
left: 0 !important;
top: 0 !important;
}
[dir="rtl"] html body .profile-activity-icon {
left: auto !important;
right: 0 !important;
}
html body .profile-activity-header {
margin: 0 !important;
}
html body .profile-activity-contribution {
margin: 10px 0 0 0 !important;
padding: 22px 26px !important;
border-radius: 22px !important;
}
html body .profile-contribution-list > .profile-contribution {
padding: 22px 26px 22px 68px !important;
border-radius: 22px !important;
}
html body .profile-contribution-list > .profile-contribution .profile-contribution-icon {
top: 22px !important;
left: 22px !important;
}
}
@media (min-width: 1024px) {
html body header#main-content.profile-header > .container {
grid-template-columns: minmax(0, 1fr) 320px !important;
column-gap: 28px !important;
align-items: center !important;
}
html body .profile-header .profile-stats-counters {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 10px !important;
padding: 0 !important;
border: 0 !important;
}
}
@media (min-width: 1280px) {
html body header#main-content.profile-header > .container {
grid-template-columns: minmax(0, 1fr) 336px !important;
column-gap: 36px !important;
}
}
@media (orientation: landscape) and (max-height: 500px) {
html body header#main-content.profile-header {
padding: 14px 0 10px !important;
}
html body header#main-content.profile-header > .container {
gap: 12px !important;
}
html body .profile-header .avatar.profile-avatar,
html body .profile-header .profile-avatar {
width: 60px !important;
height: 60px !important;
min-width: 60px !important;
max-width: 60px !important;
flex: 0 0 60px !important;
}
html body .profile-header .profile-info {
grid-template-columns: 60px minmax(0, 1fr) auto !important;
grid-template-areas: "avatar info options" "desc desc desc" "stats stats stats" !important;
column-gap: 14px !important;
row-gap: 10px !important;
}
html body .profile-header .basic-info .name {
font-size: 22px !important;
}
html body .profile-header .profile-stats-counters .stat {
padding: 10px 12px !important;
}
html body .profile-header .profile-stats-counters {
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
html body .profile-nav {
margin: 4px 0 16px !important;
}
}
@media (orientation: landscape) and (max-height: 500px) and (max-width: 767px) {
html body .profile-header .profile-stats-activity .stat {
padding: 10px 12px !important;
}
}
@media (orientation: landscape) and (max-height: 500px) and (min-width: 768px) {
html body .profile-header .profile-stats-activity {
padding: 10px 18px !important;
}
}
html body .container-divider {
border: 0 !important;
border-top: 0 !important;
height: 0 !important;
margin: 0 !important;
}
html body .breadcrumbs,
html body .kia-breadcrumb,
html body .sub-nav {
border: 0 !important;
box-shadow: none !important;
}
html body .pagination,
html body .pagination-list,
html body .pagination a,
html body .pagination span,
html body .pagination-current {
border: 0 !important;
box-shadow: none !important;
}
html body .pagination a,
html body .pagination span,
html body .pagination-current {
background: var(--kia-ol-s2, #0E2233) !important;
border-radius: 999px !important;
}
html body .pagination a:hover,
html body .pagination a:focus-visible {
background: var(--kia-ol-s3, #142D42) !important;
}
html body .pagination .pagination-current,
html body .pagination [aria-current="page"] {
background: var(--kia-ol-s4, #1B3B56) !important;
}
html body .dropdown-menu,
html body [role="menu"] {
border: 0 !important;
box-shadow: none !important;
background: var(--kia-ol-s3, #142D42) !important;
border-radius: 12px !important;
}
:root,
html body {
--kia-ol-surface-0: #05141F !important;
--kia-ol-surface-1: #0A1B2A !important;
--kia-ol-surface-2: #0F2437 !important;
--kia-ol-surface-3: #153048 !important;
}
html body .profile-section nav.pagination {
display: flex !important;
visibility: visible !important;
height: auto !important;
overflow: visible !important;
justify-content: center !important;
align-items: center !important;
margin: 28px 0 0 !important;
padding: 0 !important;
border: 0 !important;
box-shadow: none !important;
background: transparent !important;
}
html body .profile-section.is-prof-inf-active nav.pagination {
display: none !important;
}
html body .profile-section nav.pagination .pagination-list {
display: inline-flex !important;
flex-wrap: wrap !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
border: 0 !important;
box-shadow: none !important;
background: transparent !important;
}
html body .profile-section nav.pagination .pagination-list li {
display: inline-flex !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
box-shadow: none !important;
}
html body .profile-section nav.pagination .pagination-list a,
html body .profile-section nav.pagination .pagination-current {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
min-height: 40px !important;
padding: 0 18px !important;
border: 0 !important;
border-radius: 999px !important;
background: var(--kia-ol-surface-2, #0F2437) !important;
color: #F8FAFC !important;
font-size: 13.5px !important;
font-weight: 600 !important;
text-decoration: none !important;
box-shadow: none !important;
transition: background-color 0.16s ease, color 0.16s ease !important;
}
html body .profile-section nav.pagination .pagination-list a:hover,
html body .profile-section nav.pagination .pagination-list a:focus-visible {
background: var(--kia-ol-surface-3, #153048) !important;
color: #7DD3FC !important;
}
html body #kia-profile-infinite-footer {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 12px !important;
margin: 28px 0 8px !important;
padding: 18px 20px !important;
border: 0 !important;
border-radius: 18px !important;
background: var(--kia-ol-surface-1, #0A1B2A) !important;
box-shadow: none !important;
}
html body #kia-profile-infinite-footer .kia-prof-inf-status {
margin: 0 !important;
font-size: 13px !important;
font-weight: 600 !important;
color: #94A3B8 !important;
font-variant-numeric: tabular-nums !important;
}
html body #kia-profile-infinite-footer .kia-prof-inf-track {
width: min(260px, 78vw) !important;
height: 4px !important;
border: 0 !important;
border-radius: 999px !important;
background: rgba(255, 255, 255, 0.08) !important;
overflow: hidden !important;
box-shadow: none !important;
}
html body #kia-profile-infinite-footer .kia-prof-inf-fill {
height: 100% !important;
border: 0 !important;
border-radius: 999px !important;
background: #38BDF8 !important;
box-shadow: none !important;
transition: width 0.24s ease !important;
}
html body #kia-profile-infinite-footer .kia-prof-inf-btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
min-height: 40px !important;
padding: 0 22px !important;
border: 0 !important;
border-radius: 999px !important;
background: var(--kia-ol-surface-2, #0F2437) !important;
color: #F8FAFC !important;
font-size: 13.5px !important;
font-weight: 600 !important;
cursor: pointer !important;
box-shadow: none !important;
transition: background-color 0.16s ease, color 0.16s ease !important;
}
html body #kia-profile-infinite-footer .kia-prof-inf-btn:hover,
html body #kia-profile-infinite-footer .kia-prof-inf-btn:focus-visible {
background: var(--kia-ol-surface-3, #153048) !important;
color: #7DD3FC !important;
}
html body #kia-profile-infinite-footer .kia-prof-inf-btn[disabled],
html body #kia-profile-infinite-footer .kia-prof-inf-btn.is-done {
display: none !important;
}
html body #git-ai-chips-container,
html body #git-ai-chips-container.git-ai-chips-inline-card {
border: 0 !important;
box-shadow: none !important;
}
html body #zd-modal-container {
position: fixed !important;
inset: 0 !important;
z-index: 2147483647 !important;
pointer-events: none !important;
border: 0 !important;
box-shadow: none !important;
}
html body #zd-modal-container > * {
pointer-events: auto !important;
}
html body:has(#zd-modal-container > *) #git-cookie-banner,
html body:has(#zd-modal-container > *) .kia-mobile-sticky-dock,
html body:has(#zd-modal-container > *) #kia-dock-chat-callout {
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}
html body nav.pagination {
display: flex !important;
visibility: visible !important;
height: auto !important;
overflow: visible !important;
flex-wrap: wrap !important;
justify-content: center !important;
align-items: center !important;
gap: 8px !important;
margin: 28px 0 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 999px !important;
box-shadow: none !important;
background: transparent !important;
}
html body nav.pagination .pagination-list {
display: inline-flex !important;
flex-wrap: wrap !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
border: 0 !important;
box-shadow: none !important;
background: transparent !important;
}
html body nav.pagination li {
display: inline-flex !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
box-shadow: none !important;
}
html body nav.pagination a,
html body nav.pagination .pagination-current {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
min-height: 40px !important;
padding: 0 18px !important;
border: 0 !important;
border-radius: 999px !important;
background: var(--kia-ol-surface-2, #0F2437) !important;
color: #F8FAFC !important;
font-size: 13.5px !important;
font-weight: 600 !important;
text-decoration: none !important;
box-shadow: none !important;
transition: background-color 0.16s ease, color 0.16s ease !important;
}
html body nav.pagination a:hover,
html body nav.pagination a:focus-visible {
background: var(--kia-ol-surface-3, #153048) !important;
color: #7DD3FC !important;
}
html body nav.pagination .pagination-current,
html body nav.pagination [aria-current="page"],
html body .profile-section nav.pagination .pagination-current,
html body .profile-section nav.pagination [aria-current="page"] {
background: var(--kia-ol-surface-3, #153048) !important;
color: #F8FAFC !important;
}
html body .profile-section nav.pagination {
border-radius: 999px !important;
}
html body .profile-activity-list,
html body .profile-contribution-list {
gap: 0 !important;
}
html body .profile-contribution-list > .profile-contribution,
html body .profile-activity-contribution {
background: var(--kia-ol-surface-1, #0A1B2A) !important;
border: 0 !important;
border-top: 0 !important;
border-bottom: 0 !important;
border-radius: 16px !important;
box-shadow: none !important;
padding: 20px 24px !important;
margin-bottom: 12px !important;
}
html body .profile-contribution-list > .profile-contribution {
padding: 20px 24px 20px 66px !important;
}
html body .profile-contribution-list > .profile-contribution .profile-contribution-icon {
top: 20px !important;
left: 24px !important;
}
html body .profile-contribution-list > .profile-contribution:hover,
html body .profile-activity-contribution:hover {
background: var(--kia-ol-surface-2, #0F2437) !important;
border: 0 !important;
box-shadow: none !important;
transform: none !important;
}
html body .profile-activity,
html body .profile-activity:not(:last-child) {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
background: transparent !important;
border: 0 !important;
border-top: 0 !important;
border-bottom: 0 !important;
border-left: 0 !important;
box-shadow: none !important;
}
html body .profile-contribution-header,
html body .profile-contribution-title,
html body .profile-contribution-breadcrumbs,
html body .profile-contribution-body,
html body .profile-contribution .meta-group,
html body .profile-activity-header {
border-top: 0 !important;
border-bottom: 0 !important;
box-shadow: none !important;
}
/* [KIA-OL-USER-MENU] */
html body .user-info:not(.header-language-selector) .dropdown-menu,html body .dropdown-menu[role="menu"]:not(:is(.header-language-selector,.language-selector,.footer-language-selector-inner) *),html body [role="menu"].dropdown-menu:not(:is(.header-language-selector,.language-selector,.footer-language-selector-inner) *){background:var(--kia-ol-s3,#132840)!important;border:0!important;box-shadow:none!important;outline:none!important;border-radius:12px!important;padding:6px!important;min-width:188px!important}
html body .dropdown-menu [role="menuitem"],html body .dropdown-menu [role="menuitemradio"],html body .dropdown-menu [role="menuitemcheckbox"],html body [role="menu"]:not(#opt3-flyout) [role="menuitem"],html body [role="menu"]:not(#opt3-flyout) [role="menuitemradio"],html body [role="menu"]:not(#opt3-flyout) [role="menuitemcheckbox"],html body .user-info .dropdown-menu > a,html body .user-info .dropdown-menu > button,html body .dropdown-menu.dropdown-menu-end > a,html body .dropdown-menu.dropdown-menu-end > button{color:#E2E8F0!important;background:transparent!important;border:0!important;box-shadow:none!important;outline:none!important;text-decoration:none!important;transition:background-color .15s ease,color .15s ease!important}
html body :is(.dropdown-menu,[role="menu"]:not(#opt3-flyout)) :is([role="menuitem"],[role="menuitemradio"],[role="menuitemcheckbox"],a,button):not(:is(.header-language-selector,.language-selector,.footer-language-selector-inner) *){border-radius:8px!important;padding:9px 14px!important;margin:1px 0!important;font-size:13.5px!important;font-weight:500!important;line-height:1.4!important;display:block!important;width:100%!important;box-sizing:border-box!important}
html body :is(.dropdown-menu,[role="menu"]:not(#opt3-flyout)) :is([role="menuitem"],[role="menuitemradio"],[role="menuitemcheckbox"],a,button):is(:hover,:focus,:focus-visible,.garden-focus-visible,[data-garden-focus-visible="true"]){color:#F8FAFC!important;background:var(--kia-ol-s4,#1B3B56)!important;border:0!important;box-shadow:none!important;outline:none!important;text-decoration:none!important}
html body :is(.dropdown-menu,[role="menu"]) :is([role="menuitem"],[role="menuitemradio"],[role="menuitemcheckbox"],a,button):is([aria-selected="true"],[aria-checked="true"]){color:#7DD3FC!important;background:rgba(56,189,248,.12)!important;font-weight:600!important}
html body :is(.dropdown-menu,[role="menu"]) :is([role="menuitem"],[role="menuitemradio"],[role="menuitemcheckbox"],a,button):is([aria-selected="true"],[aria-checked="true"])::after{filter:brightness(0) invert(1)!important;color:#7DD3FC!important;opacity:1!important}
html body a[role="menuitem"][href*="/access/logout"],html body :is(.dropdown-menu,[role="menu"]) a[href*="/access/logout"]{color:#FCA5A5!important}
html body :is(.dropdown-menu,[role="menu"]) a[href*="/access/logout"]:is(:hover,:focus,:focus-visible,.garden-focus-visible,[data-garden-focus-visible="true"]){color:#FECACA!important;background:rgba(239,68,68,.14)!important}
html body :is(.dropdown-menu,[role="menu"]) :is(.separator,[role="separator"]){border:0!important;border-top:0!important;border-bottom:0!important;box-shadow:none!important;outline:none!important;height:1px!important;min-height:1px!important;background:rgba(148,163,184,.14)!important;margin:5px 8px!important;padding:0!important}
/* [KIA-OUTLINELESS-CONCEPT-A:END] */