/* same width & height */
.x4 { width:4px; min-width:4px; max-width:4px; height:4px; min-height:4px; max-height:4px; }
.x8 { width:8px; min-width:8px; max-width:8px; height:8px; min-height:8px; max-height:8px; }
.x16 { width:16px; min-width:16px; max-width:16px; height:16px; min-height:16px; max-height:16px; }
.x20 { width:20px; min-width:20px; max-width:20px; height:20px; min-height:20px; max-height:20px; }
.x24 { width:24px; min-width:24px; max-width:24px; height:24px; min-height:24px; max-height:24px; }
.x32 { width:32px; min-width:32px; max-width:32px; height:32px; min-height:32px; max-height:32px; }
.x40 { width:40px; min-width:40px; max-width:40px; height:40px; min-height:40px; max-height:40px; }
.x48 { width:48px; min-width:48px; max-width:48px; height:48px; min-height:48px; max-height:48px; }
.x52 { width:52px; min-width:52px; max-width:52px; height:52px; min-height:52px; max-height:52px; }
.x56 { width:56px; min-width:56px; max-width:56px; height:56px; min-height:56px; max-height:56px; }
.x64 { width:64px; min-width:64px; max-width:64px; height:64px; min-height:64px; max-height:64px; }
.x80 { width:80px; min-width:80px; max-width:80px; height:80px; min-height:80px; max-height:80px; }
.x96 { width:96px; min-width:96px; max-width:96px; height:96px; min-height:96px; max-height:96px; }
.x128 { width:128px; min-width:128px; max-width:128px; height:128px; min-height:128px; max-height:128px; }
.x160 { width:160px; min-width:160px; max-width:160px; height:160px; min-height:160px; max-height:160px; }


/* gap */
.gap-sm { gap: 0.25rem; }
.gap { gap: 0.5rem; }
.gap-md { gap: 0.75rem; }
.gap-lg { gap: 1rem; }
.gap-xl { gap: 1.5rem; }
.gap-2xl { gap: 2rem; }
.gap-3xl { gap: 2.5rem; }
.gap-4xl { gap: 3rem; }


/* visibility */
.visually-hidden {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0.01;   /* NOT 0 */
    pointer-events: none;
}
.kpxc-username {
    border: none;
    background: transparent;
    font-size: 0.9rem;
}


/* border */
.r-border { border: 1px solid rgb(240, 240, 240) !important; }


/* color */
.r-text-dark { color: var(--rix-color-dark); }
.r-text-light { color: var(--rix-color-light); }
.r-text-warning { color: var(--rix-color-warning); }
.r-text-error { color: var(--rix-color-error); }


/* modal */
.r-modal .modal-header {
    padding: 0 1.675rem;
    height: 64px;
}
.r-modal .modal-content {
    border-radius: 0;
}


/* logged in user avatar */
.r-my-avatar {
    cursor: pointer;
    position: relative;
    border-radius: 50%;
    
    background-color: var(--r-my-avatar-background, --rix-color-hover);
    color: var(--r-my-avatar-color, --rix-color-dark);
    
    background-image: var(--r-my-avatar-image, none);
    background-size: cover;
    background-position: center;
}
.r-my-avatar.clickable {
    cursor: pointer;
    user-select: none !important;
}
.r-my-avatar.clickable:hover {
    box-shadow: var(--elevation-2);
}
.r-my-avatar-edit-btn {
    display: flex;
    position: absolute;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    background-color: var(--rix-color-bg);
    color: var(--rix-color-dark);
}


/* button */
.r-btn {
    display: flex;
    align-items: center;
    background-color: transparent;
    border-radius: 50rem;
    padding: 0 1.5rem;
    height: 44px;
    border: none;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--rix-color-dark);
}
.r-btn:disabled, .r-btn[disabled]{
    border: none !important;
    background-color: #e7e7e7 !important;
    color: #888888 !important;
}
.r-btn.wide {
    padding: 0 2rem;
}
.r-btn:hover {
    background-color: var(--rix-color-hover);
    color: black;
}
.r-btn:not(:disabled).primary:hover,
.r-btn:not(:disabled).secondary:hover,
.r-btn:not(:disabled).warning:hover {
    box-shadow: var(--elevation-2);
}
.r-btn.primary {
    background-color: var(--rix-color-primary);
    color: #f8f9fa;
}
.r-btn.secondary {
    background-color: var(--rix-color-secondary);
    color: #f8f9fa;
}
.r-btn.error {
    background-color: var(--rix-color-error);
}
.r-btn.error:hover {
    background-color: lightcoral;
    color: black !important;
}
.r-btn.warning {
    background-color: var(--rix-color-warning);
}
.r-btn.light {
    background-color: var(--rix-color-hover);
}
.r-btn.light:hover {
    background-color: var(--rix-color-primary-bg);
    color: black !important;
}

.r-auth-btn {
    height: 52px;
}


/* segmented button */
.r-segmented-btn {
    background-color: whitesmoke;
    border-radius: 50rem;
    border: 1px solid var(--rix-color-light);
}
.r-segmented-btn button {
    background-color: transparent;
    color: var(--rix-color-dark);
    border-radius: 0;
    height: 56px;
    border: none;
    padding: 0 1.5rem;
    font-size: 1rem;
    font-weight: 600;
}
.r-segmented-btn button:first-child {
    border-radius: 50rem 0 0 50rem;
}
.r-segmented-btn button:not(:last-child) {
    border-right: 1px solid var(--rix-color-light);
}
.r-segmented-btn button:last-child {
    border-radius: 0 50rem 50rem 0;
}
.r-segmented-btn button:disabled, .r-btn[disabled]{
    border: none !important;
    background-color: #e7e7e7 !important;
    color: #888888 !important;
}
.r-segmented-btn button:hover {
    background-color: var(--rix-color-hover);
    color: black;
    box-shadow: var(--elevation-2);
}


/* pill button */
.r-pill-btn {
    height: 36px;
    padding: 0 0.875rem 0 0.675rem;
    background-color: transparent;
    border: 1px solid var(--rix-color-primary-bg);
    border-radius: 0.675rem;
    font-size: 1rem;
    font-weight: 500;
    color: var(--rix-color-primary-text);
    display: flex;
    align-items: center;
    gap: 0.375rem;
}
.r-pill-btn:hover {
    background-color: snow;
    box-shadow: var(--elevation-1);
}

.r-username-pill {
    padding: 0.125rem 0.675rem;
    background-color: transparent;
    border: 1px solid var(--rix-color-primary-bg);
    border-radius: 50rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--rix-color-primary-text);
    display: flex;
    align-items: center;
    gap: 0.375rem;
}
.r-username-pill:hover {
    background-color: var(--rix-color-hover);
    box-shadow: var(--elevation-1);
}


/* search button */
.r-search-input-btn {
    width: 100%;
    height: 56px;
    padding: 0 0.5rem;
    background-color: white;
    border: 1px solid rgb(240, 240, 240);
    border-radius: 50rem;
    font-size: 1rem;
    font-weight: 500;
    color: var(--rix-color-dark);
    display: flex;
    align-items: center;
}
.r-search-input-btn .input-area:hover {
    cursor: text;
}
.r-search-input-btn:hover {
    box-shadow: var(--elevation-2);
}


/* search input */
.r-search-input {
    width: 100%;
    height: 56px;
    padding: 0 0.5rem;
    background-color: white;
    border: 1px solid rgb(240, 240, 240);
    border-radius: 50rem;
    font-size: 1rem;
    font-weight: 500;
    color: var(--rix-color-dark);
    display: flex;
    align-items: center;
}
.r-search-input:has(input:focus) {
    outline: 2px solid var(--rix-color-primary);
}
.r-search-input input {
    width: 100%;
    height: 100%;
    outline: none;
    border: none;
    border-radius: 50rem;
    font-size: var(--r-font-size, 1rem);
    font-weight: 500;
    background-color: transparent;
    color: var(--rix-color-dark);
}


/* card section */
.r-card-section {
    cursor: pointer;
    min-height: 56px;
    background-color: white;
    border: 1px solid rgb(240, 240, 240);
    border-radius: 0.375rem;
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-align: left;
}
.r-card-section.disabled {
    cursor: default;
}
.r-card-section.elevated {
    box-shadow: var(--elevation-3);
}
.r-card-section.first {
    border-top-left-radius: 1.25rem !important;
    border-top-right-radius: 1.25rem !important;
}
.r-card-section.last {
    border-bottom-left-radius: 1.25rem !important;
    border-bottom-right-radius: 1.25rem !important;
}
.r-card-section:not(.disabled):hover {
    background-color: var(--rix-color-hover);
}
.r-card-section input[role="switch"] {
    width: 48px;
    height: 24px;
    border: 1px solid rgb(149, 149, 149);
}
.r-card-section input.form-control {
    height: 48px;
    border-radius: 0.675rem;
    border: 1px solid rgb(149, 149, 149);
    padding-left: 1rem;
}
.r-card-section .card-section-icon {
    display: none;
}

/* card */
.r-card {
    background-color: white;
    border: 1px solid rgb(240, 240, 240);
    border-radius: 1.25rem;
    padding: 2rem;
}
.r-card.fixed-width, .r-card.fixed-compact-width {
    width: 100%;
}
.r-card.elevated {
    box-shadow:
        0px 7px 8px -4px rgba(0, 0, 0, 0.1), 
        0px 12px 17px 2px rgba(0, 0, 0, 0.07), 
        0px 5px 22px 4px rgba(0, 0, 0, 0.06);
}
.r-card.clickable:hover {
    box-shadow: var(--elevation-2);
}
.r-card.info {
    background-color: #eaf4ff;   /* soft blue */
}
.r-card.success {
    background-color: #eaf7ef;   /* soft green */
}
.r-card.warning {
    background-color: #fff5de;   /* your chosen warm amber */
}
.r-card.error {
    background-color: #fdecec;   /* soft red */
}
.r-card input[type="checkbox"]:not([role="switch"]) {
    width: 20px;
    height: 20px;
    border-radius: 0.25rem;
    border: 1px solid rgb(149, 149, 149);
}
.r-card input[role="switch"] {
    width: 52px;
    height: 28px;
    border: 1px solid rgb(149, 149, 149);
}
.r-card input.form-control {
    height: 48px;
    border-radius: 0.675rem;
    border: 1px solid rgb(149, 149, 149);
    padding-left: 1rem;
}


/* wide submit button */
.r-submit-btn {
    width: 100%;
    height: 48px;
    border-radius: 0.675rem;
    line-height: 1rem;
    font-size: 1.2rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
}
.r-submit-btn:hover {
    background-color: #5a5df4 !important;
}


/* go back button */
.r-go-back-btn {
    background-color: transparent;
    height: 42px !important;
}


/* sso button */
.r-sso-btn {
    width: 100%;
    height: 48px;
    border-radius: 50rem;
    font-size: 1rem;
    font-weight: 500;
    color: rgb(50, 50, 50) !important;
}
.r-sso-btn.btn-primary {
    color: white !important;
}
.r-sso-btn.btn-primary:hover {
    outline: 3px solid #5a5df4 !important;
    outline-offset: 2px;
}


/* flag item */
.r-locale-item {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    width: 100%;
    height: 56px;
    min-height: 56px;
    max-height: 56px;
    background-color: white;
    border-radius: 50rem;
    border: none;
    font-size: 1rem;
    font-weight: 500;
    color: rgb(50, 50, 50) !important;
    padding-left: 0.5rem;
}
.r-locale-item:hover {
    background-color: var(--rix-color-hover);
}
.r-locale-item.active {
    background-color: var(--rix-color-hover);
    outline: 1px solid var(--rix-color-secondary);
}


/* timezone item */
.r-timezone-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    height: 56px;
    min-height: 56px;
    max-height: 56px;
    background-color: white;
    border-radius: 50rem;
    border: none;
    font-size: 1rem;
    font-weight: 500;
    color: rgb(50, 50, 50) !important;
    padding-left: 0.5rem;
}
.r-timezone-item:hover {
    background-color: var(--rix-color-hover);
}
.r-timezone-item.active {
    background-color: var(--rix-color-hover);
    outline: 1px solid var(--rix-color-secondary);
}


/* search item */
.r-search-item:hover {
    background-color: var(--rix-color-hover);
}



@media (min-width: 992px) {
    .r-modal .modal-content {
        border-radius: 1.675rem;
    }
    .r-card.fixed-width {
        width: var(--rix-default-body-width);
        min-width: var(--rix-default-body-width);
        max-width: var(--rix-default-body-width);
    }
    .r-card.fixed-compact-width {
        width: var(--rix-compact-body-width);
        min-width: var(--rix-compact-body-width);
        max-width: var(--rix-compact-body-width);
    }
    .r-card-section .card-section-icon {
        display: flex;
    }
}