@font-face {
    font-family: "Open Sans";
    src: url(webfonts/OpenSans-Regular.ttf);
}

@font-face {
    font-family: "Open Sans";
    src: url(webfonts/OpenSans-SemiBold.ttf);
    font-weight: bold;
}

::-ms-reveal {
    display: none;
}

/*if needs to be resized*/
.g-recaptcha {
    /*transform:scale(1.03);*/
    /*transform-origin:0 0;*/
}

.back-arrow {
    height: 14px;
    width: 30px;
    overflow: hidden;
    position: relative;
    display: inline-block;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34.001' height='15.698' viewBox='0 0 34.001 15.698'%3E%3Cpath id='Union_2' data-name='Union 2' d='M-10736.854-1112.6l-6.46-6.455a1,1,0,0,1-.686-.947c0-.026,0-.052,0-.077s0-.051,0-.076a1,1,0,0,1,.294-.707l6.852-6.849a1,1,0,0,1,1.415,0,1,1,0,0,1,0,1.416l-5.3,5.293H-10711a1,1,0,0,1,1,1,1,1,0,0,1-1,1h-29.434l4.993,4.991a1,1,0,0,1,0,1.413,1,1,0,0,1-.709.294A.991.991,0,0,1-10736.854-1112.6Z' transform='translate(10744 1128.001)' fill='%230d3656' opacity='0.548'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    margin-right: var(--spacing-xs);
}

.narrow-form {
    max-width: 400px;
}

.form-group {
    margin: var(--spacing);
}

.form-group label {
    display: block;
}

.required:after {
    content: "*";
    color: var(--bs-danger);
}

.error {
    color: var(--bs-danger);
}

.success {
    color: var(--bs-success);
}

a {
    color: var(--link-color);
}

a:hover {
    color: var(--link-color);
}

table a {
    font-weight: bold;
    text-decoration: underline;
    /*text-decoration-style: dotted;*/
}

table li a {
    text-decoration: none;
}

h1 {
    font-size: 1.25rem;
}

h2 {
    font-size: 1.125rem;
}

h3 {
    font-size: 1rem;
}

h4 {
    font-size: 1rem;
}

.number-heading {
    font-size: 1.25rem;
}

.card-account-app-count {
    font-size: 0.75rem;
}

.card-account-my-business-app-icon-plus {
    font-size: 1rem;
    color: #fff;
}

.card-account-my-business-app-count {
    font-size: 0.65rem;
    color: #fff;
}

.input-fields-grid {
    display: grid;
    grid-template-columns:1fr 1fr;
    column-gap: 50px;
    justify-content: space-between;
    margin-bottom: var(--spacing-sm)
}

/**
 * Table Generic
 */

.table th,
.table th a {
    color: var(--color-faded);
}

.table.table-nested {
    vertical-align: middle;
    text-align: center;
}

.table.table-nested th {
    border: var(--border-2) !important;
}

.table.table-nested td {
    padding-left: 0.75rem !important;
    border: var(--border-2) !important;
}

/**
 * Table Data
 */

table.table-data {
    background: var(--panel-background);
    border-radius: var(--border-radius-layout) !important;
    border: var(--border-2) !important;
    margin-bottom: 0 !important;
    border-collapse: separate;
    border-spacing: 0;
}

table.table-data tr:first-child td:first-child,
table.table-data tr:first-child th:first-child {
    border-top-left-radius: var(--border-radius-layout);
}

table.table-data tr:first-child td:last-child,
table.table-data tr:first-child th:last-child {
    border-top-right-radius: var(--border-radius-layout);
}

table.table-data tr:last-child td:first-child,
table.table-data tr:last-child th:first-child {
    border-bottom-left-radius: var(--border-radius-layout);
}

table.table-data tr:last-child td:last-child,
table.table-data tr:last-child th:last-child {
    border-bottom-right-radius: var(--border-radius-layout);
}

table.table-data tbody tr {
    border-bottom: 1px solid var(--border-color-2) !important;
}

table.table-data tbody tr th {
    border-bottom: 1px solid var(--border-color-2) !important;
    font-size: var(--th-font-size);
    /*line-height: var(--th-line-height);*/
}

table.table-data tbody tr th a {
    font-weight: bold;
}

table.table-data tbody tr td {
    border-bottom: 1px solid var(--border-color-2) !important;
}

table.table-data tbody tr:last-child td {
    border-bottom: none !important;
}

/**
 * Table Details
 */

.table.details tr {
    border-top: var(--border-2);
}

.table.details tr:first-child, .dashboard-tr-empty + tr {
    border-top: none !important;
}

.table.details th {
    font-size: var(--th-font-size);
    line-height: var(--th-line-height);
    border-right: none !important;
}

.table.details tr th:first-child {
    padding-left: 1.5rem !important;
}

.table.details td {
    font-size: 0.875rem !important;
    border-right: none !important;
    /*padding-top: 0.687rem !important;*/
    /*padding-bottom: 0.75rem !important;*/
    /*padding-right: 1.5rem !important;*/
    /*padding-left: 1.5rem !important;*/
}

.table.details tr th:first-child,
.table.details tr td:first-child {
    padding-left: 1.5rem !important;
}

.table.details tr:first-child td:first-child,
.table.details tr:first-child th:first-child {
    border-top-left-radius: var(--border-radius-layout);
}

.table.details tr:first-child td:last-child,
.table.details tr:first-child th:last-child {
    border-top-right-radius: var(--border-radius-layout);
}

.table.details tr:last-child td:first-child,
.table.details tr:last-child th:first-child {
    border-bottom-left-radius: var(--border-radius-layout);
}

.table.details tr:last-child td:last-child,
.table.details tr:last-child th:last-child {
    border-bottom-right-radius: var(--border-radius-layout);
}

.table.details.middle td {
    vertical-align: middle;
}

.table.details.dashboard {
    margin-top: 0.75rem !important;
}

.table.details.dashboard tr th {
    padding-left: 0 !important;
}

.card.no-data {
    text-align: center;
    max-width: 450px;
    margin: auto;
    background: transparent;
    border: none;
}

.no-data-icon {
    position: relative;
    width: 180px;
    height: 180px;
    background: var(--island-bg);
    margin: var(--spacing) auto var(--spacing) auto;
    border-radius: 50%;
    box-shadow: inset 0 0 20px var(--border-color);
}

.no-data-icon i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    opacity: 30%;
    font-size: 5rem;
    font-weight: 300;
}

.card.no-data p {
    margin: var(--spacing-sm) 0;
}

.card.no-data-dashboard {
    background: transparent;
}

.no-data-dashboard p {
    margin: 0;
}

.no-data-icon-dashboard {
    font-size: 2rem;
    margin-right: 1rem;
    opacity: 30%;
}

table.table-hover tbody tr:hover th {
    --bs-table-accent-bg: #fff !important;
}

td {
    padding: 0.75rem 0.75rem !important;
    border: none;
}

td:first-child {
    padding-left: 1.5rem !important;
}

td:last-child {
    padding-right: 1.5rem !important;
}

th {
    padding: 0.75rem 0.75rem !important;
    border: none;
}

th:first-child {
    padding-left: 1.5rem !important;
}

th:last-child {
    padding-right: 1.5rem !important;
}

th i.fa-light.fa-circle-info {
    color: #D3D3D3;
}

tbody {
    border-top: none !important;
}

thead:after {

}

.full-width {
    width: 100%;
}

.pointer {
    cursor: pointer;
}

.loading {
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: var(--main-view-background);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.8;
}

.loading div {
    text-align: center;
}

td.width-sm > .select2.select2-container.select2-container--bootstrap {
    width: 300px !important;
}

.select2-container--bootstrap .select2-selection--single {
    /*line-height: 20px;    */
    border: 1px solid var(--border-color);
    padding: 0.75rem;
    height: 3rem !important;
    /*height: 34px !important;*/
}

.select2-container--bootstrap .select2-selection--multiple {
    padding: 0.35rem;
    border: 1px solid var(--border-color);
}

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

.statistics_form {
    display: none;
}

.btn .fa-light, .btn .fa-brands {
    margin-right: calc(var(--spacing-sm) / 2);
}

span.btn .fa-light, span.btn .fa-brands {
    margin-right: 0;
}

span.btn.password {
    line-height: 2.75rem;
}

.form-control.password-input {
    border-right: none !important;
    border-bottom-right-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

.form-control::file-selector-button {
    margin-left: -0.275rem;
}

.password-show {
    border-left: none;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    border-bottom-right-radius: 0.8rem !important;
    border-top-right-radius: 0.8rem !important;
}

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

.modal-content {
    background-color: var(--modal-content-bg);
}

.text-color-theme {

}

.text-brand-color {
    color: var(--color-brand);
}

.text-second-brand-color {
    color: var(--color-brand-2);
}

.text-color-theme a {

}

dd.dd-view {
    display: block;
    width: 100%;
    min-height: 2.7rem;
    padding: 0.8rem 1rem;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5;
    border: var(--border-2);
    background: var(--input-background);
    appearance: none;
    border-radius: calc(var(--border-radius-layout) / 2);
}

dl {
    margin: 0;
}

dt {
    font-size: 0.75rem;
    color: #778;
    margin-bottom: 0.3rem;
}

/**
 * Horizontal Nav
 */

.horizontal-nav {
    /*border-bottom: 1px solid var(--border-color);*/
    /*margin-left: calc(-1 * var(--spacing));*/
    /*margin-right: calc(-1 * var(--spacing));*/
    /*padding-left: var(--spacing);*/
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-lg) !important;
}

.horizontal-nav.second-level {
    margin-top: 0;
    margin-bottom: var(--spacing-sm) !important;
}

.horizontal-nav .nav-link {
    margin-bottom: -1px;
    padding: 0.25rem 0;
    margin-right: var(--spacing);
    color: var(--faded-link-color);
}

.horizontal-nav.second-level .nav-link {
    padding-top: 0;
}

.horizontal-nav .nav-link.active {
    border-bottom: 0.1875rem solid var(--color-brand);
    color: var(--link-color);
}

/**
 * Third Nav
 */

.third-nav-container h2 {
    font-size: 1.5rem;
}

@media (max-width: 950px) {
    .third-nav-container {
        display: flex;
        gap: var(--layout-margin);
        flex-direction: column;
    }

    .third-nav-container .third-nav-left nav {
        border-right: none;
    }

    .third-nav-container > div:nth-child(2) {
        flex-grow: 1;
    }

    .third-nav-container .third-nav-left nav .nav-link {
        border-bottom: 2px solid transparent;
        margin-bottom: -1px;
        padding-left: 0 !important;
        color: var(--faded-link-color);
    }

    .third-nav-container .third-nav-left nav .active {
        border-bottom: 2px solid var(--color-brand);
        color: var(--link-color);
    }

    .flex-column {
        flex-direction: row !important;
    }
}

@media (min-width: 951px) {
    .third-nav-container {
        display: flex;
        gap: var(--layout-margin);
    }

    .third-nav-container > .third-nav-left {
        flex: 0 0 var(--secondary-sidebar-width);
        /*background: #f5f5f5;*/
        /*border-right: 1px solid var(--border-color);*/
        /*margin: -1.5rem 0 -1.5rem -1.5rem;*/
        border-top-left-radius: var(--border-radius);
        border-bottom-left-radius: var(--border-radius);
        min-height: 30rem;
    }

    .third-nav-container > div:nth-child(2) {
        flex-grow: 1;
    }

    .third-nav-container .third-nav-left nav {
        border-right: 2px solid var(--color-brand);
    }

    .third-nav-container .third-nav-left nav .nav-link {
        color: var(--faded-link-color);
        padding-left: 0 !important;
        border-bottom: 2px solid transparent;
    }

    .third-nav-container .third-nav-left nav .active {
        border-bottom: 2px solid var(--color-brand);
        color: var(--link-color);
    }

}

.third-nav-container .third-nav-main {

}

.third-nav-main h3 {
    margin-bottom: var(--spacing-sm);
}

/**
* Nav tabs
 */
.nav-tabs {
    border-bottom: none;
    margin-bottom: var(--spacing-sm);
}

.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
    color: #fff;
    background-color: var(--color-brand);
}

.nav-tabs .nav-link {
    color: #9aa1aa;
    padding: 0.2rem 0.75rem;
    border-radius: var(--border-radius-sm);
    border: none;
}

/**
 * Other
 */

.navbar-brand {
    padding: 0 2rem;
}

.logo {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 9rem;
}

.actions {
    display: none;
}

.btn {
    min-width: 4rem;
    border-radius: var(--border-radius-sm);
}

.btn-group {
    margin-right: calc(var(--spacing) / 2);
}

.btn-group:last-child {
    margin-right: 0;
}

.btn-group-spacing .btn, .btn-group-no-spacing .btn {
    margin-right: calc(var(--spacing) / 2);
    border-radius: var(--border-radius-sm) !important;
}

.btn-group-spacing .btn:last-child, .btn-group-no-spacing .btn:last-child {
    margin-right: 0;
}

.btn-group-spacing {
    margin-right: var(--spacing);
}

.btn-group-filters .btn, .btn-attach-files, .btn-group-attach-files .btn-attach-files:hover {
    border: var(--border-2);
    padding-left: var(--spacing-sm);
    padding-right: var(--spacing-sm);
    min-width: 0;
    background-color: var(--input-background);
}

.btn-group-filters .btn i, .btn-group-attach-files .btn-attach-files i {
    margin-right: 0;
    color: var(--nav-color-active);
}

.btn-group-filters .btn-filters-not-applied {
    color: var(--color-faded)
}

.btn-group-filters .btn:last-child {
    margin-left: 0 !important;
}

.btn-group-filters .btn.btn-filters-applied:not(:last-child), .btn-group-attach-files .btn-attach-files:not(:last-child) {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    margin-right: -1px;
}

.btn-group-filters a:last-child:not(:first-child), .btn-group-attach-files a:last-child:not(:first-child) {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.btn-group-attach-files {
    margin-bottom: 0 !important;
}

.btn-group-statistics-filters {
    margin-bottom: 0 !important;
}

.btn-group-statistics-filters .btn {
    margin-right: calc(var(--spacing) / 3);
    margin-bottom: var(--spacing-xs);
    min-width: calc(166px - (var(--spacing) / 3));
}

.btn-group-statistics-filters .btn:nth-child(2n) {
    margin-right: 0 !important;
}

.btn-outline-brand {
    color: var(--color-brand) !important;
    border-color: var(--color-brand);
}

.btn-outline-brand:hover {
    color: var(--main-background) !important;
    background-color: var(--color-brand);
    border-color: var(--color-brand);
}

.btn-outline-brand:active:hover {
    color: var(--main-background) !important;
    background-color: var(--color-brand-dark-hover) !important;
    border-color: var(--color-brand);
}

.btn-brand {
    color: var(--main-background);
    background-color: var(--color-brand);
    border-color: var(--color-brand);
}

.btn-brand:hover {
    color: var(--main-background);
    background-color: var(--color-brand-hover);
    border-color: var(--color-brand-hover);
}

.btn-outline-cancel {
    color: var(--color-cancel);
    border-color: var(--color-cancel);
}

.btn-outline-cancel:hover {
    color: var(--main-background);
    background-color: var(--color-cancel);
    border-color: var(--color-cancel);
}

.btn-cancel {
    background-color: var(--color-cancel);
    border-color: var(--color-cancel);
}

.btn-cancel:hover {
    background-color: var(--color-cancel-hover);
    border-color: var(--color-cancel-hover);
}

.btn-outline-accent {
    color: var(--palette-color-3);
    border-color: var(--palette-color-3);
}

.btn-outline-accent:hover {
    color: var(--main-background);
    background-color: var(--palette-color-3);
    border-color: var(--palette-color-3);
}

.btn-accent {
    color: var(--main-background);
    background-color: var(--palette-color-3);
    border-color: var(--palette-color-3);
}

.btn-accent:hover {
    color: var(--main-background);
    background-color: var(--palette-color-3-hover);
    border-color: var(--palette-color-3-hover);
}

.action-button {
    font-size: 20px;
    border: none;
    display: inline-block;
    text-align: center;
    margin-top: 20px;
}

.btn-interested {
    font-size: 20px;
    border: none;
    display: inline-block;
}

.btn-minimal {
    min-width: 0;
    padding: 0;
}

.btn.w180 {
    width: 180px;
    min-width: 10rem;
}

.btn-minimal i.fa-light {
    margin: 0;
}

.text-accent {
    color: var(--palette-color-3);
}

.text-accent.contacts-card-use i {
    margin-right: 0.76rem;
    margin-bottom: 0.5rem;
}

.body-small .text-accent:last-child i {
    margin-bottom: 0;
}

.text-gray {
    color: #aaa;
}

.new-contact-card {
    margin-top: 0.4rem;
}

.contact.card {
    height: 100%;
}

.contact-reference {
    border-radius: var(--border-radius);
    line-height: 1.5;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.25rem 0.60rem;
    text-align: center;
    margin-right: 0.4rem;
    display: inline-block;
    width: auto;
    max-width: 100%;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
}

.contact-reference.contact-reference-business, .contact-reference.contact-reference-invoice, .contact-reference.contact-reference-price-updates, .contact-reference.contact-reference-general {
    color: var(--palette-font-color-1);
    background-color: var(--palette-color-2);
}

.contact-reference.contact-reference-technical, .contact-reference.contact-reference-daily-report, .contact-reference.contact-reference-balance-alert, .contact-reference.contact-reference-api-issues {
    color: var(--palette-font-color-1);
    background-color: var(--palette-color-4);
}

.contact-reference.contact-reference-monthly-report {
    color: var(--palette-font-color-1);
    background-color: var(--palette-color-12);
}

.status, .contact-list, .audience-import-type, .campaign-import-type {
    border-radius: var(--border-radius);
    line-height: 1.5;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.25rem 0.60rem;
    text-align: center;
    white-space: nowrap;
}

.contact-list {
    color: var(--bs-info);
    background-color: var(--palette-color-2);
}

.contact-list.contact-lists-inline {
    line-height: 2.5;
}

.audience-import-type.type-contacts {
    color: var(--palette-font-color-1);
    background-color: var(--palette-color-6);
}

.audience-import-type.type-blacklist {
    color: var(--palette-font-color-1);
    background-color: var(--bs-black);
}

.campaign-import-type.type-blocklist {
    color: var(--palette-font-color-1);
    background-color: var(--bs-black);
}

.micro-status {
    display: inline-block;
    border-radius: var(--border-radius) !important;
    line-height: 0 !important;
    font-size: 0 !important;
    padding: 0.5rem !important;
    cursor: pointer;
    margin-right: 0.25rem;
}

.status.status-active, .status.status-published, .status.status-public, .status.status-paid, .status.status-completed, .status.status-delivered,
.status.status-online, .status.status-ok, .status.status-approved, .status.status-done, .status.status-success, .status.status-finished, .status.status-activated {
    color: var(--palette-font-color-1);
    background-color: var(--palette-color-6);
}

.status.status-idle {
    color: var(--palette-font-color-1);
    background-color: var(--palette-color-7);
}

.status.status-blocked, .status.status-critical, .status.status-fraud, .status.status-failed, .status.status-undelivered,
.status.status-server_inactive, .status.status-rejected, .status.status-in_progress_canceled, .status.status-failure, .status.status-failed_verification,
.status.status-expired, .status.status-insufficient_balance, .status.status-destination_invalid, .status.status-destination_not_allowed, .status.status-routing_error,
.status.status-bounced_hard, .status.status-complaint, .status.status-rendering_failure, .status.status-not_delivered {
    color: var(--palette-font-color-1);
    background-color: var(--bs-danger);
}

.status.status-in_progress_canceled {
    color: var(--palette-font-color-1);
    background-color: #dc3545;
}

.status.status-bounced_soft {
    color: var(--palette-font-color-1);
    background-color: var(--palette-color-15);
}

.status.status-upcoming, .status.status-inactive, .status.status-unpublished, .status.status-deactivated, .status.status-unknown {
    color: var(--palette-font-color-1);
    background-color: var(--palette-color-8);
}

.status.status-issued, .status.status-private, .status.status-under_review, .status.status-deleted, .status.status-draft,
.status.status-not_connected, .status.status-personalized, .status.status-sent {
    color: var(--palette-font-color-1);
    background-color: var(--palette-color-3);
}

.status.status-pending_approval, .status.status-info, .status.status-initializing, .status.status-seen, .status.status-read {
    color: var(--palette-font-color-1);
    background-color: var(--bs-info);
}

.status.status-in_design, .status.status-user_blocked, .status.status-not_viber_user, .status.status-no_suitable_device,
.status.status-not_rcs_user{
    color: var(--palette-font-color-1);
    background-color: #0AB3D6;
}

.status.status-warning, .status.status-pending, .status.status-in_progress, .status.status-pending_setup, .status.status-pending_verification,
.status.status-fallback_pending, .status.status-accepted {
    color: var(--palette-font-color-1);
    background-color: var(--palette-color-14);
}

.status.status-error, .status.status-scheduled, .status.status-limited, .status.status-delayed {
    color: var(--palette-font-color-1);
    background-color: var(--bs-warning);
}

.status.status-archived {
    color: var(--palette-font-color-1);
    background-color: var(--bs-yellow);
}

.status.status-canceled {
    color: var(--palette-font-color-1);
    background-color: #777;
}

.no-results {
    padding: var(--spacing-sm);
    text-align: center;
    border: 1px solid var(--border-color-2);
}

.card .no-results {
    border: none;
}

.no-space {
    font-size: 0;
}

/** remove white space from menu bars that have modals **/
.no-space-method-2 > :not(:first-child) {
    margin-left: -0.25rem;
}

.breadcrumbs {
    font-size: 0.73rem;
}

.breadcrumb {

}

hr {
    margin: 0.2rem 0 !important;
}

hr.strong {
    opacity: 100;
}

hr.small {
    width: 15%;
}

.sub-title {
    /*font-weight: 400;*/
    /*display: inline-block;*/
    margin-bottom: var(--spacing);
    font-size: 1rem;
}

.account-nav-console {
    font-size: 1.25rem;
    margin-left: var(--spacing-sm);
}

.breadcrumb a {
    text-decoration: none;
    color: var(--bs-gray-600);
}

.breadcrumb li:last-child a {
    color: var(--color-brand);
}

.search {
    width: 8rem !important;
}

.search:last-child {
    width: 10rem !important;
}

.w-0 {
    width: 0;
}

.w-id {
    min-width: 5rem;
    width: 1%;
}

.icon {
    width: 5rem;
    text-align: center;
    font-size: 1rem;
}

td.icon {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    vertical-align: middle;
    font-weight: 400;
}

td.warning-icon {
    padding-right: 0px !important;
}

td.error {
    color: #c00 !important;
}

.material-icons {
    font-size: 17px;
    vertical-align: middle;
}

.help {
    background: transparent;
    font-size: 0.5rem;
    font-weight: bold;
    padding: 0.1rem 0.35rem;
    border: 1px solid #777;
    border-radius: 50%;
    color: #777;
    vertical-align: middle;
    cursor: pointer;
    margin-left: 0.5rem;
}

.offcanvas.offcanvas-end {
    width: 48rem;
}

.offcanvas.offcanvas-end.landing-pages-preview {
    width: 32rem;
}


.offcanvas.offcanvas-end.file-manager-preview {
    width: 32rem;
}

.offcanvas.offcanvas-end.form-styling {
    width: 32rem;
}

ul.pagination {
    margin-bottom: 0;
}

.page-list {
    text-align: center;
}

.page-list ul {
    margin: 0 auto;
}

.page-link {
    border: none !important;
    border-radius: 30px !important;
    background: none;
}

li.page-item {
    margin: 0 0.25rem;
}

.per-page {
    /*width: 10rem;*/
    border: none;
    background: transparent;
}


.list-group-item.d-flex.justify-content-between.align-items-start {
    background: transparent;
    color: var(--nav-color);
}

.form-narrow {
    max-width: 500px;
}

.form-narrow .panel div {
    margin-bottom: var(--spacing-sm);
}

.form-narrow .panel div:last-child {
    margin-bottom: 0;
}

.modal-padding {
    /*padding: 0.5rem 1rem;*/
    padding: 2rem;
}

.modal-body {
    padding: 1rem 0 1rem 0;
}

.modal-footer {
    padding: 0;
}

.btn-group > .btn:not(:last-child):not(.dropdown-toggle),
.btn-group > :not(.btn-check:first-child) + .btn,
.modal-footer .btn-group a,
.modal-footer .btn-group input {
    margin-left: calc(var(--spacing) / 2);
    border-radius: var(--border-radius-sm);
}

.modal-padding .modal-header {
    padding: 0 0 1rem;
    /*margin: 1rem 1rem 0;*/
    margin: 0;
}

.modal-footer .btn-group {
    margin: 0;
}

.modal-body.form div {
    margin-bottom: var(--spacing-sm);
}

.modal-body.form div:last-child {
    margin-bottom: 0;
}

.card.card-dashboard {
    border: var(--border-2);
    border-radius: var(--border-radius-layout);
}

.card.card-get-started {
    background: var(--bs-info);
    color: var(--color-font-get-started);
    border: none !important;
}

.card.card-get-started-greyed-accent {
    background: var(--palette-color-1);
    color: var(--color-font-get-started);
    max-width: 400px;
    border: none !important;
}

.text-info a {
    color: #0E47A1 !important;
}

.text-note {
    color: var(--bs-blue) !important;
}

/**
 * New card table design
 */

.card-header {
    border-bottom: none;
    /*padding: calc(var(--padding) / 2) var(--padding);*/
    padding: calc(var(--padding) * 0.75) var(--padding);
    /*padding: calc(var(--padding) * 1) var(--padding);*/
}

.card-header-xl {
    padding: var(--padding);
    font-size: 1.25rem;
}

.card-header-inner {
    font-size: var(--card-font-size);
    /*font-weight: 600;*/
}

.card-header-inner a {
    font-size: 0.875rem;
}

.card-header-inner a i {

}

.card-header-inner i {
    font-size: 1.0625rem;
}

/**
 * ---------------------
 */
.message-category {
    margin-right: 1.25rem;
    margin-bottom: var(--spacing-sm); /* like .section-sm but last child keeps the margin */
}

.selected-category {
    color: var(--new-colors-3);
}

.channel-template-editor-category-dropdown-list {
    width: 350px;
}

.channel-template-editor-category-dropdown-list .dropdown-item {
    padding: 10px 15px;
}

.channel-template-editor-category-dropdown-list .dropdown-item:hover {
    background-color: transparent;
}

.channel-template-editor-category-frame {
    width: 90px;
    height: 90px;
    border: 1px solid var(--border-color);
    border-radius: 0px 19px 19px 19px;
    opacity: 1;
    position: relative;
}

.channel-template-editor-category-frame.selected-category {
    border-color: #7764E4;
}

.channel-template-editor-category-icon {
    font-size: 80px;
    color: var(--nav-color-active);
    background: #F6F7F8;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    cursor: pointer;
}

.channel-template-editor-category-icon.viber {
    font-size: 64px;
}

.channel-template-editor-category-icon.selected-category {
    background-color: rgba(119, 100, 228, 0.1);
    color: #7764E4;
}

.icon-contact-options {
    padding: 0.5rem;
}

.channel-template-editor-category-dropdown-options {
    position: absolute;
    margin: 0.5rem 0 1rem -1.5rem;
    cursor: pointer;
}

.channel-template-editor-toolbar {
    padding: calc(var(--spacing-xs) / 2) var(--spacing-sm);
    background-color: var(--card-light-grey);
    border: 1px solid var(--border-color);
    border-top: none;
    border-bottom-right-radius: 0.3rem;
    border-bottom-left-radius: 0.3rem;
}

.channel-template-editor-toolbar-upper {
    padding: calc(var(--spacing-xs) / 2) var(--spacing-sm);
    background-color: var(--card-light-grey);
    border: 1px solid var(--border-color);
    border-bottom: none;
    border-top-right-radius: 0.3rem;
    border-top-left-radius: 0.3rem;
}

.channel-template-editor-toolbar-icon {
    font-size: 1rem;
    margin-right: calc(var(--spacing-sm) / 2);
    margin-left: calc(var(--spacing-sm) / 2);
}

.channel-template-editor-toolbar-icon:first-child {
    margin-left: 0;
}

.emoji-picker-container {
    position: absolute;
    z-index: 1000;
    background: #fff;
    border: 1px solid #ddd;
    padding: 0.25rem;
    border-radius: 5px;
}

.emoji-search {
    margin-bottom: 0.25rem;
}

.emoji-picker {
    display: flex;
    flex-wrap: wrap;
    align-content: start;
    position: relative;
    background: var(--bs-body-bg);
    border: 1px solid #ddd;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    width: 300px;
    height: 200px;
    overflow-y: scroll;
    padding: 5px;
    z-index: 1000;
}

@media (max-width: 1130px) and (min-width: 1025px) {
    .emoji-picker-container {
        right: 12px;
    }
}

@media (max-width: 846px) {
    .emoji-picker-container {
        right: 12px;
    }
}

.emoji {
    width: 32px;
    height: 32px;
    margin: 2px;
    cursor: pointer;
}

.emoji-preview {
    width: 24px;
    height: 24px;
    margin: 1px;
}

.emoji img {
    width: 100%;
    height: 100%;
    display: block;
}

.channel-template-editor-max-width {
    max-width: 520px;
}

/**
 * OC File Manager Tiles
 */
.files-section {
    max-height: 1150px;
    overflow: auto;
}

.file-tile {
    background-color: var(--bs-body-bg);
    width: calc(33.3% - var(--spacing));
    border-radius: var(--border-radius);
    border-color: var(--border-color);
    padding: var(--spacing-xs);
    margin-bottom: var(--spacing-sm);
    margin-right: var(--spacing-sm);
    display: flex;
    flex-direction: column;
    position: relative;
    box-sizing: border-box;
}

.file-image {
    display: flex;
    height: calc(80px - 2 * var(--spacing-xs));
    justify-content: center;
    align-items: center;
}

.large {
    font-size: 2.5rem;
}

.fm-tile-image {
    width: 100%;
    height: calc(100px - 2 * var(--spacing-xs));
    overflow: hidden;
    border-radius: calc(var(--border-radius) - var(--spacing-xs));
}

.fm-tile-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fm-file-tile-info {
    text-align: center;
    color: #fff;
    position: absolute;
    bottom: var(--spacing-xs);
    left: var(--spacing-xs);
    right: var(--spacing-xs);
    border-radius: 0 0 calc(var(--border-radius) - var(--spacing-xs)) calc(var(--border-radius) - var(--spacing-xs));
    z-index: 2;
}

.fm-file-tile-info.default {
    background: rgba(0, 0, 0, 0.5);
}

/* Orange background for files > 500 KB and < 1 MB */
.fm-file-tile-info.orange {
    background-color: rgba(255, 165, 0, 0.5);
}

/* Red background for files > 1 MB */
.fm-file-tile-info.red {
    background-color: rgba(255, 0, 0, 0.5);
}

/* Style for the file label within the info bar */
.fm-file-tile-label {
    flex-grow: 1;
    align-self: center;
    margin: 0;
    padding: 0 8px;
    font-size: 0.8em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .file-tile {
        width: calc(50% - var(--spacing));
    }
}

/*----------------------Upload File Button (Cloud)----------------*/
.upload-container {
    display: flex;
    align-items: center;
    margin-bottom: var(--spacing-sm);
}

.upload-container input[type="file"] {
    display: none;
}

.upload-container label {
    display: flex;
    align-items: center;
    cursor: pointer;
    border: 1px solid var(--border-color);
    padding: 5px 10px;
    border-radius: 5px;
    background-color: var(--input-background);
    width: 180px; /* Adjusted width for consistency */
    /*margin-left: 1rem;*/
}

.upload-container .fa-cloud-arrow-up {
    font-size: 1.25rem;
    margin-right: 1rem;
}

.upload-container .fa-cloud-arrow-up.empty {
    color: var(--color-faded);
}

.upload-container .fa-cloud-arrow-up.filled {
    color: var(--palette-color-6);
}

.label-text {
    flex-grow: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.label-with-file {
    color: var(--palette-color-6); /* Optional: Change text color when a file is uploaded */
}

.file-name {
    margin-left: 10px;
}

/*-----------------------RCS------------------------------*/

/* Logo styling */
.rcs-mobile-preview-header-logo {
    width: 40px;
    height: 40px;
    margin: 0 8px 0 15px;
}

/* Adjusting logo inside the message container */
.mobile-preview-screen .mobile-message-container .rcs-mobile-preview-channel-logo {
    width: 24px;
    height: 24px;
    margin-right: var(--spacing-xs);
    margin-top: var(--spacing-sm);
}

/* RCS Mobile Message Container */
.mobile-message-container.rcs-full-width {
    padding: var(--padding-xxs) !important;
}

/* RCS Interest Form */
.color-picker-container {
    margin-bottom: var(--spacing-sm);
}

.color-input-group {
    display: flex;
    align-items: center;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 5px 8px;
    background-color: white;
}

.hex-input {
    /* Text field styling */
    flex-grow: 1;
    border: none;
    outline: none;
    font-size: 16px;
    padding: 0;
    height: 30px;
}

.color-swatch {
    /* The color circle */
    width: 25px;
    height: 25px;
    border-radius: 50%;
    border: 1px solid #aaa;
    margin-left: 10px;
    flex-shrink: 0;
}

/* -------------------------Carousel Configuration-------------------- */

/* Carousel wrapper */
.carousel {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    cursor: grab;
}

/* Hide scrollbar for Webkit browsers (Chrome, Safari, etc.) */
.carousel::-webkit-scrollbar {
    display: none;
}

/* Carousel dragging styles */
.carousel.is-dragging {
    cursor: grabbing;
}

.carousel[id="richCardCarousel"] {
    background-color: var(--mobile-preview-bg);
}

/* -------------------------Rich Card Configuration & Viber Carousel-------------------- */

.viber-carousel, .whatsapp-carousel {
    padding-left: 1.8rem; /* padding to align carousel with the text message from the left */
    padding-right: var(--padding-xs); /* mobile-preview-container padding */
    margin-right: calc(-5 * 0.3rem); /* margin to avoid container's right padding */
    margin-top: 0.4rem;
}

.multiple-rich-card-preview, .viber-carousel-preview, .whatsapp-carousel-preview {
    background-color: var(--mobile-preview-bg);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid #ddd;
    border-radius: var(--border-radius);
    pointer-events: auto;
    overflow: hidden;
}

.multiple-rich-card-preview.rcs {
    background-color: var(--bs-body-bg);
}

.whatsapp-carousel-preview {
    min-width: 200px;
}

.viber-carousel-preview {
    border-radius: 0.3rem;
    min-width: 165px;
    flex: 1 1 165px;
}

/* Rich card container */
.rich-card-preview {
    display: flex;
    overflow: hidden;
    justify-content: space-between;
    border: 1px solid #ddd;
    border-radius: var(--border-radius);
    background-color: var(--bs-body-bg);
    max-width: 400px;
    scrollbar-width: none;
}

/* Card dragging */
.multiple-rich-card-preview.is-dragging, .viber-carousel-preview.is-dragging, .whatsapp-carousel-preview.is-dragging {
    cursor: grabbing;
}

/* Margin between cards in the carousel */
.multiple-rich-card-preview:not(:first-child) {
    margin-left: var(--spacing-xs);
}

.viber-carousel-preview:not(:first-child) {
    margin-left: var(--spacing-xs);
}

.whatsapp-carousel-preview:not(:first-child) {
    margin-left: var(--spacing-xs);
}

.remove-icon {
    position: absolute;
    right: 0.3rem;
    cursor: pointer;
    color: var(--bs-body-bg);
}

.remove-icon:hover {
    color: var(--palette-color-negative)
}

.add-icon {
    margin-left: 0.5rem;
}

.add-icon:hover {
    color: var(--palette-color-positive)
}

/* -------------------------Suggestions Configuration------------------ */

.text-suggestions-container {
    padding-top: var(--padding-sm);
    pointer-events: auto;
}

.text-suggestions-carousel {
    margin-left: calc(-0.8 * 0.29rem);
    margin-right: calc(-5 * 0.29rem); /* margin to avoid container's right padding */
}

.text-suggestions-carousel pre {
    font-family: inherit;
}

.text-suggestions-carousel-inner-container {
    display: flex;
    margin-left: auto;
}

/* Suggestion button styles */
.suggestion-btn {
    border-radius: calc(var(--border-radius-lg) * 2);
    border: 1px solid #ccc;
    font-size: 14px;
    white-space: nowrap;
    /* white-space: pre-wrap; changes the preview */
    cursor: grab;
    pointer-events: none;
    padding: 5px 10px;
}

/* Suggestion preview with margin between buttons */
.suggestion-preview {
    margin: 0 var(--padding-xxs);
}

/* Rich card image container */

.rich-card-image, .viber-carousel-image {
    white-space: normal !important;
}

.rich-card-image img, .viber-carousel-image img {
    object-fit: cover;
    width: 100%;
    user-select: none;
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */
    pointer-events: none;
}

.viber-carousel-image img {
    height: 140px;
}

/* Rich card content styles */
.rich-card-content, .viber-carousel-content, .whatsapp-carousel-content {
    padding: 0.5rem 0.5rem 0.5rem 0.5rem;
    flex-grow: 1;
    user-select: none;
    pointer-events: none;
}

.rich-card-content.rcs {
    padding:0.8rem;
}

.rich-card-horizontal .rich-card-image img {
    height: 100%;
}

.rich-card-horizontal .rich-card-image {
    width: 30%;
}

.rich-card-horizontal .rich-card-content {
    width: 70%;
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: normal; /* Ensures normal wrapping */
}

.rich-card-content h4 {
    margin-bottom: var(--spacing-sm);
    font-size: 0.745rem;
    font-weight: bold;
    white-space: pre-wrap; /* Allows spaces and line breaks */
}

.viber-carousel-content h4 {
    margin-bottom: var(--spacing-xs);
    font-size: 0.8rem;
    white-space: pre-wrap; /* Allows spaces and line breaks */
}

.rich-card-content p {
    margin: 0;
    color: #555;
    font-size: 0.684rem;
    white-space: pre-wrap; /* Allows spaces and line breaks */
}

.multiple-rich-card-preview .rich-card-content p {
    margin: 0 0.5rem 0.3rem 0;
}

.rich-card-content .p-strong{
    font-weight: bold;
    margin: 0 0 0.3rem 0;
}

/* Suggestions styling inside the rich card */
.rich-card-suggestions {
    margin-top: var(--spacing-xs);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* Single suggestion pushed to bottom */
.rich-card-suggestions.one-suggestion {
    justify-content: flex-end;
    margin-top: auto;
}

/* Individual suggestion button styling */
.suggestion-btn-rich-card {
    display: flex;
    font-size: 0.745rem;
    /*font-weight: bold;*/
    /*color: #d32f2f; !* Customize the color *!*/
    padding: var(--padding-xs) 0;
    /*border-top: 1px solid #ddd;*/
    text-decoration: none;
    margin-right: var(--spacing-xs);
    justify-content: flex-start;
    align-items: center;
}

/* Remove border for the first suggestion */
.rich-card-suggestions .suggestion-preview {
    background-color: var(--mobile-preview-bg);
    border:none;
    border-radius: 0.2rem;
    margin:0.05rem 0;
}

.rich-card-suggestions .suggestion-preview:first-child {
    border-radius: 1rem 1rem 0.2rem 0.2rem;
}

.rich-card-suggestions .suggestion-preview:last-child {
    border-radius: 0.2rem 0.2rem 1rem 1rem;
}

.rich-card-suggestions .suggestion-preview:only-child {
    border-radius: 1rem;
}

.description-text-clamped {
    line-height: 1.4em;
    max-height: calc(1.4em * 6);
    overflow: hidden;
    display: block;
    margin: 0;
    padding: 0 1rem 0 0;
    position: relative;
}

.text-trimmer-container {
    position: relative;
}

.more-text-indicator {
    display: inline;
    font-weight: normal;
    line-height:1.4em;
    font-size: 0.7rem;
    position: absolute;
    bottom:0;
    right:0;
    white-space: nowrap;
    padding-left: 5px;
    color:grey;
    letter-spacing: 0.04rem;
}

.hidden-by-default {
    display: none;
}

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Icon styling within suggestions */
.suggestion-btn-rich-card i {
    margin: 2px 12px;
    font-size: 15px; /* Icon size */
    /*color: #d32f2f;*/
    padding:0.5rem;
    background-color: var(--bs-body-bg);
    border-radius: 1rem;
}

.suggestion-btn-rich-card .no-icon {
    background-color: transparent !important;
    font-size: 0 !important;
    margin: 12px 3px !important;
    padding: 0.3rem 0.4rem !important;
}

.suggestion-btn .text-suggestion-icon {
    margin-right: 8px;
}

/* Card orientation */
.rich-card-horizontal {
    display: flex;
    flex-direction: row;
}

.rich-card-vertical {
    display: flex;
    flex-direction: column;
}

/* Image alignment classes */
.rich-card-align-left {
    display: flex;
    flex-direction: row;
}

.rich-card-align-right {
    display: flex;
    flex-direction: row-reverse;
}

.rich-card-height-horizontal {
    height: 160px;
}

/* Image height classes */
.rich-card-height-small {
    height: 84px;
}

.rich-card-height-medium {
    height: 140px;
}

.rich-card-height-tall {
    height: 198px;
}

/* Card Width Classes */
.rich-card-width-small {
    min-width: 175px;
    flex: 1 1 175px;
}

.rich-card-width-medium {
    min-width: 225px;
    flex: 1 1 225px;
}

/*--------------WhatsApp Preview------------------*/
/* Background */
.mobile-preview-screen .mobile-message-container .mobile-message.whatsapp {
    border-radius:10px !important;
}

/* Text padding */
.mobile-preview-screen .mobile-message-container .mobile-message.whatsapp .padded-content {
    padding: 8px; /* Apply padding to the text and button */
}

.mobile-preview-screen .mobile-message-container .mobile-message.whatsapp .padded-content.footer {
    font-size: 0.6rem;
    color: #737373;
}

/* Buttons style */
.mobile-preview-screen .mobile-message-container .custom-whatsapp-button {
    border-radius: 0;
    font-size: 14px;
    white-space: nowrap;
    white-space: pre-wrap;
    cursor: grab;
    pointer-events: none;
    border-top: 2px solid var(--whatsapp-brand-color-bg);
    padding: 10px;
    text-align: center;
    width: 100%;
    color: var(--whatsapp-brand-color-middle);
    display:inline-block;
}

/* Icon margin */
.custom-whatsapp-button .text-whatsapp-icon {
    margin-right: 8px;
}

/*--------------File Preview------------------*/

/* File preview container */
.file-preview-container {
    border: 1px solid #ddd;
    border-radius: var(--border-radius);
    padding: var(--padding-xs) var(--padding-xs);
    width: fit-content;
    background: var(--main-background);
}

/* File icon */
.file-preview-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* File icon image */
.file-icon {
    font-size: 2rem;
}

/* File name and size */
.file-preview-content .file-name {
    font-size: 16px;
    font-weight: bold;
}

.file-preview-content .file-size {
    font-size: 14px;
}

/*
--------------------------------------------------------
 */

.bg-greyed-accent {
    background: var(--palette-color-1);
}

.scheduling-data-inputs-max-width {
    max-width: 595px;
}

.scheduling-data-inputs-max-width .radio-selections-container {
    display: flex;
    justify-content: space-between;
    max-width: 400px;
}

.scheduling-data-inputs-max-width .radio-selections-per-channel-container {
    display: flex;
    justify-content: space-between;
    max-width: 332px;
}

.create-from-template-max-width {
    max-width: 520px;
}

.template-editor-textarea.toolbar-at-bottom, .template-editor-text.toolbar-at-bottom {
    border-bottom: none !important;
    border-bottom-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.template-editor-textarea.double-toolbar, .template-editor-text.double-toolbar {
    border-bottom: none !important;
    border-radius: 0 !important;
}

.template-editor-textarea:focus, .template-editor-text:focus {
    border: 1px solid var(--border-color);
    box-shadow: none !important;
    background-color: #ffffff;
}

.columns-card .columns-card-row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.stucked-buttons .btn:first-child {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
}

.stucked-buttons .btn:last-child {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
}

.columns-card .columns-card-select-item-section {
    padding-left: 0;
    padding-right: 0;
    border-right: var(--border);
}

.columns-card .columns-card-select-item-section .item {
    padding: var(--padding) calc(var(--padding) / 2) calc(var(--padding) / 1.5) calc(var(--padding) / 2);
    border-bottom: var(--border);
    text-align: center;
    cursor: pointer;
}

.columns-card .columns-card-select-item-section .item:last-child:nth-child(n+7) {
    border-bottom: none;
    border-bottom-left-radius: var(--border-radius);
}

.columns-card .columns-card-select-item-section .item.selected {
    background-color: var(--bs-card-bg);
    margin-right: -1px;
    cursor: default;
}

.columns-card .columns-card-select-item-section .item.selected:first-child {
    border-top-left-radius: var(--border-radius);
}

@media (max-width: 1199px) {
    .columns-card .columns-card-select-item-section {
        display: flex;
        border-right: none !important;
        border-bottom: var(--border);
    }

    .columns-card .columns-card-select-item-section .item {
        flex: 1;
        flex-direction: column;
        border-bottom: none !important;
        border-right: var(--border);
    }

    .columns-card .columns-card-select-item-section .item:last-child {
        border-right: none;
    }

    .columns-card .columns-card-select-item-section .item.selected {
        margin-right: 0;
        margin-bottom: -1px;
    }

    .columns-card .columns-card-select-item-section .item.selected:first-child {
        border-top-left-radius: var(--border-radius);
    }

    .columns-card .columns-card-select-item-section .item.selected:last-child {
        border-top-right-radius: var(--border-radius);
        border-bottom-left-radius: 0;
    }
}

.columns-card .columns-card-section {
    padding: var(--padding);
}

.columns-card .columns-card-section.data-inputs {
    border-radius: var(--border-radius) 0 0 var(--border-radius);
}

.columns-card .columns-card-section.data-inputs .campaign-config-inner-card .icon {
    font-size: 4rem;
    color: #667;
    margin-bottom: 1rem;
}

.columns-card .columns-card-section.previews {
    border-left: 1px solid var(--border-color);
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
    background-color: var(--card-light-grey);
    overflow: auto;
}

@media (max-width: 1199px) {
    .columns-card .columns-card-section.previews {
        border: 0;
        border-radius: 0 0 var(--border-radius) var(--border-radius);
    }
}

.columns-card .columns-card-section .box-container {
    height: 100%;
}

.columns-card .columns-card-section .box-container .card.card-box {
    width: 260px;
    min-width: 260px;
    height: 270px;
    justify-content: center;
    align-items: center;
    font-size: 1.1rem;
    font-weight: bold;
    color: #667;
}

.columns-card .columns-card-section .box-container .card.card-box .help {
    margin-left: auto;
}

.columns-card .columns-card-section .box-container .card.card-box .estimated-contacts-container {
    height: 40px;
}

.estimated-contacts-container .estimated-contacts-text {
    font-size: 2rem;
    color: var(--color-brand-2);
}

.columns-card .columns-card-section.previews .card-box .box-icon {
    font-size: 5rem;
}

.columns-card .columns-card-section .card.campaign-config-inner-card {
    max-width: 750px;
    height: 325px;
    background-color: var(--card-light-grey) !important;
    padding: var(--padding);
    justify-content: center;
}

.columns-card .columns-card-section .card.campaign-config-inner-card.small {
    height: 100px;
}

.columns-card .columns-card-section .card.campaign-config-inner-card.message {
    align-items: center;
}

.columns-card .columns-card-section .card.campaign-config-inner-card.card-segmentation {
    min-width: 260px;
    align-items: center;
}

.columns-card .columns-card-section .card.campaign-config-inner-card.card-segmentation .segment-description {
    overflow: auto;
}

.columns-card .columns-card-section .card.campaign-config-inner-card.fallback-channel {
    height: auto;
    padding: 0;
    justify-content: space-between;
}

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

.cursor-grab:active {
    cursor: grabbing;
}

.card.campaign-config-inner-card.fallback-channel .fallback-channel-items .left-icons-title-container {
    display: flex !important;
    align-items: center;
    gap: var(--spacing) !important;
    min-width: 230px;
    border-right: var(--border-2);
    padding: var(--padding-sm);
}

.card.campaign-config-inner-card.fallback-channel .fallback-channel-items .validity-period-options-container {
    display: flex !important;
    padding: var(--padding-sm);
}

.card.campaign-config-inner-card.fallback-channel .fallback-channel-items .validity-period-options-container.email-channel {
    width: 100%;
    flex-wrap: wrap !important;
}

.card.campaign-config-inner-card.fallback-channel .fallback-channel-items .validity-period-options-container.email-channel .form-select {
    min-height: 48px !important;
}

@media (max-width: 565px) {
    .card.campaign-config-inner-card.fallback-channel .fallback-channel-items {
        flex-direction: column;
    }

    .card.campaign-config-inner-card.fallback-channel .fallback-channel-items .validity-period-options-container {
        flex: auto !important;
    }

    .card.campaign-config-inner-card.fallback-channel .fallback-channel-items .left-icons-title-container {
        border: none;
    }
}

.timeline {
    position: relative;
}

/* The actual timeline (the vertical ruler) */
.timeline::after {
    content: '';
    position: absolute;
    width: 2px;
    background-color: black;
    top: 36px;
    bottom: 33px;
    left: 40%;
}

.columns-card .columns-card-section.previews .scheduling-flow-item {
    width: 350px;
    flex-direction: row;
    font-size: 1rem;
    color: #667;
}

/* The circles on the timeline */
.columns-card .columns-card-section.previews .scheduling-flow-item::after {
    content: '';
    position: absolute;
    left: calc(40% - 6px);
    top: calc(50% - 6px);
    z-index: 1;
    width: 14px;
    height: 14px;
    background-color: inherit;
    border: 2px solid #F26522;
    border-radius: 50%;
}

/* The rhombuses on the timeline */
.columns-card .columns-card-section.previews .scheduling-flow-item:is(:first-child, :last-child)::after {
    border-radius: 0;
    transform: rotate(45deg);
}

.columns-card .columns-card-section.previews .scheduling-flow-item .flow-side {
    padding: 1rem;
}

.columns-card .columns-card-section.previews .scheduling-flow-item .flow-side.left {
    width: 40%;
    text-align: end;
}

.columns-card .columns-card-section.previews .scheduling-flow-item .flow-side.right {
    width: 60%;
    display: flex;
    align-items: center;
}

.card.campaign-config-inner-card .lists-container {
    height: 275px;
}

.lists-container .list-search-container {
    width: 100%;
}

.lists-container .list-search-container .lists-search {
    width: 100%;
    height: 43px;
    padding: 0.75rem;
    border: var(--border-2);
    border-bottom: none;
    border-radius: var(--border-radius-sm) var(--border-radius-sm) 0 0;
    background-color: var(--bg);
}

.lists-container .list-search-container .lists-search:focus-visible {
    outline: 0;
}

.lists-container .list-search-container .in-input-icon {
    float: right;
    position: relative;
    right: 0.5rem;
    bottom: 2rem;
    margin-bottom: -2rem;
}

.lists-container .lists-list {
    width: 100%;
    height: 200px;
    border: var(--border-2);
    border-radius: 0 0 var(--border-radius-sm) var(--border-radius-sm);
    background-color: var(--bg);
}

.lists-container .lists-list .custom-scrollbar {
    padding-left: 0;
    padding-right: 0;
    height: 195px;
}

.lists-container .lists-list li {
    cursor: pointer;
    list-style: none;
    padding: 6px 12px;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.lists-container .lists-list li:hover {
    background-color: var(--card-lists-hover);
}

.lists-container .list-error-message {
    position: relative;
    bottom: 7px;
}

@media (max-width: 800px) {
    .lists-container .list-error-message {
        bottom: 14px;
    }
}

.fallback-channel-drag-icon {
    font-size: 1.4rem;
}

.fallback-channel-title {
    font-size: 1rem;
    font-weight: bold;
}

/**
 * Mobile Preview
 */
.mobile-preview-card {
    width: 21.5rem;
}

.mobile-preview-width {
    width: 18.6rem;
}

.columns-card .columns-card-section .mobile-preview-width-extended {
    width: 43.25rem;
}

@media (min-width: 1200px) and (max-width: 1729px) {
    .columns-card .columns-card-section .mobile-preview-width-extended {
        width: 21rem;
    }
}

@media (max-width: 800px) {
    .columns-card .columns-card-section .mobile-preview-width-extended {
        width: 19.4rem;
    }
}

.mobile-preview-upper-actions-container {
    display: flex;
    justify-content: end;
    width: 18.6rem;
}

.mobile-preview-upper-actions-container .mobile-preview-upper-action {
    margin-right: 0.8rem;
}

.carousel .carousel-mobile-preview-container {
    padding-right: var(--padding);
    padding-left: var(--padding);
}

#whatsapp_preview_content .mobile-message-container {
    background-color: var(--whatsapp-brand-color-bg);
}

.mobile-preview {
    position: relative;
    display: flex;
    flex-direction: column;
    /*width: 18rem;*/
    color: var(--mobile-preview-color);
    word-wrap: break-word;
    background-color: var(--mobile-preview-bg);
    background-clip: border-box;
    border: 1px solid var(--mobile-preview-border-color);
    border-radius: var(--mobile-preview-border-radius);
    user-select: none;
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */
}

.mobile-preview .mobile-preview-screen {
    background: var(--mobile-preview-bg);
    border: 1px solid var(--mobile-preview-border-color);
    margin: 0.25rem;
    border-radius: 0.75rem;
    width: 18rem;
}

.mobile-preview-screen .mobile-header {
    background-color: var(--bs-body-bg);
    border-bottom: 1px solid var(--border-color-2);
    padding: calc(var(--padding) / 2) var(--padding);
    border-radius: 0.75rem 0.75rem 0 0;
}

.mobile-header .mobile-header-inner {
    height: 1.875rem;
}

.mobile-header .mobile-header-inner .sender-name-icon-arrow {
    font-size: 1.4rem;
    margin-right: 0.5rem;
}

.mobile-header .mobile-header-inner .viber-mobile-preview-icon-arrow {
    font-size: 1.4rem;
    margin-right: 3.5rem;
}

.mobile-preview-screen .mobile-message-container {
    padding: 0 var(--padding) 0.3rem var(--padding-xs);
    height: 31rem;
    overflow-y: auto;
    scrollbar-width: thin;
}

.mobile-preview-screen .mobile-message-container .d-flex {
    pointer-events: none;
}

.mobile-preview-screen .mobile-message-container .mobile-message {
    border: none !important;
    border-radius: var(--border-radius) !important;
    background-color: var(--bs-body-bg) !important;
    display: none;
    white-space: break-spaces;
    max-width: 100%;
    word-break: break-word !important;
    margin-top: 0.7rem;
}

.mobile-preview-screen .mobile-message-container .mobile-message.show {
    display: block !important;
}

.mobile-preview-screen .mobile-message-container .mobile-message.sms {
    padding: 8px 15px;
}

.mobile-preview-screen .mobile-message-container .mobile-message.viber {
    border-top-left-radius: 0 !important;
}

.mobile-preview-screen .mobile-message-container .mobile-message.viber .padded-content, .mobile-preview-screen .mobile-message-container .mobile-message.rcs .padded-content {
    padding: 8px 15px; /* Apply padding to the text and button */
}

.mobile-preview-screen .mobile-message-container .mobile-message.viber .padded-file, .mobile-preview-screen .mobile-message-container .mobile-message.rcs .padded-file {
    /*padding: 8px 1px; !* Apply padding to the file button *!*/
    padding: 0 1px 8px 1px;
}

.mobile-preview-screen .mobile-message-container .mobile-message.viber .full-width-image-container, .mobile-preview-screen .mobile-message-container .mobile-message.rcs .full-width-image-container {
    width: 230px;
    height: 170px;
    overflow: hidden; /* Ensures the image stays within the container */
    display: flex;
    justify-content: center;
    align-items: center;
}

.mobile-message.rcs .img-fluid {
    border:none;
    border-radius: var(--border-radius);
}

.full-width-image-container {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.thumbnail-container, .video-container {
    position: relative;
    display: inline-block;
    pointer-events: auto;
}

.modal .thumbnail-container {
    pointer-events: none;
}

.mobile-message.viber .thumbnail-container .full-width-image-container, .mobile-message.viber .video-container .full-width-image-container, .mobile-message.viber .padded-file .full-width-image-container {
    border-top-right-radius: var(--border-radius) !important;
}

.mobile-message.viber .full-width-image-container.solo {
    border-radius: var(--border-radius) !important;
    border-top-left-radius: 0 !important;
    display: inline-block !important;
}

.play-button-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 50px;
    pointer-events: none;
}

.video-thumbnail-container {
    position: relative;
    width: 100%;
    height: 100%;
}

/*---------Viber Survey------------*/

.survey-preview-container {
    padding: 15px;
    border-radius: 10px;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.survey-subtitle {
    font-size: 12px;
    color: var(--color-faded);
    text-align: left;
    padding: 0 var(--padding-sm) 0 var(--padding-sm);
}

.survey-divider {
    border: none;
    border-top: 1px solid #ccc;
    margin: 8px 0;
    width: 100%;
    position: relative;
    left: 0;
}

.survey-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.survey-option {
    display: flex;
    align-items: center;
    gap: 8px;
}

.survey-option input {
    margin: 0;
    width: 16px;
    height: 16px;
}

.survey-option label {
    font-size: 14px;
    font-weight: 500;
}

/*---------------------*/

/*.input-group .form-control {
    width: 90%;
}*/

.input-group.inline-double-items-container .form-control {
    flex: 2;
}

.input-group.inline-double-items-container .flatpickr-wrapper {
    flex: 2;
}

.input-group.inline-double-items-container .form-control.w-max180 {
    max-width: 180px;
}

.inline-double-items-container .error-min-width {
    min-width: 286px;
}

.input-group .clear-icon {
    width: auto;
    cursor: pointer;
}

.custom-input-group .form-control,
.custom-input-group .input-group-text {
    border-bottom-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.modal-body.form div.custom-input-group,
.modal-body.form div.channel-template-editor-toolbar {
    margin-bottom: 0 !important;
}

.mobile-preview-screen .mobile-message-container .custom-viber-button {
    background-color: var(--palette-color-1);
    color: white;
    border: none;
    border-radius: 20px; /* Rounded corners */
    padding: 4px 40px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 12px;
    cursor: pointer;
}

.viber-carousel-content .carousel-button-container {
    margin-bottom: var(--spacing-xs)
}

.viber-carousel-content .carousel-button-container .custom-viber-button.carousel-primary-button {
    width: 200px;
    white-space: pre-wrap !important;
}

.viber-carousel-content .carousel-button-container .carousel-secondary-button {
    font-size: 0.745rem;
    color: var(--viber-brand-color);
    white-space: pre-wrap !important;
}

.mobile-preview-screen .mobile-message-container .viber-mobile-preview-channel-logo {
    width: 24px;
    height: 24px;
    margin-right: 5px;
    margin-top: 10px;
}

.mobile-field-preview {
    background-color: var(--palette-color-13);
    padding: 0.005rem 0.2rem;
    border-radius: var(--border-radius-sm);
    pointer-events: auto;
}

.mobile-field-preview .mobile-field-preview {
    padding: 0;
}

.mobile-preview-screen .preview-iframe-container {
    height: 34.45rem;
    border-radius: 0.7rem;
    padding-right: 0;
}

.preview-iframe {
    padding: 0;
    width: 100%;
    height: 100%;
    border-radius: 0.7rem;
    pointer-events: none;
}

/* Tablet Preview */
.tablet-preview-screen .preview-iframe-container {
    height: 34.45rem;
    border-radius: 0.7rem;
    padding-right: 0;
}

.tablet-preview-width {
    width: 100%;
}

.tablet-preview {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    color: var(--tablet-preview-color);
    word-wrap: break-word;
    background-color: var(--tablet-preview-bg);
    background-clip: border-box;
    border: 1px solid var(--tablet-preview-border-color);
    border-radius: var(--tablet-preview-border-radius);
    padding-right: 0.5rem;
    user-select: none;
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */
}

.tablet-preview .tablet-preview-screen {
    background: var(--tablet-preview-bg);
    border: 1px solid var(--tablet-preview-border-color);
    margin: 0.25rem;
    border-radius: 0.75rem;
    width: 100%;
}

.pointer-events-auto {
    pointer-events: auto !important;
}

/*---------------------*/

.card {
    border: var(--border-2);
}

.card.no-borders {
    border: none;
}

/**
 * New card console_application_access\index design
 */
.card.card-account-apps {
    /*width: 20rem;*/
    height: 17.0625rem;
    box-shadow: none !important;
}

.card.card-account-apps.console {
    background: var(--card-emphasis);
}

.card.card-account-apps .card-body {
    /*height: 17.0625rem !important;*/
    padding: 2rem;
    height: 17rem !important;
}

/**
 * ------------------------------------------------
 */

.card td:not(:last-child),
.card th:not(:last-child) {
    /*border-right: var(--border-2) !important;*/
}

.card tr:not(:last-child) {
    border-bottom: var(--border-2);
}

.card-padding {
    padding: 0 var(--padding) var(--padding) var(--padding);
}

.card-padding-full {
    padding: var(--padding);
}

.card-bottom-padding {
    padding-bottom: var(--spacing);
}

.card-bottom-padding-sm {
    padding-bottom: calc(var(--spacing) / 2);
}

.inner-card-padding {
    padding: var(--padding-sm);
}

.inner-card-padding:last-child {
    padding-top: 0;
}

.card.card-padding {
    border: var(--border-2);
    padding: var(--padding);
    border-radius: var(--border-radius);
}

.top-up {
    padding: 0.2rem 0.4rem;
    font-size: 0.6rem;
    border-radius: 0.7rem;
    background: var(--main-background);
}

.big-round-icon {
    background: var(--color-brand);
    margin: auto;
    font-size: 1.5rem;
    color: var(--main-background);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    text-align: center;
    vertical-align: middle;
    padding: 1rem;
}

.card-dashboard-small {
    height: 204px;
}

.dashboard-card-padding {
    padding-left: var(--padding);
}

.dashboard-title {
    padding-top: 0.9rem;
}

.dashboard-revenue-total {
    padding-top: 0.5rem;
}

.next-to-icon {
    padding-top: 0.9rem;
    padding-left: 1.5rem;
}

.align-self-center.next-to-icon {
    padding-top: 0;
    padding-left: 1.5rem;
}

.next-to-icon a {
    text-decoration: underline;
}

.th-icon {
    margin-right: 0.625rem;
}

.dashboard-icon {
    color: var(--main-background);
    margin: auto;
    border-radius: 50%;
    text-align: center;
    vertical-align: middle;
    font-size: 1.5rem;
    display: inline-block;
    width: 50px;
    height: 50px;
    padding: 0.5rem;
}

.dashboard-icon.green {
    background: var(--palette-color-6);
}

.dashboard-icon.purple {
    background: var(--bs-info);
}

.dashboard-icon-simple {
    font-size: 1.2rem;
}

.span-icon-big {
    font-size: 2rem;
}

.icon-danger {
    color: var(--bs-warning);
}

.tile-wallet {
    /*var(--palette-color-2) */
    background-color: #ece9fb;
    padding-top: 2.1rem;
    padding-bottom: 2.1rem;
    /*height: 143.4px;*/
}

.tile, .tile .card-header {
    background-color: var(--bs-gray-300);
}

.tile-part {
    padding: 1rem;
}

.tile-part.right {
    border-left: 1px solid var(--palette-color-8);
}

.channel-icon {
    margin: auto;
    font-size: 2.8rem;
    color: #fff;
    aspect-ratio: 1;
    max-width: 90px;
    border-radius: 50%;
    text-align: center;
    vertical-align: middle;
    padding: 1.5rem;
}

.channel-icon.dashboard {
    margin: 0;
    font-size: 1.4rem;
    width: 45px;
    height: 45px;
    padding: 0.75rem;
    justify-content: center;
    align-items: center;
}

.step1-channels-error {
    margin-top: -1px;
}

.channel-icon.campaign-step3 {
    margin: auto auto 0.2rem;
    font-size: 1.5rem;
    max-width: 50px;
    padding: 0.5rem;
    justify-content: center;
    align-items: center;
}

.channel-icon.fallback-icon {
    font-size: 1.4rem;
    width: 25px;
    height: 25px;
    margin: 0;
    justify-content: center;
    align-items: center;
}

.channel-icon.sms-channel-icon {
    background: var(--palette-color-15);
}

.channel-icon.viber-channel-icon {
    background: var(--viber-brand-color);
}

.channel-icon.email-channel-icon {
    background: var(--palette-color-10);
}

.channel-icon.rcs-channel-icon {
    background: #C64242;
}

.channel-icon.whatsapp-channel-icon {
    background: #25D366;
}

.channel-icon.sms-channel-icon.muted-icon {
    background: var(--palette-color-7);
}

.channel-icon.viber-channel-icon.muted-icon {
    background: var(--palette-color-2);
}

.channel-icon.email-channel-icon.muted-icon {
    background: var(--palette-color-12);
}

.channel-icon.rcs-channel-icon.muted-icon {
    background: #C64242;
}

.channel-icon.whatsapp-channel-icon.muted-icon {
    background: #DCF8C6;
}

.campaign-channels {
    margin-bottom: var(--spacing);
}

.campaign-channels .row {
    grid-row-gap: var(--spacing);
}

.campaign-channels .row .card {
    height: 100%;
}

.campaign-channels .channel-tile {
    padding: var(--spacing-sm) var(--spacing-sm);
    height: 100%;
    position: relative;
    display: flex;
}

.campaign-channels .channel-meta {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin-left: var(--spacing-sm);
    margin-right: var(--spacing-xs);
}

.campaign-channels .channel-title {
    word-break: break-all;
}

.campaign-channels .channel-status {
    color: var(--color-faded);
    margin-top: auto;
    position: relative;
}

.campaign-channels .channel-actions {
    position: absolute;
    font-size: 0.75rem;
    top: var(--spacing-sm);
    right: var(--spacing-sm);
    cursor: pointer;
}

.campaign-channels .channel-actions .dropdown-item {
    color: var(--color-faded);
}

.pending-campaigns {
    padding: 0;
}

.billing-icon {
    background: var(--palette-color-2);
    margin: auto;
    font-size: 2rem;
    color: var(--bs-info);
    width: 90px;
    height: 90px;
    border-radius: 50%;
    text-align: center;
    vertical-align: middle;
    padding: 2rem;
}

.billing-icon.small {
    font-size: 1.5rem;
    display: inline-block;
    margin-right: 1rem;
    width: 50px;
    height: 50px;
    padding: 0.35rem;
}

.billing-icon.medium {
    display: inline-block;
    margin-right: 1rem;
    width: 75px;
    height: 75px;
    padding: 1rem;
}

.billing-icon.big {
    display: inline-block;
    margin-right: 1rem;
    width: 112px;
    height: 112px;
}

/*.wave {*/
/*    border-radius: 0.5rem;*/
/*    position: relative;*/
/*    overflow: hidden;*/
/*    height: 100%;*/
/*    background-size: 50% 100%;*/
/*    background-repeat: no-repeat;*/
/*    background-position: right;*/
/*    background-image: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 150" preserveAspectRatio="none"%3E%3Cpath d="M99.19,0.00 C112.69,70.06 270.03,70.06 208.98,150.00 L500.00,150.00 L500.00,0.00 Z" style="fill: %231DAA7B;"%3E%3C/path%3E%3C/svg%3E'),*/
/*    url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 150" preserveAspectRatio="none"%3E%3Cpath d="M88.19,0.00 C100.69,70.06 250.03,70.06 200.98,150.00 L500.00,150.00 L500.00,0.00 Z" style="fill: %23eee;"%3E%3C/path%3E%3C/svg%3E');*/
/*}*/

/*.wave.blue {*/
/*    background-image: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 150" preserveAspectRatio="none"%3E%3Cpath d="M99.19,0.00 C112.69,70.06 270.03,70.06 208.98,150.00 L500.00,150.00 L500.00,0.00 Z" style="fill: %2343597d;"%3E%3C/path%3E%3C/svg%3E'),*/
/*    url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 150" preserveAspectRatio="none"%3E%3Cpath d="M88.19,0.00 C100.69,70.06 250.03,70.06 200.98,150.00 L500.00,150.00 L500.00,0.00 Z" style="fill: %23eee;"%3E%3C/path%3E%3C/svg%3E');*/
/*}*/

/*.wave.green {*/
/*    background-image: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 150" preserveAspectRatio="none"%3E%3Cpath d="M99.19,0.00 C112.69,70.06 270.03,70.06 208.98,150.00 L500.00,150.00 L500.00,0.00 Z" style="fill: %231DAA7B;"%3E%3C/path%3E%3C/svg%3E'),*/
/*    url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 150" preserveAspectRatio="none"%3E%3Cpath d="M88.19,0.00 C100.69,70.06 250.03,70.06 200.98,150.00 L500.00,150.00 L500.00,0.00 Z" style="fill: %23eee;"%3E%3C/path%3E%3C/svg%3E');*/
/*}*/

/*.wave.red {*/
/*    background-image: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 150" preserveAspectRatio="none"%3E%3Cpath d="M99.19,0.00 C112.69,70.06 270.03,70.06 208.98,150.00 L500.00,150.00 L500.00,0.00 Z" style="fill: %23ab2317;"%3E%3C/path%3E%3C/svg%3E'),*/
/*    url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 150" preserveAspectRatio="none"%3E%3Cpath d="M88.19,0.00 C100.69,70.06 250.03,70.06 200.98,150.00 L500.00,150.00 L500.00,0.00 Z" style="fill: %23eee;"%3E%3C/path%3E%3C/svg%3E');*/
/*}*/

.col.preset-width {
    max-width: 250px;
}

/*.pie {*/
/*    --p: 0;*/
/*    --b: 1rem;*/
/*    --c: #fff;*/
/*    --w: 130px;*/

/*    width: var(--w);*/
/*    height: var(--w);*/
/*    aspect-ratio: 1;*/
/*    position: relative;*/
/*    display: inline-grid;*/
/*    margin: 5px;*/
/*    place-content: center;*/
/*    font-size: 1.5rem;*/
/*    font-family: sans-serif;*/
/*}*/

/*.pie:before {*/
/*    content: "";*/
/*    position: absolute;*/
/*    border-radius: 50%;*/
/*}*/

/*.pie:before {*/
/*    inset: 0;*/
/*    background: radial-gradient(farthest-side, var(--c) 98%, #0000) top/var(--b) var(--b) no-repeat,*/
/*    conic-gradient(var(--c) calc(var(--p) * 1%), #0000 0);*/
/*    -webkit-mask: radial-gradient(farthest-side, #0000 calc(99% - var(--b)), #000 calc(100% - var(--b)));*/
/*    mask: radial-gradient(farthest-side, #0000 calc(99% - var(--b)), #000 calc(100% - var(--b)));*/
/*}*/

/*.pie:after {*/
/*    inset: calc(50% - var(--b) / 2);*/
/*    background: var(--c);*/
/*    transform: rotate(calc(var(--p) * 3.6deg)) translateY(calc(50% - var(--w) / 2));*/
/*}*/

/*.animate {*/
/*    animation: p 1s .5s both;*/
/*}*/

/*.no-round:before {*/
/*    background-size: 0 0, auto;*/
/*}*/

/*.no-round:after {*/
/*    content: none;*/
/*}*/

/*@keyframes p {*/
/*    from {*/
/*        --p: 0*/
/*    }*/
/*}*/

/*.options {*/
/*    position: absolute;*/
/*    font-size: 1.2rem;*/
/*    right: 0;*/
/*    padding: var(--spacing-sm);*/
/*    top: 0;*/
/*}*/

/*.application-icon {
    width: 100px;
    height: 100px;
    border-radius: 1.875rem;
    !*padding: var(--padding);*!
    margin: auto;
}

.application-icon.admin-icon {
    background-color: var(--palette-color-14);
}

.application-icon.client-icon {
    background: var(--palette-color-15);
}

.application-icon.icon-border {
    border: solid #fff 2px;
}

.application-icon.medium {
    width: 88px;
    height: 88px;
    padding: calc(var(--spacing-sm) / 8);
}

.application-icon.small {
    width: 50px;
    height: 50px;
    border-radius: 0.94rem;
    padding: calc(var(--spacing-sm) / 4);
    margin: 0 0.1rem;
}


.application-icon.xsmall {
    width: 43px;
    height: 43px;
    border-radius: 0.94rem;
    padding: calc(var(--spacing-sm) / 8);
    margin: 0 -0.65rem;
}

.application-icon.xxsmall {
    border-radius: 0.6rem;
    margin: 0 -0.65rem;
    margin-right: 0.2rem;
    flex-shrink: 0;
    width: 26px;
    height: 26px;
}

.application-icon.tiny {
    width: 48px;
    height: 48px;
    border-radius: 0.94rem;
    padding: calc(var(--spacing-sm) / 4);
}

.application-icon.logo {
    width: 30px;
    height: 30px;
    border-radius: 0.6rem;
    padding: calc(var(--spacing-sm) / 12);
}

.application-icon-medium {
    width: 30px;
    height: 30px;
    border-radius: 0.6rem;
    font-size: 1.5em;
    line-height: 0.05em;
    vertical-align: -0.075em;
    padding: calc(var(--spacing-sm) / 3);
}

.application-icon-large {
    width: 30px;
    height: 30px;
    border-radius: 0.6rem;
    font-size: 3em;
    line-height: 0.05em;
    vertical-align: -0.075em;
    padding: calc(var(--spacing-sm) / 3);
}

.application-icon-app-count.xsmall {
    width: 43px;
    height: 43px;
    padding: 0.80rem;
    margin: 0 -0.65rem;
    font-size: 0.75rem;
    border-radius: 0.94rem;
}

.application-icon.inline {
    width: 80px;
    height: 80px;
    margin: 1rem 1rem;
}
*/

.application-icon-app-count {
    background: #fff !important;
    box-shadow: 0px 3px 6px #2C282829;
    width: 100px;
    height: 100px;
    border-radius: 1.875rem;
    padding: var(--padding);
    margin: auto;
}

.application-icon {
    display: inline-block;
    padding: 0.5rem;
    aspect-ratio: 1;
    border-radius: 0.75rem;
    text-align: center;
}

.application-icon.icon-border {
    border: solid #fff 2px;
}

.application-icon.application-icon-small {
    height: 30px;
    padding: 0.3rem;
    /*background: #f00;*/
}

.application-icon.application-icon-small i {
    font-size: 1rem;
}

.application-icon.application-icon-medium {
    /*background: #0f0;*/
    height: 52px;
}

.application-icon.application-icon-medium i {
    font-size: 1.7rem;
    line-height: 2.2rem;
}

.application-icon.application-icon-large {
    height: 96px;
    /*background: #00f;*/
}

.application-icon.application-icon-large i {
    font-size: 3.6rem;
    line-height: 5rem;
}

.application-icon.icon-border {
    border: solid #fff 2px;
}

.application-icon-admin {
    background: transparent;
}

.application-icon-admin i {
    color: var(--color-brand-2);
}

.application-icon-account {
    background: transparent;
}

.application-icon-account i {
    color: var(--color-brand);
}

.application-icon-inline {
    margin: 1rem;
    width: 96px;
    height: 96px;
}

.application-icon-inline-small {
    display: inline-block;
    margin: 0 0 0 0.5rem;
}

.application-icon-inline-xsmall {
    width: 50px;
    height: 50px;
    border-radius: 0.94rem;
    padding: calc(var(--spacing-sm) / 4);
}

.application-icon-inline-xxsmall {
    margin: 0 -0.65rem;
    margin-right: 0.5rem;
    flex-shrink: 0;
    width: 26px;
    height: 26px;
}

.application-admin-link {
    display: inline-block;
    border: var(--border);
    padding: var(--padding-xxs) var(--padding-xs);
    margin: var(--spacing-xs);
    border-radius: var(--border-radius-sm);
    font-size: 1.25rem;
    color: var(--color-off-black);
}

a.link-switch {
    display: inline-block;
    border: var(--border);
    width: 2em !important;
    height: 1em;
    margin-left: -2.5em;
    background-image: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%27-4 -4 8 8%27%3e%3ccircle r=%273%27 fill=%27rgba%28180, 180, 180, 1%29%27/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: left center;
    border-radius: 2em;
    border: 1px solid rgb(180 180 180);
}

a.link-switch.checked {
    background-color: var(--bs-success);
    border-color: var(--bs-success);
    background-image: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%27-4 -4 8 8%27%3e%3ccircle r=%273%27 fill=%27%23fff%27/%3e%3c/svg%3e");
    background-position: right center;
}

a.link-switch.default {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    background-image: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%27-4 -4 8 8%27%3e%3ccircle r=%273%27 fill=%27%23fff%27/%3e%3c/svg%3e");
    background-position: right center;
}

.table-switch {
    margin-left: auto !important;
    margin-top: 1rem;
    cursor: pointer;
}

.form-switch-input {
    cursor: pointer;
}

.form-table-switch {
    margin-top: 0.7rem;
}

.offcanvas {
    background: var(--main-background);
}

#per_page {
    /*border: var(--border);*/
}

.btn.input-btn {
    background: var(--input-background-active);
    border: 1px solid var(--border-color);
    height: calc(3.5rem + 2px);
    line-height: 1.25;
}

.btn.password-btn {
    background: var(--input-background-active);
    border: 1px solid var(--border-color);
}

.form-control {
    background-color: var(--input-background);
    color: var(--color);
    border: 1px solid var(--border-color);
    border-radius: 0.3rem;
    padding: 0.75rem 0.75rem;
}

.form-control:focus {
    color: var(--color);
}

.form-label {
    font-size: 0.8rem;
    color: var(--color-faded);
    margin-bottom: 0.3rem;
}

.form-label small {
    font-size: 0.7rem;
    color: var(--color-faded);
}

.form-label.checkbox-label {
    font-size: unset;
    color: var(--color);
}

.radio-label-margin {
    margin-left: 0.25rem;
}

.form-check-input.default:checked {
    background-color: var(--bs-primary) !important;
    border: var(--bs-primary) !important;
}

.input-border {
    border: var(--border-2);
}

button.search-icon {
    border: var(--border-2);
    border-right: none;
}

span.search-icon {
    border: var(--border-2);
    border-right: none;
}

input.form-control.search {
    border: var(--border-2);
    border-left: none;
    padding: 0.25rem;
}

input.form-control.search:focus {
    box-shadow: none;
}

.input-group a {
    padding: .25rem 0.75rem;
}

.input-group {
    border-radius: 0.5rem;
}

input.form-control,
.input-group-text {
    background: var(--input-background);
    color: var(--color);
}

input.form-control:active,
input.form-control:focus {
    background: var(--input-background-active);
}

.form-check-input:checked {
    background-color: var(--bs-success);
    border-color: var(--bs-success);
}

i.fa-light.fa-search {
    accent-color: var(--color-brand);
}

.form-control:disabled,
.form-control:read-only {
    background: var(--input-background-disabled);
}

.form-control.main-bg:read-only {
    background: var(--main-background);
}

.form-floating.floating-with-flag-included > .select2.select2-container.select2-container--bootstrap > .selection > .select2-selection.select2-selection--single {
    height: calc(3.5rem + 2px) !important;
    border-radius: 0.8rem;
    padding-top: 0.9rem;
}

input[type=checkbox] {
    width: 1rem;
    height: 1rem;
}

input[type=file]::file-selector-button {
    background-color: transparent;
}

/**
 * Form Range
 */
.form-range {
    height: 0.15rem;
    background: var(--palette-color-2);
    background-image: linear-gradient(var(--bs-body-color), var(--bs-body-color));
    background-repeat: no-repeat;
}

.form-range::-moz-range-track {
    -webkit-appearance: none;
    box-shadow: none;
    border: none;
    background: transparent;
}

.form-range::-webkit-slider-runnable-track {
    -webkit-appearance: none;
    box-shadow: none;
    border: none;
    background: transparent;
}

.form-range::-ms-track {
    -webkit-appearance: none;
    box-shadow: none;
    border: none;
    background: transparent;
}

.form-range-input {
    width: 88%;
}

.form-range-value {
    padding-top: 0.1875rem;
}

/**
 * Form Color Picker
 */
.form-colorpicker-group {
    display: block;
    width: 25%;
    background-color: #fefefe;
    border: 1px solid var(--border-color);
    border-radius: 0.3rem;
    cursor: pointer;
}

.form-colorpicker-group .form-control-color {
    border: none;
    height: auto;
}

.form-colorpicker-group .form-control-color:focus {
    box-shadow: none;
}

.form-colorpicker-group .form-control-color::-moz-color-swatch {
    border-radius: 0;
}

.form-colorpicker-group .form-control-color::-webkit-color-swatch {
    border-radius: 0;
}

.form-colorpicker-group .form-control-color:read-only {
    background: #fefefe;
}

.form-colorpicker-group .form-color-icon {
    padding: 0.75rem 0.75rem;
}

.panel {
    margin: var(--block-margin);
    /*background: var(--panel-background);*/
    /*border: var(--border);*/
    /*padding: var(--padding);*/
    /*border-radius: 1rem;*/
}

.panel-transparent {
    background: transparent !important;
}

.panel .panel {

}

.panel .form-narrow .panel {
    box-shadow: none;
    padding: 0;
}

.panel table {
    /*background: var(--bg);*/

}

.panel .card {

}

/**
 * New card table design
 */
.panel .card-no-shadow {
    box-shadow: none;
}

.panel .form {
    margin: var(--block-margin);
    background: var(--panel-background);
    border: var(--border-2);
    padding: var(--padding);
    border-radius: var(--border-radius);
}

.panel .modal-dialog .form {
    margin: unset !important;
    border: unset !important;
    padding: 1rem 0 1rem 0 !important;
    border-radius: unset !important;
}

.panel .modal-dialog .form .help {
    margin-left: 0.2rem !important;
    vertical-align: unset !important;
}

.custom-file-input {
    padding: 1rem 1rem;
    margin-right: 1.3rem;
}

.form.panel {

}

.panel .form > div {
    margin-bottom: var(--spacing-sm);
}

.panel .form > div:last-child {
    margin-bottom: 0;
}

/* do not add margin to tinymce */
.panel .form > div[class^=tox] {
    margin-bottom: 0;
}

td pre {
    margin-bottom: 0;
}

pre:last-child {
    margin-bottom: 0;
}

.panel h2 {
    margin-bottom: var(--spacing-sm);
}

.view-panel {
    margin: var(--block-margin);
    background: var(--panel-background);
    border: var(--border-2);
    padding: var(--padding);
    border-radius: 1rem;
}

table {
    margin-bottom: 0 !important;
    /*border: none !important;*/
    /*border: var(--border-2);*/
}

/**
 * New card table design
 */
.card-table-top-header {
    background: var(--panel-background);
    padding: var(--padding);
    padding-bottom: 0.75rem;
}

.card-table-bottom {
    background: var(--panel-background);
    padding: var(--padding);
    padding-top: 1rem;
}


.dashboard-tr-empty {
    height: 56px;
    border-bottom: none !important;
}

.highlighted {
    background-color: var(--color-brand) !important;
    font-weight: bold !important;
}

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

.details .section-title-th {
    font-size: 0.875rem;
    font-weight: 900;
}

/*-------------------*/


.item-spacing {
    margin-right: var(--spacing);
}

.item-spacing:last-child {
    margin-right: unset;
}

.item-spacing-sm {
    margin-right: var(--spacing-sm);
}

.item-spacing-sm:last-child {
    margin-right: unset;
}

.spacing {
    margin-bottom: var(--spacing);
}

.section {
    margin-bottom: var(--spacing);
}

.card-section {
    margin-bottom: 1.9rem;
}

.card-section-icons {
    margin-bottom: 0.2rem;
}

.section:last-child {
    margin-bottom: 0;
}

.section-sm {
    margin-bottom: var(--spacing-sm);
}

.section-sm:last-child {
    margin-bottom: 0;
}

.width-xxs {
    max-width: 275px;
}

.width-xs {
    max-width: 300px;
}

.width-sm {
    max-width: 500px;
}

.width-md {
    max-width: 800px;
}

.width-lg {
    max-width: 1200px;
}

.view-width-md {
    min-width: 400px;
}

.pricing-width-sm {
    min-width: 350px;
}

.height-md {
    min-height: 640px;
}

/**
 * Left Menu
 */
.app-name {
    border-bottom: 1px solid var(--border-color);
    text-align: center;
    margin: var(--spacing) var(--spacing) 0 var(--spacing);
    padding: .5rem 0;
}

.app-context {
    text-align: center;
    border-top: 1px solid var(--border-color-2);
    border-bottom: 1px solid var(--border-color-2);
    margin: -1px var(--spacing) var(--spacing) var(--spacing);
    padding: .5rem 0;
}

.app-context .title {
    font-weight: bold;
}

.app-context .subtitle {
    font-size: smaller;
}

.body-small {
    font-size: 0.75rem;
}

.left-menu-container {
    margin: var(--spacing);
    margin-top: 2.65rem;
    min-height: calc(100vh - 220px);
}

.left-menu {
    /*margin: 0 var(--spacing) 0 var(--spacing);*/
    /*margin-top: 2.65rem;*/
    /*min-height: calc(100vh - 220px);*/
}

.left-menu > li {
    margin-bottom: calc(var(--spacing-sm) / 2);
}

.left-menu > .nav-item a {
    border-radius: var(--border-radius-layout);
    padding: 0.625rem 0.4375rem;
}

.left-menu > .nav-item.nav-item-selected {
    background: var(--nav-bg-active);
    border-radius: var(--border-radius-layout);
}

.left-menu-container.admin .left-menu > .nav-item.nav-item-selected > a {
    background: var(--color-off-black);
    border-radius: var(--border-radius-layout);
    color: var(--nav-group-active-color);
}

.left-menu-container.admin .left-menu > .nav-item.nav-item-selected {
    background: var(--nav-bg-active-admin);
    border-radius: var(--border-radius-layout);
}

.left-menu .nav-link {
    color: var(--nav-color);
    display: block;
    padding: .5rem 0;
}

.left-menu .nav-link.separator {
    border-bottom: 1px dashed var(--border-color);
    padding-bottom: 1rem;
}

.left-menu .left-menu-section {
    color: #aaa;
    margin-top: 1rem;
    padding: calc(var(--spacing-sm) / 2);
    font-weight: 700;
    font-size: 0.6875rem;
}

.left-menu .menu_icon {
    position: relative;
}

.fa-light.menu_icon,
.fa-solid.menu_icon,
.fa-kit.menu_icon {
    width: 2rem;
    text-align: center;
}

.fa-brands.menu_icon {
    font-size: 1em;
    vertical-align: middle;
    width: 2rem;
    text-align: center;
}

.left-menu ul .nav-link {
    padding-left: 2.5rem;
}

.left-menu ul ul {
    padding-left: 1rem;
}

.left-menu .menu_icon.level-2 {
    top: 0;
}

.left-menu .nav-link:hover,
.left-menu .nav-link:focus,
.left-menu .nav-link.active {
    color: var(--nav-color-active);
}

.left-menu .nav-item-selected ul li a span.selected-ul {
    content: '';
    display: inline-block;
    -webkit-border-radius: var(--border-radius-sm);
    border-radius: var(--border-radius-sm);
    height: 0.5rem;
    width: 0.5rem;
    margin-left: -1.2rem;
    margin-right: 0.7rem;
    /*background-color: var(--bs-gray);*/
}

.left-menu .nav-item-selected ul li span.active:before {
    content: '';
    display: inline-block;
    -webkit-border-radius: var(--border-radius);
    border-radius: var(--border-radius);
    height: 0.5rem;
    width: 0.5rem;
    margin-left: -1.2rem;
    margin-right: 0.7rem;
    background-color: var(--color-brand);
}

.left-menu .expand-menu-icon {
    margin-top: 0.25rem;
}

.account-nav-container {
    border-left: var(--border);
    border-right: var(--border);
    width: 35vw;
    max-width: 380px !important;
    padding: 5px 0 6px 0;
    position: relative;
}

.account-nav-switcher {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 58px;
}

.account-nav-switcher > div {
    padding: 0 var(--padding-sm);
    flex-grow: 0;
}

.account-nav-switcher > div.organization-details {
    flex-grow: 1;
}

.account-nav-switcher-dropdown {
    margin-left: -1px !important;
    margin-top: 0 !important;
    cursor: default;
    border: var(--border);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 0;
    width: 380px;
    padding: 0;
    top: 0;
}

.account-nav-switcher-dropdown > div {
    padding: var(--padding-sm);
}

.account-nav-switcher-dropdown .application-icon.application-icon-medium.application-icon-account {
    padding-left: 0;
    text-align: start;
}

.account-nav-switcher-dropdown .application-icon.application-icon-medium.application-icon-account i {
    font-size: 1.5rem;
}

.account-nav-switcher-dropdown .dropdown-applications {
    border-top: var(--border-2);
}

.account-nav-switcher-dropdown .dropdown-applications .row .right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-left: var(--border-2);
}

.account-nav-switcher-dropdown .dropdown-showall {
    border-top: var(--border-2);
}

.left-menu .btn-toggle[aria-expanded="true"] .expand-menu-icon,
#account-nav-switcher[aria-expanded="true"] #account-nav-switcher-arrow {
    transition: transform .35s ease;
    transform: rotate(180deg);
}

.left-menu .btn-toggle[aria-expanded="false"] .expand-menu-icon,
#account-nav-switcher[aria-expanded="false"] #account-nav-switcher-arrow {
    transition: transform .35s ease;
    transform: rotate(0deg);
}

li.app-logo {
    margin: auto;
}

/**
 * Header Navbar
 */

header .navbar {
    padding: 0;
    color: var(--nav-color);
}

header .navbar .nav-link {
    background: transparent;
    color: var(--nav-color);
}

.collapse-icon {
    font-size: 0.75rem;
    padding: 0.5rem !important;
    margin: auto;
    color: var(--color-faded);
    vertical-align: center;
    display: none;
}

.collapse-icon {
    transition: all 0.5s;
    transition-timing-function: ease-in-out;
}

.collapse-icon.rotate {
    transform: scaleX(-1);
}

@media (max-width: 1070px) {
    .collapse-icon {
        display: flex;
    }
}

.title {
    font-size: 1.25rem;
}

.nav-item.audience-switcher {
    padding: var(--padding-sm);
    margin: auto;
}

.audience-switcher-select {
    /*width: 6.25rem;*/
    border: none;
    background: var(--nav-bg-color);
    color: var(--nav-color);
}

.nav-icon {
    font-size: 1rem;
    margin: auto;
}

.nav-icon .badge.rounded-pill {
    font-size: 0.5rem;
}

header .navbar .nav-link:hover,
header .navbar .nav-link:focus,
header .navbar .nav-link.active {
    background: transparent;
    color: var(--nav-color-active);
}

header .navbar-collapse .dropdown-item {
    padding: 0.25rem 0.5rem;
}

header .navbar-collapse .dropdown-toggle {
    padding-left: 0.7rem;
    padding-right: 0.6rem;
}

header .language_wrapper img {
    width: 1.5rem;
}

.nav-item.padding {
    padding: 0.5rem 0.5rem;
}

.nav-left.account {
    cursor: pointer !important;
    margin-bottom: calc(-1 * var(--spacing-xs));
    margin-top: calc(-1 * var(--spacing-xs));
}

.nav-left ul.nav li {
    margin-right: 0.5rem;
}

.nav-link {
    padding: calc(var(--spacing-sm) / 2) var(--spacing-sm);
}

/**
 * Dropdown Menu
 */

.dropdown-menu {
    background: var(--dropdown-menu-bg);
}

.dropdown-item {
    color: var(--dropdown-menu-color);
}

.dropdown-item:hover,
.dropdown-item.active {
    background: var(--dropdown-menu-bg-hover);
    color: var(--dropdown-menu-color-hover);
}

.dropdown-item i {
    width: 1.25rem;
    text-align: center;
}

.dropdown-padding {
    padding: var(--padding-sm) var(--padding);
    min-width: 280px;
}

.dropdown-organization {
    padding: 0.75rem 1.5rem;
    font-size: 0.875rem;
    margin-left: 1rem
}

.organization-list {
    border-top: var(--border-2);
}

.organization-list:hover {
    background: #eee;
}

.dropdown-applications {
    padding: 0.75rem 1.5rem;
    min-width: 260px;
}

.dropdown-menu-center {
    right: auto;
    left: 50% !important;
    -webkit-transform: translate(-50%, 0);
    -o-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
}

.selected-item {
    display: inline-block;
    border-radius: var(--border-radius-sm);
    height: 0.3rem;
    width: 0.3rem;
    margin-right: 0.5rem;
    margin-left: -1rem;
    background: var(--color-brand);
}

/**
 * Service Buttons
 */

.svc {
    padding: 0.25rem 0.25rem;
    color: #fff;
    font-weight: bold;
    min-width: 5rem;
    display: inline-block;
    text-align: center;
}

.svc-td-button {
    width: 6rem;
    padding: 0.5rem !important;
}

.svc-td-separator td {
    background-color: var(--table-separator-bg);
    font-weight: bold;
}

.table-hover > tbody > tr.svc-td-separator:hover > * {
    --bs-table-bg-state: var(--table-separator-bg);
}

.svc-log-level {
    width: 3rem;
    text-align: center;
    padding: 0 !important;
    margin: -0.125rem !important;
}

.svc-parameter {
    width: 5rem;
    padding: 0 0.5rem !important;
    margin: 0;
}

a.svc {
    text-decoration: none;
}

a.svc:hover {
    color: #fff;
}

.svc.svc-initialize {
    background: #030;
}

.svc.svc-start {
    background: #090;
}

.svc.svc-reload {
    background: #49d;
}

.svc.svc-stop {
    background: #f62;
}

.svc.svc-kill {
    background: #f00;
}

.terminal {
    padding: var(--spacing);
    font-size: var(--bs-body-font-size);
    max-height: 40rem;
    overflow-y: scroll;
}

table.json-pretty-table {
    font-family: "Consolas", monospace;
    width: 100%;
}

.kannel-status {
    width: 100%;
}

table.json-pretty-table tr th,
table.json-pretty-table tr td {
    padding: 0.25rem 0 !important;
    vertical-align: top;
    border: 1px solid #000;
}

table.json-pretty-table table {
    border: none;
}

.json-pre {
    background: var(--bg-code-body);
    color: var(--color-code);
    padding: var(--padding-sm);
    line-height: 1.125rem;
}

.json-pre:first-of-type {
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
}

.json-pre:last-of-type {
    border-bottom-left-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
}

.addon-pre {
    margin-top: 0;
    margin-bottom: 0;
    border-radius: var(--border-radius) var(--border-radius) 0 0;
}

.json-pre .json-key {
    color: #8be9fd;
}

.json-pre .json-string {
    color: #ff7766;
}

.json-pre .json-number {
    color: #50fa7b;
}

.json-pre .json-boolean {
    color: #ffb86c;
}

.json-pre .json-null {
    color: #bd93f9;
}

.json-pre-responsive {
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
    overflow-x: auto;
}

.toast {
    border-radius: var(--border-radius-sm);
    /*background: transparent;*/
    border: none;
}

.toast-icon-padding {
    padding: 0 calc(var(--padding-sm) / 2);
    display: inline-block;
}

/**
 * Top-Up page
 */
.top-up-page-img {
    background-color: #FFEAD5;
    border-radius: var(--border-radius);
    min-width: 100px;
    height: 100px;
}

.top-up-invoice {
    gap: var(--spacing-xs);
}

.top-up-invoice-number {
    background-color: #F4F5F6;
    color: var(--color-off-black);
    padding: var(--spacing-xs) var(--spacing-xs);
    border-radius: var(--border-radius-sm);
}

.top-up-method:not(:last-child) {
    margin-right: var(--spacing);
}

.top-up-method input {
    margin-right: var(--spacing-sm);
}

.top-up-method label {
    gap: var(--spacing-sm);
}

.top-up-bottom-padding {
    padding-bottom: 2rem !important;
}

.top-up-invoicing-types {
    gap: var(--spacing);
}

.top-up-invoicing-type-item label {
    padding: 0 var(--spacing);
    min-width: 150px;
}

.top-up-amount {
    gap: var(--spacing);
}

.top-up-amount-item button {
    padding-left: var(--spacing-lg);
    padding-right: var(--spacing-lg);
    font-size: 1.2rem;
}

.top-up-amount-item input {
    width: 150px;
    height: 100%;
}

.top-up-amount-item input.input-btn-brand {
    color: var(--main-background);
    background-color: var(--color-brand);
    border-color: var(--color-brand);
}

.top-up-amount-item input.input-btn-brand:hover {
    color: var(--main-background);
    background-color: var(--color-brand-hover);
    border-color: var(--color-brand-hover);
}

.top-up-icon-spacing {
    margin-left: 1.5rem;
}

.top-up-bank-account-information.table tr {
    border: none;
}

.top-up-bank-account-information.table td {
    padding: 0 var(--padding-xs) 0 0 !important;
}

.top-up-total-amount {
    background-color: #CCF3E7;
    padding: 2px var(--spacing-sm);
    border-radius: var(--border-radius-sm);
}

label.btn.btn-light, label.btn.btn-info {
    background-color: var(--main-background);
    border-color: var(--border-color);
    padding: 0.5rem 1rem;
}

.btn-check:checked + .btn-info, .btn-check:focus + .btn-info, .btn-info:focus {
    background-color: #7764E4;
    border-color: #7764E4;
    box-shadow: none;
}

.btn-with-arrow.btn-info {
    overflow: visible !important;
    position: relative;
}

.btn-with-arrow.btn-info:after {
    background: var(--card-light-grey);
    display: block;
    content: '';
    position: absolute;
    bottom: -38px;
    left: calc(50% - 10px);
    transform: rotate(45deg);
    width: 1.5rem;
    height: 1.5rem;
    border-left: 1px solid var(--border-color);
    border-top: 1px solid var(--border-color);
    clip-path: polygon(0 0, 0% 100%, 100% 0);
    z-index: 20;
    cursor: default;
}

.container-with-arrow {
    margin-bottom: 1.5rem;
}

.form-control.arrow-background-color {
    background-color: var(--card-light-grey);
}

.btn-check:checked + .btn-primary {
    background-color: #374557;
    border-color: #374557;
    box-shadow: none;
}

.btn-check:not(:checked) + .btn-info {
    color: #000;
}

.alert-notes {
    background-color: #71A6C65E;
}

.cursor-pointer {
    cursor: pointer;
}

.pricing-specific {
    background-color: #6f6;
}

.pricing-unspecified {
    background-color: #ff0;
}

.pricing-exclude {
    background-color: #f66;
}

.live-search {

}

.columns-card .columns-card-section .campaign-buttons-container {
    max-width: 775px;
    margin-bottom: 1.5rem;
}

.radio-input-like-button label.btn {
    width: 160px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0.5rem 0.5rem;
}

.radio-input-like-button label.btn.full-width-btn {
    width: 100%;
}

.segmentations-categories {
    height: 28rem;
}

.form-select {

}

select.form-select.select-route-code {
    background-color: #fefefe;
    border: 1px solid var(--border-color);
    border-radius: 0.3rem;
    padding: 0.75rem 0.75rem;
}

.sms-price, .alert_threshold {
    max-width: 6rem;
    padding: 0.375rem 0.72rem 0.375rem 0.72rem;
    color: #212529;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
}

.sms-price.search {
    max-width: 10rem;
    margin-right: var(--spacing-sm);
}

.sms-price.filter {
    max-width: 10rem;
    margin-left: var(--spacing-sm);
}

.sms-price:disabled, .alert_threshold:disabled {
    background-color: #e9ecef;
    opacity: 1;
}

.sms-price.equal {
    color: var(--bs-blue);
    border: 1px solid var(--bs-blue);
}

.sms-price.over {
    color: var(--bs-success);
    border: 1px solid #7a7;
}

.checked {
    background-color: lightgreen;
}

.sms-price.under {
    color: var(--bs-danger);
    border: 1px solid var(--bs-danger);
}

.sms-price.excluded {
    color: var(--bs-warning);
    border: 1px solid var(--bs-warning);
}

.country-selection {
    padding: 0.25rem 0.5rem;
    border-radius: 0.5rem;
    margin-bottom: 0.125rem;
}

td.checkbox {
    width: 1%;
}

.action-icons {
    width: 1%;
}

td.min, th.min {
    width: 1%;
}

td.width-sm, th.width-sm {
    width: 300px;
}

td.width-xs, th.width-xs {
    width: 120px;
}

td.width-xxs, th.width-xxs {
    width: 100px;
}

tr.separator td {
    background-color: var(--table-separator-bg);
}

/* No idea why it works that way */
.table-hover > tbody > tr.separator:hover > * {
    --bs-table-bg-state: var(--bs-table-hover-bg);
}

/**
 * Experiments
 */
/*
input[type="text"], textarea {
    box-shadow: 0 0 6px 2px rgba(100, 100, 100, 0.1) !important;
}
 */

/**
*   Custom Scrollbar
*/
.custom-scrollbar {
    float: left;
    width: 100%;
    max-height: 300px;
    padding-right: 1rem;
    overflow-y: auto;
    scrollbar-color: #aaa #FFF0;
}

.custom-scrollbar.with-border {
    border: var(--border-2);
    border-radius: var(--border-radius-md);
}

.custom-scrollbar.long {
    max-height: 405px;
}

.custom-scrollbar.longer {
    max-height: 500px;
    padding-right: 0.3rem;
}

.custom-scrollbar.pricing-longer {
    max-height: 525px;
    padding-right: 0.3rem;
}

.custom-scrollbar.xl {
    max-height: 1000px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 25px;
}

.custom-scrollbar::-webkit-scrollbar {
    width: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    border-radius: 25px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
    background-color: #ccc;
}

.form-fields .custom-scrollbar, .form-preview .custom-scrollbar {
    max-height: 650px;
}

.profile-point {
    width: 0.5rem;
    height: 0.5rem;
    border: 1px solid #000;
}

.profile-point.active {
    background: #00ff80;
}

.pricelist-version-container {
    position: relative;
}

.pricelist-version {
    border-radius: 1rem;
    padding: 0.25rem 0.6rem;
    text-align: center;
    margin-right: 0.25rem;
    text-decoration: none;
    font-weight: 400;
}

.pricelist-version.latest-version {
    color: var(--main-background);
    background-color: var(--bs-success);
}

.pricelist-version.published-version {
    color: var(--main-background);
    background-color: var(--palette-color-6);
}

.pricelist-version.draft-version {
    color: var(--main-background);
    background-color: var(--palette-color-3);
}

.pricelist-version.archived-version {
    color: var(--main-background);
    background-color: var(--bs-yellow);
}

.pricelist-version.pricelist-version-damage-alert:after {
    display: block;
    background: var(--bs-danger);
    width: 0.71rem;
    height: 0.71rem;
    position: absolute;
    bottom: -0.4rem;
    right: 0.2rem;
    border-radius: 1rem;
    outline: 0.0375rem solid var(--main-background);
    outline-offset: 0;
    content: '!';
    color: var(--main-background);
    font-size: 0.45rem;
    font-weight: bolder;
}

.fancy-checkbox input[type=checkbox] {
    display: none;
}

.fancy-checkbox input[type=checkbox] + label {
    display: inline-block;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --%3E%3Cpath d='M144 144v48H304V144c0-44.2-35.8-80-80-80s-80 35.8-80 80zM80 192V144C80 64.5 144.5 0 224 0s144 64.5 144 144v48h16c35.3 0 64 28.7 64 64V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V256c0-35.3 28.7-64 64-64H80z'/%3E%3C/svg%3E");
    background-size: 50%;
}

.fancy-checkbox input[type=checkbox]:checked + label {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3C!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --%3E%3Cpath d='M352 144c0-44.2 35.8-80 80-80s80 35.8 80 80v48c0 17.7 14.3 32 32 32s32-14.3 32-32V144C576 64.5 511.5 0 432 0S288 64.5 288 144v48H64c-35.3 0-64 28.7-64 64V448c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V256c0-35.3-28.7-64-64-64H352V144z'/%3E%3C/svg%3E");
    display: inline-block;
    background-size: 50%;
}

.country-pricing.form-check-input, .inline-check-box.form-check-input {
    margin: auto !important;
}

.warning-margin-right {
    margin-right: 0.25rem !important;
}

.warning-margin-left {
    margin-left: 0.25rem !important;
}

code {
    font-size: 0.8rem;
    padding: 0.1rem;
    border-radius: var(--border-radius-sm);
}

code.viber-code {
    letter-spacing: 0.1rem;
    color: #260d0d;
}

.colorbox-block {
    align-items: center;
    width: 80px;
    display: inline-grid;
    margin-right: var(--padding-sm);
    text-align: center;
}

.colorbox {
    align-items: center;
    width: 55px;
    height: 55px;
    display: inline-block;
    margin: auto;
}

.btn:focus, .form-check-input:focus {
    box-shadow: none !important;
}

.no-margin-bottom {
    margin-bottom: 0 !important;
}

optgroup {
    padding-left: 8px;
}

.forms-fields-icons a {
    margin-right: var(--spacing-xs);
}

.highcharts-figure.small {
    height: 372px !important;
}

.highcharts-figure.x-small {
    height: 342px !important;
}

.highcharts-figure.width-70 {
    width: 70%;
    margin: auto;
}

.highcharts-figure.width-80 {
    width: 80%;
    margin: auto;
}

.icon-default-color {

}

.colorbox.brand {
    background: var(--color-brand);
}

.colorbox.brand-darker {
    background: var(--color-brand-hover);
}

.colorbox.primary {
    background: var(--bs-primary);
}

.colorbox.danger {
    background: var(--bs-danger);
}

.colorbox.warning {
    background: var(--bs-warning);
}

.colorbox.info {
    background: var(--bs-info);
}

.colorbox.secondary {
    background: var(--bs-secondary);
}

.colorbox.success {
    background: var(--bs-success);
}

.colorbox.palette-color-1 {
    background: var(--palette-color-1);
}

.colorbox.palette-color-2 {
    background: var(--palette-color-2);
}

.colorbox.palette-color-3 {
    background: var(--palette-color-3);
}

.colorbox.palette-color-4 {
    background: var(--palette-color-4);
}

.colorbox.palette-color-5 {
    background: var(--palette-color-5);
}

.colorbox.palette-color-6 {
    background: var(--palette-color-6);
}

.colorbox.palette-color-7 {
    background: var(--palette-color-7);
}

.colorbox.palette-color-8 {
    background: var(--palette-color-8);
}

.colorbox.palette-color-9 {
    background: var(--palette-color-9);
}

.colorbox.palette-color-10 {
    background: var(--palette-color-10);
}

.colorbox.palette-color-11 {
    background: var(--palette-color-11);
}

.colorbox.palette-color-12 {
    background: var(--palette-color-12);
}

.colorbox.palette-color-13 {
    background: var(--palette-color-13);
}

.colorbox.cancel {
    background: var(--color-cancel);
}

.currency-nowrap {
    white-space: nowrap;
}

.custom-dropdown .dropdown-toggle::after {
    display: none;
}

.custom-disabled-btn {
    color: #374557 !important;
    border-color: #374557;
}

.preserve-spaces {
    white-space: pre-wrap !important; /* or 'pre' */
}

.pre-line {
    white-space: pre-line !important;
}

.data-set-view-td {
    max-height: 160px;
}

.dlr.dlr-delivered {
    color: var(--palette-color-positive);
}

.dlr.dlr-undelivered {
    color: var(--palette-color-negative);
}

.dlr.dlr-in_progress {
    color: var(--palette-color-14);
}

.color-bar-holder {
    position: relative;
}

.color-bar {
    display: flex;
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    height: 0.25rem;
    /*opacity: 0.1;*/
}

.color-bar .part {
    height: 100%;
}

.flatpickr-wrapper {
    width: 100%;
}

.dropdown-toggle::after {
    margin-left: 0.75rem;
    vertical-align: middle;
}

.left-align {
    text-align: left;
}

.muted-id {
    opacity: 0.5;
    font-size: smaller;
}

.panel.presentation .card img {
    max-width: 100%;
}

.tile-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    height: 70px;
    width: 70px;
    border: 1px solid var(--border-color);
    border-radius: 50%;
}

.btn-brand-bg {
    color: var(--main-background);
    background-color: var(--color-brand);
    border-color: var(--main-background);
}

.btn-brand-bg:hover {
    color: var(--color-brand);
    background-color: var(--main-background);
    border-color: var(--main-background);
}

.card-brand,
.card-brand .card-header {
    background: var(--color-brand);
    color: var(--main-background);
    border: none;
}

.api-card .tile-icon {
    background-color: var(--main-background);
    color: var(--color-brand);
    font-size: 1.2rem;
    height: 60px;
    width: 60px;
}

.tile-icon-brand-bg {
    background-color: var(--color-brand) !important;
    color: var(--main-background) !important;
    border: none;
}

.profile-organization-card .tile-icon {
    height: 60px;
    width: 60px;
}

.banner-container {
    background: var(--color-brand);
    color: var(--palette-font-color-1);
    overflow: hidden;
    border: none;
}

.banner-container .title {
    padding: var(--spacing) 0 var(--spacing) var(--spacing-sm);
}

.banner-container .image-wrapper {
    display: flex;
    align-items: center;
    height: auto;
    max-width: 100%;
    justify-content: start;
}

.banner-container .image-wrapper img {
    max-height: 100%;
    max-width: 100%;
    width: auto;
    height: auto;
}

.promotional-container {
    background: var(--palette-color-16);
    color: var(--palette-font-color-1);
    border: none;
}

.promotional-container .card-img {
    margin-top: var(--spacing-xs);
    margin-bottom: var(--spacing-sm);
}

.promotional-container .promotional-btn {
    width: 90%;
    max-width: 180px;
    padding: var(--padding-xs) var(--padding);
    border-radius: calc(var(--border-radius) - var(--spacing-xs)) !important;
    background-color: var(--palette-color-16);
    border: var(--border);
    border-color: var(--palette-font-color-1);
    color: var(--palette-font-color-1);
    margin: 0 0 var(--spacing-sm) 0;
}

.promotional-container .promotional-btn:last-child {
    margin-bottom: 0;
}

.promotional-container .promotional-btn:hover {
    background-color: var(--palette-font-color-1);
    color: var(--palette-color-16);
}

.console-accounts {
    margin-bottom: var(--spacing);
}

.console-accounts .collapsing {
    -webkit-transition: none;
    transition: none;
    display: none;
}

.console-dashboard .application-container .tile-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    height: 70px;
    width: 70px;
    border: 1px solid var(--border-color);
    border-radius: 50%;
}

.app-tile {
    margin-bottom: var(--spacing);
}

.app-tile .card {
    height: 100%;
}

.app-tile .card:hover {
    cursor: pointer;
    background: #F6F7F8;
}

.app-tile h3 {
    font-weight: bold;
    margin-bottom: var(--spacing);
}

.app-tile-extended {
    max-width: 17.063rem !important;
    margin-bottom: 1rem !important;
}

.app-tile-extended .card {
    height: 100%;
}

.app-tile-extended .card:hover {
    cursor: pointer;
}

.row-spacing {
    row-gap: var(--spacing);
}

blockquote {
    border-radius: var(--border-radius);
    padding: var(--padding);
}

blockquote.blockquote-info {
    background-color: #EEF9FD;
    border-left: 0.5rem solid #2B83B8;
}

blockquote.blockquote-warning {
    background-color: #FFF8E6;
    border-left: 0.5rem solid #E6A700;
}

blockquote.blockquote-success {
    background-color: #E6F6E6;
    border-left: 0.5rem solid #009400;
}

blockquote.blockquote-error {
    background-color: #FED3CD;
    border-left: 0.5rem solid #F90847;
}

/* Onboarding Progress */
.onboarding-progress .card {
    overflow: hidden;
}

.onboarding-progress .onboarding-bg-theme-1 {
    margin-bottom: var(--spacing);
    background-image: url('../../images/decorations/shape_a.svg'), url('../../images/decorations/shape_b.svg');
    background-position: top center, right;
    background-repeat: no-repeat, no-repeat;
    background-size: 125px, contain;
}

.onboarding-progress .onboarding-left {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding-top: 0;
    padding-right: var(--spacing-lg);
}

.onboarding-progress .onboarding-right {
    margin-top: var(--spacing);
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.onboarding-progress .progress-meta {
    display: flex;
    margin-bottom: calc(var(--spacing-xs) / 2);
    gap: var(--spacing);
    align-items: end;
    font-size: 1.125rem;
}

.onboarding-progress .progress-status {
    color: #869BAB;
}

.onboarding-progress .onboarding-status {
    margin-top: auto;
}

.onboarding-progress .onboarding-right ul {
    list-style-type: none;
    padding: 0;
}

.onboarding-progress .onboarding-right li {
    margin-bottom: var(--spacing);
}

.onboarding-progress .onboarding-right li:last-child {
    margin-bottom: 0;
}

.onboarding-progress .onboarding-right li a {
    display: inline-flex;
    align-items: center;
}

.onboarding-progress .onboarding-right li i {
    font-size: 1.25rem;
    margin-right: var(--spacing-xs);
}

.onboarding-progress .onboarding-right li a:hover span {
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}

@media (max-width: 991.98px) {
    .onboarding-progress .onboarding-left {
        padding-top: 4rem;
        padding-right: unset;
    }

    .onboarding-progress .onboarding-right {
        justify-content: start;
        align-items: center;
    }

    .onboarding-progress .onboarding-bg-theme-1 {
        background-position: top left 2rem, right;
        margin-bottom: var(--spacing-lg);
    }
}

/**
 * Documentation
 */
.left-menu-container.documentation .left-menu-documentation-link a {
    border-radius: var(--border-radius-layout);
    color: var(--color-brand);
    font-weight: bold;
}

.left-menu-container.documentation .left-menu-documentation-link.active a {
    background: var(--palette-color-19);
    border-radius: calc(var(--border-radius) / 2);
}

.left-menu-container.documentation .left-menu-documentation-link a.nav-link {
    padding: var(--spacing-xs);
}

.left-menu-container.documentation .left-menu ul .nav-link {
    padding-left: var(--spacing-xs);
}

.left-menu-container.documentation .left-menu ul ul {
    padding-left: 1.25rem;
}

.api-documentation .dashboard-img {
    width: 100%;
    height: 100%;
    max-height: 300px;
}

.api-documentation .tile-icon-wrapper {
    height: 55px;
    width: 55px;
    border: var(--border);
    border-radius: 50%;
    overflow: hidden;
    text-align: center;
    text-align: -webkit-center;
    text-align: -moz-center;
    align-content: center;
}

.mask-icon {
    background-color: currentColor;
    mask-size: 100%;
    -webkit-mask-size: 100%;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
    mask-origin: border-box;
    -webkit-mask-origin: border;
    width: 25px;
    height: 25px;
}

.mask-icon.rocket-launch {
    mask-image: url('../../images/icons/rocket-launch-light.svg');
    -webkit-mask-image: url('../../images/icons/rocket-launch-light.svg');
}

.mask-icon.api {
    mask-image: url('../../images/icons/api.svg');
    -webkit-mask-image: url('../../images/icons/api.svg');
}

.mask-icon.gears {
    mask-image: url('../../images/icons/gears-light.svg');
    -webkit-mask-image: url('../../images/icons/gears-light.svg');
}

.mask-icon.triangle-exclamation {
    mask-image: url('../../images/icons/triangle-exclamation-light.svg');
    -webkit-mask-image: url('../../images/icons/triangle-exclamation-light.svg');
}

.documentation-quickstart .quickstart-steps .quickstart-step {
    cursor: pointer;
    margin-bottom: 0;
}

.documentation-quickstart .quickstart-steps .quickstart-step .step-number {
    font-size: 1.25rem;
    font-weight: bold;
    margin-bottom: var(--spacing-xs);
}

.documentation-quickstart .quickstart-steps .quickstart-step .step-title {
    font-size: 1rem;
}

.documentation-quickstart .quickstart-steps .quickstart-step.active .card {
    background: var(--palette-color-19);
}

.documentation-quickstart article ol li,
.documentation-quickstart article ul li {
    margin-bottom: var(--spacing-xs);
}

.documentation-contents-table {
    border: var(--border);
    border-radius: var(--border-radius-layout);
    padding: var(--spacing);
    margin: 0 0 var(--layout-margin) var(--layout-margin);
    float: right;
    width: 300px;
}

.documentation-contents-table ul {
    margin-bottom: 0;
}

.documentation-contents-table ul li {
    margin-bottom: var(--spacing-xs);
}


.documentation-route {
    border-radius: var(--border-radius-layout);
    background-color: var(--bg-code-head);
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    border-color: #f00;
}

.documentation-route-wrapper {
    display: flex;
    width: 100%;
    padding: var(--padding-sm);
    align-items: center;
}

.documentation-input {
    width: 100%;
    margin-bottom: 0;
    padding: var(--spacing-sm);
}

.documentation-methods {
    display: flex;
    border-radius: var(--border-radius);
    padding-right: var(--spacing-xs);
}

.documentation-method {
    padding: 0 calc(var(--spacing-xs) / 2);
    border-radius: var(--border-radius-sm);
    margin: 0 4px;
}

.documentation-method:first-child {
    margin-left: 0;
}

.documentation-method.method-post {
    background-color: #248fb2;
    color: #fff;
}

.documentation-method.method-get {
    background-color: #6bbd5b;
    color: #fff;
}

.documentation-method.method-put {
    background-color: #9b708b;
    color: #fff;
}

.documentation-method.method-patch {
    background-color: #e09d43;
    color: #fff;
}

.documentation-method.method-delete {
    background-color: #db4b4b;
    color: #fff;
}

.documentation-method.webhook {
    background-color: #b0c;
    color: #fff;
}

.documentation-method.method-info {
    background-color: #5bc0de;
    color: #fff;
}

.documentation-url {
    color: var(--color-code);
    font-family: monospace;
    padding: calc(var(--padding-xs) / 2) 0;
}

.documentation-access {
    margin-left: auto;
    background-color: var(--bs-body-bg);
    padding: calc(var(--padding-xs) / 2) var(--padding-xs);
    border-radius: var(--border-radius);
}

.documentation-route-container .table.table-data th {
    background-color: var(--border-color);
    color: var(--color);
    font-size: inherit;
}

.documentation-route-container .table.table-data td {
    background-color: var(--bs-body-bg);
}

.documentation-sample {
    border: var(--border);
    border-radius: var(--border-radius-layout);
    padding: var(--spacing-sm) var(--spacing);
}

.documentation-sample.success {
    background-color: #C8FADA;
    color: #00A97D;
    border-color: #00A97D;
}

.documentation-sample.error {
    background-color: #FED3CD;
    color: #F90847;
    border-color: #F90847;
}

.documentation-sample-title {
    margin-bottom: 0;
}

.documentation-sample-title span {
    margin-left: var(--spacing-sm);
}

.documentation-sample:not(:has(.collapsed)) .documentation-sample-title i {
    transform: rotate(90deg);
}

.documentation-sample-content {
    padding-top: var(--spacing);
    padding-bottom: var(--spacing-sm);
}

.documentation-sample-addon {
    background: var(--bg-code-head);
    margin-bottom: 0;
}

.documentation-sample-request {
    background: var(--bg-code-body);
}

.documentation-sample-response {
    background: var(--bg-code-body);
}

.documentation-request-header {
    font-family: monospace;
}

.documentation-header-wrapper {
    display: flex;
}

.documentation-header-title {
    display: block;
    padding: 0 calc(var(--spacing-xs) / 2);
    margin-right: var(--spacing-xs);
    border-radius: var(--border-radius-sm);
    background-color: #757575;
    color: #fff;
}

/**
Plans
 */
.promoted-plan-header {
    font-weight: bold;
    text-align: center;
}

.promoted-card {
}

.promoted-card .card-header {
    padding-top: 20px; /* Add space for the promotion label */
}

.promoted-card .promoted-plan-header {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #FFD700; /* Gold color for label background */
    color: #fff;
    padding: 5px 10px;
    border-radius: 0.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 90%; /* Limit the width to prevent overflow */
}

.promoted-card-btn:hover {
    opacity: 0.9;
}

.ribbon {
    font-weight: bold;
    max-width: 90%;
    width: fit-content;
    color: var(--main-background);
    position: relative;
    top: 15px;
    left: calc(-1 * .5rem);
    padding-inline: .5rem;
    line-height: 1.8;
    background: var(--color-brand);
    border-bottom: .5em solid var(--color-brand);
    border-right: .8em solid var(--color-brand);
    clip-path: polygon(calc(100% - .8em) 0, 0 0, 0 calc(100% - .5em), .5em 100%,
    .5em calc(100% - .5em), calc(100% - .8em) calc(100% - .5em),
    100% calc(50% - .5em / 2));
}

.subscription-card .subscription-pricing {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-xs);
}

.subscription-card .subscription-pricing-number {
    font-size: 2.5rem;
}

.subscription-card .subscription-pricing-text {
    font-size: 1.25rem;
}

.subscription-card ul li {
    padding-right: 0;
    padding-left: 0;
    border: none;
}

.subscription-card hr {
    color: var(--color-faded);
    opacity: 0.15;
    margin-bottom: var(--spacing-xs) !important;
}

.active-bundle .bundle-price {
    font-size: 1.5rem;
}

.tile-hover:hover {
    cursor: pointer;
    background: #F6F7F8;
}

.audience-contacts,
.audience-optins,
.quick-access-card .row {
    grid-row-gap: var(--spacing);
}

.audience-contacts .row {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.audience-contacts .card {
    justify-content: space-between;
    height: 100%;
}

.audience-contacts .contacts-meta {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--spacing);
    align-items: center;
}

.audience-contacts .contacts-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    width: 50px;
    padding: var(--spacing-sm);
    aspect-ratio: 1;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    font-size: 1.4rem;
    background-color: var(--palette-color-19);
}

.simple-timeline-container {
    display: flex;
    justify-content: space-between;
    position: relative;
    width: 100%;
}

.simple-timeline-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.simple-timeline-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--palette-color-19);
    border-radius: 50%;
    width: 80px;
    height: 80px;
    border: 4px solid;
    z-index: 1;
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.simple-timeline-item.active .simple-timeline-icon {
    border-color: var(--palette-color-6);
}

.simple-timeline-item.upcoming .simple-timeline-icon {
    border-color: var(--border-color);
}

.simple-timeline-line-background {
    position: absolute;
    top: calc((80px - 4px) / 2);
    width: 90%;
    height: 4px;
    margin-left: 5%;
    background-color: var(--border-color);
    z-index: 0;
}

.simple-timeline-line-background.progress {
    background-color: var(--palette-color-6);
}

.finished-label {
    font-size: 1rem;
    color: var(--palette-color-6);
    font-weight: bold;
}

.channel-card-bottom {
    /*margin-bottom: 3.75rem; !important*/
}

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

.stats-tile .main-number {
    font-size: 2rem;
}

.stats-tile .statuses-number {
    font-size: 1.5rem;
}

.stats-tile .legend {
    font-size: 1rem;
    color: var(--color-faded);
}

.stats-tile .second-number {
    font-size: 1rem;
    /*color: var(--color-faded);*/
}

.stats-tile .response-text {
    font-size: 1.25rem;
    /*color: var(--color-faded);*/
}

.stats-tile .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px;
    width: 80px;
    padding: var(--spacing-sm);
    border: var(--border);
    border-radius: 50%;
    font-size: 2rem;
    background-color: var(--palette-color-19);
}

.stats-tile .icon.light {
    background-color: transparent;
}

.audience-contacts .contacts-number {
    font-size: calc(var(--card-font-size) * 1.5);
    font-weight: bold;
}

.stats-tile.vertical {
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
}

.audience-contacts .contacts-label {
    font-weight: bold;
    color: var(--color-faded);;
    margin-top: auto;
}

.audience-optins .optins-meta {
    display: flex;
    justify-content: space-between;
    font-weight: bold;
    margin-bottom: var(--spacing-xs);
    font-size: var(--card-font-size);
}

.quick-access-card .access-tile {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm);
}

.quick-access-card .card {
    height: 100%;
    justify-content: center;
}

.quick-access-card .card:hover {
    background: #F6F7F8;
}

.quick-access-card .tile-text {
    color: var(--color-faded);
    font-weight: bold;
    padding-right: 2px;
}

.quick-access-card .tile-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    width: 50px;
    padding: var(--spacing-sm);
    aspect-ratio: 1;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    font-size: 1.1rem;
}

/* Statistics */
.card.channel-statistics .tile-icon{
    width: 60px;
    height: 60px;
    font-size: 2rem;
    background-color: var(--palette-color-19);
}
.card.channel-statistics .main-number {
    font-size: 2rem;
}
.card.channel-statistics .second-number {
    font-size: 1rem;
}
.card.channel-statistics .statuses-number {
    font-size: 1.5rem;
}
.card.channel-statistics .legend {
    font-size: 1rem;
    color: var(--color-faded);
}
.card.channel-statistics .status-delivered {
    color: var(--message-delivered);
}
.card.channel-statistics .status-not-delivered {
    color: var(--message-not-delivered);
}
.card.channel-statistics .status-pending {
    color: var(--message-pending);
}
.card.channel-statistics figure > div {
    height: 250px;
}

@media (min-width: 1200px) and (max-width: 1800px) {
    .row .col-xl-3:has(.card.channel-statistics) {
        width: 50%;
    }
}
@media (min-width: 1200px) and (max-width: 1600px) {
    .row .col-xl-4:has(.card.channel-statistics) {
        width: 50%;
    }
}

/* FAQs */
.faqs-banner {
    background-image: url('../../images/decorations/shape_c.svg');
    background-position: right;
    background-repeat: no-repeat;
    background-size: contain;
}

.faqs-card div.collapsed span[data-action="collapse"] {
    display: none;
}

.faqs-card span[data-action="expand"],
.faqs-card span[data-action="collapse"] {
    display: none;
}

.faqs-card div:has(+ .collapse:not(.show)) span[data-action="expand"] {
    display: inline;
}

.faqs-card div:has(+ .collapse.show) span[data-action="collapse"] {
    display: inline;
}

.faqs-card .faq-content {
    margin-top: var(--spacing-sm);
}

.faqs-card .faq-content p:last-child {
    margin-bottom: 0;
}

.card-header-inner .tracked-link {
    font-size: 1rem;
    text-decoration: none;
    color: var(--palette-color-11);
}

.card-header-inner .tracked-link:hover {
    text-decoration: underline; /* Optional: underline when hovered */
}

.card.channel-metrics-card {
    height: 320px;
}

.vertical-separator-line {
    border-left: 1px solid var(--border-color);
    height: 100%;
}

/* Banners */
.banner.banner-bg-theme-1 {
    background-image: url('../../images/decorations/shape_c.svg');
    background-position: right;
    background-repeat: no-repeat;
    background-size: contain;
}

.banner.banner-bg-theme-2 {
    background-image: url('../../images/decorations/shape_e.svg'), url('../../images/decorations/shape_f.svg');
    background-repeat: no-repeat, no-repeat;
    background-size: contain, 50px 50px;
    background-position: center left -50px, center right -25px;
}

.welcome-modal .banner {
    border-radius: var(--border-radius);
    background-color: var(--palette-color-15);
    height: 100px;
    position: relative;
    margin-bottom: calc(var(--spacing) + 40px);
}

.welcome-modal .banner-logo {
    position: absolute;
    bottom: -40px;
    left: 50%;
    transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    border: var(--border);
    border-radius: 50%;
    width: 80px;
    height: 80px;
    background-color: var(--main-background);
    background-image: url('../../images/icons/logo.svg');
    background-repeat: no-repeat;
    background-size: 50%;
    background-position: center;
}

.presentation .whatsapp-banner img {
    top: 18px;
}

/* Channel Activation Form */
.hero-channel-image {
    display: grid;
}

.hero-channel-image > * {
    grid-area: 1 / 1 / 2 / 2;
}

.hero-channel-image img {
    width: 100%;
    height: auto;
    display: block;
}

.hero-channel-info {
    display: grid;
    align-self: center;
    justify-self: center;
    justify-items: center;
    row-gap: 0.8rem;
    max-width: 90%;
    width: 25rem;
    text-align: center;
    z-index: 999;
}

.hero-channel-info strong {
    font-size: clamp(1rem, 1vw, 1.5rem);
    line-height: 1.2;
}

.hero-channel-info p {
    font-size: clamp(0.8rem, 1vw, 0.5rem);
}

.hero-channel-info img {
    max-width: 30vw;
    width: 50%;
    margin-top:0.5rem;
}

/* Webhook - Endpoints */
.webhook-endpoint {
    border-radius: var(--border-radius-layout);
    background-color: var(--bg-code-head);
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    border-color: #f00;
}

.webhook-endpoint-wrapper {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: var(--padding-sm);
    align-items: center;
    color: var(--color-code);
}

.endpoint-url {
    font-family: monospace;
    padding: calc(var(--padding-xs) / 2) var(--spacing-sm);
}

.endpoint-text {
    background-color: #b0c;
    color: #fff;
    padding: calc(var(--spacing-xs) / 2);
    border-radius: var(--border-radius-sm);
}

.status.endpoint-status-active {
    color: var(--palette-font-color-1);
    background-color: var(--palette-color-6);
}

.status.endpoint-status-paused {
    color: var(--palette-font-color-1);
    background-color: var(--palette-color-14);
}

.status.endpoint-status-inactive {
    color: var(--palette-font-color-1);
    background-color: var(--palette-color-8);
}

.endpoint-health {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin: auto;
}

.endpoint-health.status-up {
    background-color: var(--palette-color-positive);
}

.endpoint-health.status-unstable {
    background-color: var(--palette-color-14);
}

.endpoint-health.status-down {
    background-color: var(--palette-color-negative);
}

.endpoint-actions {
    display: flex;
    justify-content: center;
    font-size: 1.4rem;
}

.endpoint-counters {
    font-size: 1.5rem;
}

.client-sortable .sorting-title {
    cursor: pointer;
}

*[data-tpl=data-table-top] > div > * {
    margin-bottom: var(--spacing-xs);
}

*[data-tpl=data-table-top] > .d-flex {
    align-items: flex-end;
}

*[data-tpl=data-table-top] > .d-flex .btn-group-filters i {
    display: initial;
}

*[data-tpl=data-table-top] > .d-flex .input-group {
    flex-wrap: nowrap;
}

.clipboard-copy-icon {
    margin-left: var(--spacing-xs);
}

[v-cloak] {
    display: none;
}

button .icon-placeholder .fa-light, .icon-button i {
    margin: 0 !important;
}

/*
-----------------------------------------------------------
 */
/**[data-tpl] {
    border: 1px dashed #000 !important;
}

*[data-tpl=item-card] {
    border: 1px dashed #000;
}

!* like app-access-card-console without (.console class) *!
*[data-tpl=item-card-simple] {
    border: 1px dashed #000;
}

*[data-tpl=details-card] {
    border: 1px dashed red;
}

!*not in showcase *!
!*with or without button in the end *!
*[data-tpl=results-table-card] {
    border: 1px dashed red !important;
}

!*not in showcase *!
*[data-tpl=results-contacts-card] {
    border: 1px dashed yellow !important;
}

*[data-tpl=create-edit-card] {
    border: 1px dashed #000 !important;
}

*[data-tpl=billing-card-expanded] {
    border: 1px dashed #000;
}

*[data-tpl=billing-card-expanded-details] {
    border: 1px dashed #000;
}

*[data-tpl=billing-card-colapsed] {
    border: 1px dashed #000;
}

*[data-tpl=account-card] {
    border: 1px dashed #000;
}

*[data-tpl=app-access-card] {
    border: 1px dashed #000;
}

*[data-tpl=app-access-card-console] {
    border: 1px dashed #000;
}

*[data-tpl=contact-card] {
    border: 1px dashed #000 !important;
}

*[data-tpl=info-card-item] {
    border: 1px dashed #000 !important;
}

*[data-tpl=info-card-paragraph] {
    border: 1px dashed green !important;
}

*[data-tpl=modal-toggler] {
    border: 2px dashed purple !important;
}

*[data-tpl=read-modal] {
    border: 1px dashed green !important;
}

*[data-tpl=form-modal] {
    border: 3px dashed red !important;
}

*[data-tpl=info-modal] {
    border: 1px dashed red !important;
}

*[data-tpl=delete-modal] {
    border: 1px dashed green !important;
}

*[data-tpl=confirmation-modal] {
    border: 1px dashed green !important;
}

[data-tpl=mobile-preview-card] {
    border: 1px dashed green !important;
}

[data-tpl=form-range-group] {
    border: 1px dashed green !important;
}

[data-tpl=form-colorpicker-group] {
    border: 1px dashed green !important;
}*/