/*
    Document   : app.css
    Created on : March 31, 2025
    Author     : Applied AI
    Description:
        Main application stylesheet for overriding and extending base Oracle JET Redwood styles.

        This file contains:
        - Global CSS variables
        - Layout tweaks and overrides
        - Custom component styles
        - Utility classes
*/
/* ================== GENERAL STYLES ================== */
:root {
    font-size: 14px;
    /* ================== COLORS ================== */

    /* Neutral */
    --aai-neutral-light-1: #fcfcfd;
    --aai-neutral-light-2: #f9f9fb;
    --aai-neutral-light-3: #f6f6f9;
    --aai-neutral-interactive-1: #e8e8ec;
    --aai-neutral-interactive-2: #e0e1e6;
    --aai-neutral-lines-1: #d9d9e0;
    --aai-neutral-lines-2: #b9bbc6;
    --aai-neutral-solid-1: #8b8d98;
    --aai-neutral-solid-2: #80838d;
    --aai-neutral-dark-1: #60646c;
    --aai-neutral-dark-2: #31383f;
    --aai-neutral-dark-3: #1c2024;

    /* Primary */
    --aai-primary-light-1: #eff5ff;
    --aai-primary-light-2: #daeafe;
    --aai-primary-interactive-1: #bedbff;
    --aai-primary-interactive-2: #8ec5ff;
    --aai-primary-lines-1: #51a2ff;
    --aai-primary-lines-2: #317fff;
    --aai-primary-solid-1: #295dfb;
    --aai-primary-solid-2: #2247e6;
    --aai-primary-dark-1: #1c398e;
    --aai-primary-dark-2: #162456;

    /* Secondary */
    --aai-secondary-light-1: #fdfcfe;
    --aai-secondary-light-2: #faf8ff;
    --aai-secondary-interactive-1: #ebe4ff;
    --aai-secondary-interactive-2: #e1d9ff;
    --aai-secondary-lines-1: #d4cafe;
    --aai-secondary-lines-2: #a08bf2;
    --aai-secondary-solid-1: #6e56cf;
    --aai-secondary-solid-2: #654dc4;
    --aai-secondary-dark-1: #6550b9;
    --aai-secondary-dark-2: #2f265f;

    /* Accent 1 */
    --aai-accent1-light-1: #fffcfc;
    --aai-accent1-light-2: #f6f6f9;
    --aai-accent1-interactive-1: #ffdbdc;
    --aai-accent1-interactive-2: #ffcdce;
    --aai-accent1-lines-1: #fdbdbe;
    --aai-accent1-lines-2: #f4a9aa;
    --aai-accent1-solid-1: #e5484d;
    --aai-accent1-solid-2: #dc3e42;
    --aai-accent1-dark-1: #ce2c31;
    --aai-accent1-dark-2: #641723;

    /* Accent 2 */
    --aai-accent2-light-1: #fcfdfa;
    --aai-accent2-light-2: #f8faf3;
    --aai-accent2-interactive-1: #e2f0bd;
    --aai-accent2-interactive-2: #d3e7a6;
    --aai-accent2-lines-1: #c2da91;
    --aai-accent2-lines-2: #abc978;
    --aai-accent2-solid-1: #bdee63;
    --aai-accent2-solid-2: #b0e64c;
    --aai-accent2-dark-1: #5c7c2f;
    --aai-accent2-dark-2: #37401c;

    /* Accent 3 */
    --aai-accent3-light-1: #fdfdf9;
    --aai-accent3-light-2: #fefce9;
    --aai-accent3-interactive-1: #fff394;
    --aai-accent3-interactive-2: #ffe770;
    --aai-accent3-lines-1: #f3d768;
    --aai-accent3-lines-2: #e4c767;
    --aai-accent3-solid-1: #ffe629;
    --aai-accent3-solid-2: #ffdc00;
    --aai-accent3-dark-1: #9e6c00;
    --aai-accent3-dark-2: #473b1f;

    /* Accent 4 */
    --aai-accent4-light-1: #fefcfb;
    --aai-accent4-light-2: #fff7ed;
    --aai-accent4-interactive-1: #ffdfb5;
    --aai-accent4-interactive-2: #ffd19a;
    --aai-accent4-lines-1: #ffc182;
    --aai-accent4-lines-2: #f5ae73;
    --aai-accent4-solid-1: #f76b15;
    --aai-accent4-solid-2: #ef5f00;
    --aai-accent4-dark-1: #cc4e00;
    --aai-accent4-dark-2: #582d1d;

    /* ================== ICON GRADIENTS ================== */
    --aai-gradient-aai-purple: linear-gradient(90deg, #a855f7 15%, #4f46e5 90%);
    --aai-gradient-neutral: linear-gradient(
        120deg,
        var(--aai-neutral-lines-2) 15%,
        var(--aai-neutral-dark-1) 90%
    );
    --aai-gradient-primary: linear-gradient(
        120deg,
        var(--aai-primary-lines-2) 15%,
        var(--aai-primary-dark-1) 90%
    );
    --aai-gradient-secondary: linear-gradient(
        120deg,
        var(--aai-secondary-lines-2) 15%,
        var(--aai-secondary-dark-2) 130%
    );
    --aai-gradient-accent1: linear-gradient(
        120deg,
        var(--aai-accent1-solid-1) 22%,
        var(--aai-accent1-dark-2) 140%
    );
    --aai-gradient-accent2: linear-gradient(
        120deg,
        var(--aai-accent2-lines-2) 15%,
        var(--aai-accent2-dark-1) 100%
    );
    --aai-gradient-accent3: linear-gradient(
        120deg,
        var(--aai-accent3-lines-2) 15%,
        var(--aai-accent3-dark-1) 100%
    );
    --aai-gradient-accent4: linear-gradient(
        120deg,
        var(--aai-accent4-lines-2) 15%,
        var(--aai-accent4-dark-1) 100%
    );

    /* ================== BUTTON GRADIENTS ================== */
    --aai-gradient-btn-neutral: linear-gradient(
        90deg,
        var(--aai-neutral-lines-2) 15%,
        var(--aai-neutral-dark-1) 90%
    );
    --aai-gradient-btn-primary: linear-gradient(
        90deg,
        var(--aai-primary-lines-2) 15%,
        var(--aai-primary-dark-1) 90%
    );
    --aai-gradient-btn-secondary: linear-gradient(
        90deg,
        var(--aai-secondary-lines-2) 15%,
        var(--aai-secondary-dark-2) 130%
    );
    --aai-gradient-btn-accent1: linear-gradient(
        90deg,
        var(--aai-accent1-solid-1) 22%,
        var(--aai-accent1-dark-2) 140%
    );
    --aai-gradient-btn-accent2: linear-gradient(
        90deg,
        var(--aai-accent2-lines-2) 15%,
        var(--aai-accent2-dark-1) 100%
    );
    --aai-gradient-btn-accent3: linear-gradient(
        90deg,
        var(--aai-accent3-lines-2) 15%,
        var(--aai-accent3-dark-1) 100%
    );
    --aai-gradient-btn-accent4: linear-gradient(
        90deg,
        var(--aai-accent4-lines-2) 15%,
        var(--aai-accent4-dark-1) 100%
    );

    /* ================== GAPS ================== */
    --aai-gap-heading-items: 1rem;
    --aai-gap-items: 1.25rem;

    /* ================== BORDER-RADIUS ================== */
    --aai-radius-full: 100%;
    --aai-radius-lg: 15px;
    --aai-radius-md: 10px;
    --aai-radius-sm: 4px;
    --aai-radius-0: 0px;
}

/* take into account the border and margin as total width/height */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* ::selection {
    background: var(--aai-primary-dark-1);
    color: var(--aai-primary-light-1);
}

::-moz-selection {
    background: var(--aai-primary-dark-1);
    color: var(--aai-primary-light-1);
} */

body {
    overflow: hidden;
}

/* --- APP CONTAINER --- */

.app__container {
    display: flex;
    flex-direction: column;
}

/* oj-select */
[class*='-selectsingle'] [class*='oj-select-results'] {
    --oj-core-bg-color-selected: var(--aai-primary-light-1);
    font-size: var(--aai-controls-fontsize--md);
}

[class*='-selectsingle'] [class*='oj-select-results'] li {
    box-shadow: none !important;
    border: 0px !important;
    border-radius: 8px;
    min-height: 34px !important;
    margin: 5px;
    padding: 0px 0px 0px 8px;
}

[class^='oj-searchselect-arrow']::before {
    content: '\f121' !important;
}

/* oj-combobox-many */
[class*='-listbox-drop-multi'] [class*='oj-listbox-results'] {
    --oj-core-bg-color-selected: var(--aai-primary-light-1);
    font-size: var(--aai-controls-fontsize--md);
}

[class*='-listbox-drop-multi'] [class*='oj-listbox-results'] li {
    box-shadow: none !important;
    border: 0px !important;
    border-radius: 8px;
    min-height: 34px !important;
    margin: 5px;
    padding: 5px;
}

/* oj-drawer-popup */
[class*='DrawerPopupStyles_baseStyle'] {
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;

    /* temporal */
    border: 1px solid #b4b4b4;
}

/* oj-c-radioset */
[class*='RadioBaseTheme_baseTheme'] [class*='LabelBaseTheme_baseTheme'] {
    font-size: 1.05rem;
}

/* oj-switch */
.oj-form-control-label-inside.oj-form-control .oj-label {
    --oj-label-inside-edge-font-size: 1.05rem;
    --oj-label-inside-edge-color: black;
}

/* ================== CUSTOM ANIMATIONS ================== */

@-webkit-keyframes fade-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fade-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.aai-fadeIn-animation-08 {
    -webkit-animation: fade-in 0.8s cubic-bezier(0.39, 0.575, 0.565, 1) both;
    animation: fade-in 0.8s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}

@-webkit-keyframes fade-in-right {
    0% {
        -webkit-transform: translateX(50px);
        transform: translateX(50px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes fade-in-right {
    0% {
        -webkit-transform: translateX(50px);
        transform: translateX(50px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}

.aai-fadeInRight-animation-06 {
    -webkit-animation: fade-in-right 0.6s cubic-bezier(0.39, 0.575, 0.565, 1)
        both;
    animation: fade-in-right 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}

@-webkit-keyframes slide-in-right {
    0% {
        -webkit-transform: translateX(1000px);
        transform: translateX(1000px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slide-in-right {
    0% {
        -webkit-transform: translateX(1000px);
        transform: translateX(1000px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}

.aai-slideInRight-animation-05 {
    -webkit-animation: slide-in-right 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)
        both;
    animation: slide-in-right 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes slide-in-up {
    from {
        transform: translateY(100%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.aai-slideInUp-animation-04 {
    -webkit-animation: slide-in-up 0.4s ease-in-out;
    animation: slide-in-up 0.4s ease-in-out;
}

@-webkit-keyframes scale-in-tl {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        -webkit-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        opacity: 1;
    }
}

@keyframes scale-in-tl {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        -webkit-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        opacity: 1;
    }
}

.aai-scaleInTl-animation-02 {
    -webkit-animation: scale-in-tl 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94)
        both;
    animation: scale-in-tl 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

/* ============== Main Home Side Menu ============== */
.aaiHome__sideMenu {
    position: sticky;
    align-self: start;
    top: 0;
    height: 100vh;
    transition: all 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
    padding: 0 0.5rem;
    text-align: center;
    border-right: 1px solid #b0b0b040;
}

.aaiHome__sideMenu--expanded {
    width: 17vw;
}

/* ============== Main Home Content Area ============== */

.aaiMain {
    display: flex;
    background-color: var(--aai-neutral-light-1);
}

/* ================== CUSTOM COMPONENT CLASSES ================== */

/* for oj-input-text, oj-input-number, etc... */
.aai-textField {
    --oj-text-field-border-color: var(--aai-neutral-lines-1);
    --oj-text-field-border-color-focus: var(--aai-neutral-solid-1);
    --oj-text-field-box-shadow-focus: none;
    --oj-text-field-height: var(--aai-controls-height--md);
    --oj-text-field-font-size: var(--aai-controls-fontsize--md);
}

.aai-textField--xl {
    --oj-text-field-border-color: var(--aai-neutral-lines-1);
    --oj-text-field-border-color-focus: var(--aai-neutral-solid-1);
    --oj-text-field-box-shadow-focus: none;
    --oj-text-field-height: var(--aai-controls-height--xl);
    --oj-text-field-font-size: var(--aai-controls-fontsize--xl);
}

.aai-textField--lg {
    --oj-text-field-border-color: var(--aai-neutral-lines-1);
    --oj-text-field-border-color-focus: var(--aai-neutral-solid-1);
    --oj-text-field-box-shadow-focus: none;
    --oj-text-field-height: var(--aai-controls-height--lg);
    --oj-text-field-font-size: var(--aai-controls-fontsize--lg);
}

.aai-textField--md {
    --oj-text-field-border-color: var(--aai-neutral-lines-1);
    --oj-text-field-border-color-focus: var(--aai-neutral-solid-1);
    --oj-text-field-box-shadow-focus: none;
    --oj-text-field-height: var(--aai-controls-height--md);
    --oj-text-field-font-size: var(--aai-controls-fontsize--md);
}

.aai-textField--sm {
    --oj-text-field-border-color: var(--aai-neutral-lines-1);
    --oj-text-field-border-color-focus: var(--aai-neutral-solid-1);
    --oj-text-field-box-shadow-focus: none;
    --oj-text-field-height: var(--aai-controls-height--sm);
    --oj-text-field-font-size: var(--aai-controls-fontsize--sm);
}

.aai-textField--xs {
    --oj-text-field-border-color: var(--aai-neutral-lines-1);
    --oj-text-field-border-color-focus: var(--aai-neutral-solid-1);
    --oj-text-field-box-shadow-focus: none;
    --oj-text-field-height: var(--aai-controls-height--xs);
    --oj-text-field-font-size: var(--aai-controls-fontsize--xs);
}

/* for oj-input-search, etc... */
.aai-searchField {
    --oj-text-field-border-color: var(--aai-neutral-lines-1);
    --oj-text-field-border-color-focus: var(--aai-neutral-solid-1);
    --oj-text-field-box-shadow-focus: none;
    --oj-text-field-height: var(--aai-controls-height--md);
    --oj-text-field-font-size: var(--aai-controls-fontsize--md);
    --oj-private-text-field-icon-size: var(--aai-controls-iconsize--md);
}

.aai-searchField--xl {
    --oj-text-field-border-color: var(--aai-neutral-lines-1);
    --oj-text-field-border-color-focus: var(--aai-neutral-solid-1);
    --oj-text-field-box-shadow-focus: none;
    --oj-text-field-height: var(--aai-controls-height--xl);
    --oj-text-field-font-size: var(--aai-controls-fontsize--xl);
    --oj-private-text-field-icon-size: var(--aai-controls-iconsize--xl);
}

.aai-searchField--lg {
    --oj-text-field-border-color: var(--aai-neutral-lines-1);
    --oj-text-field-border-color-focus: var(--aai-neutral-solid-1);
    --oj-text-field-box-shadow-focus: none;
    --oj-text-field-height: var(--aai-controls-height--lg);
    --oj-text-field-font-size: var(--aai-controls-fontsize--lg);
    --oj-private-text-field-icon-size: var(--aai-controls-iconsize--lg);
}

.aai-searchField--md {
    --oj-text-field-border-color: var(--aai-neutral-lines-1);
    --oj-text-field-border-color-focus: var(--aai-neutral-solid-1);
    --oj-text-field-box-shadow-focus: none;
    --oj-text-field-height: var(--aai-controls-height--md);
    --oj-text-field-font-size: var(--aai-controls-fontsize--md);
    --oj-private-text-field-icon-size: var(--aai-controls-iconsize--md);
}

.aai-searchField--sm {
    --oj-text-field-border-color: var(--aai-neutral-lines-1);
    --oj-text-field-border-color-focus: var(--aai-neutral-solid-1);
    --oj-text-field-box-shadow-focus: none;
    --oj-text-field-height: var(--aai-controls-height--sm);
    --oj-text-field-font-size: var(--aai-controls-fontsize--sm);
    --oj-private-text-field-icon-size: var(--aai-controls-iconsize--sm);
}

.aai-searchField--xs {
    --oj-text-field-border-color: var(--aai-neutral-lines-1);
    --oj-text-field-border-color-focus: var(--aai-neutral-solid-1);
    --oj-text-field-box-shadow-focus: none;
    --oj-text-field-height: var(--aai-controls-height--xs);
    --oj-text-field-font-size: var(--aai-controls-fontsize--xs);
    --oj-private-text-field-icon-size: var(--aai-controls-iconsize--xs);
}

/* for oj-buttonset-many, etc... */
.aai-btnSet {
    --oj-button-height: var(--aai-controls-height--xs);
    --oj-button-borderless-chrome-border-color-selected: var(
        --aai-neutral-light-3
    );
}

/* for oj-navigation-list, etc... */
.aai-navList {
    --oj-tab-bar-item-label-color: #242424;
    --oj-navigation-list-item-label-color: #242424;
    --oj-navigation-list-item-bg-color-hover: transparent;
    --oj-navigation-list-item-border-color-selected: transparent;
    --oj-navigation-list-item-label-color-selected: #213d8f;
}

/* for oj-select-single, etc... */
.aai-selectSingle {
    --oj-text-field-border-color: var(--aai-neutral-lines-1);
    --oj-text-field-border-color-focus: var(--aai-neutral-solid-1);
    --oj-text-field-box-shadow-focus: none;
    --oj-text-field-height: var(--aai-controls-height--md);
    --oj-text-field-font-size: var(--aai-controls-fontsize--md);
}

.aai-selectSingle--xl {
    --oj-text-field-border-color: var(--aai-neutral-lines-1);
    --oj-text-field-border-color-focus: var(--aai-neutral-solid-1);
    --oj-text-field-box-shadow-focus: none;
    --oj-text-field-height: var(--aai-controls-height--xl);
    --oj-text-field-font-size: var(--aai-controls-fontsize--xl);
}

.aai-selectSingle--lg {
    --oj-text-field-border-color: var(--aai-neutral-lines-1);
    --oj-text-field-border-color-focus: var(--aai-neutral-solid-1);
    --oj-text-field-box-shadow-focus: none;
    --oj-text-field-height: var(--aai-controls-height--lg);
    --oj-text-field-font-size: var(--aai-controls-fontsize--lg);
}

.aai-selectSingle--md {
    --oj-text-field-border-color: var(--aai-neutral-lines-1);
    --oj-text-field-border-color-focus: var(--aai-neutral-solid-1);
    --oj-text-field-box-shadow-focus: none;
    --oj-text-field-height: var(--aai-controls-height--md);
    --oj-text-field-font-size: var(--aai-controls-fontsize--md);
}

.aai-selectSingle--sm {
    --oj-text-field-border-color: var(--aai-neutral-lines-1);
    --oj-text-field-border-color-focus: var(--aai-neutral-solid-1);
    --oj-text-field-box-shadow-focus: none;
    --oj-text-field-height: var(--aai-controls-height--sm);
    --oj-text-field-font-size: var(--aai-controls-fontsize--sm);
}

.aai-selectSingle--xs {
    --oj-text-field-border-color: var(--aai-neutral-lines-1);
    --oj-text-field-border-color-focus: var(--aai-neutral-solid-1);
    --oj-text-field-box-shadow-focus: none;
    --oj-text-field-height: var(--aai-controls-height--xs);
    --oj-text-field-font-size: var(--aai-controls-fontsize--xs);
}

.aai-selectSingle--danger {
    --oj-text-field-bg-color: var(--aai-danger-color--light);
}

.aai-selectSingle--success {
    --oj-text-field-bg-color: var(--aai-success-color--light);
}

/* for oj-text-area, text-area */
.aai-textArea {
    --oj-text-field-text-to-edge-padding: 6px;
    --oj-text-field-border-color: var(--aai-neutral-lines-1);
    --oj-text-field-border-color-focus: var(--aai-neutral-solid-1);
    --oj-text-field-box-shadow-focus: none;
    --oj-text-field-font-size: var(--aai-controls-fontsize--md);
}

.aai-textArea--xl {
    --oj-text-field-border-color: var(--aai-neutral-lines-1);
    --oj-text-field-border-color-focus: var(--aai-neutral-solid-1);
    --oj-text-field-box-shadow-focus: none;
    --oj-text-field-font-size: var(--aai-controls-fontsize--xl);
}

.aai-textArea--lg {
    --oj-text-field-border-color: var(--aai-neutral-lines-1);
    --oj-text-field-border-color-focus: var(--aai-neutral-solid-1);
    --oj-text-field-box-shadow-focus: none;
    --oj-text-field-font-size: var(--aai-controls-fontsize--lg);
}

.aai-textArea--md {
    --oj-text-field-border-color: var(--aai-neutral-lines-1);
    --oj-text-field-border-color-focus: var(--aai-neutral-solid-1);
    --oj-text-field-box-shadow-focus: none;
    --oj-text-field-font-size: var(--aai-controls-fontsize--md);
}

.aai-textArea--sm {
    --oj-text-field-border-color: var(--aai-neutral-lines-1);
    --oj-text-field-border-color-focus: var(--aai-neutral-solid-1);
    --oj-text-field-box-shadow-focus: none;
    --oj-text-field-font-size: var(--aai-controls-fontsize--sm);
}

.aai-textArea--xs {
    --oj-text-field-border-color: var(--aai-neutral-lines-1);
    --oj-text-field-border-color-focus: var(--aai-neutral-solid-1);
    --oj-text-field-box-shadow-focus: none;
    --oj-text-field-font-size: var(--aai-controls-fontsize--xs);
}

/* for oj-checkbox */
.aai-checkbox span {
    font-size: calc(var(--aai-controls-fontsize--md) + 1px);
}

.aai-checkbox--xl span {
    font-size: var(--aai-controls-fontsize--xl);
}

.aai-checkbox--lg span {
    font-size: var(--aai-controls-fontsize--lg);
}

.aai-checkbox--md span {
    font-size: var(--aai-controls-fontsize--md);
}

.aai-checkbox--sm span {
    font-size: var(--aai-controls-fontsize--sm);
}

.aai-checkbox--xs span {
    font-size: var(--aai-controls-fontsize--xs);
}

[class^='aai-checkbox'] svg {
    color: var(--aai-neutral-dark-1);
}

/* for oj-list-view */
.aai-listView {
    background-color: inherit;
}

.aai-listView [class*='selected_isSelected'] {
    background-color: var(--aai-primary-light-2) !important;
    background-image: none !important;
    box-shadow: none !important;
    border-image: none !important;
    border-top: 1px solid transparent !important;
    padding: 0px 5px 2px 5px;
    border-radius: 6px;
}

.aai-listView [class^='ListStyles_listItemStyles_base']:hover {
    background-color: transparent !important;
    background-image: none !important;
}

/* for oj-table */
.aai-table {
    --oj-collection-header-font-size: clamp(0.7rem, 1.5vw, 0.82rem);
    --oj-table-header-row-height: 30px;
    --oj-collection-list-row-height: 3rem;
    --oj-collection-list-cell-padding-vertical: 0.4rem;
    --oj-core-bg-color-selected: var(--aai-primary-light-1);
    --oj-core-border-color-selected: var(--aai-primary-interactive-2);
    background-color: var(--aai-neutral-light-2);
    font-size: clamp(0.82rem, 1.6vw, 0.9rem);
}

/* for oj-collapsible */
.aai-collapsible [id*='oj-collapsible-header'] {
    padding: 8px;
    border-radius: 6px;
}

.aai-collapsible [id*='oj-collapsible-header']:hover {
    background-color: var(--aai-neutral-light-1);
}

/* for oj-dialog */
.aai-dialog {
    --oj-dialog-header-padding: 0px;
    --oj-dialog-body-padding: 0px;
}

.aai-dialog [class*='oj-dialog-header'] {
    border-style: none;
}

/* for oj-combobox-many, etc... */
.aai-comboboxManyField {
    --oj-text-field-border-color: var(--aai-neutral-lines-1);
    --oj-text-field-border-color-focus: var(--aai-neutral-solid-1);
    --oj-text-field-box-shadow-focus: none;
    --oj-text-field-height: var(--aai-controls-height--md);
    --oj-text-field-font-size: var(--aai-controls-fontsize--md);
    /* --oj-text-field-text-to-edge-padding: 4px; */
    /* --oj-text-field-text-to-edge-padding: 4px; */
}

.oj-text-field .oj-text-field-container {
    /* border-radius: var(--aai-radius-lg); */
    border-color: #8080807d;
}

.aai-textField input {
    padding: 0.49rem !important;
}

.oj-inputnumber .oj-inputnumber-wrapper {
    align-items: center;
}

.oj-navigationlist-item.oj-selected {
    background-color: var(--aai-primary-light-2);
    border-color: var(--oj-navigation-list-item-border-color-selected);
    font-size: 0.7rem;
}

.oj-table-header-row {
    background-color: var(--aai-neutral-interactive-2) !important;
}

.oj-web-applayout-body {
    overflow-y: hidden;
}

input.oj-inputsearch-input {
    padding: 0.49rem;
}

.aai-btnSet {
    display: flex;
    --oj-button-height: var(--aai-controls-height--xs);
    --oj-button-borderless-chrome-border-color-selected: var(
        --aai-neutral-light-3
    );
}

.aai-requiredFormField-label {
    color: var(--aai-accent1-dark-1);
}

/* ================== CUSTOM DEMO STYLES pending to refactor ================== */

.headerLOL {
    color: var(--aai-neutral-dark-2);
    margin: 0 !important;
}

.badgeLOL {
    font-size: 0.8rem;
    display: flex;
    gap: 0.5rem;
    justify-content: space-between;
    margin: 0.5rem;
}

.badgeLOL--badges {
    display: flex;
    gap: 0.5rem;
}

.badgeLOL--badge {
    padding: 0.5rem;
    background-color: var(--aai-primary-light-2);
    color: var(--aai-primary-dark-1);
}

/* ================== CUSTOM BACKGROUNDS ================== */

.aai-panel {
    box-shadow:
        rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
        rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
    background-color: white;
    border-radius: 12px;
    overflow-y: auto;
    border-radius: 8px;
    height: 100%;
}

/* ================== CUSTOM MARKDOWN COMPONENT STYLES ================== */

.aaiMarkdownTable {
    border-collapse: collapse;
    width: 100%;
}

.aaiMarkdownTable th,
.aaiMarkdownTable td {
    padding: 8px 12px;
    border: 1px solid #ddd;
    text-align: left;
}

.aaiMarkdownTable tr:nth-child(even) {
    background-color: #f9f9f9;
}

/* ================== UTILITY CLASSES ================== */

.aaiWidthFitContent {
    width: fit-content;
}

.aaiUserFriendlyTextBreak {
    white-space: normal !important;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
}

.aaiWhiteSpaceBreakSpaces {
    white-space: break-spaces;
}

.flex-gap {
    gap: 0.5rem;
}

.margin-left-auto {
    margin-left: auto;
}

.margin-right-auto {
    margin-right: auto;
}

.table-word-wrap,
.table-world-wrap {
    box-sizing: border-box;
    white-space: normal;
    word-wrap: break-word;
}

.hidden {
    display: none !important;
}

.primaryShadow {
    box-shadow:
        rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
        rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
}

.secondaryShadow {
    box-shadow:
        rgba(0, 0, 0, 0.1) 0px 0px 5px 0px,
        rgba(0, 0, 0, 0.1) 0px 0px 1px 0px;
}

.dashedShadow {
    box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
    border: 1px dashed #cbcbcb;
}

.outlinedShadow {
    box-shadow:
        rgba(0, 0, 0, 0.02) 0px 1px 3px 0px,
        rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
}

.simpleShadow {
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
}

.emptyShadow {
    box-shadow: none;
}

/* ================== Applied AI Log in and Sign up ================== */

.aiAuth__container {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.aiAuth__card {
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    width: 50%;
    max-width: 500px;
    min-width: 500px;
    border-radius: 10px;
    background-color: #e7e7e7bf;
    padding: 25px;
}

.aiAuth__cardTop {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.aiAuth__userImage {
    width: 80px;
    height: 80px;
}

.aiAuth__title {
    margin-bottom: 1px;
    text-align: center;
}

.aiAuth__subtitle {
    text-align: center;
}

.aiAuth__fieldLabel {
    display: block;
    margin-bottom: 0.5rem;
}

.aiAuth__loginOptions {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.aiAuth__signInButton {
    width: 100%;
}

.aiAuth__fieldGroup:not(:last-child) {
    margin-bottom: 1rem;
}

/* ================== Echelon Log in and Sign up  ================== */

.auth__container {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 600px;
    min-width: 300px;
}

.auth__form-logo {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 25px;
}

.auth__form > * :not(:last-child) {
    margin-bottom: 0.4rem !important;
}

oj-input-password input[type='password']::-ms-reveal,
oj-input-password input[type='password']::-ms-clear,
oj-input-password input[type='password']:focus::-ms-reveal,
oj-input-password input[type='password']:focus::-ms-clear,
oj-input-password input[type='password']:focus::-webkit-clear-button,
oj-input-password input[type='password']:focus::-webkit-reveal-button,
oj-input-password
    input[type='password']:focus::-webkit-credentials-auto-fill-button {
    display: none !important;
    pointer-events: none;
    opacity: 0 !important;
}

/* ================== Fluid Font Sizes with Clamp  ================== */

.aaiText--xs {
    font-size: clamp(0.7rem, 1.5vw, 0.82rem);
}

.aaiText--sm {
    font-size: clamp(0.82rem, 1.6vw, 0.95rem);
}

.aaiText--base {
    font-size: clamp(0.95rem, 1.8vw, 1.05rem);
}

.aaiText--lg {
    font-size: clamp(1.05rem, 2vw, 1.45rem);
}

.aaiText--xl {
    font-size: clamp(1.45rem, 3vw, 1.85rem);
}

oj-c-tab-bar-mixed .oj-tabbar-item:not(.oj-selected) .oj-tabbar-item-label {
    color: #050000 !important;
}