/** =========== CUSTOMER BUTTON STYLING =========== **/
    /** --- AI Tools Section --- */
#ai-summary-btn[data-v-fb184e75] {
        border-top-right-radius: 0px !important;
        border-bottom-right-radius: 0px !important;
        border-right: none !important;
}
#ai-suggest-replies-btn[data-v-fb184e75] {
        border-top-left-radius: 0px !important;
        border-bottom-left-radius: 0px !important;
}

    /** OVERRIDE BUTTON VARIANTS */
    /** These classes are provided by bootstrap button component, which we used for general styling
        We override these styles with emailgistics default CSS styles.
    */
.btn[data-v-fb184e75] { 
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 5px;
        height: 34px !important;
        text-align: center !important;
}
.btn[data-v-fb184e75]:active { filter: brightness(90%);
}
.btn.active[data-v-fb184e75] {
        background-color: var(--eg-secondary-1) !important;
        border-color: var(--eg-secondary-1) !important;
        color: white !important;
}

    /** Button success & button outline sucess overide */
.btn-success[data-v-fb184e75] {
        background-color: var(--eg-secondary-1);
        border-color: var(--eg-secondary-1);
}
.btn-outline-success[data-v-fb184e75] {
        color: var(--eg-secondary-1);
        border-color: var(--eg-secondary-1);
}
.btn-outline-success[data-v-fb184e75]:hover,
    .btn-outline-success[data-v-fb184e75]:focus,
    .btn-outline-success.show[data-v-fb184e75] {
        color: white !important;
        background-color: var(--eg-secondary-1) !important;
        border-color: var(--eg-secondary-1) !important;
}

    /** CUSTOM BUTTON VARIANTS */
    /** This is our own custom CSS variant, these classes are not provided by bootstrap. */

    /** Collasped box header button */
.btn-collaspe-trigger[data-v-fb184e75] {
        background-color: rgba(0, 0, 0, .03);
        border-radius: 0 !important;
        height: 45px !important;

        border: 1px solid lightgray !important;
        border-top: none !important;
}
.btn-collaspe-trigger[data-v-fb184e75]:hover { background-color: rgba(0, 0, 0, .03);
}
    
    /** Button select is supposed to represent the select UI, but for a dropdown functionality */
.btn-select[data-v-fb184e75] {
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5'%3E%3Cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E");
        background-size: 10px 10px, 10px 10px;
        background-repeat: no-repeat;
        background-position: right 0.85rem center;
        
        width: 100%;
        height: 34px;
        cursor: pointer;
        box-shadow: none !important;
        border-radius: 4px;
        padding: 0px 0px 0px .85rem !important;
        font-size: var(--eg-font-size) !important;
        border: 1px solid var(--eg-border-color, #ccc);
        display: inline-flex;
        align-items: center;
        justify-content: start;
}
.btn-select[data-v-fb184e75]:active { filter: brightness(100%) !important;
}
.btn-select[data-v-fb184e75]:hover { background-color: transparent !important;
}
.btn-select[data-v-fb184e75]:disabled {
        border-color: var(--eg-input-disabled-bg) !important;
        cursor: not-allowed;
}
.btn-select[data-v-fb184e75]:focus {
        background-color: transparent !important;
        border-color: var(--eg-secondary-1);
}

    /** Clear shaded button, no backdrop or background */
.btn-clear[data-v-fb184e75] { border: 0px !important;
}
.btn-clear[data-v-fb184e75]:hover { color: var(--eg-secondary-1) !important;
}

    /** divider button (AI Summarization) */
.btn-divider[data-v-fb184e75] {
        background: transparent;
        border: none;
        color: var(--eg-primary-2, #333);
        padding: 0.5rem 1rem;
        white-space: nowrap;
        font-size: var(--eg-font-size, 14px);
        font-family: var(--eg-font-family, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif);
}
.btn-divider[data-v-fb184e75]:hover {
        color: var(--eg-secondary-1, #090);
}
.btn-truncate[data-v-fb184e75] {
        display: inline-flex;
        align-items: center;
        max-width: 100%;
}
.btn-truncate[data-v-fb184e75] .btn-text {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
}

    /** Override card styling */
.card-body[data-v-33396711] { 
        border-radius: 0 !important;
        border-top: none !important;
}

    /** icon transition */
.rotate-icon[data-v-33396711] {
        transition: all 0.3s ease;
}

    /** alert container styling */
.alert-container[data-v-33396711] {
        padding-top: 1.5rem;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
}

.badge[data-v-0913e376] { font-size: .65em !important;
}

    /* Override default styling to use EG styling */
.dropdown-menu[data-v-715441f0] >  .dropdown-item:hover {
        color: white !important;
        background-color: var(--eg-secondary-1) !important;
}

    /* Styling for disabled dropdown items */
.dropdown-item.disabled[data-v-715441f0] {
        pointer-events: none;
        color: var(--eg-font-color-mute) !important;
        background-color: transparent;
        opacity: 0.65;
        cursor: not-allowed;
}
.dropdown-menu[data-v-715441f0] >  .dropdown-item:active {
        background-color: var(--eg-secondary-1) !important;
        color: white !important;
}

    /** This is active styling for the check icon in languages */
.dropdown-menu[data-v-715441f0] >  .dropdown-item:hover i { color: white !important;
}
.dropdown-menu[data-v-715441f0] >  .dropdown-item:active i { color: white !important;
}

    /** Dropdown menu sizes */
.dropdown-menu-lg[data-v-715441f0] { width: 100% !important;
}
.dropdown-menu-md[data-v-715441f0] { width: 50% !important;
}
.dropdown-menu-sm[data-v-715441f0] { width: 25% !important;
}

    /** auto sizing  */
.dropdown-menu-auto[data-v-715441f0] {
        min-width: unset !important;
        width: max-content !important;
}

.form-select[data-v-80807801] {
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5'%3E%3Cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E");
        background-size: 10px 10px;
        background-position: right 0.75rem center;
        background-repeat: no-repeat;

        width: 100%;
        height: 34px;
        cursor: pointer;
        box-shadow: none !important;
        border-radius: 4px;
        padding: 0px 2rem 0px 0.85rem !important;

        font-size: var(--eg-font-size) !important;
}
.form-select[data-v-80807801]:focus { border-color: var(--eg-secondary-1);
}
.form-select[data-v-80807801]:disabled { border-color: var(--eg-input-disabled-bg) !important; cursor: no-drop;
}
.form-select-option[data-v-80807801] { cursor: pointer;
}

    /* ---  <<<< GENERAL >>>> --- */
footer[data-v-3aa8fbcf] {
        bottom: 0;
}
.footer-menu[data-v-3aa8fbcf] {
        border: 1px solid lightgray;
        background-color: transparent;
        height: 45px;
}
.fa-check-regular[data-v-3aa8fbcf] {
        color: var(--eg-secondary-1);
}

    /* ---  <<<< TOOLBAR >>>> --- */
    /** Hover color change for login/logout/admin me page options */
.fa-solid-user-gear[data-v-3aa8fbcf]:hover { color: var(--eg-secondary-1);
}
.fa-right-from-bracket-solid[data-v-3aa8fbcf]:hover,
    .fa-right-to-bracket-solid[data-v-3aa8fbcf]:hover { 
        color: var(--eg-secondary-1);
}

    /* ---  <<<< LOGO >>>> --- */
    /* Wide logo styling */
.logo-wide[data-v-3aa8fbcf] {
        width: 135px;
        height: 22.5px;
        aspect-ratio: 6 / 1;
        object-fit: contain;
}

    /* Small logo styling */
.logo-small[data-v-3aa8fbcf] {
        display: none;
        width: 24px;
        height: 24px;
        aspect-ratio: 1 / 1;
        object-fit: contain;
}

    /* Changes for logo on small to wider screen (vise versa) */
@media (max-width: 274px) {
.logo-wide[data-v-3aa8fbcf] { display: none;
}
.logo-small[data-v-3aa8fbcf] { display: block;
}
}

.form-control[data-v-2edabc46] {
        width: 100%;
        height: 34px;
        cursor: text;
        box-shadow: none !important;
        border-radius: 4px;
        font-size: var(--eg-font-size) !important;
}
.form-control[data-v-2edabc46]:focus { 
        border-color: var(--eg-secondary-1);
}
.form-control[data-v-2edabc46]:disabled { 
        border-color: var(--eg-input-disabled-bg) !important;
}
.form-check-input[data-v-2edabc46] { box-shadow: none !important;
}
.form-check-input[data-v-2edabc46]:focus { border-color: var(--eg-secondary-1);
}
.form-check-input:focus + .form-check-label .toggle-knob[data-v-2edabc46] { box-shadow: var(--eg-secondary-1) !important;
}
.form-check-input[data-v-2edabc46]:checked { background-color: var(--eg-secondary-1); border: none;
}

.modal-content[data-v-6b2e0892] {
        border-radius: 5px !important;
}
.x-mark-icon[data-v-6b2e0892] {
        color: darkgray;
}

.form-control[data-v-e3b9b2d7] {
        width: 100%;
        height: 80px;
        cursor: text;
        box-shadow: none !important;
        border-radius: 4px;
        font-size: var(--eg-font-size) !important;
}
.form-control[data-v-e3b9b2d7]:focus { 
        border-color: var(--eg-secondary-1);
}
.form-control[data-v-e3b9b2d7]:disabled { 
        border-color: var(--eg-input-disabled-bg) !important;
}

    /* apply styles to close icon when hovered */
.btn[data-v-db072d5c]:hover,
    .fa-xmark-regular[data-v-db072d5c]:hover { color: var(--eg-error) !important;
}