// Variables
@import 'variables';
@import 'fonts';

/* Page Loader S */
    .loader-main {
        position: fixed;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 9999;
        background-color: #ffffff;
    }
    .loader-box {
        display: flex;
        align-items: center;
    }
    .loader-19 {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        display: inline-block;
        border-top: 4px solid #696969;
        border-right: 4px solid transparent;
        -webkit-animation: rotation 1s linear infinite;
        animation: rotation 1s linear infinite;
    }
    .loader-19:after {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        border-left: 4px solid #5e5e5e;
        border-bottom: 4px solid transparent;
        animation: rotation 0.5s linear infinite reverse;
    }
    @-webkit-keyframes rotation {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(360deg);
        }
    }
    @keyframes rotation {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(360deg);
        }
    }
    @-webkit-keyframes rotationBack {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(-360deg);
        }
    }
/* Page Loader E */

/* Global S */
    body {
        font-size: 16px;
        background-color: $admin-body-bg;
        // font-family: $font-family-sans-serif;
    }
    .text-center {text-align: center;}
    .text-right {text-align: right;}
    a {
        text-decoration: none;
        transition: all 0.3s;
        color: $grey-color;
        &:hover {
            color: $content-color;
        }
    }
    small {
        font-size: 13px;
    }
    p.light, .light {
        color: $content-color;
        opacity: 0.5;
    }
    img {
        max-width: 100%;
        display: block;
    }
    .w-full {width: 100%;}
    .form-group {
        position: relative;
        label.error {
            position: absolute;
            bottom: -18px;
            left: 0px;
            font-size: 12px;
            line-height: normal;
            color: $error-color;
        }
        input[type="range"] {width: 100%;}
        // input[type="range"] {
        //     -webkit-appearance: none;
        //     width: 100%;
        //     height: 30px;
        //     background: #ececec;
        //     outline: none;
        //     opacity: 0.7;
        //     -webkit-transition: .2s;
        //     transition: opacity .2s;
        //     border-radius: 30px;
        //     overflow: hidden;
        // }
        // input[type="range"]:hover {
        //     opacity: 1;
        // }
        // input[type="range"]::-webkit-slider-thumb {
        //     -webkit-appearance: none;
        //     appearance: none;
        //     width: 25px;
        //     height: 25px;
        //     background: $btn-outline-color;
        //     cursor: pointer;
        //     border-radius: 50%;
        //     box-shadow: -407px 0 0 400px rgba($content-color, 50%);
        // }
        // input[type="range"]::-moz-range-thumb {
        //     width: 25px;
        //     height: 25px;
        //     background: $btn-outline-color;
        //     cursor: pointer;
        //     border-radius: 50%;  
        //     box-shadow: -407px 0 0 400px rgba($content-color, 50%);
        // }         
    }
    select.form-control {
        padding-top: 0.375rem;
        padding-bottom: 0.375rem;
        font-size: 15px;
    }
    .form-control {
        font-size: 15px;
        min-height: 40px;
        padding: 0 12px;
        background-color: transparent;
        border-radius: $border-radius;
        // color: $grey-color;
        color: rgba($content-color, 100%);
        &::-ms-input-placeholder {
            color: $content-color;
            opacity: 0.5;
            font-size: 14px;
        }
        &::placeholder {
            color: $content-color;
            opacity: 0.5;
            font-size: 14px;
        }
        &:focus {
            background-color: transparent;
            box-shadow: unset;
            border-color: $content-color;
        }
        &.error {
            border-color: $error-color;
        }
    }
    textarea.form-control {
        min-height: 100px;
        padding: 12px 12px;
    }
    .btn {
        border: 1px solid;
        border-radius: 30px;
        padding: 5px 25px;
        transition: all 0.3s;
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        &:hover {
            // border-color: $btn-outline-color;
            // background-color: $btn-outline-color;
            // color: #ffffff;
            box-shadow: 5px 5px 10px 3px rgb(0 0 0 / 20%);
        }
        &:focus-visible {
            box-shadow: 5px 5px 10px 3px rgb(0 0 0 / 20%) !important;
        }
        &.btn-full {
            width: 100%;
            display: block;
        }
        &.btn-sm {
            font-size: 14px;
            min-height: 35px;
            padding: 4px 18px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        &.btn-primary {
            background-color: $content-color;
            border-color: $content-color;
            color: #ffffff;
            &:focus {
                background-color: $content-color;
                border-color: $content-color;
                color: #ffffff;
            }
        }
        &.btn-secondary {
            background-color: transparent;
            color: $content-color;
            border-color: $content-color;
            &:focus {
                background-color: transparent;
                color: $content-color;
            }
        }
        &.has-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            svg, i {
                margin-right: 5px;
                // transition: all 0.3s;
            }
            &:hover {
                svg {
                    fill: #ffffff;
                }            
            }
        }
        &.btn-customize {
            color: #ffffff !important;
            border-radius: 5.81px;
            padding: 5px 25px;
            &:hover {
                background-color: $content-color !important;
                border-color: $content-color !important;
            }
        }
    }
    .remove_header {
        .navbar {display: none;}
    }
    .icon {
        z-index: 999;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: $border-radius;
        color: rgba($content-color, 50%);
        width: 30px;
        height: 30px;
        cursor: pointer;
        transition: all 0.3s;
        svg {
            path {
                transition: all 0.3s;
                fill: rgba($content-color, 50%);
            }
        }
        &:hover {
            background-color: rgba($primary-color, 20%);
            color: rgba($content-color, 100%);
            svg {
                path {
                    fill: rgba($content-color, 100%);
                }
            }
        }
    }
    .offcanvas-header {
        border-bottom: 1px solid $outline-color;
        h5 {
            margin: 0px;
        }
    }
    .offcanvas-footer {
        padding: 1rem;
        text-align: right;
        border-top: 1px solid $outline-color;
    }
    @media (min-width: 991.99px) {
        ::-webkit-scrollbar {
            width: 5px;
            height: 5px;
        }
        ::-webkit-scrollbar-track {
            border-radius: 30px;
        }
        ::-webkit-scrollbar-thumb {
            background: #B2B2B2;
            border-radius: 30px;
        }
    }
    .icn-center {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .icn-center-block {
        display: block;
        text-align: center;
    }
    .switch {
        position: relative;
        display: inline-block;
        width: 40px;
        height: 22px;
        input { 
            opacity: 0;
            width: 0;
            height: 0;
            &:checked + .slider {
                background-color: $content-color;
            }
            &:focus + .slider {
                box-shadow: 0 0 1px rgba($content-color, 20%);
            }
            &:checked + .slider:before {
                -webkit-transform: translateX(18px);
                -ms-transform: translateX(18px);
                transform: translateX(18px);
            }
        }
        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            -webkit-transition: .4s;
            transition: .4s;
            &::before {
                position: absolute;
                content: "";
                height: 15px;
                width: 15px;
                left: 4px;
                bottom: 4px;
                background-color: white;
                -webkit-transition: .4s;
                transition: .4s;
            }
            &.round {
                border-radius: 34px;
                &::before {
                    border-radius: 50%;
                }
            }
        }
    }
    .heroSectiontabcontent ul, .heroSectiontabcontent ol, .manageullistylediv ul, .manageullistylediv ol {
        padding: 0;
        margin: 0;
        list-style-type: none;
    }

    @media (min-width: 1199.99px) {
        .hidden-xl {
            display: none !important;
        }
    }
    @media (max-width: 1199.98px) and (min-width: 991.99px) {
        .hidden-lg {
            display: none !important;
        }
    }
    @media (max-width: 991.98px) and (min-width: 767.99px) {
        .hidden-md {
            display: none !important;
        }
    }
    @media (max-width: 767.98px) and (min-width: 575.99px) {
        .hidden-sm {
            display: none !important;
        }
    }
    @media (max-width: 575.98px) {
        .hidden-xs {
            display: none !important;
        }
    }
    .two-line-ellipsis {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;  
        overflow: hidden;
    }

    // Checkbox S
        .checkbox-group {
            display: block;
            position: relative;
            padding-left: 35px;
            margin-bottom: 12px;
            cursor: pointer;
            font-size: 22px;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            input {
                position: absolute;
                opacity: 0;
                cursor: pointer;
                height: 0;
                width: 0;
            }
            .checkmark {
                position: absolute;
                top: 4px;
                left: 0;
                height: 20px;
                width: 20px;
                background-color: transparent;
                border: 1px solid $outline-color;
                cursor: pointer;
                &::after {
                    content: "";
                    display: none;
                    position: absolute;
                    left: 6px;
                    top: 2px;
                    width: 6px;
                    height: 11px;
                    border: solid white;
                    border-width: 0 2px 2px 0;
                    -webkit-transform: rotate(45deg);
                    -ms-transform: rotate(45deg);
                    transform: rotate(45deg);
                }
            }
            &:hover input ~ .checkmark {
                background-color: #ccc;
            }
            input:checked ~ .checkmark {
                background-color: #000000;
                &::after {
                    display: block;
                }
            }
            label {
                cursor: pointer;
                display: block;
            }
        }
    // Checkbox E
    
    .dropdown {
        .dropdown-menu-end {
            position: absolute;
            right: 0;
        }
        &.btn > {
            .dropdown-menu-end {
                top: 100%;
            }
        }
    }

    .mb-15 {
        margin-bottom: 15px !important;
    }
    :focus-visible {
        outline: none;
        box-shadow: none;
    }
    .form-select:focus {
        box-shadow: none;
        border-color: rgba($content-color, 100%);
    }

    .disabled {
        opacity: 0.3 !important;
        pointer-events: none;
    }
/* Global E */

/* Pagination S */
    .pagination {
        .page-link {
            color: $grey-color;
            font-size: 18px;
            font-weight: 500;
            i {
                font-size: 12px;
            }
            &:focus {
                box-shadow: unset;
            }
        }
        .page-item {
            display: flex;
            align-items: center;
            &.active, &:hover {
                .page-link {
                    // border-color: $btn-outline-color;
                    background-color: transparent;
                    color: #000;
                }
            }
            :is(&:first-child, &:last-child) .page-link {
                font-family: 'FontAwesome';
                font-size: 14px;
            }
            &.disabled .page-link {
                opacity: 0.5;
            }
            @media (max-width: 575.98px) {
                & .page-link::before {
                    font-family: 'Consolas';
                    font-size: 24px;
                    line-height: normal;
                    width: 30px;
                    height: 30px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    background: #fff;
                    box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 1px -0.1px, rgba(0, 0, 0, 0.055) 0px 1.98px 3.06px -0.36px;
                    border-radius: 5px;
                }
                &:nth-child(1) .page-link::before {
                    content: '<';
                }
                &:nth-child(2) .page-link::before {
                    content: '>';
                }
                .page-link {
                    padding: 0;
                    font-size: 0px !important;
                }
            }
        }
        @media (max-width: 575.98px) {
            width: 100%;
            display: flex;
            justify-content: space-between;

        }
    }
/* Pagination E */

/* Footer Sticky S */
    body:not(.remove_header) {
        .wrapper {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            .main {
                flex: 1 0 auto;
                padding: 60px 0;
                position: relative;
                @media (max-width: 1199.98px) {
                    padding: 30px 0px;
                }
            }
            footer {
                flex-shrink: 0;
            }
        }
    }
/* Footer Sticky E */

/* Signup | Login S */
    .remove_header {
        .main {
            min-height: 100vh;
        }
        .main {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 30px 0;
            background: $admin-body-bg;
        }
    }
    .signup_box {
        max-width: 420px;
        width: 100%;
        margin: 0 auto;
        padding: 30px 40px 30px;
        // background: #ffffff;
        position: relative;
        border-radius: $border-radius;
        // box-shadow: 0px 0px 20px rgb(151 151 151 / 10%);
        .logo_div {
            max-width: 200px;
            margin: 0 auto 70px;
        }
        .signup_title_sc {
            text-align: center;
            margin: 30px 0px 30px;
            .title {
                font-size: 18px;
                margin: 0px;            
                text-transform: uppercase;
                letter-spacing: 0.5px;
                color: $heading-color;
            }
            .sub_title {
                margin: 10px 0 0;
                color: $grey-color;
            }
        }        
        form {
            margin-bottom: 0px;
            .col-form-label {
                padding-top: 0px;
            }
            .eye_btn {
                width: 30px;
                height: 30px;
                position: absolute;
                right: 5px;
                top: 5px;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: $border-radius;
                color: rgba($content-color, 50%);
                &:hover {
                    background-color: rgba($primary-color, 20%);
                    color: rgba($content-color, 100%);
                }
                svg {
                    width: 15px;
                }
            }
            .btn_sc {
                text-align: center;
                .btn {
                    // width: 100%;
                    // max-width: 180px;
                    width: auto;
                    margin: 10px 0 45px;
                    min-width: 150px;
                    padding: 8px 25px;
                }
                .link_sc {
                    display: flex;
                    margin-top: 5px;
                    line-height: normal;
                    justify-content: center;
                    align-items: center;
                    a {
                        text-decoration: underline;
                    }
                }
            }
        }
        .privacy_link_sc {
            text-align: center;
            max-width: 300px;
            margin: auto;
            margin-top: 25px;
            font-size: 12px;
            line-height: normal;
            a {
                text-decoration: underline;
            }
        }
    }
/* Signup | Login E */

/* Admin Header S */
    .navbar-brand, .profile-sc {
        // width: 200px;
        width: 120px;
        padding: 0;
        @media (max-width: 575.98px) {
            width: 110px;
        }
    }
    .navbar-toggler:focus, button:focus:not(:focus-visible) {
        outline: none;
        box-shadow: unset;
    }
    .navbar {
        font-size: 18px;
        padding: 20px 0;
        z-index: 999;
        .dropdown-menu {
            border-radius: 5px;
            border: 1px solid rgba($content-color, 10%);
            box-shadow: none;
            background: #ffffff;
            min-width: 250px;
            padding: 0px;
            box-shadow: 0 .25rem .75rem 0 rgba(34,48,62,.14);
            .dropdown-profile-sc {
                padding: 20px 15px;
                border-bottom: 1px solid rgba($content-color, 10%);
                .d-p-grid {
                    display: flex;
                    align-items: center;
                    flex-wrap: wrap;
                    gap: 10px;
                    .img-box {
                        width: 50px;
                        height: 50px;
                        overflow: hidden;
                        border-radius: 50%;
                        img {
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                        }
                    }
                    .content-box {
                        width: calc(100% - 60px);
                        span {
                            display: block;
                            line-height: normal;
                            &.name {
                                font-weight: 600;
                                font-size: 16px;
                            }
                            &.desg {
                                font-size: 14px;
                                opacity: 0.5;
                            }
                        }
                        .nav-link {
                            justify-content: flex-start;
                        }
                    }
                }
            }
            .dropdown-item {
                padding: 10px 15px;
                font-size: 16px;
                // border-top: 1px solid rgba($content-color, 10%);
                &:active, &.active {
                    background-color: var(--bs-dropdown-link-hover-bg);
                    color: var(--bs-dropdown-link-hover-color); 
                }
                &.dropdown-item-border-bottom {
                    border-bottom: 1px solid rgba($content-color, 10%);
                }
            }
        }
        .nav-link:focus-visible {
            box-shadow: none;
        }
        @media (max-width: 1199.98px) {
            padding: 15px 0px;
        }
        @media (max-width: 767.98px) {
            padding: 10px 0px;
            .dropdown-menu {
                position: absolute;
            }
            .navbar-collapse {
                position: absolute;
                top: 100%;
                left: 0;
                width: 100%;
                background-color: #ffffff;
                padding-bottom: 10px;
                box-shadow: 0px 6px 10px #0000001c;
                border-top: 1px solid #0000002b;
                li {
                    padding: 10px 15px;
                    & + li {
                        border-top: 1px solid #0000002b;
                        &::before {
                            border-left: 0;
                        }
                    }
                }
                .dropdown-toggle::after {
                    margin-left: auto;
                }
                .dropdown-menu {
                    position: static;
                    border: 0;
                    .dropdown-item {
                        font-size: 17px;
                        padding: 10px 15px;
                    }
                }
            }
        }
        @media (max-width: 575.98px) {
            .navbar-toggler {
                padding: 3px 5px;
            }
        }
    }
    .profile-sc {
        justify-content: flex-end;
        .nav-link {
            display: flex;
            align-items: center;
            padding: 0 !important;
            &.dropdown-toggle::after {
                display: none;
            }
            > img {
                width: 40px;
                height: 40px;
                object-fit: cover;
                border-radius: 50%;
                box-shadow: 0px 10px 10px 0 rgba(58, 53, 65, 0.05);
            }
        }
        @media (max-width: 767.98px) {
            margin-right: 15px;
            .nav-link {
                justify-content: flex-end;
            }
        }
    }
    .menubar {
        li {
            padding: 0 15px;
            position: relative;
            + li::before {
                content: '';
                position: absolute;
                left: 0;
                top: 50%;
                transform: translate(0px, -50%);
                border-left: 1px solid #000;
                height: 10px;
            }
            a {
                display: flex;
                align-items: center;
                color: $grey-color;
                transition: 0.3s;
                font-size: 17px;
                &:hover {
                    color: $content-color;
                }
                sup {
                    background: #589ccd;
                    line-height: normal;
                    display: block;
                    padding: 2px 6px;
                    border-radius: 30px;
                    font-size: 10px;
                    color: #fff;
                    text-transform: lowercase;
                    letter-spacing: 0.5px;
                    font-weight: 500;
                    margin-left: 5px;
                }
            }
            &.active a {
                color: $content-color;
            }
        }
    }
    .tour-setup-progress-block {
        .title-div {
            display: flex;
            justify-content: space-between;
            align-items: center;
            line-height: normal;
            margin-bottom: 5px;
            font-size: 14px;
            span {
                line-height: normal;
            }
            .title {
                font-weight: 500;
            }
            .number {
                opacity: 0.5;
            }
        }
        .progressbar-wrap {
            height: 10px;
            background-color: $admin-body-bg;
            border-radius: 30px;
            border: 1px solid rgba($content-color, 10%);
            .progressbar-inner {
                background-color: #5a9ccb;
                border-radius: 30px;
                display: block;
                height: 100%;
            }
        }
    }
/* Admin Header E */

/* Admin Footer S */
    .ft-main {
        padding: 30px 0;
        border-top: 1px solid rgba($content-color, 10%);
        text-align: center;
        .ft-sc {
            p {
                margin: 0px;
                line-height: normal;
                font-size: 15px;
                + p {
                    margin-top: 15px;
                }
            }
        }
        @media (max-width: 1199.98px) {
            padding: 15px 0px;
            .ft-sc p {
                font-size: 14px;
                & + p {
                    margin-top: 10px;
                }
            }
        }
    }
/* Admin Footer E */

/* Email Page S */
    .page-title-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 60px;
        .main-title {
            font-size: 30px;
            margin: 0px;
        }
        .filter-bar {
            display: flex;
            align-items: center;
            > *:not(:first-child) {
                padding-left: 20px;
            }
            .btn-sc {
                display: flex;
                align-items: center;
                .btn:not(:first-child) {
                    margin-left: 20px;
                }
            }
            .form-group {
                width: 120px;
                &.filter-form-group {
                    width: auto;
                    &.has-close-icon {
                        .btn {
                            padding-right: 34px;
                        }
                    }
                }
                .close-btn {
                    position: absolute;
                    right: 7px;
                    top: 12px;
                    font-size: 12px;
                    font-family: cursive;
                    width: 18px;
                    height: 18px;
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    background: #000;
                    color: #ffffff;
                    opacity: 0.5;
                    cursor: pointer;
                }
            }
            .btn-group {
                width: 180px;
            }
            .search-icon {
                position: relative;
                width: 42px;
                display: flex;
                align-items: center;
                justify-content: flex-end;
                transition: all 0.3s;
                border-radius: $border-radius;
                border: 1px solid rgb(222, 226, 230);
                .form-control {
                    padding-right: 0px;
                    padding-left: 0px;
                    border: 0px;
                }
                .icon {
                    position: absolute;
                    top: 0px;
                    right: 0px;
                    width: 40px;
                    height: 40px;
                    background-color: $admin-body-bg;
                    z-index: 1;
                }
                &.open {
                    width: 200px;
                    .form-control {
                        padding-right: 40px;
                        padding-left: 12px;
                    }
                }
            }
            // .folder-group {
            //     display: flex;
            //     align-items: center;
            //     justify-content: flex-end;
            //     .folder-sc {
            //         display: flex;
            //         align-items: center;
            //         line-height: normal;
            //         color: rgba($content-color, 100%);
            //         &:hover {
            //             color: $btn-outline-color;
            //         }
            //         i {
            //             margin-right: 10px;
            //         }
            //     }
            // }
        }
        @media (max-width: 1199.98px) {
            margin-bottom: 30px;
            .main-title {
                font-size: 25px;
            }
        }
        @media (max-width: 991.98px) {
            flex-direction: column;
            align-items: unset;
            .title-box {
                width: 100%;
                display: flex;
                align-items: center;
                margin-bottom: 20px;
                .main-title {
                    flex-grow: 1;
                    width: calc(100% - 270px);
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    overflow: hidden;
                    font-size: 22px;
                }
                .btn-sc {
                    display: flex;
                    justify-content: flex-end;
                    align-items: center;
                    width: 260px;
                    margin-left: auto;
                    .btn {
                        font-size: 14px;
                        min-height: 35px;
                        padding: 4px 18px;
                        display: flex;
                        align-items: center;
                        i {
                            margin-right: 10px;
                        }
                        & + .btn {
                            margin-left: 15px;
                        }
                    }
                    .dropdown-toggle::after {
                        display: none;
                    }
                }
            }
            .filter-bar {
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                select.form-control {
                    padding-left: 10px;
                    padding-right: 10px;
                    min-height: 35px;
                    font-size: 14px;
                }
                & > *:not(:first-child) {
                    padding-left: 15px;
                }
                .search-icon {
                    width: calc(100% - 240px);
                    justify-content: flex-start;
                    .search-box {
                        width: 100%;
                    }
                    &.open {
                        width: calc(100% - 240px);
                    }
                    .form-control {
                        min-height: 35px;
                        padding-right: 40px;
                        padding-left: 12px;
                    }
                    .icon {
                        height: 35px;
                    }
                }
                &.filter-bar-two-col {
                    .search-icon {
                        width: calc(100% - 120px);
                        &.open {
                            width: calc(100% - 120px);
                        }
                    }
                }
            }
        }
        @media (max-width: 575.98px) {
            .title-box {
                margin-bottom: 15px;
                .main-title {
                    font-size: 20px;
                }
                .btn-sc {
                    width: 120px;
                    .btn {
                        border: 0;
                        background-color: transparent;
                        color: var(--content-color);
                        border: 1px solid rgb(0 0 0 / 15%);
                        border-radius: $border-radius;
                        opacity: 1;
                        width: 30px;
                        height: 30px;
                        min-height: 30px;
                        justify-content: center;
                        padding: 0;
                        font-size: 14px;
                        i {
                            margin-right: 0;
                        }
                        span {
                            display: none;
                        }
                        & + .btn {
                            margin-left: 10px;
                        }
                    }
                }
            }
            .filter-bar {
                .form-group {
                    width: 100px;
                }
                & > *:not(:first-child) {
                    padding-left: 10px;
                }
                .search-icon {
                    width: calc(100% - 200px);
                    &.open {
                        width: calc(100% - 200px);
                    }
                }
                &.filter-bar-two-col {
                    .search-icon {
                        width: calc(100% - 100px);
                        &.open {
                            width: calc(100% - 100px);
                        }
                    }
                }
            }
        }
    }
    .grd-box {
        display: flex;
        flex-wrap: wrap;
        gap: 60px;
        .grd-col {
            width: calc(33.33% - 40px);
            box-shadow: 0 0.375rem 10px 0 rgba(58,53,65,.01);
            background: #ffffff;
            color: $content-color;
            padding: 0 15px 15px;
            border-radius: $border-radius;
            cursor: pointer;
            transition: all 0.3s;
            .grd-img-sc {
                border: 0px solid rgba($content-color, 10%);
                border-radius: $border-radius;
                overflow: hidden;
                position: relative;
                margin-left: -15px;
                width: calc(100% + 30px);
                &.email_list_block {
                    aspect-ratio: 1 / 1;
                    .icon {
                        width: 100%;
                        height: 100%;
                        font-size: 250px;
                        background-color: #e9e9e9;
                        svg {
                            width: 100px;
                            height: 100%;
                        }
                    }
                }
                iframe {
                    width: 650px;
                    height: 1000px;
                    transform-origin: 0px 0px;
                    will-change: transform;
                    opacity: 1;
                    transition: opacity 0.4s ease 0s;
                    transform: scale(0.610);
                }
                img {
                    transition: all 0.3s;
                    aspect-ratio: 3 / 4;
                    object-fit: cover;
                    width: 100%;
                }
                .overlay-sc {
                    position: absolute;
                    top: 0;
                    left: 0;
                    background-color: rgba($content-color, 10%);
                    width: 100%;
                    height: 100%;
                    opacity: 0;
                    transition: opacity 0.3s;
                    .list-box {
                        padding: 10px;
                        width: 100%;
                        height: 100%;
                        display: flex;
                        align-items: center;
                        flex-direction: column;
                        justify-content: center;
                        // overflow-y: auto;
                        .list-sc {
                            padding: 8px 10px;
                            border: 1px solid $content-color;
                            border-radius: 30px;
                            color: #ffffff;
                            background-color: $content-color;
                            max-width: 150px;
                            width: 100%;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            transition: all 0.3s;
                            line-height: normal;
                            svg, i {
                                margin-right: 10px;
                            }
                            path {
                                fill: #ffffff;
                                transition: all 0.3s;
                            }
                            + .list-sc {
                                margin-top: 10px;
                            }
                            &:hover {
                                box-shadow: 5px 5px 10px 3px rgba(0, 0, 0, 0.2);
                                path {
                                    fill: #ffffff;
                                }
                            }
                        }
                        &.show {display: flex;}
                        &.hide {display: none;}
                        .back {
                            position: absolute;
                            left: 20px;
                            top: 20px;
                            i {
                                font-size: 25px;
                                color: $content-color;
                                transition: 0.3s;
                            }
                            &:hover i {
                                color: $content-color;
                            }
                        }
                        .light-overlay {
                            background-color: #ffffff;
                            border-radius: 10px;
                            width: 100%;
                            max-width: 210px;
                            padding: 20px;
                            .list-sc {
                                max-width: 100%;
                                background-color: transparent;
                                color: $content-color;
                                font-size: 14px;
                            }
                        }
                    }
                    &.has-desktop-version {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        .desktop-version {
                            font-size: 20px;
                            background: #ffffff;
                            line-height: normal;
                            border-radius: 5px;
                            padding: 10px;
                        }
                        .list-box {display: none;}
                    }
                    &.menu-btn-hide-mv {
                        @media (max-width: 1199.98px) {
                            .menu-link {
                                display: none;
                            }
                        }
                    }
                }
            }
            &:hover {
                transform: translate(0px, -5px);
                box-shadow: 0px 10px 10px 0 rgba(58, 53, 65, 0.05);
                .grd-img-sc {
                    img {
                        transform: scale(1.1);
                    }
                    .overlay-sc {
                        opacity: 1;
                    }
                }
            }
            .grd-cnt-sc {
                padding: 20px 0 10px;
                display: flex;
                flex-wrap: wrap;
                .status {
                    width: 10px;
                    height: 10px;
                    display: inline-block;
                    border-radius: 50%;
                    background-color: #f2f2f2;
                    margin-top: 6px;
                    margin-right: 10px;
                    &.active {
                        background-color: #10c169;
                    }
                    &.inactive {
                        background-color:  #a6a6a6;
                    }
                    &.scheduled {
                        background-color: #ffa500;
                    }
                }
                .title {
                    display: block;
                    text-align: left;
                    width: calc(100% - 20px);
                    line-height: normal;
                }
            }
            .updated-on {
                display: inline-block;
                text-align: center;
                padding: 5px 15px;
                border: 1px solid #000000;
                border-radius: 30px;
                // width: calc(100% - 0px);
                margin: auto;
                opacity: 0.5;
                font-size: 12px;
                font-weight: 600;
                line-height: normal;
            }
        }
        &.folder-grd-box {
            .grd-col .grd-img-sc.email_list_block {
                aspect-ratio: 0 / 1;
            }
        }
        .icon-wrapper {
            background-color: #ffffff !important;
            display: grid;
            align-items: unset;
            grid-template-columns: minmax(auto,62.3836126629%) minmax(auto,36.8715083799%);
            grid-template-areas:
                "main first"
                "main second";
            grid-gap: 4px;
            .icon-item {
                position: relative;
                display: block;
                width: 100%;
                padding: 0;
                background-repeat: no-repeat;
                background-size: cover;
                background-position: 50%;
                &:first-child {
                    grid-area: main;
                    &::before {
                        padding: 99.7014925373% 0 0;
                    }
                }
                &:nth-child(2) {
                    grid-area: first;
                    &::before {
                        padding: 85.8585858586% 0 0;
                    }
                }
                &:nth-child(3) {
                    grid-area: second;
                    &::before {
                        padding: 85.8585858586% 0 0;
                    }
                }
                &:before {
                    content: "";
                    display: block;
                    width: 100%;
                }
                .icon-item-placeholder {
                    position: absolute;
                    top: 0;
                    left: 0;
                    bottom: 0;
                    width: 100%;
                    height: 100%;
                    background-color: $grid-bg-grey;
                }
            }
        }
        @media (max-width: 1399.98px) {
            gap: 40px;
            .grd-col {
                width: calc(33.33% - 27px);
                .grd-img-sc iframe {
                    transform: scale(0.55);
                }
            }
        }
        @media (max-width: 1199.98px) {
            .grd-col .grd-img-sc iframe {
                transform: scale(0.46);
            }
        }
        @media (max-width: 991.98px) {
            gap: 30px;
            .grd-col {
                width: calc(50% - 15px);
                box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 1px -0.1px, rgba(0, 0, 0, 0.055) 0px 1.98px 3.06px -0.36px;
                .grd-img-sc iframe {
                    transform: scale(0.53);
                }
            }
        }
        @media (max-width: 767.98px) {
            gap: 20px;
            .grd-col {
                width: calc(50% - 10px);
                .grd-img-sc iframe {
                    transform: scale(0.40);
                }
                .grd-cnt-sc .title {
                    font-size: 14px;
                }
                .updated-on {
                    padding: 4px 10px;
                    font-size: 10px;
                }
            }
        }
        @media (max-width: 767.98px) {
            .grd-col {
                width: 100%;
                .grd-img-sc iframe {
                    transform: scale(0.56);
                }
            }
        }
        &.subscriber-grd-box {
            @media (min-width: 991.99px) {
                gap: 30px;
            }
            .grd-col {
                width: calc(25% - 22.5px);
            }
            .subscriber-list-wrapper {
                font-size: 16px;
                color: $heading-color;
                font-weight: 600;
                width: 100%;
                height: 250px;
                .list-item {
                    background-color: #f0f0f0;
                    width: 100%;
                    height: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    padding: 10px;
                }
            }
            @media (max-width: 991.98px) {
                .grd-col {
                    width: calc(33.33% - 20px);
                }
            }
            @media (max-width: 991.98px) {
                .grd-col {
                    width: calc(50% - 15px);
                }
            }
            @media (max-width: 575.98px) {
                .grd-col {
                    width: calc(100% - 0px);
                }
            }
        }
    }
    .pagination-box {
        min-height: 40px;
        display: block;
        margin-top: 60px;
        .pagination {
            margin: 0;
        }
        p.small.text-muted {
            position: absolute;
            left: 0;
            font-size: 16px;
            margin: 0;
            top: 10px;
            line-height: normal;
        }
        nav {
            position: relative;
            > * {
                justify-content: center !important;
            }
            @media (max-width: 575.98px) {
                > * {
                    justify-content: flex-start !important;
                }
            }
        }
        .page-link {
            color: $grey-color;
            font-size: 16px;
            background-color: transparent;
            border: 0px;
            &:focus {
                box-shadow: none;
            }
            &:hover {
                background-color: $btn-bg-color;
            }
        }
        .page-link.active, .active > .page-link {
            background-color: transparent;
            // border-color: $btn-outline-color;
            // color: #ffffff;
        }
        @media (max-width: 1199.98px) {
            margin-top: 30px;
        }
        @media (max-width: 575.98px) {
            align-items: center;
            display: flex;
            justify-content: space-between;
            width: 100%;
            > * {
                align-items: center;
                width: 100%;
            }
        }
    }
    .grd-main-sc {
        position: relative;
        .showing-dropdown {
            position: absolute;
            right: 0;
            bottom: 0;
            display: flex;
            align-items: center;
            select {
                margin: 0 0px 0 10px;
                min-width: 45px;
                width: auto;
                background-image: linear-gradient(45deg, transparent 50%, #7f7f7f 50%), linear-gradient(135deg, #7f7f7f 50%, transparent 50%), linear-gradient(to right, #87ceeb00, #87ceeb00);
                background-position: calc(100% - 11px) calc(1em + 2px), calc(100% - 6px) calc(1em + 2px), 100% 0;
                background-size: 5px 5px, 5px 5px, 2.5em 2.5em;
                background-repeat: no-repeat;
                border: 0px;
                padding-left: 0px;
                padding-right: 15px;
                padding-top: 8px;
                option {
                    text-align: center;
                }
            }
            @media (max-width: 575.98px) {
                right: unset;
                left: 50%;
                transform: translate(-50%, 0%);
            }
        }
    }
    .folder-grd-sc {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
        .grd-col {
            padding: 30px 15px;
            width: calc(33.33% - 10px);
            text-align: center;
            border: 1px solid rgba($content-color, 10%);
            color: $content-color;
            border-radius: $border-radius;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            cursor: pointer;
            transition: 0.3s;
            position: relative;
            .check {
                position: absolute;
                right: 6px;
                font-size: 16px;
                top: 4px;
                opacity: 0;
            }
            .icon {
                width: unset;
                height: unset;
                font-size: 30px;
                margin-bottom: 5px;
            }
            .icon:hover {
                background-color: unset;
                color: rgba(0, 0, 0, 0.5);
            }
            .text {
                width: calc(100% - 0px);
                display: block;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            &:hover, &.active {
                background-color: $grid-bg-grey;
                // border-color: $btn-outline-color;
            }
            &.active .check {
                opacity: 1;
            }
            @media (max-width: 767.98px) {
                padding: 15px;
                width: calc(50% - 8px);
            }
        }
    }
    .add-folder-group {
        // padding: 15px 0px;
        // display: flex;
        // gap: 10px;
        // flex-direction: column;
        input {
            flex-grow: 1;
        }
        .btn {
            flex-shrink: 0;
        }
    }
    .nodata-grd-box {
        height: 100%;
    }
    .nodata_flex {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .datanotfound_span_class {
        text-align: center;
        width: 100%;
        color: #000000;
        opacity: 0.3;
        i {
            font-size: 70px;
            line-height: normal;
            margin-bottom: 30px;
        }
        &.nodata_height {
            height: calc(100vh - 320px);
        }
        @media (max-width: 1199.98px) {
            &.nodata_height {
                height: calc(100vh - 210px);
            }
        }
        @media (max-width: 991.98px) {
            &.nodata_height {
                height: calc(100vh - 260px);
            }
        }
        @media (max-width: 575.98px) {
            h4 {
                font-size: 20px;
                max-width: 230px;
                line-height: 1.3;
            }
            i {
                font-size: 40px;
                margin-bottom: 20px;
            }
        }
    }
    .modal-body {
        .form-group {
            margin-bottom: 15px;
            .label {margin-bottom: 5px;}
        }
    }
/* Email Page E */

/* Add Email S */
    .add-email-main-sc {
        .email-inner-box {
            max-width: 840px;
            margin: auto;
            .page-title-bar {
                margin-bottom: 30px;
                .has-icon {
                    margin-right: auto;
                }
            }
        }
        .grd-box .grd-col {
            width: calc(50% - 30px);
            box-shadow: none;
            @media (max-width: 1399.98px) {
                width: calc(50% - 20px);
            }
            @media (max-width: 991.98px) {
                width: calc(50% - 15px);
            }
            @media (max-width: 767.98px) {
                width: calc(50% - 10px);
            }
            @media (max-width: 575.98px) {
                width: calc(100% - 0px);
            }
        }
    }
    .addemail-sidebar-box {
        padding: 20px;
    }
    .sidebar {
        height: 100%;
        display: flex;
        flex-direction: column;
        .title {
            margin-bottom: 20px;
            font-size: 30px;
            flex-shrink: 0;
        }
        .sidebar-list {
            padding: 0px;
            margin: 0px 0 0px;
            flex-grow: 1;
            overflow-y: auto;
            li {
                list-style-type: none;
                padding: 5px 0px 5px 0px;
                font-size: 16px;
                position: relative;
                i {
                    font-size: 14px;
                    position: absolute;
                    left: 0;
                    top: 12px;
                }
                a {
                    color: $grey-color;
                    display: block;
                    &:hover {
                        padding-left: 2px;
                        color: $content-color;
                    }
                    &.active {
                        color: $content-color;
                    }
                }
            }
        }
    }
    @media (max-width: 991.98px) {
        .builder-container.category-container {
            & > .row {
                margin-right: calc(-0.5 * var(--bs-gutter-x));
            }
            .main-col {
                height: unset;
                overflow-y: inherit;
            }
        }
    }
/* Add Email E */

/* Content Library Modal S */
    .library-modal {
        .modal-header {
            flex-direction: column;
            > * {
                width: 100%;
            }
            .header-part {
                display: flex;
                align-items: center;
                position: relative;
                padding-bottom: 1rem;
                .modal-title {
                    flex-grow: 1;
                    line-height: normal;
                }
                .btn-close {
                    flex-shrink: 0;
                }
                &::before {
                    content: '';
                    width: calc(100% + 2rem);
                    position: absolute;
                    left: -1rem;
                    bottom: 0;
                    border-bottom: 1px solid $outline-color;
                }
            }
            .search-section {
                padding-top: 1rem;
                display: flex;
                align-items: center;
                .ad-form {
                    max-width: 300px;
                }
                .menu-sc {
                    width: calc(100% - 330px);
                    display: flex;
                    align-items: center;
                    justify-content: flex-end;
                    flex-grow: 1;
                    .navbar-collapse {
                        flex-grow: 0;
                        li {
                            i {
                                margin-right: 10px;
                            }
                        }
                    }
                    .tab-icn-sc {
                        padding: 6px;
                        margin: 0;
                        list-style: none;
                        display: flex;
                        align-items: center;
                        background: #dddddd;
                        border-radius: $border-radius;
                        li {
                            line-height: normal;
                            width: 30px;
                            height: 30px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            border-radius: $border-radius;
                            cursor: pointer; 
                            transition: 0.3s;       
                            &.active, &:hover {                 
                                background-color: #ffffff;
                            }
                            + li {
                                margin-left: 5px;
                            }
                        }
                    }
                }
            }
        }
        .modal-body {
            .grd-box {
                gap: 20px;
                .grd-col {
                    width: calc(25% - 15px);
                    position: relative;
                    overflow: hidden;
                    transition: unset;
                    box-shadow: 0.375rem 0.375rem 10px 0 rgba(58, 53, 65, 0.12);

                    &:hover {
                        transform: translate(0, 0);
                    }
                    .img-sc {
                        aspect-ratio: 1.157 / 1;
                        background-color: #f0f0f0;
                        img {
                            height: 100%;
                            width: 100%;
                            object-fit: contain;
                        }
                    }
                    .cnt-sc {
                        padding: 10px 0 0;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        overflow: hidden;
                    }
                    .overlay-sc {
                        opacity: 0;
                        position: absolute;
                        top: 0;
                        left: 0;
                        bottom: 0;
                        right: 0;
                        background: rgba($content-color, 50%);
                        .list-box {
                            height: 100%;
                            width: 100%;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            flex-direction: column;
                            .btn {
                                max-width: 180px;
                                width: 100%;
                                &:hover {
                                    box-shadow: unset;
                                }
                                i {
                                    margin-right: 5px;
                                }
                                + .btn {
                                    margin-top: 10px;
                                }
                            }
                        }
                    }
                    &:hover .overlay-sc {
                        opacity: 1;
                    }
                }
                &.list-box {
                    .grd-col {
                        width: 100%;
                        display: flex;
                        align-items: center;
                        flex-wrap: wrap;
                        .img-sc {
                            width: 80px;
                        }
                        .cnt-sc {
                            margin-top: 0px;
                            margin-left: 15px;
                            padding: 0;
                            flex-grow: 1;
                            display: flex;
                            .title {
                                flex-grow: 1;
                            }
                            .overlay-sc {
                                flex-shrink: 0;
                            }
                        }
                        .overlay-sc {
                            flex-shrink: 0;
                            // opacity: 1;
                            position: static;
                            background: transparent;
                        }
                        .list-box {
                            flex-direction: row;
                            .btn {
                                max-width: unset;
                                width: auto;
                                + .btn {
                                    margin-top: 0px;
                                    margin-left: 10px;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
/* Content Library Modal E */

/* Preview Page S */
    .device-icn {
        display: flex;
        align-items: center;
        .icn-list {
            cursor: pointer;
            transition: 0.3s;
            i {
                font-size: 20px;
            }
            + .icn-list {
                margin-left: 30px;
            }
            &:hover, &.active {
                color: $btn-outline-color;
            }
        }
    }
    .preview-main-sc {
        background-color: rgb(244, 245, 250);
    }
/* Preview Page E */

/* Email builder S */
    .image-box .pointerevent_non, 
    .logo-box .pointerevent_non, 
    .video_link_class  {display: block; pointer-events: none;}
    .builder-container {
        & > .row {margin-right: 318px;}
        .main-col {
            height: calc(100vh - 80px);
            overflow-y: auto;
        }
    }
    .card {
        background-color: #ffffff;
        border-radius: 0;
        .card-header {
            background-color: #ffffff;
            border-radius: 0;
        }
    }
    .tabcontent, .heroSectiontabcontent, .buttontabcontent, .heroFiltertabcontent {display: none;}
    /* Sidebar Left S */
    .sidebar-box {
        width: 330px;
        position: absolute;
        right: 0px;
        top: 0px;
        bottom: 0px;
        height: calc(100vh - 80px);
        .card-body {
            overflow-y: auto;
            overflow-x: hidden;
            // padding: 0;
        }
    }
    .sidebar-left-wrapper { 
        .sidebar-box {
            right: unset;
            left: 0px;
        }
        .builder-container > .row {
            margin-right: calc(-0.5 * var(--bs-gutter-x));
            margin-left: 318px;
        }
    }
    @media (max-width: 1023.98px) {
        .sidebar-box {
            width: 230px;
        }
        .sidebar-left-wrapper {
            .builder-container > .row {
                margin-left: 218px;
            }
        }
    }
    @media (max-width: 767.98px) {
        .sidebar-left-wrapper {
            .sidebar-box {
                position: static;
                width: calc(100% - 30px);
                margin: auto;
                height: auto;
                padding: 0;
                margin-bottom: 15px;
            }
            .builder-container > .row {
                margin-left: calc(-0.5 * var(--bs-gutter-x));
            }
        }
        .sidebar .sidebar-list {
            // display: flex;
            li {
                // padding: 8px 22px;
            }
        }
    }
    /* Sidebar Left E */

    .sidebar-tab-list {
        list-style-type: none;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        padding: 0;
        li {
            padding: 5px 15px;
            cursor: pointer;
            transition: 0.3s;
            font-weight: 500;
            color: $grey-color;
            &:hover, &.active {
                color: $content-color;
            }
        }
    }
    .style-grd-sc {
        &.tabbing-grd-sc {
            .sidebar-tab-list {
                background-color: #f9f8f8;
                margin-top: -16px;
                margin-left: -16px;
                width: calc(100% + 32px);
                position: sticky;
                top: -16px;
                z-index: 1;
                li {
                    padding: 15px;
                    color: rgba(61, 46, 41, 0.52);
                    border-bottom: 2px solid transparent;
                    font-weight: 600;
                    &:hover, &.active {
                        color: rgba($content-color, 100%);
                        // border-color: rgba($content-color, 100%);
                    }
                }
            }
        }
        &.hero-grd-sc {
            .layout-box {
                li {
                    // padding: 8px;
                    border: 2px solid $border-color;
                    border-radius: 3px;
                    margin-top: 16px;
                    cursor: pointer;
                    transition: 0.3s;
                    &:hover, &.active {
                        border-color: $content-color;
                    }
                }
            }
        }

        .grd-list {
            // padding: 15px 0px;
            + .grd-list {
                border-top: 1px solid $border-color;
            }
            .grd-row {
                margin-left: -5px;
                margin-right: -5px;
                [class*=col-] {
                    padding-left: 5px;
                    padding-right: 5px;
                }
            }
        }
        &.no-border-grd-list {
            .grd-list + .grd-list {
                border-top: 0px;
            }
        }
        .style-box {
            padding: 10px 0;
            .title, .label {
                display: block;
                margin-bottom: 10px;
                font-size: 16px;
                line-height: normal;
                .light {
                    text-transform: uppercase;
                    padding-left: 5px;
                }
            }
            &.frm-grp-box {
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                .title {
                    flex: 1;
                    margin: 0;
                }
                .switch-info {
                    margin-top: 5px;
                    font-size: 14px;
                    line-height: normal;
                    opacity: 0.5;
                    width: calc(100% - 40px);
                }
                .form-group {
                    .unit {
                        position: absolute;
                        right: 0;
                        top: 0;
                        height: 100%;
                        width: 40px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        background: $outline-color;
                        border-radius: 0px 4px 4px 0px;
                        color: $grey-color;
                    }
                    .form-control {
                        width: 120px;
                        padding-right: 40px;
                        font-size: 18px;
                    }
                }
            }
            .form-group {
                &.icn-sc {
                    display: flex;
                    align-items: center;
                    .icn {
                        width: 40px;
                        height: 35px;
                        border: 1px solid $border-color;
                        color: rgba($content-color, 50%);
                        &:hover, &.active {
                            color: rgba($content-color, 100%);
                            background-color: #f0f0f0;
                        }
                        + .icn {
                            border-left: 0;
                        }
                        &:first-child {
                            border-radius: 4px 0 0 4px;
                        }
                        &:last-child {
                            border-radius: 0px 4px 4px 0px;
                        }
                        i {
                            color: $grey-color !important;
                        }
                    }
                }
                .select-menu {
                    max-width: 330px;
                    margin: 0px auto 15px;
                    .select-btn {
                        display: flex;
                        height: 45px;
                        background: #fff;
                        padding: 0px 15px;
                        font-size: 16px;
                        font-weight: 400;
                        border-radius: $border-radius;
                        align-items: center;
                        cursor: pointer;
                        justify-content: space-between;
                        border: 1px solid $outline-color;
                        color: $grey-color;
                        i {
                            transition: 0.3s;
                        }
                    }
                    .options {
                        position: absolute;
                        width: 100%;
                        overflow-y: auto;
                        max-height: 295px;
                        padding: 10px;
                        margin-top: 10px;
                        border-radius: 8px;
                        background: #fff;
                        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
                        animation-name: fadeInDown;
                        -webkit-animation-name: fadeInDown;
                        animation-duration: 0.35s;
                        animation-fill-mode: both;
                        -webkit-animation-duration: 0.35s;
                        -webkit-animation-fill-mode: both;
                        .option {
                            display: flex;
                            height: 45px;
                            cursor: pointer;
                            padding: 0 10px;
                            border-radius: $border-radius;
                            align-items: center;
                            background: #fff;
                            &:hover {
                                background: #f2f2f2;
                            }
                            i {
                                margin-right: 12px;
                                svg {
                                    width: 20px;
                                    height: 20px;
                                }
                            }
                            .option-text {
                                font-size: 16px;
                                color: #333;
                            }
                        }
                    }
                    &.active .select-btn i {
                        transform: rotate(-180deg);
                    }
                    &.active .options {
                        display: block;
                        opacity: 0;
                        z-index: 10;
                        animation-name: fadeInUp;
                        -webkit-animation-name: fadeInUp;
                        animation-duration: 0.4s;
                        animation-fill-mode: both;
                        -webkit-animation-duration: 0.4s;
                        -webkit-animation-fill-mode: both;
                    }
                }
                @keyframes fadeInUp {
                    from {
                      transform: translate3d(0, 30px, 0);
                    }
                    to {
                      transform: translate3d(0, 0, 0);
                      opacity: 1;
                    }
                  }
                  @keyframes fadeInDown {
                    from {
                      transform: translate3d(0, 0, 0);
                      opacity: 1;
                    }
                    to {
                      transform: translate3d(0, 20px, 0);
                      opacity: 0;
                    }
                }
            }
            .img-box {
                background-color: #f0f0f0;
                position: relative;
                .remove_uploaded_logo, .remove_uploaded_image, .remove_uploaded_gif {
                    position: absolute;
                    right: 5px;
                    top: 5px;
                    width: 20px;
                    height: 20px;
                    border-radius: 50%;
                    background: #000000;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: #fff;
                    cursor: pointer;
                }
                img {
                    aspect-ratio: 2/1;
                    object-fit: contain;
                }
            }
            .add-cnt-sc {
                text-align: center;
                max-width: 220px;
                margin: auto;
                i {
                    font-size: 30px;
                    opacity: 0.5;
                    margin-bottom: 10px;
                }
                p {
                    font-size: 14px;
                    opacity: 0.5;
                }
            }
            .grd-layout {
                width: 100%;
                aspect-ratio: 4 / 3;
                border: 1px solid $border-color;
                padding: 8px;
                border-radius: $border-radius;
                cursor: pointer;
                svg {
                    path {
                        fill: $border-color;
                    }
                }
                &:hover, &.active {
                    border-color: $btn-outline-color;
                    svg path {
                        fill: $btn-outline-color;
                    }
                }
            }
            .iframe-div {
                width: calc(100% + 0px);
                aspect-ratio: 1 / 1.2;
                overflow: hidden;
                border-radius: 10px;
                box-shadow: 0 4px 15px rgba(0, 0, 0, .06);
                position: relative;
                .iframe-flow {
                    width: 650px;
                    // transform: scale(0.546305) !important;
                    height: 426px;
                    transform-origin: 0 0;
                    background: #fbfbfb;
                    will-change: transform;
                }
                .iframe-overlay {
                    position: absolute;
                    top: 0;
                    right: 0;
                    bottom: 0;
                    left: 0;
                    background-color: rgb(61 46 41 / 66%);
                    visibility: visible;
                    opacity: 0;
                    z-index: 2;
                    transition: 0.3s;
                    .dlt-icn {
                        position: absolute;
                        right: 10px;
                        top: 10px;
                        width: 25px;
                        height: 25px;
                        font-size: 16px;
                        border-radius: 50%;
                        background: #ffffff;
                        cursor: pointer;
                    }
                    .btn-sc {
                        position: absolute;
                        top: 50%;
                        left: 0;
                        width: 100%;
                        transform: translate(0px, -50%);
                        padding: 10px;
                        text-align: center;
                        .btn {
                            background-color: #ffffff;
                            display: inline-block;
                            border: 0;
                            padding: 8px 35px;
                            font-size: 14px;
                            font-weight: 600;
                        }
                    }
                }
                &:hover {
                    .iframe-overlay {opacity: 1;}
                }
            }
        }
        .color-box {
            .colorpicker {
                width: 40px;
                height: 40px;
                border-radius: 50px;
                overflow: hidden;
                cursor: pointer;
                border: 1px solid rgba($content-color, 20%);
                input {
                    border: 0;
                    width: calc(100% + 15px);
                    height: calc(100% + 15px);
                    margin-top: -1px;
                    margin-left: -1px;
                    outline: none;
                    padding: 0;
                    cursor: pointer;
                }
            }
        }
        .accordion-sc {
            .accordion-title {
                padding: 15px 0;
                cursor: pointer;
                display: flex;
                align-items: center;
                .title {
                    flex-grow: 1;
                }
                i {
                    font-size: 12px;
                    opacity: 0.5;
                    transition: 0.3s;
                }
            }
            .accordion-body {
                display: none;
                padding: 0px;
                .style-box:nth-child(1) {
                    padding-top: 0;
                }
            }
            &.open {
                .accordion-title {
                    i {
                        transform: rotate(180deg);
                    }
                }
            }
        }
        .upload-img-sc {
            aspect-ratio: 4 / 3;
            border: 2px dotted $border-color;
            border-radius: $border-radius;
            cursor: pointer;
            transition: 0.3s;
            opacity: 0.6;
            .cnt-sc {
                max-width: 150px;
                margin: auto;
                i {
                    font-size: 20px;
                    color: rgba($content-color, 50%);
                }
                .title {
                    margin: 5px 0;
                    font-size: 14px;
                }
                p {
                    font-size: 12px;
                    margin-bottom: 0;
                }
            }
            &:hover {
                opacity: 1;
            }
        }
        input[type="file"] {
            position: absolute;
            bottom: 0;
            z-index: -1;
        }
        span.or {
            margin: 15px 0;
            display: block;
            position: relative;
            text-align: center;
            text-transform: uppercase;
            line-height: normal;
            color: rgba($content-color, 30%);
            &::before, &::after {
                content: '';
                border-bottom: 0.5px solid rgba($content-color, 10%);
                width: calc(50% - 20px);
                position: absolute;
                top: 50%;
                transform: translate(0%, -50% );
            }
            &::before {
                left: 0;
            }
            &::after {
                right: 0;
            }
        }
        .btn-sc {
            .btn {
                display: block;
                background-color: transparent;
                border: 1px solid rgba($content-color, 50%);
                color: rgba($content-color, 50%);
                padding: 8px 10px;
                font-size: 14px;
                &:hover {
                    color: rgba($content-color, 100%);
                    border-color: rgba($content-color, 100%);
                }
                + .btn {
                    margin-top: 15px;
                }
            }
        }
        .btn-box {
            height: 35px;
            margin: 5px 0;
            cursor: pointer;
            &.btn-box-bg {
                background-color: #F2F2F2;
            }
            &.btn-box-outline {
                border: 1px solid $border-color;
            }
            &.btn-box-bottom-outline {
                border-bottom: 1px solid $border-color;
                &.selected_shape {
                    border: 0px !important;
                    border-bottom: 2px solid #000 !important;
                }
            }
            &.btn-box-0 {
                border-radius: 0px;
            }
            &.btn-box-4 {
                border-radius: $border-radius;
            }
            &.btn-box-10 {
                border-radius: 10px;
            }
            &.btn-box-30 {
                border-radius: 30px;
            }
        }
        .field-box {
            height: 35px;
            margin: 5px 0;
            cursor: pointer;
            &.field-box-bg {
                background-color: #F2F2F2;
            }
            &.field-box-outline {
                border: 1px solid $border-color;
            }
            &.field-box-outline-bottom {
                border-bottom: 1px solid $border-color;
            }
            &.field-box-0 {
                border-radius: 0px;
            }
            &.field-box-4 {
                border-radius: $border-radius;
            }
            &.field-box-10 {
                border-radius: 10px;
            }
            &.field-box-30 {
                border-radius: 30px;
            }
        }
    }
    .content-grd-sc {
        display: grid;
        gap: 10px;
        grid-template-columns: repeat(3, 1fr);
        .content-col {
            border: 1px solid #C2c2c2;
            cursor: pointer;
            padding: 15px 10px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            gap: 5px;
            line-height: normal;
            transition: 0.3s;
            text-align: center;
            background-color: transparent;
            &:hover {
                background-color: $grid-bg-grey;
                // border-color: $btn-outline-color;
            }
            i {
                font-size: 16px;
            }
            .title {
                font-size: 14px;
                line-height: 16px;
                display: block;
            }
        }
    }
    .created-file-field {
        .form-group {
            // margin-bottom: 20px;
            .icn-sc {
                background-color: #ffffff;
                position: absolute;
                top: 0;
                left: -42px;
                padding: 12px 5px;
                font-size: 16px;
                opacity: 0;
                display: none;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                border-radius: $border-radius;
                box-shadow: 0px 0px 10px #00000026;
                span {
                    padding:  0 8px;
                    cursor: pointer;
                    display: block;
                    line-height: normal;
                    opacity: 0.5;
                    transition: 0.5s;
                    &:not(:last-child) {
                        margin-bottom: 10px;
                    }
                    &:hover {
                        opacity: 1;
                    }
                }
            }
            &:hover .icn-sc {opacity: 1; display: flex;}
            .icn-sc:hover {opacity: 1; display: flex;}
            input {
                width: 100%;
            }
            p {
                margin-bottom: 0px;
            }
            *[contenteditable=true] {
                border: 0px solid transparent;
                &:focus, &:hover, &.current-selected-element {
                    outline-style: solid;
                    outline-color: black;
                    outline-width: 1px;
                    position: relative;
                    z-index: 2;
                    // border-color: blue;
                    // background-color: #f5f5f5;
                }
            }
            // Image grid (1,2,3) layout S
            &.two-col-grd, &.three-col-grd, &.four-col-grd {
                &::before, &::after {
                    content: '';
                    display: table;
                    clear: both;
                }
            }
            &.two-col-grd {
                .element-box {
                    display: inline-block;
                    float: left;
                    width: calc(50% - 5px);
                    margin-top: 10px;
                    img {
                        width: 100% !important;
                        max-width: unset !important;
                        object-fit: cover;
                    }
                }
                .imageblockblank_div {
                    width: 10px;
                    height: 10px;
                    float: left;
                    display: inline-block;
                    // opacity: 0;
                    // overflow: hidden;
                }
            }
            // Image grid (1,2,3) layout E
        }
        &.active {
            border: 1px solid blue;
        }
        .element-box {
            // border: 1px solid transparent;
            border-radius: 0px;
            i {
                font-size: 90px;
                color: rgba($content-color, 50%);
            }
            // &.current-selected-element.image-box, &.current-selected-element.image-box img {
            //     background-color: transparent;
            //     aspect-ratio: 2 / 1;
            //     width: 100%;
            // }
            &.current-selected-element.image-box {
                background-color: #ffffff;
            }
            &.logo-box {
                // background-color: #ffffff;
                img {
                    width: 100%;
                    // max-width: 200px;
                }
            }
            &.spacer-box {
                border-radius: 0px;
                // border-style: dotted;
                &:not(.current-selected-element) {
                    border: 0px;
                    // background-color: transparent;
                }
            }
        }
        .divider-frm-grp, .footer-box, .social-box, .address-box {
            border: 1px solid transparent;
        }
        &:hover .spacer-box  {
            border: 0px solid blue !important;
        }
        &.blockbuilder-layer-selected .divider-frm-grp {
            border-color: blue;
        }
        &.not-editable-field :is(.element-box, .footer-box, .divider-frm-grp) {
            border: 0px;
        }
        &.not-editable-field :is(.element-box:hover, .footer-box:hover, .divider-frm-grp:hover, .spacer-box:hover),
        &.not-editable-field :is(.element-box.current-selected-element, .current-selected-element .footer-box,.blockbuilder-layer-selected .divider-frm-grp) {
            // border: 1px solid blue;
            outline-style: solid;
            outline-color: black;
            outline-width: 1px;
            position: relative;
            z-index: 2;
        }
        &.not-editable-field .element-box.divider-box:hover {outline: 0;}
        .form-group .footer-box *[contenteditable=true] {
            border: 0px;
            background-color: transparent;
        }
        .form-group .footer-box span {
            display: inline-block;
        }
    }
    .builder-main {
        // padding: 20px;
        // max-width: 650px;
        // width: 100%;
        display: table;
        border-collapse: separate !important;
        border-radius: 0px;
        border: 0px;
        margin: auto;
        .btn.btn-primary:hover {
            color: #ffffff;
        }
        .add-element-sc {
            padding: 0px 0px;
            // border: 1px solid blue;
            font-size: 16px;
        }
        .no-content-element {
            padding: 20px 10px;
            background-color: #f5f5f5;
            font-size: 20px;
            border: 1px solid blue;
            text-align: center;
            color: rgb(0 0 0 / 40%);
        }
        .ui-state-highlight{
            border: none;
            background-color: #ffffff;
            width: 100%;
        }
        .drag-it-here {
            position: relative;
            text-align: center;
            opacity: 1;
            // display: none;
            span {
                display: inline-block;
                background-color: #7e7eff;
                padding: 4px 18px;
                font-size: 9px;
                color: #ffffff;
                line-height: normal;
                border-radius: 15px;
                letter-spacing: 0.5px;
                text-transform: uppercase;
                font-weight: 500;
                &::before, &::after {
                    content: '';
                    border-top: 2px solid #7e7eff;
                    position: absolute;
                    top: 50%;
                    width: calc(50% - 70px);
                    transform: translate(0px, -50%);
                }
                &::before {
                    left: 0;
                }
                &::after {
                    right: 0;
                }
            }
        }
        .ui-droppable-hover .drag-it-here {
            // opacity: 1;
        }
    }
    .preview-box {
        position: fixed;
        top: 100px;
        left: 0;
        // background: #ffffff;
        padding: 15px;
        border-radius: 0 10px 10px 0;
        // border: 1px solid rgba(0, 0, 0, 0.175);
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            text-align: center;
            li {
                padding: 10px 0;
                a {
                    color: rgba($content-color, 50%);
                    font-size: 16px;
                    &:hover {
                        color: $content-color;
                    }
                }
            }
        }
    }
    .color_gray_span{
        color: #808080;
        font-size: 11px;
    }
    .sp-picker-container{
        width: 230px !important;
        max-width: 230px;
    }
    .sp-replacer{
        border: none !important;
        height: 2.5rem !important;
    }
    .sp-dd{
        display: none !important;
    }
    .icn-sc i{
        color: #000000 !important;
    }
    .upload_img_right_class{
        height: 250px;
        width: 100%;
    }
    .image-table {
        .created-file-field {
            &:hover, &.blockbuilder-layer-selected {
                outline-color: black;
                outline-style: solid;
                outline-width: 1px;
                position: relative;
                z-index: 2;
            }
        }
    }
    .hero_section_table {
        .element-box.image-box {
            border: 0px;
            &:hover, &.current-selected-element {
                outline-color: black;
                outline-style: solid;
                outline-width: 1px;
                z-index: 2;
                position: relative;
            }
        }
        .element-box.divider-box:hover, .element-box.divider-box.current-selected-element {
            outline-color: black;
            outline-style: solid;
            outline-width: 1px;
            position: relative;
            z-index: 2;
        }         
    }
    .maincontentheroeditable {
        &:hover, &.blockbuilder-layer-selected {
            outline-color: black;
            outline-style: solid;
            outline-width: 1px;
            position: relative;
            z-index: 2;
        }
    }
    .desk-box-main {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: $body-bg;
        display: none;
        align-items: center;
        justify-content: center;
        z-index: 9999;
        .desk-box-inner {
            max-width: 550px;
            margin: auto;
            text-align: center;
            padding: 15px;
            width: 100%;
            p {
                margin: 30px 0;
            }
        }
        @media (max-width: 1199.98px) {
            display: flex;
        }
    }
/* Email builder E */

/* Email preview popup S */
    .previewModal {
        .modal-body {
            overflow-x: hidden;
            .form-group {
                margin-bottom: 0;
            }
        }
        .main_body {
            height: calc(100vh - 0px);
        }
        .bck-btn-sc {
            position: absolute;
            top: 50px;
            left: 100px;
            z-index: 9;
            background-color: #ffffff;
            border-radius: 10px;
            box-shadow: 0px 0px 10px #0000001f;
            .bck-link {
                display: inline-block;
                border-radius: $border-radius;
                padding: 10px 15px;
                // background-color: #000000;
                // box-shadow: 0px 0px 10px 0px #fff6;
                color: $content-color;
                font-size: 16px;
                min-width: 180px;
                i {
                    margin-right: 5px;
                    opacity: 0.5;
                }
                &:hover {
                    background-color: #0000000d;
                }
            }
            .preview-icon {
                padding: 0px 10px;
                margin: 10px 0 0;
                li {
                    display: inline-block;
                    a {
                        padding: 5px;
                        border-radius: $border-radius;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        color: #3d2e2985;
                        width: 40px;
                        height: 40px;
                        &.active {
                            color: #241a17;
                        }
                        &:hover {
                            color: #241a17;
                            background-color: rgb(61 46 41 / 10%);
                        }
                    }
                }
            }
        }
        .mobile_div {
            display: none;
        }
        &.mobPreview {
            .modal-body {
                display: flex;
                align-items: center;
            }
            .preview_main_class  {
                background: #ffffff;
                border: 1px solid rgba(55, 49, 47, .1215686275);
                border-radius: 30px;
                width: 300px;
                height: 550px;
                margin: 10px auto;
                display: flex;
                align-items: center;
                padding: 10px;
                &.desktop_div {
                    display: none;
                }
                .mobile-frame {
                    position: relative;
                    // display: flex;
                    // align-items: center;
                    // justify-content: center;
                    width: 100%;
                    height: 100%;
                    display: block;
                    overflow: auto;
                    border: 1px solid rgba(55, 49, 47, .1215686275);
                    border-radius: 25px;
                    .mobile-frame-scale {
                        // background: #ffffff;
                        // border: 1px solid rgba(55, 49, 47, 0.1215686275);
                        border-radius: 15px;
                        box-shadow: none;
                        overflow: hidden;
                        transition: box-shadow 0.4s;
                        // height: 768px; // sachin
                        padding: 10px;
                        transition: 0.3s;
                        background: none;
                        border: none;
                        &:hover {
                            box-shadow: 20px 20px 20px rgba(0,0,0,.15);
                        }
                        .mobile-frame-inner {
                            // border-style: solid;
                            // border-color: rgba(55, 49, 47, 0.1215686275);
                            // border-width: 1px;
                            border-style: none;
                            border-radius: 15px;
                            overflow: hidden;
                            padding: 0px;
                            height: 100%;
                            > div {
                                height: 100%;
                                overflow-y: auto;
                                overflow-x: hidden;
                            }
                            iframe {
                                position: absolute;
                                transform-origin: 0 0;
                                will-change: transform;
                                opacity: 1;
                                transition: opacity 0.4s ease 0s;
                                transform: scale(0.395);
                            }
                        }
                    }
                }
                // .mb-main {
                //     width: 308px;
                //     height: 100%;
                //     display: flex;
                //     flex-flow: wrap;
                //     -webkit-box-pack: center;
                //     place-content: center;
                //     -webkit-box-align: center;
                //     align-items: center;
                //     .mb-frame {
                //         width: 308px;
                //         height: 611.368px;
                //         display: inline-flex;
                //         position: relative;
                //         .mb-frame-scl {
                //             position: absolute;
                //             top: 0;
                //             left: 0;
                //             background: rgb(255 255 255);
                //             border: 1px solid #f1f0f0;
                //             border-radius: 50px;
                //             box-shadow: none;
                //             overflow: hidden;
                //             transition: box-shadow .4s;
                //             width: 399px;
                //             height: 792px;
                //             padding: 10px;
                //             transform-origin: 0px 0px;
                //             transform: scale(0.77193);
                //             .mb-frame-inner {
                //                 border-style: solid;
                //                 border-color: #f1f0f0;
                //                 border-radius: 40px;
                //                 overflow: hidden;
                //                 border-width: 2px;
                //                 .mb-frame-viewport {
                //                     width: 375px;
                //                     height: 768px;
                //                 }
                //             }
                //         }
                //     }
                // }
                // .preview-render {
                //     width: 100%;
                //     height: 100%;
                //     position: relative;
                //     background: #f1f0f0;
                //     align-content: flex-start;
                // }
                // .simplebar-wrapper {
                //     overflow: hidden;
                //     width: inherit;
                //     height: inherit;
                //     max-width: inherit;
                //     max-height: inherit;
                //     margin: 0;
                // }
                // .simplebar-mask {
                //     direction: inherit;
                //     position: absolute;
                //     overflow: hidden;
                //     padding: 0;
                //     margin: 0;
                //     left: 0;
                //     top: 0;
                //     bottom: 0;
                //     right: 0;
                //     width: auto !important;
                //     height: auto !important;
                //     z-index: 0;
                // }
                // .simplebar-offset {
                //     direction: inherit !important;
                //     box-sizing: inherit !important;
                //     resize: none !important;
                //     position: absolute;
                //     top: 0;
                //     left: 0;
                //     bottom: 0;
                //     right: 0;
                //     padding: 0;
                //     margin: 0;
                //     -webkit-overflow-scrolling: touch;
                // }
                // .simplebar-content-wrapper {
                //     direction: inherit;
                //     box-sizing: border-box !important;
                //     position: relative;
                //     display: block;
                //     height: 100%;
                //     width: auto;
                //     max-width: 100%;
                //     max-height: 100%;
                //     scrollbar-width: none;
                //     -ms-overflow-style: none;
                //     overflow: hidden scroll;
                // }
                // .simplebar-content {
                //     padding: 0;
                // }
                // .air-preview-renderer__body {
                //     position: relative;
                //     overflow: hidden;
                //     min-height: 100%;
                //     height: 1236px;
                // }
                // iframe {
                //     border: none;
                //     position: relative;
                //     z-index: 1;
                //     width: 375px;
                //     transform-origin: 0px 0px;
                //     will-change: transform;
                //     opacity: 1;
                //     transition: opacity 0.4s ease 0s;
                //     height: 1236px;
                //     transform: scale(1);
                // }
            }
        }
        @media (max-width: 1199.98px) {
            .bck-btn-sc {
                display: flex;
                align-items: center;
                justify-content: center;
                width: calc(100% - 0px);
                padding: 0 30px;
                left: 0px;
                top: 20px;

                position: static;
                top: 0px;
                .preview-icon li {
                    display: none;
                }
            }
        }
        @media (max-width: 575.98px) {
            &.mobPreview .preview_main_class {
                width: 320px;
                .mobile-frame .mobile-frame-scale {
                    padding: 0;
                    .mobile-frame-inner iframe {
                        transform: scale(0.4564);
                    }
                }
            }
        }
    } 
/* Email preview popup E */

// .modal-footer{
//     border-top: none;
// }
.draggable-item img{
    width: 19px;
}

/* Subscriber list S */
    .subscriberlist_menuclass .nav-link.dropdown-toggle::after {
        display: none;
    }
    .page-title-bar.selected-title-bar {
        .filter-bar .btn-sc {
            gap: 10px; 
            .btn:not(:first-child) {
                margin-left: 0px;
            }
        }
        @media (max-width: 991.98px) {
            flex-direction: column-reverse;
            .title-box {
                margin-top: 15px;
                margin-bottom: 0;
            }
            .filter-bar .btn-sc {
                width: 100%;
                flex-wrap: wrap;
                justify-content: space-between;
                .btn {
                    width: calc(33.33% - 7px);
                }
            }
        }
    }
/* Subscriber list E */

/* Subscriber list - Add list Popup S */
    .color-pad {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
    }
    .color-pad__item {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        cursor: pointer;
        border: 2px solid;
    }
    .color-pad__item.selected {
        border-color: black;
    }
/* Subscriber list - Add list Popup E */

/* Timezone dropdown UI S */
    .timezone-form-group {
        .dropdown-toggle {
            cursor: pointer;
            display: inline-block;
            padding: 6px 15px;
            border-radius: 3px;
            width: 100%;
            transition: 0.3s;
            border: 1px solid var(--bs-border-color);
            i {
                margin-right: 5px;
            }
            &.show {
                border-color: $btn-outline-color;
            }
            &::after {
                display: none;
            }
        }
        .dropdown-menu {
            box-shadow: 4px 4px 20px hsl(14deg 20% 20% / 18%);
            border: 0;
            padding: 0;
            width: 100%;
            .dropdown-inner {
                max-height: 350px;
                display: flex;
                flex-direction: column;
            }
            .form-group {
                flex-shrink: 0;
                background-color: #fff;
                padding: 15px;
                margin-bottom: 0 !important;
                .input-group {
                    position: relative;
                    .input-group-text {
                        position: absolute;
                        width: 42px;
                        height: 100%;
                        background: transparent;
                        border: 0;
                    }
                    .form-control {
                        border-radius: 4px !important;
                        padding-left: 45px;
                    }
                }
            }
            ul {
                width: 100%;
                overflow-y: auto;
                flex-grow: 1;
                padding: 0;
                margin: 0;
                list-style-type: none;
                .dropdown-item {
                    padding: 10px 15px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    flex-wrap: wrap;
                    font-size: 14px;
                    &.disabled {
                        font-weight: 500;
                    }
                    &.active {
                        background-color: rgba($content-color, 70%);
                    }
                    .country {
                        width: calc(100% - 70px);
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        overflow: hidden;
                    }
                    .time {
                        font-size: 12px;
                        width: 70px;
                        text-align: right;
                        opacity: 0.5;
                    }
                }
            }
        }
    }
/* Timezone dropdown UI E */

/* Subscribers List S */
   .table-box {
        @media (min-width: 1250.99px) {
            .table-responsive {
                margin-left: calc(-50px - 0.5rem);
            }
        }
        .table-responsive::-webkit-scrollbar {
            height: 5px;
        }
        .table {
            min-width: 950px;
            margin: 0;
            .checkbox-group {
                width: 20px;
                height: 20px;
                margin: 0;
                padding: 0;
                .checkmark {
                    width: 100%;
                    height: 100%;
                    top: 0px;
                    transition: 0.3s;
                }
            }
            thead {
                tr {
                    border-top: 0px;
                    th {
                        border-top: 0px;
                    }
                }
            }
            th, td {
                background-color: transparent;
                border-left: 0px;
                border-right: 0px;
                border-bottom: 1px solid rgb(55 49 47 / 12%);
                transition: 0.3s;
            }
            tr {
                border: 0px;
                th:nth-child(1), td:nth-child(1) {
                    @media (min-width: 1199.99px) {
                        border-color: transparent;
                        opacity: 0;
                    }
                }
                &:hover {
                    td {
                        background-color: rgb(61 46 41 / 10%);
                        .checkbox-group {
                            .checkmark {
                                border-color: rgba($content-color, 100%);
                            }
                        }
                    }
                }
            }
            th {
                padding: 1rem 0.5rem;
            }
            td {
                padding: 1.5rem 0.5rem;
                a {
                    font-weight: 500;
                    color: rgba($content-color, 100%);
                }
                ul, ol {
                    margin: 0;
                    padding-left: 20px;
                }
            }
            &:hover {
                th:nth-child(1), td:nth-child(1) {
                    transition: 0.3s;
                    opacity: 1;
                    border-bottom: 1px solid rgba(55, 49, 47, 0.12);
                }
            }
        }
        &.checkbox-show {
            .table tr {
                th:nth-child(1), td:nth-child(1) {
                    @media (min-width: 1199.99px) {
                        border-bottom: 1px solid rgba(55, 49, 47, 0.12);
                        opacity: 1;
                    }
                }
            }
        }
    }
    .table-box.table-box-first-column-show {
        .table tr th:nth-child(1), .table tr td:nth-child(1) {
            opacity: 1;
            border-bottom: 1px solid rgba(55, 49, 47, .12);
        }
    }
/* Subscribers List E */

// START : Font family dropdown
    .dropdown_fontfamily {
        width: 100%;
    }
    .dropdown-toggle-fontfamily {
        text-align: left;
        width: 100%;
    }
    .dropdown-menu-fontfamily {
        display: none;
        position: absolute;
        background-color: #ffffff;
        border: 1px solid #ced4da;
        border-radius: $border-radius;
        padding: 5px 0;
        z-index: 1;
        width: 170px;
        height: 450px;
        overflow-y: scroll;
    }
    .dropdown-menu-fontfamily .dropdown-item-fontfamily.selected {
        background-color: #c5c9cd;
    }
    .dropdown-item-fontfamily {
        list-style: none;
        cursor: pointer;
        padding: 5px 10px;
        font-size: 15px;
    }
    // .dropdown-toggle-fontfamily::after {
    //     display: none;
    // }
// END : Font family dropdown

// START : Font weight dropdown
    .dropdown_fontweight {
        width: 100%;
    }
    .dropdown-toggle-fontweight {
        text-align: left;
        width: 100%;
    }
    .dropdown-menu-fontweight {
        display: none;
        position: absolute;
        background-color: #ffffff;
        border: 1px solid #ced4da;
        border-radius: $border-radius;
        padding: 5px 0;
        z-index: 1;
        width: 127px;
        height: 140px;
        overflow-y: scroll;
    }
    .dropdown-menu-fontweight .dropdown-item-fontweight.selected {
        background-color: #c5c9cd;
    }
    .dropdown-item-fontweight {
        list-style: none;
        cursor: pointer;
        padding: 5px 10px;
        font-size: 15px;
    }
    // .dropdown-toggle-fontweight::after {
    //     display: none;
    // }
// END : Font family dropdown

.form-control::file-selector-button {
    padding: 1rem 0.75rem;
}
.textbox_p_class,.buttonstyleclass{
    word-break: break-word;
}

/* Toast notification S */
    #toast-container>.toast-success {
        // background-image: none !important;
    }
    #toast-container>.toast-error {
        // background-image: none !important;
    }
    #toast-container>div {
        padding: 15px 20px 15px 15px;
        margin: 0;
        background-color: #fff;
        border: 1px solid $outline-color;
        box-shadow: 0 0.375rem 10px 0 rgb(58 53 65 / 5%);
        border-radius: $border-radius;
        transition: 0.3s;
        background-size: 20px;
        background-position: 15px center;
        position: relative;
        overflow: hidden;
        &::before {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            border-bottom: 2px solid transparent;
        }
        &:hover {
            box-shadow: 5px 5px 10px 0 rgb(58 53 65 / 10%);
        }
        &.toast-success {
            background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjNzNENjk2IiBkPSJNMjU2IDUxMkEyNTYgMjU2IDAgMSAwIDI1NiAwYTI1NiAyNTYgMCAxIDAgMCA1MTJ6TTM2OSAyMDlMMjQxIDMzN2MtOS40IDkuNC0yNC42IDkuNC0zMy45IDBsLTY0LTY0Yy05LjQtOS40LTkuNC0yNC42IDAtMzMuOXMyNC42LTkuNCAzMy45IDBsNDcgNDdMMzM1IDE3NWM5LjQtOS40IDI0LjYtOS40IDMzLjkgMHM5LjQgMjQuNiAwIDMzLjl6Ii8+PC9zdmc+) !important;
            box-shadow: 0 2px 10px 0 rgb(115 214 150 / 50%);
            &::before {
                border-color: #73D696;
            }
            &:hover {
                box-shadow: 5px 5px 20px 0 rgb(115 214 150 / 50%);
            }
        }
        &.toast-error {
            background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjRkM2NTRBIiBkPSJNMjU2IDUxMkEyNTYgMjU2IDAgMSAwIDI1NiAwYTI1NiAyNTYgMCAxIDAgMCA1MTJ6TTE3NSAxNzVjOS40LTkuNCAyNC42LTkuNCAzMy45IDBsNDcgNDcgNDctNDdjOS40LTkuNCAyNC42LTkuNCAzMy45IDBzOS40IDI0LjYgMCAzMy45bC00NyA0NyA0NyA0N2M5LjQgOS40IDkuNCAyNC42IDAgMzMuOXMtMjQuNiA5LjQtMzMuOSAwbC00Ny00Ny00NyA0N2MtOS40IDkuNC0yNC42IDkuNC0zMy45IDBzLTkuNC0yNC42IDAtMzMuOWw0Ny00Ny00Ny00N2MtOS40LTkuNC05LjQtMjQuNiAwLTMzLjl6Ii8+PC9zdmc+) !important;
            box-shadow: 0 2px 10px 0 rgb(252 98 81 / 50%);
            &::before {
                border-color: rgb(252, 98, 81);
            }
            &:hover {
                box-shadow: 5px 5px 20px 0 rgb(252 98 81 / 50%);
            }
        }
        .toast-message {
            font-size: 16px;
            line-height: normal;
            width: calc(100% - 30px);
            margin-left: auto;
            color: rgba($content-color, 80%);
        }    
        .toast-close-button {
            top: -4px !important;
            right: -15px;
            font-size: 25px;
            opacity: 1;
            color: rgba($content-color, 50%);
        }
    }
/* Toast notification E */

/* Workflow S */
    .workflow_status_display{
        display: inline-block;
        text-align: center;
        padding: 5px 15px;
        // border: 1px solid #000000;
        border-radius: 30px;
        margin: auto;
        font-size: 13px;
        font-weight: 600;
        line-height: normal;
    }
    .btn-outline-secondary{
        border-color: var(--bs-border-color);
    }
    .delete_which_branch_btn{
        min-width: 75%;
    }
    .workflow-wrapper {
        min-width: 900px;
        width: max-content;
        margin: auto;
        padding: 30px 15px;
    }
    .workflow-title-sc {
        text-align: center;
        margin-bottom: 30px;
        .title {
            display: block;
            font-weight: 500;
        }
    }
    .workflow-main-sc {
        .flow-box {
            max-width: 350px;
            margin: auto;
            .flow-icn {
                width: 20px;
                height: 20px;
                border: 1px solid rgba($content-color, 100%);
                border-radius: 50%;
                background: #ffffff;
                z-index: 1;
                opacity: 0;
                cursor: pointer;
                &.dlt-icn {
                    position: absolute;
                    right: -10px;
                    top: -10px;
                }
                &.add-icn {
                    position: relative;
                    margin: auto;
                }
                .fa-icn {
                    font-size: 15px;
                    opacity: 1;
                    margin-bottom: 0;
                }
            }
            &:hover {
                .flow-icn {
                    opacity: 1;
                }
            }
        }
        .flow-card {
            padding: 36px;
            border-radius: 10px;
            box-shadow: 0 0 25px rgba(0,0,0,.11);
            background: #ffffff;
            text-align: center;
            position: relative;
            cursor: pointer;
            border: 2px solid #ffffff;
            transition: all 0.3s;
            &:hover, &.active {
                border-color: rgba($content-color, 100%);    
            }
            .fa-icn {
                font-size: 20px;
                opacity: 0.5;
                margin-bottom: 10px;
            }
            .flow-card-title {
                font-weight: 600;
                font-size: 14px;
                letter-spacing: .1em;
                text-transform: uppercase;
                line-height: 15px;
                color: rgba($content-color, 50%);
                & + .flow-card-subtitle {
                    margin-top: 12px;
                }
            }
            .flow-card-subtitle {
                font-weight: 400;
                font-size: 16px;
                letter-spacing: .01em;
                text-transform: none;
                line-height: 24px;
                color: rgba($content-color, 100%);
                & + .flow-card-subtitle {
                    margin-top: 12px;
                }
            }
            .flow-card-list {
                margin-top: 18px;
                .list-item {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    .segment-item {
                        display: inline-block;
                        max-width: 100%;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        overflow: hidden;
                        height: 30px;
                        border-radius: $border-radius;
                        color: rgba(0, 0, 0, .7);
                        background: #f3f2f1;
                        padding: 7px 15px;
                        font-weight: 500;
                        font-size: 14px;
                        line-height: 16px;
                    }
                    & + .list-item {
                        margin-top: 6px;
                    }
                }
            }
            &.flow-card-empty {
                background-color: transparent;
                box-shadow: none;
                border-width: 3px;
                border-style: dotted;
                border-color: rgba($content-color, 10%);
                &:hover, &.active {
                    border-color: rgba($content-color, 100%);
                }
            }
            .iframe-div {
                margin-left: -36px;
                margin-top: -36px;
                width: calc(100% + 72px);
                aspect-ratio:  1 / 1;
                overflow: hidden;
                border-radius: 10px 10px 0 0;
                .iframe-flow {
                    width: 650px;
                    // transform: scale(0.546305) !important;
                    height: 426px;
                    transform-origin: 0 0;
                    background: #fbfbfb;
                    will-change: transform;
                }
                & + .flow-card-title {
                    margin-top: 12px;
                }
            }
            &.flow-card-iframe {
                &::before {
                    content: '';
                    position: absolute;
                    top: 0;
                    right: 0;
                    bottom: 0;
                    left: 0;
                    z-index: 1;
                }
            }
        }
        .flow-edge {
            margin: 0;
            padding: 30px 0;
            text-align: center;
            position: relative;
            .edge-link {
                z-index: 1;
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                overflow: hidden;
                &::before {
                    position: absolute;
                    top: 10px;
                    left: 50%;
                    content: "";
                    display: block;
                    height: calc(100% - 20px);
                    width: 1px;
                    margin-left: -.5px;
                    background-color: #d4cfce;
                }
            }
            &.last-edge {
                padding-bottom: 0;
                .flow-icn {
                    opacity: 1;
                }
            }
        }
    }
    .flow-yes-no {
        max-width: unset;
        .yes-no-box {
            display: inline-block;
            padding: 4px 20px;
            line-height: normal;
            border-radius: 20px;
            font-weight: 500;
            color: #fff;
            position: relative;
            z-index: 2;
        }
        .yes-box {
            background: #79a993;
        }
        .no-box {
            background: #f16d64;
        }
    }
    .flow-yes-no-col {
        position: relative;
        &::before {
            content: '';
            position: absolute;
            top: 15px;
            width: 40%;
            border-top: 1px solid $border-color;
            z-index: 1;
        }
        &.flow-yes-col::before {
            right: 0;
        }
        &.flow-no-col::before {
            left: 0;
        }
    }
    .step-list-grd {
        .grd-list {
            .step-box {
                display: flex;
                align-items: center;
                justify-content: space-between;
                border: 1px solid $content-color;
                border-radius: $border-radius;
                padding: 8px 15px;
                cursor: pointer;
                transition: all 0.3s;
                svg {
                    width: 20px;
                }
                .title {
                    width: calc(100% - 30px);
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }
                &:hover {
                    border-color: rgba($content-color, 100%);
                }
            }
        }
    }
/* Workflow E */

/* Workflow Preview S */
    .workflow-title-main.page-title-main .page-title-bar {
        justify-content: center;
        position: relative;
        .back-template {
            position: absolute;
            left: 0;
        }
        .main-title {
            width: calc(100% - 350px);
            text-align: center;
            font-size: 22px;
        }
        @media (max-width:767.98px) {
            .back-template {
                top: 20px;
            }
            .main-title {
                width: 100%;
                padding-top: 40px;
            }
        } 
    } 
/* Workflow Preview E */

/* Subscribers - filter popup S */
    .filter_modal {
        .modal-body {
            max-height: calc(100vh - 300px);
            overflow-y: auto; 
        }
        .form-group {
            margin-bottom: 0;
            padding: 20px 0px;
            & + .form-group {
                border-top: 1px solid $border-color;
            }
            &:nth-child(1) {
                padding-top: 0;
            }
            &:last-child {
                padding-bottom: 0;
            }
            .checkbox-group {
                font-size: 16px;
                margin-bottom: 5px;
                margin-top: 5px;
                .checkmark {
                    top: 2px;
                }
            }
            .row {
                align-items: center ;
            }
            .radio-span {
                display: block;
                margin-bottom: 15px;
            }
            .btn-frame {
                border-radius: 30px;
                border: 1px solid rgba($content-color, 100%);
                display: inline-block;
                margin: 0 10px;
                .btn {
                    display: inline-block;
                    padding: 5px 0px;
                    position: relative;
                    text-align: center;
                    transition: background 500ms ease-in;
                    border: 0;
                    box-shadow: none;
                }
                input[type="radio"].toggle {
                    display: none;
                    & + label {
                        cursor: pointer;
                        min-width: 60px;
                        font-size: 14px;
                        min-height: unset;
                        line-height: normal;
                        &:hover {
                            background: none;
                            color: #1a1a1a;
                        }
                        &:after {
                            border-radius: 30px;
                            background: #1a1a1a;
                            content: "";
                            height: 100%;
                            position: absolute;
                            top: 0;
                            transition: left 250ms cubic-bezier(0.77, 0, 0.175, 1);
                            width: 100%;
                            z-index: -1;
                        }
                    }
                    &.toggle-left + label {
                        border-right: 0;
                        &:after {
                            left: 100%;
                        }
                    }
                    &.toggle-right + label {
                        margin-left: -5px;
                        &:after {
                            left: -100%;
                        }
                    }
                    &:checked + label {
                        cursor: default;
                        color: #fff;
                        transition: color 200ms;
                        z-index: 1;
                        &:after {
                            left: 0;
                        }
                    }
                }
            }
        }
        .label {
            font-weight: 600;
        }
        @media (max-width: 575.98px) {
            overflow: hidden;
            .modal-dialog {
                margin: 0;
                height: 100%;
                .modal-content {
                    height: 100%;
                    border-radius: 0;
                }
            }
            .modal-body {
                max-height: unset;
            }
        }
    }
/* Subscribers - filter popup E */

/* Subscription Modal S */
    .subscription_modal {
        .btn-close {
            position: absolute;
            right: 20px;
            top: 20px;
            cursor: pointer;
        }
        .modal-body {
            padding: 30px;
            .modal-inner-box {
                max-width: 600px;
                margin: auto;
            }
            .title-sc {
                max-width: 500px;
                margin: auto;
                .title {
                    margin-bottom: 30px;
                }
                p {
                    margin: 0;
                }
            }
            .img-sc {
                padding: 50px 0;
                aspect-ratio: 1 / 1;
                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }
            .btn-sc {
                display: flex;
                flex-direction: column;
                .btn {
                    max-width: 250px;
                    margin: 0 auto 15px;
                }
            }
        }
        @media (max-width: 767.98px) {
            .btn-close {
                right: 10px;
                top: 10px;
            }
            .modal-body {
                padding: 20px;
                .title-sc .title {
                    margin-bottom: 15px;
                }
                .img-sc {
                    padding: 20px 0px;
                }
            }
        }
    }
/* Subscription Modal E */

/* CSV Modal S */
    .import-table-body {
        .table {
            min-width: 700px;
            // margin-bottom: 0px;
        }
    }
/* CSV Modal E */

/* Settings Page S */
    .tabcontent {
        display: none;
        padding: 6px 12px;
        -webkit-animation: fadeEffect 1s;
        animation: fadeEffect 1s;
    }
    @-webkit-keyframes fadeEffect {
        from {opacity: 0;}
        to {opacity: 1;}
    }
    @keyframes fadeEffect {
        from {opacity: 0;}
        to {opacity: 1;}
    }
    .already_brandlogo_div {
        .logo-inner {
            position: relative;
            max-width: 130px;
            padding: 10px 15px;
            border: 1px solid #dee2e6;
            border-radius: 5px;
        }
    }
    .already_profile_div {
        width: 100px;
        position: relative;
        .logo-inner {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: #ffffff;
            box-shadow: 0 0.375rem 10px 0 rgba(58, 53, 65, 0.01);
            border: 1px solid #dee2e6;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
    }
    .already_brandlogo_div .remove_brandlogo, .already_profile_div .remove_profile {
        position: absolute;
        top: -10px;
        right: -10px;
        cursor: pointer;
        width: 20px;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 10px;
        border-radius: 50%;
        background: #000000;
        box-shadow: 0 0.375rem 10px 0 rgba(58, 53, 65, 0.01);
        color: #fff;
        opacity: 1;
    }
    .already_profile_div .remove_profile {
        top: 10px;
        right: 0px;
    }
    .setting-main {
        .form-wrapper {
            max-width: 800px;
            margin: auto;
            display: none;
            .title-sc {
                margin-bottom: 30px;
                .title {
                    font-size: 22px;
                    font-weight: 600;
                    display: block;
                }
                .font-grey {
                    color: rgba($content-color, 50%);
                    a {
                        color: rgba($content-color, 100%);
                    }
                }
            }
            .form-group {
                margin-bottom: 20px;
                .sub-label {
                    font-size: 14px;
                    opacity: 0.5;
                    display: block;
                    margin-bottom: 10px;
                }
                .row {
                    align-items: center;
                }
                &.address-form-group .row {
                    align-items: flex-start;
                }
                & + .title-sc {
                    margin-top: 30px;
                }
            }
            .btn-grp {
                display: flex;
                align-items: center;
                justify-content: flex-end;
                .btn + .btn {
                    margin-left: 15px;
                }
            }
            .card.card-tabcontent {
                padding: 20px;
                border-radius: 10px;
                display: block;
                margin-bottom: 30px;
            }
            .form-card-wrap {
                box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 1px -0.1px, rgba(0, 0, 0, 0.055) 0px 1.98px 3.06px -0.36px, rgba(0, 0, 0, 0.086) 0px 5.8806px 14.0454px -1.944px;
                border-radius: 10px;
                background-color: #ffffff;
                margin-bottom: 30px;
                .form-card-header {
                    text-align: center;
                    padding: 10px 20px;
                    background-color: #f3f2f1;
                    border-radius: 10px 10px 0px 0px;
                    position: relative;
                    &.bg-dark {
                        background-color: #241a17;
                        color: #ffffff;
                    }
                    &.bg-danger {
                        background-color: #c84f41;
                        color: #ffffff;
                    }
                    &.bg-success {
                        color: #ffffff;
                    }
                    .title {
                        text-transform: uppercase;
                        font-size: 14px;
                        line-height: normal;
                        font-weight: 600;
                        letter-spacing: 0.2px;
                    }
                    .dropdown {
                        position: absolute;
                        right: 20px;
                        top: 10px;
                    }
                    .dropdown-toggle::after {
                        display: none;
                    }
                }
                .form-card-body {
                    padding: 20px;
                    .form-group {
                        .label {
                            margin-bottom: 5px;
                            & + .sub-label {
                                margin-top: -5px;
                            }
                        }
                    }
                    .verify-block {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        .tag {
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            width: fit-content;
                            border-radius: 30px;
                            background-color: #f3f2f1;
                            padding: 4px 15px;
                            font-size: 12px;
                            line-height: normal;
                            font-weight: 500;
                            letter-spacing: 0.2px;
                            &.tag-awaiting {
                                background-color: #fec72f;
                            }
                            &.tag-verified {
                                background-color: #79a994;
                                color: #ffffff;
                            }
                            &.tag-pending {
                                background-color: #ff0000;
                                color: #ffffff;
                            }
                        }
                        .link {
                            color: rgba($content-color, 100%);
                            text-decoration: underline;
                            font-size: 14px;
                        }
                    }
                    .tag-group {
                        display: flex;
                        flex-wrap: wrap;
                        .tag {
                            padding: 4px 10px;
                            border-radius: 30px;
                            border: 1px solid rgba($content-color, 100%);
                            opacity: 0.5;
                            font-size: 10px;
                            font-weight: 500;
                            line-height: normal;
                            & + .tag {
                                margin-left: 5px;
                            }
                        }
                    }
                }
            }
            .btn-sender {
                max-width: 170px;
                margin-left: auto;
            }
            @media (max-width: 767.98px) {
                padding: 0;
            }
        }
    }
    .title-flex-sc {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .billing-box {
        &.billing-box-plan {
            padding: 0px 0;
        }
        .plan-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 30px;
            .plan-col {
                width: calc(50% - 15px);
                position: relative;
                .box-shadow {
                    position: absolute;
                    bottom: -25px;
                    left: 0;
                    width: 100%;
                    height: 50px;
                    border-radius: 50%;
                    background-color: rgba(0, 0, 0, 0.6);
                    z-index: -1;
                    filter: blur(10px);
                }
                .plan-box {
                    border-radius: 10px;
                    background-color: #ffffff;
                    padding: 30px 20px 40px 20px;
                    position: relative;
                    transform: scale(0.98);
                    .plan-title-box {
                        display: flex;
                        margin-bottom: 20px;
                        span {
                            line-height: normal;
                            font-size: 22px;
                            font-weight: 600;
                        }
                        .title {
                            flex-grow: 1;
                            font-weight: 700;
                        }
                        .price {
                            flex-shrink: 0;
                            .per-year {
                                font-size: 14px;
                            }
                        }
                    }
                    .tag {
                        display: inline-block;
                        background-color: #fbd160;
                        border-radius: 30px;
                        padding: 4px 18px;
                        line-height: normal;
                        font-size: 11px;
                        font-weight: 700;
                        text-transform: uppercase;
                        position: absolute;
                        top: -11.5px;
                        left: 50%;
                        transform: translate(-50%, 0%);
                    }
                    .plan-img-box {
                        aspect-ratio: 2/1.5;
                        overflow: hidden;
                        border-radius: 10px;
                        margin-bottom: 20px;
                        img {
                            display: block;
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                        }
                    }
                    .feature-box {
                        .feature-title {
                            display: block;
                            font-size: 18px;
                            font-weight: 700;
                            margin-bottom: 15px;
                            line-height: normal;
                        }
                        ul {
                            margin: 0;
                            padding-left: 18px;
                            // list-style: none;
                            li + li {
                                padding-top: 10px;
                                position: relative;
                                &:before {
                                    content: '';
                                    position: absolute;
                                    top: 0;
                                    left: -18px;
                                    border-top: 1px solid #c4c2c2;
                                    width: calc(100% + 18px);
                                }
                            }
                            li:not(:last-child) {
                                padding-bottom: 10px;
                            }
                        }
                    }
                }
                &.paid-plan {
                    .box-shadow {
                        bottom: -40px;
                    }
                    .plan-box {
                        background-color: #589ccd;
                        transform: scale(1.04);
                        .feature-box ul li + li:before {
                            border-color: #48617e;
                        }
                    }
                }
            }
        }
        &.billing-box-plan .btn-sc {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            gap: 15px;
            margin-top: 50px;
            .btn {
                // width: 170px;
            }
        }
        .summary-form-group {
            border-bottom: 1px solid $border-color;
            padding-bottom: 10px;
            padding-top: 10px;
            margin-bottom: 0px !important;
        }
    }
    .referral-main {
        .tooltip-icn {
            opacity: 0.5;
            font-size: 16px;
            margin-left: 5px;
        }
        .ref-link-img {
            box-shadow: 0 0.375rem 10px 0 rgba(58, 53, 65, 0.01);
            border-radius: 5px;
            overflow: hidden;
            img {
                display: block;
                width: 100%;
            }
        }
        .ref-link-wrap {
            margin-bottom: 50px;
            .link-block {
                padding-bottom: 0px;
            }
            .form-group {
                margin-bottom: 0px;
                .label  {
                    // font-size: 18px;
                    // line-height: normal;
                    // margin-bottom: 10px;
                }
                .input-block {
                    position: relative;
                    .form-control {
                        padding-right: 40px;
                        // height: 55px;
                        // font-size: 18px;
                        pointer-events: none;
                    }
                    .copy-code {
                        position: absolute;
                        top: 1.5px;
                        right: 1px;
                        width: 40px;
                        height: calc(100% - 2px);
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        background-color: #000000;
                        border-radius: 0px 5px 5px 0px;
                        // font-size: 30px;
                        color: #fff;
                    }
                }
            }
        }

        .kit-wrap {
            margin-bottom: 50px;
            .img-div img {
                width: 100%;
            }
            .btn-sc {
                padding-top: 3%;
                text-align: center;
            }
        }

        .enrolled-wrap {
            margin-bottom: 50px;            
        }
        .enrolled-table {
            margin-top: -15px;
            border-radius: 5px;
            .enr-tr {
                display: flex;
                transition: 0.3s;
                .enr-td {
                    padding: 15px 0px;
                    &.td-title {
                        width: 55%;
                    }
                    &.td-info {
                        width: 45%;
                    }
                }
                .td-info {
                    text-align: right;
                    a {
                        font-weight: 600;
                        color: rgba($content-color, 100%);
                    }
                }
            }
            .input-group {
                margin-left: auto;
                max-width: 170px;
                pointer-events: none;
                .form-control {
                    text-align: right;
                }
            }
            .form-control, .input-group-text {
                border-color: $border-color;
            }
        }

        @media (max-width: 575.98px) {
            .tooltip-icn,
            .enrolled-table .enr-tr .enr-td.td-title {
                font-size: 14px;
            }
        }
    }
    .preference-form-block {
        .append-preference-form {
            display: none;
        }
        .form-grid {
            $gap : 20px;
            $icon-size : 30px;

            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: $gap;

            & + .form-grid {
                margin-top: 15px;
            }
            .icon-sc {
                width: $icon-size;
                height: $icon-size;
                background-color: rgba($content-color, 100%);
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 50%;
                color: #ffffff;
                font-size: 18px;
                cursor: pointer;
                transition: 0.3s;
                &:hover {
                    box-shadow: 5px 5px 10px 3px rgba(0, 0, 0, 0.2);
                }
            }
            .form-group {
                width: calc(50% - ((($gap * 2) + $icon-size) / 2));
                margin-bottom: 0;
            }
        }
        .form-control::placeholder {
            opacity: 0.5;
        }
    }
/* Settings Page E */

/* Form Page S */
    .form-container {
        .form-main {
            background-color: #ffffff;
        }
    }
    .default-form-grd-box.grd-box .grd-col .grd-img-sc iframe,
    .form-grd-box.grd-box .grd-col .grd-img-sc iframe {
        height: auto;
        aspect-ratio: 1 / 1;
    }
    .form-grd-box.grd-box .grd-col {
        width: calc(50% - 30px);
        @media (max-width: 1399.98px) {
            width: calc(50% - 20px);
        }
        @media (max-width: 991.98px) {
            width: calc(50% - 15px);
        }
        @media (max-width: 767.98px) {
            width: 100%;
        }
    }
    #embedCodeModal .modal-body p {
        font-size: 14px;
        color: rgba($content-color, 50%);
        a {
            text-decoration: underline;
            color: rgba($content-color, 50%);
        }
    }
    .copy-code-form-group {
        .btn {
            position: absolute;
            right: 10px;
            top: 5px;
            padding: 0;
            width: 30px;
            height: 30px;
            min-height: 30px;
            border-radius: 5px;
        }
    }
    #embed_link_group .form-control {
        padding-right: 40px;
    }
/* Form Page E */

/* Forms Lising - iFrame preview S */
    .htmlcontentdivtoform.form-list-preview,
    .htmlcontentdivtoform.form-list-preview > .row,
    .htmlcontentdivtoform.form-list-preview > .row > .main-col,
    .htmlcontentdivtoform.form-list-preview .form-main  {
        height: 100%;
    }
    .htmlcontentdivtoform.form-list-preview {
        .popup-form-main-wrapper {
            padding: 0;
            width: 100%;
        }
        .form-main.popup-form-one, .form-main.inline-form-three {
            width: 100%;
            .row {
                height: 100%;
            }
            .row > [class*=col-] {
                width: 50%;
                position: relative;
            }
            .image_root {
                height: 100%;
                // aspect-ratio: 1 / 1;
                width: 100%;
                position: absolute;
                top: 0;
                left: 0;
            }
            .row > [class*=col-]:last-child {
                display: flex;
                align-items: center;
            }
        }
        .form-main.inline-form-one,
        .form-main.inline-form-four {
            display: flex;
            align-items: center;
        }
        .inline-form-main-wrapper {
            width: 100%;
        }
        .form-main.inline-form-one {
            .btn-sc {
                order: 1;
            }
            .checkbox-field  {
                order: 2;
                max-width: 550px;
            }
            #successMessage {display: none;}
        }
    }
    .htmlcontentdivtoform.form-list-preview .popup-form-inner-wrapper .form-main,
    .htmlcontentdivtoform.form-list-preview .inline-form-inner-wrapper .form-main {
        height: unset;
    }
    body.form_2_main_class {
        background-color: rgb(0 0 0 / 30%);
    }
/* Forms Lising - iFrame preview E */

/* Analytics S */
    .date-filter-wrap {
        margin-bottom: 30px;
        .form-group {
            display: flex;
            align-items: center;
            .label {
                margin-right: 15px;
                font-weight: 500;
            }
            .form-control {
                width: auto;
                background-color: #ffffff;
            }
            .form-control::placeholder {
                opacity: 0.5;
            }
        }
    }
    .card-box {
        padding: 50px 30px;
        box-shadow: 0 0.375rem 10px 0 rgba(58, 53, 65, 0.01);
        border: 0;
        border-radius: 5px;
        margin-bottom: 30px;
        &.global-analytics-card{
            .title-block {
                .title {
                    font-size: 42px;
                    margin-bottom: 40px;
                }
                .sub-title {
                    font-size: 38px;
                    margin-bottom: 40px;
                }
            }
        }
        @media (max-width: 991.98px) {
            padding: 30px;
            &.global-analytics-card{
                .title-block {
                    .title {
                        font-size: 30px;
                        margin-bottom: 20px;
                    }
                    .sub-title {
                        font-size: 28px;
                        margin-bottom: 20px;
                    }
                }
            }
        }
        @media (max-width: 767.98px) {
            padding: 20px;
            &.global-analytics-card{
                .title {
                    font-size: 26px;
                }
                .title-block {
                    .sub-title {
                        font-size: 22px;
                        line-height: 1.3;
                    }
                }
            }
        }
    }
    .rate-grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        .rate-col {
            width: 50%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            .title {
                text-transform: uppercase;
                font-size: 14px;
                font-weight: 500;
                letter-spacing: 0.1px;
            }
            .info {
                font-size: 30px;
                font-weight: 500;
            }
            @media (max-width: 767.98px) {
                .info {
                    font-style: 22px;
                }
            }
        }
        &.metrics-rate-grid {
            gap: 20px;
            justify-content: flex-start;
            .rate-col {
                width: calc(33.33% - 20px);
                &.rate-col-4 {
                    width: calc(25% - ((20px * 3) / 4));
                }
                .card {
                    margin-bottom: 0px;
                    width: 100%;
                }
            }
            @media (max-width: 767.98px) {
                gap: 10px;
                .rate-col {
                    width: calc(50% - 5px);
                }
            }
        }
        &.time-segments {
            gap: 20px;
            justify-content: flex-start;
            .rate-col {
                width: calc(25% - 15px);
                padding: 20px;
                text-align: center;
                border: 1px solid #ddd;
                border-radius: 5px;
                background-color: #f9f9f9;
                &.morning {
                    background-color: #fff9e6;
                }
                &.afternoon {
                    background-color: #f9fbe6;
                }
                &.evening {
                    background-color: #f4f6ff;
                }
                &.night {
                    background-color: #fff4e6;
                }
            }
            @media (max-width: 991.98px) {
                .rate-col {
                    width: calc(50% - 10px);
                }
            }
        }
    }
    // .table-wrap {
    //     margin-bottom: 30px;
    //     .main-title {
    //         font-size: 22px;
    //         margin-bottom: 20px;
    //     }
    //     .table {
    //         margin-bottom: 0px;
    //         box-shadow: 0 0.375rem 10px 0 rgba(58, 53, 65, 0.01);
    //     }
    // }
    .card-wrap-grid {
        margin-bottom: 30px;
        .main-title {
            font-size: 32px;
            margin-bottom: 20px;
        }
        .table {
            margin-bottom: 0px;
            min-width: 900px;
        }
        @media (max-width: 991.98px) {
            .main-title {
                font-size: 28px;
            }
        }
    }
    .canvas-listing {
        list-style: auto;
        padding-top: 40px;
        margin-bottom: 0;
        li {
            font-weight: 500;
        }
        li + li {
            margin-top: 5px;
        }
    }
    .no-analytics-block {
        .tittle {
            text-align: center;
            margin-bottom: 20px;
        }
        .grid {
            margin: 0;
            padding: 0;
            list-style-type: none;
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            li {
                width: calc(33.33% - ((20px * 2) / 3));
                background-color: #ffffff;
                text-align: center;
                margin-bottom: 0;
                font-weight: 600;
            }
            @media (max-width: 767.98px) {
                gap: 10px;
                li {
                    width: 100%;
                }
            }
        }
        .btn-sc {
            text-align: center;
            padding-top: 30px;
        }
    }
/* Analytics E */

/* Individual Email S */
    .top-main {
        background-color: #ffffff;
        padding-top: 15px;
    }
    // .top-title-block {
    //     display: flex;
    //     flex-wrap: wrap;
    //     align-items: center;
    //     padding-top: 20px;
    //     padding-bottom: 30px;
    //     .left-col {
    //         width: 50%;
    //     }
    //     .right-box {
    //         width: 50%;
    //         display: flex;
    //         align-items: center;
    //         justify-content: flex-end;
    //         gap: 10px;
    //     }
    //     .title-box {
    //         display: flex;
    //         align-items: center;
    //         gap: 10px;
    //     }
    //     .status-box {
    //         font-size: 12px;
    //         opacity: 0.5;
    //         font-weight: 500;
    //         display: flex;
    //         margin-top: 10px;
    //         align-items: center;
    //         gap: 5px;
    //         .sign {
    //             width: 8px;
    //             height: 8px;
    //             display: block;
    //             border-radius: 50%;
    //             background: #000;
    //         }
    //     }
    //     .title {
    //         font-size: 18px;
    //         font-weight: 500;
    //         line-height: normal;
    //     }
    //     .icon {
    //         font-size: 12px;
    //         line-height: normal;
    //         height: unset;
    //     }
    // }
    .top-email-summary-block {
        display: flex;
        flex-wrap: wrap;
        padding-bottom: 30px;
        gap: 50px;
        .left-col {
            width: 400px;
            .email-view-box {
                display: block;
                aspect-ratio: 1 / 1;
                overflow: hidden;
                box-shadow: rgb(58 53 65 / 10%) 0px 0.375rem 10px 0px;
                border-radius: 5px;
                position: relative;
                iframe {
                    border: 0;
                    width: 650px;
                    transform-origin: 0px 0px;
                    will-change: transform;
                    opacity: 1;
                    transition: opacity 0.4s ease 0s;
                }
                .overlay-sc {
                    position: absolute;
                    top: 0;
                    left: 0;
                    background-color: rgba($content-color, 10%);
                    width: 100%;
                    height: 100%;
                    opacity: 0;
                    transition: opacity 0.3s;
                    .list-box {
                        padding: 10px;
                        width: 100%;
                        height: 100%;
                        display: flex;
                        align-items: center;
                        flex-direction: column;
                        justify-content: center;
                        // overflow-y: auto;
                        .list-sc {
                            padding: 8px 10px;
                            border: 1px solid $content-color;
                            border-radius: 30px;
                            color: #ffffff;
                            background-color: $content-color;
                            max-width: 150px;
                            width: 100%;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            transition: all 0.3s;
                            line-height: normal;
                            svg, i {
                                margin-right: 10px;
                            }
                            path {
                                fill: #ffffff;
                                transition: all 0.3s;
                            }
                            + .list-sc {
                                margin-top: 10px;
                            }
                            &:hover {
                                box-shadow: 5px 5px 10px 3px rgba(0, 0, 0, 0.2);
                                path {
                                    fill: #ffffff;
                                }
                            }
                        }
                        .light-overlay {
                            background-color: #ffffff;
                            border-radius: 10px;
                            width: 100%;
                            max-width: 210px;
                            padding: 20px;
                            .list-sc {
                                max-width: 100%;
                                background-color: transparent;
                                color: $content-color;
                                font-size: 14px;
                            }
                        }
                    }
                }
                &:hover .overlay-sc {opacity: 1;}
            }
        }
        .right-col {
            width: calc(100% - 450px);
            .subject-grid {
                display: flex;
                flex-wrap: wrap;
                .subject-col {
                    width: 100%;
                    display: flex;
                    flex-direction: column;
                    gap: 30px;
                }
                .subject-box {
                    display: flex;
                    flex-wrap: wrap;
                    flex-direction: row;
                    gap: 30px;
                    .title {
                        font-size: 16px;
                        font-weight: 500;
                        line-height: normal;
                        opacity: 0.6;
                        width: 200px;
                    }
                    .info {
                        font-size: 16px;
                        font-weight: 500;
                        line-height: normal;
                        width: calc(100% - 230px);
                    }
                    a {
                        color: #000;
                        font-weight: 500;
                    }
                }
            }
        }      
        @media (max-width: 991.98px) {
            gap: 30px;
            .left-col {
                width: 250px;
            }
            .right-col {
                width: calc(100% - 280px);
                .subject-grid {
                    .subject-col {
                        gap: 20px;
                    }
                    .subject-box {
                        flex-direction: column;
                        gap: 5px;
                        .title, .info {
                            width: 100%;
                        }
                    }
                }
            }
        }    
        @media (max-width: 767.98px) {
            gap: 30px;
            .left-col {
                width: 100%;
            }
            .right-col {
                width: calc(100% - 0px);
            }
        }
    }
    .tab-wrap {
        background-color: #ffffff;
        display: flex;
        align-items: center;
        gap: 20px;
        .tablinks {
            font-weight: 600;
            padding: 20px 0;
            position: relative;
            cursor: pointer;
            &::before {
                content: '';
                position: absolute;
                bottom: 0px;
                left: 50%;
                width: 0;
                height: 2px;
                border-radius: 10px;
                background-color: rgba($content-color, 100%);
                // opacity: 0;
                transition: 0.3s;
                transform: translate(-50%, 0);
            }
            &:hover::before, &.active::before {
                // opacity: 1;
                width: 100%;
            }
        }
    }
    .individual-main {
        padding: 50px 0;
        @media (max-width: 767.98px) {
            padding: 50px 0 0;
        }
        .tooltip-icn {
            opacity: 0.5;
            font-size: 16px;
            margin-left: 5px;
        }
        .rate-row .card {
            height: calc(100% - 30px);
        }
        .title-box {
            margin-bottom: 30px;
            .main-title {
                font-size: 26px;
            }
        }
        // .card-wrap-grid {
        //     .title-box{
        //         .main-title {
        //             margin-bottom: 0;
        //         }
        //     }
        // }
        .gage-title-box {
            margin-bottom: 15px;
            .gage-title {
                line-height: normal;
                margin-bottom: 0;
            }
        }
        .gage-percentage {
            color: #589ccd;
            font-size: 30px;
            text-align: center;
            margin-bottom: 20px;
            margin-top: 10px;
        }
        // .progress-bar-block {
        //     margin-bottom: 15px;
        //     .title {
        //         display: block;
        //         margin-bottom: 5px;
        //         font-size: 14px;
        //         line-height: normal;
        //     }
        //     .progress {
        //         height: 10px;
        //         border-radius: 30px;
        //         .progress-bar {
        //             background-color: #589CCD;
        //             border-radius: 30px;
        //         }
        //         &.exclude-progress {
        //             .progress-bar {
        //                 background-color: #4B8C91;
        //             }
        //         }
        //     }
        // }
        // .rate-listing-block {
        //     margin-bottom: 15px;
        //     .listing {
        //         display: flex;
        //         flex-wrap: wrap;
        //         & + .listing {
        //             margin-top: 10px;
        //         }
        //         .title {
        //             width: calc(100% - 30px);
        //             display: block;
        //         }
        //         .number {
        //             width: 30px;
        //             text-align: right;
        //             display: block;
        //             font-weight: 500;
        //         }
        //     }
        // }
        .device-rate {
            display: flex;
            flex-wrap: wrap;
            flex-direction: column;
            row-gap: 15px;
            column-gap: 15px;
        }
        .click-map-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            .click-map-col {
                width: 100%;
            }
            .top-click-col {
                display: flex;
                flex-direction: column;
                flex-wrap: wrap;
                gap: 30px;
            }
        }
    }
    .card-inner {
        display: flex;
        flex-direction: column;
        height: 100%;
        & > .title-box {
            flex-shrink: 0;
            margin-bottom: 15px;
        }
        & > .links-wrap {
            flex-grow: 1;
        }
        &  > .title-box * {
            margin-bottom: 0;
        }
    }
    .links-inner {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        height: 100%;
        & > .links-body {
            flex-grow: 1;
            // & > .links-body-inner {
            //     overflow-y: auto;
            //     height: calc(100% - 150px);
            // }
        }
        .links-tr {
            display: flex;
            justify-content: space-between;
            padding: 5px 0;
            border-bottom: 1px solid #00000024;
            a {
                color: #000;
                display: flex;
                align-items: center;
                gap: 10px;
                i {
                    font-size: 12px;
                    display: flex;
                }
            }
        }
        .links-head .links-tr {
            font-weight: 600;
        }
    }
    .recipient-main {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 30px;
        .sidebar {
            width: 250px;
            background-color: #fff;
            box-shadow: 0 0.375rem 10px 0 rgba(58, 53, 65, 0.01);
            .recipient-ul {
                padding: 20px 20px;
                margin: 0;
                list-style-type: none;
                display: flex;
                flex-direction: column;
                gap: 15px;
                & > li > .recipient-item {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    &.active {
                        color: rgba($content-color, 100%);
                        font-weight: 500;
                    }
                }
            }
        }
        .mainbar {
            padding: 20px 20px;
            width: calc(100% - 280px);
            background-color: #fff;
            box-shadow: 0 0.375rem 10px 0 rgba(58, 53, 65, 0.01);
            .title-box .main-title {
                font-size: 22px;
            }
            .page-title-bar {
                margin-bottom: 30px;
                .filter-bar .search-icon .icon {
                    background-color: #fff;
                }
            }
        }

        .table-box { 
            .table-responsive {
                margin-left: 0px;
            }
            .table {
                tr {
                    th, td {
                        padding: 0.6rem 0.5rem;
                    }
                    th:nth-child(1), td:nth-child(1) {
                        opacity: 1;
                        border-color: rgba(55, 49, 47, 0.12);
                    }
                    &:hover td {
                        background-color: transparent;
                        .recipient-td .icon {
                            background-color: #ebd6ab33;
                            color: #000;
                        }
                    }
                }
                .recipient-td {
                    display: flex;
                    align-items: flex-start;
                    gap: 5px;
                    .icon {
                        margin-top: -2px;
                        &.open {
                            transform: rotate(90deg);
                        }
                    }
                }
                // .recipient-tr {
                //     display: none;
                // }
            }
        }

        @media (max-width: 991.98px) {
            .sidebar {
                width: 100%;
            }
            .mainbar {
                width: 100%;
            }
            .page-title-bar .filter-bar {
                margin-top: 20px;
                .form-group {
                    width: 150px;
                }
                .search-icon {
                    width: calc(100% - 150px);
                    .icon {
                        height: 35px;
                        width: 35px;
                        top: 2px;
                    }
                }
            }
        }
        @media (max-width: 575.98px) {
            .page-title-bar .filter-bar {
                // .form-group {
                //     width: 150px;
                // }
                .search-icon {
                    width: calc(100% - 100px);
                }
            }
        }
    }
/* Individual Email E */

.mobile-only {
    display: none;
}
.desktop-only{
    display: block;
}

@media (max-width: 768px) {
    .mobile-only {
        display: block;
    }
    .desktop-only{
        display: none;
    }
}

/* Platform Tour Guide S */
    .platformTourModel {
        .close {
            cursor: pointer;
            position: absolute;
            top: 5px;
            right: 10px;
            font-size: 22px;
        }
        .modal-content {
            overflow: hidden;
        }
        .modal-body {
            padding: 0;
        }
        .modal-footer {
            border-top: 0;
            padding-top: 0;
            padding-bottom: 15px;
            justify-content: flex-start;
            button {
                margin: 0;
            }
        }
        .image-box {
            background-color: #F4F5FA;
            border-bottom: 1px solid var(--bs-modal-footer-border-color);
            img {
                display: block;
            }
        }
        .content-box {
            padding: var(--bs-modal-padding);
            .title {
                font-size: 20px;
                font-weight: 600;
                display: block;
                margin-bottom: 5px;
            }
            p {
                margin: 0;
            }
        }
    }
    
    .tour-tooltip {
        display: none;
        position: absolute;
        background: white;
        // border: 1px solid #ccc;
        border-radius: 10px;
        padding: 15px;
        max-width: 300px;
        z-index: 1001;
        box-shadow: 0 0 15px rgba(0,0,0,0.2);
        .tour-tooltip-arrow {
            position: absolute;
            width: 0;
            height: 0;
            border-width: 10px;
            border-style: solid;
        }
        &.left .tour-tooltip-arrow {
            right: -20px;
            border-color: transparent transparent transparent white;
        }
        &.right .tour-tooltip-arrow {
            left: -20px;
            border-color: transparent white transparent transparent;
        }
        &.bottom .tour-tooltip-arrow {
            top: -20px;
            border-color: transparent transparent white transparent;
        }
        &.top .tour-tooltip-arrow {
            bottom: -20px;
            border-color: white transparent transparent transparent;
        }
        img {
            width: calc(100% + 30px);
            max-width: unset;
            margin-left: -15px;
            margin-top: -15px;
            border-radius: 10px 10px 0 0;
        }
        #tour-title {
            font-size: 20px;
        }
        p {
            font-size: 0.95em;
            margin-bottom: 10px;
        }    
    }
    .tour-highlight {
        position: relative;
        z-index: 1002;
    }
    .tour-tooltip-actions {
        display: flex;
        justify-content: space-between;
        margin-top: 20px;
    }
/* Platform Tour Guide E */