:root {
    /* Global */
    --main-color: #400094;
    --main-color-2: #530fad;
    --second-color: #9c27b0;
    --second-color-dark: #7e1591;
    --second-color-2: #9C27B0;
    --second-color-3: #b500d1;
    --second-color-4: #c43ada;
    --second-color-5: #ff00ff;
    --second-color-6: #7b00b4;

    --gray-color: #383d41;
    --fade-color: #f9daff;
    --fade-color-2: #fdf0ff;
    --btn-shadow-color: #400075;
    --btn-shadow-color-2: #9c27b0;
    --gradient-color: linear-gradient(to right, #400094, #5e00a4, #7b00b4, #9800c3, #b500d1);
    --gradient-color-2: linear-gradient(to right, #400094, #b500d1);
    --fetch-label-gradient-color-desktop: linear-gradient(to right, #400094, #5e00a4);
    --fetch-label-gradient-color-mobile: linear-gradient(to right, #400094, #7b00b4);

    /* Login page */
    --login-box-bg-color: #40006f91;
    --login-box-logo-bg-color: #5e00a4;

    /*==================================*/
    --body-bg-color: #f4f6f9;
    /* --header-height: 3rem; */
    --header-height: 45px;
    --second-header-height: 36px;
    --nav-width: 50px;
    --nav-icon-width: 36px;
    --header-bg-color: #1e1e1e;
    --secondary-header-bg-color: #343746;
    --header-link-color: #f9f8ff;
    --header-transition: all 0.5s ease;
    --primary-color-rgb: 64, 0, 148;
    --primary-color-rgb-2: 156, 39, 176;
    --primary-color-dark-rgb: 139, 21, 160;
    --primary-color: var(--second-color);
    --primary-color-2: var(--second-color-dark);
    /* --focus-box-shadow: 0 0 0 0.25rem rgba(var(--primary-color-rgb-2), 0.25); */
    --focus-box-shadow: none;
    --white-color: #F7F6FB;

    --bs-blue: var(--primary-color);
    --bs-pagination-active-bg: var(--primary-color);
    --bs-pagination-active-border-color: var(--primary-color);

    --bs-link-color: var(--primary-color);
    --bs-link-hover-color: var(--primary-color-2);

    --body-font: 'Nunito', sans-serif;
    --normal-font-size: .875rem;
    --z-fixed: 100
}

*,
::before,
::after {
    box-sizing: border-box
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;

}

::-webkit-scrollbar-track {
    background: #f1f1f1
}

::-webkit-scrollbar-thumb {
    background: #909090;
    border-radius: 10px;
    max-height: 100px
}

::-webkit-scrollbar-thumb:hover {
    background: #5d5d5d;
    cursor: pointer;
}

::selection {
    color: #fff;
    background-color: var(--second-color-2);
}

/* Rotate Infinite */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* marquee right to left */
@keyframes marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}

body {
    background-color: var(--body-bg-color);
    position: relative;
    /* font-family: 'Inter', sans-serif; */
    font-family: 'Inter', 'Roboto', Arial, sans-serif;
    /* overflow-x: hidden; */
}

img {
    max-width: 100%;
    height: auto;
}

a {
    text-decoration: none
}

select,
input[type=checkbox],
input[type=radio] {
    cursor: pointer;
}

/* input[placeholder] {
    font-size: 14px;
    font-weight: 400;
} */

input,
textarea,
select {
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

button:disabled {
    pointer-events: none;
}

.form-control:focus,
.tt-query:focus,
.tt-hint:focus,
.select2-container--default .select2-selection--single .select2-search__field:focus,
.select2-container--default .select2-selection--single:focus,
input,
input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: 0;
}

.height-100 {
    height: 100vh;
}

.w-90 {
    width: 90%;
}

.w-95 {
    width: 95%;
}

.w-85 {
    width: 85%;
}

.w-70 {
    width: 70%;
}

.w-60 {
    width: 60%;
}

.w-45 {
    width: 45%;
}

.w-80 {
    width: 80%;
}

.small-2 {
    font-size: .78em;
}

.small-3 {
    font-size: .65em;
}

.ls-1 {
    letter-spacing: .08em;
}

.cursor-pointer {
    cursor: pointer !important;
}

.cursor-move {
    cursor: move !important;
}

.outline-0 {
    outline: none !important;
}

.tab-content>.tab-pane {
    outline: 0;
}

.required::after {
    content: '*';
    color: red;
    margin-left: 4px;
}

.card {
    box-shadow: 0 0 .875rem 0 rgb(61, 64, 67, 0.08);
}

.text-primary {
    --bs-text-opacity: 1;
    color: rgba(var(--primary-color-rgb), var(--bs-text-opacity)) !important;
}

.text-primary-2 {
    color: var(--primary-color) !important;
}

.flex-1 {
    flex: 1;
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--primary-color);
    --bs-btn-border-color: var(--primary-color);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--primary-color-2);
    --bs-btn-hover-border-color: var(--primary-color-2);
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--primary-color-2);
    --bs-btn-active-border-color: var(--primary-color-2);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--primary-color);
    --bs-btn-disabled-border-color: var(--primary-color);
}

.btn-inb-secondary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #8543ff;
    --bs-btn-border-color: #8543ff;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #6723e4;
    --bs-btn-hover-border-color: #6723e4;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #6723e4;
    --bs-btn-active-border-color: #6723e4;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #8543ff;
    --bs-btn-disabled-border-color: #8543ff;
}

.btn-danger {
    --bs-btn-color: #fff;
    --bs-btn-bg: #ec2738;
    --bs-btn-border-color: #ec2738;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #dd1f2f;
    --bs-btn-hover-border-color: #dd1f2f;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #dd1f2f;
    --bs-btn-active-border-color: #dd1f2f;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #ec2738;
    --bs-btn-disabled-border-color: #ec2738;
}

.btn-outline-primary {
    --bs-btn-color: var(--primary-color);
    --bs-btn-border-color: var(--primary-color);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--primary-color);
    --bs-btn-hover-border-color: var(--primary-color);
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--primary-color);
    --bs-btn-active-border-color: var(--primary-color);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--primary-color);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--primary-color);
    --bs-gradient: none;
}

.alert-primary {
    --bs-alert-bg: #e3eeff;
    --bs-alert-border-color: #b9d5ff;
}

.inb-alert-primary {
    --bs-alert-padding-x: .5rem;
    --bs-alert-padding-y: .5rem;
    --bs-alert-color: #540061;
    --bs-alert-bg: #fce9ff;
    --bs-alert-border-color: #fadcff;
    --bs-alert-link-color: #540061;
}

.alert-success {
    color: #007432;
    background-color: #c9f5db;
    border-color: #b4f3c7;
}

.badge {
    line-height: 1;
    border-radius: 1.03125rem;
    padding: 0.4rem 0.625rem;
}

/*========= ACTION BUTTON -- START =========*/
.inbDigital__action-btn.btn-warning {
    --bs-btn-color: #4b3a06;
    --bs-btn-bg: #ffeaad;
    --bs-btn-border-color: #ffc924;
}

.inbDigital__action-btn.btn-primary {
    --bs-btn-color: var(--primary-color-2);
    --bs-btn-bg: var(--fade-color-2);
    --bs-btn-border-color: var(--fade-color);
}

.inbDigital__action-btn.btn-danger {
    --bs-btn-color: #dc3545;
    --bs-btn-bg: #ffe8ea;
    --bs-btn-border-color: #ff9ca5;
}

/*========= ACTION BUTTON -- END =========*/

.bg-primary {
    /* --bs-bg-opacity: 1; */
    background-color: rgba(var(--primary-color-dark-rgb), var(--bs-bg-opacity)) !important;
}

.dropdown-menu {
    --bs-dropdown-link-active-bg: var(--primary-color);
}

.dropdown-menu .dropdown-divider {
    margin: 0 !important;
    border-color: #f0f0f0;
}

.nav-link {
    color: var(--primary-color);
}

.nav-link:focus,
.nav-link:hover {
    color: var(--primary-color-2);
}

.active>.page-link,
.page-link.active,
.list-group-item.active,
.form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.form-check-input {
    border-color: var(--primary-color);
}

.form-switch .form-check-input {
    --bs-form-switch-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='%239c27b0'/></svg>");
}

.form-switch .form-check-input:focus:not(:checked) {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23c426df'/%3e%3c/svg%3e")
}

/* .list-group-item.active {
    background-color: var(--bs-list-group-active-bg);
    border-color: var(--bs-list-group-active-border-color);
} */

.page-link:focus,
.form-control:focus,
.form-select:focus,
.btn-close:focus,
.form-check-input:focus,
.form-control:focus-within {
    box-shadow: var(--focus-box-shadow);
}

.form-control:focus,
.form-select:focus,
.form-control:focus-within {
    /* border-color: rgba(var(--primary-color-rgb), 0.35); */
    border-color: rgba(var(--primary-color-rgb-2), 0.85);
}

.form-check-input:focus {
    border-color: rgba(64, 0, 148, 0.49);
}

input[type="radio"],
.form-switch input[type="checkbox"] {
    transform: scale(1.15);
    margin-right: 10px;
}

/*=============================================================
====================|  P O P  O V E R  |====================
===============================================================*/

.inbDigital__popover {
    --bs-popover-max-width: 310px;
    --bs-popover-border-color: var(--primary-color);
    --bs-popover-header-bg: var(--primary-color);
    --bs-popover-header-color: var(--bs-white);
    --bs-popover-body-padding-x: 1rem;
    --bs-popover-body-padding-y: .5rem;
}

[data-bs-toggle="popover"] {
    outline: none;
}

/*=============================================================
====================|  D A T A T A B L E  |====================
===============================================================*/

table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control:before,
table.dataTable.dtr-inline.collapsed>tbody>tr>th.dtr-control:before {
    background-color: var(--primary-color) !important;
}

.inbDigital__datatable_container .row {
    row-gap: 10px !important;
}

.dataTables_wrapper div.dataTables_info,
.dataTables_wrapper label {
    font-size: 0.85rem;
}

div.dataTables_wrapper div.dataTables_paginate ul.pagination {
    gap: 0.5rem;
    flex-wrap: wrap;
}

div.dataTables_wrapper div.dataTables_paginate ul.pagination .paginate_button a.page-link {
    border-radius: 50% !important;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0;
}

table.dataTable td.dataTables_empty,
table.dataTable th.dataTables_empty {
    font-size: 0.85rem;
    color: #777 !important;
}

.header_avatar_img {
    width: 43px;
    height: 43px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #e71d95;
}

.header_avatar_img img {
    width: 40px
}

.nav_link {
    display: grid;
    grid-template-columns: max-content max-content;
    align-items: center;
    /* column-gap: 1rem; */
    padding: .5rem 0 .5rem .95rem
}

.nav_link {
    position: relative;
    color: var(--header-link-color);
    margin-bottom: .5rem;
    transition: .3s
}

.nav_link:hover,
.nav_link.active {
    background-color: var(--primary-color);
    color: var(--white-color);
}

.nav_name {
    font-size: 14px;
}

/*
==========================
Loading overlay styles
==========================
*/
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.loading-spinner {
    line-height: 1;
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.badge.fs-6 {
    font-size: 0.875rem !important;
    padding: 0.5rem 0.75rem;
}

.btn-group .btn-sm {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
}

.btn,
.badge {
    transition: all 0.2s ease-in-out;
}


/*
===================================================================
========================| style-v2.css |===========================
===================================================================
*/

a,
img {
    -webkit-user-drag: none !important;
    user-drag: none !important;
}

img {
    user-select: none;
}

/* button,
div,
form,
h1,
h2,
h3,
h4,
h5,
img,
p,
span {
    transition: width .3s ease-in-out;
} */

select {
    cursor: pointer;
}


body.navOpened {
    overflow: hidden;
}

body.navOpened .mobile-mask,
.inb__nav,
.top-bar {
    position: fixed !important
}

.main {
    top: 61px;
    left: 248px;
    width: calc(100% - 248px);

    min-height: calc(100vh - 61px);
}

.main .content-area {
    padding: 20px 15px;
    flex-grow: 1;
}

.main .title-bar {
    background-color: var(--second-color);
    height: 34px;
}

.report-notif-delivered {
    color: #005503;
    background-color: #dcffde;
}

.report-notif-failed {
    color: #7f0d04;
    background-color: #ffe4e2;
}

/**
* Text Truncate
*/
.inbDigital__text-truncate-comm {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: var(--inb-line-clamp);
}

.inbDigital__text-truncate-1 {
    --inb-line-clamp: 1
}

.inbDigital__text-truncate-2 {
    --inb-line-clamp: 2
}

.inbDigital__text-truncate-3 {
    --inb-line-clamp: 3
}

.inbDigital__text-truncate-4 {
    --inb-line-clamp: 4
}

.inbDigital__text-truncate-5 {
    --inb-line-clamp: 5
}

.inbDigital__text-truncate-6 {
    --inb-line-clamp: 6
}

.rotate-infinite {
    animation: spin 1s linear infinite;
    /* display: inline-block; */
}

.nav-link.nav-active {
    color: #0d6efd;
    font-weight: 600;
}

/* 
===================
Nav Bar Styles
===================
*/
.top-bar {
    z-index: 20;
    width: 100%;
    background-color: #fdf0ff;
    height: 62px;
    box-shadow: 0 1px 5.5px 0 rgba(0, 0, 0, .4);
    display: flex;
    align-items: center;
    padding: 0 10px
}

.top-bar .nav-toggle {
    display: none
}

.top-bar .logo-image {
    height: 55px
}

.inb__nav {
    display: flex;
    width: 248px;
    /* height: calc(100% - 60px); */
    height: 100%;
    top: 0;
    z-index: 30;
    box-shadow: 0px -3px 8px 0px rgba(0, 0, 0, .1);
}

.nav-list {
    padding: 8px 0;
}

.inb__nav .main-menu .nav-item {
    position: relative;
    display: flex;
    flex-direction: column;
    margin-bottom: 0.5rem;
}

.inb__nav .main-menu>li>a {
    padding: 10px 25px;
    color: #505050;
    font-weight: 600;
    border-radius: 0 30px 30px 0;
    transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.inb__nav .main-menu>li>a:hover {
    background-color: #f3f3f3;
}

.inb__nav .main-menu>li.nav-active>a,
.main-menu>li.nav-active>a,
.inb__nav .main-menu .nav-item.menu-items>a[aria-expanded="true"] {
    color: var(--second-color);
    background-color: var(--fade-color-2, #fdf0ff);
}

.inb__nav .main-menu>li.nav-active>a:hover {
    background-color: var(--fade-color, #fdf0ff);
}

.inb__nav .main-menu i,
.inb__nav .main-menu svg {
    display: inline-block;
    margin-right: 14px;
    font-size: 20px;
}

/* Submenu */
.nav-item.menu-items>a {
    position: relative;
    padding-right: 25px;
    cursor: pointer;
}

.nav-item.menu-items>a::after {
    position: absolute;
    content: "";
    top: 48%;
    right: 10%;
    width: 7px;
    height: 7px;
    border-left: 2px solid #959595;
    border-top: 2px solid #959595;
    -webkit-transform-origin: top;
    transform-origin: top;
    transition: all .3s ease-out;
    -webkit-transform: rotate(-135deg) translateY(-50%);
    transform: rotate(-135deg) translateY(-50%);
}

.nav-item.menu-items>a[aria-expanded="true"]::after {
    top: 55%;
    border-color: var(--second-color);
    -webkit-transform: rotate(45deg) translateY(-50%);
    transform: rotate(45deg) translateY(-50%);
}

.inb__nav .sub-menu {
    padding-left: 2.85rem;
}

.inb__nav .collapse {
    transition: height 0.3s ease;
    overflow: hidden;
}

.inb__nav .main-menu .sub-menu {
    transition: all .2s ease-in-out;
    position: relative;
    z-index: 1;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.inb__nav .main-menu .sub-menu li a {
    position: relative;
    font-size: 0.78rem;
    display: block;
    padding: 0.3rem 1.875rem;
    outline-width: 0;
    color: #6b6b6b;
    text-decoration: none;
}

.inb__nav .main-menu .sub-menu li.nav-active a,
.inb__nav .main-menu .sub-menu li a:hover {
    color: var(--second-color);
}

.inb__nav .main-menu .sub-menu li a {
    position: relative;
    padding-left: 1.5rem;
    display: inline-block;
}

.inb__nav .main-menu .sub-menu li a::before {
    position: absolute;
    content: "";
    height: 0.55rem;
    width: 0.55rem;
    border: 0.125rem solid #cccccc;
    top: 50%;
    left: 0;
    transform: translateY(-50%) rotate(45deg);
    transition: all 0.4s ease;
    border-radius: 2px;
    background: linear-gradient(135deg, #f0f0f0, #e0e0e0);
    box-shadow: 0 0 0 0 rgba(204, 204, 204, 0.2);
}

.inb__nav .main-menu .sub-menu li a:hover::before,
.inb__nav .main-menu .sub-menu li a:focus::before,
.inb__nav .main-menu .sub-menu li.nav-active a::before {
    border-color: var(--second-color);
    transform: translateY(-50%) rotate(225deg) scale(1.2);
    background: linear-gradient(135deg, var(--second-color), #ffffff);
    box-shadow: 0 0 8px var(--second-color);
}

.has-submenu .submenu {
    max-height: 0;
    overflow: hidden;
    padding-left: 40px;
    transition: max-height 0.35s ease, opacity 0.25s ease;
    opacity: 0;
}

.has-submenu.open .submenu {
    max-height: 500px;
    opacity: 1;
}

.submenu li a {
    display: block;
    padding: 8px 0;
    font-size: 14px;
    color: #6c757d;
}

.submenu-arrow {
    margin-left: auto;
    transition: transform 0.3s ease;
}

.has-submenu.open .submenu-arrow {
    transform: rotate(90deg);
}


/* 
===================
Marquee styles
===================
*/
/* .marquee {
    overflow: hidden;
    white-space: nowrap;
} */

.marquee-track {
    padding-left: 100%;
    animation: marquee 95s linear infinite;
}

.marquee-track * {
    margin-top: 0;
    margin-bottom: 0;
}

.marquee-track a,
.marquee-track a:hover {
    text-decoration: underline;
    color: #fff;
}

.marquee:hover .marquee-track {
    animation-play-state: paused;
}



.site-name-box {
    border-left: 5px solid var(--main-color);
}

.site-name span,
.wlc-user-name span {
    color: var(--second-color);
    font-weight: 700
}

/* 
===================
Dashboard Page
===================
*/

/* ===== Common ===== */
.stats-container {
    display: grid;
    /* grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); */
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 1.25rem;
}

.icon-pill {
    min-width: 72px;
    height: 72px;
    font-size: 2rem;
}

.trend-chip {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .8rem;
    font-weight: 600;
    padding: .3rem .6rem;
    border-radius: 50rem;
    background: rgba(25, 135, 84, .15);
    color: #198754;
}

/* ===== Total Subs (Hero) ===== */
.total-card {
    background: linear-gradient(135deg, #fef6ff, #fefaff);
    border: 1px solid rgba(181, 0, 209, 0.25);
}

.total-value {
    font-size: 2.5rem;
}

.total-label {
    color: #32076b;
}

/* ===== Grid Cards ===== */
.stat-value {
    font-size: 1.85rem;
}

.bg-soft-primary-2 {
    background: rgba(156, 39, 176, 0.10);
    color: #9c27b0;
}

/* ===== MODERN SOFT UI PALETTE (20 COLORS) ===== */

.bg-soft-primary {
    background: rgba(59, 130, 246, 0.15);
    color: #2563eb;
}

.bg-soft-secondary {
    background: rgba(100, 116, 139, 0.15);
    color: #475569;
}

.bg-soft-success {
    background: rgba(34, 197, 94, 0.15);
    color: #16a34a;
}

.bg-soft-danger {
    background: rgba(239, 68, 68, 0.15);
    color: #dc2626;
}

.bg-soft-warning {
    background: rgba(245, 158, 11, 0.18);
    color: #d97706;
}

.bg-soft-info {
    background: rgba(6, 182, 212, 0.15);
    color: #0891b2;
}

.bg-soft-dark {
    background: rgba(15, 23, 42, 0.15);
    color: #0f172a;
}

.bg-soft-light {
    background: rgba(226, 232, 240, 0.6);
    color: #334155;
}

/* ===== EXTRA MODERN COLORS ===== */

.bg-soft-indigo {
    background: rgba(99, 102, 241, 0.15);
    color: #4f46e5;
}

.bg-soft-purple {
    background: rgba(168, 85, 247, 0.15);
    color: #9333ea;
}

.bg-soft-pink {
    background: rgba(236, 72, 153, 0.15);
    color: #db2777;
}

.bg-soft-rose {
    background: rgba(244, 63, 94, 0.15);
    color: #e11d48;
}

.bg-soft-orange {
    background: rgba(249, 115, 22, 0.15);
    color: #ea580c;
}

.bg-soft-amber {
    background: rgba(251, 191, 36, 0.18);
    color: #d97706;
}

.bg-soft-lime {
    background: rgba(132, 204, 22, 0.15);
    color: #65a30d;
}

.bg-soft-emerald {
    background: rgba(16, 185, 129, 0.15);
    color: #059669;
}

.bg-soft-teal {
    background: rgba(20, 184, 166, 0.15);
    color: #0d9488;
}

.bg-soft-cyan {
    background: rgba(34, 211, 238, 0.15);
    color: #0891b2;
}

.bg-soft-sky {
    background: rgba(56, 189, 248, 0.15);
    color: #0284c7;
}

.bg-soft-violet {
    background: rgba(139, 92, 246, 0.15);
    color: #7c3aed;
}


.chart-container {
    height: 375px;
}

.chart-container,
.report-preview-right {
    /* background-color: #2d2d2d; */
    background-color: #1c1425;
}

.user-role.badge {
    background-color: var(--second-color-4);
}

/*
==================
Accordion
===================
*/
.accordion-header .accordion-button {
    font-size: 0.8rem;
    font-weight: 700;
    color: #1d2327;
    padding: 10px 10px 11px 14px;
}

.accordion-header .accordion-button::after {
    --ac-size: 0.9rem;
    width: var(--ac-size);
    height: var(--ac-size);
    background-size: var(--ac-size);
}

/* .accordion-item .accordion-body {
    background-color: var(--fade-color);
} */

.accordion-header .accordion-button.collapsed {
    background-color: #f2f1ff;
}

.accordion-header .accordion-button:not(.collapsed) {
    background-color: #dcd9ff;
}

.accordion-header .accordion-button:focus {
    box-shadow: none;
}

/* .accordion-item .accordion-body {
    overflow: hidden;
    resize: vertical;
} */

.accordion .accordion-collapse {
    transition: height 0.2s ease;
}

/*
=================
UTM Radio Style
=================
*/
.inb-radio input {
    position: absolute;
    left: -9999px;
    opacity: 0;
}

.inb-radio span {
    font-size: .875em;
    font-weight: 500;
    background: #f9fafb;
    color: #344054;
    position: relative;
    display: flex;
    align-items: center;
    padding: 0.5rem 1.2rem;
    border-radius: 50rem;
    border: 1px solid #989898;
    cursor: pointer;
    user-select: none;
    transition: 0.25s ease;
}

.inb-radio span::before {
    display: flex;
    flex-shrink: 0;
    content: "";
    width: 1rem;
    height: 1rem;
    background-color: #fff;
    border-radius: 50%;
    margin-right: 0.5rem;
    box-shadow: inset 0 0 0 0.125em #6a6a6a;
    transition: 0.25s ease;
}

/* YES active */
/* .inb-radio.yes input:checked+span {
    background-color: #e6f4ea;
    border-color: #34a853;
    color: #137333;
} */

/* NO active */
/* .inb-radio.no input:checked+span {
    background-color: #fdecea;
    border-color: #e53935;
    color: #b71c1c;
} */

.inb-radio input:checked+span {
    background-color: var(--fade-color-2);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.inb-radio input:checked+span::before {
    box-shadow: inset 0 0 0 4px var(--primary-color);
}

/* Hover state */
.inb-radio span:hover {
    background: #f2f4f7;
}

/*
Domain Selection
*/
.checkbox {
    appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid #d1d5db;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.checkbox:checked {
    /* background: #4f46e5;
        border-color: #4f46e5; */
    background: var(--primary-color);
    border-color: var(--primary-color);
}

.checkbox:checked::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 2px;
    width: 6px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.domain-item label,
.domain-name {
    transition: background-color 0.2s ease;
    word-break: break-word;
}

.domain-item:hover label {
    background: #f3f4f6;
}

.domain-item:last-child {
    margin-bottom: 0;
}

.selected-count {
    /* background: #4f46e5; */
    background: var(--fade-color);
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
}

/*
===========================================
Campaign Reports Page
===========================================
*/
.domain-list {
    max-height: 100px;
}

th.inb_table-header {
    background-color: rgba(var(--primary-color-dark-rgb), 1) !important;
    color: #fff;
}

/* Status Badge Style */
.status-badge {
    letter-spacing: 0.044rem;
}

.status-badge.status-badge__sent {
    color: #005c06;
    background-color: #d1ffdd;
}

.status-badge.status-badge__failed {
    color: #ca0000;
    background-color: #ffe0dd;
}

.status-badge.status-badge__pending {
    color: #006b78;
    background-color: #d5f9ff;
}

.status-badge.status-badge__processing {
    color: #825500;
    background-color: #ffe8be;
}

.status-badge.status-badge__cancelled {
    color: #5a5d5f;
    background-color: #e7e7e7;
}

.status-badge.status-badge__unknown {
    color: #0a039e;
    background-color: #dcdaff;
}


.domain-select-box,
.campaign-reports-card .card-header {
    background-color: var(--fade-color, #eee);
}

.m-logo {
    height: 62px;
    background-color: #fff;
    border-bottom: 1px solid #e4e4e4;
}

.top-bar .logo-image {
    display: inline-block;
    /* height: 42px */
}

.m-logo .logo-image {
    height: 55px
}

/*
===========================================
Send Notification Page
===========================================
*/
.send-push-page .inbDigital_icon__circle-question-mark.inb-i_sm {
    vertical-align: -0.16em;
}

.fetch-field-wrapper {
    background: var(--gradient-color);
    padding: 10px;
    border-radius: 0 8px 8px;
}

.fetch-field-wrapper input {
    font-size: 14px
}

.fetch-label {
    background: var(--fetch-label-gradient-color-desktop);
    padding: 3px 10px 0 10px;
    border-radius: 8px 8px 0 0;
}

#fetch-post-btn {
    color: var(--second-color);
    box-shadow: 0 1px 1px 1px var(--btn-shadow-color);
    transition: .3s ease-in-out
}

#fetch-post-btn:hover,
#fetch-post-btn:disabled {
    opacity: 0.84;
}

.preview-upload-image,
.preview-upload-image-mob,
.report-notification-icon {
    width: 40px;
    height: 40px;
}

.preview-img,
.report-notification-image {
    aspect-ratio: 16 / 9;
}

.send-push-sidebar {
    height: fit-content;
    top: 82px;
}

div#push-preview {
    top: 120px;
    right: 12.8%;
    left: 12.8%;
    box-shadow: 0 1px 14px 0 rgb(59 65 94 / 38%), 0 3px 6px 0 rgb(0 0 0 / 37%);
}

.push-preview-arrow {
    background: #f0f0f0;
    padding: 3px 9px;
    border-radius: 30px;
    font-size: 8px;
}

.preview-button {
    padding: 5px 15px;
    border: none;
    border-radius: 50px;
    background-color: #f0f0f0;
    color: #333;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 50%;
}

.preview-button:hover {
    opacity: .84;
}


.stars {
    position: absolute;
    inset: 0;
    background: transparent;
    background-image:
        radial-gradient(#fff 1px, transparent 1px),
        radial-gradient(#fff 1px, transparent 1px),
        radial-gradient(#fff 1px, transparent 1px);
    background-size: 100px 100px, 150px 150px, 200px 200px;
    background-position: 0 0, 50px 75px, 100px 100px;
    animation: twinkle 3s infinite linear;
    z-index: 0;
}

/* Rocket animation */
.rocket-container {
    position: relative;
    z-index: 1;
}

.rocket {
    filter: drop-shadow(0 0 30px rgba(156, 39, 176, 0.7));
    animation: floatRocket 1.5s ease-in-out infinite alternate;
}

.flame-shape {
    transform-origin: top center;
    animation: flamePulse 0.25s ease-in-out infinite alternate;
}

/* .flame-group .spark {
    animation: sparkAnim 0.5s ease-in-out infinite alternate;
} */

/* Rocket lift-off */
.rocket-lift {
    transition: transform 1.2s ease-in;
    transform: translateY(-400px) scale(1.2);
}

@keyframes floatRocket {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes flamePulse {
    0% {
        transform: scaleY(1);
        opacity: 0.8;
    }

    100% {
        transform: scaleY(1.05);
        opacity: 1;
    }
}

/* @keyframes sparkAnim {
    0% {
        transform: translateY(0) scale(1);
        opacity: 0.8;
    }

    100% {
        transform: translateY(10px) scale(0.5);
        opacity: 1;
    }
} */

@keyframes twinkle {
    0% {
        background-position: 0 0, 50px 75px, 100px 100px;
    }

    50% {
        background-position: -50px 0, 50px 50px, 100px 80px;
    }

    100% {
        background-position: 0 0, 50px 75px, 100px 100px;
    }
}

/*
=====================================
Customization Prompt Pop-Up
=====================================
*/
.prompt-type-card {
    border: 2px solid #dee2e6;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s;
    height: 100%;
    background: #fff;
    overflow: hidden;
}

.prompt-type-card:hover {
    border-color: var(--primary-color);
    box-shadow: 0 2px 8px rgba(var(--primary-color-rgb-2), 0.2);
}

.prompt-type-card.active {
    border-color: var(--primary-color);
    background: #f0f7ff;
    box-shadow: 0 2px 8px rgba(var(--primary-color-rgb-2), 0.2);
}

.prompt-type-card img {
    width: 100%;
    padding: 3px;
    border-radius: 9px;
}

.device-preview {
    background-color: #f7f7f7;
    border-radius: 12px;
    min-height: 500px;
    position: relative;
}

.device-frame {
    margin: 0 auto;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    position: relative;
    border: 6px solid #515151;
}

.device-frame.mobile,
.amp-int_row .device-frame.mobile {
    max-width: 375px;
    height: 667px;
}

.device-frame.desktop {
    max-width: 100%;
    height: 500px;
}

.mobile-status-bar {
    height: 24px;
}

.device-header {
    background: #f8f9fa;
    padding: 10px 15px;
    border-bottom: 1px solid #dee2e6;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 50px;
}

.device-dots {
    display: flex;
    gap: 6px;
}

.device-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.device-dot.red {
    background: #ff5f56;
}

.device-dot.yellow {
    background: #ffbd2e;
}

.device-dot.green {
    background: #27c93f;
}

.device-content {
    /* background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); */
    background-color: #fff;
    height: calc(100% - 50px);
    position: relative;
    overflow: hidden;
}

#mobileContent.device-content {
    height: calc(100% - 74px);
}

.notification-prompt {
    position: absolute;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    padding: 15.75px;
    max-width: 400px;
    z-index: 2;
}

.notification-prompt.desktop-prompt {
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
    width: 90%;
    border-radius: 0 0 12px 12px;
}

.notification-prompt.mobile-prompt-top {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 22px);
    border-radius: 0 0 12px 12px;
    padding: 15.75px 10.5px;
}

.notification-prompt.mobile-prompt-center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 22px);
}

.notification-prompt.mobile-prompt-bottom {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 22px);
    border-radius: 12px 12px 0 0;
}

.device-toggle-btn {
    border: 2px solid #dee2e6;
    background: #fff;
    transition: all 0.2s;
}

.device-toggle-btn.active {
    border-color: var(--primary-color);
    background: var(--primary-color);
    color: #fff;
}

.subscribe-wall {
    width: 90%;
    max-width: 500px;
}

.subscribe-wall-icon {
    font-size: 48px;
    margin-bottom: 20px;
}

.subscribe-wall h3 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 10px;
}

.subscribe-wall p {
    font-size: 14px;
    color: #6c757d;
    margin-bottom: 20px;
}

#customPromptFieldsContainer .field-group {
    margin-bottom: 20px;
}

#customPromptFieldsContainer .form-control-color {
    height: 38px;
    width: 38px;
    --bs-border-radius: 50%;
}

.native-prompt-card {
    height: 132px;
    margin-left: 3.3rem;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px;
}

.native-prompt-card_site-name {
    max-width: 11rem;
}

.prompt-buttons button {
    transition: all 0.3s ease;
}

.prompt-buttons button:hover {
    opacity: 0.9;
}

/* 
=============================
Toast Message Style
=============================
*/
.toast-container {
    position: fixed;
    top: 16px;
    right: 16px;
    width: max-content;
    max-width: 100%;
    z-index: 1090;
    pointer-events: unset !important;
}

.inbDigital__toast {
    width: 100%;
    max-height: 80px;
    padding: 12px 14px;
    background-color: #ffffff;
    border-radius: 7px;
    display: flex;
    align-items: center;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
    border-left: 8px solid var(--color);
    color: var(--color);
    min-width: 250px;
}

.inbDigital__toast.toast__success {
    --color: #47D764;
}

.inbDigital__toast.toast__error {
    --color: #ff355b;
}

.inbDigital__toast.toast__info {
    --color: #2F86EB;
}

.inbDigital__toast.toast__warning {
    --color: #FFC021;
}

.inbDigital__toast:not(:last-child) {
    margin-bottom: 0.95rem;
}

.inbDigital__toast .close_btn {
    align-self: flex-start;
    background-color: transparent;
    font-size: 18px;
    color: #5b5b5b !important;
    line-height: 0;
    cursor: pointer;
    padding-top: 2px;
    font-weight: 500;
}

.inbDigital__toast_container-1,
.inbDigital__toast_container-2 {
    align-self: center;
}

.inbDigital__toast_container-1 {
    width: 35px;
}

.inbDigital__toast_container-2 {
    flex: 1;
}

.inbDigital__toast_container-2 p {
    margin: 0;
    text-transform: capitalize;
}

.inbDigital__toast_container-1 i {
    font-size: 35px;
}

.inbDigital__toast_container-2 p:first-child {
    font-size: 16px;
    font-weight: 600;
    color: #101020;
}

.inbDigital__toast_container-2 p:last-child {
    font-size: 12px;
    font-weight: 400;
    color: #656565;
}


/*
====================
Segmentation Page
====================
*/
#property-item {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    background: #f8f9fa;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 10px;
    border: 1px solid #e3e6f0;
}

.and {
    width: 100%;
    text-align: center;
    margin: -5px 0 5px 0;
}

#property,
#condition,
#value {
    flex: 1;
    min-width: 150px;
}

#remove {
    flex: 0 0 auto;
}

.select2-container {
    /* width: 100% !important; */
    display: block !important;
}

.select2-container--default .select2-selection--single .select2-search__field,
.select2-container--default .select2-selection--single {
    border: 1px solid #dedede;
    height: calc(2.25rem + 2px);
    font-weight: normal;
    font-size: 0.875rem;
    padding: 0.625rem 0.6875rem;
    background-color: #ffffff;
    border-radius: 2px;
    color: #000;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 7px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    font-size: .825rem;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--primary-color);
}

.select2-container--default .select2-selection--single,
.select2-container--default .select2-dropdown,
.select2-container--default .select2-selection--multiple {
    border-color: #dedede;
    background: #fff;
}

.select2-container--default .select2-selection--single .select2-search__field,
.select2-container--default .select2-dropdown .select2-search__field,
.select2-container--default .select2-selection--multiple .select2-search__field {
    border-color: #dedede;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #000;
    line-height: 16px;
}

.select2-container--default .select2-dropdown {
    font-size: 0.8125rem;
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: #dedede;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    color: #fff;
    border: 0;
    border-radius: 3px;
    padding: 6px;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;
    margin-top: 6px;
    display: inline-flex;
    justify-content: center;
    flex-wrap: wrap;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice .select2-selection__choice__remove {
    position: relative;
    color: rgba(255, 255, 255, 0.75);
    border-right: 1px solid rgba(255, 255, 255, 0.2);
}

/*
.select2-container--default .select2-selection--multiple .select2-selection__choice .select2-selection__choice__remove:hover {
    color: #fff;
    background-color: transparent;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice:nth-child(5n+1) {
    background: var(--primary-color);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice:nth-child(5n+2) {
    background: #00d25b;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice:nth-child(5n+3) {
    background: #8f5fe8;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice:nth-child(5n+4) {
    background: #fc424a;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice:nth-child(5n+5) {
    background: #ffab00;
}

*/

/* Base tag style */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    border: none;
    border-radius: 999px;
    padding: 6px 12px;
    margin-top: 6px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.2px;
    color: #fff;

    display: inline-flex;
    align-items: center;
    gap: 6px;

    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    transition: all 0.25s ease;
}

/* Hover effect */
.select2-selection__choice:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
}

/* Remove (X) icon styling */
.select2-selection__choice__remove {
    opacity: 0.8;
    margin-right: 4px;
    transition: 0.2s ease;
}

.select2-selection__choice__remove:hover {
    opacity: 1;
    transform: scale(1.1);
}

/* Selected items BG colors */

/* 1 */
.select2-container--default .select2-selection--multiple .select2-selection__choice:nth-child(5n+1) {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
}

/* 2 */
.select2-container--default .select2-selection--multiple .select2-selection__choice:nth-child(5n+2) {
    background: linear-gradient(135deg, #06b6d4, #3b82f6);
}

/* 3 */
.select2-container--default .select2-selection--multiple .select2-selection__choice:nth-child(5n+3) {
    background: linear-gradient(135deg, #f43f5e, #fb7185);
}

/* 4 */
.select2-container--default .select2-selection--multiple .select2-selection__choice:nth-child(5n+4) {
    background: linear-gradient(135deg, #f59e0b, #f97316);
}

/* 5 */
.select2-container--default .select2-selection--multiple .select2-selection__choice:nth-child(5n+5) {
    background: linear-gradient(135deg, #10b981, #059669);
}

/* 6 */
.select2-container--default .select2-selection--multiple .select2-selection__choice:nth-child(10n+6) {
    background: linear-gradient(135deg, #ec4899, #be185d);
}

/* 7 */
.select2-container--default .select2-selection--multiple .select2-selection__choice:nth-child(10n+7) {
    background: linear-gradient(135deg, #14b8a6, #0f766e);
}

/* 8 */
.select2-container--default .select2-selection--multiple .select2-selection__choice:nth-child(10n+8) {
    background: linear-gradient(135deg, #8b5cf6, #4c1d95);
}

/* 9 */
.select2-container--default .select2-selection--multiple .select2-selection__choice:nth-child(10n+9) {
    background: linear-gradient(135deg, #f97316, #c2410c);
}

/* 10 */
.select2-container--default .select2-selection--multiple .select2-selection__choice:nth-child(10n+10) {
    background: linear-gradient(135deg, #22d3ee, #0e7490);
}


/* Estimate Card Style in segmentation page */
.estimate-card {
    /* border: none;
    border-radius: 18px;
    color: #fff;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #4e73df, #1cc88a); */
    background: linear-gradient(135deg, var(--main-color), var(--second-color-3));
}

.estimate-card::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 200px;
    height: 200px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
}

.estimate-result-box {
    font-size: 42px;
    letter-spacing: 1px;
    /* font-weight: 700;
    margin: 15px 0; */
    min-height: 60px;
}

/* .estimate-subtext {
    font-size: 14px;
    opacity: 0.9;
} */

/* .btn-estimate {
    font-size: 1rem;
    font-weight: 600;
    background: #fff;
    color: var(--main-color);
    border-radius: 50px;
    transition: all 0.3s ease;
} */

.btn-estimate:hover {
    /* color: var(--main-color);
    background: #f8f9fc; */
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

/* .estimate-icon {
    font-size: 28px;
    margin-bottom: 10px;
    opacity: 0.9;
} */



/*
=====================================
Integration Page [ AMP ]
=====================================
*/
/* pre code { */
/* white-space: pre-wrap; */
/* Wrap lines */
/* word-break: break-word; */
/* Break long words if needed */
/* overflow-wrap: anywhere; */
/* Ensure long strings wrap */
/* } */

.amp-int_row .skeleton-line {
    height: 10px;
    background: linear-gradient(90deg, #eee 25%, #ddd 50%, #eee 75%);
    background-size: 200% 100%;
    border-radius: 4px;
    /* animation: shimmer 1.2s infinite; */
}

@keyframes shimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* .amp-int_row .device-content {
    background: #ffffff;
    min-height: 400px;
} */
/* Related Card */
.amp-int_row .related-card {
    background: #ffffff;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* Related Card Image Skeleton */
.amp-int_row .skeleton-image {
    width: 80px;
    height: 70px;
    border-radius: 6px;
    background: linear-gradient(90deg, #eee 25%, #ddd 50%, #eee 75%);
    background-size: 200% 100%;
    /* animation: shimmer 1.2s infinite; */
    flex-shrink: 0;
}

.amp-int_row #previewButton {
    font-weight: 600;
    font-size: 14px;
}


/* 
====================
Announcements
====================
*/
#announcementsOffcanvas {
    max-width: 300px;
    transition: transform 0.3s ease-in-out;
}

.announcements-offcanvas-header {
    background: var(--gradient-color);
    background: linear-gradient(to right, rgb(64 0 148 / 10%), rgb(181 0 209 / 10%));
}

.announcement-card {
    /* background-color: #fff;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 1.25rem;
    border: 1px solid rgba(64, 0, 148, 0.08); */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    border: 1px dashed rgba(64, 0, 148, 0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.announcement-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 16px rgba(156, 39, 176, 0.15);
}

/* .announcement-card-header {
    padding: 1.25rem 1.25rem 0.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.25rem;
} */

.announcement-card-header .icon-box {
    /* display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-right: 0.625rem;
    position: relative;
    font-weight: 600;
    font-size: 0.875rem; */
    width: 42px;
    height: 42px;
    background: #fdf0ff;
    flex-shrink: 0;
}

.announcement-card-header .icon-box img {
    width: 62%;
}

/* .announcement-title {
    color: var(--main-color);
    font-weight: 800;
    font-size: 0.9rem;
    margin-bottom: 0;
    line-height: 1.4;
}

.announcement-date {
    color: var(--gray-color);
    font-size: 0.7rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    opacity: 0.7;
} */

.announcement-image-wrapper {
    max-height: 180px;
    /* width: 100%;
    overflow: hidden;
    position: relative;
    margin: 0.75rem 0; */
}

/* .announcement-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 8px;
}

.announcement-body {
    padding: 0 1.25rem 1rem;
} */

.announcement-content {
    /* overflow: hidden;
    color: var(--gray-color); */
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    transition: all 0.3s ease;
}

.announcement-content * {
    font-size: 0.875rem;
}

.announcement-content *:last-child {
    margin: 0;
}

.announcement-content.expanded {
    -webkit-line-clamp: unset;
}

.read-more-wrapper {
    /* padding: 0 1.25rem 1rem; */
    border-top: 1px dashed rgba(64, 0, 148, 0.15);
    background-color: rgba(249, 218, 255, 0.2);
}

.read-more-btn {
    color: var(--second-color);
    /* text-decoration: none;
    font-weight: 700;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 5px; */
    padding: 0.8rem 1rem 1rem;
    transition: color 0.2s ease;
}

.read-more-btn:hover {
    color: var(--main-color);
}

.announcements-list-container {
    /* padding-bottom: 1.5rem;
    display: flex;
    flex-direction: column; */
    background-color: var(--body-bg-color, #f4f6f9);
    min-height: 100%;
}


/*
==============
Responsive
==============
*/
@media only screen and (max-width:1024px) {
    .top-bar .nav-toggle {
        display: block;
        font-size: 28px;
        margin: 10px;
        cursor: pointer;
        color: #5e00a4
    }

    body.navOpened .mobile-mask,
    body.navOpened .inb__nav {
        /* display: flex; */
        top: 0;
        left: 0;
        height: 100%;
    }

    .inb__nav {
        /* display: none; */
        left: -100%;
        transition: all 0.3s ease;
    }

    /* body.navOpened .inb__nav {
        position: absolute;
    } */

    .main,
    body.navOpened .mobile-mask {
        position: absolute;
        width: 100%
    }

    body.navOpened .mobile-mask {
        background: #000;
        opacity: .5;
        z-index: 25;
    }

    .main {
        left: 0
    }
}

@media (min-width: 769px) {
    ::-webkit-scrollbar {
        width: 8px;
        height: 10px;
    }

    .header_avatar_img img {
        width: 45px
    }

    .send-push-sidebar {
        width: 50%;
    }

    .native-prompt-card {
        width: 300px;
    }

    #campaign_search {
        width: 15rem;
    }

    .w-md-suto {
        width: auto;
    }
}

@media (max-width: 768px) {
    .btn-group {
        flex-wrap: wrap;
    }

    .main .content-area {
        padding: 15px 10px;
    }

    /* .stats-container {
        grid-template-columns: 1fr
    } */

    .inner-content-area {
        padding: 0 10px;
    }

    .fetch-field-wrapper input {
        width: calc(100% - 106px) !important
    }

    .fetch-label {
        background: var(--fetch-label-gradient-color-mobile)
    }

    .device-frame.mobile {
        height: 500px;
    }

    .device-frame.desktop {
        height: 300px;
    }

    .native-prompt-card {
        margin-left: 1rem;
        width: calc(96% - 1rem);
    }

    .native-prompt-card_site-name {
        max-width: 8rem;
    }

    .total-value {
        font-size: 2rem;
    }

    .settings-tab-list.settings-tab-list__int .list-group-flush>.list-group-item {
        border-width: 0 var(--bs-list-group-border-width) 0 0;
    }
}

@media (max-width: 480px) {
    .nav__top-item {
        max-height: calc(100% - 125px);
    }

    .nav__inner_top-item {
        max-height: 125px;
    }

    .nav__inner_middle-item {
        /*height: calc(100% - 125px);*/
        height: 100%;
        z-index: 1;
    }

    /* #announcementsOffcanvas {
        max-width: 300px;
    } */
}

@media (max-width: 599px) {
    ::-webkit-scrollbar {
        width: 3px;
        height: 3px;
    }
}