/* :root {
    --c-gray-darker: #31343b;
    --c-cyan: #0badd3;
    --c-primary: #557cf2;
    --c-blue: #4e99db;
    --c-blue-gray: #607D8B;
    --c-teal: #00758f;
    --c-green: #559355;
    --c-green-light: #98bf49;
    --c-yellow: #f2c94e;
    --c-yellow-dark: #bf9d36;
    --c-orange: #f79a2b;
    --c-orange-deep: #f46f3b;
    --c-red: #f2594e;
    --c-brown: #9b7a5a;
    --c-magenta: #e555a1;
    --c-magenta-dark: #a82670;
    --c-accent: #f26b7a;
    --c-purple: #7562d9;
    --c-purple-dark: #5747A6;
} */

:root {
    /* Colors: */
    --asphalt-light: #162246;
    --asphalt: #0d142b;
    --asphalt-darker: #0a0f20;
    --blue-primary-darker: #2a3f80;
    --blue-primary-dark: #3b59b2;
    --blue-primary: #557cf2;
    --blue-primary-tint: #7997f2;
    --blue-primary-light: #a2b8fa;
    --blue-primary-lighter: #d9e2ff;
    --blue-primary-lightest: #f0f4ff;
    --gray-darker: #31343b;
    --gray-dark: #4e5159;
    --gray-text: #6f7380;
    --gray-tint: #979cad;
    --gray-light-muted: #b1b6c7;
    --gray-lighter: #dfe4f2;
    --gray-lightest-bg-faded: #f7f9ff;
    --umblerito-darker: #566665;
    --umblerito-dark: #819997;
    --umblerito: #a6bdbb;
    --umblerito-tint: #c5d6d5;
    --umblerito-lighter: #ebf2ef;
    --umblerito-lightest: #f7fffc;
    --pink-darker: #8f3d66;
    --pink: #f279b6;
    --pink-light: #f7bad8;
    --pink-lighter: #fcd7ea;
    --pink-lightest: #ffebf5;
    --amaranth-accent-dark: #b84451;
    --amaranth-accent-secondary: #f26b7a;
    --amaranth-accent-tint: #f28592;
    --amaranth-accent-light: #fca4ae;
    --amaranth-accent-lighter: #fcd7db;
    --amaranth-accent-lightest: #ffedef;
    --red-darker: #9c2f27;
    --red-dark: #c24036;
    --red-danger: #f2594e;
    --red-tint: #f27a72;
    --red-light: #f29c96;
    --red-lighter: #fad7d4;
    --red-lightest: #fff1f0;
    --salmon-dark: #cf5f3a;
    --salmon: #f2774e;
    --salmon-tint: #f29272;
    --salmon-light: #f5af98;
    --salmon-lighter: #f7dad0;
    --salmon-lightest: #fff2ed;
    --orange-dark: #cf913a;
    --orange: #f2ae4e;
    --orange-light: #fad096;
    --orange-lighter: #fae9d2;
    --orange-lightest: #fff6eb;
    --ambe-darker: #a6882e;
    --amber-dark: #bf9d36;
    --amber-warning: #f2c94e;
    --amber-tint: #f2d272;
    --amber-light: #f5df9f;
    --amber-lighter: #faf1d4;
    --amber-lightest: #fffaeb;
    --yellow-darker: #9c922c;
    --yellow-dark: #c2b636;
    --yellow-light: #f5ee9f;
    --yellow-lighter: #faf7d4;
    --yellow-lightest: #fffdeb;
    --lime-dark: #6e8c31;
    --lime: #98bf49;
    --lime-light: #cbe595;
    --lime-lighter: #e9f5d0;
    --lime-lightest: #f9ffed;
    --green-darker: #316631;
    --green-dark: #438c43;
    --green-success: #5cb85c;
    --green-tint: #7cc47c;
    --green-light: #9cd99c;
    --green-lighter: #d0f5d0;
    --green-lightest: #e8fce8;
    --emerald-dark: #0c8e63;
    --emerald: #22c38e;
    --emerald-tint: #4fe5b3;
    --emerald-light: #96f7d7;
    --emerald-lighter: #c2fbe8;
    --emerald-lightest: #effffa;
    --cyan-darker: #318c8c;
    --cyan-dark: #36b2b2;
    --cyan: #57d9d9;
    --cyan-tint: #7ee5e5;
    --cyan-light: #a0f2f2;
    --cyan-lighter: #cdfafa;
    --cyan-lightest: #e3fcfc;
    --azure-dark: #2481b2;
    --azure: #30aef2;
    --azure-tint: #55bbf2;
    --azure-lighter: #caebfc;
    --azure-lightest: #e5f6ff;
    --purple-dark: #5747a6;
    --purple: #7562d9;
    --purple-light: #b6aaf2;
    --purple-lighter: #d9d2fa;
    --violet-dark: #8a50b2;
    --violet: #b167e5;
    --violet-light: #d6abf5;
    --violet-lighter: #e4cef5;
    --magenta-dark: #c265c2;
    --magenta-lighter: #fad4fa;
    --brown-dark: #805433;
    --brown: #b27647;
    --brown-tint: #cc9870;
    --brown-light: #cca98f;
    --brown-lighter: #e5d2c3;
    /* Font/text values */
    --unnamed-font-family-poppins: Poppins;
    --unnamed-font-style-normal: normal;
    --unnamed-font-weight-medium: medium;
    --unnamed-font-weight-bold: bold;
    --unnamed-font-size-48: 48px;
    --unnamed-font-size-22-5: 22.5px;
    --unnamed-character-spacing-0: 0px;
    --unnamed-line-spacing-29-25: 29.25px;
    --unnamed-line-spacing-62-400001525878906: 62.400001525878906px;
}

.ph-10x {
    font-size: 10rem;
}

.ph-5x {
    font-size: 5rem;
}

[data-bs-theme=dark] {
    /*.dropdown-toggle {
        color: $blue-primary;
        font-weight: 600;
    }
  
    .dropdown-toggle.show {
        background-color: #21272c;
    }
  
    .dropdown-item:focus, .dropdown-item:hover {
        color: $blue-primary;
        background-color: #21272c;
    }*/
}

    [data-bs-theme=dark] aside {
        background-color: #3b3f42;
    }

        [data-bs-theme=dark] aside a {
            color: #d9e2ff;
        }

    [data-bs-theme=dark] .main-layout-root {
        background: #3b3f42;
    }

        [data-bs-theme=dark] .main-layout-root .main-layout-section {
            background-color: #191d21;
            box-shadow: #2e3133 -5px 0 4px;
            overflow: auto;
        }

    [data-bs-theme=dark] .b-layout-content {
        background-color: #222;
    }

    [data-bs-theme=dark] .chat-list-background {
        background-color: #222;
    }

    [data-bs-theme=dark] .chat-card-open {
        background-color: #2a2e32 !important;
    }

    [data-bs-theme=dark] .chat-instance {
        background-color: #2a2e32;
    }

    [data-bs-theme=dark] .chat-message-member {
        background-color: var(--gray-dark);
    }

    [data-bs-theme=dark] .chat-message-contact {
        background-color: #222;
    }

    [data-bs-theme=dark] .chat-message-note {
        background-color: #463326;
    }

        [data-bs-theme=dark] .chat-message-note .chat-message-ballon {
            color: var(--orange);
        }

        [data-bs-theme=dark] .chat-message-note .chat-message-hour {
            color: var(--brown);
        }

    [data-bs-theme=dark] .chat-message-hour {
        color: #ccc;
    }

    [data-bs-theme=dark] .chat-divisor-hour {
        color: #ccc;
        background-color: #354b56;
    }

    [data-bs-theme=dark] .chat-message-ballon {
        color: #ffffff;
    }

    [data-bs-theme=dark] .compose-bar-note {
        background-color: #2c210070;
        border: 2px solid #2c210070;
    }

        [data-bs-theme=dark] .compose-bar-note.active {
            border: 2px solid #a6882e;
            box-shadow: 0px 3px 6px #0f276d26;
            transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        }

        [data-bs-theme=dark] .compose-bar-note textarea {
            box-shadow: none;
        }

            [data-bs-theme=dark] .compose-bar-note textarea:focus {
                box-shadow: none;
            }

    [data-bs-theme=dark] .compose-bar-message {
        background-color: #191d21;
        border: 2px solid #191d21;
    }

        [data-bs-theme=dark] .compose-bar-message.active {
            border: 2px solid #2a3f80;
            box-shadow: 0px 3px 6px #0f276d26;
            transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        }

        [data-bs-theme=dark] .compose-bar-message textarea {
            box-shadow: none;
        }

            [data-bs-theme=dark] .compose-bar-message textarea:focus {
                box-shadow: none;
            }

    [data-bs-theme=dark] .btn-primary {
        box-shadow: 0px 8px 12px #2e373e;
    }

    [data-bs-theme=dark] .chatlist-header {
        border-bottom: 1px solid #21272c;
    }

        [data-bs-theme=dark] .chatlist-header .filter-item {
            border-bottom: 2px solid #222;
            -webkit-transition: border 400ms ease-out;
            -moz-transition: border 400ms ease-out;
            -o-transition: border 400ms ease-out;
            transition: border 400ms ease-out;
            font-weight: 600;
            padding-bottom: 15px;
        }

            [data-bs-theme=dark] .chatlist-header .filter-item .bg-success {
                color: #ccc;
                background-color: #438c43 !important;
            }

            [data-bs-theme=dark] .chatlist-header .filter-item.text-success {
                border-color: #0c8e63;
            }

                [data-bs-theme=dark] .chatlist-header .filter-item.text-success .custom-icon-color {
                    fill: #0c8e63;
                }

            [data-bs-theme=dark] .chatlist-header .filter-item.text-primary {
                border-color: #557cf2;
            }

                [data-bs-theme=dark] .chatlist-header .filter-item.text-primary .custom-icon-color {
                    fill: #557cf2;
                }

            [data-bs-theme=dark] .chatlist-header .filter-item.text-body-secondary {
                color: #b1b6c7 !important;
                font-weight: 400;
            }

                [data-bs-theme=dark] .chatlist-header .filter-item.text-body-secondary .custom-icon-color {
                    fill: #b1b6c7;
                }

    [data-bs-theme=dark] .contact-header-name {
        color: #b1b6c7;
        font-weight: 600;
    }

    [data-bs-theme=dark] .btn-whatsapp {
        color: #fff;
        background-color: #00af9c;
        border-color: #00af9c;
    }

    [data-bs-theme=dark] .iti--allow-dropdown input,
    [data-bs-theme=dark] .iti--allow-dropdown input[type="text"],
    [data-bs-theme=dark] .iti--allow-dropdown input[type="tel"],
    [data-bs-theme=dark] .iti--separate-dial-code input,
    [data-bs-theme=dark] .iti--separate-dial-code input[type="text"],
    [data-bs-theme=dark] .iti--separate-dial-code input[type="tel"] {
        padding-right: 6px !important;
        padding-left: 52px !important;
        margin-left: 0;
    }

    [data-bs-theme=dark] .iti__country-list {
        padding-left: 0px !important;
        background-color: #2f2f2f;
        border: 2px solid #515151;
        border-radius: 10px;
        z-index: 4;
    }

    [data-bs-theme=dark] .iti__divider {
        border-bottom: 1px solid #515151;
    }

    [data-bs-theme=dark] .accordion-button:focus {
        box-shadow: none;
    }

    [data-bs-theme=dark] .code-block {
        color: #3b3b3b;
    }

[data-bs-theme=light] {
    /*
    .dropdown-toggle {
        color: $blue-primary;
        font-weight: 600;
    }
  
    .dropdown-toggle:hover {
        background-color: $blue-primary-lightest
    }
  
    .dropdown-toggle.show {
        background-color: $blue-primary-lightest;
    }*/
    /*   .dropdown-item:focus, .dropdown-item:hover {
        color: $blue-primary;
        background-color: $gray-lightest-bg-faded;
    }*/
}

    [data-bs-theme=light] aside {
        background-color: #557cf2;
    }

    [data-bs-theme=light] .main-layout-root {
        background: #557cf2;
    }

        [data-bs-theme=light] .main-layout-root .main-layout-section {
            background-color: #f0f4ff;
            box-shadow: #00165a26 -5px 0 4px;
            overflow: auto;
        }

    [data-bs-theme=light] .chat-message-member {
        background-color: var(--green-lightest);
        color: #405e40;
    }

    [data-bs-theme=light] .chat-message-contact {
        background-color: white;
        color: #6f7380;
    }

        [data-bs-theme=light] .chat-message-contact .chat-message-hour {
            color: #6f7380 !important;
        }

    [data-bs-theme=light] .chat-message-note {
        background-color: #fffaeb;
        color: #a6882e;
    }

        [data-bs-theme=light] .chat-message-note .chat-message-hour {
            color: #a6882e !important;
        }

    [data-bs-theme=light] .b-layout-content {
        background-color: #f0f4ff;
    }

    [data-bs-theme=light] .chat-list-background {
        background-color: white;
    }

    [data-bs-theme=light] .chat-instance {
        background-color: #f0f4ff;
    }

    [data-bs-theme=light] .chat-message-hour {
        color: #438c43;
    }

    [data-bs-theme=light] .chat-divisor-hour {
        color: #7997f2;
        background-color: #d9e2ff;
    }

    [data-bs-theme=light] .compose-bar-note {
        background-color: #fffaeb;
        border: 2px solid #f2c94e;
    }

        [data-bs-theme=light] .compose-bar-note.active {
            border: 2px solid #a6882e;
            box-shadow: 0px 3px 6px #0f276d26;
            transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        }

        [data-bs-theme=light]
        .compose-bar-note
        .compose-bar-secondary-actions
        .btn:not(.btn-whatsapp) {
            color: #a6882e;
        }

            [data-bs-theme=light]
            .compose-bar-note
            .compose-bar-secondary-actions
            .btn:not(.btn-whatsapp):hover {
                background-color: #f0f4ff;
                color: #557cf2;
            }

        [data-bs-theme=light] .compose-bar-note .form-switch span {
            color: #a6882e;
            font-size: 13px;
        }

        [data-bs-theme=light] .compose-bar-note .btn-primary:hover {
            background-color: #4869ce !important;
        }

        [data-bs-theme=light] .compose-bar-note .btn-primary .fa-sliders-h {
            color: white !important;
        }

    [data-bs-theme=light] .compose-bar-message {
        background-color: white;
        border: 2px solid white;
    }

        [data-bs-theme=light] .compose-bar-message.active {
            border: 2px solid #557cf2;
            box-shadow: 0px 3px 6px #0f276d26;
            transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        }

        [data-bs-theme=light] .compose-bar-message .compose-bar-secondary-actions .btn {
            color: #7997f2;
        }

            [data-bs-theme=light] .compose-bar-message .compose-bar-secondary-actions .btn:hover {
                background-color: #f0f4ff;
                color: #557cf2;
            }

        [data-bs-theme=light] .compose-bar-message .form-switch span {
            color: #557cf2;
            font-size: 13px;
        }

    [data-bs-theme=light] .chatlist-header {
        border-bottom: 1px solid #f0f4ff;
    }

        [data-bs-theme=light] .chatlist-header .filter-item {
            border-bottom: 2px solid white;
            -webkit-transition: border 400ms ease-out;
            -moz-transition: border 400ms ease-out;
            -o-transition: border 400ms ease-out;
            transition: border 400ms ease-out;
            font-weight: 600;
            padding-bottom: 15px;
        }

            [data-bs-theme=light] .chatlist-header .filter-item .bg-success {
                color: #5cb85c;
                background-color: #e8fce8 !important;
            }

            [data-bs-theme=light] .chatlist-header .filter-item.text-success {
                border-color: #5cb85c;
            }

                [data-bs-theme=light] .chatlist-header .filter-item.text-success .custom-icon-color {
                    fill: #5cb85c;
                }

            [data-bs-theme=light] .chatlist-header .filter-item.text-primary {
                border-color: #557cf2;
            }

                [data-bs-theme=light] .chatlist-header .filter-item.text-primary .custom-icon-color {
                    fill: #557cf2;
                }

            [data-bs-theme=light] .chatlist-header .filter-item.text-body-secondary {
                color: #b1b6c7 !important;
                font-weight: 400;
            }

                [data-bs-theme=light] .chatlist-header .filter-item.text-body-secondary .custom-icon-color {
                    fill: #b1b6c7;
                }

    [data-bs-theme=light] .contact-header-name {
        color: #31343b;
        font-weight: 600;
    }

    [data-bs-theme=light] .compose-bar-template-info {
        color: #a6882e;
    }

    [data-bs-theme=light] .btn-whatsapp {
        color: #fff;
        background-color: #37bc69;
        border-color: #37bc69;
        width: 100%;
        max-width: 300px;
    }

    [data-bs-theme=light] .iti__country-list {
        z-index: 4;
        border-radius: 10px;
    }

/*https: //github.com/W3cplus/SassMagic/blob/master/src/mixins/_scrollbars.scss*/
::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

::-webkit-scrollbar-thumb {
    background: #b1b6c7;
    cursor: grab;
}

::-webkit-scrollbar-track {
    background: none;
}

body {
    scrollbar-face-color: #b1b6c7;
    scrollbar-track-color: none;
}

/* Blazor status screens */

#blazor-error-ui {
    position: fixed;
    display: none;
    z-index: 10000;
    bottom: 0;
    left: 0;
    right: 0;
}

#components-reconnect-modal > div {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background-color: #191d21cc;
    color: white;
    font-weight: bold;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
}

.components-reconnect-hide > div,
.components-reconnect-show > div,
.components-reconnect-failed > div,
.components-reconnect-rejected > div {
    display: none;
}

.components-reconnect-failed > .failed,
.components-reconnect-rejected > .rejected,
.components-reconnect-show > .show {
    display: flex;
}

/* End Blazor status screens */

html,
body,
#app {
    height: 100%;
}

.snackbar-stack {
    z-index: 100000;
}

a.no-link {
    text-decoration: none !important;
    color: #6f7380;
    cursor: pointer;
}

.clickable {
    cursor: pointer;
}

.ellipsis {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

[data-bs-theme=dark] a.no-link {
    color: #e1e1e1;
}

.input-group {
    flex-wrap: nowrap !important;
}

a.no-link:hover {
    text-decoration: none !important;
}

.tag-list .ub-tag {
    margin-right: 5px;
}

.animate__faster {
    --animate-duration: 0.4s;
}

.chat-divisor-hour {
    font-size: 12px;
}

.chat-message-member,
.chat-message-contact,
.chat-message-note {
    font-size: 14px;
}

.chat-message-hour {
    font-size: 12px;
    margin: -15px 0 -5px 4px;
    float: right;
    position: relative;
}

.chat-message-ballon-empty-span {
    display: inline-block;
}

html[lang="pt-BR"] .chat-message-ballon-empty-span,
html[lang="pt"] .chat-message-ballon-empty-span {
    width: 74px;
}

html[lang="en-us"] .chat-message-ballon-empty-span,
html[lang="en"] .chat-message-ballon-empty-span {
    width: 90px;
}

.compose-bar-message textarea::placeholder,
.compose-bar-note textarea::placeholder {
    color: #6f7380;
    font-size: 15px;
}

.compose-bar-message .compose-principal-button,
.compose-bar-note .compose-principal-button {
    width: 43px;
    height: 43px;
}

.dropdown-item i {
    margin-right: 10px;
}

.start-10 {
    left: 10% !important;
}

.start-20 {
    left: 20% !important;
}

.start-15 {
    left: 15% !important;
}

.user-status-profile {
    height: 12px;
    width: 12px;
    border: 3px solid #dfe4f2 !important;
    background-color: white;
    border-radius: 50% !important;
    position: absolute;
    z-index: 999;
    left: 37px;
    bottom: 34px;
}

.user-status-member {
    height: 12px;
    width: 12px;
    border: 3px solid #dfe4f2 !important;
    background-color: white;
    border-radius: 50% !important;
    height: 16px;
    width: 16px;
    left: 76px;
    margin-top: 8px;
    position: absolute;
}

    .user-status-profile.active,
    .user-status-member.active {
        border: 2px solid #dfe4f2 !important;
        background-color: #5cb85c !important;
    }

.bg-gray-light-muted {
    background-color: #b1b6c7 !important;
}

.normal-enabled .btn:disabled {
    opacity: 1 !important;
}

.fs-14 {
    font-size: 14px;
}

.code-block {
    margin-top: 0;
    margin-bottom: 1.5em;
    word-wrap: normal;
    font-size: 13px;
    font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", "Liberation Mono", Menlo, Monaco, Consolas, monospace;
    line-height: 1.30769231;
    background-color: whitesmoke;
    margin: 0;
    padding: 12px;
    overflow: auto;
}

pre code {
    white-space: inherit;
    padding: 0;
    background-color: transparent;
}

body,
html {
    text-rendering: optimizeLegibility;
}

b,
strong {
    font-weight: 700;
}

a {
    transition: color 0.2s ease-in;
}

dt {
    color: #4e5159;
}

mark,
.mark {
    padding: 0.2em 0.4em;
    background-color: #f7dad0;
}

html {
    font-size: 16px;
    -ms-overflow-style: scrollbar;
    -webkit-tap-highlight-color: transparent;
}

.ub-tag {
    position: relative;
    white-space: nowrap;
    width: max-content;
    height: 16px;
    margin-left: 10px;
    padding-right: 5px;
    background: #4e5159;
    color: #fff;
    font-size: 11px;
    text-decoration: none;
    text-align: left;
    letter-spacing: 0.09px;
    opacity: 1;
    display: inline-block;
}

    .ub-tag.color-blue {
        background: #d9e2ff;
        color: #557cf2;
    }

        .ub-tag.color-blue :before {
            border-color: transparent #d9e2ff transparent transparent;
        }

    .ub-tag.color-skyblue {
        background: #caebfc;
        color: #0b99e6;
    }

        .ub-tag.color-skyblue :before {
            border-color: transparent #caebfc transparent transparent;
        }

    .ub-tag.color-cyan {
        background: #a0f2f2;
        color: #318c8c;
    }

        .ub-tag.color-cyan :before {
            border-color: transparent #a0f2f2 transparent transparent;
        }

    .ub-tag.color-aquamarine {
        background: #96f7d7;
        color: #0c8e63;
    }

        .ub-tag.color-aquamarine :before {
            border-color: transparent #96f7d7 transparent transparent;
        }

    .ub-tag.color-green {
        background: #d0f5d0;
        color: #438c43;
    }

        .ub-tag.color-green :before {
            border-color: transparent #d0f5d0 transparent transparent;
        }

    .ub-tag.color-kiwi {
        background: #e9f5d0;
        color: #6e8c31;
    }

        .ub-tag.color-kiwi :before {
            border-color: transparent #e9f5d0 transparent transparent;
        }

    .ub-tag.color-gold {
        background: #f5ee9f;
        color: #ab9c00;
    }

        .ub-tag.color-gold :before {
            border-color: transparent #f5ee9f transparent transparent;
        }

    .ub-tag.color-amber {
        background: #faf1d4;
        color: #d5a000;
    }

        .ub-tag.color-amber :before {
            border-color: transparent #faf1d4 transparent transparent;
        }

    .ub-tag.color-tangerine {
        background: #fad096;
        color: #db6d00;
    }

        .ub-tag.color-tangerine :before {
            border-color: transparent #fad096 transparent transparent;
        }

    .ub-tag.color-chocolate {
        background: #e5d2c3;
        color: #805433;
    }

        .ub-tag.color-chocolate :before {
            border-color: transparent #e5d2c3 transparent transparent;
        }

    .ub-tag.color-salmon {
        background: #f7dad0;
        color: #e36236;
    }

        .ub-tag.color-salmon :before {
            border-color: transparent #f7dad0 transparent transparent;
        }

    .ub-tag.color-tomato {
        background: #fad7d4;
        color: #e24337;
    }

        .ub-tag.color-tomato :before {
            border-color: transparent #fad7d4 transparent transparent;
        }

    .ub-tag.color-rose {
        background: #fcd7db;
        color: #f26b7a;
    }

        .ub-tag.color-rose :before {
            border-color: transparent #fcd7db transparent transparent;
        }

    .ub-tag.color-pink {
        background: #fcd7ea;
        color: #e3579e;
    }

        .ub-tag.color-pink :before {
            border-color: transparent #fcd7ea transparent transparent;
        }

    .ub-tag.color-magenta {
        background: #fad4fa;
        color: #c265c2;
    }

        .ub-tag.color-magenta :before {
            border-color: transparent #fad4fa transparent transparent;
        }

    .ub-tag.color-violet {
        background: #e4cef5;
        color: #8a50b2;
    }

        .ub-tag.color-violet :before {
            border-color: transparent #e4cef5 transparent transparent;
        }

    .ub-tag.color-grape {
        background: #d9d2fa;
        color: #5747a6;
    }

        .ub-tag.color-grape :before {
            border-color: transparent #d9d2fa transparent transparent;
        }

    .ub-tag.color-gray {
        background: #b1b6c7;
        color: #31343b;
    }

        .ub-tag.color-gray :before {
            border-color: transparent #b1b6c7 transparent transparent;
        }

    .ub-tag.color-silver {
        background: #dfe4f2;
        color: #6f7380;
    }

        .ub-tag.color-silver :before {
            border-color: transparent #dfe4f2 transparent transparent;
        }

    .ub-tag.color-umblerito {
        background: #c5d6d5;
        color: #566665;
    }

        .ub-tag.color-umblerito :before {
            border-color: transparent #c5d6d5 transparent transparent;
        }

    .ub-tag :before {
        content: "";
        position: absolute;
        top: 0;
        width: 0;
        height: 0;
        border-style: solid;
        left: -8px;
        border-color: transparent #4e5159 transparent transparent;
        border-width: 8px 8px 8px 0;
    }

.tag-list.active,
.tag-list.inactive:hover {
    background-color: #d7d7d9;
    color: #cbcbcb;
}

[data-bs-theme=dark] .tag-list.active,
[data-bs-theme=dark] .tag-list.inactive:hover {
    background-color: gray;
}

.color-picker-item {
    cursor: pointer;
    float: left;
    width: 90px;
    height: 40px;
    margin: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    font-size: 14px;
}

    .color-picker-item:hover {
        border-style: solid;
        border-color: #3b59b2;
        border-width: 3px;
    }

    .color-picker-item.selected {
        border-style: solid;
        border-color: #3b59b2;
        border-width: 3px;
    }

    .color-picker-item.color-blue {
        background: #d9e2ff;
        color: #557cf2;
    }

    .color-picker-item.color-skyblue {
        background: #caebfc;
        color: #0b99e6;
    }

    .color-picker-item.color-cyan {
        background: #a0f2f2;
        color: #318c8c;
    }

    .color-picker-item.color-aquamarine {
        background: #96f7d7;
        color: #0c8e63;
    }

    .color-picker-item.color-green {
        background: #d0f5d0;
        color: #438c43;
    }

    .color-picker-item.color-kiwi {
        background: #e9f5d0;
        color: #6e8c31;
    }

    .color-picker-item.color-gold {
        background: #f5ee9f;
        color: #ab9c00;
    }

    .color-picker-item.color-amber {
        background: #faf1d4;
        color: #d5a000;
    }

    .color-picker-item.color-tangerine {
        background: #fad096;
        color: #db6d00;
    }

    .color-picker-item.color-chocolate {
        background: #e5d2c3;
        color: #805433;
    }

    .color-picker-item.color-salmon {
        background: #f7dad0;
        color: #e36236;
    }

    .color-picker-item.color-tomato {
        background: #fad7d4;
        color: #e24337;
    }

    .color-picker-item.color-rose {
        background: #fcd7db;
        color: #f26b7a;
    }

    .color-picker-item.color-pink {
        background: #fcd7ea;
        color: #e3579e;
    }

    .color-picker-item.color-magenta {
        background: #fad4fa;
        color: #c265c2;
    }

    .color-picker-item.color-violet {
        background: #e4cef5;
        color: #8a50b2;
    }

    .color-picker-item.color-grape {
        background: #d9d2fa;
        color: #5747a6;
    }

    .color-picker-item.color-gray {
        background: #b1b6c7;
        color: #31343b;
    }

    .color-picker-item.color-silver {
        background: #dfe4f2;
        color: #6f7380;
    }

    .color-picker-item.color-umblerito {
        background: #c5d6d5;
        color: #566665;
    }

.template-whats {
    min-height: 300px;
    background-color: #e5ddd5;
    box-sizing: border-box;
    height: 100%;
    position: relative;
    z-index: 0;
}

    .template-whats::before {
        background: url("/imgs/whatsup_background.png");
        background-size: 366.5px 666px;
        content: "";
        height: 100%;
        left: 0;
        opacity: 0.06;
        position: absolute;
        top: 0;
        width: 100%;
    }

    .template-whats::after {
        background: url(https://static.xx.fbcdn.net/rsrc.php/v3/y9/r/ux96FuZzTQy.png) 50% 50% no-repeat;
        background-size: contain;
        content: "";
        height: 55px;
        right: 363px;
        position: relative;
        top: 0;
        width: 12px;
    }

.template-whats-content {
    padding: 5px;
    margin: 20px 20px 20px 20px;
    width: 100%;
    height: fit-content;
    background-color: #fff;
    border-top-left-radius: 0;
    box-shadow: 0 1px 0.5px #b1b6c7;
    min-height: 20px;
    position: relative;
    word-wrap: break-word;
    font-size: 14px;
    color: #6f7380;
}

    .template-whats-content .time {
        color: darkgray;
        font-size: 10px;
        display: block;
        padding-right: 5px;
        text-align: right;
    }

.template-whats-no-variables {
    margin-left: 25%;
    margin-right: 25%;
}

.quick-answer-main-div {
    max-height: 200px;
    overflow-x: hidden;
    overflow-y: auto;
    margin-bottom: 20px;
    animation: append-animate 0.3s linear;
    transform-origin: 50% 0;
}

    .quick-answer-main-div a {
        cursor: pointer;
        margin-top: 5px;
        padding: 10px;
        color: #6f7380;
        text-decoration: none;
        font-size: 14px;
    }

        .quick-answer-main-div a:hover {
            background-color: #3b3f42;
            text-decoration: none;
        }

@keyframes append-animate {
    from {
        transform: translateY(40px);
        opacity: 0;
    }

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

[data-bs-theme=dark] .quick-answer-main-div ::-webkit-scrollbar {
    width: 0.5em;
    height: 0.5em;
}

[data-bs-theme=dark] .quick-answer-main-div ::-webkit-scrollbar-thumb {
    background: #979cad;
    cursor: grab;
}

[data-bs-theme=dark] .quick-answer-main-div ::-webkit-scrollbar-track {
    background: #cbced6;
}

[data-bs-theme=dark] .quick-answer-main-div body {
    scrollbar-face-color: #979cad;
    scrollbar-track-color: #cbced6;
}

[data-bs-theme=dark] .quick-answer-main-div b {
    color: #b1b6c7;
}

[data-bs-theme=dark] .quick-answer-main-div a {
    border-bottom: 1px solid #21272c;
    color: #6f7380;
}

    [data-bs-theme=dark] .quick-answer-main-div a:hover {
        background-color: #3b3f42;
        text-decoration: none;
    }

[data-bs-theme=light] .quick-answer-main-div ::-webkit-scrollbar {
    width: 0.5em;
    height: 0.5em;
}

[data-bs-theme=light] .quick-answer-main-div ::-webkit-scrollbar-thumb {
    background: #7997f2;
    cursor: grab;
}

[data-bs-theme=light] .quick-answer-main-div ::-webkit-scrollbar-track {
    background: #bccbf9;
}

[data-bs-theme=light] .quick-answer-main-div body {
    scrollbar-face-color: #7997f2;
    scrollbar-track-color: #bccbf9;
}

[data-bs-theme=light] .quick-answer-main-div a {
    border-bottom: 1px solid #d9e2ff;
}

    [data-bs-theme=light] .quick-answer-main-div a:hover {
        background-color: #f0f4ff;
        text-decoration: none;
    }

.shortcut-main-div {
    padding: 20px;
    min-height: 50%;
    max-height: 50%;
    min-width: 50%;
    max-width: 50%;
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 1;
    position: absolute;
    bottom: 75px;
    margin-left: 25px;
}

    .shortcut-main-div ::-webkit-scrollbar {
        width: 0.5em;
        height: 0.5em;
    }

    .shortcut-main-div ::-webkit-scrollbar-thumb {
        background: #7997f2;
        cursor: grab;
    }

    .shortcut-main-div ::-webkit-scrollbar-track {
        background: #bccbf9;
    }

    .shortcut-main-div body {
        scrollbar-face-color: #7997f2;
        scrollbar-track-color: #bccbf9;
    }

.shortcut-link {
    cursor: pointer;
    margin-top: 10px;
    text-decoration: none;
    padding: 10px;
    font-size: 14px;
}

    .shortcut-link:hover {
        text-decoration: none !important;
    }

[data-bs-theme=dark] .shortcut-main-div {
    background-color: #191d21;
    box-shadow: 0 8px 12px #2e373e;
}

[data-bs-theme=dark] .shortcut-link {
    border: 2px solid #354b56;
    color: #b1b1b1;
}

    [data-bs-theme=dark] .shortcut-link:hover {
        background-color: #3b3f42;
        color: #b1b1b1;
    }

[data-bs-theme=light] .shortcut-main-div {
    background-color: white;
    box-shadow: 0 8px 12px #557cf26b;
}

[data-bs-theme=light] .shortcut-link {
    border: 2px solid #d9e2ff;
    background-color: white;
    color: #6f7380;
}

    [data-bs-theme=light] .shortcut-link:hover {
        background-color: #f0f4ff;
    }

.cardlist-filter {
    font-size: 14px;
}

    .cardlist-filter a.filter-item {
        white-space: nowrap;
        flex: 0 0;
        transition: all 0.8s linear 0s;
    }

        .cardlist-filter a.filter-item.active {
            flex: 1 0;
        }

.transfer-chat-modal .align-items-center {
    cursor: pointer;
    min-height: 50px;
}

    .transfer-chat-modal .align-items-center:hover {
        min-height: 50px;
    }

    .transfer-chat-modal .align-items-center.active {
        min-height: 50px;
        font-weight: 600;
    }

[data-bs-theme=dark] .transfer-chat-modal .align-items-center:hover {
    background-color: #21272c;
}

[data-bs-theme=dark] .transfer-chat-modal .align-items-center.active {
    background-color: #2e373e;
}

[data-bs-theme=dark] .vr-or {
    background-color: #2f2f30;
    padding: 20px;
}

[data-bs-theme=light] .transfer-chat-modal .align-items-center:hover {
    background-color: #f2f4f9;
}

[data-bs-theme=light] .transfer-chat-modal .align-items-center.active {
    background-color: #f0f4ff;
    color: #557cf2;
}

[data-bs-theme=light] .vr-or {
    background-color: white;
    padding: 20px;
}

.chat-contact-name {
    font-size: 14px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.chat-message-ballon {
    white-space: pre-wrap;
    word-break: break-word;
}

[data-bs-theme=dark] .chat-link {
    border-bottom: 1px solid #2c2f31;
    min-height: 95px;
}

    [data-bs-theme=dark] .chat-link .chat-contact-name {
        color: #b1b6c7;
    }

    [data-bs-theme=dark] .chat-link.chat-card-open {
        background-color: #f0f4ff;
        box-shadow: inset -5px 0px 0px #a2b8fa;
    }

        [data-bs-theme=dark] .chat-link.chat-card-open .chat-contact-name {
            color: #557cf2;
            font-weight: 600;
        }

    [data-bs-theme=dark] .chat-link:hover {
        background-color: #21272c;
    }

    [data-bs-theme=dark] .chat-link a.chat-card-link {
        text-decoration: none;
    }

        [data-bs-theme=dark] .chat-link a.chat-card-link .chat-card-last-message {
            color: white;
            white-space: pre;
        }

[data-bs-theme=light] .chat-link {
    border-bottom: 1px solid #f0f4ff;
    min-height: 95px;
}

    [data-bs-theme=light] .chat-link .chat-contact-name {
        color: #6f7380;
    }

    [data-bs-theme=light] .chat-link.chat-card-open {
        background-color: #f0f4ff;
        box-shadow: inset -5px 0px 0px #a2b8fa;
    }

        [data-bs-theme=light] .chat-link.chat-card-open .chat-contact-name {
            color: #557cf2;
            font-weight: 600;
        }

    [data-bs-theme=light] .chat-link:hover {
        background-color: #f2f4f9;
    }

    [data-bs-theme=light] .chat-link a.chat-card-link {
        text-decoration: none;
    }

        [data-bs-theme=light] .chat-link a.chat-card-link .chat-card-last-message {
            color: #979cad;
            white-space: pre;
        }

.chat-card-last-message {
    font-size: small;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    color: #979cad;
}

[data-bs-theme=dark] .toolbar-items .btn {
    color: #979cad;
}

    [data-bs-theme=dark] .toolbar-items .btn:hover {
        background-color: #21272c;
        color: #557cf2;
    }

[data-bs-theme=light] .toolbar-items .btn {
    color: #979cad;
}

    [data-bs-theme=light] .toolbar-items .btn:hover {
        background-color: #f0f4ff;
        color: #557cf2;
    }

.icon-add-new-contact {
    width: 84px;
    height: 84px;
}

[data-bs-theme=dark] .icon-add-new-contact {
    background-color: #545454;
}

[data-bs-theme=light] .icon-add-new-contact {
    background-color: #f0f4ff;
    color: #557cf2;
}

[data-bs-theme=light] .icon-add-new-contact-text {
    color: #557cf2;
}

    [data-bs-theme=light] .icon-add-new-contact-text:hover {
        font-weight: 600;
    }

[data-bs-theme=dark] .channels-page a.card p {
    color: #e1e1e1;
}

[data-bs-theme=dark] .channels-page .channels-description {
    color: #979cad;
}

[data-bs-theme=light] .channels-page a.card p {
    color: #31343b;
}

[data-bs-theme=light] .channels-page .channels-description {
    color: #979cad;
}

.channels-page a.card {
    text-decoration: none;
}

    .channels-page a.card.active {
        border: 2px solid #128c7e;
    }

    .channels-page a.card:hover {
        border: 2px solid #557cf2;
        box-shadow: 0 3px 6px #0f276d26;
        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }

    .channels-page a.card p {
        font-size: 22px;
    }

.channels-page .channels-description {
    font-size: 15px;
}

.setting-card .card-icon {
    min-width: 60px;
    text-align: center;
}

[data-bs-theme=dark] .setting-card:hover {
    background-color: #3b3f42;
}

[data-bs-theme=light] .setting-card:hover {
    background-color: #f2f4f9;
}

[data-bs-theme=dark] .chat-filter-search {
    background-color: #212529;
    padding-left: 0px;
}

    [data-bs-theme=dark] .chat-filter-search .input-group-text {
        background-color: #212529;
    }

[data-bs-theme=light] .chat-filter-search {
    background-color: #f7f9ff;
    border-color: #f7f9ff;
    padding-left: 0px;
}

    [data-bs-theme=light] .chat-filter-search .input-group-text {
        background-color: #f7f9ff;
    }

    [data-bs-theme=light] .chat-filter-search .form-control {
        background-color: #f7f9ff;
    }

.invite-main-div {
    width: 100%;
    height: 100vh;
    display: flex;
    /*justify-content: center;
    align-items: center;*/
    text-align: center;
}

.invite-sub-div {
    width: 30rem;
    height: auto;
    display: block;
    margin: auto;
}

.invite-company-img {
    justify-content: center;
}

.validation-message {
    /*   display: none;*/
    width: 100%;
    margin-top: 0.25rem;
    font-size: 0.875em;
    color: #f2594e;
}

[data-bs-theme=dark] .validation-message {
    /*   display: none;*/
    width: 100%;
    margin-top: 0.25rem;
    font-size: 0.875em;
    color: #f2594e;
}

[data-bs-theme=dark] .fg-emoji-picker-grid > li,
[data-bs-theme=dark] .fg-emoji-picker,
[data-bs-theme=dark] .fg-emoji-picker-all-categories,
[data-bs-theme=dark] .fg-emoji-picker-categories {
    background-color: #2f2f2f;
}

[data-bs-theme=dark] .fg-emoji-picker-grid a {
    text-decoration: none;
}

[data-bs-theme=dark] .fg-emoji-picker-container-title {
    color: #e1e1e1 !important;
}

[data-bs-theme=dark] .fg-emoji-picker-categories li.active,
[data-bs-theme=dark] .fg-emoji-picker-close-button,
[data-bs-theme=dark] .fg-emoji-picker-search input {
    background-color: #222;
}

    [data-bs-theme=dark] .fg-emoji-picker-search input,
    [data-bs-theme=dark] .fg-emoji-picker-search input::placeholder {
        color: white;
    }

[data-bs-theme=dark] .fg-emoji-picker-categories svg {
    filter: invert(100%);
}

.tag-emoji:hover > .dropdown-edit,
.dropdown-edit:hover {
    display: block;
}

.dropdown-edit {
    display: none;
}

.dropdown-toggle-none::after {
    display: none !important;
}

.umbler-logo svg {
    vertical-align: middle;
    width: 32px;
    height: 32px;
}

.nav .nav__list {
    display: flex;
    align-items: center;
    justify-content: center;
}

    .nav .nav__list .nav__link {
        display: block;
        color: #a2b8fa;
        margin: 0 5px;
        padding: 5px;
        position: relative;
    }

        .nav .nav__list .nav__link:before {
            content: "";
            border-radius: 50%;
            height: 100%;
            left: 0;
            width: 100%;
            position: absolute;
            top: 0;
            transition: background 0.3s;
        }

        .nav .nav__list .nav__link.is-active:before,
        .nav .nav__list .nav__link:hover:before {
            background: rgba(0, 0, 0, 0.1);
        }

    .nav .nav__list .nav__icon:before {
        background: url("/images/icons/icons-header.png") no-repeat;
        content: "";
        display: block;
        width: 32px;
        height: 32px;
        left: 0;
        position: relative;
    }

    .nav .nav__list .nav__icon--inbox:before {
        background-position: 0 0;
        border-radius: 50%;
    }

    .nav .nav__list .nav__icon--calendar:before {
        background-position: -32px 0;
        border-radius: 50%;
    }

    .nav .nav__list .nav__icon--contacts:before {
        background-position: -64px 0;
        border-radius: 50%;
    }

    .nav .nav__list .nav__icon--marketing:before {
        background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34.62 24.7'%3E%3Cpath d='M28.06.58c-.38-.16-.79-.26-1.2-.3-.41-.03-.83 0-1.23.09L8.6 4.49c-1 .24-1.84.86-2.37 1.73-.53.88-.7 1.91-.45 2.9.14.57.41 1.12.79 1.57.35.42.73.72 1.16.95l6.05 3.22 2.16 6.5c.15.47.39.89.71 1.26.69.81 1.62 1.29 2.63 1.38h.02c1.02.08 2.02-.24 2.8-.9.45-.38.8-.86 1.04-1.4l6.94-16.08c.82-1.94-.08-4.2-2.02-5.04zm-.02 4.18l-6.93 16.09c-.29.66-.96 1.03-1.63.98-.17-.01-.34-.06-.51-.13-.23-.1-.44-.25-.6-.44-.17-.2-.27-.38-.33-.58l-2.06-6.21 4.9-4.15c.21-.19.34-.45.37-.73.05-.61-.4-1.14-1-1.19-.28-.02-.56.06-.78.24l-.07.04-4.85 4.09-5.78-3.08c-.18-.1-.34-.23-.47-.38-.31-.38-.45-.8-.41-1.23.04-.43.24-.83.58-1.1.03-.04.06-.07.1-.09.22-.16.55-.26.55-.26l17.03-4.11c.42-.1.86-.03 1.23.19.37.23.63.58.74 1.01.09.34.06.71-.08 1.04z' fill='%23ccd9ff'/%3E%3Cpath d='M10.46 24.32c-.28-.02-.54-.15-.73-.38-.38-.46-.33-1.14.13-1.52l1.76-1.49c.46-.38 1.14-.33 1.52.13.38.46.33 1.14-.13 1.52l-1.76 1.49c-.23.19-.51.27-.79.25zM4.35 23.88c-.28-.02-.54-.15-.73-.38-.38-.46-.33-1.14.13-1.52l6.37-5.38c.46-.38 1.14-.33 1.52.13.38.46.33 1.14-.13 1.52l-6.37 5.38c-.23.2-.51.28-.79.25zM4.23 18.4c-.28-.02-.54-.15-.73-.38-.38-.46-.33-1.14.13-1.52l2.49-2.1c.46-.38 1.14-.33 1.52.13.38.46.33 1.14-.13 1.52l-2.49 2.1c-.23.19-.51.27-.79.25z' fill='%23a2b8fa'/%3E%3C/svg%3E") center center no-repeat;
    }

    .nav .nav__list .nav__icon--settings:before {
        background-position: -96px 0;
        border-radius: 50%;
    }

.avatar-wrapper {
    margin-left: auto;
    height: 100px;
    top: 10px;
    right: 15px;
    position: absolute;
}

.menu-size {
    width: 400px;
}

/*HOME*/

@media (min-width: 1200px) {
    .page-home .section-onboarding {
        display: flex;
        align-items: center;
        height: calc(100vh - 8rem);
    }

    .page-home.hellobar-visible .section-onboarding {
        height: calc(100vh - 10rem);
    }
}

.page-onboarding .bg-faded {
    background: transparent;
    background: linear-gradient(180deg, #fff 10%, #f7faff);
}

.page-onboarding .hellobar {
    visibility: hidden;
}

.page-onboarding .hellobar-visible {
    padding-top: 0 !important;
}

    .page-onboarding .hellobar-visible .hellobar ~ .navbar {
        transform: translate(0);
    }

.page-onboarding .page-home.hellobar-visible .section-onboarding {
    height: calc(100vh - 56px);
    padding-top: 56px;
}

.page-qualification-survey .app-help,
.page-qualification-survey .navbar-fixed-top {
    display: none;
}

.page-qualification-survey .bg-faded {
    background: transparent;
    background: linear-gradient(180deg, #fff 10%, #f7faff);
}

.page-qualification-survey .app-help,
.page-qualification-survey .hellobar {
    visibility: hidden;
}

.page-qualification-survey .hellobar-visible {
    padding-top: 0 !important;
}

    .page-qualification-survey .hellobar-visible .hellobar ~ .navbar {
        transform: translate(0);
    }

.page-qualification-survey .page-home.hellobar-visible .section-onboarding {
    height: calc(100vh - 56px);
    padding-top: 56px;
}

.page-qualification-survey .img-umbler-favicon-container {
    display: inline-block;
    padding: 0.8rem;
    border-radius: 50%;
    -webkit-box-shadow: 0 4px 14px rgba(59, 89, 178, 0.06);
    box-shadow: 0 4px 14px rgba(59, 89, 178, 0.06);
    background-color: #fff;
    border: 6px solid #d9e2ff;
}

.page-qualification-survey .font-heading {
    font-size: 3.5rem;
}

.page-qualification-survey .font-bold {
    font-weight: bolder;
}

.page-qualification-survey .select-container {
    position: relative;
    display: inline-flex;
    padding: 0 20px;
    user-select: none;
}

.page-qualification-survey .custom-select {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 130px;
}

.page-qualification-survey .select-text {
    position: relative;
    align-items: center;
    justify-content: space-between;
    display: flex;
    height: 30px;
    padding: 5px 0;
    border-width: 0 0 2px;
    border-style: solid;
    border-color: #d9e2ff;
    margin-bottom: 10px;
    background: #f7faff;
    font-size: 16px;
    cursor: pointer;
}

.page-qualification-survey .select-options {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 2;
    display: block;
    opacity: 0;
    visibility: hidden;
    border-top: 0;
    -webkit-box-shadow: 0 4px 14px rgba(59, 89, 178, 0.06);
    box-shadow: 0 4px 14px rgba(59, 89, 178, 0.06);
    background: #fff;
    transition: all 0.5s;
    pointer-events: none;
}

.page-qualification-survey .custom-select.open .select-options {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

.page-qualification-survey .select-option {
    position: relative;
    display: block;
    padding: 5px 10px;
    margin-bottom: 0 !important;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.5s;
}

    .page-qualification-survey .select-option:hover {
        background-color: #b2b2b2;
        cursor: pointer;
    }

.page-qualification-survey .section-qualification-survey {
    font-size: 16px;
}

.page-qualification-survey .sec-answer {
    flex-direction: column;
}

.page-qualification-survey .has-danger {
    border-color: #f2594e;
}

    .page-qualification-survey .has-danger .icon-collapse-arrow-up {
        color: #f2594e !important;
    }

@media (max-width: 1200px) {
    .page-qualification-survey {
        padding-top: 2rem !important;
    }

        .page-qualification-survey .font-heading {
            font-size: 2.5rem;
        }
}

@media (max-width: 765px) {
    .page-qualification-survey .no-pl {
        padding-left: 0 !important;
    }
}

@media (min-width: 1200px) {
    .page-qualification-survey {
        height: 100vh;
        background: url("//assets.umbler.com/app/assets/onboarding/bg-lead-questions-onboarding.svg") no-repeat 0 100%, url("//assets.umbler.com/app/assets/onboarding/umbler-portal-onboarding.svg") no-repeat right -15px top/contain;
    }
}

@media (min-width: 1440px) {
    .page-qualification-survey {
        padding-top: 6rem !important;
    }

        .page-qualification-survey .custom-select {
            width: 170px;
        }

        .page-qualification-survey .font-heading {
            font-size: 4rem;
        }

        .page-qualification-survey .section-qualification-survey,
        .page-qualification-survey .select-option,
        .page-qualification-survey .select-text {
            font-size: 20px;
        }
}

.section-onboarding {
    opacity: 0;
    transition: transform 0.8s, opacity 0.6s;
    width: 100%;
    transform: translate3d(0, -50px, 0);
}

    .section-onboarding.show {
        opacity: 1;
        transform: translateZ(0);
    }

        .section-onboarding.show .card {
            animation-name: cards-fadein;
            animation-fill-mode: both;
            animation-duration: 0.8s;
        }

            .section-onboarding.show .card:first-of-type {
                animation-delay: 0.3s;
            }

            .section-onboarding.show .card:nth-of-type(2) {
                animation-delay: 0.5s;
            }

            .section-onboarding.show .card:nth-of-type(3) {
                animation-delay: 0.7s;
            }

            .section-onboarding.show .card:nth-of-type(4) {
                animation-delay: 0.9s;
            }

@media (min-height: 800px) {
    .section-onboarding.show .description {
        display: block !important;
    }
}

.card-choose .card {
    flex: 1 0 0;
    outline: none;
    margin: 1.5rem 0.8rem;
    padding: 2.5rem;
}

@media (min-width: 1200px) {
    .card-choose .card {
        background-color: transparent;
        box-shadow: none;
        margin: 0;
    }

        .card-choose .card:hover {
            background-color: #fff;
            box-shadow: 0 16px 28px rgba(0, 0, 0, 0.04);
        }

            .card-choose .card:hover .img-svg {
                transform: scale(1.04);
            }
}

@media (min-width: 1400px) {
    .card-choose .card {
        padding: 3.5rem;
    }
}

.card-choose .card .img-svg,
.card-choose .card h3 {
    transition: transform 0.4s;
}

@keyframes cards-fadein {
    0% {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.card-hover {
    transition: box-shadow 0.2s;
}

    .card-hover:hover {
        box-shadow: 0 0 0 4px #557cf2;
    }

.card-hover-accent {
    transition: box-shadow 0.2s;
}

    .card-hover-accent:hover {
        box-shadow: 0 0 0 4px #f26b7a;
    }

.card-hover-onboarding {
    transition: box-shadow 0.2s;
    box-shadow: 0 6px 10px #557cf229 !important;
    margin-left: 0 !important;
}

    .card-hover-onboarding a {
        text-decoration: none;
    }

    .card-hover-onboarding:hover {
        box-shadow: 0 10px 10px #557cf229, 0 0 0 3px #557cf229 !important;
    }

.agencies-card-onboarding {
    padding-top: 1rem !important;
    background: transparent linear-gradient(180deg, #85313b 15%, #0d142b 51%) 0 0 no-repeat padding-box;
    opacity: 1;
}

    .agencies-card-onboarding:hover {
        box-shadow: 0 0 0 3px #f28592 !important;
    }

.prime-card-onboarding {
    padding-top: 1rem !important;
    background: transparent linear-gradient(181deg, #192448, #0a0f20) 0 0 no-repeat padding-box;
    opacity: 1;
}

    .prime-card-onboarding:hover {
        box-shadow: 0 0 0 3px #557cf2 !important;
    }

.utalk-card-onboarding {
    background: transparent linear-gradient(180deg, #22c38e -12%, #10313b 29%, #0d142b 48%) 0 0 no-repeat padding-box;
    opacity: 1;
}

    .utalk-card-onboarding:hover {
        box-shadow: 0 0 0 3px #22c38e !important;
    }

.btn-outline-utalk {
    color: #22c38e;
    background-color: transparent;
    border-color: #22c38e;
    box-shadow: none !important;
}

.btn-utalk,
.btn-utalk:active,
.btn-utalk:focus,
.btn-utalk:hover {
    color: #fff;
    background-color: #22c38e;
    border-color: #22c38e;
    box-shadow: none;
}

.page-home .card-choose-referral .btn-block {
    position: relative;
    top: 3px;
}

.card-connected {
    box-shadow: 0 0 0 4px #9cd99c;
}

.grid-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    grid-gap: 20px;
    align-items: stretch;
}

    .grid-cards.empty-state {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    }

.grid-actions-hover {
    background-image: linear-gradient(90deg, transparent, #f7faff 15%);
    display: flex;
    padding: 0 1rem 0 1.5rem;
    right: 0;
}

    .grid-actions-hover .bg-transparent btn-outline-secondary {
        background-color: #fff;
    }

.btn-update {
    background: #faf1d4;
    color: #bf9d36;
}

.watcher .grid-actions-hover {
    display: none !important;
}

.watcher .grid-actions-hover,
.watcher:hover {
    background: transparent !important;
}

    .watcher:hover td {
        cursor: default;
    }

.watcher .icon,
.watcher td {
    color: #dfe4f2 !important;
}

.watcher .icon {
    display: none;
}

.watcher .loadImgIco {
    position: absolute;
    top: 3px;
    background: linear-gradient(90deg, #fff 50%, transparent 90%);
    padding: 0.5rem 2rem 0.5rem 0;
}

.card-header .btn-close:after {
    content: "Esc";
    color: #b1b6c7;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.04rem;
    left: 50%;
    margin-left: -10px;
    margin-top: 25px;
    opacity: 0;
    position: absolute;
    text-transform: uppercase;
    text-align: center;
    transition: opacity 0.3s;
}

.card-header .btn-close.btn-close-label:after {
    opacity: 1;
}

@media (min-width: 1200px) {
    .website-data {
        opacity: 0;
        position: absolute;
        visibility: hidden;
        transition: opacity 0.3s;
        transition-delay: 2s;
    }

        .website-data.show {
            opacity: 1;
            visibility: visible;
        }
}

.icon-custom-recharge {
    background: transparent url("/images/icon-custom-recharge.svg") 0% 0% no-repeat padding-box;
    vertical-align: text-top;
}

    .icon-custom-recharge.success {
        background: transparent url("/images/icon-custom-recharge-success.svg") 0% 0% no-repeat padding-box;
        vertical-align: text-top;
    }

.btn-block {
    width: 100%;
    display: block;
}

.divider {
    display: table;
    white-space: nowrap;
    height: auto;
    line-height: 1;
    margin: 1rem 0;
}

    .divider:before {
        background-position: right 1em top 50%;
    }

    .divider:after {
        background-position: left 1em top 50%;
    }

    .divider:after,
    .divider:before {
        content: "";
        display: table-cell;
        position: relative;
        top: 50%;
        width: 50%;
        background-repeat: no-repeat;
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA+gAAAABAQMAAAB3zhZwAAAAA1BMVEXf5fJRFdtOAAAAC0lEQVQI12MYUAAAAH4AAasqQLMAAAAASUVORK5CYII=);
    }

/* /Pages/Chat/Chat/Compose/ChooseSticker.razor.rz.scp.css */
.sticker-list[b-zuzie6mpeh] {
    height: 200px;
    overflow: auto;
    display: flex;
    flex-direction: column;
}

.sticker-div[b-zuzie6mpeh] {
    position: relative;
}

.sticker-list div[b-zuzie6mpeh] {
    padding: 0.2rem 0 0.2rem 0;
    display: flex;
    justify-content: space-around;
}

.sticker-list div img[b-zuzie6mpeh] {
    width: 80px;
    height: 80px;
    cursor: pointer;
}

.sticker-list div span[b-zuzie6mpeh] {
    width: 80px;
    height: 80px;
}
/* /Pages/Chat/Chat/ConversationBubble/ReplySummary.razor.rz.scp.css */
.summary-bg[b-a42yz4r5gj] {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: black;
    opacity: 0.2;
}

.summary-content[b-a42yz4r5gj] {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin: 0 0.5rem;
}

.summary-icon[b-a42yz4r5gj] {
    min-width: 3rem;
    height: 3rem;
}

.summary-image[b-a42yz4r5gj] {
    height: 3rem;
    width: auto;
}
/* /Pages/Chat/List/ChatCard.razor.rz.scp.css */
.profile-picture[b-0ajeotpijj] {
    height: 64px;
    width: 64px;
    border-radius: 50%;
}

.scheduled-message-info i[b-0ajeotpijj] {
    padding-top: 10px;
}

.scheduled-message-info span[b-0ajeotpijj] {
    position: relative;
    left: -5px;
    padding: 0.4em 0.5em !important;
    top: -12px;
    font-weight: bold;
    font-size: 7px;
}
/* /Pages/Settings/Tags/Tags.razor.rz.scp.css */
[b-s0vqrmvto2] .ub-tag {
    float: none !important;
}
/* /Shared/Components/MemberList.razor.rz.scp.css */
[b-0k72xlzx5z] img,
.extra-members[b-0k72xlzx5z] {
    margin-left: -3px;
}

.pictures-container[b-0k72xlzx5z] {
    padding-left: 3px;
}

.extra-members[b-0k72xlzx5z] {
    height: 16px;
    width: 16px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

[data-bs-theme=dark] .extra-members[b-0k72xlzx5z] {
    background-color: #7a7a7a;
}

[data-bs-theme=light] .extra-members[b-0k72xlzx5z] {
    background-color: #f0f4ff;
}

[b-0k72xlzx5z] .extra-members i {
    font-size: 0.5rem;
}
/* /Shared/MainLayout.razor.rz.scp.css */
.page[b-q2hvnu5qly] {
    position: relative;
    display: flex;
    flex-direction: column;
}

.main[b-q2hvnu5qly] {
    flex: 1;
}

.sidebar[b-q2hvnu5qly] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-q2hvnu5qly] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-q2hvnu5qly] a,
    .top-row .btn-link[b-q2hvnu5qly] {
        white-space: nowrap;
        margin-left: 1.5rem;
    }

.top-row a:first-child[b-q2hvnu5qly] {
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 640.98px) {
    .top-row:not(.auth)[b-q2hvnu5qly] {
        display: none;
    }

    .top-row.auth[b-q2hvnu5qly] {
        justify-content: space-between;
    }

    .top-row a[b-q2hvnu5qly],
    .top-row .btn-link[b-q2hvnu5qly] {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-q2hvnu5qly] {
        flex-direction: row;
    }

    .sidebar[b-q2hvnu5qly] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-q2hvnu5qly] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .main > div[b-q2hvnu5qly] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}
/* /Shared/Sidebar/SideBar.razor.rz.scp.css */
figure[b-bnc0605uof] {
    width: 41.95px;
    height: 24.52px;
    margin: 15px 10px 20px 6px;
}

/* _content/Umbler.UTalk.Shared/Shared/Components/ErrorLimitMessage.razor.rz.scp.css */
[data-bs-theme=dark] .error-bg[b-w7hl4xhbs9] {
    background: repeating-linear-gradient( -45deg, #57450e, #57450e 20px, transparent 20px, transparent 40px );
}

[data-bs-theme=light] .error-bg[b-w7hl4xhbs9] {
    background: repeating-linear-gradient( -45deg, #fffaeb, #fffaeb 20px, transparent 20px, transparent 40px );
}
/* _content/Umbler.UTalk.Shared/Shared/Components/ProfileCard.razor.rz.scp.css */

[data-bs-theme=dark] .contact:hover[b-htshgx5on0] {
    background-color: #3b3f42;
}

[data-bs-theme=light] .contact:hover[b-htshgx5on0] {
    background-color: #f2f4f9;
}

.profile-content[b-htshgx5on0] {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100%;
}
/* _content/Umbler.UTalk.Shared/Shared/Components/ProfilePicture.razor.rz.scp.css */
div.profilePicture {
    border-radius: 50%;
    border-style: solid;
    outline-style: solid;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

[data-bs-theme=dark] div.profilePicture {
    border-color: #191d21;
}

[data-bs-theme=light] div.profilePicture {
    border-color: white;
}

[data-bs-theme=light] aside div.profilePicture {
    border-color: #557cf2 !important;
}

[data-bs-theme=dark] aside div.profilePicture {
    border-color: #3b3f42 !important;
}
/* _content/Umbler.UTalk.Shared/Shared/Components/RelativeBackground.razor.rz.scp.css */
div[b-1596u9prck] {
    position: relative;
}

span[b-1596u9prck] {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
/* _content/Umbler.UTalk.Shared/Shared/Components/TextPlaceholder.razor.rz.scp.css */
span[b-3mwvgv3qld] {
    height: 1.25rem;
    margin: 0.1rem;
}

[data-bs-theme=dark] span[b-3mwvgv3qld] {
    background-color: #515f6d;
}

[data-bs-theme=light] span[b-3mwvgv3qld] {
    background-color: #eff3fe;
}
/* _content/Umbler.UTalk.Shared/Shared/Components/VerticalSeparator.razor.rz.scp.css */
div[b-gc3jtqtu8f] {
    height: 75%;
    width: 2px;
    margin: 0 0.5rem;
}

[data-bs-theme=dark] div[b-gc3jtqtu8f] {
    background-color: #2d353c;
}

[data-bs-theme=light] div[b-gc3jtqtu8f] {
    background-color: #d4d4d4;
}

.dropdown-toggle.dropdown-toggle-hidden::after {
    content: none !important;
}

.dropdown-toggle.dropdown-toggle-hidden::before {
    content: none !important;
}

.dropdown-menu.show {
    animation-duration: 0.3s;
    animation-fill-mode: both;
    animation-name: fadeIn;
}

.dropdown-menu a:not([href]).dropdown-item:not(.disabled) {
    cursor: pointer;
}

.dropdown-menu.dropdown-menu-scrollable {
    max-height: var(--dropdown-list-menu-max-height, 200px);
    overflow-y: scroll;
}

.text-input-date {
    background-color: #f7f9ff;
    border-right: 4px solid #e7ecff;
    border-left: 4px solid #e7ecff;
    line-height: 41px;
    color: #3961d7;
    padding: 0px 4px 0 4px;
    font-size: 0.82rem;
}

.line-right {
    overflow: hidden;
    font-size: 11px;
    color: #f26b7a;
    letter-spacing: 0.1em;
}

    .line-right:after {
        left: 0.5em;
        margin-right: -50%;
        background-color: #e5e9f5;
        content: "";
        display: inline-block;
        height: 1px;
        position: relative;
        vertical-align: middle;
        width: 100%;
    }

.line-between {
    display: flex;
    justify-content: space-between;
    letter-spacing: 0.1em;
    font-size: 11px;
    color: #f26b7a;
}

    .line-between .middle {
        margin: 0 5px;
        transform: translateY(-50%);
        border-bottom: 1px solid #e5e9f5;
        flex-grow: 1;
    }

.line-border-bottom {
    border-bottom: 1px solid rgba(239, 241, 248, 1);
}

.img-inside > div input[type="text"] {
    padding-right: 46px;
}

.img-inside img {
    position: absolute;
    top: 31px;
    right: 28px;
}

.cursor-pointer {
    cursor: pointer;
}

.btn-baby-blue {
    background-color: #f7f9ff;
    color: #557cf2;
    border-color: #f7f9ff;
}

.header-title {
    padding-top: 1.5em;
    padding-bottom: 1.5em;
}

[data-bs-theme=dark] .tab-content .tab-pane {
    background-color: #222;
}

[data-bs-theme=light] .tab-content .tab-pane {
    background-color: white;
}

[data-bs-theme=light] .chat-filter-search {
    background-color: white !important;
    padding: 0.6em !important;
}

.icon-brand-login {
    height: 15px;
    width: 25px;
}

.icon-brand-disconnected {
    padding: 1rem;
    filter: invert(91%) sepia(19%) saturate(171%) hue-rotate(190deg) brightness(95%) contrast(101%);
}

.icon-brand-connected {
    padding: 1rem;
    border-radius: 50%;
    background-color: rgba(208, 245, 208, 0.8);
}

.btn-sort {
    line-height: 20px;
}

.w-35 {
    width: 349px !important;
}

[data-bs-theme=light] input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 30px white inset;
    -webkit-text-fill-color: #4e5159 !important;
}

[data-bs-theme=light] .form-control::placeholder {
    color: #c0c4d2 !important;
}

[data-bs-theme=light] .form-control {
    color: #4e5159 !important;
}

.focus-none:focus {
    box-shadow: unset;
}

[data-bs-theme=dark] .dark-color-text {
    color: #fff;
}

[data-bs-theme=light] .dark-color-text {
    color: #0b0b0d;
}

[data-bs-theme=light] .umbler-talk-logo-path {
    filter: invert(0%);
}

[data-bs-theme=dark] .umbler-talk-logo-path {
    filter: invert(100%);
}

[data-bs-theme=light] .umbler-logo-brand {
    background-image: url("//assets.umbler.com/site/about/umbler-logo-bg-light.svg");
    width: 128px;
    height: 35px;
    background-repeat: no-repeat;
    background-size: contain;
}

[data-bs-theme=dark] .umbler-logo-brand {
    background-image: url("//assets.umbler.com/site/about/umbler-logo-bg-primary.svg");
    width: 150px;
    height: 35px;
    background-repeat: no-repeat;
    background-size: contain;
}

.card-header-fixed {
    z-index: 99;
    position: sticky;
    width: 100%;
    top: 0;
}

[data-bs-theme=dark] .card-header-bg {
    background-color: var(--gray-darker);
    padding: 12px 20px 12px 12px;
}

[data-bs-theme=light] .card-header-bg {
    background-color: white;
    padding: 12px 20px 12px 12px;
}

[data-bs-theme=light] .white-btn {
    padding: 16px 32px;
    background: white;
    color: #0B0B0D;
    font-weight: 600;
    border-radius: 50%;
    font-size: 18px;
    line-height: 27px;
    border: 2px solid rgba(11, 11, 13, 0.14);
}

    [data-bs-theme=light] .white-btn:hover {
        background: #F0F4FF;
        border: 2px solid #4D72EC;
        color: #0B0B0D;
        font-weight: 600;
        font-size: 18px;
    }

    [data-bs-theme=light] .white-btn:disabled,
    [data-bs-theme=light] .white-btn[disabled] {
        border: 2px solid #DEDFE0;
        border-radius: 50%;
        color: #ACADAD;
        font-weight: 600;
        font-size: 18px;
    }

[data-bs-theme=dark] .white-btn {
    padding: 16px 32px;
    color: #ffffff;
    font-weight: 600;
    font-size: 18px;
    border-radius: 50%;
    line-height: 27px;
    border: 2px solid rgb(255 255 255 / 30%);
}

    [data-bs-theme=dark] .white-btn:hover {
        border: 2px solid rgb(255 255 255 / 30%);
        color: #ffffff;
        font-weight: 600;
        font-size: 18px;
    }

    [data-bs-theme=dark] .white-btn:disabled,
    [data-bs-theme=dark] .white-btn[disabled] {
        border: 2px solid rgb(255 255 255 / 30%);
        border-radius: 50%;
        color: #ffffff;
        font-weight: 600;
        font-size: 18px;
    }

.is-invalid ~ .invalid-feedback {
    display: block !important;
}

#input-password.is-invalid ~ #toggle-password {
    padding-right: 20px;
}

[data-bs-theme=light] .switch-gray {
    background-color: rgba(0, 0, 0, 0.04) !important;
}

[data-bs-theme=dark] .table-header-sort {
    --bs-table-accent-bg: rgb(255 255 255 / 7%);
    border-bottom: 1px solid rgb(255 255 255 / 6%) !important;
    color: white;
}

.table-header-sort {
    --bs-table-accent-bg: rgba(0, 0, 0, 0.02);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
    color: rgba(0, 0, 0, 0.88);
}

[data-bs-theme=dark] .table-header-sort-diviser::after {
    border-left: 1px solid rgb(255 255 255 / 6%)
}

[data-bs-theme=light] .table-header-sort-diviser::after {
    border-left: 1px solid rgba(0, 0, 0, 6%);
}

.table-header-sort-diviser::after {
    content: " ";
    position: absolute;
    right: 0;
    height: 40%;
    margin-top: auto;
    margin-bottom: auto;
    top: 30%;
}

[data-bs-theme=dark] .table-hover:hover {
    --bs-table-hover-bg: #3b3f42 !important;
}

[data-bs-theme=light] .table-hover:hover {
    --bs-table-hover-bg: #eef2fe !important;
    --bs-table-color: rgba(0, 0, 0, 0.88);
    --bs-table-hover-color: rgba(0, 0, 0, 0.88);
}

[data-bs-theme=light] .border-diviser {
    border-right: 1px solid rgba(0, 0, 0, 0.06);
}

[data-bs-theme=dark] .border-diviser {
    border-right: 1px solid rgba(255, 255, 255, 0.06);
}

.ub-sidebar__link {
    font-size: 20px !important;
    padding: 12px;
    line-height: 0;
    text-decoration: none !important;
    text-align: center;
    border-radius: 12px;
    color: $gray-lighter !important;
    height: 40px !important;
    width: 40px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    justify-items: center;
}

[data-bs-theme=light] .ub-sidebar__link.active:hover {
    background-color: #3961d7;
    color: #fff;
}

[data-bs-theme=dark] .ub-sidebar__link.active:hover {
    background-color: #3961D7;
    color: #fff;
}

.ph-20 {
    font-size: 1.25rem;
}

.breadcrumbs-header {
    padding: 18px 35px !important;
}

#switch-autorecharge {
    width: 45px !important;
    height: 24px !important;
}

[data-bs-theme=light] .btn-custom-outline {
    background-color: white;
    border: 2px solid var(--bs-secondary) !important;
    transition: all 0.3s ease;
}

    [data-bs-theme=light] .btn-custom-outline:hover {
        border-color: var(--bs-primary) !important;
        color: var(--bs-primary) !important;
    }

[data-bs-theme=dark] .btn-custom-outline {
    border: 2px solid var(--bs-secondary) !important;
    transition: all 0.3s ease;
}

    [data-bs-theme=dark] .btn-custom-outline:hover {
        border-color: var(--bs-primary) !important;
        color: var(--bs-primary) !important;
    }

@media (max-width: 768px) {
    .ub-pills {
        width: fit-content !important;
    }

    .tab-item-header-wrapper {
        font-size: 0.9em !important;
    }
}

[data-bs-theme=light] .bg-primary-very-subtle {
    background-color: rgba(230, 244, 255, 0.4) !important
}

[data-bs-theme=dark] .bg-primary-very-subtle {
    background-color: rgba(120, 180, 255, 0.15) !important
}

[data-bs-theme=light] .bg-success-very-subtle {
    background-color: rgba(209, 235, 233, 0.2) !important
}

[data-bs-theme=dark] .bg-success-very-subtle {
    background-color: rgba(100, 200, 190, 0.1) !important
}