@charset "UTF-8";
/* @import url('./marketplace.css'); */
/*
Copyright (c) 2023
------------------------------------------------------------------
[Master Default Stylesheet]
-------------------------------------------------------------------
1. body
2. authentication
3. header
4. profile
5. campaign
6. editor
7. templates
8. image editor
9. settings
10. packaging
11. assets uploader
12. background themes
13. social view
14. tutorials
15. dashboard
16. animation
17. marketplace
18. Free trial
19. Publisher
20. Announcements
21. Pages
22. Download Page
23. Image AI
24. Whitelabel
25. File Manager
26. Survey
27. New Signup
28. Whitelabel
29. Affiliate
30. Uploaded Image Manager
31. Campaign list with sidebar
 .
 .
 .
50. footer
51. components
52. responsive 
 
 
-------------------------------------------------------------------*/

/********************************************************************************************* 
1. body start
*********************************************************************************************/
:root {
    --main-color: #346afd;
    --main-color-rgb: 52, 106, 253;
    --color-body: #707b91;
    --color-heading: #1e1f28;
    --line-color: #e1e4e7;
}

*,
*::before,
*::after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/*------ ScrollBar CSS Start ----*/
*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

*::-webkit-scrollbar-track {
    background-color: #f2f2f2;
    border-radius: 0px;
}

*::-webkit-scrollbar-thumb {
    /* background-color: #dddddd; */
    background-color: var(--main-color);
    border-radius: 2px;
}

* {
    scrollbar-color: #f2f2f2 #dddddd;
    scrollbar-width: thin;
}


/*------ ScrollBar CSS end ----*/

body {
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    line-height: 1.4;
    background-color: #f8fafd;
    color: var(--color-body);
    margin: 0;
}

a,
a:hover,
a:focus {
    text-decoration: none;
    cursor: pointer;
    color: var(--main-color);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--color-heading);
}

img {
    vertical-align: middle;
}

.main-color {
    color: var(--main-color);
}

.hide {
    display: none !important;
}

input,
button,
textarea {
    font-family: inherit;
}

.sp_logo {
    font-size: 20px;
    font-weight: bold;
    color: var(--color-heading);
    margin-right: 60px;
    width: 144px;
}

.sp_logo>a.sp_logo_inner {
    cursor: pointer;
    color: var(--color-heading);
}

.sp_logo>a.sp_logo_inner>img {
    width: 100%;
    max-width: 144px;
    max-height: 55px;
    object-fit: contain;
}

.sp_logo>.sp_logo_inner>span {
    width: 34px;
    height: 34px;
    line-height: 38px;
    border-radius: 8px;
    background-color: var(--main-color);
    /* box-shadow: -3px 3px 17px 10px rgba(52, 106, 253, 0.1); */
    display: inline-block;
    text-align: center;
    margin-right: 10px;
    color: #ffffff;
    font-size: 22px;
    font-weight: 900;
}

.sp_container {
    margin: 0 auto;
    max-width: 1600px;
    padding: 0 40px;
    width: 100%;
}

.sp_content_wrapper {
    /* padding: 0 40px;
    max-width: 1600px;
    margin: 60px auto; */
}

.text-left {
    text-align: left;
}

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

.text-right {
    text-align: right;
}

.text-uppercase {
    text-transform: uppercase;
}

.text-capitalize {
    text-transform: capitalize;
}

.flex-column {
    flex-direction: column;
}

.gap-10 {
    gap: 10px;
}

.gap-15 {
    gap: 15px;
}

.gap-20 {
    gap: 20px;
}

.gap-25 {
    gap: 25px;
}

.gap-30 {
    gap: 30px;
}

.d-flex {
    display: flex;
}

.align-item-center {
    align-items: center;
}

.align-item-flex-start {
    align-items: flex-start;
}

.align-item-flex-end {
    align-items: flex-end;
}

.flex-wrap {
    flex-wrap: wrap;
}

.justify-content-center {
    justify-content: center;
}

.justify-content-flex-start {
    justify-content: flex-start;
}

.justify-content-flex-end {
    justify-content: flex-end;
}

.justify-content-between {
    justify-content: space-between;
}

.justify-content-around {
    justify-content: space-around;
}

.justify-content-evenly {
    justify-content: space-evenly;
}

/* preloader start */
.sp_preloader_wrapper_editor,
.sp_preloader_wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.9);
    z-index: 99999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    backdrop-filter: blur(6px);
}

.show_loader_editor .sp_preloader_wrapper_editor,
.show_loader .sp_preloader_wrapper {
    opacity: 1;
    visibility: visible;
}

.sp_preloader_wrapper_editor .sp_logo,
.sp_preloader_wrapper_editor .sp_logo>.sp_logo_inner>span,
.sp_preloader_wrapper .sp_logo>.sp_logo_inner>span {
    margin-right: 0;
}

.sp_preloader_wrapper_editor .sp_logo,
.sp_preloader_wrapper .sp_logo {
    margin: 0 auto;
    /* -webkit-animation: preloader_anim 1.2s linear infinite;
    -moz-animation: preloader_anim 1.2s linear infinite;
    animation: preloader_anim 1.2s linear infinite;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    animation-fill-mode: forwards; */
    width: 45px;
    height: 45px;
}

.sp_preloader_wrapper_editor .sp_logo svg,
.sp_preloader_wrapper .sp_logo svg {
    width: 45px !important;
    height: auto;
}

.sp_preloader_wrapper_editor .sp_logo img,
.sp_preloader_wrapper .sp_logo img {
    width: 45px !important;
}

@-webkit-keyframes preloader_anim {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}

@-moz-keyframes preloader_anim {
    0% {
        -moz-transform: rotate(0deg);
    }

    100% {
        -moz-transform: rotate(360deg);
    }
}

@keyframes preloader_anim {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.content_preloader>.sp_preloader_inner {
    background-color: #fff;
    padding: 15px 25px;
    border-radius: 10px;
    box-shadow: 0px 0px 20px rgb(0, 0, 0, 0.04);
}

.content_preloader>.sp_preloader_inner>p {
    margin: 0;
    color: #1e1f28;
    font-size: 14px;
    margin-top: 10px;
    font-weight: 500;
}

.sp_preloader_inner>.spj_loading_text {
    margin: 0;
    color: #1e1f28;
    font-size: 14px;
    margin-top: 10px;
    font-weight: 600;
    max-width: 480px;
    text-align: center;
}

/* preloader end */

/********************************************************************************************* 
1. body end
*********************************************************************************************/

/********************************************************************************************* 
2. authentication start
*********************************************************************************************/
.sp_auth_wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: auto;
    display: flex;
    flex-wrap: wrap;
    background: linear-gradient(to left, #EBF0FF 60%, #ffffff 40%);
}

/* .sp_auth_wrapper::before{
	content: "";
	display: inline-block;
	vertical-align: middle;
	width: 1px;
	height: 100%;
} */
.sp_auth_wrapper .sp_auth_inner {
    width: 100%;
    max-width: 60%;
    margin: 0 auto;
    -webkit-animation: auth_anim 0.4s cubic-bezier(0.71, -0.11, 0.25, 0.88);
    -moz-animation: auth_anim 0.4s cubic-bezier(0.71, -0.11, 0.25, 0.88);
    animation: auth_anim 0.4s cubic-bezier(0.71, -0.11, 0.25, 0.88);
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    padding: 0 1%;
}

@media (max-width: 1400px) {
    .sp_auth_wrapper .sp_auth_inner {
        max-width: 65%;
    }
}

@media (max-width: 768px) {
    .sp_auth_wrapper .sp_auth_inner {
        max-width: 92%;
    }
}

@keyframes auth_anim {
    0% {
        transform: scale(0.95);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.right-side {
    width: 60%;
}

.left-side {
    width: 40%;
}

.right-side,
.left-side {
    height: 100vh;
    -webkit-flex-flow: column wrap;
    -ms-flex-flow: column wrap;
    flex-flow: column wrap;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    align-items: center;
}

.right-side img {
    /* max-width: 100%;
    height: auto; */
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.right-side > a{
    width: 100%;
    height: 100%;
}

@media only screen and (max-width: 767px) {
    .right-side {
        display: none;
    }

    .left-side {
        width: 100%;
        height: auto;
        padding: 15% 15px;
        background-color: #EBF0FF;
    }
}

.sp_auth_body .sp_logo {
    font-size: 30px;
    margin: 0 auto;
    margin-bottom: 30px;
    width: 100%;
}

.sp_auth_body .sp_logo img {
    max-width: 220px;
}

.sp_auth_body .sp_logo>.sp_logo_inner>span {
    width: 44px;
    height: 44px;
    font-size: 30px;
    line-height: 48px;
}

.sp_auth_body .sp_auth_title {
    margin: 0;
    font-size: 1.2vw;
    font-weight: bold;
    color: #000000;
}

.sp_auth_body .sp_auth_subtitle {
    margin: 0;
    margin-bottom: 40px;
    font-size: 1vw;
}

.sp_auth_body .sp_btn {
    height: 58px;
    line-height: 58px;
    font-size: 21px;
    font-weight: 600;
    box-shadow: 0px 11px 21px 0px rgb(20 83 253 / 33%);
    border-radius: 4px;
    transition: 0.5s;
    flex: 1;
    /* max-width: 228px; */
}

.sp_auth_body .sp_btn:hover {
    box-shadow: none;
}

.sp_auth_body .sp_input_wrapper .sp_input {
    border: 1px solid rgb(187, 190, 196);
    border-radius: 4px;
    background-color: rgb(247, 249, 255);
    padding: 17px 20px !important;
    font-size: 1rem;
    line-height: 1.5;
    color: #495057;
    height: auto;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.sp_auth_body .sp_input_wrapper .sp_input::-webkit-input-placeholder {
    color: #8e8e8e;
    opacity: 1;
}

.sp_auth_body .sp_input_wrapper .sp_input:focus {
    box-shadow: 0px 8px 32px rgb(0 0 0 / 6%);
    border: 1px solid rgb(187, 190, 196);
    background-color: #ffffff;
}

.sp_auth_body .sp_checkbox>label {
    color: #8e8e8e;
    font-weight: 400;
    font-size: 17px;
}

.sp_auth_body .sp_checkbox>label::before {
    width: 13px;
    height: 13px;
    border: 1px solid #767676;
    margin-right: 6px;
}

.sp_remember_forgot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
}

.sp_remember_forgot a {
    font-weight: 400;
    /* color: #8e8e8e; */
    font-size: 17px;
}

.sp_remember_forgot a:hover {
    color: #8e8e8e;
    text-decoration: underline;
}

.sp_auth_action {
    /* display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 30px; */
    display: flex;
    gap: 30px;
    justify-content: center;
}

.sp_auth_action>.sp_auth_line {
    width: 60px;
    height: 1px;
    background-color: #ddddea;
    margin: 0 20px;
}

.sp_auth_action>.sp_auth_extra_link {
    background-color: rgb(242, 245, 255);
    color: #949494;
    border: 1px solid rgb(215, 215, 215);
    box-shadow: none;
    font-weight: 400;
}

.sp_auth_action>.sp_auth_extra_link:focus,
.sp_auth_action>.sp_auth_extra_link:hover {
    box-shadow: 0px 11px 21px 0px rgb(215 215 215);
    color: #949494;
}

.sp_auth_divider {
    margin: 40px 0px 30px 0px;
    position: relative;
    z-index: 1;
}

.sp_auth_divider::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    margin-top: -1px;
    background-color: #ddddea;
    z-index: -1;
}

.sp_auth_divider>span {
    background-color: #ffffff;
    padding: 0 20px;
    margin-left: 40px;
}

.sp_auth_social_btns {
    display: flex;
    align-items: center;
}

.sp_social_btn {
    padding: 5px;
    border-radius: 5px;
    color: #ffffff;
    min-width: 155px;
    border: none;
    display: inline-flex;
    align-items: center;
    margin-right: 20px;
    font-size: 14px;
    cursor: pointer;
    outline: none;
    letter-spacing: 1px;
}

.sp_auth_social_btns>.sp_social_btn:last-child {
    margin-right: 0;
}

.sp_social_btn>span {
    width: 40px;
    height: 40px;
    background-color: #ffffff;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
}

.sp_social_btn>span>img {
    width: 18px;
}

.sp_social_btn.facebook {
    background-color: #3464c7;
}

.sp_social_btn.google {
    background-color: #4588F0;
    padding-right: 35px;
}

.sp_fe_user_warning .sp_auth_body .sp_auth_title {
    background-color: #f44336;
    color: #ffffff;
    padding: 10px 20px 8px;
    border-radius: 5px;
    font-size: 24px;
    display: inline-block;
    margin-bottom: 10px;
}

.sp_fe_user_warning .sp_auth_body .sp_btn {
    box-shadow: none;
}

.user_account_alert {
    background-color: #FFF3F3;
    border: 1px solid #FFD4D4;
    border-radius: 6px;
    padding: 20px;
    margin-top: 30px;
}

.user_account_alert>h3 {
    color: #F63737;
    font-weight: 600;
    margin: 0;
    margin-bottom: 8px;
}

.user_account_alert>p {
    color: var(--color-heading);
    margin: 0;
    margin-bottom: 8px;
}

.user_account_alert>p>span {
    font-weight: 600;
}

/********************************************************************************************* 
2. authentication end
*********************************************************************************************/

/********************************************************************************************* 
3. header start
*********************************************************************************************/
.sp_main_wrapper {
    padding-top: 63px;
}

.sp_header_wrapper {
    background-color: #ffffff;
    box-shadow: 0px 10px 34px rgba(0, 0, 0, 0.03);
    /* position: sticky; */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 63px;
    z-index: 9990;
}

.sp_editor_header .sp_header_wrapper {
    height: 60px;
}

.sp_editor_header .sp_main_wrapper {
    padding-top: 60px;
}

.sp_header_wrapper .sp_header_inner {
    display: flex;
    align-items: center;
    padding: 0px 40px;
    /* max-width: 1600px; */
    margin: 0 auto;
}

.sp_header_wrapper .sp_header_inner .sp_template_name {
    display: flex;
    align-items: center;
}

.sp_header_wrapper .sp_header_inner .sp_template_name>p {
    margin: 0;
    font-size: 20px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    text-overflow: ellipsis;
    max-width: 350px;
    overflow: hidden;
    white-space: nowrap;
}

.sp_header_wrapper .sp_header_inner .sp_template_name>p[contenteditable="true"] {
    padding: 0 8px;
    outline: none;
    box-shadow: 0px 0px 0px 1px #d2d2d2;
    border-radius: 5px;
    margin-left: 1px;
}

.sp_header_wrapper .sp_header_inner .sp_template_name>.sp_pd_icon {
    display: flex;
    align-items: center;
    margin-left: 5px;
    opacity: 0;
    visibility: hidden;
}

.sp_header_wrapper .sp_header_inner .sp_template_name:hover>.sp_pd_icon,
.sp_header_wrapper .sp_header_inner .sp_template_name>p[contenteditable="true"]~.sp_pd_icon {
    opacity: 1;
    visibility: visible;
}

.sp_header_wrapper .sp_header_inner .sp_template_name>.sp_pd_icon>span {
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.sp_header_wrapper .sp_header_inner .sp_template_name>.sp_pd_icon>span.sp_pd_icon_check {
    display: none;
}

.sp_header_wrapper .sp_header_inner .sp_template_name>.sp_pd_icon>span>svg {
    width: 14px;
    height: 14px;
}

.sp_header_wrapper .sp_header_inner .sp_template_name>.sp_pd_icon>span>svg path {
    fill: var(--main-color);
}

.sp_editor_header .sp_header_wrapper .sp_header_inner {
    max-width: 100%;
    padding: 0;
    justify-content: space-between;
}

.sp_mp_editor .sp_header_wrapper .sp_header_inner {
    height: 60px;
}

.sp_mp_editor .sp_editor_preview_wrapper {
    padding: 0;
}

.sp_mp_editor .sp_header_inner .sp_logo {
    margin: 0;
}

.sp_mp_editor.ieditor_popup_open .sp_header_wrapper .sp_header_inner .sp_editor_header_action {
    display: inline-flex !important;
}

.sp_mp_editor.ieditor_popup_open .sp_editor_sidebar,
.sp_mp_editor.ieditor_popup_open .sp_header_wrapper .sp_header_inner .sp_editor_header_action .sp_ieditor_header_btns .sp_btn:not(.savenexit, .previewtemplate, .savenexitwireframe),
.sp_mp_editor.ieditor_popup_open .sp_header_wrapper .sp_header_inner .sp_editor_header_action .redirect_to_dash,
.sp_mp_editor.ieditor_popup_open .sp_header_wrapper .sp_header_inner .sp_editor_header_action .previewtemplate,
.sp_mp_editor.ieditor_popup_open .sp_header_wrapper .sp_header_inner .sp_editor_header_action>.sp_export_layer {
    display: none;
}

.sp_header_right .sp_btn_upgrade {
    margin-right: 12px;
    border-radius: 6px;
    padding: 0 16px;
    display: inline-flex;
    vertical-align: middle;
    align-items: center;
    gap: 6px;
    border-radius: 8px;
}

.sp_header_right .sp_btn_upgrade>svg {
    transform: translateY(-1px);
}


.sp_nav_wrapper {
    flex: 1;
}

.sp_nav_wrapper>ul {
    list-style: none;
    padding: 0;
    margin: 0;
    min-height: 63px;
}

.sp_nav_wrapper>ul>li {
    display: inline-block;
    vertical-align: middle;
    margin-right: 24px;
    position: relative;
}

.sp_nav_wrapper>ul>li:last-child {
    margin-right: 0px;
}

.sp_nav_wrapper>ul>li>a {
    display: flex;
    align-items: center;
    padding: 22px 0;
    color: var(--color-body);
    font-size: 14px;
    font-weight: 600;
    position: relative;
}

.sp_nav_beta {
    position: absolute;
    background-color: var(--main-color);
    color: #fff;
    border-radius: 50px;
    font-size: 10px;
    padding: 2px 7px 1px;
    top: 6px;
    right: -2px;
    letter-spacing: 0.6px;
}

.sp_nav_wrapper>ul>li>a svg path {
    fill: var(--color-body);
}

.sp_nav_wrapper>ul>li>a>.sp_nav_icon {
    margin-right: 10px;
    display: flex;
    align-items: center;
}

.sp_nav_wrapper>ul>li>a>.sp_nav_icon>svg {
    width: 15px;
    height: 15px;
}

.sp_nav_wrapper>ul>li.sp_sub_menu>a:after {
    content: "";
    display: inline-block;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-top: 4px solid #9e9e9e;
    margin-left: 5px;
    vertical-align: middle;
}

.sp_nav_wrapper>ul>li.sp_sub_menu>a.active:after,
.sp_nav_wrapper>ul>li.sp_sub_menu>a:hover:after {
    border-top-color: var(--main-color);
}

.sp_nav_wrapper>ul>li>a:hover svg path,
.sp_nav_wrapper>ul>li>a.active svg path {
    fill: var(--main-color);
}

.sp_nav_wrapper>ul>li>a:hover,
.sp_nav_wrapper>ul>li>a.active {
    color: var(--main-color);
    box-shadow: inset 0px -3px 0px var(--main-color);
}

/* sub menu start */
.sp_nav_wrapper>ul>li>ul {
    list-style: none;
    margin: 0;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #ffffff;
    box-shadow: 0px 5px 34px 0px rgb(0 0 0 / 6%);
    border-radius: 0 0 10px 10px;
    padding: 15px;
    opacity: 0;
    visibility: hidden;
    min-width: 160px;
    z-index: 1;
    -webkit-transform: rotateX(90deg);
    -moz-transform: rotateX(90deg);
    transform: rotateX(90deg);
    -webkit-transform-origin: top;
    -moz-transform-origin: top;
    transform-origin: top;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

.sp_nav_wrapper>ul>li:hover>ul {
    opacity: 1;
    visibility: visible;
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    transform: rotateX(0deg);
}

.sp_nav_wrapper>ul>li>ul>li {
    display: block;
}

.sp_nav_wrapper>ul>li>ul>li>a {
    display: block;
    padding: 10px 0;
    color: var(--color-body);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}

.sp_nav_wrapper>ul>li>ul>li>a.active,
.sp_nav_wrapper>ul>li>ul>li>a:hover {
    color: var(--main-color);
}

/* sub menu end */

/* nav color start */
/* .sp_nav_wrapper > ul > li.sp_nav_customer > a{ color: #01a2fd; }
.sp_nav_wrapper > ul > li.sp_nav_customer > a svg path{ fill: #01a2fd; }
.sp_nav_wrapper > ul > li.sp_nav_customer > a:hover, 
.sp_nav_wrapper > ul > li.sp_nav_customer > a.active{ 
    box-shadow: inset 0px -3px 0px #01a2fd; 
}

.sp_nav_wrapper > ul > li.sp_nav_campaigns > a{ color: #01a2fd; }
.sp_nav_wrapper > ul > li.sp_nav_campaigns > a svg path{ fill: #01a2fd; }
.sp_nav_wrapper > ul > li.sp_nav_campaigns > a:hover, 
.sp_nav_wrapper > ul > li.sp_nav_campaigns > a.active{ 
    box-shadow: inset 0px -3px 0px #01a2fd; 
}

.sp_nav_wrapper > ul > li.sp_nav_packaging > a{ color: #d939f5; }
.sp_nav_wrapper > ul > li.sp_nav_packaging > a svg path{ fill: #d939f5; }
.sp_nav_wrapper > ul > li.sp_nav_packaging > a:hover, 
.sp_nav_wrapper > ul > li.sp_nav_packaging > a.active{ 
    box-shadow: inset 0px -3px 0px #d939f5; 
}

.sp_nav_wrapper > ul > li.sp_nav_settings > a{ color: #ff9a16; }
.sp_nav_wrapper > ul > li.sp_nav_settings > a svg path{ fill: #ff9a16; }
.sp_nav_wrapper > ul > li.sp_nav_settings > a:hover, 
.sp_nav_wrapper > ul > li.sp_nav_settings > a.active{ 
    box-shadow: inset 0px -3px 0px #ff9a16; 
}
.sp_nav_wrapper > ul > li.sp_nav_profile > a{ color: #17d58c; }
.sp_nav_wrapper > ul > li.sp_nav_profile > a svg path{ fill: #17d58c; }
.sp_nav_wrapper > ul > li.sp_nav_profile > a:hover, 
.sp_nav_wrapper > ul > li.sp_nav_profile > a.active{ 
    box-shadow: inset 0px -3px 0px #17d58c; 
} */
/* nav color end */

.sp_nav_toggle {
    width: 38px;
    height: 38px;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    vertical-align: middle;
    cursor: pointer;
    background-color: rgba(var(--main-color-rgb), 0.15);
    border-radius: 8px;
    margin-right: 15px;
}

.nav_open .sp_nav_toggle {
    pointer-events: none;
}

.sp_nav_toggle>span {
    width: 18px;
    height: 2px;
    background-color: var(--main-color);
    border-radius: 2px;
    margin: 2px auto;
}

.sp_editor_header_action {
    display: inline-flex;
    align-items: center;
    margin: 10px 0;
    margin-right: 50px;
}

.sp_editor_header_action .sp_btn {
    min-width: 120px;
    height: 40px;
    line-height: 40px;
    background-color: #5c669f;
    box-shadow: none;
    font-size: 14px;
}

.sp_editor_header_action .sp_btn.sp_btn_upgrade {
    margin-top: 10px;
    width: 100%;
    justify-content: center;
    border-radius: 10px;
}

.sp_header_avatar {
    /* width: 38px; */
    /* height: 38px; */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    vertical-align: middle;
    /* margin-right: 6px; */
    cursor: pointer;
    margin-right: 15px;
    font-size: 14px;
}

.sp_header_avatar::after {
    content: "";
    position: absolute;
    top: 16px;
    right: -15px;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-top: 4px solid #9e9e9e;
}

.sp_header_right {
    position: relative;
}

.sp_header_avatar>.sp_avatar_name {
    white-space: nowrap;
    margin-right: 10px;
    font-weight: 600;
    text-align: right;
    max-height: 34px;
}

.sp_header_avatar>.sp_avatar_name>.sp_avatar_level {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: var(--main-color);
}

.sp_header_avatar>.sp_avatar_name>.sp_avatar_level>svg path:nth-child(1),
.sp_header_avatar>.sp_avatar_name>.sp_avatar_level>svg path:nth-child(3) {
    fill: var(--main-color);
}

.sp_header_avatar>.sp_avatar_initials {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--main-color);
    color: #ffffff;
    text-transform: uppercase;
    padding-top: 3px;
    flex: none;
}

.sp_header_avatar>img {
    position: absolute;
    top: -1px;
    right: -1px;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    object-fit: cover;
    background-color: #ffffff;
}

.sp_header_wrapper .sp_dropdown_wrapper {
    right: 0;
    min-width: 240px;
}

.sp_header_wrapper .sp_dropdown_wrapper>.sp_dropdown_inner>ul>li>a>svg {
    width: 14px;
    height: 14px;
}

.sp_logout {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background-color: #ebecf3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    cursor: pointer;
}

.sp_logout svg path {
    fill: #5c669f;
}

.sp_header_right_icon_list {
    display: inline-flex;
    vertical-align: middle;
}

.sp_header_right_icon_list>.sp_header_right_icon_item {
    margin-right: 10px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
}

.sp_header_right_icon_list>.sp_header_right_icon_item>svg {
    width: 20px;
    height: auto;
}

.sp_header_right_icon_list>.sp_header_right_icon_item>svg path {
    fill: #9FAABE;
}

.sp_header_right_icon_list>.sp_header_right_icon_item:hover>svg path {
    fill: var(--main-color);
}

.image_ai_tag {
    right: -10px;
    border-radius: 3px;
    padding: 2px 4px 1px;
    font-weight: 700;
}



/********************************************************************************************* 
3. header end
*********************************************************************************************/

.sp_page_title {
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sp_page_title>.sp_page_heading {
    font-size: 20px;
    color: var(--color-heading);
    font-weight: 600;
}

.sp_page_title>.sp_pt_right {
    display: flex;
    align-items: center;
    flex: 1;
    justify-content: flex-end;
    gap: 20px;
}

.sp_page_title>.sp_pt_right>.sp_btn {
    /* margin-left: 20px; */
    min-width: 170px;
}

.sp_search_wrapper {
    width: 100%;
    max-width: 300px;
    position: relative;
    display: flex;
    align-items: center;
}

.sp_search_wrapper>.sp_search_icon {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 34px;
    height: 34px;
    border-radius: 6px;
    background-color: rgba(var(--main-color-rgb), 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 14px;
    flex: none;
    cursor: pointer;
}

.sp_search_wrapper>.sp_search_icon>svg>path {
    fill: var(--main-color);
}

.sp_search_wrapper>input {
    border: none;
    box-shadow: none;
    outline: none;
    background-color: transparent;
    width: 100%;
    height: 50px;
    flex: 1;
    font-size: 14px;
    border-radius: 10px;
    border: 1px solid #e9e9f4;
    padding: 10px 10px 10px 55px;
}

.sp_search_wrapper>input:focus {
    border-color: #d9d9f3;
}

.sp_search_wrapper>input::-webkit-input-placeholder {
    color: #a8aec0;
}

.sp_search_wrapper.sp_search_with_btn {
    max-width: 360px;
}

.sp_search_wrapper.sp_search_with_btn>input {
    border-radius: 10px 0 0 10px;
}

.sp_search_wrapper.sp_search_with_btn>.sp_btn {
    border-radius: 0 10px 10px 0;
}


.sp_search_wrapper.sp_search_with_clear>input {
    padding-right: 75px;
}

span.sp_search_clear {
    position: absolute;
    top: 16px;
    right: 10px;
    background-color: #555e8d;
    color: #fff;
    font-size: 10px;
    height: 17px;
    border-radius: 50px;
    padding: 2px 8px 0px;
    padding-left: 17px;
    cursor: pointer;
    display: none;
    text-transform: uppercase;
}

span.sp_search_clear:hover {
    background-color: var(--main-color);
}

span.sp_search_clear>span:before,
span.sp_search_clear>span:after {
    content: "";
    width: 10px;
    height: 1px;
    background-color: #ffffff;
    position: absolute;
    top: 8px;
    left: 4px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}

span.sp_search_clear>span:after {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
}


/********************************************************************************************* 
4. profile start
*********************************************************************************************/
.sp_profile_wrapper {
    display: flex;
}

.sp_profile_wrapper>.sp_profile_left {
    flex: 1;
    margin-bottom: 50px;
    max-width: 800px;
}

.sp_profile_wrapper>.sp_profile_right {
    flex: 1;
    /* display: flex;
    grid-template-columns: auto auto;
    grid-gap: 30px;
    flex-wrap: wrap; */
}

.sp_profile_detail>img {
    width: 90%;
    height: 160px;
    object-fit: cover;
    border-radius: 14px;
    background-color: var(--main-color);
    filter: contrast(1.4);
}

.sp_pd_content {
    display: flex;
    align-items: flex-start;
    margin-top: -50px;
    padding: 0 10px 0 60px;
}

.sp_pd_content>.sp_pd_avatar {
    width: 160px;
    height: 160px;
    border-radius: 14px;
    flex: none;
    margin-right: 30px;
    position: relative;
    box-shadow: 10px 0px 40px 8px rgba(0, 0, 0, 0.12);
}

.sp_pd_content>.sp_pd_avatar>.sp_pd_initials {
    width: 160px;
    height: 160px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    font-size: 50px;
    font-weight: 100;
    color: var(--main-color);
}

.sp_pd_content>.sp_pd_avatar>img {
    width: 160px;
    height: 160px;
    border-radius: 14px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    object-fit: cover;
    background-color: #ffffff;
}

.sp_pd_content>.sp_pd_avatar>.sp_remove_img {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 12px;
    height: 12px;
    background-color: red;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    cursor: pointer;
    z-index: 1;
}

.sp_pd_content>.sp_pd_avatar>.sp_remove_img:after,
.sp_pd_content>.sp_pd_avatar>.sp_remove_img:before {
    content: "";
    width: 6px;
    height: 2px;
    background-color: #ffffff;
    position: absolute;
    transform: rotateX(45deg);
}

.sp_pd_content>.sp_pd_avatar>.sp_remove_img:before {
    transform: rotateX(-45deg);
}

.sp_pd_content>.sp_pd_avatar>.sp_pd_thunb_uploader {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 2;
}

.sp_pd_content>.sp_pd_avatar>.sp_pd_thunb_uploader>input {
    position: absolute;
    left: -999999px;
    opacity: 0;
}

.sp_pd_content>.sp_pd_avatar>.sp_pd_thunb_uploader>label {
    width: 32px;
    height: 32px;
    display: block;
    margin: 0;
    cursor: pointer;
}

.sp_pd_content>.sp_pd_avatar>.sp_pd_thunb_uploader>label svg path:first-child {
    fill: var(--main-color);
}

.sp_pd_content>.sp_pd_avatar .tooltip-inner {
    min-width: 195px;
}

.sp_pd_content>.sp_pd_detail {
    flex: 1;
    padding-top: 75px;
}

.sp_pd_content>.sp_pd_detail>h3 {
    margin: 0;
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 5px;
}

h3.sp_inline_editor {
    display: flex;
    align-items: center;
    width: 100%;
}

.admin_body h3.sp_inline_editor {
    width: 90%;
}

.admin_body .sp_template_list.template_rename h3.sp_inline_editor {
    width: 100%;
}

h3.sp_inline_editor>.sp_pd_name {
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    max-width: calc(100% - 25px);
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.sp_profile_wrapper>.sp_profile_left h3.sp_inline_editor>.sp_pd_name {
    flex: none;
}

h3.sp_inline_editor>.sp_pd_name[contenteditable="true"] {
    padding: 0 8px;
    outline: none;
    box-shadow: 0px 0px 0px 1px #d2d2d2;
    border-radius: 5px;
    margin-left: 1px;
    text-overflow: inherit;
    height: auto;
    max-height: 40px;
    word-break: break-all;
    white-space: normal;
}

h3.sp_inline_editor>.sp_pd_icon {
    display: flex;
    align-items: center;
    margin-left: 8px;
}

h3.sp_inline_editor>.sp_pd_icon>span {
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

h3.sp_inline_editor>.sp_pd_icon>span.sp_pd_icon_check {
    display: none;
}

h3.sp_inline_editor>.sp_pd_icon>span svg path {
    fill: var(--main-color);
}



.sp_pd_content>.sp_pd_detail>p {
    margin: 0;
}

.sp_pd_content>.sp_pd_detail>p>span {
    color: #a8aec0;
}

.sp_profile_box {
    background-color: #ffffff;
    border-radius: 10px;
    padding: 50px;
    max-width: 600px;
    width: 100%;
}

.sp_profile_box h1 {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 25px;
}

.sp_profile_box_list {
    display: grid;
    grid-template-columns: 68% auto;
    grid-gap: 15px;
}

.sp_account_access h1 {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 25px;
}

.sp_profile_access_list {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-bottom: 15px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(25%, 1fr));
    grid-gap: 15px;
    flex-wrap: wrap;
}

.sp_profile_access_list>li {
    display: inline-block;
    margin-bottom: 15px;
    position: relative;
    background-color: #ffffff;
    border-radius: 5px;
    border: 1px solid #DEDEDE;
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.sp_profile_access_list>li>a {
    display: flex;
    align-items: center;
    color: var(--color-heading);
    cursor: default;
    font-size: 18px;
    margin-bottom: 10px;
    font-weight: 600;
    flex: none;
}

.sp_profile_access_list>li>.sp_pal_details {
    flex: 1;
}

.sp_profile_access_list>li>a>span {
    width: 18px;
    height: 18px;
    margin-right: 5px;
    margin-top: -3px;
}

.sp_profile_access_list>li>a>span>svg {
    width: 18px;
    height: 18px;
}

.sp_profile_access_list>li>a>span>svg path {
    fill: var(--main-color);
}

.sp_profile_access_list>li.hasaccess {
    background-color: rgba(var(--main-color-rgb), 0.05);
    border-color: var(--main-color);
}

.sp_profile_access_list.sp_profile_access_list_corporate {
    grid-template-columns: repeat(auto-fill, minmax(480px, 1fr));
}

.sp_profile_access_available {
    border-top: 1px solid #E5E7EC;
    padding-top: 15px;
}

.sp_profile_access_available>h3 {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}

.sp_profile_access_available>p {
    margin: 0;
    margin-bottom: 20px;
    font-size: 14px;
}

.sp_profile_access_available .sp_profile_access_list>li>a {
    background-color: transparent;
    box-shadow: 0px 0px 0px 1px #C7CFE5;
    color: var(--color-body);
    pointer-events: inherit;
    cursor: pointer;
}

.sp_profile_access_available .sp_profile_access_list>li>a:hover {
    color: var(--main-color);
    box-shadow: 0px 0px 0px 1px var(--main-color);
}

.sp_pal_details_inner>ul {
    margin-bottom: 20px;
    color: var(--color-heading);
    padding-left: 20px;
    margin-top: 10px;
}

.sp_pal_details_inner>p {
    margin: 0;
    margin-bottom: 10px;
}

.sp_profile_access_list>li .sp_btn {
    height: 32px;
    line-height: 32px;
    font-size: 14px;
    border-radius: 6px;
    padding: 0 20px;
    display: inline-flex;
    color: #fff;
    cursor: pointer;
}

.sp_profile_access_list>li.hasaccess .sp_btn {
    display: none;
}

/* billing start */
.sp_billing_wrapper {
    display: grid;
    grid-template-columns: 350px 1fr;
    gap: 30px;
    align-items: flex-start;
}

.sp_billing_wrapper>.sp_billing_sidebar {
    background-color: #ffffff;
    border-radius: 8px;
    padding: 30px;
}

.sp_billing_title {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    margin-bottom: 15px;
    color: var(--color-heading);
}

.sp_billing_sub_list>.sp_billing_sub_item {
    margin-bottom: 15px;
    padding: 15px;
    background-color: rgba(var(--main-color-rgb), 0.10);
    border: 1px solid var(--main-color);
    border-radius: 5px;
}

.sp_billing_sub_list>.sp_billing_sub_item:last-child {
    margin-bottom: 0px;
}

.sp_billing_sub_list>.sp_billing_sub_item>h3 {
    margin: 0px;
    font-size: 14px;
    font-weight: 600;
}

.sp_billing_sub_list>.sp_billing_sub_item>h1 {
    margin: 2px 0;
    color: var(--main-color);
    font-weight: 700;
    font-size: 22px;
}

.sp_billing_sub_list>.sp_billing_sub_item>h1>span {
    font-size: 14px;
    font-weight: 400;
}

.sp_billing_sub_list>.sp_billing_sub_item>p {
    margin: 0px;
    font-size: 12px;
    margin-bottom: 10px;
}

.sp_billing_sub_list>.sp_billing_sub_item>.sp_btn {
    background-color: #ffffff;
    color: #f44336;
    border-radius: 50px;
    height: 30px;
    line-height: 30px;
    font-size: 12px;
    padding: 0 15px;
}

.sp_billing_sub_list>.sp_billing_sub_item>.sp_btn:hover {
    color: #ffffff;
    background-color: #f44336;
}

/* billing end */

/********************************************************************************************* 
4. profile end
*********************************************************************************************/

/********************************************************************************************* 
5. campaign start
*********************************************************************************************/
.sp_no_campaign {
    text-align: center;
    max-width: 340px;
    margin: 150px auto;
    margin-bottom: 30px;
}

.sp_no_campaign>.sp_nc_icon {
    margin-bottom: 15px;
}

.sp_no_campaign>.sp_nc_icon>img {
    max-width: 105px;
}

.sp_no_campaign>.sp_nc_icon>svg {
    width: 105px;
    height: auto;
}

.sp_no_campaign>.sp_nc_icon>svg .sp_nc_icon_st1,
.sp_no_campaign>.sp_nc_icon>svg .sp_nc_icon_st3 {
    fill: var(--main-color);
    stroke-width: 0;
}

.sp_no_campaign>.sp_nc_icon>svg .sp_nc_icon_st0,
.sp_no_campaign>.sp_nc_icon>svg .sp_nc_icon_st2 {
    fill: var(--main-color);
    opacity: 0.5;
}

.sp_no_campaign>p {
    margin: 0;
    margin-bottom: 30px;
    color: var(--color-heading);
    font-size: 24px;
    font-weight: 400;
}

.sp_campaign_list {
    /* display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    margin: 0 -10px; */
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(18%, 1fr));
    grid-gap: 20px;
}

.sp_campaign_list>.sp_campaign_item {
    /* width: 14.28%;
    padding: 0 10px;
    margin-bottom: 20px; */
    position: relative;
}

/* @media(max-width:1600px){ .sp_campaign_list > .sp_campaign_item{ width: 14.28%; } }
@media(max-width:1440px){ .sp_campaign_list > .sp_campaign_item{ width: 16.666%; } }
@media(max-width:1366px){ .sp_campaign_list > .sp_campaign_item{ width: 20%; } }
@media(max-width:768px){ .sp_campaign_list > .sp_campaign_item{ width: 33.33333%; } }
@media(max-width:480px){ .sp_campaign_list > .sp_campaign_item{ width: 50%; } } */

.sp_campaign_list>.sp_campaign_item>.sp_campaign_inner {
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0px 4px 34px 0px rgba(0, 0, 0, 0.03);
    display: block;
    cursor: inherit;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

.sp_campaign_list.load_myfolder_body {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

.sp_campaign_list>.sp_campaign_item>.sp_campaign_inner:hover {
    /* -webkit-transform: translateY(-5px);
    -moz-transform: translateY(-5px);
    transform: translateY(-5px); */
    box-shadow: 0px 8px 34px 0px rgba(0, 0, 0, 0.06);
}

.sp_campaign_list>.sp_campaign_item:hover {
    z-index: 2;
}

.sp_campaign_list>.sp_campaign_item>.sp_campaign_inner::after {
    content: "";
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 0;
    height: 0px;
    opacity: 0;
    border-radius: 5px 5px 0 0;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    transition: all 0.2s;
    display: none;
}

.sp_campaign_list>.sp_campaign_item>.sp_campaign_inner:hover::after {
    opacity: 1;
    height: 4px;
}

.sp_campaign_list>.sp_campaign_item>.sp_campaign_inner>.sp_camp_img {
    position: relative;
}

.sp_campaign_list>.sp_campaign_item>.sp_campaign_inner>.sp_camp_img>img {
    width: 100%;
    border-radius: 8px 8px 0 0;
    /* height: 220px; */
    object-fit: cover;
    background-color: #e2e4eb;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
}

.sp_campaign_list>.sp_campaign_item>.sp_campaign_inner>.sp_camp_img>.sp_camp_img_overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 8px 8px 0 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.sp_campaign_list>.sp_campaign_item>.sp_campaign_inner>.sp_camp_img>.sp_camp_img_overlay.sp_has_img {
    background-color: #e2e4eb;
}

.sp_campaign_list>.sp_campaign_item>.sp_campaign_inner>.sp_camp_img>.sp_camp_overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 8px 8px 0 0;
    background-color: rgba(30, 31, 40, 0.60);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    transition: all 0.2s;
}

.sp_campaign_list.load_themes_list>.sp_campaign_item>.sp_campaign_inner>.sp_camp_img>.sp_camp_overlay,
.sp_campaign_list.load_myfolder_body>.sp_campaign_item>.sp_campaign_inner>.sp_camp_img>.sp_camp_overlay {
    -webkit-transition: none;
    -moz-transition: none;
    transition: none;
}

.sp_campaign_list>.sp_campaign_item>.sp_campaign_inner:hover>.sp_camp_img>.sp_camp_overlay {
    opacity: 1;
    visibility: visible;
}

body:not(.complete_book_popup_open) .sp_complete_book_wrapper_popup .sp_campaign_list>.sp_campaign_item>.sp_campaign_inner>.sp_camp_img>.sp_camp_overlay,
body:not(.theme_popup_open) .sp_theme_wrapper_popup .sp_campaign_list>.sp_campaign_item>.sp_campaign_inner>.sp_camp_img>.sp_camp_overlay,
body:not(.bundletemp_popup_open) .sp_bundletemp_wrapper_popup .sp_campaign_list>.sp_campaign_item>.sp_campaign_inner>.sp_camp_img>.sp_camp_overlay,
body:not(.setstemp_popup_open) .sp_setstemp_wrapper_popup .sp_campaign_list>.sp_campaign_item>.sp_campaign_inner>.sp_camp_img>.sp_camp_overlay {
    opacity: 0;
    visibility: hidden;
}


.sp_campaign_list>.sp_campaign_item>.sp_campaign_inner>.sp_camp_img>.sp_camp_overlay>svg {
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    transform: scale(0.8);
}

.sp_campaign_list>.sp_campaign_item>.sp_campaign_inner>.sp_camp_img>.sp_camp_overlay .sp_btn {
    height: 36px;
    line-height: 38px;
    font-size: 14px;
    min-width: 110px;
    border-radius: 8px;
}

.sp_admin_content_wrapper .sp_campaign_list.load_campaign_body > .sp_campaign_item > .sp_campaign_inner > .sp_camp_img > .sp_camp_overlay .sp_btn{
    min-width: inherit;
    padding: 0 12px;
}

.sp_campaign_list>.sp_campaign_item>.sp_campaign_inner>.sp_camp_img>.sp_camp_action {
    position: absolute;
    top: 10px;
    right: 15px;
    z-index: 1;
}

.sp_campaign_list>.sp_campaign_item>.sp_campaign_inner>.sp_camp_img>.sp_camp_action>.sp_camp_action_icon {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding-left: 7px;
}

.sp_campaign_list>.sp_campaign_item>.sp_campaign_inner>.sp_camp_img>.sp_camp_action>.sp_camp_action_icon>span {
    width: 5px;
    height: 5px;
    border-radius: 5px;
    background-color: #ffffff;
    margin: 0 2px;
    position: relative;
}

.sp_campaign_list>.sp_campaign_item>.sp_campaign_inner>.sp_camp_img>.sp_camp_action>.sp_camp_action_icon>span:first-child::after {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 5px;
    background-color: #ffffff;
    display: inline-block;
    margin-left: -9px;
    -webkit-transform: translateY(-8.8px);
    -moz-transform: translateY(-8.8px);
    transform: translateY(-8.8px);
}

.sp_campaign_list.load_themes_list>.sp_campaign_item>.sp_campaign_inner>.sp_camp_img>.sp_camp_action>.sp_camp_action_icon>span:first-child::after {
    background-color: #dde1ef;
}

.sp_campaign_list.load_themes_list>.sp_campaign_item>.sp_campaign_inner>.sp_camp_img>.sp_camp_action>.sp_camp_action_icon>span {
    background-color: #dde1ef;
}

.sp_campaign_list.load_themes_list>.sp_campaign_item:hover>.sp_campaign_inner>.sp_camp_img>.sp_camp_action>.sp_camp_action_icon>span:first-child::after {
    background-color: #ffffff;
}

.sp_campaign_list.load_themes_list>.sp_campaign_item:hover>.sp_campaign_inner>.sp_camp_img>.sp_camp_action>.sp_camp_action_icon>span {
    background-color: #ffffff;
}

.sp_campaign_list>.sp_campaign_item>.sp_campaign_inner>.sp_camp_img>.sp_switch {
    position: absolute;
    top: 10px;
    left: 40px;
    z-index: 1;
}

.sp_campaign_list>.sp_campaign_item.sp_camp_tc>.sp_campaign_inner>.sp_camp_img>.sp_switch {
    left: 10px;
}

.sp_campaign_list>.sp_campaign_item>.sp_campaign_inner>.sp_camp_img>.sp_switch>label {
    height: 16px;
}

.sp_campaign_list>.sp_campaign_item>.sp_campaign_inner>.sp_camp_img>.sp_checkbox {
    position: absolute;
    top: 12px;
    left: 10px;
    z-index: 1;
}

.sp_campaign_list>.sp_campaign_item>.sp_campaign_inner>.sp_camp_img>.sp_checkbox>label::before {
    margin-right: 0;
    background-color: #ffffff;
}

.sp_campaign_list.load_campaign_body>.sp_campaign_item>.sp_campaign_inner>.sp_camp_img>.sp_checkbox {
    left: 45px;
    top: 15px;
    opacity: 0;
    visibility: hidden;
    transform: scale(0);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.sp_campaign_list.load_campaign_body>.sp_campaign_item:hover>.sp_campaign_inner>.sp_camp_img>.sp_checkbox {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

.tc_body .sp_campaign_list.load_campaign_body>.sp_campaign_item>.sp_campaign_inner>.sp_camp_img>.sp_checkbox,
.admin_body .sp_campaign_list.load_campaign_body>.sp_campaign_item>.sp_campaign_inner>.sp_camp_img>.sp_checkbox {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

.tc_body .sp_campaign_list.load_campaign_body>.sp_campaign_item>.sp_campaign_inner>.sp_camp_img>.sp_checkbox,
.admin_body .sp_campaign_list.load_campaign_body>.sp_campaign_item>.sp_campaign_inner>.sp_camp_img>.sp_checkbox {
    top: 12px;
    left: 10px;
}

.tc_body .sp_campaign_list>.sp_campaign_item.sp_camp_tc>.sp_campaign_inner>.sp_camp_img>.sp_switch {
    left: 40px;
}

.tc_body .sp_theme_wrapper_popup .sp_campaign_list>.sp_campaign_item>.sp_campaign_inner>.sp_camp_img>.sp_switch {
    left: 10px;
}

.sp_campaign_list>.sp_campaign_item.is_checked>.sp_campaign_inner {
    box-shadow: 0px 4px 34px 0px rgba(0, 0, 0, 0.03), 0px 0px 0px 2px var(--main-color);
}

.sp_campaign_item.is_checked .sp_favorites,
.sp_campaign_list.load_campaign_body>.sp_campaign_item.is_checked>.sp_campaign_inner>.sp_camp_img>.sp_checkbox {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

.sp_badge_icons {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tc_body .sp_badge_icons,
.admin_body .sp_badge_icons {
    left: 15px;
    bottom: 15px;
    top: auto;
    right: auto;
}

.sp_free_gift {
    width: 29px;
    height: 29px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0px 0px 5px rgb(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(96.88deg, #346AFD 15.44%, #7512FB 97.89%);
}

.sp_free_gift>svg {
    vertical-align: middle;
}

.sp_free_gift>svg path {
    fill: #ffffff;
}

.sp_remove_icon {
    width: 29px;
    height: 29px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0px 0px 5px rgb(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(96.88deg, #f44336 15.44%, #ec407a 97.89%);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    transform: scale(0);
}

.load_favorite_list .sp_template_item:hover .sp_remove_icon {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

.sp_remove_icon>svg {
    vertical-align: middle;
    width: 15px;
    height: auto;
}

.sp_remove_icon>svg path {
    fill: #ffffff;
}

.sp_remove_icon~.tooltip .tooltip-inner {
    min-width: 100px;
    text-align: center;
}

/* padlock start */
.sp_padlock {
    width: 29px;
    height: 29px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0px 0px 5px rgb(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135.54deg, #ffc107 12.86%, #ff9800 89.29%);
}

.sp_padlock>svg {
    vertical-align: middle;
    width: 15px;
    height: auto;
}

.sp_padlock>svg path {
    fill: #ffffff;
}

.sp_camp_type_wrapper>.sp_camp_type_item>.sp_camp_type_inner>label>span .sp_badge_icons {
    top: 6px;
    right: 6px;
}

.sp_sub_menu_slider .sp_ssm_item .sp_badge_icons {
    top: 10px;
    right: 15px;
    display: none;
}

.sp_bgt_item>.sp_bgt_img .sp_padlock,
.sp_sub_menu_slider .sp_ssm_item .sp_padlock,
.sp_camp_type_wrapper>.sp_camp_type_item>.sp_camp_type_inner>label>span .sp_padlock {
    top: 6px;
    right: 6px;
    left: auto;
    width: 24px;
    height: 17px;
    border-radius: 15px;
}

.sp_bgt_item>.sp_bgt_img .sp_padlock>svg,
.sp_sub_menu_slider .sp_ssm_item .sp_padlock>svg,
.sp_camp_type_wrapper>.sp_camp_type_item>.sp_camp_type_inner>label>span .sp_padlock>svg {
    width: 12px;
}

.sp_btn_upgrade {
    background: linear-gradient(135.54deg, #ffc107 12.86%, #ff9800 89.29%);
}

.sp_btn_upgrade:hover {
    background: linear-gradient(135.54deg, #ff9800 12.86%, #ffc107 89.29%);
}

.sp_es_body .sp_campaign_list>.sp_campaign_item .sp_padlock {
    top: 6px;
    right: 6px;
    left: auto;
    width: 24px;
    height: 17px;
    border-radius: 15px;
}

.sp_es_body .sp_campaign_list>.sp_campaign_item .sp_padlock>svg {
    width: 12px;
    height: auto;
}

.sp_es_body .sp_campaign_list>.sp_campaign_item>.sp_campaign_inner>.sp_camp_img>.sp_camp_overlay .sp_btn {
    height: 32px;
    line-height: 32px;
    font-size: 13px;
    font-weight: 600;
    min-width: inherit;
    padding: 0 12px;
    border-radius: 5px;
}

.sp_bgt_item>.sp_bgt_img .sp_badge_icons {
    top: 6px;
    right: 6px;
}

/* padlock end */


.sp_campaign_list>.sp_campaign_item.draft>.sp_campaign_inner {
    box-shadow: 0px 0px 0px 1px #e6e6e6;
}

.sp_campaign_list>.sp_campaign_item.draft>.sp_campaign_inner>.sp_camp_img>img {
    opacity: 0.4;
    box-shadow: 0px 0px 0px 1px #dedede;
}

.sp_campaign_list>.sp_campaign_item.draft>.sp_campaign_inner>.sp_camp_img>.sp_camp_img_overlay,
.sp_campaign_list>.sp_campaign_item.draft>.sp_campaign_inner>.sp_camp_detail {
    opacity: 0.4;
}

.sp_campaign_list>.sp_campaign_item>.sp_campaign_inner>.sp_camp_detail {
    padding: 12.5px;
}

.sp_campaign_list>.sp_campaign_item>.sp_campaign_inner>.sp_camp_detail>h3 {
    margin: 0;
    /* margin-bottom: 5px; */
    color: var(--color-body);
    font-size: 14px;
    font-weight: normal;
}

.sp_campaign_list>.sp_campaign_item>.sp_campaign_inner>.sp_camp_detail>h3>.sp_pd_name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sp_campaign_list>.sp_campaign_item>.sp_campaign_inner>.sp_camp_detail>h3>.sp_pd_name[contenteditable="true"] {
    text-overflow: inherit;
}

.sp_campaign_list>.sp_campaign_item>.sp_campaign_inner>.sp_camp_detail>h3.sp_inline_editor>.sp_pd_icon {
    opacity: 0;
    visibility: hidden;
}

.sp_campaign_list>.sp_campaign_item>.sp_campaign_inner:hover>.sp_camp_detail>h3.sp_inline_editor>.sp_pd_icon,
.sp_campaign_list>.sp_campaign_item>.sp_campaign_inner>.sp_camp_detail>h3.sp_inline_editor>.sp_pd_name[contenteditable="true"]~.sp_pd_icon {
    opacity: 1;
    visibility: visible;
}

.sp_campaign_list>.sp_campaign_item>.sp_campaign_inner>.sp_camp_detail>h3.sp_inline_editor>.sp_pd_icon {
    margin-left: 2px;
}

.sp_campaign_list>.sp_campaign_item>.sp_campaign_inner>.sp_camp_detail>h3.sp_inline_editor>.sp_pd_icon>span>svg {
    width: 14px;
    height: 14px;
}

.sp_complete_book_wrapper_popup .sp_campaign_list>.sp_campaign_item>.sp_campaign_inner>.sp_camp_detail,
.sp_theme_wrapper_popup .sp_campaign_list>.sp_campaign_item>.sp_campaign_inner>.sp_camp_detail,
.sp_admin_content_wrapper .sp_campaign_list>.sp_campaign_item>.sp_campaign_inner>.sp_camp_detail {
    display: flex;
    align-items: center;
}

.sp_theme_wrapper_popup .sp_campaign_list>.sp_campaign_item>.sp_campaign_inner>.sp_camp_detail>h3,
.sp_admin_content_wrapper .sp_campaign_list>.sp_campaign_item>.sp_campaign_inner>.sp_camp_detail>h3 {
    /* margin-left: 10px; */
}

.sp_theme_wrapper_popup .sp_campaign_list>.sp_campaign_item>.sp_campaign_inner>.sp_camp_detail>h3>.sp_pd_name,
.sp_admin_content_wrapper .sp_campaign_list>.sp_campaign_item>.sp_campaign_inner>.sp_camp_detail>h3>.sp_pd_name {
    /* max-width: 120px; */
}

.sp_temp_lock {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-top: -2px;
    margin-right: 5px;
}

.sp_temp_lock>svg {
    fill: #d4d4d4;
}

.sp_temp_lock.active>svg {
    fill: #54c53b;
}

.sp_camp_type {
    padding: 0px 20px;
    border-radius: 50px;
    color: var(--main-color);
    display: inline-block;
    background-color: rgba(52, 106, 253, 0.12);
    font-size: 14px;
    height: 24px;
    line-height: 25px;
    font-weight: 500;
    text-transform: capitalize;
}

.ct_ebook .sp_camp_type {
    color: var(--main-color);
    background-color: rgba(52, 106, 253, 0.12);
}

.ct_mockup .sp_camp_type {
    color: var(--main-color);
    background-color: rgba(52, 106, 253, 0.12);
}

.ct_logo .sp_camp_type {
    color: var(--main-color);
    background-color: rgba(52, 106, 253, 0.12);
}

.sp_campaign_list>.sp_campaign_item.ct_ebook>.sp_campaign_inner::after {
    background-color: var(--main-color);
}

.sp_campaign_list>.sp_campaign_item.ct_mockup>.sp_campaign_inner::after {
    background-color: var(--main-color);
}

.sp_campaign_list>.sp_campaign_item.ct_logo>.sp_campaign_inner::after {
    background-color: var(--main-color);
}

.sp_campaign_list .sp_camp_type {
    display: none;
}

.sp_camp_type_wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 -5px;
    margin-bottom: 25px;
}

.sp_camp_type_wrapper>.sp_camp_type_item {
    padding: 0 5px;
    margin-bottom: 25px;
}

.sp_camp_type_wrapper>.sp_camp_type_item>.sp_camp_type_inner>input {
    position: absolute;
    left: -99999px;
    opacity: 0;
    visibility: hidden;
}

.sp_camp_type_wrapper>.sp_camp_type_item>.sp_camp_type_inner>label {
    text-align: center;
    cursor: pointer;
    display: block;
    position: relative;
}

.sp_camp_type_wrapper>.sp_camp_type_item>.sp_camp_type_inner>label>span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    border: 1px solid #e9e9f4;
    border-radius: 12px;
    margin-bottom: 8px;
    box-shadow: none;
    position: relative;
    transition: all 0.2s;
}

.sp_camp_type_wrapper>.sp_camp_type_item>.sp_camp_type_inner>label>span>img {
    width: 40px;
    height: 35px;
    object-fit: contain;
}

.sp_camp_type_wrapper>.sp_camp_type_item>.sp_camp_type_inner>label>span>svg {
    width: 40px;
    height: 35px;
}

.sp_camp_type_wrapper>.sp_camp_type_item>.sp_camp_type_inner>label>span>svg path {
    fill: var(--main-color);
}

.sp_camp_type_wrapper>.sp_camp_type_item.active>.sp_camp_type_inner>label>span {
    border-color: var(--main-color);
    box-shadow: 0px 0px 0px 1px var(--main-color), 0px 0px 0px 4px rgba(var(--main-color-rgb), 0.20);
}

.sp_camp_type_wrapper>.sp_camp_type_item>.sp_camp_type_inner>label>p {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
}

.sp_camp_type_wrapper>.sp_camp_type_item.active>.sp_camp_type_inner>label>p {
    color: var(--main-color);
}

.sp_camp_type_wrapper>.sp_camp_type_item>.sp_camp_type_inner>label>p>span {
    font-weight: 400;
}

#saveto_popup .sp_camp_type_wrapper>.sp_camp_type_item>.sp_camp_type_inner>label>span {
    width: 140px;
    height: 140px;
}

#saveto_popup .sp_camp_type_wrapper>.sp_camp_type_item>.sp_camp_type_inner>label>span>img {
    width: 110px;
    height: 22px;
}

/********************************************************************************************* 
5. campaign end
*********************************************************************************************/

/********************************************************************************************* 
6. editor start
*********************************************************************************************/
.sp_header_wrapper.sp_header_editor>.sp_container {
    max-width: 100%;
    padding: 0 50px;
}

.sp_editor_wrapper {
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: auto;
}

.sp_editor_preview_wrapper {
    padding-right: 30px;
    padding-left: 480px;
    position: relative;
    transition: all 0.3s;
    padding-top: 54px;
}

.close_sidebar .sp_editor_preview_wrapper {
    padding-left: 20px;
}

.layers_open .sp_editor_preview_wrapper {
    padding-right: 300px;
}

.sp_ed_tab_box {
    /* display: flex;
    align-items: center;
    justify-content: center; */
    width: 90px;
    height: 100%;
    background-color: #272b45;
    overflow: auto;
}

.sp_ed_tab_box>.sp_edtb_handle {
    cursor: move;
    margin-bottom: 15px;
}

.sp_ed_tab_box>.sp_edtb_tab_list ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.sp_ed_tab_box>.sp_edtb_tab_list ul>li {
    flex: 1;
    width: 100%;
}

.sp_ed_tab_box>.sp_edtb_tab_list ul>li:last-child {
    margin-bottom: 0px;
}

.sp_ed_tab_box>.sp_edtb_tab_list .sp_edtb_item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background-color: #272b45;
    min-height: 72px;
    color: #9ba1c9;
    font-size: 12px;
    line-height: 14px;
}

.sp_ed_tab_box>.sp_edtb_tab_list .sp_edtb_item>svg {
    margin-bottom: 5px;
    width: auto;
    height: 17px;
}

.sp_ed_tab_box>.sp_edtb_tab_list .sp_edtb_item svg path {
    fill: #9ba1c9;
}

.sp_ed_tab_box>.sp_edtb_tab_list li .sp_edtb_item:hover,
.sp_ed_tab_box>.sp_edtb_tab_list li:hover .sp_edtb_item {
    color: #ffffff;
}

.sp_ed_tab_box>.sp_edtb_tab_list li .sp_edtb_item.active,
.sp_ed_tab_box>.sp_edtb_tab_list li.active .sp_edtb_item {
    background-color: #2c314d;
    color: #ffffff;
}

.sp_ed_tab_box>.sp_edtb_tab_list li .sp_edtb_item:hover svg path,
.sp_ed_tab_box>.sp_edtb_tab_list li:hover .sp_edtb_item svg path,
.sp_ed_tab_box>.sp_edtb_tab_list li .sp_edtb_item.active svg path,
.sp_ed_tab_box>.sp_edtb_tab_list li.active .sp_edtb_item svg path {
    fill: #ffffff;
}

.sp_ed_tab_box>.sp_edtb_tab_list .sp_edtb_item>span {
    position: relative;
}

.sp_ed_tab_box>.sp_edtb_tab_list .sp_edtb_item>span>.image_ai_tag {
    top: -14px;
    right: -16px;
    font-size: 8px;
    padding: 1px 3px 0px;
}

.sp_editor_preview_wrapper>.sp_ed_right_btns {
    position: fixed;
    top: 0;
    left: 450px;
    right: 0;
    z-index: 10;
    margin: 0;
    transition: all 0.3s;
}

.sp_package_editor .sp_editor_preview_wrapper>.sp_ed_right_btns {
    top: 60px;
}

.show_preview .sp_editor_preview_wrapper>.sp_ed_right_btns,
.close_sidebar .sp_editor_preview_wrapper>.sp_ed_right_btns {
    left: 0;
}

.sp_ed_right_btns {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    padding: 10px;
    position: relative;
    margin: 0 -30px;
    border-bottom: 1px solid #efefef;
}

.sp_ed_right_btns>.sp_edr_btn {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(var(--main-color-rgb), 0.08);
    border-radius: 5px;
    background-color: rgba(var(--main-color-rgb), 0.08);
    margin: 0 5px;
    color: #a8aec0;
    cursor: pointer;
    font-size: 14px;
    outline: none;
    border-color: transparent;
}

.sp_ed_right_btns>.sp_edr_btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.sp_ed_right_btns>.sp_edr_btn:last-child {
    margin-bottom: 0;
}

.sp_ed_right_btns>.sp_edr_btn>svg path {
    fill: var(--main-color);
}

.sp_ed_right_btns>.sp_edr_btn.ed_isbn_barcode>svg path,
.sp_ed_right_btns>.sp_edr_btn.ed_snaptogrid_switch>svg path,
.sp_ed_right_btns>.sp_edr_btn.ed_obj_grid>svg path {
    fill: rgba(var(--main-color-rgb), 0.5);
}

.sp_show_isbn .sp_ed_right_btns>.sp_edr_btn.ed_isbn_barcode>svg path,
.sp_ed_right_btns>.sp_edr_btn.ed_snaptogrid_switch.active>svg path,
.sp_ed_right_btns>.sp_edr_btn.ed_obj_grid.active>svg path {
    fill: var(--main-color);
}

.sp_ed_right_btns>.sp_edr_btn.ed_eye_dropper {
    position: absolute;
    left: 5px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    background-color: #ffffff;
}

.sp_ed_right_btns>.sp_edr_btn.ed_eye_dropper.active {
    background-color: var(--main-color);
}

/* .sp_ed_right_btns>.sp_edr_btn.ed_eye_dropper.active svg{    
    filter: drop-shadow(0 0px 1px #000);
} */
.sp_ed_right_btns>.sp_edr_btn.ed_eye_dropper.active svg path {
    fill: #ffffff;
}

.sp_resize_wrapper.sp_tool_bg_remover{
    position: absolute;
    left: 55px;
    top: 10px;
}
.sp_ed_right_btns>.sp_edr_separator {
    width: 1px;
    height: 20px;
    background-color: #d6e0ff;
    margin: 0 15px;
}

.sp_ed_right_btns>.ed_zoom_number {
    margin: 0;
    font-size: 14px;
    padding: 0 6px;
    min-width: 50px;
    text-align: center;
}

.sp_resize_wrapper {
    position: relative;
}

.sp_resize_wrapper>.sp_resize_toggle {
    border: 1px solid #eff3ff;
    border-radius: 5px;
    background-color: rgba(var(--main-color-rgb), 0.08);
    color: var(--main-color);
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    font-size: 14px;
    cursor: pointer;
    border-color: transparent;
}

.sp_resize_wrapper>.sp_resize_toggle>svg {
    fill: var(--main-color);
    width: 24px;
    height: auto;
    margin-right: 4px;
}

.sp_resize_wrapper>.sp_resize_dd {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    width: 260px;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    text-align: left;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s cubic-bezier(0.71, -0.11, 0.25, 0.88);
    transform: translateY(-10px);
}

.sp_resize_wrapper.open>.sp_resize_dd {
    opacity: 1;
    visibility: visible;
    transform: translateY(0px);
}

.sp_resize_wrapper>.sp_resize_dd label {
    font-weight: 400;
    font-size: 13px;
    margin: 0;
    display: block;
}

.sp_resize_wrapper>.sp_resize_dd label span {
    display: block;
    margin-bottom: 2px;
}

.sp_resize_wrapper>.sp_resize_dd input {
    width: 100%;
    height: 44px;
    border: 1px solid #c4ccd8;
    border-radius: 5px;
    padding: 0 14px;
    font-size: 14px;
    margin-bottom: 20px;
    outline: none;
}

.sp_image_editor_wrapper[data-type="pages"] .sp_resize_wrapper>.sp_resize_dd input#cnvs_widht {
    cursor: not-allowed;
}

.sp_resize_wrapper>.sp_resize_dd input:focus {
    border-color: var(--main-color);
}

.sp_resize_wrapper>.sp_resize_dd>.sp_btn {
    height: 42px;
    line-height: 40px;
    font-size: 14px;
    padding: 0 20px;
    width: 100%;
    border-radius: 6px;
}

.sp_mockup_editor .sp_edpr_box {
    max-width: 800px;
    border-radius: 12px;
    margin: 30px auto;
    background-color: #FFFFFF;
    position: relative;
    overflow: hidden;
    text-align: center;
}

.sp_edpr_layer_size {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 13px;
}

.sp_edpr_layer_size>p {
    margin: 0;
}

.sp_edpr_layer_size>p>span {
    font-weight: 700;
}

.sp_editor_sidebar {
    position: fixed;
    top: 60px;
    left: 0px;
    bottom: 0px;
    width: 450px;
    background-color: #2c314d;
    z-index: 20;
    text-align: left;
    transition: all 0.3s;
}

.sp_editor_sidebar *{
    scrollbar-color: #ffffff5c transparent;
}
#select2-ed_canvas_fontfamily-results{
    scrollbar-color: #ffffff5c transparent;
}

.close_sidebar .sp_editor_sidebar {
    left: -450px;
}

.sp_editor_sidebar>.sp_editor_sidebar_toggle {
    position: absolute;
    top: 100px;
    left: 100%;
    width: 12px;
    height: 60px;
    border-radius: 0 30px 30px 0;
    background-color: #2c314d;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: 5px;
}

.sp_editor_sidebar>.sp_editor_sidebar_toggle>svg {
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    -webkit-transform-origin: 5px;
    -moz-transform-origin: 5px;
    transform-origin: 5px;
}

.close_sidebar .sp_editor_sidebar>.sp_editor_sidebar_toggle>svg {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.sp_editor_sidebar.sp_sidebar_right {
    left: 20px;
    right: auto;
}

.sp_editor_sidebar .sp_editor_sidebar_inner {
    display: none;
    flex-direction: column;
    height: 100%;
}

.sp_editor_sidebar .sp_editor_sidebar_inner.active {
    display: flex;
}

.sp_editor_sidebar .sp_es_title {
    text-align: center;
    padding: 26px 10px;
    margin: 0;
    font-size: 18px;
    flex: none;
    color: #bbc2ef;
    /* background-color: #353b5b; */
    position: relative;
}

.sp_editor_sidebar_inner .sp_back_arrow {
    cursor: pointer;
    width: 20px;
    height: 20px;
    position: absolute;
    left: 30px;
    top: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    display: none;
    z-index: 1;
}

.sp_editor_sidebar_inner .sp_back_arrow>svg {
    width: 16px;
    height: 16px;
}

.sp_editor_sidebar_inner .sp_back_arrow>svg path {
    fill: #ffffff;
}

.sp_es_body {
    padding: 30px;
    flex: 1;
    overflow: auto;
    overflow-x: hidden;
    padding-top: 0;
}

.sp_editor_sidebar_inner .sp_search_wrapper {
    margin-bottom: 20px;
}

.sp_editor_sidebar_inner .sp_search_wrapper>input {
    background-color: transparent;
    border-color: #555e8d;
    border-radius: 8px;
    color: #dadada;
}

.sp_editor_sidebar_inner .sp_search_wrapper>.sp_search_icon {
    background-color: rgba(var(--main-color-rgb), 0.1);
}

#library_tab_main .sp_view_more::after,
#library_tab_main .sp_view_more::before,
#bg_library_tab .sp_view_more::after,
#bg_library_tab .sp_view_more::before,
#cutouts_tab_main .sp_view_more::after,
#cutouts_tab_main .sp_view_more::before,
.sp_editor_sidebar_inner .sp_view_more::after,
.sp_editor_sidebar_inner .sp_view_more::before {
    display: none;
}

#bg_library_tab .sp_view_more .sp_btn,
#library_tab_main .sp_view_more .sp_btn,
#cutouts_tab_main .sp_view_more .sp_btn,
.sp_editor_sidebar_inner .sp_view_more .sp_btn {
    background-color: transparent;
    min-width: auto;
    padding: 7px 10px;
    height: auto;
    line-height: inherit;
    font-weight: 400;
    text-decoration: underline;
    color: #a6afe0;
}

#bg_library_tab .sp_view_more .sp_btn:hover,
#library_tab_main .sp_view_more .sp_btn:hover,
#cutouts_tab_main .sp_view_more .sp_btn:hover,
.sp_editor_sidebar_inner .sp_view_more .sp_btn:hover {
    background-color: transparent;
    color: #ffffff;
}

/* ebook editor start */
.sp_iul_item {
    margin-bottom: 30px;
    position: relative;
}

.sp_iul_item>.sp_iup_title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
    color: #bbc2ef;
}

.sp_iul_item>.sp_iup_title>span {
    color: #bbc2ef;
    font-size: 14px;
}

.sp_iul_item>.sp_iup_upload_box {
    position: relative;
}

.sp_iul_item input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 123px;
    outline: none;
    cursor: pointer;
    opacity: 0;
}

.sp_iul_item label {
    border-radius: 4px;
    border: 1px solid #555e8d;
    text-align: center;
    overflow: hidden;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    min-height: 160px;
    cursor: pointer;
    margin-bottom: 20px;
    font-weight: 400;
    background-color: #353b5b;
}

.sp_iul_item label>span {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-size: 14px;
}

.sp_iul_item label>span>img {
    width: 44px;
    height: auto;
    margin-bottom: 15px;
}

.sp_iul_item label>.sp_iup_browse {
    background-color: #3e456a;
    display: flex;
    width: 100%;
    align-items: center;
    font-size: 14px;
    color: #a8aec0;
}

.sp_iul_item label>.sp_iup_browse>span {
    width: 80px;
    height: 36px;
    background-color: var(--main-color);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
}

.sp_iup_progress_bar_wrapper>.sp_iup_progress_bar {
    height: 10px;
    border-radius: 50px;
    background-color: #272b45;
    position: relative;
    border: 1px solid #484d6c;
    margin-bottom: 4px;
}

.sp_iup_progress_bar_wrapper>.sp_iup_progress_bar>.sp_iup_progress_bar_active {
    position: absolute;
    top: -1px;
    left: -1px;
    bottom: -1px;
    background-color: var(--main-color);
    border-radius: 50px;
    background-size: 15px 15px;
    animation: move_progressbar 1.5s linear infinite;
    background-image: linear-gradient(-45deg,
            rgba(255, 255, 255, 0.2) 25%, transparent 25%,
            transparent 50%, rgba(255, 255, 255, 0.2) 50%,
            rgba(255, 255, 255, 0.2) 75%, transparent 75%,
            transparent);
}

@keyframes move_progressbar {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 15px 15px;
    }
}

/* progress bar light start */
.sp_iup_progress_bar_wrapper.light_progress_bar_wrapper>.sp_iup_progress_bar {
    background-color: rgba(var(--main-color-rgb), 0.1);
    border-color: rgba(var(--main-color-rgb), 0.2);
}

.sp_iup_progress_bar_wrapper.light_progress_bar_wrapper>h3 {
    font-weight: 600;
    margin: 0;
}

#tab_conn_gohighlevel .sp_iup_progress_bar_wrapper>.sp_iup_progress_bar>.sp_iup_progress_bar_active {
    background-color: #4CAF50;
}

.sp_iup_progress_bar_wrapper.light_progress_bar_wrapper>p {
    color: var(--color-body);
    font-weight: 600;
    text-align: left;
    margin-bottom: 8px;
}

/* progress bar light end */

.sp_popup_tab_content .sp_iup_progress_bar_wrapper {
    margin-top: 40px;
}

.sp_iup_progress_bar_wrapper>p {
    text-align: center;
    margin: 0;
    font-size: 12px;
    color: #ffffff;
}

.sp_iup_loader {
    position: absolute;
    top: 1px;
    left: 1px;
    right: 1px;
    bottom: 52px;
    background-color: rgb(39, 43, 69, 0.8);
    border-radius: 5px;
}

.sp_iup_loader>.sp_logo {
    margin: 0;
    position: absolute;
    top: calc(50% - 15px);
    left: calc(50% - 15px);
}

.sp_iup_btns {
    display: flex;
    align-items: center;
}

.sp_iup_btns>.sp_btn {
    flex: 1;
    margin-right: 20px;
    height: 42px;
    line-height: 24px;
    padding: 0 10px;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sp_iup_btns>.sp_btn:last-child {
    margin-right: 0;
}

.sp_iup_btns>.sp_btn>svg {
    margin-right: 10px;
    -webkit-transform: translateY(-1px);
    -moz-transform: translateY(-1px);
    transform: translateY(-1px);
}

.sp_iup_btns>.sp_btn.sp_btn_border {
    border-width: 1px;
    color: #bbc2ef;
    border-color: #555e8d;
    background-color: #353b5b;
}

/* .sp_img_uploader_list{
    position: absolute;
    top: 50%;
    left: 30%;
    z-index: 99;
} */
.sp_img_uploader_list>.sp_iul_item {
    background-color: var(--main-color);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 13px 15px;
    border-radius: 10px;
    position: fixed;
    margin-bottom: 50px;
    display: none;
    min-width: 450px;
    z-index: 999;
    -webkit-transform: translateY(60px);
    -moz-transform: translateY(60px);
    transform: translateY(60px);
}

.sp_img_uploader_list>.sp_iul_item:after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -7.5px;
    margin-top: -9px;
    width: 15px;
    height: 15px;
    background-color: var(--main-color);
    border-radius: 4px;
    transform: rotate(45deg);
}

.sp_img_uploader_list>.sp_iul_item>.sp_iup_btns {
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid rgba(255, 255, 255, 0.15);
}

.sp_img_uploader_list>.sp_iul_item>.sp_iup_btns:last-child {
    border-right: none;
}

.sp_img_uploader_list>.sp_iul_item>.sp_iup_btns label,
.sp_img_uploader_list>.sp_iul_item>.sp_iup_btns button {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background-color: transparent;
    border: none;
    outline: none;
    font-size: 16px;
    font-weight: 400;
    margin: 0 18px;
    cursor: pointer;
    min-height: inherit;
    flex-direction: row;
}

.sp_img_uploader_list>.sp_iul_item>.sp_iup_btns svg {
    margin-right: 10px;
    margin-top: -1px;
}

.sp_img_uploader_list>.sp_iul_item>.sp_iup_btns svg path {
    fill: #ffffff;
}

.sp_img_uploader_list>.sp_iul_item>.sp_iup_btns>input {
    position: absolute;
    left: -999999px;
    opacity: 0;
}

/* ebook editor end */


/* logo editor start */
/* .sp_logo_editor .sp_edpr_box{
    margin-top: 40px;
    width: 100%;
    max-width: 1080px;
    position: relative;
    background-color: transparent;
    overflow: inherit;
}
.sp_logo_editor .sp_edpr_box > .canvas-container{
    border-radius: 12px;
    background-color: #ffffff;
    box-shadow: 0px 4px 34px 0px rgba(0, 0, 0, 0.03);
    margin: 0 auto;
    max-width: 100%;
    position: relative !important;
    height: auto !important;
    left: auto !important;
    top: auto !important;
    transform-origin: top;
}
.sp_logo_editor .sp_edpr_box > .canvas-container > canvas{
    width: 100% !important;
    height: auto !important;
}
.sp_logo_editor .sp_edpr_box > .canvas-container > canvas.upper-canvas{
    position: relative !important;
} */


.sp_text_option_list {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 30px;
}

.sp_text_option_list>.sp_to_item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 32px;
    border-radius: 3px;
    border: 1px solid #3b436d;
    cursor: pointer;
    color: #bbc2ef;
    font-size: 18px;
    font-weight: 600;
    font-family: sans-serif;
    background-color: #353b5b;
    margin-right: 5px;
    margin-bottom: 5px;
}

.sp_text_option_list>.sp_to_item:hover {
    border-color: #ffffff;
    color: var(--main-color);
}

.sp_text_option_list>.sp_to_item:hover svg path {
    fill: #ffffff;
}

.sp_text_option_list>.sp_to_item.active {
    background-color: var(--main-color);
    border-color: var(--main-color);
    color: #ffffff;
    box-shadow: 0px 3px 16.92px 1.08px rgba(151, 68, 255, 0.22);
}

.sp_text_option_list>.sp_to_item.active svg path {
    fill: #ffffff;
}

.sp_text_option_list>.sp_to_item.to_underline {
    text-decoration: underline;
}

.sp_text_option_list>.sp_to_item.to_linethrough {
    text-decoration: line-through;
}

.sp_text_option_list>.sp_to_item.to_overline {
    text-decoration: overline;
}

.sp_add_text_btn_wrapper {
    border-bottom: 1px solid #3c436d;
    margin-bottom: 30px;
}

.sp_add_text_btn_wrapper>.sp_add_text_layer {
    height: 60px;
    border: 1px solid var(--main-color);
    border-radius: 4px;
    background-color: rgba(var(--main-color-rgb), 0.1);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-bottom: 30px;
    color: #bbc2ef;
}


/* shape start */
.ed_element_shape {
    margin-bottom: 0;
}

.ed_element_shape .panel {
    box-shadow: none;
    border-radius: 0;
    margin-bottom: 15px;
    border: none;
    border-radius: 0px;
    overflow: hidden;
    background-color: transparent;
}

.ed_element_shape .panel:last-child {
    margin-bottom: 0;
}

.ed_element_shape .panel-heading {
    padding: 0;
    color: #ffffff;
}

.ed_element_shape .panel-heading .panel-title {
    margin: 0;
}

.ed_element_shape .panel-default>.panel-heading {
    background-color: transparent;
}

.ed_element_shape .panel-heading .panel-title>a {
    display: block;
    padding: 20px 20px 18px;
    font-size: 14px;
    color: var(--color-body);
    font-weight: 400;
    position: relative;
    border: 1px solid #eaeaea;
}

.ed_element_shape .panel-heading .panel-title>a::after {
    content: "";
    position: absolute;
    top: 17px;
    right: 15px;
    background-image: url('../images/icons/down-arrow.svg');
    background-size: 12px;
    width: 20px;
    height: 20px;
    background-position: center;
    background-repeat: no-repeat;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    border-radius: 50px;
}

.ed_element_shape .panel-heading .panel-title>a[aria-expanded="true"] {
    border-color: var(--main-color);
    color: var(--main-color);
}

.ed_element_shape .panel-heading .panel-title>a[aria-expanded="true"]::after {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    transform: rotate(180deg);
    -webkit-filter: invert(1);
    -moz-filter: invert(1);
    filter: invert(1);
}

.ed_element_shape .panel-body {
    padding-right: 2px;
}

.ed_element_shape_list ul {
    list-style: none;
    padding: 0;
    margin: 0 -3px;
    display: flex;
    align-items: center;
    /* justify-content: center; */
    flex-wrap: wrap;
}

.ed_element_shape_list ul>li {
    padding: 0 3px;
    width: 33.3333%;
}

.ed_element_shape_list ul>li>a {
    cursor: pointer;
    width: 100%;
    height: 90px;
    text-align: center;
    background-color: #ffffff;
    border-radius: 3px;
    border: 1px solid #555e8d;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
}

.ed_element_shape_list ul>li>a:hover {
    border-color: #d6d6d6;
}

.ed_element_shape_list ul>li>a>img {
    max-width: 60px;
    max-height: 60px;
}

.ed_element_shape_list.ed_element_illustrations_list ul>li {
    width: 33.3333%;
}

.ed_element_shape_list.ed_element_illustrations_list ul>li>a {
    height: 90px;
}

.ed_element_shape_list.ed_element_illustrations_list ul>li>a>img {
    max-width: 90px;
    max-height: 90px;
}

.ed_element_shape_list ul>li>a>p {
    color: #ffffff;
    margin: 0;
    font-size: 36px;
    line-height: 40px;
}

.ed_element_shape_list ul.load_imageai_assets>li>a {
    border: 1px solid #555e8d;
    background-color: #353b5b;
    border-radius: 4px;
    overflow: hidden;
}

.ed_element_shape_list ul.load_imageai_assets>li>a>img {
    max-width: 100%;
    max-height: 100%;
}

.ed_category_folder>ul {
    list-style: none;
    padding: 0;
    margin: 0 -7.5px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.ed_category_folder>ul>li {
    margin: 0 7.5px;
    width: 100%;
    margin-bottom: 25px;
    background-color: #353b5b;
}

.ed_category_folder>ul>li>.sp_ed_folder_cat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row-reverse;
    cursor: pointer;
    padding: 10px;
}

.ed_category_folder>ul>li>.sp_ed_folder_cat:hover {
    background-color: #3f466b;
}

.ed_category_folder>ul>li>.sp_ed_folder_cat>span.ed_folder_icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.ed_category_folder>ul>li>.sp_ed_folder_cat>span.ed_folder_icon::before,
.ed_category_folder>ul>li>.sp_ed_folder_cat>span.ed_folder_icon::after {
    content: "";
    width: 5px;
    height: 1px;
    background-color: #a6accc;
    position: absolute;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transform-origin: right;
    -moz-transform-origin: right;
    transform-origin: right;
}

.ed_category_folder>ul>li>.sp_ed_folder_cat>span.ed_folder_icon::after {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.ed_category_folder>ul>li>.sp_ed_folder_cat>span.ed_folder_name {
    display: block;
    font-size: 13px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    color: #a6accc;
}

.ed_category_folder>ul>li:hover>.sp_ed_folder_cat>span.ed_folder_icon {
    border-color: #ffffff;
}

.ed_category_folder>ul>li:hover>.sp_ed_folder_cat>span.ed_folder_icon>svg path {
    fill: #ffffff;
}

.ed_category_folder>ul>li>ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    grid-gap: 5px;
}

.ed_category_folder>ul>li>ul>li>a {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #353b5b;
    height: 95px;
    position: relative;
}

.ed_category_folder>ul>li>ul>li>a>.ed_folder_item_overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(28, 26, 26, 0.50);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    opacity: 0;
    visibility: hidden;
}

.ed_category_folder>ul>li>ul>li>a:hover>.ed_folder_item_overlay {
    opacity: 1;
    visibility: visible;
}

.ed_category_folder>ul>li>ul>li>a>.ed_folder_item_overlay>.sp_btn {
    height: 26px;
    line-height: 26px;
    padding: 1px 10px;
}

.ed_category_folder>ul>li>ul>li>a>.ed_folder_item_overlay>.sp_btn:nth-child(2) {
    min-width: 60px;
}

.ed_category_folder>ul>li>ul>li:nth-child(4) {
    display: none;
}

.ed_category_folder>ul>li>ul>li>a:hover {
    background-color: #3f466b;
}

.ed_category_folder>ul>li>ul>li>a>img {
    max-width: 70px;
    max-height: 70px;
}

.ed_element_campaign .ed_category_folder>ul>li>ul>li>a {
    cursor: default;
}

.ed_element_campaign .ed_category_folder>ul>li>ul.spj_design_editable_list>li>a,
.ed_element_campaign .ed_category_folder>ul>li>ul.spj_dfydesign_editable_list>li>a {
    cursor: pointer;
}

.ed_category_folder>ul>li>ul>li.sp_no_image_>a {
    background-image: url('../images/blank_thumb.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.collapse.in {
    display: block;
}

.collapse {
    display: none;
}

/* shape end */

/* logo editor end */


.ed_canvas_preloader {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.5);
}

.ed_canvas_preloader .sp_logo>.sp_logo_inner>span {
    margin: 0;
}

.ed_canvas_preloader .sp_logo>.sp_logo_inner {
    cursor: default;
}

.ed_canvas_preloader .sp_logo {
    margin: 0;
    width: auto;
    -webkit-animation: preloader_anim 1.2s linear infinite;
    -moz-animation: preloader_anim 1.2s linear infinite;
    animation: preloader_anim 1.2s linear infinite;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

/* .ed_gradient_color_enable .ed_colorPicker_wrapper:last-child{
    margin-right: 0;
    width: 147px;
} */

.cd_bg_remover {
    background-color: #353B5B;
    border: 1px solid #555E8D;
    border-radius: 5px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8F99D8;
    /* text-transform: uppercase;
    font-weight: 600; */
    font-size: 14px;
    max-width: calc(100% - 20px);
    margin: 0 auto;
    margin-top: 10px;
    width: 100%;
}

.cd_bg_remover:focus,
.cd_bg_remover:hover {
    color: #ffffff;
    border-color: var(--main-color);
    background-color: var(--main-color);
}

.cd_bg_remover>.cd_bg_remover_icon {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
}

.cd_bg_remover>.cd_bg_remover_icon>svg {
    width: 18px;
    height: 18px;
}

.cd_bg_remover:focus>.cd_bg_remover_icon>svg path,
.cd_bg_remover:hover>.cd_bg_remover_icon>svg path {
    fill: #ffffff;
}

.cd_bg_remover>.cd_bg_remover_text>span {
    color: #ffffff;
    font-weight: 300;
    font-size: 10px;
    display: inline-block;
    transform: translateY(-1px);
}

.cd_bg_remover>.cd_bg_remover_text>span:before {
    content: "(";
}

.cd_bg_remover>.cd_bg_remover_text>span:after {
    content: ")";
}


.sp_popup_wrapper#remove_bg_popup>.sp_popup_inner {
    max-width: 720px;
}

.sp_popup_wrapper#remove_bg_popup>.sp_popup_inner .sp_popup_body {
    margin: 0;
}

.sp_popup_wrapper#remove_bg_popup .sp_delete_popup_wrapper>.sp_dp_details>h4 {
    margin: 0;
    margin-bottom: 0px;
    color: #346afd;
    font-weight: 600;
}

/* advance text style start */
.sp_advance_text_style_wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 15px;
    margin-bottom: 20px;
}

.sp_ats_item {
    position: relative;
    z-index: 1;
}

.sp_ats_item>.sp_ats_svg {
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #353B5B;
    border: 1px solid #555E8D;
    border-radius: 5px;
    cursor: pointer;
}

.sp_ats_item>.sp_ats_click {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    cursor: pointer;
}

.sp_ats_item.active>.sp_ats_svg {
    background-color: var(--main-color);
    border-color: var(--main-color);
}

.sp_ats_item.active>.sp_ats_svg svg path {
    fill: #ffffff;
}

.sp_ats_item>.sp_ats_overlay_toggle {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    border-radius: 5px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    display: none;
    z-index: 2;
}

.sp_ats_item.active>.sp_ats_overlay_toggle {
    display: flex;
}

.sp_ats_item>.sp_ats_overlay_toggle>svg {
    width: 14px;
    height: auto;
    fill: #ffffff;
}

.sp_ats_item>.sp_ats_overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 5px;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 15px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
    z-index: 2;
}

.sp_ats_item.active_overlay>.sp_ats_overlay {
    opacity: 1;
    visibility: visible;
}

.sp_ats_item>.sp_ats_overlay input[type="text"] {
    background-color: transparent;
    border: 1px solid #ffffff;
    text-align: center;
    color: #fff;
    width: 100%;
    height: 32px;
    border-radius: 5px;
    margin-bottom: 15px;
    font-size: 14px;
}

/* advance text style end */

/* dynamic variable start */
.sp_dynamic_variable_wrapper .sp_btn.sp_btn_block {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.sp_dynamic_variable_list {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
}

.sp_dynamic_variable_list>.sp_dv_item {
    margin-bottom: 15px;
    border: 1px solid #555E8D;
    background-color: #353B5B;
    border-radius: 4px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 16px;
    position: relative;
}

.sp_dynamic_variable_list>.sp_dv_item>.sp_dv_item_remove {
    position: absolute;
    top: -7px;
    right: -7px;
    width: 18px;
    height: 18px;
    border-radius: 15px;
    background-color: #FF5050;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: scale(0);
    transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.sp_dynamic_variable_list>.sp_dv_item:hover>.sp_dv_item_remove {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

.sp_dynamic_variable_list>.sp_dv_item>.sp_dv_item_remove:before,
.sp_dynamic_variable_list>.sp_dv_item>.sp_dv_item_remove:after {
    content: "";
    width: 8px;
    height: 2px;
    border-radius: 2px;
    background-color: #ffffff;
    position: absolute;
    transform: rotate(45deg);
    pointer-events: none;
}

.sp_dynamic_variable_list>.sp_dv_item>.sp_dv_item_remove:after {
    transform: rotate(-45deg);
}

.sp_dynamic_variable_wrapper .sp_info_tooltip {
    transform: translateY(-1px);
    border-color: #ffffff;
}

.sp_dynamic_variable_wrapper .sp_info_tooltip>svg path {
    fill: #ffffff;
}

.sp_dynamic_variable_link {
    display: none;
}

.sp_dynamic_variable_link .sp_social_clkshre_wrapper>.sp_url_setup_wrapper {
    border-right: 1px solid #e9e9f4;
    border-radius: 8px;
    word-break: break-word;
}

/* dynamic variable end */

.sp_editor_sidebar .sp_campaign_list,
.sp_image_editor_wrapper .sp_campaign_list {
    grid-gap: 15px;
}

.sp_editor_sidebar .sp_campaign_list>.sp_campaign_item>.sp_campaign_inner>.sp_camp_img>.sp_camp_overlay,
.sp_image_editor_wrapper .sp_campaign_list>.sp_campaign_item>.sp_campaign_inner>.sp_camp_img>.sp_camp_overlay {
    flex-direction: column;
    gap: 10px;
}

.sp_editor_sidebar .sp_campaign_list>.sp_campaign_item>.sp_campaign_inner>.sp_camp_img>.sp_camp_overlay .sp_btn:nth-child(2),
.sp_image_editor_wrapper .sp_campaign_list>.sp_campaign_item>.sp_campaign_inner>.sp_camp_img>.sp_camp_overlay .sp_btn:nth-child(2) {
    min-width: 60px;
}

.sp_package_editor .sp_btn.sp_btn_border,
.sp_image_editor_wrapper .sp_btn.sp_btn_border {
    color: #adb7d3;
    border-color: #adb7d3;
    background-color: rgb(175 191 235 / 15%);
}

.sp_package_editor .sp_btn.sp_btn_border:hover,
.sp_image_editor_wrapper .sp_btn.sp_btn_border:hover {
    color: #afbfeb;
    border-color: #afbfeb;
    background-color: rgb(175 191 235 / 20%);
}

.ed_imageai_generated_preview {
    margin-bottom: 15px;
}

.ed_imageai_generated_preview>img {
    max-width: 100%;
    border-radius: 5px
}

/* .ed_imageai_generate_box{
    display: none;
} */

.sp_textai_btn>svg {
    transform: translateY(5px);
}

.sp_textai_btn>span {
    position: relative;
}

.sp_textai_btn>span>.image_ai_tag {
    top: -4px;
    right: -22px;
    background-color: #ffffff;
    color: var(--main-color);
    line-height: initial;
    transform: scale(0.8);
}

.sp_editor_sidebar_inner .sp_back_arrow.sp_back_textai {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 24px;
    background-color: var(--main-color);
}

.sp_editor_sidebar_inner .sp_back_arrow.sp_back_textai>svg {
    width: 14px;
    height: 14px;
}

.sp_textai_instruction_list {
    color: #949cbd;
}

.sp_textai_instruction_list>.sp_radio {
    margin-bottom: 15px;
    margin-right: 15px !important;
}

.sp_textai_instruction_list>.sp_radio .tooltip-inner {
    min-width: 100px;
}

.sp_textai_instruction_list .sp_radio>label::after {
    background-color: #ffffff;
}

.sp_textai_instruction_list .sp_radio>input:checked~label {
    color: #ffffff;
}

.sp_textai_instruction_list .sp_radio>input:checked~label::before {
    border-color: #ffffff;
}

.sp_textai_instruction_list .sp_info_tooltip {
    border-color: #dadada;
}

.sp_textai_instruction_list .sp_info_tooltip>svg path {
    fill: #dadada;
}

.sp_checkbox_list.sp_textai_instruction_list .sp_checkbox>label {
    color: #949cbd;
}

.sp_checkbox_list.sp_textai_instruction_list .sp_checkbox>label::before {
    width: 16px;
    height: 16px;
    border-color: #949cbd;
}

.sp_checkbox_list.sp_textai_instruction_list .sp_checkbox>label::after {
    top: 6px;
    left: 3px;
    width: 10px;
    height: 5px;
    border-left: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
}

.sp_checkbox_list.sp_textai_instruction_list .sp_checkbox>input:checked~label {
    color: #ffffff;
}

.sp_checkbox_list.sp_textai_instruction_list .sp_checkbox>input:checked~label::before {
    border-color: #ffffff;
}

.sp_textai_instruction_list>.sp_checkbox .tooltip-inner {
    min-width: 100px;
}

.ed_sidebar_input>label>.sp_info_tooltip,
.sp_radio>label>.sp_info_tooltip {
    transform: translateY(0px);
}

.sp_gsl_text_list {
    margin-top: 25px;
}

.sp_gsl_text_list>.sp_gslt_item {
    margin-bottom: 15px;
    padding: 10px;
    border-radius: 6px;
    box-shadow: 0px 0px 0px 1px #555f8b;
}

.sp_gsl_text_list>.sp_gslt_item:hover {
    background-color: #3C4368;
}

.sp_gsl_text_list>.sp_gslt_item>.sp_gslt_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.sp_gsl_text_list>.sp_gslt_item>.sp_gslt_header>h3 {
    margin: 0;
    flex: 1;
    font-size: 14px;
    font-weight: 400;
    color: #ffffff;
}

.sp_gslt_header_btns {
    display: flex;
    align-items: center;
    gap: 5px;
}

.sp_gslt_header_btns>.sp_gslt_header_btn {
    width: 20px;
    height: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sp_gslt_header_btns>.sp_gslt_header_btn>svg {
    width: 14px;
    height: auto;
}

.sp_gslt_header_btns>.sp_gslt_header_btn:hover>svg path {
    fill: #ffffff;
}

.sp_gslt_body>p {
    margin: 0;
    color: #BBC2EF;
    font-size: 13px;
}

/* layers start */
.spj_layer_list_toggle {
    position: absolute;
    right: 10px;
}

.sp_layers_wrapper {
    position: fixed;
    top: 55px;
    right: 0;
    bottom: 0;
    background-color: #ffffff;
    z-index: 20;
    transition: all 0.2s cubic-bezier(0.71, -0.11, 0.25, 0.88);
    display: flex;
    flex-direction: column;
    border-left: 1px solid #efefef;
    width: 270px;
    opacity: 0;
    visibility: hidden;
    transform: translateX(100%);
}

.layers_open .sp_layers_wrapper {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

.layers_open #beacon-container {
    display: none;
}

.sp_layers_wrapper>.sp_layers_heading {
    padding: 10px 15px;
    font-size: 16px;
    color: var(--color-heading);
    flex: none;
    text-align: left;
    font-weight: 600;
    border-bottom: 1px solid #efefef;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sp_layers_wrapper>.sp_layers_heading>.sp_layers_close {
    width: 16px;
    height: 16px;
    border-radius: 16px;
    box-shadow: 0px 0px 0px 1px var(--main-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sp_layers_wrapper>.sp_layers_heading>.sp_layers_close>svg {
    width: 10px;
    height: auto;
}

.sp_layers_wrapper>.sp_layers_heading>.sp_layers_close>svg path {
    stroke: var(--main-color);
}

.sp_layers_wrapper>.sp_layers_heading>.sp_layers_close:hover {
    background-color: rgba(var(--main-color-rgb), 0.10);
}

.sp_resize_wrapper.spj_layer_list_toggle>.sp_resize_toggle.active {
    background-color: var(--main-color);
    color: #ffffff;
}

.sp_resize_wrapper.spj_layer_list_toggle>.sp_resize_toggle.active svg path {
    fill: #ffffff;
}

.sp_layers_list {
    flex: 1;
    overflow: auto;
    padding: 10px;
}

.sp_layer_item {
    margin-bottom: 6px;
    border-radius: 3px;
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) 60px;
    padding: 4px 8px;
    gap: 6px;
    align-items: center;
    position: relative;
}

.sp_layer_item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 3px;
    background-color: #ffffff;
    z-index: -1;
}

.sp_layer_item:hover {
    background-color: rgba(var(--main-color-rgb), 0.05);
}

.sp_layer_item.active {
    background-color: rgba(var(--main-color-rgb), 0.10);
    box-shadow: 0px 0px 0px 1px rgba(var(--main-color-rgb), 0.30);
}

.sp_layer_item.ui-sortable-placeholder {
    visibility: visible !important;
    border-radius: 3px;
    background-color: rgba(var(--main-color-rgb), 0.05);
    box-shadow: 0px 0px 0px 1px rgba(var(--main-color-rgb), 0.15);
}

.sp_layer_item.ui-sortable-helper {
    left: 10px !important;
    box-shadow: 0px 0px 0px 1px rgba(var(--main-color-rgb), 0.15);
    transform: translate(-2px, -2px);
}

.sp_layer_item.layer_hide .sp_layer_name>p {
    opacity: 0.5;
}

.sp_layer_item.layer_hide .sp_layer_action>.sp_layer_action_btn[data-action="showhide"] {
    visibility: visible;
    opacity: 0.5;
}

.sp_layer_dragger {
    display: grid;
    grid-template-columns: 2px 2px;
    cursor: move;
    gap: 0px 2px;
    width: 18px;
    height: 18px;
    align-items: center;
    justify-content: center;
}

.sp_layer_dragger>span {
    width: 2px;
    height: 2px;
    border-radius: 4px;
    background-color: #949ED4;
    display: block;
    margin: 0 auto;
}

.sp_layer_name {
    position: relative;
}

.sp_layer_name>p {
    margin: 0;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 13px;
    text-align: left;
    line-height: 28px;
}

.sp_layer_item.active .sp_layer_name>p {
    color: var(--main-color);
}

.sp_layer_name>input {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ffffff;
    border: 1px solid #cdd1d7;
    outline: none;
    border-radius: 4px;
    padding: 0px 8px;
    font-size: 13px;
}

.sp_layer_name>.spj_layer_select {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    cursor: pointer;
}

.sp_layer_action {
    display: flex;
    align-items: center;
    gap: 2px;

}

.sp_layer_action>.sp_layer_action_btn {
    width: 32px;
    height: 28px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
}

.sp_layer_action>.sp_layer_action_btn.active,
.sp_layer_item:hover .sp_layer_action>.sp_layer_action_btn {
    opacity: 1;
    visibility: visible;
}

.sp_layer_action>.sp_layer_action_btn svg {
    width: 12px;
    height: 12px;
    pointer-events: none;
}

.sp_layer_action>.sp_layer_action_btn svg path {
    fill: var(--color-body);
}

.sp_layer_action>.sp_layer_action_btn.active svg path,
.sp_layer_action>.sp_layer_action_btn:hover svg path {
    fill: var(--main-color);
}

.sp_layer_item.group .sp_layer_name>p {
    font-weight: 600;
}

.sp_layer_item.group .sp_layer_name>p::before {
    content: '🗀';
    margin-right: 5px;
}

/* layers end */

.ed_text_wrap {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    background-color: #555E8D;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.ed_text_wrap>svg {
    width: 11px;
    height: auto;
    pointer-events: none;
}

.ed_text_wrap.active {
    background-color: var(--main-color);
}

.ed_eye_dropper_point {
    position: absolute;
    top: calc(50% - 10px);
    left: calc(50% - 10px);
    width: 20px;
    height: 20px;
    border: 2px solid #ffffff;
    background-color: #000000;
    border-radius: 30px;
    display: none;
    pointer-events: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24), inset 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

.eye_dropper_open .ed_eye_dropper_point {
    display: block;
}

.eye_dropper_open .canvas-container canvas {
    cursor: default !important;
}

/* publishable setting sidebar start */
.sp_publishable_setting_sidebar {
    position: fixed;
    top: 55px;
    right: 0;
    bottom: 0;
    background-color: #ffffff;
    z-index: 20;
    transition: all 0.2s cubic-bezier(0.71, -0.11, 0.25, 0.88);
    display: flex;
    flex-direction: column;
    border-left: 1px solid #efefef;
    width: 270px;
    opacity: 0;
    visibility: hidden;
    transform: translateX(100%);
    text-align: left;
}

.publishable_setting_open .sp_publishable_setting_sidebar {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

.sp_pss_heading {
    padding: 10px 15px;
    font-size: 16px;
    color: var(--color-heading);
    flex: none;
    text-align: left;
    font-weight: 600;
    border-bottom: 1px solid #efefef;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sp_pss_heading>.sp_layers_close {
    width: 16px;
    height: 16px;
    border-radius: 16px;
    box-shadow: 0px 0px 0px 1px var(--main-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sp_pss_heading>.sp_layers_close>svg {
    width: 10px;
    height: auto;
}

.sp_pss_heading>.sp_layers_close>svg path {
    stroke: var(--main-color);
}

.sp_pss_heading>.sp_layers_close:hover {
    background-color: rgba(var(--main-color-rgb), 0.10);
}

.sp_pss_body {
    padding: 15px;
}

.sp_pss_body .sp_input_wrapper .sp_input {
    height: 42px;
    border-radius: 6px;
    padding: 0 15px;
    font-size: 14px;
}

/* publishable setting sidebar end */
/********************************************************************************************* 
6. editor end
*********************************************************************************************/

/********************************************************************************************* 
7. templates start
*********************************************************************************************/
.sp_template_popup_wrapper {
    position: fixed;
    top: 63px;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 60px 80px;
    background-color: #f8fafd;
    z-index: 999;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateY(10%);
    -moz-transform: translateY(10%);
    transform: translateY(10%);
}

.temp_popup_open {
    overflow: hidden;
}

.temp_popup_open .sp_template_popup_wrapper {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    transform: translateY(0);
}

.sp_template_popup_wrapper>.sp_container {
    max-width: 1600px;
}

.sp_template_popup_wrapper .sp_template_list>.sp_template_item>.sp_template_item_inner {
    overflow: hidden;
}

.sp_template_popup_wrapper .sp_template_list>.sp_template_item[class*="colortag_"]>.sp_template_item_inner::before {
    content: "";
    position: absolute;
    top: -25px;
    left: -25px;
    width: 40px;
    height: 40px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
    z-index: 10;
    box-shadow: 0px 0px 40px rgb(0, 0, 0, 0.18);
}

.sp_template_popup_wrapper .sp_template_list>.sp_template_item.colortag_c1>.sp_template_item_inner::before {
    background-color: #039BE5;
}

.sp_template_popup_wrapper .sp_template_list>.sp_template_item.colortag_c2>.sp_template_item_inner::before {
    background-color: #0097A7;
}

.sp_template_popup_wrapper .sp_template_list>.sp_template_item.colortag_c3>.sp_template_item_inner::before {
    background-color: #388E3C;
}

.sp_template_popup_wrapper .sp_template_list>.sp_template_item.colortag_c4>.sp_template_item_inner::before {
    background-color: #FBC02D;
}

.sp_template_popup_wrapper .sp_template_list>.sp_template_item.colortag_c5>.sp_template_item_inner::before {
    background-color: #D32F2F;
}

.sp_template_popup_wrapper .sp_template_list>.sp_template_item.colortag_c6>.sp_template_item_inner::before {
    background-color: #00796B;
}

.sp_template_popup_wrapper .sp_template_list>.sp_template_item.colortag_c7>.sp_template_item_inner::before {
    background-color: #5e07ff;
}

.sp_template_popup_wrapper .sp_template_list>.sp_template_item.colortag_c8>.sp_template_item_inner::before {
    background-color: #455A64;
}

.sp_template_popup_wrapper .sp_template_list>.sp_template_item.colortag_c9>.sp_template_item_inner::before {
    background-color: #e728ce;
}

.sp_template_popup_wrapper .sp_template_list>.sp_template_item.colortag_c10>.sp_template_item_inner::before {
    background-color: #28e78e;
}

.sp_template_popup_wrapper .sp_template_list>.sp_template_item.colortag_c11>.sp_template_item_inner::before {
    background-color: #e77e28;
}

.sp_template_popup_wrapper .sp_template_list>.sp_template_item.colortag_c12>.sp_template_item_inner::before {
    background-color: #5e07ff;
}

.sp_template_popup_wrapper .sp_template_list>.sp_template_item.colortag_c13>.sp_template_item_inner::before {
    background-color: #e728ce;
}

.sp_template_popup_wrapper .sp_template_list>.sp_template_item.colortag_c14>.sp_template_item_inner::before {
    background-color: #00796B;
}

.sp_template_popup_wrapper .sp_template_list>.sp_template_item.colortag_c15>.sp_template_item_inner::before {
    background-color: #D32F2F;
}

.sp_template_popup_wrapper .sp_template_list>.sp_template_item.colortag_c16>.sp_template_item_inner::before {
    background-color: #FBC02D;
}

/* for 86 mockups start */
.sp_template_popup_wrapper .sp_template_list>.sp_template_item.colortag_c17>.sp_template_item_inner::before {
    background-color: #2d8dfb;
}

.sp_template_popup_wrapper .sp_template_list>.sp_template_item.colortag_c18>.sp_template_item_inner::before {
    background-color: #2dfb83;
}

.sp_template_popup_wrapper .sp_template_list>.sp_template_item.colortag_c19>.sp_template_item_inner::before {
    background-color: #862dfb;
}

.sp_template_popup_wrapper .sp_template_list>.sp_template_item.colortag_c20>.sp_template_item_inner::before {
    background-color: #fb2d5a;
}

.sp_template_popup_wrapper .sp_template_list>.sp_template_item.colortag_c21>.sp_template_item_inner::before {
    background-color: #2dfbd9;
}

.sp_template_popup_wrapper .sp_template_list>.sp_template_item.colortag_c22>.sp_template_item_inner::before {
    background-color: #fbdc2d;
}

.sp_template_popup_wrapper .sp_template_list>.sp_template_item.colortag_c23>.sp_template_item_inner::before {
    background-color: #2d53fb;
}

.sp_template_popup_wrapper .sp_template_list>.sp_template_item.colortag_c24>.sp_template_item_inner::before {
    background-color: #90fb2d;
}

.sp_template_popup_wrapper .sp_template_list>.sp_template_item.colortag_c25>.sp_template_item_inner::before {
    background-color: #fba22d;
}

.sp_template_popup_wrapper .sp_template_list>.sp_template_item.colortag_c26>.sp_template_item_inner::before {
    background-color: #7a480f;
}

.sp_template_popup_wrapper .sp_template_list>.sp_template_item.colortag_c27>.sp_template_item_inner::before {
    background-color: #0f7a56;
}

.sp_template_popup_wrapper .sp_template_list>.sp_template_item.colortag_c28>.sp_template_item_inner::before {
    background-color: #760f7a;
}

.sp_template_popup_wrapper .sp_template_list>.sp_template_item.colortag_c29>.sp_template_item_inner::before {
    background-color: #110f7a;
}

.sp_template_popup_wrapper .sp_template_list>.sp_template_item.colortag_c30>.sp_template_item_inner::before {
    background-color: #7a540f;
}

.sp_template_popup_wrapper .sp_template_list>.sp_template_item.colortag_c31>.sp_template_item_inner::before {
    background-color: #7a0f0f;
}

.sp_template_popup_wrapper .sp_template_list>.sp_template_item.colortag_c32>.sp_template_item_inner::before {
    background-color: #1045a8;
}

.sp_template_popup_wrapper .sp_template_list>.sp_template_item.colortag_c33>.sp_template_item_inner::before {
    background-color: #a1bb10;
}

.sp_template_popup_wrapper .sp_template_list>.sp_template_item.colortag_c34>.sp_template_item_inner::before {
    background-color: #10bb1e;
}

.sp_template_popup_wrapper .sp_template_list>.sp_template_item.colortag_c35>.sp_template_item_inner::before {
    background-color: #bb1082;
}

.sp_template_popup_wrapper .sp_template_list>.sp_template_item.colortag_c36>.sp_template_item_inner::before {
    background-color: #bb1010;
}

.sp_template_popup_wrapper .sp_template_list>.sp_template_item.colortag_c37>.sp_template_item_inner::before {
    background-color: #bb6b10;
}

.sp_template_popup_wrapper .sp_template_list>.sp_template_item.colortag_c38>.sp_template_item_inner::before {
    background-color: #bb1010;
}

.sp_template_popup_wrapper .sp_template_list>.sp_template_item.colortag_c39>.sp_template_item_inner::before {
    background-color: #1013bb;
}

.sp_template_popup_wrapper .sp_template_list>.sp_template_item.colortag_c40>.sp_template_item_inner::before {
    background-color: #10b0bb;
}

.sp_template_popup_wrapper .sp_template_list>.sp_template_item.colortag_c41>.sp_template_item_inner::before {
    background-color: #3c9427;
}

.sp_template_popup_wrapper .sp_template_list>.sp_template_item.colortag_c42>.sp_template_item_inner::before {
    background-color: #7b2794;
}

.sp_template_popup_wrapper .sp_template_list>.sp_template_item.colortag_c43>.sp_template_item_inner::before {
    background-color: #942727;
}

.sp_template_popup_wrapper .sp_template_list>.sp_template_item.colortag_c44>.sp_template_item_inner::before {
    background-color: #944f27;
}

.sp_template_popup_wrapper .sp_template_list>.sp_template_item.colortag_c45>.sp_template_item_inner::before {
    background-color: #482794;
}

.sp_template_popup_wrapper .sp_template_list>.sp_template_item.colortag_c46>.sp_template_item_inner::before {
    background-color: #27948e;
}

.sp_template_popup_wrapper .sp_template_list>.sp_template_item.colortag_c47>.sp_template_item_inner::before {
    background-color: #3c9427;
}

.sp_template_popup_wrapper .sp_template_list>.sp_template_item.colortag_c48>.sp_template_item_inner::before {
    background-color: #942727;
}

.sp_template_popup_wrapper .sp_template_list>.sp_template_item.colortag_c49>.sp_template_item_inner::before {
    background-color: #948027;
}

.sp_template_popup_wrapper .sp_template_list>.sp_template_item.colortag_c50>.sp_template_item_inner::before {
    background-color: #942794;
}

/* for 86 mockups end */


.sp_info_banner {
    margin-bottom: 40px;
}

.sp_info_banner>.sp_info_banner_inner {
    display: inline-flex;
    align-items: center;
    background-color: #FFE3E0;
    border-bottom: 1px solid #FF3E2C;
    font-size: 14px;
    padding: 12px 20px 12px 12px;
    font-weight: 500;
    box-shadow: 0px 0px 40px rgb(0, 0, 0, 0.04);
    border-radius: 5px;
    color: var(--color-heading);
    font-weight: 600;
}

.sp_info_banner>.sp_info_banner_inner>.sp_ibi_icon {
    width: 30px;
    height: 30px;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    background-color: #FF3E2C;
}

.sp_info_banner>.sp_info_banner_inner a {
    margin: 0 3px;
}

.sp_logo_list .sp_info_banner {
    display: none;
}


.sp_template_heading {
    margin-bottom: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.sp_template_heading>h3 {
    display: inline-flex;
    margin: 0;
    color: var(--color-heading);
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    position: relative;
    margin-left: 50px;
}

.sp_template_heading .sp_back_arrow {
    cursor: pointer;
    width: 25px;
    height: 25px;
    position: absolute;
    left: 0;
    top: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-transform: translateY(-52%);
    -moz-transform: translateY(-52%);
    transform: translateY(-52%);
}

/* .sp_logo_list .sp_template_heading .sp_back_arrow{
    top: 1px;
} */
.sp_template_heading .sp_back_arrow>svg {
    width: 20px;
    height: 20px;
}

.sp_template_heading .sp_back_arrow>svg path {
    fill: var(--main-color);
}

.sp_template_heading .sp_custom_dd_wrapper {
    display: none;
}

.sp_template_heading .sp_custom_dd_wrapper>.sp_cusdd_toggle {
    min-width: 220px;
}

.sp_template_heading .sp_custom_dd_wrapper>.sp_cusdd_dropdown {
    width: 100%;
}

.sp_page_title .sp_back_arrow {
    cursor: pointer;
    width: 25px;
    height: 25px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    margin-top: -2px;
}

.sp_page_title .sp_back_arrow>svg {
    width: 20px;
    height: 20px;
}

.sp_page_title .sp_back_arrow>svg path {
    fill: var(--main-color);
}


/* packaging setup popup start */
.sp_pack_setup_popup_wrapper {
    position: fixed;
    top: 63px;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 60px 80px;
    background-color: #f8fafd;
    z-index: 999;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateY(10%);
    -moz-transform: translateY(10%);
    transform: translateY(10%);
}

.pack_popup_open {
    overflow: hidden;
}

.pack_popup_open .sp_pack_setup_popup_wrapper {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    transform: translateY(0);
}

/* packaging setup popup end */


/* logo filter dropdown start */
.sp_template_popup_wrapper.sp_logo_list .sp_custom_dd_wrapper {
    display: block;
}

.sp_template_popup_wrapper.sp_logo_list .sp_custom_dd_wrapper>.sp_cusdd_toggle {
    white-space: nowrap;
    display: none;
}

.sp_template_popup_wrapper.sp_logo_list .sp_custom_dd_wrapper>.sp_cusdd_dropdown {
    position: relative;
    top: auto;
    left: auto;
    overflow: visible;
    max-height: inherit;
    border: none;
    transform: none;
    margin-bottom: 30px;
}

.temp_popup_open .sp_template_popup_wrapper.sp_logo_list .sp_custom_dd_wrapper>.sp_cusdd_dropdown {
    opacity: 1;
    visibility: visible;
}

.sp_template_popup_wrapper.sp_logo_list .sp_custom_dd_wrapper>.sp_cusdd_dropdown>ul>li {
    display: inline-block;
    border-radius: 50px;
    padding: 8px 15px 6px;
    margin-bottom: 10px;
    margin-right: 8px;
}

.sp_template_popup_wrapper.sp_logo_list .sp_custom_dd_wrapper>.sp_cusdd_dropdown>ul>li.active {
    color: #ffffff;
    background-color: var(--main-color);
}

/* logo filter dropdown end */


.sp_template_list {
    /* display: flex;
    flex-wrap: wrap;
    margin: 0 -10px;
    margin-bottom: 30px; */
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(18%, 1fr));
    grid-gap: 20px;
}

.sp_template_list>.sp_template_item {
    /* width: 14.28%;
    padding: 0 10px;
    margin-bottom: 20px; */
}

/* @media(max-width: 1600px){ .sp_template_list > .sp_template_item{ width: 14.28%; }}
@media(max-width: 1440px){ .sp_template_list > .sp_template_item{ width: 16.666%; }}
@media(max-width: 1366px){ .sp_template_list > .sp_template_item{ width: 20%; }}
@media(max-width: 768px){ .sp_template_list{justify-content: center;} .sp_template_list > .sp_template_item{ width: 33.333%; }}
@media(max-width: 480px){ .sp_template_list > .sp_template_item{ width: 50%; }} */


/* .sp_logo_list .sp_template_list > .sp_template_item{
    width: 25%;
}
@media(max-width: 1600px){ .sp_logo_list .sp_template_list > .sp_template_item{ width: 25%; }}
@media(max-width: 1440px){ .sp_logo_list .sp_template_list > .sp_template_item{ width: 25%; }}
@media(max-width: 1366px){ .sp_logo_list .sp_template_list > .sp_template_item{ width: 25%; }}
@media(max-width: 768px){ .sp_logo_list .sp_template_list > .sp_template_item{ width: 33.3333%; }}
@media(max-width: 480px){ .sp_logo_list .sp_template_list > .sp_template_item{ width: 100%; }}
 */

.sp_template_list>.sp_template_item>.sp_template_item_inner {
    border-radius: 8px;
    background-color: #ffffff;
    box-shadow: 0px 4px 34px 0px rgba(0, 0, 0, 0.03);
    /* min-height: 200px; */
    position: relative;
    margin: 0 auto;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

.sp_template_list>.sp_template_item>.sp_template_item_inner:hover {
    /* -webkit-transform: translateY(-5px);
    -moz-transform: translateY(-5px);
    transform: translateY(-5px); */
    box-shadow: 0px 8px 34px 0px rgba(0, 0, 0, 0.06);
}

.sp_logo_list .sp_template_list>.sp_template_item>.sp_template_item_inner {
    width: 100%;
    height: 120px;
}

.sp_logo_list .sp_template_heading .sp_search_wrapper {
    display: none;
}

.sp_template_list>.sp_template_item>.sp_template_item_inner>.sp_template_img {
    position: relative;
}

.sp_template_list>.sp_template_item>.sp_template_item_inner img {
    width: 100%;
    border-radius: 8px 8px 0 0;
    min-height: 150px;
    object-fit: contain;
}

.sp_pixi_template_popup_wrapper .sp_template_list>.sp_template_item>.sp_template_item_inner img {
    /* height: 180px;
    object-fit: contain; */

    height: auto;
    object-fit: cover;
    aspect-ratio: 1 / 1;
}

.sp_template_list>.sp_template_item>.sp_template_item_inner>.sp_template_img>.sp_camp_img_overlay {
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    bottom: 20px;
    border-radius: 8px 8px 0 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.sp_template_list>.sp_template_item>.sp_template_item_inner .canvas-container {
    position: relative !important;
    top: auto;
    left: auto;
    border-radius: 8px;
    /* -webkit-transform: translate(-50%,-50%) scale(0.4);
    -moz-transform: translate(-50%,-50%) scale(0.4);
    transform: translate(-50%,-50%) scale(0.4); */
    width: 100% !important;
    height: 200px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sp_template_list>.sp_template_item>.sp_template_item_inner canvas {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    height: auto !important;
}

.sp_template_list>.sp_template_item>.sp_template_item_inner canvas.upper-canvas {
    display: none;
}

.sp_template_list>.sp_template_item>.sp_template_item_inner .sp_templete_overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 8px 8px 0 0;
    background-color: rgba(30, 31, 40, 0.60);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.sp_template_list>.sp_template_item>.sp_template_item_inner:hover .sp_templete_overlay {
    opacity: 1;
    visibility: visible;
}

.sp_template_list>.sp_template_item>.sp_template_item_inner .sp_templete_overlay .sp_btn {
    height: 36px;
    line-height: 38px;
    font-size: 14px;
}

.sp_template_list>.sp_template_item>.sp_template_item_inner .sp_templete_overlay>svg {
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    transform: scale(0.8);
}

.sp_template_list>.sp_template_item>.sp_template_item_inner .sp_templete_overlay>p {
    font-size: 14px;
}

.sp_template_list>.sp_template_item.sp_temp_mockup>.sp_template_item_inner {
    height: auto;
}

.sp_template_list>.sp_template_item.sp_temp_mockup>.sp_template_item_inner>.sp_template_details {
    padding: 20px;
    color: #707b91;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    font-size: 14px;
}

.sp_campaign_list.spj_shared_design_list>.sp_campaign_item>.sp_campaign_inner>.sp_camp_img>.sp_camp_overlay,
.sp_campaign_list.load_assets_preview_body>.sp_campaign_item>.sp_campaign_inner>.sp_camp_img>.sp_camp_overlay,
.sp_campaign_list.load_sets_temp_list>.sp_campaign_item>.sp_campaign_inner>.sp_camp_img>.sp_camp_overlay,
.sp_campaign_list.load_dfysets_body>.sp_campaign_item>.sp_campaign_inner>.sp_camp_img>.sp_camp_overlay,
.sp_template_list.load_bundletemp_list>.sp_template_item>.sp_template_item_inner>.sp_template_img>.sp_templete_overlay,
.sp_campaign_list.load_themes_list>.sp_campaign_item>.sp_campaign_inner>.sp_camp_img>.sp_camp_overlay,
.sp_template_list.dfy_template_list>.sp_template_item>.sp_template_item_inner .sp_templete_overlay,
.sp_template_list.load_favorite_list>.sp_template_item>.sp_template_item_inner .sp_templete_overlay,
.sp_template_list.dfy_animation_template_list>.sp_template_item>.sp_template_item_inner .sp_templete_overlay {
    flex-direction: column;
    gap: 15px;
}

.sp_campaign_list.spj_shared_design_list>.sp_campaign_item>.sp_campaign_inner>.sp_camp_img>.sp_camp_overlay .sp_btn.sp_preview_image,
.sp_campaign_list.load_assets_preview_body>.sp_campaign_item>.sp_campaign_inner>.sp_camp_img>.sp_camp_overlay .sp_btn.sp_preview_image,
/* .sp_campaign_list.load_sets_temp_list > .sp_campaign_item > .sp_campaign_inner > .sp_camp_img > .sp_camp_overlay .sp_btn.sp_sets_preview,
.sp_campaign_list.load_dfysets_body > .sp_campaign_item > .sp_campaign_inner > .sp_camp_img > .sp_camp_overlay .sp_btn.sp_sets_preview, */
.sp_template_list.load_bundletemp_list>.sp_template_item>.sp_template_item_inner>.sp_template_img>.sp_templete_overlay .sp_btn.view_dfy_template,
.sp_campaign_list.load_themes_list>.sp_campaign_item>.sp_campaign_inner>.sp_camp_img>.sp_camp_overlay .sp_btn.view_dfy_template,
.sp_template_list.dfy_template_list>.sp_template_item>.sp_template_item_inner .sp_templete_overlay .sp_btn.view_dfy_template,
.sp_template_list.load_favorite_list>.sp_template_item>.sp_template_item_inner .sp_templete_overlay .sp_btn.view_dfy_template,
.sp_template_list.dfy_animation_template_list>.sp_template_item>.sp_template_item_inner .sp_templete_overlay .sp_btn.sp_perview_anim {
    /* margin-bottom: 15px; */
    background-color: #ffffff;
    color: var(--main-color);
}

.sp_btn_white {
    background-color: #ffffff !important;
    color: var(--main-color) !important;
}

.sp_template_uses_count {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 52px;
    height: 26px;
    background-color: #FFFFFF;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.06), 0px 2px 6px rgba(0, 0, 0, 0.22);
    border-radius: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-weight: 600;
    z-index: 1;
}

.sp_logo_var_item {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
}

.sp_logo_var_item>.sp_lvi_inner {
    display: flex;
    align-items: center;
}

.sp_template_list>.sp_template_item>.sp_template_item_inner .sp_logo_var_item>.sp_lvi_inner>img {
    width: 60px;
    height: 60px;
    border-radius: 0;
    min-height: inherit;
    margin-right: 10px;
}

.sp_logo_var_item>.sp_lvi_inner>p {
    margin: 0;
    font-weight: 900;
    font-size: 22px;
    color: #3c3c3c;
}

.ed_element_property {
    display: flex;
    flex-direction: column;
}

.ed_property_widget_title {
    text-align: center;
    padding: 26px 10px;
    /* border-bottom: 1px solid #f2f3f6; */
    margin: 0;
    font-size: 16px;
    color: #bbc2ef;
    font-weight: 400;
    flex: none;
    line-height: inherit;
    /* background-color: #353b5b; */
}

.ed_element_property>.ed_property_widget_body {
    padding: 30px;
    flex: 1;
    overflow: auto;
    padding-top: 0;
}

.ed_element_background {
    display: flex;
    flex-direction: column;
}

#icon_list_tab>.sp_editor_sidebar_inner>.tab-content {
    flex: 1;
    overflow: auto;
    padding-top: 0;
}

.ed_element_background>.tab-content {
    padding: 30px;
    flex: 1;
    overflow: auto;
    padding-top: 0;
}

.ed_element_background .tab-content .tab-content {
    padding: 20px 0;
    padding-top: 0;
}

.ed_element_hide {
    display: none;
}

.ed_element_background.ed_element_hide {
    display: flex;
}

.ed_element_upload {
    display: flex;
    flex-direction: column;
}

.ed_element_upload .ed_element_upload_body {
    padding: 30px;
    flex: 1;
    overflow: auto;
    padding-top: 0;
}

.ed_element_upload .tab-content {
    padding: 20px 0;
    padding-top: 0;
}

.ed_sidebar_input {
    margin-bottom: 20px;
    position: relative;
}

.ed_sidebar_input>label {
    color: #dadada;
    margin: 0;
    margin-bottom: 12px;
    display: block;
    font-weight: 400;
    font-size: 14px;
}

.ed_sidebar_input>label.ed_label_flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ed_sidebar_input>label .sp_switch>label::after {
    top: -4px;
}

.ed_sidebar_input>label .sp_info_tooltip {
    border-color: #dadada;
}

.ed_sidebar_input>label .sp_info_tooltip>svg path {
    fill: #dadada;
}

.sp_editor_sidebar .sp_switch>label::before {
    background-color: #525b94;
}

.sp_editor_sidebar .sp_switch>label::after {
    background-color: #969ed0;
}

.ed_sidebar_input .form-control {
    border: 1px solid #555e8d;
    border-radius: 10px;
    width: 100%;
    height: 74px;
    padding: 0 30px;
    background-color: #353b5b;
    outline: none;
    color: var(--color-heading);
    font-size: 16px;
    box-shadow: none;
}

.sp_editor_sidebar .ed_sidebar_input .form-control {
    height: 44px;
    border-radius: 4px;
    color: #ffffff;
    padding: 0 20px;
    font-size: 14px;
}

.sp_editor_sidebar .ed_sidebar_input>textarea.form-control {
    height: auto;
    padding: 20px;
    resize: vertical;
}

.edp_layer_option_btn>ul,
.edp_text_option>ul {
    /* display: flex;
    flex-wrap: wrap; */
    list-style: none;
    padding: 0;
    margin: 0;
}

.edp_layer_option_btn>ul>li,
.edp_text_option>ul>li {
    margin-right: 0px;
    margin-bottom: 5px;
    display: inline-block;
    vertical-align: middle;
}

.edp_layer_option_btn>ul>li.delete_layer_li,
.edp_text_option>ul>li.delete_layer_li {
    display: block;
}

.edp_layer_option_btn>ul>li>a,
.edp_text_option>ul>li>a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 32px;
    border-radius: 3px;
    border: 1px solid #3b436d;
    cursor: pointer;
    color: #bbc2ef;
    font-size: 18px;
    font-weight: 600;
    background-color: #353b5b;
}

.edp_layer_option_btn>ul>li>a:hover,
.edp_text_option>ul>li>a:hover {
    border-color: #ffffff;
    color: #ffffff;
}

.edp_layer_option_btn>ul>li>a:hover svg path,
.edp_text_option>ul>li>a:hover svg path {
    fill: #ffffff;
}

.edp_layer_option_btn>ul>li>a.active,
.edp_text_option>ul>li>a.active {
    background-color: var(--main-color);
    border-color: var(--main-color);
    color: #ffffff;
}

.edp_layer_option_btn>ul>li>a.active svg path,
.edp_text_option>ul>li>a.active svg path {
    fill: #ffffff;
}

.edp_layer_option_btn>ul>li>a>img,
.edp_text_option>ul>li>a>img {
    max-width: 15px;
    max-height: 15px;
}

.ed_sidebar_wrapper .ed_radio>label {
    color: #545454;
    font-weight: 600;
}

.ed_sidebar_input.edp_color .ed_property_body {
    max-height: 300px;
    overflow: auto;
}

.edp_layer_option_btn>ul>li>a.ed_delete_layer {
    width: 85px;
    background-color: #F44336;
    margin-top: 15px;
    font-size: 14px;
    font-weight: 400;
    color: #fff;
}

.edp_layer_option_btn>ul>li>a.ed_delete_layer:hover {
    border-color: #F44336;
}

.edp_layer_option_btn>ul>li>a.ed_delete_layer>svg {
    margin-right: 5px;
}

.edp_layer_option_btn>ul>li>a.ed_delete_layer>svg path {
    fill: #ffffff;
}

.edp_layer_option_btn>ul>li>a.group_ungroup_ops .sp_svg_ungroup,
.edp_layer_option_btn>ul>li>a.ungroup_selection .sp_svg_ungroup {
    display: none;
}

.edp_layer_option_btn>ul>li>a.group_ungroup_ops.active .sp_svg_ungroup,
.edp_layer_option_btn>ul>li>a.ungroup_selection.active .sp_svg_ungroup {
    display: block;
}

.edp_layer_option_btn>ul>li>a.group_ungroup_ops.active .sp_svg_group,
.edp_layer_option_btn>ul>li>a.ungroup_selection.active .sp_svg_group {
    display: none;
}

.edp_layer_option_btn>ul>li>a.ed_lock_layer .sp_svg_unlock {
    display: none;
}

.edp_layer_option_btn>ul>li>a.ed_lock_layer.active .sp_svg_unlock {
    display: block;
}

.edp_layer_option_btn>ul>li>a.ed_lock_layer.active .sp_svg_lock {
    display: none;
}

.edp_layer_option_btn .tooltip-inner {
    /* white-space: nowrap; */
    max-width: 140px;
}

.sp_editor_sidebar .ed_radio_list>.ed_radio {
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
}

.sp_editor_sidebar .ed_radio>input {
    position: absolute;
    left: -999999px;
    opacity: 0;
}

.sp_editor_sidebar .ed_radio>label {
    font-weight: 400;
    font-size: 14px;
    margin: 0;
    cursor: pointer;
    position: relative;
    vertical-align: middle;
    height: 16px;
    display: flex;
    align-items: center;
}

.sp_editor_sidebar .ed_radio>label::before {
    content: "";
    width: 16px;
    height: 16px;
    border-radius: 20px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
    border: 1px solid #7f87bd;
}

.sp_editor_sidebar .ed_radio>label::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 10px;
    height: 10px;
    border-radius: 15px;
    background-color: var(--main-color);
    opacity: 0;
    visibility: hidden;
}

.sp_editor_sidebar .ed_radio>input:checked~label {
    color: #ffffff;
}

.sp_editor_sidebar .ed_radio>input:checked~label::after {
    opacity: 1;
    visibility: visible;
}

/* DFY template start */
.sp_dfytemp_header {
    background-color: #f0f3f8;
    padding: 40px 20px;
    text-align: center;
    border-radius: 10px;
    margin-bottom: 40px;
    position: relative;
    z-index: 12;
}

.sp_dfytemp_header>.sp_dfytemp_inner {
    max-width: 626px;
    margin: 0 auto;
}

.sp_dfytemp_header>.sp_dfytemp_inner h3 {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 5px;
}

.sp_dfytemp_header>.sp_dfytemp_inner p {
    margin: 0;
    color: #707b91;
    font-size: 16px;
    margin-bottom: 30px;
}

.sp_dfytemp_header_search {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.sp_dfytemp_header_search>.sp_custom_dd_wrapper {
    flex: none;
    width: 192px;
    margin-right: 1px;
}

.sp_dfytemp_header_search>.sp_custom_dd_wrapper>.sp_cusdd_toggle {
    border-radius: 10px 0 0 10px;
}

.sp_dfytemp_header_search>.sp_custom_dd_wrapper.open>.sp_cusdd_toggle {
    border-radius: 10px 0 0 0px;
}

.sp_dfytemp_header_search>.sp_search_wrapper {
    flex: 1;
}

.sp_dfytemp_header_search>.sp_search_wrapper>input {
    border-radius: 0;
    background-color: #ffffff;
    border: none;
}

.sp_dfytemp_header_search>.sp_btn {
    flex: none;
    width: 120px;
    border-radius: 0 10px 10px 0;
}

.sp_dfytemp_header .sp_search_wrapper>.sp_search_icon {
    cursor: default;
    background-color: transparent;
}

.sp_dfytemp_filter_wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
    position: relative;
    z-index: 11;
}

.sp_dfytemp_filter_wrapper>h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.sp_dfytemp_filter_wrapper>.sp_dfytemp_filter {
    position: relative;
}

.sp_dfytemp_filter_wrapper>.sp_dfytemp_filter>.sp_dfytemp_filter_toggle {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-body);
    text-transform: uppercase;
    cursor: pointer;
}

.sp_dfytemp_filter_wrapper>.sp_dfytemp_filter>.sp_dfytemp_filter_toggle:hover {
    color: var(--main-color);
}

.sp_dfytemp_filter_wrapper>.sp_dfytemp_filter>.sp_dfytemp_filter_toggle>svg {
    margin-right: 5px;
    width: 14px;
    height: auto;
    margin-top: -3px;
}

.sp_dfytemp_filter_wrapper>.sp_dfytemp_filter>.sp_dfytemp_filter_toggle>svg path {
    fill: var(--color-body);
}

.sp_dfytemp_filter_wrapper>.sp_dfytemp_filter>.sp_dfytemp_filter_toggle:hover>svg path {
    fill: var(--main-color)
}

.sp_dfytemp_filter_wrapper>.sp_dfytemp_filter>.sp_dfytemp_filter_dd {
    /* position: absolute;
    top: 100%;
    right: 0;
    padding: 20px;
    background-color: #ffffff;
    box-shadow: 0px 0px 34px 0px rgba(0, 0, 0, 0.04);
    border-radius: 5px;
    z-index: 1;
    margin-top: 5px;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    transition: all 0.2s;
    -webkit-transform: translateY(-10px);
    -moz-transform: translateY(-10px);
    transform: translateY(-10px); */
}

.sp_dfytemp_filter_wrapper>.sp_dfytemp_filter.open>.sp_dfytemp_filter_dd {
    /* opacity: 1;
    visibility: visible;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    transform: translateY(0px); */
}

.sp_dfytemp_filter_wrapper>.sp_dfytemp_filter>.sp_dfytemp_filter_dd>ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sp_dfytemp_filter_wrapper>.sp_dfytemp_filter>.sp_dfytemp_filter_dd>ul>li {
    display: inline-block;
    cursor: pointer;
    padding: 5px 10px 4px;
    font-size: 14px;
    border-radius: 15px;
    position: relative;
}

.sp_dfytemp_filter_wrapper>.sp_dfytemp_filter>.sp_dfytemp_filter_dd>ul>li:hover {
    color: var(--main-color);
}

.sp_dfytemp_filter_wrapper>.sp_dfytemp_filter>.sp_dfytemp_filter_dd>ul>li.active {
    color: #ffffff;
    background-color: var(--main-color);
}

.sp_dfytemp_filter_wrapper>.sp_dfytemp_filter>.sp_dfytemp_filter_dd>ul>li.sp_dd_hover_link:after {
    content: "";
    display: inline-block;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    vertical-align: middle;
    border-top: 3px solid var(--color-body);
}

.sp_dfytemp_filter_wrapper>.sp_dfytemp_filter>.sp_dfytemp_filter_dd>ul>li.active.sp_dd_hover_link:after {
    border-top: 3px solid #ffffff;
}

.sp_filter_tab_wrapper {
    text-align: right;
}

.sp_filter_tab_wrapper>ul {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
}

.sp_filter_tab_wrapper>ul>li {
    display: inline-block;
    cursor: pointer;
    padding: 5px 10px 4px;
    font-size: 14px;
    border-radius: 15px;
}

.sp_filter_tab_wrapper>ul>li:hover {
    color: var(--main-color);
}

.sp_filter_tab_wrapper>ul>li.active {
    color: #ffffff;
    background-color: var(--main-color);
}

.sp_filter_tab_wrapper>ul>li>a {
    color: var(--color-body);
}

.sp_filter_tab_wrapper>ul>li>a:hover {
    color: var(--main-color);
}

.sp_filter_tab_wrapper>ul>li.active>a {
    color: #ffffff;
}

.sp_filter_tab_wrapper .sp_input_wrapper {
    display: inline-block;
    margin: 0 5px;
}

.sp_filter_tab_wrapper .sp_input_wrapper .sp_input {
    height: 50px;
    border-radius: 6px;
    padding: 15px;
    font-size: 14px;
}

/* .sp_dfytemp_wrapper .sp_template_list > .sp_template_item{
    width: 14.28%;
}
@media(max-width: 1600px){ .sp_dfytemp_wrapper .sp_template_list > .sp_template_item{ width: 14.28%; }}
@media(max-width: 1440px){ .sp_dfytemp_wrapper .sp_template_list > .sp_template_item{ width: 16.666%; }}
@media(max-width: 1366px){ .sp_dfytemp_wrapper .sp_template_list > .sp_template_item{ width: 20%; }}
@media(max-width: 768px){ .sp_dfytemp_wrapper .sp_template_list > .sp_template_item{ width: 33.333%; }}
@media(max-width: 480px){ .sp_dfytemp_wrapper .sp_template_list > .sp_template_item{ width: 50%; }} */

.sp_dfytemp_wrapper .sp_template_list>.sp_template_item>.sp_template_item_inner>.sp_template_details {
    border-top: 1px solid #f3f3f9;
    padding: 15px;
}


.sp_template_list.load_bundletemp_list>.sp_template_item.sp_temp_mockup>.sp_template_item_inner>.sp_template_details,
.sp_section .sp_template_list.dfy_template_list>.sp_template_item>.sp_template_item_inner>.sp_template_details,
.sp_dfytemp_wrapper .sp_template_list.dfy_template_list>.sp_template_item>.sp_template_item_inner>.sp_template_details {
    display: none;
}

.sp_template_list.load_bundletemp_list>.sp_template_item>.sp_template_item_inner:hover .sp_templete_overlay,
.sp_template_list.dfy_template_list>.sp_template_item>.sp_template_item_inner .sp_templete_overlay {
    border-radius: 8px;
}

.sp_dfytemp_wrapper .sp_campaign_list>.sp_campaign_item.sp_temp_add,
.sp_dfytemp_wrapper .sp_template_list>.sp_template_item.sp_temp_add {
    cursor: pointer;
}

.sp_dfytemp_wrapper .sp_campaign_list>.sp_campaign_item.sp_temp_add>.sp_campaign_inner,
.sp_dfytemp_wrapper .sp_template_list>.sp_template_item.sp_temp_add>.sp_template_item_inner {
    position: relative;
    height: 100%;
}

.sp_dfytemp_wrapper .sp_campaign_list>.sp_campaign_item.sp_temp_add>.sp_campaign_inner>.sp_camp_img,
.sp_dfytemp_wrapper .sp_template_list>.sp_template_item.sp_temp_add>.sp_template_item_inner>.sp_template_img {
    position: initial;
}

.sp_dfytemp_wrapper .sp_campaign_list>.sp_campaign_item.sp_temp_add>.sp_campaign_inner .sp_camp_overlay,
.sp_dfytemp_wrapper .sp_template_list>.sp_template_item.sp_temp_add>.sp_template_item_inner .sp_templete_overlay {
    opacity: 1;
    visibility: visible;
    background-color: #f0f3f7;
    flex-direction: column;
    border: 1px dashed #dce0e6;
    border-radius: 8px;
}

.sp_dfytemp_wrapper .sp_campaign_list>.sp_campaign_item.sp_temp_add:hover>.sp_campaign_inner .sp_camp_overlay,
.sp_dfytemp_wrapper .sp_template_list>.sp_template_item.sp_temp_add:hover>.sp_template_item_inner .sp_templete_overlay {
    border-color: var(--main-color);
}

.sp_dfytemp_wrapper .sp_campaign_list>.sp_campaign_item.sp_temp_add>.sp_campaign_inner>.sp_camp_detail,
.sp_dfytemp_wrapper .sp_template_list>.sp_template_item.sp_temp_add>.sp_template_item_inner>.sp_template_details {
    opacity: 0;
}

.sp_dfytemp_wrapper .sp_campaign_list>.sp_campaign_item.sp_temp_add>.sp_campaign_inner .sp_camp_overlay>p,
.sp_dfytemp_wrapper .sp_template_list>.sp_template_item.sp_temp_add>.sp_template_item_inner .sp_templete_overlay>p {
    margin: 0;
    margin-top: 15px;
    font-size: 14px;
}

.sp_dfytemp_wrapper .sp_campaign_list>.sp_campaign_item.sp_temp_add:hover>.sp_campaign_inner .sp_camp_overlay>p,
.sp_dfytemp_wrapper .sp_template_list>.sp_template_item.sp_temp_add:hover>.sp_template_item_inner .sp_templete_overlay>p {
    color: var(--main-color);
}

.sp_dfytemp_wrapper .sp_campaign_list>.sp_campaign_item.sp_temp_add:hover>.sp_campaign_inner .sp_camp_overlay>svg path#sfc_icon_bg,
.sp_dfytemp_wrapper .sp_template_list>.sp_template_item.sp_temp_add:hover>.sp_template_item_inner .sp_templete_overlay>svg path#sfc_icon_bg {
    fill: var(--main-color);
    opacity: 0.1;
}

.sp_dfytemp_wrapper .sp_campaign_list>.sp_campaign_item.sp_temp_add:hover>.sp_campaign_inner .sp_camp_overlay>svg path#sfc_icon_plus,
.sp_dfytemp_wrapper .sp_template_list>.sp_template_item.sp_temp_add:hover>.sp_template_item_inner .sp_templete_overlay>svg path#sfc_icon_plus {
    fill: var(--main-color);
}

.sp_my_designs .sp_dfytemp_header_search>.sp_search_wrapper>input {
    border-radius: 10px 0 0 10px;
}

/* DFY template end */

.sp_page_head_admin_temp {
    display: inline-flex;
    margin-left: 15px;
}

.sp_page_head_admin_temp>.sp_input_wrapper {
    margin-right: 15px;
    margin-bottom: 0;
}

.sp_page_head_admin_temp>.sp_input_wrapper>.sp_input {
    height: 44px;
    padding: 0 15px;
    border-radius: 5px;
    font-size: 13px;
    max-width: 200px;
}

.sp_page_head_admin_temp>.sp_input_wrapper.hasvalue>select.sp_input {
    padding-top: 0;
}

.sp_additional_info {
    padding: 10px 12.5px;
    border-top: 1px solid #eef3fb;
    display: none;
}

.sp_additional_info>p {
    margin: 0;
    font-size: 12px;
}

.sp_additional_info>p>span {
    color: var(--main-color);
    font-weight: 600;
}

/* pixi template popup start */
.sp_pixi_template_popup_wrapper {
    position: fixed;
    top: 63px;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 60px 80px;
    background-color: #f8fafd;
    z-index: 999;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateY(10%);
    -moz-transform: translateY(10%);
    transform: translateY(10%);
}

.pixi_temp_popup_open {
    overflow: hidden;
}

.pixi_temp_popup_open .sp_pixi_template_popup_wrapper {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    transform: translateY(0);
}

.sp_pixi_template_popup_wrapper>.sp_container {
    max-width: 1600px;
}

/* pixi template popup end */

/********************************************************************************************* 
7. templates end
*********************************************************************************************/

/********************************************************************************************* 
8. image editor start
*********************************************************************************************/
.sp_image_editor_wrapper {
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    bottom: 0;
    /* padding: 60px 0; */
    background-color: #F0F2F5;
    z-index: 10;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateY(10%);
    -moz-transform: translateY(10%);
    transform: translateY(10%);
    border: none;
    margin: 0;
    line-height: inherit;
    border-radius: 0;
}

.ieditor_popup_open .sp_image_editor_wrapper {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    transform: translateY(0);
}

.sp_editor_header_action>.sp_ieditor_header_btns {
    display: none;
}

.sp_editor_header_action>.sp_ieditor_header_btns>.sp_btn {
    margin-right: 10px;
    min-width: inherit;
}

.sp_editor_header_action>.sp_ieditor_header_btns>.sp_btn:last-child {
    margin-right: 0px;
}

.sp_editor_header_action>.sp_ieditor_header_btns>.sp_btn>svg {
    margin-right: 8px;
    margin-bottom: -1px;
}

.ieditor_popup_open .sp_editor_header_action>.sp_ieditor_header_btns {
    display: inline-flex;
}

.ieditor_popup_open .sp_editor_header_action>.sp_download_image {
    display: none;
}

.ieditor_popup_open .sp_editor_header_action>.sp_commoneditor_header_btns {
    display: none;
}


.sp_image_editor_wrapper>.sp_editor_wrapper {
    position: absolute;
    top: 0;
}

.sp_image_editor_wrapper .sp_editor_sidebar {
    top: 0px;
}

/* .sp_image_editor_wrapper .sp_logo_editor .sp_edpr_box{
    margin-top: 40px;
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
    width: 100%;
    max-width: 650px;
    height: auto;
}
.ed_canvas_holder{
    position: relative;
}
.sp_image_editor_wrapper .sp_logo_editor .sp_edpr_box .ed_canvas_wrapper,
.sp_image_editor_wrapper .sp_logo_editor .sp_edpr_box .ed_canvas_holder{
    margin: 0 auto;
    width: 100%;
    position: relative;
}
.sp_image_editor_wrapper .sp_logo_editor .sp_edpr_box .canvas-container{
    background-color: #ffffff;
    box-shadow: 0px 4px 34px 0px rgba(0, 0, 0, 0.03);
    position: relative !important;
    margin: 0 auto;
    width: 100%;
    max-width: 100%;
    height: auto !important;
    left: auto !important;
    top: auto !important;
    transform-origin: top;
}
.sp_image_editor_wrapper .sp_logo_editor .sp_edpr_box .canvas-container canvas{
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    vertical-align: middle;
    max-width: 100%;
}
.sp_image_editor_wrapper .sp_logo_editor .sp_edpr_box .canvas-container canvas.lower-canvas {
    position: absolute !important;
} */

/* .sp_image_editor_wrapper[data-type="blocks"] .sp_logo_editor .sp_edpr_box,
.sp_image_editor_wrapper[data-type="doodle"] .sp_logo_editor .sp_edpr_box,
.sp_image_editor_wrapper[data-type="illustration"] .sp_logo_editor .sp_edpr_box,
.sp_image_editor_wrapper[data-type="annotation"] .sp_logo_editor .sp_edpr_box,
.sp_image_editor_wrapper[data-type="package"] .sp_logo_editor .sp_edpr_box,
.sp_image_editor_wrapper[data-type="bundles"] .sp_logo_editor .sp_edpr_box,
.sp_image_editor_wrapper[data-type="dbundle"] .sp_logo_editor .sp_edpr_box,
.sp_image_editor_wrapper[data-type="cbundle"] .sp_logo_editor .sp_edpr_box,
.sp_image_editor_wrapper[data-type="custom_image"] .sp_logo_editor .sp_edpr_box,
.sp_image_editor_wrapper[data-type="social"] .sp_logo_editor .sp_edpr_box{
    max-width: 1200px;
} */

/* main editor canvas holder start */
.sp_editor_wrapper {
    text-align: center;
}

.sp_editor_wrapper .ed_canvas_holder {
    margin: 30px auto;
    position: relative;
    max-width: 1200px;
    display: inline-block;
    transform-origin: top left;
}

/* .sp_editor_wrapper .ed_canvas_holder{
    position: fixed;
    top: 134px;
    right: 20px;
    bottom: 20px;
    left: 470px;
    overflow: auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    transition: all 0.3s;
}
.sp_image_editor_wrapper .sp_editor_wrapper .ed_canvas_holder{
    top: 84px;
}
.show_preview .sp_editor_wrapper .ed_canvas_holder,
.sp_editor_wrapper.close_sidebar .ed_canvas_holder{
    left: 20px !important;
} */
.sp_editor_wrapper .ed_canvas_holder {
    transform-origin: top center;
}

.sp_editor_wrapper .ed_canvas_holder>.canvas-container {
    margin: 0 auto;
    width: 100%;
    max-width: 100%;
    height: auto !important;
    left: auto !important;
    top: auto !important;
    transform-origin: top center;
    position: relative !important;
    background-image: url(data:image/gif;base64,R0lGODlhCgAKAIAAAOLi4v///yH5BAAHAP8ALAAAAAAKAAoAAAIRhB2ZhxoM3GMSykqd1VltzxQAOw==);
    box-shadow: 0px 0px 0px 1px #e2e2e2;
}

.sp_editor_wrapper .ed_canvas_holder>.canvas-container>canvas {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    vertical-align: middle;
}

.sp_editor_wrapper .ed_canvas_holder>.canvas-container>canvas.lower-canvas {
    position: absolute !important;
    /* background-color: #ffffff; */
    /* background: rgba(0,0,0,0) url(data:image/gif;base64,R0lGODlhJAAkAIAAAP///83NzSH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMwNjcgNzkuMTU3NzQ3LCAyMDE1LzAzLzMwLTIzOjQwOjQyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxNSAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpBMTM2REE2MjcxNkIxMUU1OTZEMUE3MjBFNzk0Qjg0MSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpBMTM2REE2MzcxNkIxMUU1OTZEMUE3MjBFNzk0Qjg0MSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkExMzZEQTYwNzE2QjExRTU5NkQxQTcyMEU3OTRCODQxIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkExMzZEQTYxNzE2QjExRTU5NkQxQTcyMEU3OTRCODQxIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Af/+/fz7+vn49/b19PPy8fDv7u3s6+rp6Ofm5eTj4uHg397d3Nva2djX1tXU09LR0M/OzczLysnIx8bFxMPCwcC/vr28u7q5uLe2tbSzsrGwr66trKuqqainpqWko6KhoJ+enZybmpmYl5aVlJOSkZCPjo2Mi4qJiIeGhYSDgoGAf359fHt6eXh3dnV0c3JxcG9ubWxramloZ2ZlZGNiYWBfXl1cW1pZWFdWVVRTUlFQT05NTEtKSUhHRkVEQ0JBQD8+PTw7Ojk4NzY1NDMyMTAvLi0sKyopKCcmJSQjIiEgHx4dHBsaGRgXFhUUExIREA8ODQwLCgkIBwYFBAMCAQAAIfkEAAAAAAAsAAAAACQAJAAAAlKMj3nA7d+UTLC+iYPdIE9ueRJYiQoJmRTqqAjbugYcyRrd2Xgu7/ZN+/l0OGGRGETuYMZk7/h0uoZRppLVtFaxV1SWu/V2SV9xmDwGldFnta0AADs=) repeat scroll left top;
    background-size: 15px; */
}

.sp_editor_wrapper .ed_canvas_holder>.canvas-container>canvas.lower-canvas#sp_canvas_logo {
    background: none;
    background-color: #ffffff;
}

.show_gdp_guidelines [data-type="publishable"] .sp_editor_wrapper .ed_canvas_holder>.canvas-container {
    box-shadow: none;
}

.show_gdp_guidelines [data-type="publishable"] .sp_editor_wrapper .ed_canvas_holder>.canvas-container::before {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border: 2px dashed #8B8B8B;
    pointer-events: none;
}

/* main editor canvas holder end */

.sp_show_grid .canvas-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: 10px 10px;
    background-image: linear-gradient(to right, #cecece 1px, transparent 1px), linear-gradient(to bottom, #cecece 1px, transparent 1px);
    background-position: 0 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.5;
}

/* colorPicker start */
.ed_colorPicker_wrapper {
    width: 125px;
    height: 40px;
    display: inline-flex;
    margin-bottom: 10px;
    margin-right: 10px;
    position: relative;
    background-color: #353b5b;
    border: 1px solid #555e8d;
    border-radius: 3px;
    align-items: center;
    justify-content: center;
}

.ed_colorPicker_wrapper:after {
    content: "";
    position: absolute;
    top: 9px;
    left: 8px;
    bottom: 4px;
    width: 20px;
    height: 20px;
    border-radius: 25px;
    display: block;
    background-color: red;
    background: rgba(0, 0, 0, 0) url('data:image/gif;base64,R0lGODlhJAAkAIAAAP///83NzSH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMwNjcgNzkuMTU3NzQ3LCAyMDE1LzAzLzMwLTIzOjQwOjQyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxNSAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpBMTM2REE2MjcxNkIxMUU1OTZEMUE3MjBFNzk0Qjg0MSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpBMTM2REE2MzcxNkIxMUU1OTZEMUE3MjBFNzk0Qjg0MSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkExMzZEQTYwNzE2QjExRTU5NkQxQTcyMEU3OTRCODQxIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkExMzZEQTYxNzE2QjExRTU5NkQxQTcyMEU3OTRCODQxIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Af/+/fz7+vn49/b19PPy8fDv7u3s6+rp6Ofm5eTj4uHg397d3Nva2djX1tXU09LR0M/OzczLysnIx8bFxMPCwcC/vr28u7q5uLe2tbSzsrGwr66trKuqqainpqWko6KhoJ+enZybmpmYl5aVlJOSkZCPjo2Mi4qJiIeGhYSDgoGAf359fHt6eXh3dnV0c3JxcG9ubWxramloZ2ZlZGNiYWBfXl1cW1pZWFdWVVRTUlFQT05NTEtKSUhHRkVEQ0JBQD8+PTw7Ojk4NzY1NDMyMTAvLi0sKyopKCcmJSQjIiEgHx4dHBsaGRgXFhUUExIREA8ODQwLCgkIBwYFBAMCAQAAIfkEAAAAAAAsAAAAACQAJAAAAlKMj3nA7d+UTLC+iYPdIE9ueRJYiQoJmRTqqAjbugYcyRrd2Xgu7/ZN+/l0OGGRGETuYMZk7/h0uoZRppLVtFaxV1SWu/V2SV9xmDwGldFnta0AADs=') repeat scroll left top;
    background-size: 50%;
    z-index: 0;
    pointer-events: none;
}

.ed_colorPicker_wrapper>input {
    width: 100%;
    height: 40px;
    border: none;
    font-size: 14px;
    outline: none;
    text-align: left;
    padding: 0 10px;
    z-index: 2;
    position: relative;
    background-color: transparent;
    padding-left: 38px;
    border-radius: 2px;
    color: #bbc2ef;
    text-transform: uppercase;
    cursor: pointer;
}

.ed_colorPicker_wrapper>span {
    position: absolute;
    top: 9px;
    left: 8px;
    bottom: 4px;
    width: 20px;
    height: 20px;
    z-index: 1;
    border-radius: 25px;
    pointer-events: none;
}

.sp_colorpicker_wrapper>span {
    position: absolute;
    left: 8px;
    bottom: 10px;
    width: 20px;
    height: 20px;
    z-index: 1;
    border-radius: 25px;
    pointer-events: none;
}

.sp_colorpicker_wrapper:after {
    content: "";
    position: absolute;
    left: 8px;
    bottom: 10px;
    width: 20px;
    height: 20px;
    border-radius: 25px;
    display: block;
    background-color: red;
    background: rgba(0, 0, 0, 0) url('data:image/gif;base64,R0lGODlhJAAkAIAAAP///83NzSH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMwNjcgNzkuMTU3NzQ3LCAyMDE1LzAzLzMwLTIzOjQwOjQyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxNSAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpBMTM2REE2MjcxNkIxMUU1OTZEMUE3MjBFNzk0Qjg0MSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpBMTM2REE2MzcxNkIxMUU1OTZEMUE3MjBFNzk0Qjg0MSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkExMzZEQTYwNzE2QjExRTU5NkQxQTcyMEU3OTRCODQxIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkExMzZEQTYxNzE2QjExRTU5NkQxQTcyMEU3OTRCODQxIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Af/+/fz7+vn49/b19PPy8fDv7u3s6+rp6Ofm5eTj4uHg397d3Nva2djX1tXU09LR0M/OzczLysnIx8bFxMPCwcC/vr28u7q5uLe2tbSzsrGwr66trKuqqainpqWko6KhoJ+enZybmpmYl5aVlJOSkZCPjo2Mi4qJiIeGhYSDgoGAf359fHt6eXh3dnV0c3JxcG9ubWxramloZ2ZlZGNiYWBfXl1cW1pZWFdWVVRTUlFQT05NTEtKSUhHRkVEQ0JBQD8+PTw7Ojk4NzY1NDMyMTAvLi0sKyopKCcmJSQjIiEgHx4dHBsaGRgXFhUUExIREA8ODQwLCgkIBwYFBAMCAQAAIfkEAAAAAAAsAAAAACQAJAAAAlKMj3nA7d+UTLC+iYPdIE9ueRJYiQoJmRTqqAjbugYcyRrd2Xgu7/ZN+/l0OGGRGETuYMZk7/h0uoZRppLVtFaxV1SWu/V2SV9xmDwGldFnta0AADs=') repeat scroll left top;
    background-size: 50%;
    z-index: 0;
    pointer-events: none;
}

.sp_colorpicker_wrapper>input {
    cursor: pointer;
    height: 40px !important;
}

.shape_color_list {
    max-height: 300px;
    overflow: auto;
}

.shape_color_list .sp_colorpicker_wrapper {
    width: 135px;
    height: 40px;
    margin-bottom: 10px;
    margin-right: 10px;
    position: relative;
    display: inline-flex;
}

.ed_colorPicker_wrapper.svg_mockup_hover_path .ed_svg_colorPicker,
.ed_colorPicker_wrapper.svg_hover_path .ed_svg_colorPicker {
    padding-top: 14px;
}

.ed_colorPicker_wrapper>p.ed_color_heading {
    position: absolute;
    top: 2px;
    left: 37px;
    font-size: 12px;
    margin: 0;
    font-weight: 400;
    color: #949fdc;
    display: none;
}

.ed_colorPicker_wrapper.svg_mockup_hover_path>p.ed_color_heading {
    display: block;
}

.colorpicker {
    animation: colorpicker 0.3s;
    transform-origin: top;
}

@keyframes colorpicker {
    0% {
        transform: translateY(-10px) rotateX(90deg);
    }

    100% {
        transform: translateY(0px) rotateX(0deg);
    }
}

.colorpicker-saturation {
    width: 160px;
    height: 160px;
}

.colorpicker-hue,
.colorpicker-alpha {
    width: 10px;
    height: 160px;
}

.colorpicker-saturation,
.colorpicker-alpha {
    background-size: cover;
}

.colorpicker-color,
.colorpicker-color div {
    height: 30px;
}

/* colorPicker end */
.edp_gradient_color .sp_range_slider,
.sp_package_editor .sp_range_slider,
.sp_image_editor_wrapper .sp_range_slider {
    flex-direction: row-reverse;
}

.sp_editor_wrapper.sp_logo_editor .edp_gradient_color .sp_range_slider::after,
.sp_package_editor .sp_range_slider::after,
.sp_image_editor_wrapper .sp_range_slider::after,
.ed_svg_shadow_enable .sp_range_slider::after {
    display: none;
}

.ed_element_background .edb_tab {
    flex: none;
    padding: 0 2px;
}

.edb_tab {
    margin-bottom: 30px;
}

.edb_tab>ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    background-color: #272b45;
    padding: 5px;
    border-radius: 50px;
}

.edb_tab>ul>li {
    flex: 1;
}

.edb_tab>ul>li>a {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    font-size: 13px;
    color: #7f87bd;
    position: relative;
    padding: 6px 5px 5px;
    border-radius: 50px;
    white-space: nowrap;
}

/* .edb_tab > ul > li > a::before{
    content: "";
    width: 20px;
    height: 20px;
    background-color: #353b5b;
    border-radius: 30px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
    border: 1px solid #555e8d;
    flex: none;
}
.edb_tab > ul > li > a::after{
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    width: 12px;
    height: 12px;
    border-radius: 20px;
    background-color: #ffffff;
    transform: scale(0);
    opacity: 0;
    transition: all 0.3s;
} */
/* .edb_tab > ul > li.active > a::before{
    border-color: #ffffff;
}
.edb_tab > ul > li.active > a::after{
    transform: scale(1);
    opacity: 1;
} */
.edb_tab>ul>li.active>a {
    background-color: var(--main-color);
    color: #ffffff;
}

.tab-content .edb_tab {
    padding: 0;
}

/* .tab-content .edb_tab > ul{
    background-color: transparent;
    border-bottom: 1px solid #f2f3f6;
}
.tab-content .edb_tab > ul > li > a{
    display: inline-flex;
    padding: 0;
    min-height: 50px;
}
.tab-content .edb_tab > ul > li.active > a{
    color: var(--main-color);
    box-shadow: inset 0px -2px 0px var(--main-color);
} */

.ed_solid_color_list {
    margin-bottom: 15px;
}

.ed_color_group {
    width: 100%;
    display: flex;
}

.ed_color_group>.ed_color_block {
    width: 24px;
    display: inline-flex;
    margin-bottom: 6px;
    margin-right: 6px;
    text-align: center;
}

.ed_color_group>.ed_color_block:last-child {
    margin-right: 0;
}

.ed_color_group>.ed_color_block>.ed_js_color {
    padding: 12px;
    cursor: pointer;
    transition: all 0.1s;
    border-radius: 3px;
    display: inline-block;
}

.ed_color_group>.ed_color_block>.ed_js_color.active,
.ed_color_group>.ed_color_block>.ed_js_color:hover {
    box-shadow: 0px 0px 0px 2px #ffffff;
}

.ed_color_group>.ed_color_block.transparent>.ed_js_color {
    background: rgba(0, 0, 0, 0) url(data:image/gif;base64,R0lGODlhJAAkAIAAAP///83NzSH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMwNjcgNzkuMTU3NzQ3LCAyMDE1LzAzLzMwLTIzOjQwOjQyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxNSAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpBMTM2REE2MjcxNkIxMUU1OTZEMUE3MjBFNzk0Qjg0MSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpBMTM2REE2MzcxNkIxMUU1OTZEMUE3MjBFNzk0Qjg0MSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkExMzZEQTYwNzE2QjExRTU5NkQxQTcyMEU3OTRCODQxIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkExMzZEQTYxNzE2QjExRTU5NkQxQTcyMEU3OTRCODQxIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Af/+/fz7+vn49/b19PPy8fDv7u3s6+rp6Ofm5eTj4uHg397d3Nva2djX1tXU09LR0M/OzczLysnIx8bFxMPCwcC/vr28u7q5uLe2tbSzsrGwr66trKuqqainpqWko6KhoJ+enZybmpmYl5aVlJOSkZCPjo2Mi4qJiIeGhYSDgoGAf359fHt6eXh3dnV0c3JxcG9ubWxramloZ2ZlZGNiYWBfXl1cW1pZWFdWVVRTUlFQT05NTEtKSUhHRkVEQ0JBQD8+PTw7Ojk4NzY1NDMyMTAvLi0sKyopKCcmJSQjIiEgHx4dHBsaGRgXFhUUExIREA8ODQwLCgkIBwYFBAMCAQAAIfkEAAAAAAAsAAAAACQAJAAAAlKMj3nA7d+UTLC+iYPdIE9ueRJYiQoJmRTqqAjbugYcyRrd2Xgu7/ZN+/l0OGGRGETuYMZk7/h0uoZRppLVtFaxV1SWu/V2SV9xmDwGldFnta0AADs=) repeat scroll left top;
    background-size: 10px;
}

.ed_gradient_list {
    margin-bottom: 15px;
    width: 100%;
}

.ed_gradient_list::after {
    content: "";
    display: table;
    width: 100%;
}

.ed_gradient_list>.ed_grad_color {
    padding: 25.8px;
    cursor: pointer;
    width: calc(25% - 4px);
    margin: 2px;
    float: left;
    border-radius: 5px;
}

/* element list start */
.ed_element_text {
    margin-bottom: 0;
    padding: 30px 20px;
    overflow: auto;
}

.ed_element_text>ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ed_element_text>ul>li {
    display: block;
    margin-right: 6px;
    margin-bottom: 9px;
}

.ed_element_text>ul>li>a {
    display: block;
    cursor: pointer;
    padding: 5px 20px;
    font-size: 16px;
    line-height: initial;
    color: #919aaa;
    border-radius: 5px;
}

.ed_element_text>ul>li>a>img {
    /* max-width: 40px; */
    max-height: 40px;
}

.ed_element_text>ul>li>a>p {
    color: inherit;
    margin: 0;
    font-size: 100%;
}

.ed_element_text>ul>li>a[data-family="Roboto"] {
    font-family: 'Roboto';
}

.ed_element_text>ul>li>a[data-family="Open Sans"] {
    font-family: 'Open Sans';
}

.ed_element_text>ul>li>a[data-family="Lato"] {
    font-family: 'Lato';
}

.ed_element_text>ul>li>a[data-family="Roboto Condensed"] {
    font-family: 'Roboto Condensed';
}

.ed_element_text>ul>li>a[data-family="Slabo 27px"] {
    font-family: 'Slabo 27px';
}

.ed_element_text>ul>li>a[data-family="Oswald"] {
    font-family: 'Oswald';
}

.ed_element_text>ul>li>a[data-family="Montserrat"] {
    font-family: 'Montserrat';
}

.ed_element_text>ul>li>a[data-family="Source Sans Pro"] {
    font-family: 'Source Sans Pro';
}

.ed_element_text>ul>li>a[data-family="Raleway"] {
    font-family: 'Raleway';
}

.ed_element_text>ul>li>a[data-family="PT Sans"] {
    font-family: 'PT Sans';
}

.ed_element_text>ul>li>a[data-family="Roboto Slab"] {
    font-family: 'Roboto Slab';
}

.ed_element_text>ul>li>a[data-family="Lora"] {
    font-family: 'Lora';
}

.ed_element_text>ul>li>a[data-family="Ubuntu"] {
    font-family: 'Ubuntu';
}

.ed_element_text>ul>li>a[data-family="Droid Sans"] {
    font-family: 'Droid Sans';
}

.ed_element_text>ul>li>a[data-family="Droid Serif"] {
    font-family: 'Droid Serif';
}

.ed_element_text>ul>li>a[data-family="Playfair Display"] {
    font-family: 'Playfair Display';
}

.ed_element_text>ul>li>a[data-family="PT Serif"] {
    font-family: 'PT Serif';
}

.ed_element_text>ul>li>a[data-family="Indie Flower"] {
    font-family: 'Indie Flower';
}

.ed_element_text>ul>li>a[data-family="Anton"] {
    font-family: 'Anton';
}

.ed_element_text>ul>li>a[data-family="Lobster"] {
    font-family: 'Lobster';
}

.ed_element_text>ul>li>a[data-family="Pacifico"] {
    font-family: 'Pacifico';
}

.ed_element_text>ul>li>a[data-family="Abril Fatface"] {
    font-family: 'Abril Fatface';
}

.ed_element_text>ul>li>a[data-family="Gloria Hallelujah"] {
    font-family: 'Gloria Hallelujah';
}

.ed_element_text>ul>li>a[data-family="Rubik"] {
    font-family: 'Rubik';
}

.ed_element_text>ul>li>a[data-family="Dancing Script"] {
    font-family: 'Dancing Script';
}

.ed_element_text>ul>li>a[data-textdecoration="underline"] {
    text-decoration: underline;
}

.ed_element_text>ul>li>a[data-textdecoration="line-through"] {
    text-decoration: line-through;
}

.ed_element_text>ul>li>a[data-textdecoration="overline"] {
    text-decoration: overline;
}

.ed_element_text>ul>li>a[data-weight="bold"] {
    font-weight: bold;
}

.ed_element_text>ul>li>a[data-fontstyle="italic"] {
    font-style: italic;
}

.ed_element_text>ul>li>a[data-size="36"] {
    font-size: 36px;
}

.ed_element_text>ul>li>a[data-size="30"] {
    font-size: 30px;
}

.ed_element_text>ul>li>a[data-size="24"] {
    font-size: 24px;
}

.ed_element_text>ul>li>a[data-size="18"] {
    font-size: 18px;
}

.ed_element_text>ul>li>a[data-size="14"] {
    font-size: 14px;
}

.ed_search_box_sb>.input-group {
    display: block;
}

.ed_search_box_sb>.input-group>.form-control {
    background-color: transparent;
    border-color: #555e8d;
    box-shadow: none;
    color: #dadada;
    border-radius: 8px;
    height: 50px;
    padding: 0 20px;
    padding-left: 50px;
    font-family: inherit;
    margin-bottom: 20px;
}

.ed_search_box_sb>.input-group>.form-control::-webkit-input-placeholder {
    color: #a8aec0;
}

.ed_search_box_sb>.input-group>.form-control:focus {
    border-color: var(--main-color);
}

.sp_popup_tab_content .ed_search_box_sb>.input-group>.form-control {
    border-color: #e6e6e6;
    color: var(--color-body);
}

.sp_popup_tab_content .ed_search_box_sb>.input-group>.form-control:focus {
    border-color: var(--main-color);
}

.ed_search_box_sb>.input-group>.input-group-addon {
    position: absolute;
    top: 7px;
    left: 7px;
    width: 34px;
    height: 34px;
    box-shadow: none;
    color: #a8aec0;
    z-index: 5;
    padding: 0;
    border: none;
    border-radius: 8px;
    background-color: rgba(var(--main-color-rgb), 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ed_image_list {
    margin-bottom: 15px;
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    width: 100%;
}

.ed_image_list>.ed_imglist_item {
    width: 33.33333%;
    position: relative;
    padding: 0 5px;
    margin-bottom: 10px;
}

.ed_image_list>.ed_imglist_item>.ed_image {
    position: relative;
    cursor: pointer;
    border: 1px solid #555e8d;
    background-color: #353b5b;
    height: 90px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ed_image_list>.ed_imglist_item>.ed_image:before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 15px;
    height: 10px;
    border-left: 2px solid transparent;
    border-bottom: 2px solid transparent;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    -webkit-transform: rotate(-45deg) translate(0px, -10px) scale(0);
    -moz-transform: rotate(-45deg) translate(0px, -10px) scale(0);
    transform: rotate(-45deg) translate(0px, -10px) scale(0);
    z-index: 1;
}

.ed_image_list>.ed_imglist_item:hover>.ed_image:before,
.ed_image_list>.ed_imglist_item.active>.ed_image:before {
    border-color: #ffffff;
    -webkit-transform: rotate(-45deg) translate(0px, -10px) scale(1);
    -moz-transform: rotate(-45deg) translate(0px, -10px) scale(1);
    transform: rotate(-45deg) translate(0px, -10px) scale(1);
}

.ed_image_list>.ed_imglist_item>.ed_image>img {
    max-width: 100%;
    max-height: 100%;
}

.sp_popup_tab_content .ed_image_list {
    max-height: 368px;
    overflow: auto;
    padding-top: 5px;
}

.sp_popup_tab_content .sp_inline_loader {
    margin: 0;
    margin-top: 10px;
}

.ed_imglist_item .ed_remove_image {
    position: absolute;
    top: -4px;
    right: 0px;
    width: 15px;
    height: 15px;
    border-radius: 15px;
    cursor: pointer;
    z-index: 1;
    background-color: #F44336;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
}

.ed_imglist_item .ed_remove_image::before,
.ed_imglist_item .ed_remove_image::after {
    content: "";
    position: absolute;
    width: 7px;
    height: 1px;
    background-color: #ffffff;
    backface-visibility: hidden;
}

.ed_imglist_item .ed_remove_image::before {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}

.ed_imglist_item .ed_remove_image::after {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.ed_imglist_item:hover .ed_remove_image {
    opacity: 1;
    visibility: visible;
}

.ed_load_more_unsplash_image,
.ed_load_more_pexels_image,
.loadmore_login_history,
.ed_load_more_layer_image,
.ed_load_more_my_image,
.ed_load_more_pixabay_image {
    text-align: center;
    display: table;
    margin: 0 auto;
    font-size: 14px;
    margin-top: 10px;
    font-weight: 400;
    text-decoration: underline;
    color: #a6afe0;
}

.ed_load_more_my_image:hover,
.ed_load_more_pixabay_image:hover {
    color: #ffffff;
    text-decoration: underline;
}

.sp_popup_wrapper .loadmore_login_history:hover,
.sp_popup_wrapper .ed_load_more_layer_image:hover,
.sp_popup_wrapper .ed_load_more_pixabay_image:hover,
.sp_popup_wrapper .ed_load_more_my_image:hover {
    color: var(--main-color);
    text-decoration: underline;
}

.ed_element_wrapper {
    position: absolute;
    top: 0px;
    left: 90px;
    right: 0;
    bottom: 0;
}

.ed_element_campaign.ed_element_hide,
.ed_element_shape.ed_element_hide,
.ed_element_icons {
    display: flex;
    flex-direction: column;
}

.ed_element_shape.ed_element_hide .ed_element_shape .panel-body,
.ed_element_icons .ed_element_shape .panel-body {
    padding: 0;
    padding-right: 2px;
}

.ed_background_croper,
.ed_image_croper {
    margin-bottom: 15px;
}

.ed_background_croper .ed_image_croper_inner,
.ed_image_croper .ed_image_croper_inner {
    background-color: #272b45;
    padding: 10px;
    position: relative;
}

.ed_background_croper .ed_image_croper_inner .canvas-container,
.ed_image_croper .ed_image_croper_inner .canvas-container {
    margin-bottom: 0;
}

.ed_image_croper_inner .sp_cropper_loader {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgb(0 0 0 / 50%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ed_image_croper_inner .sp_cropper_loader .sp_logo {
    width: auto;
    margin: 0;
}

.ed_image_croper_inner .sp_cropper_loader .sp_logo>a {
    cursor: default;
}

/* .apply_fit_to_screen{
    margin-top: 10px;
    height: 30px;
    padding: 0 15px;
    line-height: 29px;
    font-size: 13px;
    background-color: transparent;
    border: 1px solid;
    font-weight: 500;
    color: #8e96ce;
    border-radius: 50px;
    margin-bottom: 15px;
}
.apply_fit_to_screen:hover{
    color: var(--main-color);
} */
.ed_background_croper .change_image_btn,
.ed_image_croper .change_image_btn {
    display: inline-block;
    padding: 8px 20px;
    border: 1px solid;
    border-radius: 50px;
    font-size: 14px;
    color: #6a75bc;
    font-weight: 500;
    display: none;
}

.ed_background_croper .change_image_btn:hover,
.ed_image_croper .change_image_btn:hover {
    color: var(--main-color);
}

.ed_background_croper .canvas-container,
.ed_image_croper .canvas-container {
    margin: 0 auto;
    margin-bottom: 10px;
    width: 100% !important;
    height: auto !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
}

.ed_background_croper .canvas-container canvas,
.ed_image_croper .canvas-container canvas {
    width: 100% !important;
    position: relative !important;
    height: auto !important;
    vertical-align: middle;
}

.ed_background_croper .canvas-container canvas.upper-canvas,
.ed_image_croper .canvas-container canvas.upper-canvas {
    position: absolute !important;
}

.ed_property_widget.ed_background_croper .canvas-container {
    margin: 0 auto;
    margin-bottom: 0px;
}

.ed_property_widget.ed_background_croper .ed_bg_croper_inner {
    background-color: #272b45;
    padding: 10px;
}

/* image library start */
.sp_popup_wrapper#sp_image_library>.sp_popup_inner {
    max-width: 750px;
    min-height: 300px;
}

/* .sp_popup_wrapper .ed_image_list{
    justify-content: center;
} */
.sp_popup_wrapper .ed_image_list>.ed_imglist_item {
    width: 20%;
}

.sp_popup_wrapper .ed_image_list>.ed_imglist_item>.ed_image {
    background-color: #ffffff;
    box-shadow: 0px 0px 0px 1px #e8e8e8;
    border-radius: 10px;
    border: none;
}

.sp_popup_wrapper .ed_image_list>.ed_imglist_item>.ed_image>img {
    border: none;
    padding: 4px;
    height: auto;
}

/* image library end */

/* wf editor start */
.sp_wf_editor_wrapper {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    /* max-width: 1150px; */
    max-width: 980px;
    margin: 0 auto;
    padding: 0 15px;
}

.sp_wf_editor_sidebar {
    flex: none;
    width: 300px;
    background-color: #ffffff;
    min-height: 250px;
    padding: 20px;
    border-radius: 6px;
    border: 1px solid #e4e9ef;
    text-align: left;
}

.sp_wf_editor_canvas {
    flex: 1;
    max-width: 800px;
    margin: 0 auto;
    background-color: #ffffff;
    border-radius: 8px;
    margin-bottom: 30px;
}

.sp_wf_editor_canvas canvas {
    width: 100%;
    height: auto;
    vertical-align: middle;
    pointer-events: none;
}

.sp_wf_layer_item {
    margin-bottom: 15px;
    padding: 8px;
    border: 1px solid #E2ECFC;
    border-radius: 5px;
}

.sp_wf_layer_item:hover {
    border-color: var(--main-color);
}

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

.sp_wf_layer_item>.sp_wf_layer_title {
    display: grid;
    align-items: center;
    grid-template-columns: 1fr 70px;
    margin-bottom: 5px;
}

.sp_wf_layer_item>.sp_wf_layer_title>h3 {
    margin: 0;
    font-size: 14px;
}

.sp_wf_layer_item>.sp_wf_layer_title>p {
    margin: 0;
    font-size: 12px;
    color: var(--color-body);
    text-align: right;
}

.sp_wf_layer_item>.sp_wf_layer_links {
    border-radius: 5px;
    background-color: rgba(var(--main-color-rgb), 0.05);
    padding: 5px;
}

.sp_wf_layer_item>.sp_wf_layer_links>ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
}

.sp_wf_layer_item>.sp_wf_layer_links>ul>li {
    flex: 1;
    padding: 4px 5px;
    cursor: pointer;
    position: relative;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
}

.sp_wf_layer_item>.sp_wf_layer_links>ul>li.export_flat_layer {
    flex: 1.5;
}

.sp_wf_layer_item>.sp_wf_layer_links>ul>li:after {
    content: "";
    position: absolute;
    top: 6px;
    right: -1px;
    width: 1px;
    height: 15px;
    background-color: #dae2f7;
    border-radius: 2px;
}

.sp_wf_layer_item>.sp_wf_layer_links>ul>li:last-child:after {
    display: none;
}

.sp_wf_layer_item>.sp_wf_layer_links>ul>li:hover {
    color: var(--main-color);
}

.sp_wf_layer_item>.sp_wf_layer_links>ul.sp_iul_item>li input {
    position: absolute;
    left: -999999px;
    opacity: 0;
}

.sp_wf_layer_item>.sp_wf_layer_links>ul.sp_iul_item>li button,
.sp_wf_layer_item>.sp_wf_layer_links>ul.sp_iul_item>li label {
    display: flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    background-color: transparent;
    border: none;
    outline: none;
    font-size: inherit;
    font-weight: 600;
    margin: 0;
    min-height: inherit;
    flex-direction: row;
    padding: 0;
    width: 100%;
}

.sp_wf_layer_item>.sp_wf_layer_img_remove {
    padding: 5px;
    text-align: center;
    background-color: #ffebee;
    color: #ef5350;
    margin-top: 5px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
}

.sp_wf_editor_sidebar .sp_popup_tab {
    margin-bottom: 15px;
}

.sp_wf_editor_sidebar .sp_popup_tab>ul {
    background-color: rgba(var(--main-color-rgb), 0.05);
}

.sp_wf_editor_sidebar .sp_popup_tab>ul>li>a {
    padding: 5px 22px 4px;
}

.sp_wf_layer_color_item {
    margin-bottom: 15px;
    padding: 8px 8px 8px 15px;
    border: 1px solid #E2ECFC;
    border-radius: 5px;
    display: grid;
    align-items: center;
    grid-template-columns: 1fr 100px;
    color: var(--color-heading);
}

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

.sp_wf_layer_color_item .colorpicker-alpha {
    display: none !important;
}

.sp_wf_layer_color_item>.sp_wf_layer_color_title {
    max-width: 125px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.sp_new_custom_color_picker {
    border: 1px solid #c0c8d7;
    border-radius: 4px;
    position: relative;
}

.sp_new_custom_color_picker>span {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    cursor: pointer;
    box-shadow: 0 1px 3px rgb(0 0 0 / 12%), 0 1px 2px rgb(0 0 0 / 24%);
}

.sp_new_custom_color_picker input {
    width: 100%;
    border: none;
    padding: 5px 5px 5px 26px;
    font-size: 12px;
    font-weight: 600;
    outline: none;
    background-color: transparent;
    text-transform: uppercase;
    color: var(--color-body);
}

.sp_new_custom_color_picker .sp_nccp_colorpicker_wrapper {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    opacity: 0;
    visibility: hidden;
    min-width: 205px;
    z-index: 1;
    cursor: initial;
}

.sp_new_custom_color_picker.open .sp_nccp_colorpicker_wrapper {
    opacity: 1;
    visibility: visible;
}

/* wf editor end */

/* AI Images start */
#spj_add_ai_image_popup.sp_popup_wrapper {
    top: 63px;
    background-color: #F8FAFD;
    padding: 0 !important;
}

#spj_add_ai_image_popup.sp_popup_wrapper::before {
    display: none;
}

#spj_add_ai_image_popup.sp_popup_wrapper {
    z-index: 999;
}

#spj_add_ai_image_popup.sp_popup_wrapper>.sp_popup_inner {
    position: fixed;
    top: 63px;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    border-radius: 0;
    margin: 0;
    background-color: #F8FAFD;
    width: 100%;
    max-width: 100%;
    transform: none;
    overflow: auto;
}

#spj_add_ai_image_popup.sp_popup_wrapper>.sp_popup_inner .sp_popup_body {
    margin: 0 auto;
    max-width: 1600px;
    padding: 0 40px;
    width: 100%;
}

.sp_add_ai_image_box_wrapper {
    padding: 30px;
    background-color: #ffffff;
    border-radius: 8px;
}

.sp_add_ai_image_box_wrapper>.sp_aaib_inner {
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 30px;
    margin-bottom: 30px;
}

.sp_add_ai_image_box_wrapper>.sp_aaib_inner .sp_aaib_preview {
    height: 500px;
    background-color: #FAFAFA;
    border: 1px solid #E9E9F4;
    border-radius: 8px;
    margin-bottom: 30px;
    text-align: center;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sp_add_ai_image_box_wrapper>.sp_aaib_inner .sp_aaib_preview>img {
    max-width: 100%;
    max-height: 100%;
}

.sp_add_ai_image_box_wrapper>.sp_aaib_inner .sp_aaib_preview:empty {
    background-color: red;
}

.sp_deepai_style_list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
    grid-gap: 10px;
}

.sp_deepai_style_list>.sp_deepai_style_item {
    position: relative;
}

.sp_deepai_style_list>.sp_deepai_style_item>label>input {
    position: absolute;
    left: -9999999px;
    opacity: 0;
}

.sp_deepai_style_list>.sp_deepai_style_item>label>img {
    max-width: 100%;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.71, -0.11, 0.25, 0.88);
}

.sp_deepai_style_list>.sp_deepai_style_item>label>input:checked~img {
    box-shadow: 0px 0px 0px 3px var(--main-color);
    transform: scale(1.05);
}

.sp_deepai_style_list>.sp_deepai_style_item .tooltip-inner {
    white-space: nowrap;
    max-width: 220px;
}

.sp_deepai_style_list.sp_imageai_filter {
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    gap: 12px;
}

.sp_deepai_style_list.sp_imageai_filter>.sp_deepai_style_item>label {
    margin: 0;
}

.sp_deepai_style_list.sp_imageai_filter>.sp_deepai_style_item>label>img {
    transition: none;
}

.sp_deepai_style_list.sp_imageai_filter>.sp_deepai_style_item>label>p {
    margin: 0;
    padding-top: 5px;
    color: #a8aec9;
    font-size: 12px;
    text-align: center;
    font-weight: 500;
}

.sp_deepai_style_list.sp_imageai_filter>.sp_deepai_style_item>label>input:checked~img {
    transform: none;
}

.sp_deepai_style_list.sp_imageai_filter>.sp_deepai_style_item>label>input:checked~p {
    color: #ffffff;
}

.sp_deepai_shape_list {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.sp_deepai_shape_list>.sp_deepai_shape_item {
    position: relative;
}

.sp_deepai_shape_list>.sp_deepai_shape_item>label>input {
    position: absolute;
    left: -99999px;
    opacity: 0;
}

.sp_deepai_shape_list>.sp_deepai_shape_item>label>.sp_deepai_shape_item_size {
    background-color: #FAFAFC;
    border: 1px solid #BFC8DA;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.sp_deepai_shape_list>.sp_deepai_shape_item>label>.sp_deepai_shape_item_size>svg {
    width: 10px;
    height: auto;
}

.sp_deepai_shape_list>.sp_deepai_shape_item>label>input:checked~.sp_deepai_shape_item_size {
    background-color: rgba(var(--main-color-rgb), 0.10);
    border-color: var(--main-color);
}

.sp_deepai_shape_list>.sp_deepai_shape_item>label>input:checked~.sp_deepai_shape_item_size>svg path {
    fill: var(--main-color);
}

.sp_deepai_shape_list>.sp_deepai_shape_item>label>.sp_deepai_shape_item_size.shape1 {
    width: 50px;
    height: 28px;
}

.sp_deepai_shape_list>.sp_deepai_shape_item>label>.sp_deepai_shape_item_size.shape2 {
    width: 36px;
    height: 28px;
}

.sp_deepai_shape_list>.sp_deepai_shape_item>label>.sp_deepai_shape_item_size.shape3 {
    width: 26px;
    height: 28px;
}

.sp_deepai_shape_list>.sp_deepai_shape_item>label>.sp_deepai_shape_item_size.shape4 {
    width: 28px;
    height: 36px;
}

.sp_deepai_shape_list>.sp_deepai_shape_item>label>.sp_deepai_shape_item_size.shape5 {
    width: 28px;
    height: 50px;
}

/* AI Images end */

/* KDP Guidline start */
.sp_kdp_guidelines_wrapper_svg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    pointer-events: none;
    transform-origin: top center;
}

.sp_kdp_guidelines_wrapper_svg>svg {
    width: 100%;
    height: 100%;
}

.sp_kdp_guidelines_wrapper_svg>svg rect {
    stroke: #ff0000;
}

.sp_kdp_guidelines_wrapper_svg .sp_hardcover_wrap {
    display: none;
}

.sp_kdp_guidelines_wrapper_svg .sp_hardcover_wrap_text {
    display: none;
    font-size: 4rem;
}

.show_gdp_guidelines .sp_kdp_guidelines_wrapper_svg .sp_hardcover_wrap_text,
.show_gdp_guidelines .sp_kdp_guidelines_wrapper_svg .sp_hardcover_wrap {
    display: block;
}

.sp_kdp_guidelines_wrapper_svg>svg rect.sp_kdp_barcode_area {
    stroke: transparent;
}
.sp_show_isbn .sp_kdp_guidelines_wrapper_svg>svg rect.sp_kdp_barcode_area{
    stroke: #FF0000;
    fill: transparent;
    stroke-dashoffset: 2px;
    stroke-dasharray: 18;
    stroke-width: 4px;
}

/* KDP Guidline end */

.edp_spacing_btn_with_input {
    display: grid;
    grid-template-columns: 160px 52px;
    gap: 10px;
}

.edp_spacing_btn_with_input .edp_layer_option_btn>ul>li>a {
    height: 44px;
}

/********************************************************************************************* 
8. image editor end
*********************************************************************************************/

/********************************************************************************************* 
9. settings start
*********************************************************************************************/
.sp_setting_wrapper {
    display: flex;
}

.sp_storage_list {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    flex: none;
    margin-right: 30px;
    width: 270px;
}

.sp_storage_list>.sp_storage_item {
    flex: none;
    /* width: 33.33333%;
    padding: 0 15px; */
    margin-bottom: 15px;
}

/* @media(max-width:768px){.sp_storage_list > .sp_storage_item{width: 50%;}}
@media(max-width:480px){.sp_storage_list > .sp_storage_item{width: 100%;}} */

.sp_storage_list>.sp_storage_item>.sp_storage_inner>input {
    position: absolute;
    left: -9999999px;
    opacity: 0;
}

.sp_storage_list>.sp_storage_item>.sp_storage_inner>label {
    border-radius: 10px;
    background-color: #ffffff;
    box-shadow: 0px 4px 34px 0px rgba(0, 0, 0, 0.03);
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    font-size: 15px;
    font-weight: 500;
}

.sp_storage_list>.sp_storage_item.active_tab>.sp_storage_inner>label {
    background-color: rgba(var(--main-color-rgb), 0.05);
    /* box-shadow: 0px 4px 34px 0px rgba(50,97,228,0.1); */
    box-shadow: 0px 0px 0px 1px var(--main-color);
    color: var(--main-color);
}

.sp_storage_list>.sp_storage_item>.sp_storage_inner>label>img {
    width: 130px;
    height: 30px;
    object-fit: contain;
}

.sp_storage_list>.sp_storage_item>.sp_storage_inner>label>.sp_chk {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    background-color: var(--main-color);
    box-shadow: 0px 3px 11.4px 0.6px rgba(var(--main-color-rgb), 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    transform: scale(0);
}

.sp_storage_list>.sp_storage_item.active>.sp_storage_inner>label>.sp_chk {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    transform: scale(1);
}

.sp_apps_list_wrapper {
    display: block;
}

.sp_apps_list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minMax(200px, 1fr));
    gap: 20px;
    width: auto;
    margin: 0;
    margin-bottom: 30px;
}

.sp_storage_list.sp_apps_list>.sp_storage_item {
    margin-bottom: 0;
    position: relative;
}
.sp_storage_list.sp_apps_list>.sp_storage_item>.sp_storage_inner>label {
    min-height: 105px;
}
.sp_storage_list.sp_apps_list>.sp_storage_item.active_tab>.sp_storage_inner>label {
    background-color: #ffffff;
    box-shadow: 0px 4px 34px 0px rgba(0, 0, 0, 0.03);
}
.sp_storage_list.sp_apps_list > .sp_storage_item > .sp_storage_overlay{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-direction: column;
    z-index: 1;
    padding: 10px;
    background-color: #ffffffb8;
    border-radius: 10px;
    backdrop-filter: blur(2px);
}
.sp_storage_list.sp_apps_list > .sp_storage_item > .sp_storage_overlay .sp_btn{
    height: 32px;
    padding: 0 15px;
    border-radius: 6px;
    font-size: 14px;
}

.sp_storage_tab_wrapper {
    max-width: 800px;
    /* margin: 0 auto; */
    padding: 40px;
    border-radius: 10px;
    background-color: #ffffff;
    box-shadow: 0px 4px 34px 0px rgba(0, 0, 0, 0.03);
    /* margin-top: 30px; */
    display: none;
    word-break: break-all;
    flex: 1;
}

.sp_storage_tab_wrapper.active {
    display: block;
}

.sp_storage_tab_wrapper>h3 {
    margin: 0;
    margin-bottom: 30px;
    font-size: 18px;
    font-weight: 500;
}

.sp_storage_tab_wrapper>h3>span {
    display: block;
    font-size: 15px;
    color: var(--color-body);
    font-weight: 400;
    margin-top: 6px;
}

.sp_popup_tab_content#Banners_tab .sp_storage_tab_wrapper {
    max-width: 100%;
}

.sp_popup_tab_content#Banners_tab .sp_storage_tab_wrapper .sp_input_wrapper_list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: 20px 0px;
}

#social_app_connect_popup .sp_storage_tab_wrapper {
    box-shadow: none;
    padding: 0;
    max-width: 100%;
}

#social_app_connect_popup .sp_storage_tab_wrapper>h3 {
    text-align: center;
    font-size: 24px;
    color: #1e1f28;
    font-weight: 600;
    margin-bottom: 40px;
}

.sp_setting_note {
    margin: 0;
    font-size: 14px;
    color: var(--color-heading);
}


.sp_popup_tab.sp_popup_tab_marketplace>ul,
.sp_admin_content_wrapper .sp_popup_tab>ul,
.sp_uimp_popup_wrapper .sp_popup_tab>ul,
.sp_profile_container .sp_popup_tab>ul,
.sp_setting_container .sp_popup_tab>ul {
    background-color: rgba(var(--main-color-rgb), 0.05);
}

.sp_setting_container .ed_sidebar_input>label {
    color: var(--color-body);
}

.sp_setting_container .sp_range_slider::after {
    display: none;
}

.sp_upload_image_box_wrapper {
    display: grid;
    grid-template-columns: 1fr 140px;
    gap: 20px;
    max-width: 100%;
}

.sp_upload_image_box_wrapper>.sp_upload_image_box {
    max-width: 100%;
}

.sp_upload_image_box_wrapper>.sp_upload_image_box_overlay {
    margin: 0;
}

.sp_upload_image_box {
    max-width: 400px;
    position: relative;
}

.sp_upload_image_box>input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    outline: none;
    cursor: pointer;
    opacity: 0;
    border-radius: 5px;
}

.sp_upload_image_box>label {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    min-height: 120px;
    text-align: center;
    background-color: rgba(var(--main-color-rgb), 0.08);
    border: 1px dashed;
    color: var(--main-color);
    border-radius: 5px;
    cursor: pointer;
    margin: 0;
}

.sp_upload_image_box>label>img {
    width: 44px;
    height: auto;
    margin-bottom: 15px;
}

.sp_upload_image_box>label>svg {
    width: 35px;
    height: auto;
    margin-bottom: 15px;
}

.sp_upload_image_box>label>svg path {
    fill: var(--main-color);
}

.sp_upload_image_box>label>span {
    font-size: 13px;
    display: block;
}

.sp_upload_image_box>label .sp_uploader_selected_file {
    background-color: #ffffff;
    border: 1px solid var(--main-color);
    padding: 3px 15px;
    border-radius: 25px;
    color: var(--main-color);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 90%;
    text-align: left;
    margin-top: 8px;
}

.sp_upload_image_box>label .sp_uploader_selected_file svg {
    width: 18px;
    height: auto;
    flex: none;
}

.sp_upload_image_box>label .sp_uploader_selected_file svg path {
    fill: var(--main-color);
}

.sp_upload_image_box_overlay {
    position: relative;
    border-radius: 5px;
    box-shadow: 0px 0px 0px 2px #ecf1ff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    height: 120px;
    margin-top: 20px;
}

.sp_wm_wrapper .sp_upload_image_box_overlay {
    display: none;
}

.sp_upload_image_box_overlay>img {
    max-width: 100%;
    max-height: 85px;
    opacity: 0.2;
}

.sp_uib_remove {
    position: absolute;
    top: -9px;
    right: 10px;
    background-color: #f44336;
    color: #ffffff;
    font-size: 9px;
    padding: 2px 8px 1px;
    border-radius: 50px;
    font-weight: 700;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sp_upload_image_box_overlay .tooltip {
    margin-top: -8px;
}

.sp_upload_image_box_overlay .tooltip-inner {
    min-width: 200px;
    text-align: left;
}

#watermark_tab .sp_storage_tab_wrapper {
    max-width: 1024px;
    display: block;
}

.sp_wm_wrapper {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    grid-gap: 30px;
}

.sp_wm_wrapper>.sp_wm_preview {
    max-width: 650px;
}

.sp_wm_wrapper>.sp_wm_setting {
    width: 250px;
}

.sp_wm_wrapper h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 10px;
}

.sp_wm_preview_box {
    background-color: rgba(var(--main-color-rgb), 0.05);
    padding: 20px;
    position: relative;
}

.sp_wm_preview_box>img {
    max-width: 100%;
}

.sp_wm_preview_box>.sp_wm_preview_overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('../images/watermark.png');
    background-size: 190px;
    opacity: 0.2;
    background-position: center center;
}

.sp_wm_wrapper>.sp_wm_setting .sp_checkbox {
    margin-bottom: 15px;
}

.sp_wm_wrapper>.sp_wm_setting .sp_checkbox>label {
    display: flex;
    word-break: break-word;
}

.sp_wm_wrapper>.sp_wm_setting .sp_checkbox>label::before {
    flex: none;
    margin-top: 1px;
}

.sp_h2c_wrapper_box {
    position: relative;
    margin: 20px auto;
    border: 1px solid #ecf1ff;
    border-radius: 5px;
}

.sp_h2c_wrapper_box>.sp_uib_remove {
    z-index: 1;
}

.sp_h2c_wrapper_box .tooltip {
    transform: translateY(-8px);
}

.sp_h2c_wrapper_box .tooltip-inner {
    min-width: 200px;
}

.sp_h2c_wrapper {
    width: 250px;
    height: 250px;
    overflow: hidden;
    position: relative;
}

.sp_h2c_wrapper>img {
    pointer-events: none;
}

.sp_h2c_wrapper>img.sp_h2c_pattern {
    max-width: 100%;
}

.sp_h2c_wrapper>img.sp_h2c_img {
    position: absolute;
    max-width: 50%;
    max-height: 35px;
}

.sp_h2c_wrapper>img.sp_h2c_center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.sp_h2c_wrapper>img.sp_h2c_tl {
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
}

.sp_h2c_wrapper>img.sp_h2c_tr {
    top: 0;
    right: 0;
    transform: translate(50%, -50%);
}

.sp_h2c_wrapper>img.sp_h2c_bl {
    left: 0;
    bottom: 0;
    transform: translate(-50%, 50%);
}

.sp_h2c_wrapper>img.sp_h2c_br {
    right: 0;
    bottom: 0;
    transform: translate(50%, 50%);
}

.sp_youtube_cannel_list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(134px, 1fr));
    grid-gap: 20px;
}

.sp_ycl_item {
    text-align: center;
    max-width: 170px;
    background-color: rgba(var(--main-color-rgb), 0.04);
    border: 1px solid rgba(var(--main-color-rgb), 0.2);
    border-radius: 10px;
    padding: 15px;
    position: relative;
}

.sp_ycl_item>.ps_ycl_icon {
    width: 50px;
    height: 50px;
    position: relative;
    margin: 0 auto;
    margin-bottom: 10px;
}

.sp_ycl_item>.ps_ycl_icon>.ps_ycl_initials {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--main-color);
    border-radius: 50px;
    text-transform: uppercase;
    color: #ffffff;
    font-size: 16px;
    letter-spacing: 1px;
}

.sp_ycl_item>.ps_ycl_icon>.ps_ycl_img {
    position: absolute;
    top: -1px;
    left: -1px;
    width: 52px;
    height: 52px;
    object-fit: contain;
    border-radius: 50px;
    background-color: white;
    box-shadow: 0 3px 6px rgb(0, 0, 0, 0.16), 0 3px 6px rgb(0, 0, 0, 0.23);
}

.sp_ycl_item>.ps_ycl_details>h3 {
    margin: 0;
    font-size: 14px;
    margin-bottom: 6px;
}

.sp_ycl_item>.ps_ycl_details>p {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
}

.ps_ycl_remove {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 22px;
    height: 22px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffe8e8;
    cursor: pointer;
    display: none;
}

.ps_ycl_remove::before,
.ps_ycl_remove::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 2px;
    border-radius: 2px;
    background-color: #ff6666;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}

.ps_ycl_remove::after {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.sp_ycl_item:hover .ps_ycl_remove {
    display: flex;
}

/* admin product manager price mode start */
.sp_pm_priceMode_list>.sp_pm_priceMode_inner {
    display: inline-flex;
    vertical-align: top;
    margin-bottom: 20px;
}

.sp_pm_priceMode_list>.sp_pm_priceMode_inner .sp_pm_priceMode_item {
    border: 1px solid var(--main-color);
    background-color: rgba(var(--main-color-rgb), 0.1);
    padding: 15px;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    width: 165px;
    height: 125px;
    margin-right: 10px;
}

.sp_pm_priceMode_list>.sp_pm_priceMode_inner .sp_pm_priceMode_item>h3 {
    margin: 0;
    color: var(--color-heading);
    font-size: 14px;
    margin-bottom: 4px;
}

.sp_pm_priceMode_list>.sp_pm_priceMode_inner .sp_pm_priceMode_item>h4 {
    margin: 0;
    color: var(--main-color);
    font-size: 16px;
}

.sp_pm_priceMode_list>.sp_pm_priceMode_inner .sp_pm_priceMode_item>p {
    margin: 5px 0 0;
}

.sp_pm_priceMode_list>.sp_pm_priceMode_inner .sp_pm_priceMode_item>.sp_pm_priceMode_label {
    position: absolute;
    left: calc(50% - 50px);
    bottom: -11px;
    width: 100px;
    height: 22px;
    background-color: var(--main-color);
    color: #ffffff;
    font-size: 12px;
    padding: 3px 12px;
    border-radius: 15px;
    text-align: center;
}

.sp_pm_priceMode_add {
    width: 165px;
    height: 125px;
    padding: 5px;
    border: 1px solid #D7DDEC;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    vertical-align: middle;
    margin-left: -4px;
}

.sp_pm_priceMode_add>p {
    margin: 0;
    margin-top: 15px;
}

.sp_pm_priceMode_add:hover {
    color: var(--main-color);
    border-color: var(--main-color);
}

.sp_pm_priceMode_add:hover svg path {
    fill: var(--main-color);
}

.sp_popup_wrapper#add_price_mode_popup>.sp_popup_inner {
    max-width: 680px;
}

/* admin product manager price mode end */

/* social connect start */
.sp_social_accout_list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(134px, 1fr));
    grid-gap: 20px;
}

.sp_sal_item {
    text-align: center;
    max-width: 170px;
    background-color: rgba(var(--main-color-rgb), 0.04);
    border: 1px solid rgba(var(--main-color-rgb), 0.2);
    border-radius: 10px;
    padding: 15px;
    position: relative;
}

.sp_sal_item>.sp_sal_icon {
    width: 50px;
    height: 50px;
    position: relative;
    margin: 0 auto;
    margin-bottom: 10px;
}

.sp_sal_item>.sp_sal_icon>.sp_sal_initials {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--main-color);
    border-radius: 50px;
    text-transform: uppercase;
    color: #ffffff;
    font-size: 16px;
    letter-spacing: 1px;
}

.sp_sal_item>.sp_sal_icon>.sp_sal_img {
    position: absolute;
    top: -1px;
    left: -1px;
    width: 52px;
    height: 52px;
    object-fit: contain;
    border-radius: 50px;
    background-color: white;
    box-shadow: 0 3px 6px rgb(0, 0, 0, 0.16), 0 3px 6px rgb(0, 0, 0, 0.23);
}

.sp_sal_item>.sp_sal_details>h3 {
    margin: 0;
    font-size: 14px;
    margin-bottom: 6px;
}

.sp_sal_item>.sp_sal_details>p {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
}

.sp_sal_remove {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 22px;
    height: 22px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffe8e8;
    cursor: pointer;
    display: none;
}

.sp_sal_remove::before,
.sp_sal_remove::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 2px;
    border-radius: 2px;
    background-color: #ff6666;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}

.sp_sal_remove::after {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.sp_sal_item:hover .sp_sal_remove {
    display: flex;
}

/* social connect end */

.sp_popup_tab_content#Banners_tab .sp_cd_dashboard_banners_wrapper.sp_storage_tab_wrapper .sp_input_wrapper_list {
    grid-template-columns: 320px 320px 1fr;
    align-items: flex-start;
    max-width: 1200px;
}

.sp_cd_dashboard_banners_wrapper .sp_input_wrapper select.sp_input {
    min-height: 100px;
}

.sp_dash_oto_banner_2box {
    display: flex;
    align-items: center;
    gap: 18px;
}

.sp_dash_oto_banner_2box>.sp_dash_oto_banner_2box_item {
    background-color: #ffffff;
    border-radius: 14px;
    flex: 1;
    min-height: 162px;
    padding: 14px;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.sp_dash_oto_banner_2box>.sp_dash_oto_banner_2box_item>p {
    margin: 0;
    font-weight: 600;
    font-size: 13px;
}

.sp_dash_oto_banner_2box>.sp_dash_oto_banner_2box_item>h3 {
    margin: 0;
    font-size: 28px;
    font-weight: 900;
    margin-top: 8px;
}

.sp_dash_oto_banner_2box>.sp_dash_oto_banner_2box_item>img {
    position: absolute;
    right: 10px;
    bottom: 10px;
}

.sp_dash_oto_banner_2box>.sp_dash_oto_banner_2box_item::before {
    content: "";
    width: 156px;
    height: 156px;
    border-radius: 156px;
    position: absolute;
    right: calc(-156px / 2);
    bottom: calc(-156px / 2);
    z-index: -1;
    background-color: #FFE5EA;
}

.sp_dash_oto_banner_2box>.sp_dash_oto_banner_2box_item:nth-child(2):before {
    background-color: #E1EEFF;
}

.sp_dash_oto_banner_dynamic {
    background-color: #ffffff;
    border-radius: 14px;
    padding: 14px;
    text-align: center;
    margin-top: 14px;
    color: var(--color-heading);
    min-height: 134px;
    box-shadow: 0px 4px 0px 0px rgba(104, 106, 235, 0.64) inset;
}

.sp_dash_oto_banner_dynamic h1,
.sp_dash_oto_banner_dynamic h2,
.sp_dash_oto_banner_dynamic h3,
.sp_dash_oto_banner_dynamic h4,
.sp_dash_oto_banner_dynamic h5,
.sp_dash_oto_banner_dynamic h6,
.sp_dash_oto_banner_dynamic p {
    margin: 0;
}

.spj_dash_oto_banner_btn {
    margin-top: 6px;
}

.spj_dash_oto_banner_btn>.sp_btn {
    min-width: 130px;
    height: 42px;
    line-height: 42px;
    background: linear-gradient(90deg, #7B65FF 0%, #4D8EF7 56%, #1EB6EF 100%);
    border-radius: 8px;
}

.spj_dash_oto_banner_btn>.sp_btn:hover {
    background: linear-gradient(90deg, #1EB6EF 0%, #4D8EF7 56%, #7B65FF 100%);
}

/********************************************************************************************* 
9. settings end
*********************************************************************************************/

/********************************************************************************************* 
10. packaging start
*********************************************************************************************/
.sp_campaign_list>.sp_campaign_item.sp_package_item>.sp_campaign_inner>.sp_camp_detail {
    /* padding: 5px 10px; */
}

.sp_campaign_list>.sp_campaign_item.sp_package_item>.sp_campaign_inner>.sp_camp_detail>h3 {
    margin: 0;
}

.sp_select_campaign_popup {
    position: fixed;
    top: 63px;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 60px 80px 110px;
    background-color: #f8fafd;
    z-index: 999;
    overflow: auto;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateY(10%);
    -moz-transform: translateY(10%);
    transform: translateY(10%);
}

.select_camp_popup_open {
    overflow: hidden;
}

.select_camp_popup_open .sp_select_campaign_popup {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    transform: translateY(0);
}

.sp_select_campaign_popup .sp_campaign_list>.sp_campaign_item {
    cursor: pointer;
}

.sp_select_campaign_popup .sp_campaign_list>.sp_campaign_item>input {
    position: absolute;
    left: -999999px;
    opacity: 0;
}

.sp_select_campaign_popup .sp_campaign_list>.sp_campaign_item>.sp_campaign_inner>.sp_camp_img>.sp_chk {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 22px;
    height: 22px;
    border: 1px solid #b8bce4;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    transition: all 0.2s;
    z-index: 3;
}

.sp_select_campaign_popup .sp_campaign_list>.sp_campaign_item>.sp_campaign_inner>.sp_camp_img>.sp_chk>svg {
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    transform: scale(0);
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    transition: all 0.2s;
}

.sp_select_campaign_popup .sp_campaign_list>.sp_campaign_item>input:checked~.sp_campaign_inner>.sp_camp_img>.sp_chk {
    background-color: var(--main-color);
    border-color: var(--main-color);
}

.sp_select_campaign_popup .sp_campaign_list>.sp_campaign_item>input:checked~.sp_campaign_inner>.sp_camp_img>.sp_chk>svg {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    transform: scale(1);
}

.sp_select_campaign_popup .sp_campaign_list>.sp_campaign_item>input:checked~.sp_campaign_inner::after {
    opacity: 1;
    height: 4px;
}

.sp_scamp_continue_box {
    position: fixed;
    bottom: 30px;
    left: 50%;
    z-index: 1111;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
    -webkit-transform: translate(-50%, 50%);
    -moz-transform: translate(-50%, 50%);
    transform: translate(-50%, 50%);
}

.select_camp_popup_open .sp_scamp_continue_box {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translate(-50%, 0);
    -moz-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
}

.sp_scamp_continue_box>.sp_scamp_continue_box_inner {
    margin: 0 auto;
    border-radius: 12px;
    background-color: #ffffff;
    box-shadow: 0px 4px 34px 0px rgba(0, 0, 0, 0.03);
    width: 100%;
    max-width: 420px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
    padding-left: 50px;
}

.sp_scamp_continue_box>.sp_scamp_continue_box_inner>.sp_btn {
    min-width: 170px;
    margin-left: 40px;
}

/* package editor start */
/* .sp_package_editor > .sp_editor_preview_wrapper{
    padding-left: 170px;
} */


/* .sp_package_editor .sp_ed_tab_box{
    left: -150px;
} */
/* .sp_logo_editor.sp_package_editor .sp_edpr_box{
    background-color: transparent;
    box-shadow: none;
    width: 100%;
    max-width: 1200px;
    min-width: inherit;
    height: auto;
    margin-bottom: 40px;
}
.sp_logo_editor.sp_package_editor .sp_edpr_box .canvas-container{
    background-color: #ffffff;
    box-shadow: 0px 4px 34px 0px rgba(0, 0, 0, 0.03);
    position: relative !important;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    height: auto !important;
    left: auto !important;
    top: auto !important;
    transform-origin: top;
    overflow: hidden;
}
.sp_logo_editor.sp_package_editor .sp_edpr_box .canvas-container canvas {
    width: 100% !important;
    position: relative !important;
    height: auto !important;
    vertical-align: middle;
}
.sp_logo_editor.sp_package_editor .sp_edpr_box .canvas-container canvas.upper-canvas {
    position: absolute !important;
} */

.ed_element_campaign_list {
    display: flex;
    flex-direction: column;
}

.ed_element_campaign_list .ed_element_upload_body {
    padding: 40px;
    display: flex;
    flex-direction: column;
    overflow: auto;
    flex: 1;
}

.sp_es_body .sp_select_campaign_popup {
    position: relative;
    opacity: 1;
    visibility: visible;
    transform: none;
    background-color: transparent;
    top: auto;
    padding: 0;
    overflow: initial;
    left: auto;
}

.sp_es_body .sp_campaign_list {
    grid-template-columns: repeat(auto-fill, minmax(40%, 1fr));
}

.sp_es_body .sp_campaign_list>.sp_campaign_item {
    /* width: 50%;
    padding: 0 10px;
    margin-bottom: 20px; */
}

.sp_es_body .sp_campaign_list>.sp_campaign_item>.sp_campaign_inner {
    padding: 5px;
    border-radius: 8px;
    margin: 0;
}

.sp_es_body .sp_campaign_list>.sp_campaign_item>.sp_campaign_inner>.sp_camp_img>img {
    height: 110px;
    border-radius: 5px;
    object-fit: contain;
}

.sp_image_editor_wrapper .ed_element_campaign .sp_es_body .sp_campaign_list>.sp_campaign_item>.sp_campaign_inner>.sp_camp_img>img[src*="blank_thumb.svg"]~.sp_camp_overlay .ed_canvas_add_image {
    display: none;
}

.sp_es_body .sp_campaign_list>.sp_campaign_item>.sp_campaign_inner>.sp_camp_detail {
    padding: 5px;
}

.sp_es_body .sp_campaign_list>.sp_campaign_item>.sp_campaign_inner>.sp_camp_detail>h3 {
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sp_es_body .sp_camp_type {
    font-size: 11px;
    height: 20px;
    line-height: 22px;
}

.sp_es_body .sp_select_campaign_popup .sp_campaign_list>.sp_campaign_item>.sp_campaign_inner>.sp_camp_img>.sp_chk {
    width: 15px;
    height: 15px;
    border-radius: 3px;
    display: none;
}

.sp_es_body .sp_campaign_list>.sp_campaign_item:hover>.sp_campaign_inner::after,
.sp_es_body .sp_select_campaign_popup .sp_campaign_list>.sp_campaign_item>input:checked~.sp_campaign_inner::after {
    height: 3px;
}

/* package editor end */

.sp_pack_setup_wrapper {
    display: grid;
    grid-template-columns: 65% 35%;
}

.sp_ps_temp_list {
    padding-right: 20px;
}

.sp_pst_preview_box {
    padding: 15px;
    margin-bottom: 15px;
    position: sticky;
    top: 0;
}

.sp_pst_preview_box>h3 {
    margin: 0;
    font-weight: 600;
    color: var(--color-heading);
    font-size: 20px;
    text-align: center;
    margin-bottom: 15px;
}

.sp_pst_preview_box .canvas-container {
    width: 100% !important;
    height: auto !important;
    background-color: #ffffff;
    margin-bottom: 15px;
}

.sp_pst_preview_box .canvas-container canvas {
    width: 100% !important;
    position: relative !important;
    height: auto !important;
    vertical-align: middle;
    pointer-events: none;
}

.sp_pst_preview_box .canvas-container canvas.upper-canvas {
    position: absolute !important;
}

.sp_ps_temp_preview .sp_btn {
    min-width: 200px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sp_ps_temp_preview .sp_btn>svg {
    transform: rotate(180deg);
    margin-left: 10px;
    width: 15px;
    height: auto;
}

.sp_ps_temp_preview .sp_btn>svg path {
    fill: #ffffff;
}

.sp_ps_temp_list>.sp_pst_item {
    margin-bottom: 30px;
}

.sp_ps_temp_list>.sp_pst_item>h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 15px;
}

span.sp_pst_reload {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background-color: #e7eafd;
    border-radius: 6px;
    vertical-align: middle;
    margin-left: 10px;
    margin-top: -2px;
    cursor: pointer;
}

span.sp_pst_reload svg path {
    fill: var(--main-color);
}

.sp_pst_temp_list {
    display: grid;
    grid-template-columns: 18% 64% 18%;
}

.sp_pst_temp_slider {
    display: flex;
    grid-gap: 20px;
    padding: 0 20px;
}

.sp_pst_temp_slider>.swiper-container {
    width: 100%;
}

.sp_pst_temp_slider>.swiper-container .swiper-slide {
    width: 31.333333%;
}

.sp_pst_temp_slider>.swiper-container .swiper-pagination {
    top: auto;
    bottom: 0;
    display: none;
}

.sp_pst_temp_slider>.swiper-container .swiper-navigation {
    width: 30px;
    height: 30px;
    border-radius: 50px;
    background-color: #ffffff;
    box-shadow: 1px 3px 10px rgb(0, 0, 0, 0.2);
    margin-top: -15px;
    color: var(--main-color);
}

.sp_pst_temp_slider>.swiper-container .swiper-navigation:after {
    font-size: 14px;
    font-weight: 900;
}

.sp_pst_temp_slider .swiper-button-next.swiper-button-disabled,
.sp_pst_temp_slider .swiper-button-prev.swiper-button-disabled {
    pointer-events: inherit;
    cursor: not-allowed;
}

.sp_pst_temp_slider .no_data_found .sp_pst_temp_no_design {
    padding: 15px;
    background-color: #fff;
    width: 100%;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    text-align: center;
}

.sp_pst_design {
    width: auto;
    height: auto;
    background-color: #ffffff;
    position: relative;
}

.sp_pst_design>img {
    width: 100%;
}

.sp_pst_design>.sp_pst_design_overlay {
    position: absolute;
    top: 10%;
    left: 10%;
    right: 10%;
    bottom: 10%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer;
}

.sp_pst_design:hover>.sp_pst_design_overlay {
    background-color: whitesmoke;
}

.sp_pst_temp_main .sp_pst_design:hover>.sp_pst_design_overlay {
    background-color: transparent;
}

.sp_pst_temp_addnew {
    position: relative;
}

.sp_pst_temp_addnew .tooltip-inner {
    min-width: 250px;
}

.sp_pst_design.add {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-direction: column;
    position: relative;
}

.sp_pst_design.add>.sp_pst_add_overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.sp_pst_design.add>.sp_pst_add_overlay>.sp_pst_add_icon {
    position: relative;
    display: flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}

.sp_pst_design.add>.sp_pst_add_overlay>.sp_pst_add_icon>span {
    width: 40px;
    height: 2px;
    background-color: var(--main-color);
    border-radius: 5px;
    position: absolute;
}

.sp_pst_design.add>.sp_pst_add_overlay>.sp_pst_add_icon>span:nth-child(2) {
    transform: rotate(90deg);
}

.sp_pst_design.add>.sp_pst_add_overlay>.sp_pst_add_icon svg {
    width: 40px;
    height: 40px;
}

.sp_pst_design.add>.sp_pst_add_overlay>p {
    white-space: nowrap;
    margin: 0 auto;
    font-size: 12px;
    font-weight: 600;
}

.sp_pst_design.add>.sp_pst_add_overlay>a {
    font-size: 12px;
    margin-top: 5px;
    font-weight: 600;
}


.sp_pst_temp_main .sp_pst_design {
    box-shadow: 0px 0px 0px 2px var(--main-color);
}

.sp_pst_temp_slider>.sp_pst_design {
    width: 160px;
}

.sp_pst_temp_addnew.not_allowed .sp_pst_design {
    box-shadow: 0px 0px 0px 1px #e56353;
    cursor: default;
}

/********************************************************************************************* 
10. packaging end
*********************************************************************************************/
.sp_view_more {
    margin: 30px auto;
    position: relative;
    z-index: 1;
    display: none;
}

.sp_view_more .sp_btn {
    background-color: #5c669f;
    height: 40px;
    line-height: 42px;
    min-width: 136px;
    font-size: 14px;
}

.sp_view_more .sp_btn:hover {
    background-color: var(--main-color);
}

.sp_view_more::after,
.sp_view_more::before {
    content: "";
    position: absolute;
    top: 50%;
    height: 1px;
    background-color: #e8ebf3;
    z-index: -1;
}

.sp_view_more::before {
    left: 0;
    right: 50%;
    margin-right: 98px;
}

.sp_view_more::after {
    left: 50%;
    right: 0;
    margin-left: 98px;
}

.sp_view_more_with_hide {
    display: block;
}

.sp_view_more.sp_view_more_new {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 16px auto;
}

.sp_view_more.sp_view_more_new>.sp_view_more_btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 30px;
    border-radius: 50px;
    color: var(--main-color);
    font-weight: 600;
    cursor: pointer;
}

.sp_view_more.sp_view_more_new>.sp_view_more_btn svg path {
    fill: var(--main-color);
}

.sp_view_more.sp_view_more_new>.sp_view_more_btn:hover {
    box-shadow: 0px 0px 0px 1px var(--main-color);
    background-color: rgba(var(--main-color-rgb), 0.06);
}

/********************************************************************************************* 
11. assets uploader start
*********************************************************************************************/
.sp_assets_uploader_wrapper {
    display: flex;
    align-items: flex-start;
    margin-bottom: 30px;
    gap: 30px;
}

.sp_assets_uploader_wrapper .sp_assets_sidebar_wrapper {
    flex: none;
}

.sp_assets_uploader_wrapper .sp_assets_sidebar_wrapper .sp_input_wrapper.hasvalue>.sp_input {
    padding-top: 0;
}

.sp_assets_uploader_wrapper .sp_assets_sidebar {
    min-height: 500px;
    width: 300px;
    background-color: #eeeff3;
    padding: 15px;
}

.sp_assets_uploader_wrapper .sp_assets_sidebar>h3 {
    margin: 0;
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: 500;
}

.sp_assets_uploader_wrapper .sp_assets_sidebar>.sp_search_wrapper {
    margin-bottom: 15px;
}

.sp_assets_uploader_wrapper .sp_assets_sidebar>.sp_search_wrapper>input {
    height: 40px;
    border-radius: 6px;
    padding: 10px 10px 10px 40px;
    background-color: #ffffff;
}

.sp_assets_uploader_wrapper .sp_assets_sidebar>.sp_search_wrapper>.sp_search_icon {
    top: 3px;
    left: 3px;
    background-color: transparent;
}

.sp_assets_uploader_wrapper .sp_assets_sidebar>ul {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 450px;
    overflow: auto;
}

.sp_assets_uploader_wrapper .sp_assets_sidebar>ul>p {
    margin: 10px 0;
    font-size: 14px;
}

.sp_assets_uploader_wrapper .sp_assets_sidebar>ul>li {
    font-size: 14px;
    padding: 6px 5px 4px;
    cursor: pointer;
    border-radius: 5px;
    display: flex;
}

.sp_assets_uploader_wrapper .sp_assets_sidebar>ul>li:hover {
    color: var(--main-color);
}

.sp_assets_uploader_wrapper .sp_assets_sidebar>ul>li.active {
    background-color: var(--main-color);
    color: #ffffff;
}

.sp_assets_uploader_wrapper .sp_assets_sidebar>ul>li>.sp_cat_handle_drag {
    width: 15px;
    height: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    opacity: 0.2;
    cursor: move;
    margin-top: 2px;
}

.sp_assets_uploader_wrapper .sp_assets_sidebar>ul>li>.sp_cat_handle_drag>svg path {
    fill: #828282;
}

.sp_assets_uploader_wrapper .sp_assets_sidebar>ul>li:hover>.sp_cat_handle_drag {
    opacity: 1;
}

.sp_assets_uploader_wrapper .sp_assets_sidebar>ul>li:hover>.sp_cat_handle_drag>svg path {
    fill: var(--main-color);
}

.sp_assets_uploader_wrapper .sp_assets_sidebar>ul>li.active>.sp_cat_handle_drag {
    opacity: 1;
}

.sp_assets_uploader_wrapper .sp_assets_sidebar>ul>li.active>.sp_cat_handle_drag>svg path {
    fill: #ffffff;
}

.sp_assets_uploader_wrapper .sp_assets_sidebar>ul>li.ui-sortable-helper {
    background-color: #ffffff;
}

.sp_assets_uploader_wrapper .sp_assets_sidebar>ul>li.active.ui-sortable-helper {
    background-color: var(--main-color);
}

.sp_assets_body {
    flex: 1;
    /* margin-left: 30px; */
}

.sp_assets_type_list {
    text-align: right;
    margin-bottom: 20px;
    display: flex;
    /* align-items: center; */
    justify-content: space-between;
    flex-direction: column-reverse;
}

.sp_assets_type_list ul {
    display: inline-flex;
    list-style: none;
    padding: 8px;
    margin: 0;
    background-color: #ffffff;
    box-shadow: 0px 10px 34px 0px rgba(0, 0, 0, 0.03);
    border-radius: 5px;
}

.sp_assets_type_list ul>li {
    flex: none;
}

.sp_assets_type_list ul>li>a {
    display: block;
    padding: 6px 15px;
    border-radius: 5px;
    font-size: 14px;
    color: var(--color-body);
    cursor: pointer;
}

.sp_assets_type_list ul>li>a:hover {
    color: var(--main-color);
}

.sp_assets_type_list ul>li>a.active {
    background-color: var(--main-color);
    color: #ffffff;
}

.sp_assets_type_list ul>li>a>span {
    /* display: block; */
    text-align: center;
    font-size: 10px;
    font-weight: 700;
    /* opacity: 0.8; */
}

.sp_assets_image_list>ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    grid-gap: 10px;
}

.sp_assets_image_list>ul>li.ui-sortable-helper>.sp_assets_image {
    box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.1);
}

.sp_assets_image_list>ul>li.ui-sortable-placeholder {
    visibility: visible !important;
    border: 1px dashed var(--main-color);
    border-radius: 5px;
}

.sp_assets_image_list>ul>li>.sp_assets_image {
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e4e5e8;
    background-color: #ffffff;
    border-radius: 5px;
    position: relative;
    cursor: move;
}

.sp_assets_image_list>ul>li.sp_corrupt>.sp_assets_image {
    border-color: #f44336;
    background-color: #fff7f7;
}

.sp_assets_image_list>ul>li>.sp_assets_image>.sp_checkbox {
    position: absolute;
    top: 10px;
    left: 10px;
}

.sp_assets_image_list>ul>li>.sp_assets_image>.sp_checkbox>label {
    display: flex;
}

.sp_assets_image_list>ul>li>.sp_assets_image>.sp_checkbox>label::before {
    background-color: #ffffff;
    margin: 0;
}

.sp_assets_image_list>ul>li>.sp_assets_image>.sp_checkbox>label::after {
    top: 5px;
}

.sp_assets_image_list>ul.sp_checkable>li>.sp_assets_image>.sp_checkbox>label {
    width: 88px;
    height: 70px;
}

.sp_assets_image_list>ul>li>.sp_assets_image>img {
    max-width: 70%;
    max-height: 70%;
}

.sp_assets_image_list>ul>li>p {
    text-align: center;
    margin: 0 auto;
    font-size: 13px;
    margin-top: 5px;
    max-width: 90%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.sp_rename_assets_img {
    position: absolute;
    top: -5px;
    right: 18px;
    width: 20px;
    height: 20px;
    border-radius: 5px;
    background-color: var(--main-color);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
}

.sp_rename_assets_img>svg {
    fill: #ffffff;
    width: 12px;
    height: auto;
}

.sp_assets_image_list>ul>li:hover>.sp_assets_image .sp_rename_assets_img {
    opacity: 1;
    visibility: visible;
}

.sp_assets_bulk_action {
    display: flex;
    align-items: center;
    height: 35px;
    margin-top: 15px;
}

.sp_assets_bulk_action>.sp_checkbox {
    margin-right: 15px;
}

.sp_assets_bulk_action>.sp_checkall_action {
    display: flex;
    align-items: center;
}

.sp_assets_bulk_action>.sp_checkall_action>.sp_input_wrapper {
    display: flex;
    align-items: center;
    margin: 0;
}

.sp_assets_bulk_action>.sp_checkall_action>.sp_input_wrapper>.sp_input {
    height: 35px;
    padding: 0 10px;
    font-size: 12px;
    border-radius: 5px;
    margin-right: 10px;
    width: auto;
}

.sp_assets_bulk_action .sp_btn {
    height: 35px;
    padding: 10px 15px;
    font-size: 12px;
    border-radius: 5px;
    line-height: inherit;
}

.sp_assets_bulk_action .sp_btn.delete {
    background-color: #ff6666;
}

.sp_assets_bulk_action.full_pages_ {
    display: none;
}

.sp_remove_assets_img {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 20px;
    height: 20px;
    border-radius: 5px;
    background-color: #f44336;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
}

.sp_remove_assets_img::before,
.sp_remove_assets_img::after {
    content: "";
    position: absolute;
    width: 9px;
    height: 2px;
    background-color: #ffffff;
    border-radius: 5px;
    transform: rotate(45deg);
}

.sp_remove_assets_img::after {
    transform: rotate(-45deg);
}

.sp_assets_image_list>ul>li:hover>.sp_assets_image .sp_remove_assets_img {
    opacity: 1;
    visibility: visible;
}

.sp_add_category_btn {
    display: inline-block;
    margin-top: 15px;
    margin-right: 15px;
}

.sp_manage_assets_cat_popup {
    position: fixed;
    top: 63px;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 60px 80px;
    background-color: #f8fafd;
    z-index: 999;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateY(10%);
    -moz-transform: translateY(10%);
    transform: translateY(10%);
}

.assets_cat_popup_open .sp_manage_assets_cat_popup {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    transform: translateY(0);
}

.sp_manage_assets_cat_popup table {
    width: 100% !important;
}

.sp_manage_assets_cat_popup .sp_template_heading,
.sp_manage_assets_cat_popup .sp_table_wrapper {
    max-width: 1520px;
    margin: 0 auto;
    margin-bottom: 40px;
}

.sp_uploader_open {
    margin-right: 15px;
}

.sp_file_uploader {
    margin-bottom: 20px;
    display: none;
}

.sp_file_uploader>.sp_dropzone {
    border: 1px dashed #dadada;
    border-radius: 8px;
    margin-bottom: 15px;
    max-height: 400px;
    overflow: auto;
}

.sp_file_uploader>.sp_dropzone.dz-drag-hover,
.sp_file_uploader>.sp_dropzone:hover {
    border-color: var(--main-color);
}

.sp_file_uploader .dropzone .dz-preview {
    margin: 10px;
}

.sp_file_uploader .dropzone .dz-preview.dz-image-preview {
    background: #f7f7f7;
}

.sp_file_uploader .dropzone .dz-preview .dz-image {
    width: 98px;
    height: 98px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sp_file_uploader .dropzone .dz-preview .dz-image img {
    width: 50px;
    height: 50px;
    object-fit: contain;
}

.sp_file_uploader .dropzone .dz-preview .dz-remove {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 20px;
    height: 20px;
    border-radius: 20px;
    background-color: #F44336;
    color: transparent;
    overflow: hidden;
    z-index: 25;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sp_file_uploader .dropzone .dz-preview .dz-remove::after,
.sp_file_uploader .dropzone .dz-preview .dz-remove::before {
    content: "";
    width: 10px;
    height: 2px;
    background-color: #ffffff;
    position: absolute;
    transform: rotate(45deg);
}

.sp_file_uploader .dropzone .dz-preview .dz-remove::before {
    transform: rotate(-45deg);
}

/********************************************************************************************* 
11. assets uploader end
*********************************************************************************************/

/********************************************************************************************* 
12. background themes start
*********************************************************************************************/
.sp_theme_wrapper_popup {
    position: fixed;
    top: 63px;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 60px 80px;
    background-color: #f8fafd;
    z-index: 999;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    transition: all 0.2s ease;
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateY(10%);
    -moz-transform: translateY(10%);
    transform: translateY(10%);
}

.theme_popup_open .sp_theme_wrapper_popup {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    transform: translateY(0);
}

.sp_theme_wrapper_popup .sp_back_arrow {
    cursor: pointer;
    width: 25px;
    height: 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    margin-right: 25px;
}

.sp_theme_wrapper_popup .sp_back_arrow>svg {
    width: 20px;
    height: 20px;
}

.sp_theme_wrapper_popup .sp_back_arrow>svg path {
    fill: var(--main-color);
}

/* theme editor popup start */
.sp_popup_wrapper#theme_editor_popup>.sp_popup_inner {
    max-width: 830px;
}

.sp_popup_wrapper#theme_editor_popup>.sp_popup_inner .sp_popup_body {
    margin-bottom: 0;
}

.sp_te_editor_wrapper {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-gap: 30px;
    /* align-items: start; */
    margin-bottom: 20px;
}

.sp_te_editor_sidebar {
    max-width: 300px;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    background-color: #f8fafd;
    position: relative;
}

.sp_te_editor_sidebar h3 {
    margin: 0;
    font-weight: 600;
    font-size: 14px;
}

.sp_te_editor_sidebar>p {
    font-size: 12px;
    margin: 0;
    margin-bottom: 10px;
}

.sp_te_editor_sidebar>ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #d4d4d4;
    margin-bottom: 10px;
}

.sp_te_editor_sidebar>ul>li {
    margin-right: 15px;
}

.sp_te_editor_sidebar>ul>li>a {
    display: block;
    padding: 6px 0;
    color: var(--color-heading);
    font-weight: 500;
    margin-bottom: -1px;
    font-size: 13px;
}

.sp_te_editor_sidebar>ul>li.active>a {
    color: var(--main-color);
    box-shadow: inset 0px -2px 0px var(--main-color);
}

.sp_te_editor_icon {
    position: absolute;
    top: 80px;
    left: 100%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.sp_te_editor_icon>svg {
    width: 18px;
    height: auto;
    fill: var(--main-color);
}

.sp_te_tab_wrapper {
    display: none;
}

.sp_te_tab_wrapper.active {
    display: block;
}

.sp_te_editor_sidebar .sp_search_wrapper {
    margin-bottom: 10px;
}

.sp_te_editor_sidebar .sp_search_wrapper>input {
    background-color: #ffffff;
}

.sp_te_editor_sidebar .sp_view_more {
    margin: 0;
}

.sp_bgt_list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 10px;
    max-height: 340px;
    overflow: auto;
    padding-right: 4px;
    margin-bottom: 15px;
}

.sp_bgt_item {
    background-color: #ffffff;
    box-shadow: 0px 0px 5px rgba(204, 204, 204, 0.20);
    border-radius: 5px;
    cursor: pointer;
}

.sp_bgt_item>.sp_bgt_img {
    background-color: #e8e8e8;
    border-radius: 5px;
    position: relative;
}

.sp_bgt_item>.sp_bgt_img>img {
    max-width: 100%;
}

.sp_bgt_item>.sp_bgt_img>.sp_bgt_overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.sp_bgt_item>.sp_bgt_img>.sp_bgt_btns {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 8px 8px 0 0;
    background-color: rgba(30, 31, 40, 0.60);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    transition: all 0.2s;
}

.sp_bgt_item:hover>.sp_bgt_img>.sp_bgt_btns {
    opacity: 1;
    visibility: visible;
}

.sp_bgt_item>.sp_bgt_img>.sp_bgt_btns>.sp_btn {
    font-size: 12px;
    height: 26px;
    line-height: 26px;
    min-height: inherit;
    padding: 0 10px;
    border-radius: 5px;
}

.sp_bgt_item>p {
    padding: 4px;
    margin: 0;
    font-size: 12px;
}

.sp_te_editor_content {
    padding: 15px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background-color: #f8fafd;
    min-height: 300px;
    /* max-width: 300px; */
}

.sp_te_editor_content h3 {
    margin: 0;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 10px;
}

.sp_campaign_list.load_themes_list>.sp_campaign_item>.sp_campaign_inner>.sp_camp_img>img {
    background-color: #ffffff;
    height: 192px;
}

.sp_campaign_list.load_themes_list>.sp_campaign_item>.sp_campaign_inner>.sp_camp_img>svg {
    width: 100%;
    height: auto;
    vertical-align: middle;
    display: none;
}

.sp_campaign_list.load_themes_list>.sp_campaign_item>.sp_campaign_inner>.sp_camp_img.sp_no_theme_thumb>svg {
    display: block;
}

.sp_campaign_list.load_themes_list>.sp_campaign_item>.sp_campaign_inner>.sp_camp_img>.sp_camp_img_overlay {
    background-color: #ffffff;
}

.listview_theme .sp_campaign_list.load_themes_list>.sp_campaign_item>.sp_campaign_inner>.sp_camp_img>img,
.listview_theme .sp_campaign_list.load_themes_list>.sp_campaign_item>.sp_campaign_inner>.sp_camp_img>.sp_camp_img_overlay {
    display: none;
}

.listview_theme .sp_campaign_list.load_themes_list>.sp_campaign_item>.sp_campaign_inner>.sp_camp_img>svg {
    display: block;
}

.sp_teed_bg_list {
    max-height: 490px;
    padding-right: 5px;
    overflow-x: hidden;
    overflow-y: auto;
}

.sp_teed_bg_list .sp_campaign_list {
    display: grid;
    /* grid-template-columns: 1fr 1fr 1fr; */
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    position: relative;
}

#theme_editor_popup .sp_teed_bg_list .sp_campaign_list {
    grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
}

.sp_teed_bg_list .sp_campaign_list>.sp_campaign_item {
    width: auto;
}

.sp_teed_bg_list .sp_campaign_list>.sp_campaign_item.ui-sortable-placeholder {
    visibility: visible !important;
    border-radius: 6px;
    background-color: rgba(var(--main-color-rgb), 0.1);
    width: 92%;
    margin: 0 auto;
    margin-bottom: 20px;
    box-shadow: 0px 0px 0px 1px var(--main-color);
}

.sp_teed_bg_list .sp_campaign_list>.sp_campaign_item>.sp_campaign_inner>.sp_camp_img>img {
    border-radius: 8px;
}

.sp_teed_bg_list .sp_campaign_list>.sp_campaign_item>.sp_campaign_inner>.sp_camp_img>.sp_camp_overlay {
    cursor: move;
    border-radius: 8px;
}

.sp_teed_bg_list .sp_campaign_list>.sp_campaign_item>.sp_campaign_inner>.sp_camp_img>.sp_camp_overlay .sp_btn {
    cursor: move;
    pointer-events: none;
}

.sp_teed_bg_list .sp_campaign_list>.sp_campaign_item>.sp_campaign_inner>.sp_camp_img>.sp_camp_overlay .sp_btn>svg {
    fill: #ffffff !important;
    margin: 0;
}

.sp_teed_bg_list .sp_campaign_list>.sp_campaign_item>.sp_campaign_inner>.sp_camp_img>.sp_camp_overlay .sp_btn>svg path {
    fill: #ffffff !important;
}

.sp_teed_bg_list .sp_campaign_list>.sp_campaign_item>.sp_campaign_inner>.sp_camp_detail {
    display: none;
}

/* theme editor popup end */
/********************************************************************************************* 
12. background themes end
*********************************************************************************************/

/********************************************************************************************* 
13. social view start
*********************************************************************************************/
.sp_social_camp_list {
    display: grid;
    grid-template-columns: auto;
    grid-gap: 20px;
    margin-bottom: 30px;
}

.sp_social_camp_list.supersub_active,
.sp_social_camp_list.thumbnail_active,
.sp_social_camp_list.social_active,
.sp_social_camp_list.marketing_active {
    grid-template-columns: 20% 1fr;
}

/* .sp_social_camp_list > .sp_social_camp_sidebar{
    width: 100%;
} */
.sp_social_size_list {
    background: #FFFFFF;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    padding: 25px;
}

.sp_social_size_list>h3 {
    font-size: 14px;
    margin: 0;
    margin-bottom: 10px;
    font-weight: 600;
    display: none;
}

.sp_social_size_list>ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sp_social_size_list>ul>li {
    cursor: pointer;
    font-size: 14px;
}

.sp_social_size_list>ul>li>span {
    padding: 10px 0;
    display: block;
}

.sp_social_camp_sidebar.print_size_filters .sp_social_size_list>ul>li,
.sp_social_camp_sidebar.marketing_size_filters .sp_social_size_list>ul>li,
.sp_social_camp_sidebar.social_size_filters .sp_social_size_list>ul>li,
.sp_social_camp_sidebar.thumbnail_size_filters .sp_social_size_list>ul>li {
    padding: 10px 0;
    display: block;
}

.sp_social_size_list>ul>li.active,
.sp_social_size_list>ul>li:hover {
    color: var(--main-color);
}

.sp_social_size_list>ul>li>span.spj_supertype_span {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sp_social_size_list>ul>li>ul {
    list-style: none;
    padding-left: 15px;
    margin: 0;
    font-size: 12px;
    margin-bottom: 5px;
}

.sp_social_size_list>ul>li>ul>li {
    color: var(--color-body);
}

.sp_social_size_list>ul>li>ul>li>span {
    padding: 6px 0;
    display: flex;
    align-items: center;
}

.sp_social_size_list>ul>li>ul>li>span:before {
    content: "";
    width: 6px;
    height: 1px;
    border-radius: 5px;
    display: inline-block;
    margin-right: 8px;
    background-color: var(--color-body);
    vertical-align: middle;
    margin-top: -1px;
    opacity: 0.5;
}

.sp_social_size_list>ul>li>ul>li.active,
.sp_social_size_list>ul>li>ul>li:hover {
    color: var(--main-color);
}

.sp_social_size_list>ul>li>ul>li:hover>span:before {
    opacity: 1;
    background-color: var(--main-color);
}

.sp_social_camp_list.supersub_active>.sp_social_camp_body>.sp_campaign_list,
.sp_social_camp_list.supersub_active>.sp_social_camp_body>.sp_template_list,
.sp_social_camp_list.thumbnail_active>.sp_social_camp_body>.sp_campaign_list,
.sp_social_camp_list.thumbnail_active>.sp_social_camp_body>.sp_template_list,
.sp_social_camp_list.marketing_active>.sp_social_camp_body>.sp_campaign_list,
.sp_social_camp_list.marketing_active>.sp_social_camp_body>.sp_template_list,
.sp_social_camp_list.social_active>.sp_social_camp_body>.sp_campaign_list,
.sp_social_camp_list.social_active>.sp_social_camp_body>.sp_template_list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(20%, 1fr));
}

.sp_social_camp_list.supersub_active>.sp_social_camp_body>.sp_campaign_list>.sp_campaign_item,
.sp_social_camp_list.supersub_active>.sp_social_camp_body>.sp_template_list>.sp_template_item,
.sp_social_camp_list.thumbnail_active>.sp_social_camp_body>.sp_campaign_list>.sp_campaign_item,
.sp_social_camp_list.thumbnail_active>.sp_social_camp_body>.sp_template_list>.sp_template_item,
.sp_social_camp_list.marketing_active>.sp_social_camp_body>.sp_template_list>.sp_campaign_item,
.sp_social_camp_list.marketing_active>.sp_social_camp_body>.sp_template_list>.sp_template_item,
.sp_social_camp_list.social_active>.sp_social_camp_body>.sp_campaign_list>.sp_campaign_item,
.sp_social_camp_list.social_active>.sp_social_camp_body>.sp_template_list>.sp_template_item {
    width: 100%;
}

/* .sp_social_size_list > ul > li.spj_supermenu_accordion > ul{
    display: none;
}
.sp_social_size_list > ul > li.spj_supermenu_accordion > span:after{
    content: '';
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid var(--color-body);
} */
/********************************************************************************************* 
13. social view end
*********************************************************************************************/

/********************************************************************************************* 
14. tutorials end
*********************************************************************************************/
.sp_tuto_wrapper {
    display: grid;
    grid-template-columns: 340px auto;
    margin-bottom: 40px;
    align-items: flex-start;
}

.sp_tuto_wrapper>.sp_tuto_sidebar {
    margin-right: 30px;
    background-color: #ffffff;
    padding: 30px;
    margin-bottom: 15px;
}

.sp_tuto_sidebar .sp_search_wrapper {
    margin-bottom: 15px;
    max-width: inherit;
}

.sp_tuto_heading {
    font-size: 16px;
    font-weight: bold;
    color: var(--color-heading);
    margin-bottom: 15px;
}

.sp_tuto_topic_list .panel .panel-title {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
}

.sp_tuto_topic_list .panel .panel-title>a {
    display: block;
    color: inherit;
    padding: 10px 0;
    border-bottom: 1px solid #F2F2F2;
    position: relative;
}

.sp_tuto_topic_list .panel:last-child .panel-title>a {
    border-bottom: none;
}

.sp_tuto_topic_list .panel:first-child .panel-title>a {
    color: var(--main-color);
}

.sp_tuto_topic_list .panel:first-child .panel-title>a[aria-expanded="false"] {
    color: var(--color-heading);
}

.sp_tuto_topic_list .panel .panel-title>a[aria-expanded="true"] {
    color: var(--main-color);
}

.sp_tuto_topic_list .panel .panel-title>a>span {
    content: "";
    position: absolute;
    top: 14px;
    right: 0px;
    font-family: cursive;
    font-size: 20px;
    color: #909090;
    font-weight: 300;
    width: 12px;
    height: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    transform: rotate(90deg);
}

.sp_tuto_topic_list .panel .panel-title>a>span:before,
.sp_tuto_topic_list .panel .panel-title>a>span:after {
    content: "";
    width: 5px;
    height: 1px;
    background-color: #909090;
    position: absolute;
    transform: rotate(45deg);
    transform-origin: 5px center;
}

.sp_tuto_topic_list .panel .panel-title>a>span:after {
    transform: rotate(-45deg);
}

.sp_tuto_topic_list .panel:first-child .panel-title>a>span:before,
.sp_tuto_topic_list .panel:first-child .panel-title>a>span:after,
.sp_tuto_topic_list .panel .panel-title>a[aria-expanded="true"]>span:before,
.sp_tuto_topic_list .panel .panel-title>a[aria-expanded="true"]>span:after {
    background-color: var(--main-color);
}

.sp_tuto_topic_list .panel:first-child .panel-title>a[aria-expanded="false"]>span:before,
.sp_tuto_topic_list .panel:first-child .panel-title>a[aria-expanded="false"]>span:after {
    background-color: #909090;
}

.sp_tuto_topic_list .panel:first-child .panel-title>a>span,
.sp_tuto_topic_list .panel .panel-title>a[aria-expanded="true"]>span {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    transform: rotate(0deg);
}

.sp_tuto_topic_list .panel:first-child .panel-title>a[aria-expanded="false"]>span {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    transform: rotate(90deg);
}

.sp_tuto_topic_list .panel .panel-body {
    padding: 10px 0 0;
}

.load_search_topic_list {
    display: none;
}

.sp_tuto_topic_subcat_list {
    padding: 0;
    margin: 0;
    list-style: none;
}

.sp_tts_item {
    margin-bottom: 5px;
    cursor: pointer;
    color: var(--color-body);
    padding: 5px 10px;
    border-radius: 5px;
}

.sp_tts_item:hover {
    color: var(--main-color);
}

.sp_tts_item.active {
    background-color: var(--main-color);
    color: #ffffff;
}

.sp_tts_item>.sp_ttsi_icon {
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    background-color: #F0F3F8;
    margin-right: 10px;
    flex: none;
}

.sp_tts_item.active>.sp_ttsi_icon,
.sp_tts_item:hover>.sp_ttsi_icon {
    background-color: var(--main-color);
}

.sp_tts_item>.sp_ttsi_icon>svg {
    width: 12px;
    height: auto;
}

.sp_tts_item>.sp_ttsi_icon>svg path {
    fill: var(--color-body);
}

.sp_tts_item.active>.sp_ttsi_icon>svg path,
.sp_tts_item:hover>.sp_ttsi_icon>svg path {
    fill: #ffffff;
}

.sp_td_iframe_wrapper {
    max-width: 800px;
    margin-bottom: 20px;
}

.sp_td_iframe {
    float: none;
    clear: both;
    width: 100%;
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 0;
    margin-bottom: 15px;
}

.sp_td_iframe iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 5px;
    border: 1px solid #efefef;
    border-radius: 5px;
    box-shadow: 0px 0px 30px rgb(0, 0, 0, 0.04);
}

.sp_td_pdf_viewer {
    height: 100vh;
}

.sp_td_pdf_viewer iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.sp_tuto_details {}

.sp_tuto_details .sp_td_title {
    margin: 0;
    font-size: 30px;
    margin-bottom: 25px;
    font-weight: 400;
}

.sp_tuto_details .sp_td_title .sp_back_arrow {
    cursor: pointer;
    width: 25px;
    height: 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    display: none;
}

.sp_tuto_details .sp_td_title .sp_back_arrow>svg {
    width: 20px;
    height: 20px;
}

.sp_tuto_details .sp_td_title .sp_back_arrow>svg path {
    fill: var(--main-color);
}

.sp_tuto_details .sp_td_author {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
}

.sp_tuto_details .sp_td_author>.sp_td_author_icon {
    width: 35px;
    height: 35px;
    background-color: var(--main-color);
    color: #ffffff;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    margin-right: 8px;
}

.sp_tuto_details .sp_td_author>.sp_td_author_name {
    font-size: 15px;
    color: var(--color-heading);
    font-weight: 600;
}

.sp_tuto_details .sp_td_date {
    margin: 0;
    font-size: 12px;
    margin-bottom: 20px;
    display: none;
}

.sp_tuto_details .sp_td_description {
    font-size: 15px;
    color: #565656;
}

.sp_tuto_details .sp_td_description p {
    margin: 0;
    margin-bottom: 15px;
}

.sp_tuto_details .sp_td_description img {
    max-width: 100%;
    margin: 15px auto;
    padding: 5px;
    border: 1px solid #efefef;
    border-radius: 5px;
    box-shadow: 0px 0px 30px rgb(0, 0, 0, 0.04);
}

.sp_tuto_details .sp_td_description ol li,
.sp_tuto_details .sp_td_description ul li {
    margin-bottom: 10px;
}

.sp_tuto_details .sp_td_image {
    margin-bottom: 15px;
}

.sp_tuto_details .sp_td_image img {
    max-width: 100%;
}

.sp_tuto_wrapper .sp_tuto_content .sp_tuto_details .sp_td_title {
    margin-bottom: 15px;
}

.sp_tuto_wrapper .sp_tuto_content .load_sub_category_list>h3 {
    margin: 0;
    margin-bottom: 20px;
    font-size: 25px;
    font-weight: 400;
}

.sp_tuto_wrapper .sp_tuto_content .sp_suto_sub_cat_title {
    display: block;
}

.sp_tuto_wrapper .sp_tuto_content .sp_addtuto_list_item {
    cursor: pointer;
    border: none;
    padding: 18px 30px;
}

.sp_tuto_wrapper .sp_tuto_content .sp_addtuto_list_item:hover {
    background-color: rgba(var(--main-color-rgb), 0.05);
    box-shadow: 0px 0px 0px 1px var(--main-color);
}

.sp_tuto_wrapper .sp_tuto_content .sp_addtuto_list_item>.sp_atli_heading>h3 {
    font-size: 16px;
    font-weight: 400;
    color: var(--color-body);
}

.sp_tuto_wrapper .sp_tuto_content .sp_addtuto_list_item:hover>.sp_atli_heading>h3 {
    color: var(--main-color);
}

.sp_tuto_wrapper .sp_tuto_content .sp_tuto_sub_cat_wrapper:last-child {
    border-bottom: none;
}

.sp_tuto_wrapper .sp_tuto_content .sp_addtuto_list_item>.sp_atli_heading {
    padding-right: 0;
    display: block;
}

/* tutorials admin start */
.sp_addtuto_wrapper {
    display: grid;
    margin-bottom: 30px;
    grid-template-columns: 340px auto;
    align-items: flex-start;
}

.sp_addtuto_wrapper>.sp_addtuto_sidebar {
    background-color: #eeeff3;
    padding: 15px;
}

.sp_addtuto_list {
    margin-left: 30px;
}

.sp_addtuto_wrapper>.sp_addtuto_sidebar>h3 {
    margin: 0;
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: 500;
}

.sp_addtuto_wrapper>.sp_addtuto_sidebar>.sp_search_wrapper {
    margin-bottom: 15px;
    max-width: inherit;
}

.sp_addtuto_wrapper>.sp_addtuto_sidebar>.sp_search_wrapper>input {
    height: 40px;
    border-radius: 6px;
    padding: 10px 10px 10px 40px;
    background-color: #ffffff;
}

.sp_addtuto_wrapper>.sp_addtuto_sidebar>.sp_search_wrapper>.sp_search_icon {
    top: 3px;
    left: 3px;
    background-color: transparent;
}

.sp_addtuto_cat_list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sp_addtuto_cat_list>li {
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    position: relative;
}

.sp_addtuto_cat_list>li .sp_cat_handle_drag {
    position: absolute;
    top: 8px;
    left: 5px;
    width: 15px;
    height: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    opacity: 0.2;
    cursor: move;
}

.sp_addtuto_cat_list>li .sp_cat_handle_drag>svg {
    fill: #828282;
}

.sp_addtuto_cat_list>li:hover .sp_cat_handle_drag {
    opacity: 1;
}

.sp_addtuto_cat_list>li:hover .sp_cat_handle_drag>svg {
    fill: var(--main-color);
}

.sp_addtuto_cat_list>li.active .sp_cat_handle_drag {
    opacity: 1;
}

.sp_addtuto_cat_list>li.active .sp_cat_handle_drag>svg {
    fill: #ffffff !important;
}

.sp_addtuto_cat_list>li>p {
    margin: 0;
    flex: 1;
    padding: 6px 8px 5px;
    padding-right: 50px;
    border-radius: 5px;
    padding-left: 30px;
}

.sp_addtuto_cat_list>li:hover>p {
    color: var(--main-color);
}

.sp_addtuto_cat_list>li.active>p {
    background-color: var(--main-color);
    color: #ffffff;
}

.sp_addtuto_cat_list .sp_acl_actions {
    position: absolute;
    top: 4px;
    right: 0;
    display: flex;
    align-items: center;
    opacity: 0;
    visibility: hidden;
}

.sp_addtuto_cat_list li:hover .sp_acl_actions {
    opacity: 1;
    visibility: visible;
}

.sp_addtuto_cat_list .sp_acl_actions>.sp_acl_btn {
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.sp_addtuto_cat_list .sp_acl_actions>.sp_acl_btn>svg {
    width: auto;
    height: 14px;
    fill: var(--main-color);
}

.sp_addtuto_cat_list>li.active .sp_acl_actions>.sp_acl_btn>svg path,
.sp_addtuto_cat_list>li.active .sp_acl_actions>.sp_acl_btn>svg {
    fill: #ffffff;
}

.sp_addtuto_list_innner {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
}

.sp_addtuto_list_item {
    background: #FFFFFF;
    border: 1px solid #E4E5E8;
    border-radius: 5px;
    margin-bottom: 15px;
    position: relative;
    padding: 12px 25px;
}

.sp_addtuto_list_item:hover {
    border-color: var(--main-color);
}

.sp_addtuto_list_item.ui-sortable-placeholder {
    visibility: visible !important;
    background-color: rgba(var(--main-color-rgb), 0.04);
    border: 1px dashed var(--main-color);
}

.sp_addtuto_list_item>.sp_tut_handle_drag {
    position: absolute;
    top: 50%;
    left: -8px;
    width: 16px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    cursor: move;
    background-color: white;
    border: 1px solid #e0e0e0;
    border-radius: 3px;
    margin-top: -12px;
    opacity: 0;
    visibility: hidden;
}

.sp_addtuto_list_item>.sp_tut_handle_drag>svg {
    fill: var(--main-color);
}

.sp_addtuto_list_item:hover>.sp_tut_handle_drag {
    opacity: 1;
    visibility: visible;
}

.sp_addtuto_list_item>.sp_atli_heading {
    padding-right: 50px;
    display: flex;
    align-items: center;
}

.sp_addtuto_list_item>.sp_atli_heading>h3 {
    font-weight: 600;
    font-size: 16px;
    margin: 0;
    margin-bottom: 2px;
}

.sp_addtuto_list_item>.sp_atli_date {
    margin: 0;
    font-size: 12px;
    color: #a7a7a7;
}

.sp_atli_actions {
    position: absolute;
    top: 18px;
    right: 18px;
    display: flex;
    align-items: center;
    opacity: 0;
    visibility: hidden;
}

.sp_addtuto_list_item:hover .sp_atli_actions {
    opacity: 1;
    visibility: visible;
}

.sp_atli_actions>.sp_atli_btn {
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.sp_atli_actions>.sp_atli_btn>svg {
    width: auto;
    height: 14px;
    fill: var(--main-color);
}

#add_tutorial_popup .sp_camp_type_wrapper>.sp_camp_type_item {
    margin-bottom: 0;
}

#add_tutorial_popup .sp_upload_image_box {
    max-width: inherit;

}

#add_tutorial_popup .sp_upload_image_box>label {
    min-height: 160px;
}

#add_tutorial_popup .sp_upload_image_box>label>p {
    bottom: 0;
    background-color: #fff;
    padding: 6px 10px;
    margin: 0;
    margin-top: 5px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 600;
    color: #4caf50;
    display: none;
}

#add_tutorial_popup .sp_camp_type_wrapper>.sp_camp_type_item>.sp_camp_type_inner>label>span {
    background-color: #ffffff;
}

.tuto_input {
    display: none;
}

.tox-tinymce-aux {
    z-index: 9999 !important;
}

.tox .tox-statusbar {
    display: none !important;
}

.sp_cal_post_text_editor_wrapper .tox-toolbar__primary {
    justify-content: flex-end;
    border-top-color: #e9e9f4 !important;
    background-color: rgba(var(--main-color-rgb), 0.04) !important;
    border-radius: 0 0 10px 10px;
}

.sp_cal_post_text_editor_wrapper .tox-tinymce {
    border-color: #e9e9f4;
    border-radius: 10px;
}

.sp_tutorial_preview_popup {
    position: fixed;
    top: 63px;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #f8fafd;
    padding: 0px !important;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    transition: all 0.2s;
}

.sp_tutorial_preview_popup.in {
    opacity: 1;
    visibility: visible;
}

.sp_tutorial_preview_popup .sp_tuto_content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 50px 20px;
    overflow: auto;
}

.sp_tutorial_preview_popup .sp_tuto_content .sp_tuto_details {
    max-width: 1200px;
    margin: 0 auto;
    background-color: #ffffff;
    padding: 30px;
    position: relative;
}

.sp_tutorial_preview_popup .sp_popup_close {
    position: fixed;
    top: 80px;
    z-index: 11;
}

.sp_add_tutorial_popup {
    position: fixed;
    top: 63px;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #f8fafd;
    padding: 0px !important;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    transition: all 0.2s;
}

.sp_add_tutorial_popup.in {
    opacity: 1;
    visibility: visible;
}

.sp_add_tutorial_popup>.sp_popup_inner {
    margin: 0 auto;
    padding: 30px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: auto;
}

.sp_add_tutorial_popup>.sp_popup_inner .sp_popup_header,
.sp_add_tutorial_popup>.sp_popup_inner .sp_popup_body,
.sp_add_tutorial_popup>.sp_popup_inner .sp_popup_footer {
    max-width: 1200px;
    margin: 0 auto;
}

.sp_add_tutorial_popup .sp_camp_type_wrapper {
    justify-content: flex-start;
    margin-top: 30px;
}

.sp_add_tutorial_popup .sp_popup_close {
    position: fixed;
    top: 80px;
}


.sp_media_manager_popup {
    position: fixed;
    top: 63px;
    right: 0;
    bottom: 0;
    width: 440px;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s;
    transform: translateX(100%);
}

.sp_media_manager_popup.in {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

.sp_media_manager_popup_inner {
    background-color: #ffffff;
    box-shadow: 0px 10px 34px rgb(0, 0, 0, 0.03);
    padding: 30px;
    overflow: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.sp_media_manager_popup .sp_popup_tab,
.sp_media_manager_popup .sp_page_title {
    margin-bottom: 15px;
}

.sp_media_manager_popup .ed_image_list>.ed_imglist_item>.ed_image {
    background-color: transparent;
    border-color: #cccfde;
}


.sp_tuto_sub_cat_wrapper {
    border-bottom: 1px solid #D7E0EB;
    padding-bottom: 15px;
    margin-bottom: 30px;
}

.sp_add_newsubcategory_link {
    background-color: rgba(var(--main-color-rgb), 0.1);
    border: 1px dashed var(--main-color);
    border-radius: 5px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--main-color);
    margin-bottom: 15px;
    cursor: pointer;
    font-size: 16px;
}

.sp_add_newsubcategory_link:hover {
    background-color: rgba(var(--main-color-rgb), 0.15);
}

.sp_suto_sub_cat_title {
    display: grid;
    align-items: center;
    grid-template-columns: auto 50px;
    margin: 0;
    margin-bottom: 15px;
}

.sp_suto_sub_cat_title>.sp_ssct_action {
    display: flex;
    align-items: center;
}

.sp_suto_sub_cat_title>.sp_ssct_action>.sp_acl_btn {
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.sp_suto_sub_cat_title>.sp_ssct_action>.sp_acl_btn>svg {
    width: auto;
    height: 14px;
    fill: var(--main-color);
}

.sp_mm_tab_wrapper {
    display: none;
}

.sp_mm_tab_wrapper.active {
    display: block;
}

.sp_mm_tab_wrapper>.text-right {
    margin-bottom: 10px;
}

.sp_tuto_media_uploader {
    display: none;
}

.sp_upload_btn {
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    color: var(--main-color);
    margin-left: 10px;
    cursor: pointer;
}

.sp_upload_btn>svg {
    fill: var(--main-color);
    margin-right: 5px;
    width: 17px;
    height: auto;
}

.sp_pdf_list>.sp_pdf_item {
    padding: 12px;
    border-radius: 5px;
    background-color: #F8F8F8;
    color: var(--color-body);
    margin-bottom: 15px;
    border: 1px solid transparent;
    position: relative;
    padding-right: 40px;
    font-weight: 500;
    cursor: pointer;
}

.sp_pdf_list>.sp_pdf_item:hover {
    color: var(--main-color);
    border-color: var(--main-color);
    background-color: #E2EEFE;
}

.sp_pdf_list>.sp_pdf_item>p {
    margin: 0;
}

.sp_pdf_list>.sp_pdf_item>.sp_pdfa_btn {
    position: absolute;
    top: 14px;
    right: 14px;
}

.sp_pdf_viewer {
    margin-bottom: 20px;
}

.sp_pdf_viewer>a {
    display: inline-flex;
    align-items: center;
    padding: 15px;
    border-radius: 50px;
    background-color: #E0EDFF;
    color: var(--main-color);
    font-weight: 500;
}

.sp_pdf_viewer>a:hover {
    box-shadow: 0px 0px 0px 1px var(--main-color);
}

.sp_pdf_viewer>a:before {
    content: "";
    width: 20px;
    height: 20px;
    background-image: url('../images/tutorial_pdf.svg');
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: 10px;
}

/* tutorials admin end */

.collapsing {
    position: relative;
    height: 0;
    overflow: hidden;
    -webkit-transition-property: height, visibility;
    -o-transition-property: height, visibility;
    transition-property: height, visibility;
    -webkit-transition-duration: .35s;
    -o-transition-duration: .35s;
    transition-duration: .35s;
    -webkit-transition-timing-function: ease;
    -o-transition-timing-function: ease;
    transition-timing-function: ease
}


/* feedback box start */
.sp_tuto_feedback_wrapper {
    background-color: #ffffff;
    padding: 30px;
    border-radius: 5px;
    margin: 30px auto;
    display: none;
}

.sp_tuto_feedback_wrapper>.sp_tuto_feedback_head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sp_tuto_feedback_wrapper>.sp_tuto_feedback_head>h3 {
    margin: 0;
    font-weight: 500;
    display: flex;
    align-items: center;
}

.sp_tuto_feedback_wrapper>.sp_tuto_feedback_head>h3>span {
    color: var(--main-color);
    font-size: 16px;
    margin-right: 15px;
}

.sp_tf_top {
    height: 25px;
    display: flex;
    align-items: center;
    font-weight: 600;
    cursor: pointer;
}

.sp_tf_top>span {
    margin-right: 10px;
}

.sp_tf_top:hover {
    color: var(--main-color);
}

.sp_tf_top:hover>svg path {
    stroke: var(--main-color);
}

.sp_tuto_feedback_btns {
    display: flex;
    align-items: center;
}

.sp_tuto_feedback_btns>.sp_tfb_item {
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-right: 5px;
}

.sp_tuto_feedback_btns>.sp_tfb_item.tfb_yes:hover svg path {
    stroke: var(--main-color);
}

.sp_tuto_feedback_btns>.sp_tfb_item.tfb_no:hover svg path {
    fill: #FF6666;
}

.sp_tuto_feedback_body {
    border-top: 1px solid #f3f3f3;
    margin-top: 25px;
    padding-top: 20px;
    display: none;
}

.sp_tuto_feedback_body>h3 {
    margin: 0;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 400;
    color: var(--color-body);
}

/* feedback box end */

/********************************************************************************************* 
14. tutorials end
*********************************************************************************************/

/********************************************************************************************* 
15. dashboard start
*********************************************************************************************/
.sp_section {
    margin-top: 40px;
    /* padding-top: 30px;
    border-top: 1px solid var(--line-color); */
}

.sp_container>.sp_section:first-child {
    border-top: none;
    padding: 0;
}

.sp_section_heading {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sp_section_heading>h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.sp_section_heading>a {
    display: flex;
    align-items: center;
    font-weight: 600;
}

.sp_section_heading>a>svg {
    width: 14px;
    height: auto;
    margin-left: 10px;
}

.sp_section_heading>a>svg path {
    stroke: var(--main-color);
}

.sp_dash_wrapper {
    background-color: #F0F3F8;
    padding: 40px 0;
    margin-bottom: 40px;
}

.sp_dash_wrapper .sp_dash_inner {
    display: grid;
    /* grid-template-columns: 60% 20% 20%; */
    /* grid-template-columns: 59.4% 40.6%; */
    grid-template-columns: 40% 40% 20%;
    align-items: flex-start;
}

/* .sp_dash_wrapper .sp_dash_inner .sp_dash_ad:nth-last-child(2) {
    display: none;
} */

.sp_dash_ad {
    margin-left: 25px;
}

.sp_dash_ad>a {
    display: block;
    height: 100%;
    border-radius: 10px;
    overflow: hidden;
    cursor: default;
}

.sp_dash_ad>a[href] {
    cursor: pointer;
}

.sp_dash_ad>a>img,
.sp_dash_ad>a>svg {
    width: 100%;
    height: 100%;
    vertical-align: middle;
    object-fit: cover;
    max-height: 315px;
}

.sp_dash_ad.sp_dash_new_banner>a {
    height: auto;
    margin-bottom: 9px;
}

.sp_dash_ad.sp_dash_new_banner>a>img {
    height: auto;
    max-height: fit-content;
}

.sp_dash_banner_inner {
    display: grid;
    /* grid-template-columns: 60% 40%; */
    grid-template-columns: 100%;
    background: linear-gradient(96.88deg, #346AFD 15.44%, #7512FB 97.89%);
    box-shadow: 0px 10px 35px rgba(0, 0, 0, 0.03);
    border-radius: 15px;
    overflow: hidden;
    align-items: flex-end;
    position: relative;
}

.sp_dbi_content {
    padding: 31px 30px;
    position: relative;
    z-index: 1;
    white-space: nowrap;
}

.sp_dbi_content>h3 {
    margin: 0;
    font-weight: bold;
    font-size: 40px;
    color: #ffffff;
    margin-bottom: 10px;
}

.sp_dbi_content>p {
    margin: 0;
    font-size: 20px;
    color: #ffffff;
    margin-bottom: 30px;
}

.sp_dbi_content>ul {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-bottom: 20px;
}

.sp_dbi_content>ul>li {
    display: inline-flex;
    margin-right: 0px;
    width: 75px;
}

.sp_dbi_content>ul>li:last-child {
    margin-right: 0;
}

.sp_dbi_content>ul>li>a {
    text-decoration: none;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 10px;
    border-radius: 5px;
    width: 100%;
}

.sp_dbi_content>ul>li svg {
    width: 20px;
    height: 20px;
}

.sp_dbi_content>ul>li svg path {
    fill: #ffffff;
}

.sp_dbi_content>ul>li p {
    margin: 0;
    color: #ffffff;
    margin-top: 5px;
    font-size: 13px;
}

.sp_dbi_content>ul>li>a:hover {
    background-color: #ffffff;
}

.sp_dbi_content>ul>li>a:hover>p {
    color: var(--main-color);
}

.sp_dbi_content>ul>li>a:hover svg path {
    fill: var(--main-color);
}

.sp_dbi_content>.sp_dbi_viewall {
    width: 155px;
    height: 40px;
    background: #FFFFFF;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-weight: 600;
}

.sp_dbi_content>.sp_dbi_viewall:hover {
    box-shadow: 0px 0px 0px 1px #ffffff;
}

.sp_dbi_content>.sp_dbi_viewall>span {
    margin-right: 10px;
}

.sp_dbi_content>.sp_dbi_viewall>svg path {
    /* stroke: var(--main-color); */
}

.sp_dash_imp_btn {
    position: relative;
}

.sp_dash_imp_btn>label {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    border-radius: 50px;
    cursor: pointer;
}

.sp_dash_imp_btn>label>input {
    position: absolute;
    opacity: 0;
    left: -99999px;
}

.sp_dbi_img {
    position: relative;
    height: 100%;
}

.sp_dbi_img>svg {
    width: 100%;
    height: auto;
    vertical-align: middle;
    position: absolute;
    bottom: 0;
    right: 0;
    max-width: 40%;
    opacity: 0.16;
}

.sp_dbi_content>.sp_dbi_viewall.sp_bordered {
    border: 1px solid;
    color: #fff;
    background-color: transparent;
    padding: 0 25px;
    width: auto;
    margin-left: 6px;
}

.sp_dbi_content>.sp_dbi_viewall.sp_bordered:hover {
    box-shadow: none;
    background-color: rgba(255, 255, 255, 0.1);
}

/* admin dashboard start */
.sp_admin_wrapper {
    display: grid;
    grid-template-columns: minmax(0px, 1fr) 470px;
    gap: 20px;
    align-items: flex-start;
}

.sp_admin_dashboard_box {
    background-color: #ffffff;
    border: 1px solid #E8ECF4;
    border-radius: 6px;
    padding: 25px;
}

.sp_admin_dashboard_box>.sp_adb_heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
    margin-top: 30px;
}

.sp_admin_dashboard_box>.sp_adb_heading:first-child {
    margin-top: 0;
}

.sp_admin_dashboard_box>.sp_adb_heading>h3 {
    margin: 0;
    font-size: 13px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.sp_admin_dashboard_box>.sp_adb_heading .sp_input_wrapper_list {
    margin: 0;
    gap: 10px;
}

.sp_admin_dashboard_box>.sp_adb_heading .sp_input_wrapper {
    margin: 0;
}

.sp_admin_dashboard_box>.sp_adb_heading .sp_input_wrapper .sp_input {
    padding: 10px 15px;
    height: 44px;
    background-color: #FBFDFF;
    border: 1px solid #D7DDEC;
    border-radius: 6px;
    font-size: 14px;
    color: #919CB7;
    min-width: 200px;
}

.sp_admin_dashboard_box .select2-container {
    width: auto !important;
    min-width: 180px;
}

.sp_admin_detail_box_list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 12px;
}

.sp_admin_detail_box_list>.sp_admin_detail_box {
    margin: 0;
    text-align: center;
    justify-content: center;
}

.sp_admin_detail_box {
    padding: 15px 6px;
    margin-bottom: 20px;
    border-radius: 6px;
    background-color: #f8fafd;
    border: 1px solid #E8ECF4;
    display: flex;
    align-items: center;
    gap: 30px;
}

.sp_admin_detail_box>.sp_adb_icon {
    width: 82px;
    height: 82px;
    border-radius: 6px;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sp_admin_detail_box>.sp_adb_icon>svg {
    width: 38px;
    height: auto;
}

.sp_admin_detail_box>.sp_adb_icon>svg path {
    fill: var(--main-color);
}

.sp_admin_detail_box>.sp_adb_details>h3 {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    color: var(--main-color);
}

.sp_admin_detail_box>.sp_adb_details>p {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    margin-top: 6px;
}

.sp_admin_dashboard_box .sp_custom_table_wrapper {
    margin-bottom: 0;
}

.sp_admin_dashboard_box .sp_custom_table_wrapper .sp_ct_row>.sp_ct_col {
    padding: 10px 20px;
}

/* admin dashboard end */

.sp_dash_oto_banner_static_svg {
    cursor: pointer;
    margin-top: 14px;
    box-shadow: 0px 0px 0px 1px #ebd996;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.sp_dash_oto_banner_static_svg .sp_dobss_cd {
    position: absolute;
    width: 60%;
    height: 19px;
    left: 40%;
    top: 29.5%;
    font-weight: 700;
    font-size: 0.75vw;
    line-height: 22px;
    display: flex;
    align-items: center;
    text-transform: capitalize;
    color: #392F2F;
    display: none;
}

.sp_dash_oto_banner_static_svg .sp_dobss_notifi {
    position: absolute;
    width: 80%;
    left: 10%;
    top: 51.3%;
    font-weight: 700;
    font-size: 0.9vw;
    text-align: center;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #FFFFFF;
}

.sp_dash_oto_banner_static_svg .sp_dobss_notifi span {
    display: inline-block;
}

.sp_dash_oto_banner_static_svg>svg {
    width: 100%;
    height: auto;
    vertical-align: middle;
}

/********************************************************************************************* 
15. dashboard end
*********************************************************************************************/

/********************************************************************************************* 
16. animation start
*********************************************************************************************/
.cde_anim_preview_box {
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    bottom: 0px;
    background-color: #f8fafd;
    z-index: 1111;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
}

.cde_anim_preview_box.in {
    opacity: 1;
    visibility: visible;
}

.cde_anim_preview_inner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 200px;
}

h3.cde_anim_preview_title {
    text-align: center;
    padding: 20px 10px;
    animation: animPreviewAnim 0.2s;
    margin: 0;
    background-color: #f8fafd;
    position: fixed;
    top: 60px;
    left: 0;
    right: 400px;
    z-index: 2;
}

.cde_anim_preview_box .cde_editor_elements {
    animation: animPreviewAnim 0.3s;
}

@keyframes animPreviewAnim {
    0% {
        transform: translateY(30px);
    }

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

.modal-backdrop {
    display: none;
}

.sp_ed_right_btns .sp_ed_animation.sp_btn {
    position: absolute;
    right: 20px;
    display: flex;
    align-items: center;
    color: var(--main-color);
}

.sp_ed_right_btns .sp_ed_animation.sp_btn>svg {
    fill: var(--main-color);
    margin: 0;
    margin-left: 6px;
    width: 24px;
    height: auto;
    overflow: visible;
}

.sp_ed_right_btns .sp_ed_animation.sp_btn svg path {
    display: block;
}

/* .sp_ed_right_btns .sp_ed_animation.sp_btn:hover .cd_guy_anim_line1,
.sp_ed_right_btns .sp_ed_animation.sp_btn:hover .cd_guy_anim_line2,
.sp_ed_right_btns .sp_ed_animation.sp_btn:hover .cd_guy_anim_line3{
    animation: cd_guy_anim 1s;
    animation-fill-mode: forwards;
}
.sp_ed_right_btns .sp_ed_animation.sp_btn:hover .cd_guy_anim_line2{
    animation-delay: 0.2s;
}
.sp_ed_right_btns .sp_ed_animation.sp_btn:hover .cd_guy_anim_line3{
    animation-delay: 0.4s;
}

.sp_ed_right_btns .sp_ed_animation.sp_btn:hover .cd_guy_anim_body{
    animation: cd_guy_anim 1s;
    animation-fill-mode: forwards;
} */

@keyframes cd_guy_anim {
    0% {
        transform: translateX(-200px);
        opacity: 0;
    }

    100% {
        transform: translateX(0px);
        opacity: 1;
    }
}


.cde_anim_preview {
    margin-right: 400px;
    overflow: auto;
    padding: 0px 30px 30px 30px;
    position: absolute;
    top: 70px;
    left: 0;
    right: 0;
    bottom: 0;
}

.cde_anim_sidebar {
    position: fixed;
    top: 60px;
    right: 0;
    bottom: 0;
    background-color: #ffffff;
    width: 400px;
    display: flex;
    flex-direction: column;
    transition: all 0.3s cubic-bezier(0.88, 0.17, 0, 0.78);
    opacity: 0;
    transform: translateX(50px);
    z-index: 11;
}

.cde_anim_preview_box.in .cde_anim_sidebar {
    opacity: 1;
    transform: translateX(0px);
}

.cde_as_header {
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 3px 0px 10px rgb(0, 0, 0, 0.1);
    border-bottom: 1px solid #e8e8f9;
}

.cde_as_header .sp_btn {
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    padding: 0 20px;
}

.cde_as_header .sp_btn>svg {
    width: 12px;
    height: auto;
    vertical-align: middle;
    margin-top: -2px;
    margin-right: 4px;
}

.cde_as_body {
    display: grid;
    /* grid-template-columns: auto 150px; */
    grid-template-columns: auto;
    flex: 1;
    overflow: auto;
    position: relative;
}

.cde_as_layer {
    padding: 25px 15px;
    border-left: 1px solid #ECECEC;
    position: fixed;
    top: 0px;
    right: 0;
    width: 140px;
    bottom: 0;
    background-color: #f8fafd;
    display: none;
}

.cde_as_layer>h3 {
    margin: 0;
    margin-bottom: 15px;
    font-size: 16px;
    font-weight: 600;
}

.cde_asl_list {
    margin: 0px -15px;
}

.cde_asl_list>.cde_asl_item {
    padding: 5px 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 5px;
    position: relative;
}

.cde_asl_list>.cde_asl_item>svg {
    width: 13px;
    height: auto;
    margin-right: 6px;
    vertical-align: middle;
    flex: none;
}

.cde_asl_list>.cde_asl_item.active,
.cde_asl_list>.cde_asl_item:hover {
    color: var(--main-color);
}

.cde_asl_list>.cde_asl_item.active>svg path,
.cde_asl_list>.cde_asl_item:hover>svg path {
    fill: var(--main-color);
}

.cde_asl_list>.cde_asl_item>span {
    flex: 1;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 100px;
}

.cde_asl_list>.cde_asl_item>span.cde_asl_sortable {
    flex: none;
    width: 15px;
    height: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.2;
    cursor: move;
}

.cde_asl_list>.cde_asl_item>span.cde_asl_sortable svg path {
    fill: #828282;
}

.cde_asl_list>.cde_asl_item:hover>span.cde_asl_sortable {
    opacity: 1;
}

.cde_asl_list>.cde_asl_item:hover>span.cde_asl_sortable svg path {
    fill: var(--main-color);
}

.cde_asl_list>.cde_asl_item.active:before {
    content: "";
    position: absolute;
    top: 2px;
    bottom: 2px;
    left: -2px;
    width: 3px;
    background-color: var(--main-color);
    pointer-events: none;
}

.cde_asl_list>.cde_asl_item.ui-sortable-placeholder {
    background-color: #eaf0ff;
    border: 1px dashed var(--main-color);
    height: 26px;
    opacity: 0.6 !important;
    visibility: visible !important;
    width: 98%;
}

.cde_as_property {
    padding: 25px;
}

.cde_as_property>h3 {
    margin: 0;
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: 600;
}

.cde_as_property>p {
    margin: 0;
    margin-bottom: 15px;
    font-size: 14px;
}

.cde_anim_box {
    background-color: #F8F8FA;
    border: 1px solid #EFEFF6;
    border-radius: 10px;
    display: grid;
    align-items: center;
    grid-template-columns: 70px auto 42px;
    grid-gap: 15px;
    padding: 15px;
    margin-bottom: 15px;
}

.cde_anim_box>.cde_ab_icon {
    width: 70px;
    height: 70px;
    background-color: #FFFFFF;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cde_anim_box>.cde_ab_icon>img {
    width: 25px;
}

.cde_anim_box>.cde_ab_details>h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 5px;
    text-transform: capitalize;
}

.cde_anim_box>.cde_ab_details>p {
    margin: 0;
    font-size: 12px;
}

.cde_anim_box.active {
    border-color: var(--main-color);
    background-color: rgba(var(--main-color-rgb), 0.1);
}

.cde_ab_action_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    pointer-events: none;
    opacity: 0.3;
}

.cde_anim_box.active .cde_ab_action_btn {
    pointer-events: inherit;
    opacity: 1;
}

.cde_anim_box.active .cde_ab_action_btn svg circle {
    fill: rgba(var(--main-color-rgb), 0.3);
}

.cde_anim_box.active .cde_ab_action_btn:hover svg circle {
    fill: var(--main-color);
}

.cde_as_property .sp_input_wrapper .sp_input {
    border-radius: 6px;
    height: 44px;
    padding: 0 20px !important;
}

.cde_anim_filter_wrapper {
    position: relative;
}

.cde_anim_filter_wrapper>.cde_anim_filter_icon {
    width: auto;
    height: 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background-color: rgba(var(--main-color-rgb), 0.08);
    border-radius: 50px;
    border: 1px solid var(--main-color);
    padding: 0 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--main-color);
}

.cde_anim_filter_wrapper>.cde_anim_filter_icon>svg {
    margin-right: 5px;
}

.cde_anim_filter_wrapper>.cde_anim_filter_icon>svg path {
    fill: var(--main-color);
}

.cde_anim_filter_wrapper>.cde_anim_filter_dd {
    position: absolute;
    top: 100%;
    right: 0;
    background-color: #ffffff;
    border-radius: 5px;
    padding: 15px;
    z-index: 1;
    width: 200px;
    max-height: 270px;
    overflow: auto;
    box-shadow: 3px 0px 10px rgb(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
}

.cde_anim_filter_wrapper.open>.cde_anim_filter_dd {
    opacity: 1;
    visibility: visible;
}

.cde_anim_filter_wrapper>.cde_anim_filter_dd>ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cde_anim_filter_wrapper>.cde_anim_filter_dd>ul>li {
    padding: 5px 10px;
    cursor: pointer;
    font-size: 13px;
    border-radius: 30px;
}

.cde_anim_filter_wrapper>.cde_anim_filter_dd>ul>li.active,
.cde_anim_filter_wrapper>.cde_anim_filter_dd>ul>li:hover {
    color: var(--main-color);
    background-color: rgba(var(--main-color-rgb), 0.05);
}

.sp_animation_popup_actions .sp_play_anim {
    margin-right: 10px;
    width: 90px;
    min-width: inherit;
    padding: 0 5px;
}

.sp_animation_popup_actions .sp_play_anim>svg {
    width: 10px;
    height: auto;
    margin-right: 2px;
    margin-bottom: -1px;
}

.sp_animation_popup_actions .sp_play_anim>svg path {
    fill: var(--main-color);
}

/********************************************************************************************* 
16. animation end
*********************************************************************************************/

/********************************************************************************************* 
17. marketplace start
*********************************************************************************************/
/* header start */
.cdm_header_wrapper {
    position: sticky;
    top: 0;
    z-index: 9999;
    background-color: #ffffff;
    box-shadow: 0px 10px 34px rgba(0, 0, 0, 0.03);
}

.cdm_header_top {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px 0;
    justify-content: space-between;
}

.cdm_logo {
    flex: none;
}

.cdm_logo img {
    width: 144px;
}

.cdm_header_search_wrapper {
    height: 44px;
    display: flex;
    align-items: center;
    border: 1px solid #E4EAF4;
    border-radius: 5px;
    padding: 4px;
    flex: 1;
    max-width: 500px;
    background-color: #ffffff;
}

.cdm_header_search_wrapper>.cdm_search_icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.cdm_header_search_wrapper>input {
    height: 44px;
    flex: 1;
    border: none;
    background-color: transparent;
    outline: none;
    padding: 0;
    font-size: 14px;
}

.cdm_header_search_wrapper>.sp_btn {
    min-width: 125px;
    height: 34px;
    line-height: 34px;
    border-radius: 3px;
    font-size: 14px;
}

.cdm_header_right {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1;
    justify-content: flex-end;
    position: relative;
}

.cdm_header_action_btns {
    flex: none;
}

.cdm_header_action_btns>.sp_btn {
    height: 40px;
    line-height: 40px;
    border-radius: 5px;
    font-size: 14px;
}

.cdm_header_action_btns>.sp_btn.sp_btn_signup {
    min-width: 140px;
}

.cdm_header_icon_btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    flex: none;
}

.cdm_add_to_cart_icon>.cdm_add_to_cart_count {
    position: absolute;
    top: 3px;
    left: 22px;
    min-width: 15px;
    height: 15px;
    line-height: 16px;
    background-color: var(--main-color);
    border-radius: 15px;
    padding: 0px 3px;
    text-align: center;
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
}

.cdm_header_bottom {
    border-top: 1px solid #D0D9E8;
}

.cdm_header_type_slider .swiper-slide {
    width: auto !important;
}

.cdm_header_type_slider .sp_sub_menu_slider {
    padding: 0 !important;
}

.cdm_header_type_slider .cdm_header_menu_item {
    padding: 12px 0;
    cursor: pointer;
    font-weight: 600;
    position: relative;
}

.cdm_header_type_slider .cdm_header_menu_item:hover {
    color: var(--main-color);
}

.cdm_header_type_slider .cdm_header_menu_item.active {
    color: var(--main-color);
    box-shadow: inset 0px -2px 0px var(--main-color);
}

.cdm_header_type_slider .cdm_header_menu_item.cdm_hm_dd:after {
    content: "";
    display: inline-block;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-top: 4px solid #9e9e9e;
    margin-left: 2px;
    vertical-align: middle;
    margin-top: -1px;
}

.cdm_header_type_slider .cdm_header_menu_item.cdm_hm_dd:hover:after {
    border-top-color: var(--main-color);
}

/* dd menu start */
.cdm_header_type_slider ul.cdm_header_menu_item_dd {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    left: -999999999px;
}

/* .cdm_header_type_slider ul.cdm_header_menu_item_dd{
    position: absolute;
    top: 100%;
    left: 0;
    list-style: none;
    background-color: #ffffff;
    box-shadow: 0px 3px 6px 0px rgb(0 0 0 / 6%), 0px 3px 6px 0px rgb(0 0 0 / 23%);
    border-radius: 10px;
    padding: 15px;
    width: 200px;
}
.cdm_header_type_slider ul.cdm_header_menu_item_dd > li > a{
    display: block;
    padding: 10px;
} */
.cdm_menu_dd {
    position: fixed;
    background-color: #ffffff;
    box-shadow: 0px 3px 6px 0px rgb(0 0 0 / 6%), 0px 3px 6px 0px rgb(0 0 0 / 23%);
    border-radius: 0 0 10px 10px;
    padding: 15px;
    width: 200px;
    z-index: 999;
    animation: cdmDropdownAnim 0.2s cubic-bezier(0.71, -0.11, 0.25, 0.88);
    animation-fill-mode: forwards;
}

@keyframes cdmDropdownAnim {
    0% {
        transform: translateY(-10px);
        opacity: 0;
    }

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

.cdm_menu_dd>ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cdm_menu_dd>ul>li {
    position: relative;
}

.cdm_menu_dd>ul>li>a {
    display: block;
    padding: 6px 10px;
    white-space: nowrap;
    color: var(--color-body);
    font-size: 14px;
    border-radius: 4px;
    font-weight: 500;
    position: relative;
}

.cdm_menu_dd>ul>li.cdm_hm_dd>a:after {
    content: "";
    position: absolute;
    top: 50%;
    right: 10px;
    display: inline-block;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-top: 4px solid #9e9e9e;
    margin-left: 2px;
    vertical-align: middle;
    margin-top: -1px;
    transition: all 0.2s;
}

.cdm_menu_dd>ul>li.cdm_hm_dd>a:hover:after {
    transform: rotate(-90deg);
    border-top-color: var(--main-color);
}

.cdm_menu_dd>ul>li>a:hover {
    color: var(--main-color);
    background-color: rgba(var(--main-color-rgb), 0.10);
}

.cdm_menu_dd>ul>li>ul {
    position: absolute;
    top: 0;
    left: 100%;
    background-color: #ffffff;
    list-style: none;
    box-shadow: 0px 3px 6px 0px rgb(0 0 0 / 6%), 0px 3px 6px 0px rgb(0 0 0 / 23%);
    border-radius: 10px;
    padding: 15px;
    width: 200px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s cubic-bezier(0.71, -0.11, 0.25, 0.88);
    transform: translateX(-10px);
    z-index: 1;
}

.cdm_menu_dd>ul>li.dd_menu_left>ul {
    left: auto;
    right: 100%;
}

.cdm_menu_dd>ul>li:hover>ul {
    opacity: 1;
    visibility: visible;
    transform: translateX(0px);
}

.cdm_menu_dd>ul>li>ul>li>a {
    display: block;
    padding: 6px 10px;
    white-space: nowrap;
    color: var(--color-body);
    font-size: 14px;
    border-radius: 4px;
    font-weight: 500;
}

.cdm_menu_dd>ul>li>ul>li>a:hover {
    color: var(--main-color);
    background-color: rgba(var(--main-color-rgb), 0.10);
}

@media (max-width: 768px) {
    .cdm_menu_dd {
        left: 0 !important;
        width: 100%;
    }

    .cdm_menu_dd>ul>li>ul {
        left: auto !important;
        right: 0 !important;
    }
}

/* dd menu end */


.cdm_header_type_slider .sp_ssm_slider_btn {
    margin-top: 0;
    top: 0;
    bottom: 0;
    height: auto;
    box-shadow: none;
    width: 54px;
    outline: none;
}

.cdm_header_type_slider .sp_ssm_slider_btn.swiper-button-next {
    right: 0;
    justify-content: flex-end;
    background: linear-gradient(270deg, #FFFFFF 0%, rgba(240, 243, 248, 0) 118.83%);
}

.cdm_header_type_slider .sp_ssm_slider_btn.swiper-button-prev {
    left: 0;
    justify-content: flex-start;
    background: linear-gradient(270deg, rgba(240, 243, 248, 0) 0%, #FFFFFF 118.83%);
}

.cdm_header_search_toggle {
    display: none;
}

.cdm_header_right .sp_dropdown_wrapper {
    right: 0;
    min-width: 240px;
}

.cdm_header_right .sp_dropdown_wrapper>.sp_dropdown_inner>ul>li>a>svg {
    width: 14px;
    height: 14px;
}

.sp_account_switcher {
    /* margin: 0 -15px;
    margin-bottom: 15px; */
}

.sp_account_switcher>.sp_account_switcher_item {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 15px;
    align-items: center;
    padding: 8px 20px;
    color: var(--color-heading);
    font-size: 14px;
    font-weight: 600;
}

.sp_account_switcher>.sp_account_switcher_item>.sp_account_switcher_avatar {
    width: 36px;
    height: 36px;
    position: relative;
}

.sp_account_switcher>.sp_account_switcher_item>.sp_account_switcher_avatar>img {
    position: absolute;
    top: 0;
    right: 0px;
    width: 36px;
    height: 36px;
    border-radius: 5px;
    object-fit: cover;
    background-color: #ffffff;
}

.sp_account_switcher>.sp_account_switcher_item>.sp_account_switcher_avatar>.sp_avatar_initials {
    width: 36px;
    height: 36px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--main-color);
    color: #ffffff;
    text-transform: uppercase;
    padding-top: 2px;
    flex: none;
}

.sp_account_switcher>.sp_account_switcher_item>.sp_account_switcher_name {
    white-space: nowrap;
}

.sp_account_switcher>.sp_account_switcher_item>.sp_account_switcher_name>span {
    display: block;
    font-size: 12px;
    font-weight: 400;
    color: var(--color-body);
}

.sp_account_switcher>.sp_account_switcher_item.active {
    background-color: rgba(var(--main-color-rgb), 0.03);
    box-shadow: 0px -1px 0px #e8ecf4, 0px 1px 0px #e8ecf4, inset 3px 0px 0px var(--main-color);
}

.sp_account_switcher>.sp_account_switcher_item.sp_account_switcher_add>.sp_account_switcher_avatar>.sp_avatar_initials {
    padding: 0;
    font-size: 24px;
    font-weight: 400;
    background-color: transparent;
    color: var(--main-color);
    box-shadow: inset 0px 0px 0px 1px var(--main-color);
}

.sp_account_switcher>.sp_account_switcher_item.sp_account_switcher_add>.sp_account_switcher_name {
    color: var(--main-color);
}

/* header end */

.sp_company_profile_wrapper {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 50px;
    align-items: flex-start;
}

.sp_company_profile_left {
    border: 1px solid #DAE1F4;
    border-radius: 10px;
    text-align: center;
    padding: 30px;
}

.sp_company_profile_left>.sp_cp_avatar {
    width: 120px;
    height: 120px;
    border-radius: 150px;
    border: 6px solid var(--main-color);
    margin: 0 auto;
    margin-bottom: 10px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: var(--main-color);
}

.sp_company_profile_left>.sp_cp_avatar>img {
    width: 108px;
    height: 108px;
    border-radius: 120px;
    object-fit: cover;
    position: absolute;
    left: 0px;
    top: 0px;
}

.sp_company_profile_left>.sp_cp_avatar .sp_cp_avatar_uploader {
    position: absolute;
    right: 10px;
    top: -10px;
    z-index: 2;
}

.sp_company_profile_left>.sp_cp_avatar .sp_cp_avatar_uploader>input {
    position: absolute;
    left: -999999px;
    opacity: 0;
}

.sp_company_profile_left>.sp_cp_avatar .sp_cp_avatar_uploader>label {
    width: 32px;
    height: 32px;
    display: block;
    margin: 0;
    cursor: pointer;
}

.sp_cp_avatar .tooltip-inner {
    min-width: 200px;
}

.sp_company_profile_left>h3 {
    margin: 0;
    font-size: 18px;
}

.sp_company_profile_left>p {
    margin: 0px auto;
    color: var(--color-heading);
    font-weight: 600;
}

.sp_company_profile_left>h4 {
    margin: 0;
    color: var(--color-body);
    font-weight: 400;
    margin-top: 5px;
    margin-bottom: 10px;
}

.sp_company_profile_left>h4 a {
    color: inherit;
}

.sp_company_profile_left>ul {
    padding: 0;
    list-style: none;
    margin-top: 15px;
}

.sp_company_profile_left>ul>li {
    display: inline-block;
    vertical-align: middle;
    margin: 0 2px;
}

.sp_company_profile_left>ul>li>a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 60px;
    /* border: 1px solid #B2BAC9; */
    pointer-events: none;
    cursor: pointer;
}

.sp_company_profile_left>ul>li>a>svg {
    width: 22px;
    height: auto;
}

.sp_company_profile_left>ul>li>a:hover {
    background-color: var(--main-color);
    border-color: var(--main-color);
}

.sp_company_profile_left>ul>li:nth-child(2)>a:hover svg path,
.sp_company_profile_left>ul>li:nth-child(3)>a:hover svg path {
    fill: #ffffff;
}

.sp_company_profile_left>ul>li:first-child>a:hover svg path {
    stroke: #ffffff;
}

.sp_company_profile_left .sp_btn {
    text-transform: capitalize;
}

.sp_company_profile_left .sp_btn.sp_btn_border {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border-radius: 8px;
    color: var(--main-color);
    border-color: var(--main-color);
    padding: 0 20px;
    pointer-events: none;
}

.sp_company_profile_left .sp_btn.sp_btn_border:hover {
    border-color: var(--main-color);
}

.sp_company_profile_left .sp_btn.sp_btn_border svg path {
    fill: var(--main-color);
}

.sp_company_profile_left .sp_btn.spj_unfollow_profile {
    background-color: transparent;
    color: var(--main-color);
    box-shadow: 0px 0px 0px 1px;
    font-weight: 600;
}

/* level start */
.sp_level_wrapper {
    border: 1px solid #DAE1F4;
    border-radius: 10px;
    padding: 15px;
}

.sp_level_wrapper>h3 {
    margin: 0;
    font-weight: 600;
    font-size: 18px;
    margin-bottom: 10px;
}

.sp_level_wrapper>p {
    margin: 0;
    margin-bottom: 20px;
}

.sp_level_item {
    position: relative;
    display: grid;
    grid-template-columns: 32px 1fr;
    align-items: center;
    margin-bottom: 15px;
}

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

.sp_level_item>.sp_level_icon {
    width: 52px;
    height: 52px;
    position: relative;
    z-index: 1;
}

.sp_level_item>.sp_level_icon>svg>path:nth-child(2) {
    fill: #F7F8FB;
    stroke: #D0D7E5;
}

.sp_level_item>.sp_level_icon>svg>path:nth-child(3) {
    fill: #D0D7E5;
}

.sp_level_item>.sp_level_icon>svg>path:nth-child(5) {
    fill: #D0D7E5;
}

.sp_level_item>.sp_level_icon::before {
    content: "";
    position: absolute;
    bottom: calc(100% - 2px);
    left: calc(50% - 1px);
    width: 2px;
    background-color: #D0D7E5;
    height: 19px;
    z-index: -1;
}

.sp_level_item:first-child>.sp_level_icon::before {
    display: none;
}

.sp_level_item>.sp_level_details {
    color: #BCC1CD;
    min-height: 42px;
    display: flex;
    gap: 0px;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    border-radius: 0 50px 50px 0;
    padding-left: 30px;
    font-size: 12px;
}

.sp_level_item>.sp_level_details>span {
    color: var(--color-body);
    font-weight: 600;
    display: block;
    font-size: 14px;
}

.sp_level_item.active>.sp_level_icon>svg>g>path {
    fill: #ffffff
}

.sp_level_item.active>.sp_level_icon>svg>path:nth-child(2) {
    fill: rgba(var(--main-color-rgb), 0.04);
    stroke: var(--main-color);
}

.sp_level_item.active>.sp_level_icon>svg>path:nth-child(3) {
    fill: var(--main-color);
}

.sp_level_item.active>.sp_level_icon>svg>path:nth-child(5) {
    fill: var(--main-color);
}

/* .sp_level_item.active>.sp_level_details {
    background-color: rgba(var(--main-color-rgb), 0.04);
} */

.sp_level_item.active>.sp_level_icon::before {
    background-color: var(--main-color);
}

.sp_level_item.active>.sp_level_details {
    color: var(--color-body);
}

.sp_level_item.active>.sp_level_details>span {
    color: var(--main-color);
}

/* level end */

.sp_cp_website_url {
    text-align: center;
    margin-top: 15px;
}

.sp_cp_website_url>a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background-color: rgba(var(--main-color-rgb), 0.10);
    color: var(--main-color);
    padding: 5px 10px;
    border-radius: 5px;
    font-weight: 600;
}

.sp_cp_website_url>a svg path {
    fill: var(--main-color);
}

.sp_cp_follow_design_count {
    display: flex;
    align-items: center;
    margin: 20px auto;
    border-top: 1px solid rgba(112, 123, 145, 0.08);
    border-bottom: 1px solid rgba(112, 123, 145, 0.08);
    padding: 10px 0;
}

.sp_cp_follow_design_count>.sp_cpfdc_item {
    text-align: center;
    flex: 1;
    position: relative;
}

.sp_cp_follow_design_count>.sp_cpfdc_item:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 1px;
    background-color: rgba(112, 123, 145, 0.08);
}

.sp_cp_follow_design_count>.sp_cpfdc_item:last-child:after {
    display: none;
}

.sp_cp_follow_design_count>.sp_cpfdc_item>h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 400;
    margin-bottom: 5px;
}

.sp_cp_follow_design_count>.sp_cpfdc_item>p {
    margin: 0;
}

.sp_cp_social_links {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.sp_cp_social_links>.sp_cpsl_item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    cursor: pointer;
}

.sp_cp_social_links>.sp_cpsl_item:hover {
    border-color: var(--main-color);
    color: var(--main-color);
}

.sp_cp_social_links>.sp_cpsl_item>svg {
    width: 22px;
    height: auto;
}

.sp_cpr_title {
    margin: 0;
    font-size: 16px;
    margin-bottom: 15px;
    font-weight: 600;
}

.sp_company_profile_right .sp_input_wrapper.sp_input_icon>.sp_input {
    padding-top: 0;
    padding-left: 100px;
}

.sp_company_profile_right .sp_input_wrapper.sp_input_icon>.sp_icon {
    top: auto;
    bottom: 1px;
    background-color: #FCFCFF;
    height: 72px;
    left: 1px;
    border-radius: 10px 0 0 10px;
    border-right: 1px solid #e9e9f4;
}


.sp_market_profile_banner_wrapper {
    min-height: 220px;
    border-radius: 15px;
    position: relative;
    background-image: -moz-linear-gradient(145deg, rgb(117, 18, 251) 0%, rgb(52, 106, 253) 100%);
    background-image: -webkit-linear-gradient(145deg, rgb(117, 18, 251) 0%, rgb(52, 106, 253) 100%);
    background-image: -ms-linear-gradient(145deg, rgb(117, 18, 251) 0%, rgb(52, 106, 253) 100%);
    margin-bottom: 40px;
    display: none;
}

.sp_market_profile_banner_wrapper:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('../images/marketplace_profile_banner_bg.svg');
    background-size: cover;
    background-position: center center;
    pointer-events: none;
}

.sp_market_profile_wrapper {
    display: grid;
    grid-template-columns: 300px calc(100% - 340px);
    gap: 40px;
    /* padding-left: 3.5%; */
    align-items: flex-start;
    margin: 50px auto;
}

.sp_market_profile_box {
    background: #FFFFFF;
    box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    min-height: 400px;
    /* transform: translateY(-120px); */
    padding: 30px;
}

.sp_market_profile_box>.sp_company_profile_left {
    border: none;
    border-radius: 0;
    padding: 0;
}

.sp_market_profile_box>.sp_company_profile_left .sp_btn.sp_btn_border {
    width: 100%;
    justify-content: center;
    pointer-events: inherit;
}

.sp_market_profile_box_counts {
    margin-top: 20px;
}

.sp_market_profile_box_counts>.sp_mpbc_item {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #F3F4F5;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.sp_market_profile_box_counts>.sp_mpbc_item:last-child {
    margin-bottom: 0;
    padding: 0;
    border-bottom: none;
}

.sp_market_profile_box_counts>.sp_mpbc_item>span:first-child {
    font-weight: 600;
}

.sp_market_profile_box>.sp_company_profile_left>ul>li>a {
    pointer-events: inherit;
}

.sp_dash_minibanner_list {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 25px;
    margin-top: 25px;
}

.sp_dash_minibanner_list>a {
    flex: 1;
    border-radius: 7px;
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 7px 46px 0px rgb(50 81 164 / 13%);
    padding: 24px 14px;
    width: 100%;
    transition: all 0.5s;
    position: relative;
    color: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    gap: 6px;
}

.sp_dash_minibanner_list>a>img {
    width: 130px;
}

.sp_dash_minibanner_list>a:hover {
    color: #ffffff;
}

.sp_dash_minibanner_list>a>.sp_dash_mb_icon {
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-1px);
}

.sp_dash_minibanner_list>a>.sp_dash_mb_icon>svg {
    width: 20px;
    height: auto;
}

.sp_dash_minibanner_list>a>.sp_dash_mb_svg_top {
    position: absolute;
    top: -5px;
    right: -8px;
    border-radius: 25px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    fill: #ffffff;
}

.sp_dash_minibanner_list>a.wordpress>.sp_dash_mb_svg_top {
    background-color: #068fb9;
}

.sp_dash_minibanner_list>a.chrome>.sp_dash_mb_svg_top {
    background-color: #259245;
}

.sp_dash_minibanner_list>a:hover>img {
    opacity: 0.9;
}

.sp_dash_minibanner_list>a:hover>.sp_dash_mb_icon>svg path {
    fill: #ffffff !important;
}

.sp_dash_minibanner_list>a.facebook:hover {
    background-color: #385fbd;
}

.sp_dash_minibanner_list>a.youtube:hover {
    background-color: rgb(255, 0, 0);
}

.sp_dash_minibanner_list>a.wordpress:hover {
    background-color: rgb(6, 143, 185);
}

.sp_dash_minibanner_list>a.chrome:hover {
    background-color: rgb(37, 146, 69);
}

.sp_dash_minibanner_list>a.support:hover {
    background-color: rgb(120, 88, 237);
}

.sp_dash_minibanner_list>a.wordpress:hover>.sp_dash_mb_svg_top {
    background-color: #ffffff;
    fill: rgb(6, 143, 185);
    box-shadow: 1.312px -1.509px 9px 0px rgb(50 81 164 / 23%);
}

.sp_dash_minibanner_list>a.chrome:hover>.sp_dash_mb_svg_top {
    background-color: #ffffff;
    fill: rgb(37, 146, 69);
    box-shadow: 1.312px -1.509px 9px 0px rgb(50 81 164 / 23%);
}

.sp_dash_minibanner_list>a.cd_plus:hover {
    background: linear-gradient(178deg, #D2CFFF 0%, #FFE6E2 45.62%, #F2E4A6 100%);
}

.sp_filter_wrapper {
    position: relative;
}

.sp_filter_wrapper>.sp_filter_toggle {
    width: 110px;
    height: 50px;
    border-radius: 10px;
    border: 1px solid #e9e9f4;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background-color: #ffffff;
    cursor: pointer;
}

.sp_filter_wrapper.open>.sp_filter_toggle {
    border-color: var(--main-color);
    color: var(--main-color);
}

.sp_filter_wrapper.open>.sp_filter_toggle svg rect {
    fill: var(--main-color);
}

.sp_filter_wrapper>.sp_filter_toggle span {
    font-weight: 400;
    font-size: 14px;
    color: var(--color-body);
}

.sp_filter_wrapper>.sp_filter_dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background-color: #ffffff;
    border: 1px solid #E9E9F4;
    padding: 15px;
    border-radius: 10px;
    width: 210px;
    opacity: 0;
    visibility: hidden;
    z-index: 10;
    -webkit-transition: all 0.2s cubic-bezier(0.71, -0.11, 0.25, 0.88);
    -moz-transition: all 0.2s cubic-bezier(0.71, -0.11, 0.25, 0.88);
    transition: all 0.2s cubic-bezier(0.71, -0.11, 0.25, 0.88);
    -webkit-transform: translateY(-10px);
    -moz-transform: translateY(-10px);
    transform: translateY(-10px);
}

.sp_filter_wrapper.open>.sp_filter_dropdown {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    transform: translateY(0px);
}

.sp_filter_wrapper>.sp_filter_dropdown .sp_input_wrapper .sp_input {
    height: 40px;
    font-size: 14px;
    padding: 0 10px;
    border-radius: 5px;
}

.sp_filter_wrapper>.sp_filter_dropdown .sp_input_wrapper {
    margin-bottom: 15px;
}

.sp_filter_wrapper>.sp_filter_dropdown .sp_btn {
    height: 40px;
    line-height: 40px;
    border-radius: 8px;
    font-size: 14px;
}

.sp_ctable_marketplace_designs .sp_ctable_sno {
    flex: none;
    width: 90px;
}

.sp_ctable_price {
    text-transform: capitalize;
}

.sp_ctable_marketplace_designs .sp_ctable_sales,
.sp_ctable_marketplace_designs .sp_ctable_price,
.sp_ctable_marketplace_designs .sp_ctable_view,
.sp_ctable_marketplace_designs .sp_ctable_showhide {
    /* flex: none; */
    width: 100px;
}

.sp_ctable_marketplace_designs .sp_ctable_status {
    /* flex: none; */
    width: 120px;
}

.sp_ctable_marketplace_designs .sp_ctable_col.sp_ctable_customer {
    flex: 1.5;
}

#marketplace_design_content_popup.sp_popup_wrapper>.sp_popup_inner {
    max-width: 820px;
}

#mp_activity_log_popup.sp_popup_wrapper>.sp_popup_inner {
    max-width: 920px;
}

#mp_activity_log_popup.sp_popup_wrapper .sp_popup_title {
    text-align: left;
    margin-bottom: 15px;
}

#mp_activity_log_popup.sp_popup_wrapper>.sp_popup_inner .sp_popup_body {
    margin-bottom: 0;
}

.sp_mp_activity_log_wrapper {
    display: grid;
    grid-template-columns: 250px auto;
    gap: 30px;
}

.sp_mpal_image_preview {
    border: 1px solid #E3E3E3;
    border-radius: 8px;
    width: 250px;
    height: 250px;
    margin-bottom: 15px;
}

.sp_mpal_image_preview>img {
    width: 250px;
    height: 250px;
    object-fit: contain;
    padding: 10px;
}

.sp_mpal_change_Status {
    margin-bottom: 15px;
}

.sp_mpal_change_Status>.sp_input_wrapper {
    margin-bottom: 0px;
}

.sp_mpal_change_Status>.sp_input_wrapper .sp_input {
    height: 45px;
    padding: 0 15px;
    border-radius: 6px;
    font-size: 14px;
    color: var(--color-body);
}

.sp_mpal_note {
    margin-bottom: 15px;
    font-weight: 600;
}

.sp_mpal_avatar {
    margin-bottom: 15px;
}

.sp_mpal_avatar .sp_table_avatar>.sp_table_avatar_name>span {
    display: block;
}

.sp_mpal_avatar .sp_table_avatar>.sp_table_avatar_name>span.sp_tan_name {
    color: var(--color-heading);
}

.sp_mpal_avatar .sp_table_avatar>.sp_table_avatar_name>span.sp_tan_email {
    font-size: 12px;
}

.sp_mp_activity_log_wrapper .sp_checkbox>label {
    display: flex;
}

.sp_mp_activity_log_wrapper .sp_checkbox>label::before {
    flex: none;
    margin-top: 3px;
}

.sp_mp_activity_log_wrapper .sp_checkbox>label::after {
    top: 8px;
}

.sp_mp_design_send_to_temps {
    padding: 15px;
    background-color: #fbfcff;
    margin-top: 15px;
    border: 1px solid #d3dbf1;
    border-radius: 8px;
}

.sp_mp_design_send_to_temps>h3 {
    margin: 0;
    margin-bottom: 10px;
    font-size: 14px;
}

.sp_mp_design_send_to_temps>.sp_input_wrapper .sp_input {
    height: 50px;
    padding: 0 15px;
    font-size: 14px;
    border-radius: 6px;
}

/* chat box start */
.sp_mpal_chat_box {
    background-color: #FBFBFC;
    border: 1px solid #DAE1F4;
    border-radius: 3px;
    margin-bottom: 20px;
}

.sp_mpal_chat_box_inner {
    max-height: 400px;
    overflow: auto;
    padding: 20px;
}

.sp_mpal_chat_msg {
    margin-bottom: 15px;
}

.sp_mpal_chat_msg:last-child {
    margin-bottom: 0px;
}

.sp_mpal_chat_msg_inner {
    max-width: 70%;
    text-align: left;
}

.sp_mpal_chat_msg_inner .sp_mpal_chat_msg_text {
    border: 1px solid #E1E3E7;
    background-color: #EEEEEE;
    border-radius: 0 10px 10px 10px;
    padding: 1em;
    color: var(--color-heading);
    display: inline-block;
    text-align: left;
    min-width: 100px;
}

.sp_mpal_chat_msg.my_msg {
    display: flex;
    justify-content: flex-end;
}

.sp_mpal_chat_msg_name {
    font-size: 12px;
    margin-bottom: 2px;
}

.sp_mpal_chat_msg_name>.sp_mpal_cmn_name {
    color: var(--color-heading);
    font-weight: 600;
}

.sp_mpal_chat_msg.my_msg .sp_mpal_chat_msg_inner {
    text-align: right;
}

.sp_mpal_chat_msg.my_msg .sp_mpal_chat_msg_inner .sp_mpal_chat_msg_text {
    background-color: var(--main-color);
    border-color: var(--main-color);
    color: #ffffff;
    border-radius: 10px 10px 0 10px;
}

.sp_mpal_chat_msg.my_msg .sp_mpal_chat_msg_inner .sp_mpal_chat_msg_name {
    text-align: right;
    padding-right: 6px;
}

/* chat box end */

.sp_mpal_message_sender .sp_input_wrapper textarea.sp_input {
    padding: 20px;
    font-size: 14px;
}


@media (max-width: 1170px) {
    .sp_market_profile_wrapper {
        display: block;
        padding: 0 25px;
    }

    .sp_market_profile_box {
        max-width: 300px;
        margin-bottom: -80px;
    }
}

/* public marketplace start */
.sp_marketplace_banner_wrapper {
    background-color: #f0f3f8;
    padding: 40px 15px;
    margin-bottom: 50px;
}

.sp_marketplace_banner_inner {
    max-width: 1520px;
    margin: 0 auto;
    /* height: 356px; */
    padding: 80px;
    border-radius: 15px;
    background-image: -moz-linear-gradient(145deg, rgb(117, 18, 251) 0%, rgb(52, 106, 253) 100%);
    background-image: -webkit-linear-gradient(145deg, rgb(117, 18, 251) 0%, rgb(52, 106, 253) 100%);
    background-image: -ms-linear-gradient(145deg, rgb(117, 18, 251) 0%, rgb(52, 106, 253) 100%);
    overflow: hidden;
    position: relative;
    z-index: 1;
    animation: mpBanner 0.3s cubic-bezier(.71, -.11, .25, .88);
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes mpBanner {
    0% {
        transform: translateY(-20px);
        opacity: 0;
    }

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

.sp_marketplace_banner_bg_grid {
    position: absolute;
    top: -46%;
    right: -10%;
    transform: rotate(30deg);
    display: grid;
    grid-template-columns: 180px 180px 180px 180px;
    grid-template-rows: 180px 180px 180px 180px;
    gap: 24px;
    z-index: -1;
    pointer-events: none;
}

.sp_marketplace_banner_bg_grid .sp_mpbbg_item {
    background-color: #ffffff;
    animation: mpBannerAnim 0.4s;
    opacity: 0;
    animation-fill-mode: forwards;
}

.sp_marketplace_banner_bg_grid .sp_mpbbg_item:nth-child(1) {
    animation-delay: 0.1s;
}

.sp_marketplace_banner_bg_grid .sp_mpbbg_item:nth-child(2) {
    animation-delay: 0.2s;
}

.sp_marketplace_banner_bg_grid .sp_mpbbg_item:nth-child(3) {
    animation-delay: 0.3s;
}

.sp_marketplace_banner_bg_grid .sp_mpbbg_item:nth-child(4) {
    animation-delay: 0.4s;
}

.sp_marketplace_banner_bg_grid .sp_mpbbg_item:nth-child(5) {
    animation-delay: 0.5s;
}

.sp_marketplace_banner_bg_grid .sp_mpbbg_item:nth-child(6) {
    animation-delay: 0.6s;
}

.sp_marketplace_banner_bg_grid .sp_mpbbg_item:nth-child(7) {
    animation-delay: 0.7s;
}

.sp_marketplace_banner_bg_grid .sp_mpbbg_item:nth-child(8) {
    animation-delay: 0.8s;
}

.sp_marketplace_banner_bg_grid .sp_mpbbg_item:nth-child(9) {
    animation-delay: 0.9s;
}

.sp_marketplace_banner_bg_grid .sp_mpbbg_item:nth-child(10) {
    animation-delay: 1.0s;
}

.sp_marketplace_banner_bg_grid .sp_mpbbg_item:nth-child(11) {
    animation-delay: 1.1s;
}

.sp_marketplace_banner_bg_grid .sp_mpbbg_item:nth-child(12) {
    animation-delay: 1.2s;
}

.sp_marketplace_banner_bg_grid .sp_mpbbg_item:nth-child(13) {
    animation-delay: 1.3s;
}

.sp_marketplace_banner_bg_grid .sp_mpbbg_item:nth-child(14) {
    animation-delay: 1.4s;
}

.sp_marketplace_banner_bg_grid .sp_mpbbg_item:nth-child(15) {
    animation-delay: 1.5s;
}

.sp_marketplace_banner_bg_grid .sp_mpbbg_item:nth-child(16) {
    animation-delay: 1.6s;
}

@keyframes mpBannerAnim {
    0% {
        transform: translate(50px, -50px);
        opacity: 0;
    }

    100% {
        transform: translate(0px, 0px);
        opacity: 1;
    }
}

.sp_marketplace_banner_inner>h1 {
    color: #FFFFFF;
    margin: 0;
    font-size: 38px;
    font-weight: 800;
    margin-bottom: 30px;
    animation: mpBanner 0.3s cubic-bezier(.71, -.11, .25, .88);
    animation-delay: 0.1s;
    animation-fill-mode: forwards;
    opacity: 0;
}

.sp_marketplace_banner_inner>.sp_dfytemp_header_search {
    justify-content: flex-start;
    position: relative;
    background-color: #ffffff;
    display: inline-flex;
    border-radius: 10px;
    max-width: 500px;
    height: 56px;
}

.sp_marketplace_banner_inner>.sp_dfytemp_header_search>.sp_search_wrapper {
    max-width: calc(100% - 5px);
}

.sp_marketplace_banner_inner>.sp_dfytemp_header_search>.sp_search_wrapper>input {
    border-radius: 10px 0 0 10px;
    padding-left: 48px;
}

.sp_marketplace_banner_inner>.sp_dfytemp_header_search>.sp_btn {
    position: absolute;
    top: 4px;
    right: 4px;
    height: 48px;
    border-radius: 8px;
}

.sp_marketplace_banner_inner .sp_search_wrapper>.sp_search_icon {
    background-color: transparent;
    margin-right: 0;
}


.sp_mp_slider_box_wrapper {
    margin-bottom: 40px;
    position: relative;
}

.sp_mp_slider_box_wrapper>.sp_mp_slider_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* margin-bottom: 15px; */
}

.sp_mp_slider_box_wrapper>.sp_mp_slider_header>h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.sp_mp_slider_box_wrapper>.sp_mp_slider_header>a {
    flex: none;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
}

.sp_mp_slider_box_wrapper>.sp_mp_slider_header>a svg path {
    stroke: var(--main-color);
}

/* marketplace design start */
.sp_mp_design_wrapper {
    border-radius: 10px;
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 4px 34px 0px rgba(0, 0, 0, 0.03);
    position: relative;
}

.sp_mp_design_wrapper>.sp_mpd_image {
    position: relative;
}

.sp_mp_design_wrapper>.sp_mpd_image>img {
    width: 100%;
    height: 192px;
    object-fit: contain;
    background-color: #e2e4eb;
    border-radius: 10px 10px 0 0;
    padding: 10px;
}

.sp_mp_design_wrapper>.sp_mpd_image>.sp_mpd_overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 10px 10px 0 0;
    background-color: rgba(30, 31, 40, 0.60);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.sp_mp_design_wrapper:hover>.sp_mpd_image>.sp_mpd_overlay {
    opacity: 1;
    visibility: visible;
}

.sp_mp_design_wrapper>.sp_mpd_details {
    padding: 15px;
}

.sp_mp_design_wrapper>.sp_mpd_details>.sp_mpd_type_sales {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.sp_mpd_type {
    flex: none;
    background-color: var(--main-color);
    color: #ffffff;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.2px;
    text-transform: capitalize;
}

.sp_mpd_sales {
    display: flex;
    align-items: center;
    gap: 5px;
    line-height: initial;
    height: 16px;
}

.sp_mpd_sales>span {
    height: 16px;
}

.sp_mpd_sales svg path {
    fill: var(--main-color);
}

.sp_mpd_title {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 10px;
}

.sp_mpd_avatar_price {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sp_mpd_avatar {
    flex: 1;
}

.sp_mpd_avatar .sp_table_avatar>.sp_table_avatar_name {
    flex: 1;
}

.sp_mpd_avatar .sp_table_avatar>.sp_table_avatar_icon>img,
.sp_mpd_avatar .sp_table_avatar>.sp_table_avatar_icon>span {
    border-radius: 5px;
}

.sp_mpd_price {
    height: 30px;
    border-radius: 5px;
    background-color: rgba(var(--main-color-rgb), 0.1);
    color: var(--main-color);
    font-size: 14px;
    font-weight: 700;
    padding: 2px 12px 0px;
    display: flex;
    align-items: center;
    text-transform: capitalize;
}

/* marketplace design end */

/* marketplace creator start */
.sp_mp_creator_wrapper {
    border-radius: 10px;
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 4px 34px 0px rgb(0 0 0 / 3%);
    padding: 20px 15px;
    text-align: center;
    min-height: 220px;
}

.sp_mp_creator_wrapper>.sp_mpc_image {
    width: 80px;
    margin: 0 auto;
    margin-bottom: 10px;
    position: relative;
}

.sp_mp_creator_wrapper>.sp_mpc_image>img {
    width: 82px;
    height: 82px;
    object-fit: cover;
    background-color: #e2e4eb;
    border-radius: 80px;
    position: absolute;
    top: -1px;
    left: -1px;
}

.sp_mp_creator_wrapper>.sp_mpc_image>span {
    width: 80px;
    height: 80px;
    border-radius: 80px;
    background-color: var(--main-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 26px;
    padding-top: 2px;
}

.sp_mp_creator_wrapper h3 {
    margin: 0;
    font-size: 14px;
    color: var(--main-color);
    font-weight: 600;
    margin-bottom: 2px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.sp_mp_creator_wrapper p {
    margin: 0;
    margin-bottom: 10px;
}

.sp_mp_creator_wrapper .sp_btn.sp_btn_small {
    height: 30px;
    line-height: 30px;
    font-weight: 500;
    padding: 0 24px;
    text-transform: capitalize;
}

.sp_mp_creator_wrapper .sp_btn.sp_btn_small.spj_unfollow_profile {
    background-color: transparent;
    color: var(--main-color);
    box-shadow: 0px 0px 0px 1px;
    font-weight: 600;
}

/* marketplace creator end */

.sp_marketplace_slider {
    padding: 20px 0;
}

.sp_mp_design_slide_item {
    width: 260px;
    height: auto;
}

.sp_mp_creator_slide_item {
    width: 185px;
    height: auto;
}

.sp_mp_slider_wrapper {
    position: relative;
}

.sp_marketplace_design_list {
    /* margin-bottom: 40px;
    margin-top: 50px; */
}

.sp_marketplace_design_list .sp_page_title>.sp_page_heading {
    display: flex;
    align-items: center;
}

/* public marketplace end */

.sp_marketplace_design_grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    grid-gap: 20px;
}

.sp_marketplace_design_grid.sp_creator_grid {
    grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
}

.sp_marketplace_design_grid.sp_creator_grid>.sp_mp_creator_slide_item {
    width: auto;
}

.sp_market_profile_wrapper .sp_marketplace_design_grid .sp_mpd_avatar_price {
    position: absolute;
    top: 150px;
    right: 15px;
    z-index: 1;
}

.sp_market_profile_wrapper .sp_marketplace_design_grid .sp_mp_design_wrapper:hover .sp_mpd_avatar_price .sp_mpd_price {
    opacity: 0;
    visibility: hidden;
}

.sp_market_profile_wrapper .sp_marketplace_design_grid .sp_mpd_avatar_price .sp_mpd_price {
    background-color: var(--main-color);
    color: #ffffff;
}

.sp_market_profile_wrapper .sp_marketplace_design_grid .sp_mpd_avatar_price .sp_mpd_avatar {
    display: none;
}

.sp_market_profile_wrapper .sp_marketplace_design_grid .sp_mpd_title {
    margin-bottom: 0;
}

/* design preview popup start */
#mp_design_preview_popup.sp_popup_wrapper>.sp_popup_inner {
    max-width: 950px;
}

#mp_design_preview_popup.sp_popup_wrapper>.sp_popup_inner .sp_popup_body {
    margin: 0;
}

.sp_mp_design_preview_wrapper {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 40px;
}

.sp_mp_design_preview_wrapper>.sp_mpdp_image>img {
    max-width: 100%;
}

.sp_mpdp_details>.sp_mpdp_type {
    color: #ffffff;
    background-color: var(--main-color);
    border-radius: 5px;
    padding: 5px 15px;
    display: inline-block;
    font-size: 16px;
}

.sp_mpdp_details>h3 {
    font-size: 24px;
    font-weight: 600;
    margin: 10px 0;
}

.sp_mpdp_details>.sp_mpdp_dimension {
    font-size: 16px;
    margin-bottom: 15px;
}

.sp_mpdp_details>.sp_mpdp_dimension>span {
    color: #B1B8C8;
}

.sp_mpdp_details>.sp_mpdp_avatar {
    margin-bottom: 15px;
}

.sp_mpdp_details>.sp_mpdp_avatar>.sp_table_avatar {
    color: var(--main-color);
}

.sp_mpdp_details>.sp_mpdp_avatar>.sp_table_avatar>.sp_table_avatar_icon>span {
    border-radius: 5px;
    width: 38px;
    height: 38px;
}

.sp_mpdp_details>.sp_mpdp_avatar>.sp_table_avatar>.sp_table_avatar_icon>img {
    border-radius: 5px;
    width: 40px;
    height: 40px;
}

.sp_mpdp_details>.sp_mpdp_avatar>.sp_table_avatar>.sp_table_avatar_name {
    font-size: 16px;
}

.sp_mpdp_details>.sp_mpdp_price_sales {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
    gap: 20px;
}

/* design preview popup end */
.sp_marketplace_icon_link {
    display: inline-flex;
    vertical-align: middle;
    margin-right: 15px;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    position: relative;
}

.sp_marketplace_icon_link>svg {
    width: 20px;
    height: auto;
}

.sp_marketplace_icon_link>svg path {
    fill: var(--main-color);
}

.sp_marketplace_icon_link span.sp_mp_notification_count {
    position: absolute;
    top: -4px;
    left: 18px;
    background-color: #ff6666;
    border-radius: 10px;
    padding: 3px 5px 2px;
    line-height: 10px;
    font-size: 10px;
    color: #ffffff;
    font-weight: 700;
}

.sp_unread_msg_count {
    position: absolute;
    top: -4px;
    left: calc(100% - 6px);
    background-color: #ff6666;
    border-radius: 10px 10px 10px 3px;
    padding: 3px 5px 2px;
    line-height: 10px;
    font-size: 10px;
    color: #ffffff;
    font-weight: 700;
}

/* marketplace single start */
.cdm_single_wrapper {
    margin: 60px 0;
    display: grid;
    grid-template-columns: minmax(50px, 1fr) 0.6fr;
    gap: 30px;
}

.cdm_design_image {
    background-color: #ffffff;
    border-radius: 10px;
    overflow: hidden;
    text-align: center;
    padding: 15px;
    min-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
}

.cdm_design_image img {
    max-width: 100%;
    max-height: 600px;
    object-fit: contain;
}

.cdm_design_price_box {
    background-color: #FFFFFF;
    box-shadow: 0px 10px 34px rgba(0, 0, 0, 0.03);
    border-radius: 10px;
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0px 35px;
    margin-bottom: 40px;
}

.cdm_design_price_box>h1 {
    margin: 0;
    font-size: 36px;
    font-weight: 600;
}

.cdm_design_price_box>.sp_btn {
    font-size: 18px;
    height: 46px;
    line-height: 46px;
    min-width: 160px;
    border-radius: 5px;
}

.cdm_design_type {
    margin-bottom: 20px;
}

.cdm_design_type>span {
    display: inline-block;
    height: 30px;
    line-height: 30px;
    padding: 0 30px;
    background-color: var(--main-color);
    border-radius: 5px;
    font-size: 16px;
    color: #ffffff;
}

.cdm_single_content>h1 {
    margin: 0;
    font-size: 36px;
    font-weight: 600;
    margin-bottom: 6px;
}

.cdm_design_dimension {
    color: #A8AEC0;
    font-size: 16px;
    margin-bottom: 15px;
}

.cdm_design_dimension>span {
    color: #707B91;
}

.cdm_design_sold {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cdm_design_sold>p {
    margin: 0;
    color: #A8AEC0;
    font-size: 16px;
}

.cdm_design_sold>p>span {
    color: #707B91;
    line-height: initial;
}

.cdm_auther_box {
    margin: 30px 0;
    padding: 30px 0;
    border-top: 1px solid rgba(208, 217, 232, 0.5);
    border-bottom: 1px solid rgba(208, 217, 232, 0.5);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.cdm_auther_box>.cdm_auther_image {
    width: 70px;
    height: 70px;
    position: relative;
}

.cdm_auther_box>.cdm_auther_image>.cdm_auther_initials {
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #ffffff;
    background-color: var(--main-color);
    font-weight: 400;
    border-radius: 5px;
}

.cdm_auther_box>.cdm_auther_image>img {
    position: absolute;
    top: 0;
    left: 0;
    width: 70px;
    height: 70px;
    border-radius: 5px;
    object-fit: cover;
}

.cdm_auther_box>.cdm_auther_details {
    min-width: 215px;
}

.cdm_auther_box>.cdm_auther_details>.cdm_auther_name {
    font-size: 16px;
    color: var(--main-color);
    font-weight: 600;
    margin-bottom: 5px;
}

.cdm_auther_box>.cdm_auther_details>.cdm_auther_review>svg {
    transform: translateY(1px);
}

.cdm_auther_box>.cdm_auther_details>.cdm_auther_review>.cdm_auther_rating {
    font-weight: 700;
    color: #FFBF00;
    margin-right: 4px;
}

.cdm_auther_box>.cdm_auther_contactme>.sp_btn {
    height: 40px;
    line-height: 40px;
    color: var(--main-color);
    font-size: 14px;
    border-radius: 5px;
    min-width: 160px;
    border-color: var(--main-color);
}

.cdm_auther_box>.cdm_auther_contactme>.sp_btn:hover {
    background-color: var(--main-color);
    color: #ffffff;
    border-color: var(--main-color);
}

.cdm_review_wrapper>.cdm_review_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
}

.cdm_review_wrapper>.cdm_review_header>h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
}

.cdm_review_wrapper>.cdm_review_header>.cdm_create_review_link {
    font-size: 16px;
    color: var(--main-color);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.cdm_star_list {
    display: flex;
    align-items: center;
    gap: 3px;
}

.cdm_star_list>.cdm_star_item {
    width: 16px;
    height: 14px;
}

.cdm_star_list>.cdm_star_item svg path {
    fill: #A8AEC0;
}

.cdm_star_list>.cdm_star_item.active svg path {
    fill: #FFBF00;
}

.cdm_fill_stars {
    background-color: #A8AEC0;
    width: 105px;
    height: 19px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.cdm_fill_stars>svg {
    position: relative;
    z-index: 1;
}

.cdm_fill_stars>.cdm_fill_stars_active {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #FFBF00;
    z-index: -1;
    transition: all 0.3s cubic-bezier(0.71, -0.11, 0.25, 0.88);
}

.cdm_review_data_wrapper {
    display: grid;
    grid-template-columns: 226px 1fr;
    gap: 30px;
    margin-bottom: 30px;
}

.cdm_review_data_wrapper>.cdm_rd_box {
    width: 226px;
    height: 160px;
    border-radius: 5px;
    background-color: rgba(255, 191, 0, 0.1);
    border: 1px solid rgba(255, 191, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.cdm_review_data_wrapper>.cdm_rd_box>h1 {
    margin: 0;
    font-weight: 700;
    font-size: 34px;
    color: #FFBF00;
    margin-bottom: 10px;
}

.cdm_rd_list>.cdm_rd_item {
    display: flex;
    align-items: center;
    margin-bottom: 14px;
    gap: 30px;
}

.cdm_rd_list>.cdm_rd_item:last-child {
    margin-bottom: 0px;
}

.cdm_rd_list>.cdm_rd_item>.cdm_rdl_star {
    font-size: 16px;
    color: #707B91;
    font-weight: 600;
    flex: none;
}

.cdm_rd_list>.cdm_rd_item>.cdm_rdl_process {
    flex: 1;
    height: 5px;
    background-color: rgb(255 191 0 / 25%);
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}

.cdm_rd_list>.cdm_rd_item>.cdm_rdl_process>.cdm_rdl_process_active {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    background-color: #FFBF00;
    border-radius: 10px;
}

.cdm_rd_list>.cdm_rd_item>.cdm_rdl_percent {
    flex: none;
    font-size: 14px;
    color: #A8AEC0;
    width: 40px;
    text-align: left;
}

.cdm_review_list>.cdm_review_list_item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    border-bottom: 1px solid rgba(208, 217, 232, 0.5);
    padding-bottom: 40px;
    margin-bottom: 40px;
}

.cdm_review_list>.cdm_review_list_item:last-child {
    margin-bottom: 0;
}

.cdm_review_list>.cdm_review_list_item>.cdm_rli_avatar {
    width: 50px;
    height: 50px;
    position: relative;
}

.cdm_review_list>.cdm_review_list_item>.cdm_rli_avatar>img {
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    height: 50px;
    border-radius: 5px;
    object-fit: cover;
}

.cdm_review_list>.cdm_review_list_item>.cdm_rli_avatar>.cdm_rli_initials {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #ffffff;
    background-color: var(--main-color);
    font-weight: 400;
    border-radius: 5px;
}

.cdm_review_list>.cdm_review_list_item>.cdm_rli_details>.cdm_rli_name {
    font-weight: 600;
    font-size: 16px;
    color: var(--color-heading);
    margin-bottom: 5px;
}

.cdm_review_list>.cdm_review_list_item>.cdm_rli_details>.cdm_rli_review {
    margin-bottom: 10px;
}

.cdm_review_list>.cdm_review_list_item>.cdm_rli_details>.cdm_rli_review>svg {
    transform: translateY(1px);
}

.cdm_review_list>.cdm_review_list_item>.cdm_rli_details>.cdm_rli_review>.cdm_rli_rating {
    font-weight: 700;
    color: #FFBF00;
    margin-right: 4px;
}

.cdm_review_list>.cdm_review_list_item>.cdm_rli_details>p {
    margin: 0;
}

.cdm_review_loadmore {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 1;
}

.cdm_review_loadmore::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(0deg, #F8FAFD 0%, rgba(248, 250, 253, 0) 100%);
    height: 200px;
    z-index: -1;
}

.cdm_review_loadmore>p {
    flex: none;
    margin: 0;
    padding: 10px 30px;
    color: var(--color-heading);
    font-weight: 700;
    cursor: pointer;
}

.cdm_review_loadmore>p:hover {
    color: var(--main-color);
}

.cdm_review_loadmore>span {
    flex: 1;
    height: 1px;
    background-color: #D0D9E8;
    border-radius: 4px;
}

/* marketplace single end */

/* review popup start */
.cdm_review_popup.sp_popup_wrapper>.sp_popup_inner {
    border-radius: 10px;
    padding: 40px;
}

.cdm_review_popup.sp_popup_wrapper>.sp_popup_inner>.sp_popup_body {
    margin: 0;
}

.cdm_rpb_details {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 20px;
}

.cdm_rpb_details>.cdm_rpb_image {
    flex: none;
}

.cdm_rpb_details>.cdm_rpb_image>img {
    width: 120px;
    height: 80px;
    object-fit: contain;
    background-color: #fff;
    border-radius: 5px;
}

.cdm_rpb_details>.cdm_rpb_title_star {
    flex: 1;
}

.cdm_rpb_details>.cdm_rpb_title_star>h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 5px;
}

.cdm_rpb_review_star {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cdm_rpb_review_star>p {
    margin: 0;
    margin-top: 1px;
}

.cdm_rpb_review_star>.cdm_stars {
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    gap: 3px;
}

.cdm_rpb_review_star>.cdm_stars>input {
    position: absolute;
    left: -999999px;
    opacity: 0;
}

.cdm_rpb_review_star>.cdm_stars>label {
    width: 19px;
    height: 18px;
    display: block;
    cursor: pointer;
}

.cdm_rpb_review_star>.cdm_stars>label:hover svg path,
.cdm_rpb_review_star>.cdm_stars>label:hover~label svg path {
    stroke: #FFBF00;
}

.cdm_rpb_review_star>.cdm_stars>input:checked~label svg path,
.cdm_rpb_review_star>.cdm_stars>input:checked~label~label svg path {
    fill: #FFBF00;
    stroke: #FFBF00;
}

.cdm_review_popup .sp_input_wrapper textarea.sp_input {
    border-radius: 5px;
}

.cdm_review_popup.sp_popup_wrapper>.sp_popup_inner>.sp_popup_footer>.sp_btn {
    height: 40px;
    line-height: 40px;
    min-width: 160px;
    border-radius: 5px;
    font-size: 14px;
}

/* review popup end */

/* cart popup start */
.sp_cart_popup.sp_popup_wrapper::before {
    display: none;
}

.sp_cart_popup.sp_popup_wrapper>.sp_popup_inner {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 380px;
    border-radius: 0;
    transform: translateX(100%);
    padding: 40px;
    text-align: left;
    overflow: auto;
}

.sp_cart_popup.sp_popup_wrapper.in>.sp_popup_inner {
    transform: translateX(0);
}

.sp_cart_popup .sp_popup_title {
    text-align: left;
}

.sp_cart_popup .sp_popup_footer .sp_btn {
    border-radius: 6px;
}

.sp_cart_popup .sp_popup_footer {
    position: sticky;
    bottom: -40px;
    padding: 15px 0;
    background-color: #ffffff;
}

.cdm_cart_item_list>.cdm_cart_item {
    margin-bottom: 30px;
    padding-bottom: 30px;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    border-bottom: 1px solid rgb(208, 217, 232, 0.5);
}

.cdm_cart_item_list>.cdm_cart_item:last-child {
    margin-bottom: 0;
}

.cdm_cart_item_list>.cdm_cart_item>.cdm_ci_image {
    width: 100px;
    height: 80px;
    flex: none;
}

.cdm_cart_item_list>.cdm_cart_item>.cdm_ci_image>img {
    width: 100px;
    height: 80px;
    object-fit: contain;
    background-color: #f3f4f9;
    padding: 5px;
    border-radius: 5px;
}

.cdm_cart_item_list>.cdm_cart_item>.cdm_ci_details {
    flex: 1;
}

.cdm_cart_item_list>.cdm_cart_item>.cdm_ci_details>h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 5px;
}

.cdm_cart_item_list>.cdm_cart_item>.cdm_ci_details>p {
    margin: 0;
    color: #A8AEC0;
    margin-bottom: 5px;
}

.cdm_cart_item_list>.cdm_cart_item>.cdm_ci_details>p>span {
    color: var(--color-body);
}

.cdm_cart_item_list>.cdm_cart_item>.cdm_ci_details>.cdm_ci_price_remove {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cdm_cart_item_list>.cdm_cart_item>.cdm_ci_details>.cdm_ci_price_remove>.cdm_ci_price {
    color: var(--main-color);
    background-color: rgba(var(--main-color-rgb), 0.10);
    font-size: 16px;
    font-weight: 700;
    padding: 5px 10px 4px;
    border-radius: 5px;
}

.cdm_cart_item_list>.cdm_cart_item>.cdm_ci_details>.cdm_ci_price_remove>.cdm_ci_remove {
    color: #FF5959;
    font-weight: 600;
    cursor: pointer;
}

.cdm_cart_empty_box {
    text-align: center;
}

.cdm_cart_empty_box>p {
    margin: 0;
    margin-top: 20px;
    font-size: 16px;
}

.cdm_grand_total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgb(208, 217, 232, 0.5);
}

.cdm_grand_total>p,
.cdm_grand_total>h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
}

/* cart popup end */

/* transaction history start */
.cdm_transaction_history_wrapper {
    margin: 50px auto;
}

.cdm_transaction_history_boxlist {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    grid-gap: 20px;
}

.cdm_transaction_history_boxlist>.cdm_thb_item {
    background-color: #FFFFFF;
    box-shadow: 0px 10px 34px rgba(0, 0, 0, 0.03);
    border-radius: 5px;
    min-height: 105px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;
}

.cdm_transaction_history_boxlist>.cdm_thb_item>h3 {
    margin: 0;
    font-weight: 600;
    font-size: 20px;
    margin-bottom: 5px;
}

.cdm_transaction_history_boxlist>.cdm_thb_item>p {
    margin: 0;
    font-weight: 500;
}

.cdm_transaction_history_boxlist>.cdm_thb_item:hover {
    background-color: rgba(var(--main-color-rgb), 0.10);
    box-shadow: 0px 0px 0px 1px rgba(var(--main-color-rgb), 0.30);
}

.cdm_transaction_history_boxlist>.cdm_thb_item:hover>h3,
.cdm_transaction_history_boxlist>.cdm_thb_item:hover>p {
    color: var(--main-color);
}

.cdm_thb_item .tooltip-inner {
    white-space: nowrap;
}

.sp_table_wrapper.cdm_transaction_history_table {
    background-color: #ffffff;
    border: 1px solid #E8ECF4;
    border-radius: 10px;
    margin: 0;
    margin-top: 50px;
    padding: 30px;
}

.sp_table_wrapper.cdm_transaction_history_table>h3 {
    margin: 0;
    padding: 30px;
    font-weight: 600;
    font-size: 18px;
}

.sp_table_wrapper.cdm_transaction_history_table table.dataTable th,
.sp_table_wrapper.cdm_transaction_history_table table.dataTable td {
    white-space: nowrap;
}

.cdm_transaction_history_table table.dataTable {
    width: 100% !important;
}

.cdm_transaction_history_table.sp_table_wrapper table.dataTable thead th,
.cdm_transaction_history_table.sp_table_wrapper table.dataTable thead td {
    background-color: #F5F9FF;
    color: var(--color-body);
    font-weight: 600;
}

.cdm_payment_time>h3 {
    margin: 0;
    font-size: 14px;
    color: var(--color-body);
    font-weight: 600;
}

.cdm_payment_time>p {
    margin: 0;
    font-size: 12px;
    color: #A8AEC0;
}

.cdm_price {
    display: inline-block;
    font-weight: 600;
}

.cdm_price.credited {
    color: #54B435;
}

.cdm_price.debited {
    color: #FF5555;
}

.cdm_payment_status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 600;
    text-transform: capitalize;
}

.cdm_payment_status>span {
    width: 8px;
    height: 8px;
    border-radius: 2px;
}

.cdm_payment_status.success>span {
    background-color: #54B435;
}

.cdm_payment_status.pending>span {
    background-color: #FFB039;
}

.cdm_payment_status.failed>span {
    background-color: #FF5555;
}

/* transaction history end */

/* affiliate start */
.cdm_affiliate_wrapper {
    margin: 50px auto;
}

.cdm_affiliate_link_box {
    max-width: 670px;
    height: 60px;
    background: #FFFFFF;
    box-shadow: 0px 10px 34px rgba(0, 0, 0, 0.03);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 5px 5px 30px;
    gap: 10px;
}

.cdm_affiliate_link_box>p {
    flex: 1;
    margin: 0;
    color: #A8AEC0;
}

.cdm_affiliate_link_box>.sp_btn {
    width: 150px;
    border-radius: 4px;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 700;
}


.cdm_stats_boxlist {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    grid-gap: 20px;
}

.cdm_stats_boxlist.admin {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

.cdm_stats_boxlist>.cdm_stats_box_item {
    background-color: #FFFFFF;
    box-shadow: 0px 10px 34px rgba(0, 0, 0, 0.03);
    border-radius: 5px;
    min-height: 105px;
    display: flex;
    align-items: center;
    padding: 25px 30px;
    gap: 30px;
}

.cdm_stats_boxlist>.cdm_stats_box_item>.cdm_sbi_details>h3 {
    margin: 0;
    font-weight: 600;
    font-size: 20px;
    margin-bottom: 5px;
}

.cdm_stats_boxlist>.cdm_stats_box_item>.cdm_sbi_details>p {
    margin: 0;
    font-weight: 500;
    color: #A8AEC0;
}

.cdm_stats_boxlist>.cdm_stats_box_item:hover {
    background-color: rgba(var(--main-color-rgb), 0.10);
    box-shadow: 0px 0px 0px 1px rgba(var(--main-color-rgb), 0.30);
}

.cdm_stats_boxlist>.cdm_stats_box_item:hover>.cdm_sbi_details>h3,
.cdm_stats_boxlist>.cdm_stats_box_item:hover>.cdm_sbi_details>p {
    color: var(--main-color);
}

.cdm_stats_boxlist>.cdm_stats_box_item:hover>.cdm_sbi_icon>svg path {
    fill: var(--main-color);
}


/* affiliate end */

.spj_view_all_product {
    margin: 50px 0;
}

/* checkout page start */
.sp_checkout_box_wrapper {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    flex-wrap: wrap;
}

.sp_checkout_box_wrapper>.sp_checkout_design_list {
    flex: 1;
    width: 100%;
}

.sp_checkout_form_wrapper {
    width: 100%;
    max-width: 400px;
    flex: none;
    background-color: #ffffff;
    box-shadow: 0px 3px 6px 0px rgb(0 0 0 / 6%), 0px 3px 6px 0px rgb(0 0 0 / 23%);
    border-radius: 10px;
    padding: 30px;
}

.sp_checkout_form_wrapper>h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 400;
    margin-bottom: 10px;
}

.sp_checkout_form_wrapper .sp_input_wrapper .sp_input {
    height: 48px;
    background-color: #F8FAFD;
    border-radius: 4px;
    font-size: 14px;
    padding: 0 15px;
}

.sp_checkout_form_wrapper .sp_input_wrapper .sp_input:focus {
    border-color: var(--main-color);
    outline: 0;
    border-color: hsla(210, 96%, 45%, 50%);
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.03), 0px 3px 6px rgba(0, 0, 0, 0.02), 0 0 0 3px var(--p-colorPrimaryAlpha20), 0 1px 1px 0 rgba(0, 0, 0, 0.08);
}

.sp_checkout_form_wrapper .sp_input_wrapper textarea.sp_input {
    height: auto;
    padding: 15px;
}

.sp_checkout_form_wrapper .sp_btn {
    border-radius: 4px;
}

.sp_checkout_total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.sp_checkout_total>p {
    margin: 0;
    color: var(--color-heading);
}

.sp_checkout_total>h3 {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
}

.sp_checkout_design_list .cdm_cart_item_list>.cdm_cart_item {
    padding: 15px;
    background-color: #ffffff;
    border: 1px solid #E7E7E7;
    border-radius: 6px;
    margin-bottom: 20px;
}

/* checkout page end */

/* payment status start */
.sp_payment_status {
    width: 100%;
    max-width: 460px;
    margin: 50px auto;
}

.sp_payment_status>.sp_ps_header {
    background-color: var(--main-color);
    padding: 30px;
    text-align: center;
    border-radius: 10px;
    margin-bottom: 20px;
}

.sp_payment_status.error>.sp_ps_header {
    background-color: #f44336;
}

.sp_payment_status>.sp_ps_header>svg {
    width: 40px;
    height: auto;
    margin-bottom: 15px;
}

.sp_payment_status>.sp_ps_header>h3 {
    margin: 0;
    margin-bottom: 6px;
    font-weight: 700;
    font-size: 20px;
    color: #ffffff;
}

.sp_payment_status>.sp_ps_header>p {
    margin: 0;
    font-size: 16px;
    color: #ffffff;
    font-weight: 300;
}

.sp_ps_white_box {
    background-color: #FFFFFF;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.04);
    border-radius: 10px;
    padding: 30px;
    margin-bottom: 20px;
}

.sp_ps_white_box>h3 {
    margin: 0;
    font-weight: 400;
    font-size: 18px;
}

.sp_ps_amount {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sp_ps_amount>h1 {
    margin: 0;
    font-weight: 700;
    font-size: 26px;
}

.sp_ps_tid {
    border-radius: 5px;
    background-color: rgba(var(--main-color-rgb), 0.10);
    color: var(--main-color);
    padding: 1rem;
    font-weight: 600;
    margin-top: 10px;
}

.sp_ps_cinfo {
    margin-top: 5px;
}

.sp_ps_cinfo:nth-child(2) {
    margin-top: 15px;
}

.sp_ps_cinfo>span {
    min-width: 50px;
    font-weight: 700;
    display: inline-block;
}

.sp_payment_status .sp_btn.sp_btn_border {
    border-color: var(--main-color);
    color: var(--main-color);
    border-radius: 6px;
    font-size: 14px;
    background-color: #ffffff;
}

.sp_payment_status .sp_btn.sp_btn_border:hover {
    border-color: var(--main-color);
    background-color: var(--main-color);
    color: #ffffff;
}

/* payment status end */

.spma_filter_wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 30px;
}

.spma_filter_item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.spma_filter_item>.sp_input_wrapper {
    margin: 0;
}

.spma_filter_item>.sp_input_wrapper .sp_input {
    height: 50px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-body);
    border-color: #CBD5E4;
    padding: 0 20px 0px 50px;
}

.spma_filter_item>.sp_input_wrapper.sp_input_icon .sp_input {
    padding-left: 50px;
}

.spma_filter_item>.sp_input_wrapper .sp_icon {
    width: 50px;
    height: 50px;
}

.spma_filter_item>.sp_input_wrapper .sp_icon>svg {
    width: 18px;
    height: auto;
}

.sp_admin_content_wrapper .cdm_stats_boxlist>.cdm_stats_box_item {
    justify-content: center;
    text-align: center;
    border: 1px solid #E8ECF4;
    box-shadow: none;
    border-radius: 6px;
}

.sp_admin_content_wrapper .cdm_stats_boxlist>.cdm_stats_box_item>.cdm_sbi_details>h3 {
    font-size: 26px;
    color: var(--main-color);
}

.sp_admin_content_wrapper .cdm_stats_boxlist>.cdm_stats_box_item.success>.cdm_sbi_details>h3 {
    color: #28C90E;
}

.sp_admin_content_wrapper .cdm_stats_boxlist>.cdm_stats_box_item.error>.cdm_sbi_details>h3 {
    color: #F53030;
}

.sp_admin_content_wrapper .cdm_stats_boxlist>.cdm_stats_box_item.info>.cdm_sbi_details>h3 {
    color: #FFB039;
}

.cdm_withdrawalable_amount {
    color: var(--main-color);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    position: relative;
}

.cdm_withdrawalable_amount .sp_info_tooltip {
    transform: translateY(0px);
}

.cdm_withdrawalable_amount .tooltip-inner {
    max-width: inherit;
}

/* admin marketplace dashboard start */
.cdma_dashboard_transactions {
    background-color: #ffffff;
    border: 1px solid #E8ECF4;
    border-radius: 6px;
    padding: 30px;
    margin-top: 30px;
}

.cdma_dashboard_transactions table.dataTable {
    width: 100% !important;
}

.cdma_dashboard_transactions .sp_table_wrapper {
    margin-bottom: 0;
}

.cdma_dash_trans_tab_wrapper>ul {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-bottom: 15px;
}

.cdma_dash_trans_tab_wrapper>ul>li {
    display: inline-block;
    vertical-align: middle;
    margin-right: 15px;
}

.cdma_dash_trans_tab_wrapper>ul>li>a {
    display: inline-block;
    padding: 2px;
    color: var(--color-heading);
    font-weight: 600;
    font-size: 16px;
}

.cdma_dash_trans_tab_wrapper>ul>li.active>a {
    color: var(--main-color);
    box-shadow: 0px 1px;
}

.cdma_dash_trans_tab_content {
    display: none;
}

.cdma_dash_trans_tab_content.active {
    display: block;
}

.cdma_dashboard_transactions .sp_table_wrapper table.dataTable thead th,
.cdma_dashboard_transactions .sp_table_wrapper table.dataTable thead td {
    background-color: #F5F9FF;
    color: var(--color-body);
    font-weight: 600;
}

.cdma_payment_status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.cdma_payment_status:before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background-color: var(--main-color);
}

.cdma_payment_status.pending:before {
    background-color: #F2CC01;
}

.cdma_payment_status.success:before {
    background-color: #28C90E;
}

/* admin marketplace dashboard end */

.sp_dtable_thumb {
    width: 42px;
    height: 42px;
    border: 1px solid #E3E3E3;
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}

.sp_dtable_thumb>img {
    width: 42px;
    height: 42px;
    object-fit: contain;
    padding: 2px;
}

.sp_dtable_thumb>.sp_dtable_thumb_overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(30, 31, 40, 0.80);
    cursor: pointer;
    flex-direction: column;
    color: #ffffff !important;
    gap: 4px;
    font-size: 14px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s;
}

.sp_dtable_thumb:hover>.sp_dtable_thumb_overlay {
    opacity: 1;
    visibility: visible;
}

.sp_table_head_title {
    display: inline-flex;
    position: relative;
}

.sp_table_head_title .tooltip-inner {
    min-width: 200px;
}

/* messages start */
.cdm_message_wrapper {
    margin: 50px 0;
    background-color: #ffffff;
    border: 1px solid #E8ECF4;
    border-radius: 5px;
    display: grid;
    grid-template-columns: 315px 1fr;
}

.cdm_message_wrapper>.cdm_message_sidebar {
    border-right: 1px solid #E8ECF4;
}

.cdm_message_wrapper>.cdm_message_sidebar>.cdm_message_sidebar_header {
    padding: 20px;
}

.cdm_message_wrapper>.cdm_message_sidebar>.cdm_message_sidebar_header>h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.cdm_messager_list {
    border-top: 1px solid #E8ECF4;
    max-height: calc(100vh - 280px);
    overflow: auto;
}

.cdm_messager_item {
    border-bottom: 1px solid #E8ECF4;
    display: grid;
    grid-template-columns: 40px minmax(0px, 1fr);
    align-items: center;
    gap: 15px;
    padding: 20px;
    cursor: pointer;
}

.cdm_messager_item.active {
    background-color: rgba(var(--main-color-rgb), 0.03);
    box-shadow: inset 2px 0px 0px var(--main-color);
}

.cdm_messager_item>.cdm_messager_avatar {
    flex: none;
    position: relative;
}

.cdm_messager_item>.cdm_messager_avatar>.cdm_messager_avatar_initials {
    width: 40px;
    height: 40px;
    border-radius: 5px;
    background-color: var(--main-color);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    text-transform: uppercase;
}

.cdm_messager_item>.cdm_messager_avatar>img {
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
    border-radius: 5px;
    object-fit: cover;
}

.cdm_messager_item>.cdm_messager_name {
    flex: 1;
}

.cdm_messager_item>.cdm_messager_name>h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    display: grid;
    grid-template-columns: 1fr 40px;
    align-items: center;
}

.cdm_messager_item>.cdm_messager_name>h3>span.cdm_messager_name_text {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cdm_messager_item>.cdm_messager_name>h3>span.cdm_last_message_time {
    font-size: 12px;
    color: #A8AEC0;
    font-weight: 400;
    text-align: right;
}

.cdm_messager_item>.cdm_messager_name>p {
    margin: 0;
    color: #A8AEC0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 13px;
}

.cdm_message_wrapper>.cdm_message_content {
    display: flex;
    flex-direction: column;
}

.cdm_message_wrapper>.cdm_message_content>.cdm_message_content_header,
.cdm_message_wrapper>.cdm_message_content>.cdm_message_content_footer {
    flex: none;
}

.cdm_message_wrapper>.cdm_message_content>.cdm_message_content_body {
    flex: 1;
}

.cdm_message_content_header {
    display: flex;
    align-items: center;
    padding: 20px;
    min-height: 100px;
    border-bottom: 1px solid #E8ECF4;
}

.cdm_message_content_header>.cdm_message_avatar_wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 15px;
}

.cdm_message_content_header>.cdm_message_avatar_wrapper>.cdm_message_avatar {
    flex: none;
    position: relative;
}

.cdm_message_content_header>.cdm_message_avatar_wrapper>.cdm_message_avatar>.cdm_message_avatar_initials {
    width: 60px;
    height: 60px;
    border-radius: 5px;
    background-color: var(--main-color);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    text-transform: uppercase;
}

.cdm_message_content_header>.cdm_message_avatar_wrapper>.cdm_message_avatar>img {
    position: absolute;
    top: 0;
    left: 0;
    width: 60px;
    height: 60px;
    border-radius: 5px;
    object-fit: cover;
}

.cdm_message_content_header>.cdm_message_avatar_wrapper>.cdm_message_name {
    flex: 1;
    font-size: 18px;
    font-weight: 600;
    color: var(--color-heading);
}

.cdm_message_content_header>.cdm_message_avatar_wrapper>.cdm_message_name>h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.cdm_message_content_header>.sp_btn.sp_btn_border {
    flex: none;
    height: 40px;
    line-height: 40px;
    color: var(--main-color);
    border-color: var(--main-color);
    font-size: 14px;
    min-width: 150px;
    border-radius: 5px;
}

.cdm_message_content_header>.sp_btn.sp_btn_border:hover {
    border-color: var(--main-color);
    background-color: var(--main-color);
    color: #ffffff;
}

.cdm_message_content_body>.sp_mpal_chat_box {
    border: none;
    background-color: transparent;
    margin-bottom: 0;
    border-radius: 0;
}

.cdm_message_content_body>.sp_mpal_chat_box>.sp_mpal_chat_box_inner {
    padding: 30px;
    max-height: calc(100vh - 425px);
    min-height: calc(100vh - 425px);
}

.cdm_message_content_body>.sp_mpal_chat_box>.sp_mpal_chat_box_inner .sp_mpal_chat_msg_inner .sp_mpal_chat_msg_text {
    border-color: rgba(var(--main-color-rgb), 0.10);
    background-color: rgba(var(--main-color-rgb), 0.10);
    font-weight: 500;
    color: #484a50;
}

.cdm_message_content_body>.sp_mpal_chat_box>.sp_mpal_chat_box_inner .sp_mpal_chat_msg.my_msg .sp_mpal_chat_msg_inner .sp_mpal_chat_msg_text {
    background-color: var(--main-color);
    border-color: var(--main-color);
    color: #ffffff;
}

.cdm_message_content_body>.sp_mpal_chat_box>.sp_mpal_chat_box_inner .sp_mpal_chat_msg_name>.sp_mpal_cmn_name {
    color: var(--main-color);
}

.cdm_message_content_body>.sp_mpal_chat_box>.no_search_result {
    margin: 0;
    height: calc(100vh - 425px);
    overflow: auto;
    padding: 60px 10px;
}

.cdm_message_content_footer {
    background-color: #F0F3F8;
    padding: 20px;
}

.cdm_message_content_footer>.sp_mpal_message_sender {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
}

.cdm_message_content_footer>.sp_mpal_message_sender .sp_input_wrapper {
    margin-bottom: 0;
}

.cdm_message_content_footer>.sp_mpal_message_sender .sp_input_wrapper textarea.sp_input {
    height: 53px;
    padding: 14px 20px;
    border-radius: 5px;
    resize: vertical;
}

.cdm_message_content_footer>.sp_mpal_message_sender .sp_btn {
    min-width: 150px;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.cdm_message_content_footer>.sp_mpal_message_sender .sp_btn>svg {
    margin-top: -2px;
}

/* messages end */

.sp_mp_price_box {
    background-color: rgba(var(--main-color-rgb), 0.04);
    border: 1px solid rgba(var(--main-color-rgb), 0.30);
    border-radius: 4px;
    padding: 15px;
    display: grid;
    grid-template-columns: 140px 30px 60px 30px 80px;
    align-items: flex-start;
    gap: 15px;
}

.sp_mp_price_box>.sp_mppb_item>label {
    display: block;
    margin-bottom: 5px;
}

.sp_mp_price_box>.sp_mppb_item>input {
    height: 50px;
    border-radius: 6px;
    border: 1px solid var(--main-color);
    background-color: #ffffff;
    outline: none;
    width: 140px;
    padding: 0 15px;
}

.sp_mp_price_box>.sp_mppb_item>.sp_mppb_sign {
    display: block;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    transform: translateY(35px);
}

.sp_mp_price_box>.sp_mppb_item>p {
    margin: 0;
    font-size: 22px;
    color: var(--color-heading);
    margin-top: 14px;
}

.sp_mp_price_box>.sp_mppb_item>p.sp_mppb_price {
    color: var(--main-color);
    font-weight: 700;
}

/********************************************************************************************* 
17. marketplace end
*********************************************************************************************/

/********************************************************************************************* 
18. Free trial start
*********************************************************************************************/
.sp_free_trial_timer_wrapper {
    position: fixed;
    bottom: -1px;
    left: 30px;
    z-index: 100;
    background-color: #fff;
    border-radius: 10px 10px 0 0;
    animation: freeTrialTimer 0.4s cubic-bezier(0.65, 0.05, 0.36, 1);
}

@keyframes freeTrialTimer {
    0% {
        transform: translateY(100%)
    }

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

.sp_free_trial_timer_wrapper>.sp_free_trial_timer_inner {
    width: 255px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid var(--main-color);
    background-color: rgba(var(--main-color-rgb), 0.1);
    border-radius: 10px 10px 0 0;
    color: var(--main-color);
    font-weight: 600;
}

.sp_free_trial_timer_wrapper>.sp_free_trial_timer_inner>p {
    margin: 0;
}

.sp_free_trial_timer_wrapper>.sp_free_trial_timer_inner>p>span {
    font-weight: 700;
}

.sp_free_trial_timer_wrapper>.sp_free_trial_timer_inner>svg path {
    fill: var(--main-color);
}

.sp_free_trial_popup_wrapper {
    position: fixed;
    top: 63px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    background-color: rgba(255, 255, 255, 0.40);
    backdrop-filter: blur(5px);
    padding: 15px;
    text-align: center;
    overflow: auto;
}

.sp_free_trial_popup_wrapper::before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 1px;
    height: 100%;
}

.sp_free_trial_popup_inner {
    display: inline-block;
    vertical-align: middle;
    width: 100%;
    max-width: 570px;
    margin-left: -1px;
    background-color: #ffffff;
    border-radius: 15px;
    padding: 50px;
    border: 1px solid #E2E2E2;
}

.sp_free_trial_popup_inner svg {
    width: 60px;
    height: auto;
    margin-bottom: 15px;
}

.sp_free_trial_popup_inner svg path {
    fill: var(--main-color);
}

.sp_free_trial_popup_inner h1 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
}

.sp_free_trial_popup_inner p {
    margin: 0;
    font-size: 22px;
    margin-bottom: 20px;
}

.sp_free_trial_popup_extra_upgrade {
    background-color: #FCF8E3;
    border: 3px dashed #000000;
    padding: 10px;
    margin-top: 15px;
}

.sp_free_trial_popup_extra_upgrade>.sp_ftpeu_header {
    background-color: #FFFF99;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 10px;
    color: #333333;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 10px;
}

.sp_ftpeu_header .sp_checkbox>label::before {
    background-color: #ffffff;
    border-color: #333333;
}

.sp_ftpeu_body {
    text-align: left;
}

.sp_ftpeu_body>h3 {
    margin: 0;
    color: #CC3300;
    font-size: 14px;
    font-weight: 600;
}

.sp_ftpeu_body>ul {
    color: #333333;
    margin: 0;
    margin-top: 6px;
}

.sp_ftpeu_body>ul>li {
    margin-bottom: 10px;
    font-weight: 600;
}

.sp_ftpeu_body>ul>li:last-child {
    margin-bottom: 0px;
}

.sp_free_trial_timer {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    margin-top: 20px;
}

.sp_free_trial_timer>h3 {
    margin: 0;
}

/* timer start */
.sp_timer {
    display: flex;
    align-items: center;
    gap: 15px;
}

.sp_timer>.ce-col>.ce-seconds,
.sp_timer>.ce-col>.ce-minutes,
.sp_timer>.ce-col>.ce-hours,
.sp_timer>.ce-col>.ce-days {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    box-shadow: 0px 0px 0px 2px #333333;
    border-radius: 50px;
    color: #333333;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 5px;
}

.sp_timer>.ce-col>.ce-seconds-label,
.sp_timer>.ce-col>.ce-minutes-label,
.sp_timer>.ce-col>.ce-hours-label,
.sp_timer>.ce-col>.ce-days-label {
    color: #333333;
    font-size: 12px;
    font-weight: 600;
    display: block;
}

/* timer end */

@media(max-width: 768px) {
    .sp_free_trial_popup_wrapper::before {
        display: none;
    }
}

/********************************************************************************************* 
18. Free trial end
*********************************************************************************************/

/********************************************************************************************* 
19. Publisher start
*********************************************************************************************/
.sp_camp_check {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #ffffff;
    width: 20px;
    height: 20px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
}

.sp_camp_check>svg path {
    fill: var(--main-color);
}

.sp_cal_pdl_body .sp_campaign_list {
    max-height: 455px;
    overflow: auto;
    padding: 10px;
}

.sp_cal_pdl_body .sp_campaign_list>.sp_campaign_item>.sp_campaign_inner>.sp_camp_img>.sp_camp_overlay {
    border-radius: 5px 5px 0 0 !important;
}

.sp_cal_pdl_body .sp_campaign_list>.sp_campaign_item.active>.sp_campaign_inner>.sp_camp_img>.sp_camp_overlay {
    background-color: rgba(var(--main-color-rgb), 0.7);
    opacity: 1;
    visibility: visible;

}

.sp_cal_pdl_body .sp_campaign_list>.sp_campaign_item.active .sp_camp_overlay .sp_camp_check {
    opacity: 1;
    visibility: visible;
}

.sp_cal_pdl_body .sp_campaign_list>.sp_campaign_item.active>.sp_campaign_inner>.sp_camp_img>.sp_camp_overlay .sp_btn {
    background-color: #ffffff;
    color: var(--main-color);
}

.sp_cal_pdl_body .sp_campaign_list>.sp_campaign_item>.sp_campaign_inner {
    box-shadow: 0px 4px 34px 0px rgba(0, 0, 0, 0.03), 0px 0px 0px 1px #dce0e7;
    border-radius: 5px;
}

.sp_cal_pdl_body .sp_campaign_list>.sp_campaign_item>.sp_campaign_inner>.sp_camp_detail {
    padding: 8px 10px;
}

.sp_cal_pdl_body .sp_campaign_list>.sp_campaign_item>.sp_campaign_inner>.sp_camp_detail>h3 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
}

.sp_cal_pdl_body .sp_campaign_list>.sp_campaign_item>.sp_campaign_inner>.sp_camp_img>.sp_remove_brand_icon {
    opacity: 1;
    visibility: visible;
    z-index: 11;
    transform: scale(1);
}

#cal_post_design_popup .sp_campaign_list>.sp_campaign_item>.sp_campaign_inner>.sp_camp_img>img {
    border-radius: 5px 5px 0 0 !important;
}

.sp_post_image_slider .swiper-slide img {
    width: 100%;
}

.sp_upload_video_dropzone {
    cursor: pointer;
    margin-bottom: 15px;
}

.sp_upload_video_dropzone .sp_upload_image_box {
    max-width: 100%;
    pointer-events: none;
}

.sp_upload_video_dropzone .dz-preview {
    position: relative;
}

.sp_upload_video_dropzone .dz-preview .dz-progress {
    height: 32px;
    background-color: rgba(var(--main-color-rgb), 0.1);
    border: 1px solid var(--main-color);
    margin-top: 10px;
    border-radius: 50px;
    position: relative;
    overflow: hidden;
}

.sp_upload_video_dropzone .dz-preview .dz-progress>span.dz-upload {
    position: absolute;
    opacity: 0.3;
    top: 0px;
    left: 0px;
    bottom: 0px;
    background-color: var(--main-color);
    border-radius: 50px;
    background-size: 15px 15px;
    animation: move_progressbar 1.5s linear infinite;
    background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
}

.sp_upload_video_dropzone .dz-preview .dz-details {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    line-height: 32px;
    color: var(--main-color);
    z-index: 1;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row-reverse;
    gap: 5px;
}

.sp_upload_video_dropzone .dz-preview .dz-details .dz-size strong,
.sp_upload_video_dropzone .dz-preview .dz-details .dz-size {
    font-weight: 900;
}

.sp_upload_video_dropzone .dz-preview .dz-error-mark,
.sp_upload_video_dropzone .dz-preview .dz-success-mark,
.sp_upload_video_dropzone .dz-preview .dz-error-message,
.sp_upload_video_dropzone .dz-preview .dz-image {
    display: none !important;
}

/* text AI start */
.sp_cal_textai_btn_label {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
}

.sp_cal_textai_btn_label>.sp_cal_textai_btn {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    border: 1px solid var(--main-color);
    border-radius: 6px;
    padding: 4px 10px;
    color: var(--main-color);
    font-weight: 600;
    position: relative;
    cursor: pointer;
}

.sp_cal_textai_btn_label>.sp_cal_textai_btn:hover {
    background-color: rgba(var(--main-color-rgb), 0.05);
}

.sp_cal_textai_btn_label>.sp_cal_textai_btn>svg path {
    fill: var(--main-color);
}

.sp_cal_textai_btn_label>.sp_cal_textai_btn .image_ai_tag {
    top: -10px;
}

.sp_cal_textai_content_wrapper {
    padding: 30px;
    background-color: #fbfbfb;
    border-radius: 5px;
    border: 1px solid #E9E9F4;
}

.sp_cal_textai_content_wrapper>h3 {
    font-size: 16px;
    margin: 0;
    margin-bottom: 15px;
    font-weight: 600;
}

.sp_cal_textai_content_wrapper>h3 .sp_back_arrow {
    position: relative;
}

.sp_cal_textai_content_wrapper .sp_input_wrapper textarea.sp_input {
    padding: 15px;
    font-size: 14px;
    min-height: 110px;
}

.sp_cal_textai_content_wrapper .sp_gsl_text_list {
    max-height: 50vh;
    overflow-y: auto;
    padding: 1px 5px 1px 1px;
}

.sp_cal_textai_content_wrapper .sp_gsl_text_list>.sp_gslt_item {
    box-shadow: 0px 0px 0px 1px #e9e9f4;
    background-color: #fff;
}

.sp_cal_textai_content_wrapper .sp_gsl_text_list>.sp_gslt_item:hover {
    box-shadow: 0px 0px 0px 1px rgba(var(--main-color-rgb), 0.3);
    background-color: rgba(var(--main-color-rgb), 0.04);
}

.sp_cal_textai_content_wrapper .sp_gsl_text_list>.sp_gslt_item>.sp_gslt_header>h3 {
    color: var(--color-heading);
}

.sp_cal_textai_content_wrapper .sp_gslt_body>p {
    color: var(--color-body);
    word-break: break-word;
}

.sp_cal_textai_content_wrapper .sp_gslt_header_btns>.sp_gslt_header_btn:hover>svg path {
    fill: var(--main-color);
}

/* text AI end */

/********************************************************************************************* 
19. Publisher end
*********************************************************************************************/

/********************************************************************************************* 
20. Announcements start
*********************************************************************************************/
.sp_notification_wrapper {
    display: inline-flex;
    vertical-align: middle;
    margin-right: 15px;
    position: relative;
}

.sp_notification_dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0px;
    min-width: 340px;
    background-color: #ffffff;
    box-shadow: 0px 3px 6px 0px rgb(0 0 0 / 6%), 0px 3px 6px 0px rgb(0 0 0 / 23%);
    border-radius: 3px;
    opacity: 0;
    visibility: hidden;
    z-index: 10;
    -webkit-transition: all 0.2s cubic-bezier(0.71, -0.11, 0.25, 0.88);
    -moz-transition: all 0.2s cubic-bezier(0.71, -0.11, 0.25, 0.88);
    transition: all 0.2s cubic-bezier(0.71, -0.11, 0.25, 0.88);
    -webkit-transform: translateY(-10px);
    -moz-transform: translateY(-10px);
    transform: translateY(-10px);
}

.open>.sp_notification_dropdown {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    transform: translateY(0px);
}

.sp_nd_header {
    background-color: rgba(var(--main-color-rgb), 0.04);
    border-bottom: 1px solid #F0F3F8;
}

.sp_nd_header>h3 {
    padding: 0px 14px;
    font-size: 16px;
    color: var(--color-heading);
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 46px;
}

.sp_nd_loader>img {
    width: 26px;
}

.sp_nd_body {
    max-height: 340px;
    overflow: auto;
    min-height: 160px;
}

.sp_ndn_item {
    padding: 10px;
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 8px;
    border-bottom: 1px solid #F0F3F8;
    cursor: pointer;
}

.sp_ndn_item:last-child {
    border-bottom: none;
}

.sp_ndn_item:hover {
    background-color: rgba(var(--main-color-rgb), 0.02);
}

.sp_ndn_item>.sp_ndn_item_icon {
    width: 36px;
    height: 36px;
    border-radius: 50px;
    background-color: rgba(var(--main-color-rgb), 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.sp_ndn_item>.sp_ndn_item_icon>svg path {
    fill: var(--main-color);
}

.sp_ndn_item>.sp_ndn_item_details>h3 {
    margin: 0;
    font-size: 14px;
    color: var(--color-body);
    font-weight: 600;
}

.sp_ndn_item>.sp_ndn_item_details p {
    margin: 0;
    font-size: 12px;
    color: var(--color-body);
}

.sp_ndn_item>.sp_ndn_item_details .sp_ann_label_list {
    gap: 4px;
    margin-top: 6px;
}

.sp_ndn_item>.sp_ndn_item_details .sp_ann_label_list>li {
    padding: 3px 5px;
    border-radius: 6px;
    font-size: 12px;
}

.sp_nd_load_more {
    border-top: 1px solid #F0F3F8;
    padding: 10px;
    text-align: center;
    color: var(--main-color);
    text-decoration: underline;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
}

.sp_announcements_icon_wrapper {
    display: inline-flex;
    vertical-align: middle;
    margin-right: 15px;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
}

.open>.sp_announcements_icon_wrapper {
    pointer-events: none;
}

.sp_announcements_icon_wrapper>svg {
    pointer-events: none;
}

.open>.sp_announcements_icon_wrapper>svg path {
    fill: var(--main-color);
}

.sp_announcements_icon_wrapper>span {
    position: absolute;
    top: -4px;
    left: 18px;
    background-color: #ff6666;
    border-radius: 10px;
    padding: 3px 5px 2px;
    line-height: 10px;
    font-size: 10px;
    color: #ffffff;
    font-weight: 700;
    z-index: 1;
    display: none;
}

.sp_announcements_icon_wrapper:hover>svg path {
    fill: var(--main-color);
}

/* .sp_announcements_icon_wrapper.unread:before {
    content: "";
    position: absolute;
    top: 6px;
    right: 6px;
    width: 7px;
    height: 7px;
    background-color: #FF5151;
    border-radius: 10px;
} */
.sp_announcements_icon_wrapper.unread>span {
    display: block;
}

.sp_announcements_icon_wrapper.unread>span:after {
    content: "";
    position: absolute;
    top: 0px;
    right: 0px;
    width: 100%;
    height: 100%;
    border: 1px solid #FF5151;
    border-radius: 10px;
    animation: annNotificationIcon 0.6s infinite ease-in-out;
    animation-fill-mode: forwards;
    z-index: -1;
}

@keyframes annNotificationIcon {
    0% {
        transform: scale(0);
        opacity: 1;
    }

    100% {
        transform: scale(1.6);
        opacity: 0.2;
    }
}

.sp_popup_wrapper#add_announcements_popup>.sp_popup_inner {
    max-width: 820px;
}

.sp_ann_popup_wrapper {
    position: fixed;
    top: 63px;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #F8FAFD;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.2s cubic-bezier(0.71, -0.11, 0.25, 0.88);
    -moz-transition: all 0.2s cubic-bezier(0.71, -0.11, 0.25, 0.88);
    transition: all 0.2s cubic-bezier(0.71, -0.11, 0.25, 0.88);
    transform: translateY(20px);
    z-index: 99;
    padding: 70px 15px;
    overflow: auto;
}

body.open_ann_popup {
    overflow: hidden;
}

body.open_ann_popup .sp_ann_popup_wrapper {
    opacity: 1;
    visibility: visible;
    transform: translateY(0px);
}

.sp_ann_popup_inner {
    max-width: 820px;
    margin: 0 auto;
}

.sp_ann_popup_title {
    margin: 0;
    margin-bottom: 20px;
    font-size: 24px;
    font-weight: 600;
}

.sp_ann_item {
    margin-bottom: 30px;
}

.sp_ann_item>.sp_ann_item_header {
    display: grid;
    grid-template-columns: 46px 1fr;
    align-items: center;
    margin-bottom: 10px;
}

.sp_ann_item>.sp_ann_item_header>.sp_aih_icon {
    width: 46px;
    height: 46px;
    background-image: url('../images/icons/ann_version_update.svg');
    background-position: center center;
    background-repeat: no-repeat;
}

.sp_ann_item.announcements>.sp_ann_item_header>.sp_aih_icon {
    background-image: url('../images/icons/ann_announcements.svg');
}

.sp_ann_item>.sp_ann_item_header>.sp_aih_content>h3 {
    margin: 0;
    font-size: 14px;
    color: var(--main-color);
    font-weight: 700;
}

.sp_ann_item>.sp_ann_item_header>.sp_aih_content>p {
    margin: 0;
    font-size: 13px;
}

.sp_ann_item_body {
    border-radius: 6px;
    background-color: #ffffff;
    padding: 30px;
    border: 1px solid #DDE1E8;
    position: relative;
}

.sp_ann_item_body:before {
    content: "";
    position: absolute;
    top: -6px;
    left: 16px;
    border-top: 1px solid #DDE1E8;
    border-left: 1px solid #DDE1E8;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    transform: rotate(45deg);
    background-color: #fff;
}

.sp_ann_item_body>h1 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
}

ul.sp_ann_label_list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

ul.sp_ann_label_list>li {
    padding: 6px 12px;
    border-radius: 50px;
    border: 1px solid;
    font-size: 13px;
    font-weight: 600;
}

ul.sp_ann_label_list>li.new_feature {
    color: #11C302;
}

ul.sp_ann_label_list>li.improvement {
    color: #FDAD34;
}

ul.sp_ann_label_list>li.issue_fixed {
    color: #FD3434;
}

.sp_ann_item_body img {
    max-width: -webkit-fill-available;
    height: auto;
}

.sp_ann_description {
    margin-top: 30px;
}

/********************************************************************************************* 
20. Announcements end
*********************************************************************************************/

/********************************************************************************************* 
21. Pages start
*********************************************************************************************/
.sp_page_wrapper_popup {
    position: fixed;
    top: 63px;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 60px 80px;
    background-color: #f8fafd;
    z-index: 999;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    transition: all 0.2s ease;
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateY(10%);
    -moz-transform: translateY(10%);
    transform: translateY(10%);
}

body.pagefolder_popup_open,
body.page_popup_open {
    overflow: hidden;
}

.page_creator_bar_open .sp_page_wrapper_popup {
    bottom: 200px;
}

.pagefolder_popup_open .sp_page_wrapper_popup,
.page_popup_open .sp_page_wrapper_popup {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    transform: translateY(0);
}

.pagefolder_popup_open .sp_design_list_with_sidebar {
    grid-template-columns: 100%;
}

.pagefolder_popup_open .sp_view_more,
.pagefolder_popup_open .sp_pt_right,
.pagefolder_popup_open .sp_design_list_with_sidebar>.sp_design_lws_sidebar {
    display: none !important;
}

.sp_page_wrapper_popup .sp_back_arrow {
    cursor: pointer;
    width: 25px;
    height: 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    margin-right: 25px;
}

.sp_page_wrapper_popup .sp_back_arrow>svg {
    width: 20px;
    height: 20px;
}

.sp_page_wrapper_popup .sp_back_arrow>svg path {
    fill: var(--main-color);
}

.sp_design_list_with_sidebar {
    display: grid;
    grid-template-columns: 20% 1fr;
    grid-gap: 20px;
    margin-bottom: 30px;
    align-items: flex-start;
}

.sp_design_list_with_sidebar>.sp_design_lws_sidebar {
    background: #FFFFFF;
    box-shadow: 0px 0px 20px rgb(0 0 0 / 10%);
    border-radius: 10px;
    padding: 25px;
}

.sp_design_list_with_sidebar>.sp_design_lws_sidebar>ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sp_design_list_with_sidebar>.sp_design_lws_sidebar>ul>li {
    padding: 10px 0;
    display: block;
    cursor: pointer;
    font-size: 14px;
}

.sp_design_list_with_sidebar>.sp_design_lws_sidebar>ul>li.active,
.sp_design_list_with_sidebar>.sp_design_lws_sidebar>ul>li:hover {
    color: var(--main-color);
}

.sp_page_block_list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    grid-gap: 20px;
    align-items: flex-start;
}

.sp_page_block_list>.sp_pbl_item>.sp_pbl_item_inner {
    position: relative;
    border-radius: 8px;
    background-color: #ffffff;
    box-shadow: 0px 4px 34px 0px rgb(0 0 0 / 3%);
    transition: all 0.3s;
}

.sp_page_block_list>.sp_pbl_item.active>.sp_pbl_item_inner {
    box-shadow: 0px 0px 0px 2px var(--main-color);
}

.sp_pbl_check {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 16px;
    height: 16px;
    border-radius: 2px;
    background-color: #ffffff;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    opacity: 0;
    visibility: hidden;
    transform: scale(0);
}

.sp_pbl_check::before {
    content: "";
    width: 10px;
    height: 10px;
    background-color: var(--main-color);
    border-radius: 2px;
    transition: all 0.3s;
    transition-delay: 0.1s;
    opacity: 0;
    visibility: hidden;
    transform: scale(0);
}

.sp_page_block_list>.sp_pbl_item.active .sp_pbl_check,
.sp_page_block_list>.sp_pbl_item.active .sp_pbl_check::before {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

.sp_page_block_list>.sp_pbl_item>.sp_pbl_item_inner>img {
    width: 100%;
}

.sp_page_block_list>.sp_pbl_item>.sp_pbl_item_inner>.sp_img_overlay {
    position: absolute;
    top: 4px;
    left: 4px;
    right: 4px;
    bottom: 4px;
    border-radius: 8px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.sp_page_block_list>.sp_pbl_item>.sp_pbl_item_inner>.sp_img_overlay.sp_has_img {
    background-color: #f8faff;
}

.sp_page_block_list>.sp_pbl_item>.sp_pbl_item_inner>.sp_pbl_action_overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 8px;
    background-color: rgba(30, 31, 40, 0.60);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 15px;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    transition: all 0.2s;
}

.sp_page_block_list>.sp_pbl_item:hover>.sp_pbl_item_inner>.sp_pbl_action_overlay {
    opacity: 1;
    visibility: visible;
}

.sp_page_list_creator_wrapper {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 200px;
    padding: 15px 0;
    background-color: #ffffff;
    z-index: 9999;
    box-shadow: 0px 3px 6px rgb(0 0 0 / 16%), 0px 3px 6px rgb(0 0 0 / 23%);
    border-top: 1px solid #dfe4ed;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s cubic-bezier(0.71, -0.11, 0.25, 0.88);
    transform: translateY(100%);
}

.page_creator_bar_open .sp_page_list_creator_wrapper {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.sp_page_creator_slider_wrapper {
    position: relative;
}

.sp_page_creator_slider_wrapper .sp_ssm_slider_btn {
    margin-top: -30px;
}

.spj_arrange_order_page_blocks .swiper-slide.ui-sortable-placeholder {
    visibility: visible !important;
    border-radius: 6px;
    background-color: rgba(var(--main-color-rgb), 0.1);
    width: auto;
    margin-right: 10px;
    height: 140px;
    box-shadow: inset 0px 0px 0px 1px var(--main-color);
}

.sp_page_creator_slider .swiper-slide {
    width: 206px;
}

.sp_page_creator_slider_item {
    cursor: move;
}

.sp_page_creator_slider_item>.sp_page_creator_slider_item_inner {
    background-color: #F5F7FF;
    border: 1px solid #C4D4FE;
    border-radius: 10px;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    margin-bottom: 5px;
}

.sp_page_creator_slider_item>.sp_page_creator_slider_item_inner>img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.sp_pcsi_remove {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 20px;
    height: 20px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ff6666;
    cursor: pointer;
}

.sp_pcsi_remove::before,
.sp_pcsi_remove::after {
    content: "";
    position: absolute;
    width: 12px;
    height: 2px;
    border-radius: 2px;
    background-color: #ffffff;
    transform: rotate(45deg);
}

.sp_pcsi_remove::after {
    transform: rotate(-45deg);
}


.sp_pcsi_drag {
    display: grid;
    grid-template-columns: 6px 6px 6px;
    gap: 3px;
    justify-content: center;
    cursor: move;
    padding: 5px;
}

.sp_pcsi_drag>span {
    width: 4px;
    height: 4px;
    border-radius: 10px;
    background-color: #adb6c5;
}

.sp_page_creator_slider_item:hover .sp_pcsi_drag>span {
    background-color: var(--main-color);
}

/********************************************************************************************* 
21. Pages end
*********************************************************************************************/

/********************************************************************************************* 
22. Download Page start
*********************************************************************************************/
.sp_download_page_wrapper {
    display: grid;
    grid-template-columns: 60% 1fr;
    gap: 30px;
}

.sp_download_page_wrapper>.sp_dp_item_image {
    background-color: #ffffff;
    box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.01);
    text-align: center;
    padding: 30px;
    border-radius: 12px;
}

.sp_download_page_wrapper>.sp_dp_item_image>img {
    max-width: 100%;
    max-height: 500px;
}

.sp_dp_item_content>h1 {
    margin: 0;
    margin-bottom: 15px;
    font-weight: 600;
    font-size: 24px;
}

.sp_dp_item_content .sp_iup_progress_bar_wrapper {
    position: relative;
    width: 176px;
    cursor: pointer;
}

.sp_dp_item_content .sp_iup_progress_bar_wrapper.disabled {
    opacity: 0.8;
    pointer-events: none;
}

.sp_dp_item_content .sp_iup_progress_bar_wrapper>.sp_iup_progress_bar {
    height: 50px;
    border-radius: 10px;
    background-color: var(--main-color);
    border-color: var(--main-color);
    pointer-events: none;
    overflow: hidden;
    border-width: 2px;
}

.sp_dp_item_content .sp_iup_progress_bar_wrapper>p {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    pointer-events: none;
}

.sp_dp_item_content .sp_iup_progress_bar_wrapper>p>span {
    margin-left: 4px;
}

.sp_dp_item_content .sp_iup_progress_bar_wrapper>.sp_iup_progress_bar>.sp_iup_progress_bar_active {
    top: 0px;
    left: 0px;
    bottom: 0px;
    border-radius: 8px;
    transition: all 0.3s linear;
}

.sp_dp_item_content>.sp_dp_item_process_wrapper {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-bottom: 15px;
}

.sp_dp_item_content>.sp_dp_item_process_wrapper>li {
    margin-bottom: 5px;
    font-weight: 600;
}

.sp_dp_item_content>.sp_dp_item_process_wrapper>li.active {
    color: var(--main-color);
}

.sp_dp_item_content>.sp_dp_item_process_wrapper>li::before {
    content: "";
    width: 8px;
    height: 2px;
    border-radius: 2px;
    background-color: var(--color-body);
    margin-right: 5px;
    display: inline-block;
    vertical-align: middle;
}

.sp_dp_item_content>.sp_dp_item_process_wrapper>li.active::before {
    background-color: var(--main-color);
}

@media (max-width: 768px) {
    .sp_download_page_wrapper {
        grid-template-columns: 100%;
    }
}

/********************************************************************************************* 
22. Download Page end
*********************************************************************************************/

/********************************************************************************************* 
23. Image AI Start
*********************************************************************************************/
.sp_input_wrapper.sp_imageai_cat_input .sp_input {
    height: 50px;
    border-radius: 4px;
    padding: 0px 15px;
    font-size: 14px;
}

.sp_input_wrapper.sp_imageai_cat_input .sp_input:focus {
    border-color: var(--main-color);
}

/* Stability AI start */
.sp_es_body.sp_stabilityai_wrapper {
    padding: 0;
}

.sp_es_body.sp_stabilityai_wrapper .edb_tab>ul>li>a {
    color: #dadada;
}

.sp_es_body.sp_stabilityai_wrapper .edb_tab>ul>li.active>a {
    color: #ffffff;
}

.sp_stabilityai_wrapper>.tab-content {
    padding: 30px;
    padding-bottom: 0;
}

.image-ai-slide-title {
    background: url('../images/image_ai/stability_ai/imagetitlebg.png') no-repeat center center;
    background-size: cover;
    padding: 9% 0 5% 0;
}

.image-ai-slide-title-text {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    text-align: center;
}

.has-search {
    width: 80%;
    margin: auto;
    margin-top: 6%;
    position: relative;
}

.image-ai-slide-title-search-icon {
    position: absolute;
    z-index: 2;
    width: 2.6rem;
    height: 3.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;

}

.image-ai-slide-title-search-icon svg {
    width: 12px;
    height: auto;
}

.image-ai-slide-title-search-icon svg path {
    fill: #aaa;
}

.has-search .form-control {
    border-radius: 9px;
    background-color: rgb(0 0 0 / 73%);
    border: 0;
    font-family: 'Nunito', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #b6b3b8;
    padding: 0.4rem 0.75rem 0.4rem 2.875rem;
}

.has-search .form-control-feedback {
    position: absolute;
    z-index: 2;
    display: block;
    width: 2.6rem;
    height: 0;
    line-height: 2rem;
    text-align: center;
    pointer-events: none;
    color: #aaa;
}

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

.image-ai-style-div {
    margin-top: 25px;
}

.image-ai-style-title-div {
    width: 50%;
}

.image-ai-style-view-div {
    width: 50%;
    text-align: right;
}

.image-ai-style-title {
    font-size: 14px;
    font-weight: 300;
    color: #dadada;
}

.image-ai-style-view-title {
    font-size: 13px;
    font-weight: 300;
}

.image-ai-style-view-title.collapsed span {
    color: #7f87bd;
    cursor: pointer;
    transition: 0.5s;
}

.image-ai-style-view-title.collapsed span:hover {
    color: #ffffff;
}

.image-ai-style-view-title span {
    color: #ffffff;
    cursor: pointer;
    transition: 0.5s;
}

.image-ai-style-images-div {
    width: 103%;
    position: relative;
    left: -1.5%;
}

.image-ai-style-images-box {
    width: 33.33%;
    text-align: center;
    margin: 9px 0px 7px 0px;
    border: 0;
    background-color: transparent;
    padding: 0;
    cursor: pointer;
}

.image-ai-style-images-box .style-images {
    width: 90%;
    border-width: 2px;
    border-color: rgb(81, 90, 135);
    border-style: solid;
    border-radius: 12px;
    background-color: rgb(63, 70, 101);
    transition: 0.5s;
}

.image-ai-style-images-box .style-images-title {
    font-family: 'Nunito', sans-serif;
    font-size: 13px;
    font-weight: 300;
    color: #dadada;
    margin-top: 4px;
    cursor: pointer;
}

.image-ai-style-images-box.active .style-images,
.image-ai-style-images-box:hover .style-images,
.image-ai-style-images-box:focus .style-images,
.image-ai-style-images-box:focus-visible .style-images {
    border-color: var(--main-color);
}

.image-ai-style-images-box:hover .style-images-title,
.image-ai-style-images-box:focus .style-images-title,
.image-ai-style-images-box:focus-visible .style-images-title {
    color: #ededed;
}

.image-ai-aspect-ratio-div {
    width: 100%;
    margin-top: 20px;
}

.image-ai-aspect-ratio-title {
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: 300;
    color: #dadada;
}

.image-ai-aspect-ratio-images-box {
    width: 31%;
    text-align: center;
    background-color: transparent;
    border: 0;
    cursor: pointer;
}

.aspect-ratio-images {}

.image-ai-aspect-ratio-images-box {
    text-align: center;
    background-color: transparent;
    border: 0;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    height: -webkit-fill-available;
}

.aspect-images-box1 {
    padding: 0;
    width: 74px;
}

.aspect-images-box2 {
    padding: 0;
    width: 120px;
}

.aspect-images-box3 {
    padding: 0;
    width: 74px;
}

.aspect-ratio-images {}

.aspect-ratio-title {
    font-family: 'Nunito', sans-serif;
    font-size: 13px;
    font-weight: 300;
    color: #ffffff;
    margin-top: 5px;
    text-align: center;
}

.image-ai-aspect-ratio-images-box>span {
    border-width: 2px;
    border-color: rgb(81, 90, 135);
    border-style: solid;
    border-radius: 7px;
    background-color: rgb(63, 70, 101);
    position: relative;
    display: inline-block;
}

.aspect-ratio1 {
    width: 74px;
    height: 74px;
    padding: 26px 0;
    text-align: center;
}

.aspect-ratio2 {
    width: 110px;
    height: 64px;
    padding: 21px 0;
}

.aspect-ratio3 {
    width: 74px;
    height: 110px;
    padding: 43px 0;
    text-align: center;
}

.aspect-ratio1 svg,
.aspect-ratio2 svg,
.aspect-ratio3 svg {
    fill: #656a83;
    width: 30px;
    height: 19px;
}

.image-ai-aspect-ratio-images-box.active span,
.image-ai-aspect-ratio-images-box:hover span,
.image-ai-aspect-ratio-images-box:focus span,
.image-ai-aspect-ratio-images-box:focus-visible span {
    border-color: var(--main-color);
}

.image-ai-generate-bottom {
    text-align: center;
    padding: 25px 0;
    width: 100%;
    position: -webkit-sticky;
    position: sticky;
    z-index: 2;
    bottom: 0;
    background-color: #2c314d;
    left: 0;
}

.image-ai-slide-inn2-inn {
    width: 100%;
    padding: 7% 35px 0 35px;
}

.image-ai-image-preview-div {
    width: 100%;
    margin-top: 0;
    margin-bottom: 6px;
}

.image-ai-image-preview-title {
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: 300;
    color: #dadada;
}

.ai-image-preview-images-box {
    width: 48.5%;
    margin: 5px 0px;
    background-color: #ffffff0f;
    border: 0;
    border-radius: 12px;
    cursor: pointer;
    padding: 0;
}

.preview-images {
    width: 100%;
    border: 2px solid #2c314d;
    border-radius: 12px;
    transition: 0.5s;
    aspect-ratio: 1/1;
    object-fit: contain;
    padding: 8px;
}

.ai-image-preview-images-box:hover .preview-images,
.ai-image-preview-images-box:focus .preview-images,
.ai-image-preview-images-box:focus-visible .preview-images {
    border-color: var(--main-color);
}


.image-ai-regenerate-bottom {
    width: 100%;
    padding: 25px 0;
    position: -webkit-sticky;
    position: sticky;
    z-index: 2;
    bottom: 0;
    background-color: #2c314d;
    left: 0;
}

.image-ai-generate_btn {
    font-size: 14px;
    font-weight: 300;
    color: #fff;
    padding: 11px 15px;
    border-radius: 4px;
    background-color: var(--main-color);
    border: 0;
    margin: 0;
    cursor: pointer;
    width: 100%;
    transition: 0.5s;
    display: inline-block;
}

.image-ai-generate_btn:hover,
.image-ai-generate_btn:focus {
    box-shadow: 0px 0px 5px 1px #2020204d;
    transform: scale(1.03);
}

.image-ai-regenerate_btn {
    font-size: 13px;
    font-weight: 300;
    color: #fff;
    padding: 11px 15px;
    border-radius: 4px;
    background-color: var(--main-color);
    border: 0;
    margin: 0;
    cursor: pointer;
    width: 100%;
    transition: 0.5s;
}

.image-ai-regenerate_btn:hover,
.image-ai-regenerate_btn:focus {
    box-shadow: 0px 0px 5px 1px #2020204d;
    transform: scale(1.03);
}

.regenerate-icon-svg {
    position: relative;
    top: 2px;
    margin-right: 2px;
}

.regenerate-icon-svg svg {
    fill: #ffffff;
}


a.image-ai-edit-description_btn {
    font-size: 13px;
    font-weight: 300;
    color: #dadada;
    padding: 11px 15px;
    border-style: solid;
    border-width: 1px;
    border-color: #adb7d3;
    border-radius: 4px;
    background-color: #3f4665;
    margin: 0;
    cursor: pointer;
    width: 49%;
    transition: 0.5s;
    margin-top: 10px;
    display: inline-block;
    text-align: center;
}

a.image-ai-edit-description_btn:hover,
a.image-ai-edit-description_btn:focus {
    background-color: #2e344c;
    box-shadow: 0px 0px 5px 1px #2020204d;
    transform: scale(1.03);
}

.image-ai-divition {}

.image-ai-divition hr {
    border-top: 1px solid #3f4665;
    width: 100%;
    margin-top: 25px;
    margin-bottom: 20px;
}

.sp_stabilityai_preview {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: rgb(44, 49, 77);
    z-index: 4;
    padding: 0;
}

.sp_more_example_ai>span {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.sp_more_example_ai>span>svg {
    width: 12px;
    height: auto;
}

.sp_more_example_ai>span>svg path {
    stroke: #dadada;
}

/* Stability AI end */

/* AI Image Generator Popup start */
.sp_popup_wrapper.sp_ai_image_generator_popup {
    background-color: rgb(39 43 69 / 50%);
    backdrop-filter: blur(10px);
}

.sp_popup_wrapper.sp_ai_image_generator_popup>.sp_popup_inner {
    background-color: #272B45;
    border: 1px solid #484747;
    max-width: 1000px;
    padding: 0;
    overflow: hidden;
}

.sp_popup_wrapper.sp_ai_image_generator_popup>.sp_popup_inner .sp_popup_body {
    margin-bottom: 0;
}

.sp_popup_wrapper.sp_ai_image_generator_popup>.sp_popup_inner .sp_popup_close {
    background-color: transparent;
}

.sp_aiigp_wrapper {
    display: grid;
    align-items: flex-start;
    grid-template-columns: 340px 1fr;
}

.sp_aiigp_sidebar {
    background-color: #2c314d;
    position: relative;
    top: auto;
    bottom: auto;
    width: auto;
}

.sp_aiigp_sidebar .form-control {
    width: 100%;
    height: 34px;
    display: block;
    padding-left: 26px;
}

.sp_aiigp_sidebar .image-ai-slide-title-search-icon {
    width: 26px;
    height: 34px;
}

.sp_aiigp_wrapper .sp_stabilityai_wrapper>.tab-content {
    max-height: 610px;
    overflow: auto;
    padding-bottom: 120px;
}

.sp_aiigp_wrapper .sp_stabilityai_wrapper .image-ai-generate-bottom {
    position: absolute;
    padding: 15px 30px;
    padding-bottom: 5px;
}

.sp_aiigp_body {
    padding: 30px;
}

.sp_aiigp_body>h3 {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    margin-bottom: 20px;
    margin-top: -10px;
}

.sp_aiigp_empty_preview {
    background-color: #2C314D;
    border: 1px solid #555E8D;
    border-radius: 10px;
    aspect-ratio: 1/1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}




.sp_aiigp_btns {
    text-align: right;
    gap: 10px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.sp_aiigp_btns>.sp_btn {
    border-radius: 6px;
    font-size: 14px;
    height: 42px;
    line-height: 40px;
    padding: 0 10px;
    flex: auto;
}

.sp_aiigp_preview_box .ai-image-preview-images-box {
    position: relative;
    cursor: inherit;
}

.sp_aiigp_preview_box .ai-image-preview-images-box .sp_aiigp_btns {
    position: absolute;
    bottom: 10px;
    left: 10px;
    right: 10px;
    padding: 12px;
    background-color: rgb(255 255 255 / 6%);
    backdrop-filter: blur(10px);
    opacity: 0;
    visibility: hidden;
    transition: 0.2s ease-in-out;
    transform: translateY(20px);
}

.sp_aiigp_preview_box .ai-image-preview-images-box:hover .sp_aiigp_btns {
    opacity: 1;
    visibility: visible;
    transform: translateY(0%);
}

/* AI Image Generator Popup end */

/********************************************************************************************* 
23. Image AI end
*********************************************************************************************/

/********************************************************************************************* 
24. Whitelabel start
*********************************************************************************************/
.sp_wl_white_box {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 40px;
    margin-bottom: 40px;
}

.sp_wl_white_box>.sp_wl_white_box_header {
    border-bottom: 1px solid #E9E9F4;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.sp_wl_white_box>.sp_wl_white_box_header>h3 {
    font-size: 16px;
    margin: 0;
    font-weight: 600;
    margin-bottom: 4px;
}

.sp_wl_white_box>.sp_wl_white_box_header>p {
    font-size: 13px;
    margin: 0;
}

.sp_wl_setting_wrapper {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    flex-wrap: wrap;
    margin-bottom: 30px;
}

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

.sp_wl_setting_wrapper>.sp_wl_setting_label {
    flex: none;
    width: 100%;
    max-width: 25%;
}

.sp_wl_setting_wrapper>.sp_wl_setting_label>h3 {
    font-size: 14px;
    margin: 0;
    font-weight: 600;
    margin-bottom: 4px;
}

.sp_wl_setting_wrapper>.sp_wl_setting_label>p {
    font-size: 13px;
    margin: 0;
}

.sp_wl_setting_wrapper>.sp_wl_setting_input {
    flex: 1;
    width: 100%;
}

.sp_wl_image_uploader {
    max-width: 660px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.sp_wl_image_uploader>.sp_upload_image_box {
    flex: 1;
}

.sp_wl_image_uploader>.sp_wl_image_preview {
    border: 1px solid #E9E9F4;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    width: 34%;
    height: 120px;
    flex: none;
}

.sp_wl_image_uploader>.sp_wl_image_preview>img {
    width: 100%;
    max-width: 144px;
    max-height: 55px;
    object-fit: contain;
}

.sp_wl_image_uploader.favicon>.sp_wl_image_preview>img {
    max-width: 30px;
    max-height: 30px;
}

.ed_colorPicker_wrapper.light {
    border-color: #e9e9f4;
    background-color: #fcfcff;
}

.ed_colorPicker_wrapper.light>input {
    color: var(--color-heading);
    font-weight: 600;
}

.sp_wl .sp_dropdown_wrapper>.sp_dropdown_inner>ul>li>a.upload_to_youtube,
.sp_wl .sp_dropdown_wrapper>.sp_dropdown_inner>ul>li>a.copy_image_url,
.sp_wl .sp_dropdown_wrapper>.sp_dropdown_inner>ul>li>a.sp_save_to {
    display: none !important;
}

/********************************************************************************************* 
24. Whitelabel end
*********************************************************************************************/

/********************************************************************************************* 
25. File Manager start
*********************************************************************************************/
.cd_fm_wrapper {
    margin: 50px auto;
}

.cd_fm_wrapper .sp_page_title {
    margin-bottom: 15px;
}

.cd_fm_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    background-color: #ffffff;
    margin-bottom: 2px;
    border-radius: 4px;
    box-shadow: 0px 10px 34px rgba(0, 0, 0, 0.03);
}

.cd_fm_pagination>ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cd_fm_pagination>ul>li {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 18px;
    vertical-align: middle;
    color: var(--main-color);
}

.cd_fm_pagination>ul>li:after {
    content: "/";
    margin: 0 4px;
    color: var(--color-body);
}

.cd_fm_pagination>ul>li:last-child {
    cursor: default;
    color: var(--color-body);
}

.cd_fm_pagination>ul>li:last-child::after {
    display: none;
}

.cd_fm_pagination>ul>li:first-child {
    color: var(--main-color);
}

.cd_fm_pagination>ul>li svg {
    width: 12px;
    height: 12px;
}

.cd_fm_pagination>ul>li svg path {
    fill: var(--main-color);
}

.cd_fm_content_wrapper {
    background-color: #ffffff;
    padding: 15px;
    border-radius: 4px;
}

.cd_fm_content_head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cd_fm_content_head .sp_btn {
    margin-left: 10px;
}

.cd_fm_wrapper .sp_btn {
    font-size: 14px;
    padding: 10px 12px;
    height: auto;
    line-height: inherit;
    border-radius: 6px;
}

.sp_btn.sp_btn_icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    vertical-align: middle;
}

.sp_btn.sp_btn_icon svg {
    width: 14px;
    height: 14px;
}

.sp_btn.sp_btn_icon svg path {
    fill: #ffffff;
}

.cd_fm_wrapper .sp_back_arrow {
    width: 25px;
    height: 25px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.cd_fm_wrapper .sp_back_arrow>svg {
    width: 20px;
    height: 20px;
}

.cd_fm_wrapper .sp_back_arrow>svg path {
    fill: var(--main-color);
}

.cd_fm_content_body {
    margin-top: 15px;
}

.cd_fmfl_item {
    display: grid;
    grid-template-columns: 30px 1fr 180px 180px 160px 120px;
    align-items: center;
    gap: 10px;
    background-color: #fdfeff;
    border: 1px solid #e9e9e9;
    border-radius: 4px;
    padding: 8px;
    margin-bottom: 2px;
    position: relative;
}

.cd_fmfl_item .get_folder_list_click {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 4px;
    cursor: pointer;
}

.cd_fmfl_item * {
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.cd_fmfl_item:hover {
    background-color: rgba(var(--main-color-rgb), 0.04);
    border-color: rgba(var(--main-color-rgb), 0.30);
}

.cd_fmfl_item>.cd_fmfl_list_head {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-heading);
}

.cd_fmfl_item.header {
    padding: 14px 8px;
    background-color: rgba(var(--main-color-rgb), 0.04);
    border: 1px solid rgba(var(--main-color-rgb), 0.30);
}

.cd_fmfl_item>.cd_fmfl_icon {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cd_fmfl_item.folder>.cd_fmfl_icon svg {
    width: 24px;
    height: 24px;
}

.cd_fmfl_item.file>.cd_fmfl_icon svg {
    width: 15px;
    height: auto;
}

.cd_fmfl_item.file>.cd_fmfl_icon svg path {
    fill: var(--color-body);
}

.cd_fmfl_item>.cd_fmfl_name {
    font-size: 15px;
    font-weight: 600;
}

.cd_fmfl_item>.cd_fmfl_created_date,
.cd_fmfl_item>.cd_fmfl_updated_by,
.cd_fmfl_item>.cd_fmfl_created_by {
    font-size: 13px;
}

.cd_fmfl_icon_btn {
    display: inline-flex;
    align-items: center;
    width: 30px;
    height: 30px;
    justify-content: center;
    position: relative;
    cursor: pointer;
}

.cd_fmfl_icon_btn svg {
    width: 14px;
    height: 14px;
}

.cd_fmfl_icon_btn svg path {
    fill: var(--main-color);
}

.cd_fmfl_loading_data {
    padding: 15px;
}

.cd_btn_upload {
    position: relative;
    display: inline-flex;
    vertical-align: middle;
}

.cd_btn_upload>input {
    position: absolute;
    left: -9999px;
    opacity: 0;
}

.cd_btn_upload>label {
    cursor: pointer;
    display: flex;
}

.cd_btn_upload>label .sp_btn {
    cursor: inherit;
    pointer-events: none;
}

.cd_fmfl_actions {
    position: relative;
    z-index: 1;
}

/********************************************************************************************* 
25. File Manager end
*********************************************************************************************/

/********************************************************************************************* 
26. Survey start
*********************************************************************************************/
.sp_survey_wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 0;
    padding-top: 0;
}

.sp_survey_title {
    margin: 0;
    text-align: center;
    font-size: 30px;
    font-weight: 600;
}

.sp_survey_subtitle {
    margin: 0;
    text-align: center;
    font-size: 16px;
}

.sp_survey_body {
    margin-top: 40px;
    background-color: #ffffff;
    padding: 40px;
    border-radius: 12px;
    border: 1px solid #efecec;
}

.sp_survey_action_btns {
    text-align: center;
}

.sp_survey_action_btns .sp_btn {
    min-width: 140px;
    gap: 10px;
    border-radius: 8px;
    margin-right: 10px;
}

.sp_survey_action_btns .sp_btn:last-child {
    margin-right: 0px;
}

.sp_survey_action_btns .sp_btn.sp_btn_border {
    color: var(--main-color);
    border-color: var(--main-color);
}

.sp_survey_action_btns .sp_btn.sp_btn_border:hover {
    border-color: var(--main-color);
    background-color: rgba(var(--main-color-rgb), 0.06);
}

.sp_survey_question {
    font-size: 18px;
    color: var(--color-heading);
    margin-bottom: 30px;
    font-weight: 600;
}

.sp_survey_question>p {
    margin: 0;
    font-size: 13px;
    color: var(--color-body);
    font-weight: 400;
}

.sp_survey_option_list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.sp_survey_option_item {
    padding: 16px;
    border: 1px solid #E1E4E7;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-weight: 600;
}

.sp_survey_option_item>span {
    width: 18px;
    height: 18px;
    border: 1px solid #bec3c9;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.sp_survey_option_item:hover {
    color: var(--main-color);
    border-color: var(--main-color);
}

.sp_survey_option_item:hover>span {
    border-color: var(--main-color);
}

.sp_survey_option_item.active {
    color: var(--main-color);
    border-color: var(--main-color);
    background-color: rgba(var(--main-color-rgb), 0.06);
}

.sp_survey_option_item.active>span {
    border-color: var(--main-color);
}

.sp_survey_option_item.active>span::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 20px;
    background-color: var(--main-color);
}

.sp_survey_step_box {
    display: none;
}

.sp_survey_step_box.active {
    display: block;
}

.sp_survey_other_input>input {
    border: 1px solid #e9e9f4;
    border-radius: 10px;
    width: 100%;
    height: 54px;
    padding: 0 20px;
    background-color: #ffffff;
    outline: none;
    color: var(--color-heading);
    font-size: 14px;
    font-family: inherit;
    margin-bottom: 30px;
}

.sp_survey_other_input>input:focus {
    border-color: var(--main-color);
}

/* .sp_survey_option_list.checkbox{
    grid-template-columns: 100%;
    gap: 0;
} */
/* .sp_survey_option_list.checkbox .sp_survey_option_item{
    border: none;
    padding: 10px;
    border-radius: 0px;
    background-color: transparent;
} */
.sp_survey_option_list.checkbox .sp_survey_option_item>span {
    border-radius: 2px;
}

.sp_survey_option_list.checkbox .sp_survey_option_item.active>span::before {
    content: "";
    width: 10px;
    height: 6px;
    border-left: 2px solid var(--main-color);
    border-bottom: 2px solid var(--main-color);
    position: absolute;
    top: 4px;
    left: 3px;
    transform: rotate(-45deg);
    background-color: transparent;
    border-radius: 0;
}

/********************************************************************************************* 
26. Survey end
*********************************************************************************************/

/********************************************************************************************* 
27. New Signup start
*********************************************************************************************/
.cdn_signup_wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: auto;
}

.cdn_signup_inner {
    position: relative;
    z-index: 1;
    display: grid;
    /* grid-template-columns: 630px 550px 630px; */
    /* grid-template-columns: 630px 480px 630px; */
    grid-template-columns: 1fr 480px 1fr;
    align-items: center;
    justify-content: center;
    gap: 30px;
    padding: 15px;
    height: 100%;
}

.cdn_bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    background-size: cover;
    background-position: center;
    background-image: none !important;
}

.cdn_signup_logo {
    text-align: center;
    margin-bottom: 26px;
}

.cdn_signup_logo>img {
    width: 207px;
}

.cdn_signup_content_box {
    border-radius: 30px;
    background-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0px 13px 57px 0px rgba(195, 211, 255, 0.38);
    padding: 40px 30px;
    border: 2px solid var(--main-color);
}

.cdn_signup_content_box>h1 {
    font-size: 32px;
    font-weight: 800;
    text-align: center;
    margin: 0;
    margin-bottom: 30px;
}

.cdn_signup_content_box>h1>span {
    font-size: 15px;
    font-weight: 400;
    display: block;
    color: #262626;
}

.cdn_signup_content_box>p {
    font-size: 16px;
    text-align: center;
    margin: 0;
    margin-bottom: 10px;
}

.cdn_signup_content_box .sp_input_wrapper .sp_input {
    border-radius: 21px;
    height: 62px;
    font-size: 15px;
    font-weight: 600;
}

.cdn_signup_content_box .sp_btn {
    height: 62px;
    line-height: 62px;
    border-radius: 21px;
    box-shadow: 0px 13px 21px 0px rgba(var(--main-color-rgb), 0.33);
}

.cdn_signup_content_box.cdn_signup_content_box_loading {
    aspect-ratio: 1/0.9;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;
}

.cdn_signup_content_box.cdn_signup_content_box_loading::before {
    content: '';
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    background-image: url('https://cdn1.clickdesigns.com/images/loader.gif');
    background-size: contain;
}

.cdn_signup_content_box.cdn_signup_content_box_loading>h1 {
    font-weight: 700;
    font-size: 24px;
    margin: 0;
    color: var(--main-color);
}
.cdn_signup_content_box.cdn_signup_content_center{
    aspect-ratio: 1/0.9;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;
}
.cdn_signup_content_box.cdn_signup_content_center>h1 {
    font-weight: 700;
    font-size: 24px;
    margin: 0;
    color: var(--main-color);
}
/* .cdn_signup_testimonial_wrapper{
    padding-top: 200px;
} */
.cdn_st_list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.cdn_signup_testimonial_wrapper:nth-child(1) .cdn_st_list>.cdn_st_item {
    text-align: right;
}

.cdn_signup_testimonial_wrapper:nth-child(3) .cdn_st_list>.cdn_st_item {
    text-align: left;
}

.cdn_st_list>.cdn_st_item>img {
    border-radius: 10px;
    max-width: 100%;
}

.cdn_signup_footer_text {
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-heading);
    margin-top: 30px;
}

.cdn_signup_footer_text>a {
    font-weight: 700;
    color: var(--color-heading);
    text-decoration: underline;
}

.cdn_signup_content_box .StripeElement {
    padding: 16px 30px;
    background-color: #ffffff;
    border: 1px solid #e9e9f4;
    border-radius: 21px;
    height: 62px;
    margin-bottom: 20px;
}

.cdn_signup_content_box .sp_stripe_secure {
    text-align: center;
    margin-top: 30px;
}

.cdn_signup_content_box .sp_stripe_secure>img {
    max-width: 100%;
}

/********************************************************************************************* 
27. New Signup end
*********************************************************************************************/

/********************************************************************************************* 
28. Whitelabel start
*********************************************************************************************/
.sp_wl_domain_verify_btn {
    position: absolute;
    right: 18px;
    bottom: 18px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    background-color: #FDF5AE;
    padding: 10px;
    border-radius: 6px;
    color: #a59400;
    height: 38px;
    cursor: pointer;
}

.sp_wl_domain_verify_btn.verified {
    background-color: #DAFFD9;
    color: #1CBF19;
    cursor: default;
}

.sp_siw_connected_account {
    border: 1px solid #E9E9F4;
    border-radius: 8px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    padding: 20px;
    margin-bottom: 15px;
}

.sp_stripe_integration_wrapper>h3 {
    margin: 0;
    font-size: 16px;
    margin-bottom: 12px;
    font-weight: 600;
}

.sp_siw_connected_account h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--main-color);
}

.sp_siw_connected_account p {
    font-weight: 700;
    margin: 0;
}

.sp_siw_connected_account p>span {
    font-weight: 400;
}

.sp_popup_wrapper .table-list {
    margin: 0;
    padding: 0;
    flex: 1;
}

.sp_popup_wrapper .table-list li {
    padding: 0;
    font-weight: 500;
    line-height: 105%;
    color: #000;
    font-style: inherit;
    background: url(../images/account/tablecheck.png) no-repeat left 6px;
    padding-left: 25px;
    padding-right: 0%;
    list-style: none;
    margin-left: 0px;
    padding-top: 0;
    padding-bottom: 2px;
    margin-bottom: 0;
    color: #000000;
    text-align: left;
    display: block;
    line-height: 150%;
    margin-top: 4px;
    font-size: 14px;
}

.sp_popup_wrapper .table-list li.uncheck {
    background: url(../images/account/tableuncheck.png) no-repeat left 6px;
}

.sp_wl_package_list {
    display: grid;
    gap: 20px;
    margin-bottom: 30px;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.sp_wl_package_list>.sp_wl_package_item {
    border: 1px solid #e1e4e7;
    padding: 20px;
    border-radius: 10px;
    position: relative;
}

.sp_wl_package_details>h3 {
    font-size: 16px;
    margin: 0;
    margin-bottom: 20px;
    color: var(--main-color);
    border-bottom: 1px solid #e1e4e7;
    padding-bottom: 15px;
}

.sp_wl_package_price_box>.sp_wl_package_price {
    margin-bottom: 20px;
    font-size: 14px;
}

.sp_wl_package_price_box>.sp_wl_package_price>b {
    color: var(--color-heading);
    width: 140px;
    display: inline-block;
}

.sp_wl_package_price_box>.sp_wl_package_price>span {
    color: var(--color-heading);
    width: 140px;
    display: inline-block;
}

.sp_wl_package_price_box>.sp_wl_package_price>input {
    border: 1px solid #e9e9f4;
    border-radius: 6px;
    height: 44px;
    padding: 0px 20px;
    background-color: #ffffff;
    outline: none;
    color: var(--color-heading);
    font-size: 16px;
    font-family: inherit;
    width: 100px;
}

.sp_wl_package_price_box>.sp_wl_package_price>input:focus {
    border-color: var(--main-color);
}

.sp_wl_package_description {
    text-decoration: underline;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    padding: 5px 0;
    display: inline-block;
    position: absolute;
    top: 17px;
    right: 20px;
}

.sp_wl_package_description:hover {
    color: var(--main-color);
}

.sp_wl_package_signup_url_wrapper {
    margin-top: 15px;
}

.sp_wl_package_signup_url_wrapper>label {
    color: var(--color-heading);
    display: block;
    font-weight: 600;
    margin-bottom: 4px;
    font-size: 13px;
}

.sp_wl_package_signup_url_wrapper>.sp_wl_package_signup_url_inner {
    border-radius: 4px;
    border: 1px solid #90BC84;
    background-color: #F1FFED;
    padding: 10px;
    display: grid;
    grid-template-columns: auto 20px;
    align-items: flex-start;
    gap: 10px;
}

.sp_wl_package_signup_url_wrapper>.sp_wl_package_signup_url_inner>a {
    color: #348d1b;
    font-weight: 600;
    font-size: 13px;
    word-break: break-word;
}

.sp_wl_package_signup_url_wrapper>.sp_wl_package_signup_url_inner>.sp_wl_psui_icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.sp_wl_package_signup_url_wrapper>.sp_wl_package_signup_url_inner>.sp_wl_psui_icon svg {
    width: 18px;
    height: auto;
}

.sp_wl_package_signup_url_inner .tooltip-inner {
    min-width: 90px;
    text-align: center;
}

.sp_license_price {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    background-color: rgba(var(--main-color-rgb), 0.06);
    border: 1px solid rgba(var(--main-color-rgb), 0.4);
    border-radius: 6px;
}

.sp_license_price>p,
.sp_license_price>h3 {
    margin: 0;
}

.sp_stripe_element .StripeElement {
    border: 1px solid var(--line-color);
    border-radius: 6px;
    padding: 12px;
}

.sp_lic_input_wrapper .sp_input_wrapper:nth-child(1),
.sp_lic_input_wrapper .sp_input_wrapper:nth-child(2) {
    flex: none;
}

.sp_lic_input_wrapper .sp_input_wrapper:nth-child(1) h3 {
    height: 74px;
    margin: 0;
    line-height: 50px;
    font-size: 25px;
    color: var(--main-color);
}

.sp_lic_input_wrapper .sp_input_wrapper:nth-child(2) {
    font-size: 20px;
    font-weight: 600;
    color: var(--color-heading);
}

/* login start */
.sp_wl_auth_page.sp_auth_wrapper {
    background: #ffffff;
}

.sp_wl_auth_page .left-side {
    width: 100%;
}

.sp_wl_auth_page.sp_auth_wrapper .sp_auth_inner {
    max-width: 510px;
}

/* login end */

.sp_wl_customer_license {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background-color: #fff2d2;
    border: 1px solid #FFC107;
    border-radius: 6px;
    font-weight: 700;
    color: #64463d;
    position: relative;
    padding-bottom: 24px;
}

.sp_wl_customer_license svg {
    width: 16px;
}

.sp_wl_customer_license svg path {
    fill: #64463d;
}

.sp_wl_customer_license .sp_wl_customer_license_info {
    position: absolute;
    bottom: 6px;
    left: 35px;
    font-size: 12px;
    font-weight: 600;
}

.sp_wl_active_license {
    position: absolute;
    top: 10px;
    right: 10px;
}

.sp_wl_active_license>svg path {
    fill: #4CAF50;
}

.sp_wl_canceled_license {
    color: #F44336;
    text-decoration: underline;
}

.sp_wl_package_list>.sp_wl_package_item.cancel {
    border-color: #f1b0b6;
    background-color: #fffdfd;
}

.sp_ghl_conn_search_result>h3 {
    margin: 0;
    margin-bottom: 20px;
    font-weight: 400;
    font-size: 14px;
}

.sp_ghl_conn_search_result>h3>span {
    font-weight: 700;
}

.sp_ghl_csr_item {
    border: 1px solid var(--line-color);
    padding: 20px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 20px;
    cursor: pointer;
    margin-bottom: 20px;
}

.sp_ghl_csr_check {
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    border: 1px solid var(--line-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

.sp_ghl_csr_details>h3 {
    font-size: 15px;
    margin: 0;
    font-weight: 700;
}

.sp_ghl_csr_details>p {
    margin: 0;
}

.sp_ghl_csr_item.active {
    border-color: #4CAF50;
}

.sp_ghl_csr_item.active .sp_ghl_csr_check {
    border-color: #4CAF50;
    background-color: #ebffec;
}

.sp_ghl_csr_item.active .sp_ghl_csr_check>span {
    width: 22px;
    height: 12px;
    border-left: 4px solid #4CAF50;
    border-bottom: 4px solid #4CAF50;
    transform: rotate(-45deg) translate(1px, -1px) scale(0.8);
    border-radius: 2px;
}

.sp_ghl_conn_search_result .sp_btn.sp_btn_border {
    margin-right: 10px;
}

/********************************************************************************************* 
28. Whitelabel end
*********************************************************************************************/

/********************************************************************************************* 
29. Affiliate start
*********************************************************************************************/
.sp_affiliate_wrapper {
    display: grid;
    grid-template-columns: 300px auto;
    gap: 30px;
    align-items: flex-start;
}

.sp_affiliate_sidebar .sp_company_profile_left {
    background-color: #ffffff;
}

.sp_affiliate_sidebar .sp_company_profile_left .sp_btn.sp_btn_border {
    pointer-events: auto;
}

.sp_affiliate_body .cdm_stats_boxlist {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    margin-bottom: 30px;
}

.sp_affiliate_body .cdm_stats_boxlist>.cdm_stats_box_item {
    justify-content: flex-start;
    text-align: left;
}

.sp_affiliate_body .cdm_stats_boxlist>.cdm_stats_box_item>.cdm_sbi_details>p {
    color: var(--color-heading);
}

.sp_reward_summary_wrapper>h3 {
    font-size: 16px;
    color: var(--color-heading);
    font-weight: 600;
    margin: 0;
    margin-bottom: 15px;
}

.sp_reward_summary_wrapper>.sp_custom_table_wrapper {
    max-width: 400px;
    background-color: #ffffff;
}

/* Creatives start */
.sp_brandkit_list.sp_creative_list {
    display: block;
}

.sp_brandkit_list.sp_creative_list .sp_brandkit_item {
    height: auto;
    display: table;
    border: none;
}

.sp_brandkit_list.sp_creative_list .sp_brandkit_item>.sp_brandkit_icon {
    height: auto;
    aspect-ratio: inherit;
    background-color: transparent;
    display: inline-flex;
    vertical-align: middle;
    margin: 0;
}

.sp_brandkit_list.sp_creative_list .sp_brandkit_item:hover>.sp_brandkit_icon {
    background-color: transparent;
}

.sp_brandkit_list.sp_creative_list .sp_brandkit_item>.sp_brandkit_icon>svg {
    width: 18px;
    height: auto;
    transform: none;
}

.sp_brandkit_list.sp_creative_list .sp_brandkit_item>.sp_brandkit_icon>svg path {
    fill: var(--main-color);
}

.sp_brandkit_list.sp_creative_list .sp_brandkit_item>.sp_brandkit_name {
    font-size: 14px;
    text-align: center;
    display: inline-flex;
    vertical-align: middle;
}

/* Creatives end */
/********************************************************************************************* 
29. Affiliate end
*********************************************************************************************/




/********************************************************************************************* 
51. components start
*********************************************************************************************/
/* button start */
.sp_btn {
    display: inline-block;
    height: 50px;
    line-height: 50px;
    background-color: var(--main-color);
    /* box-shadow: 0px 0px 45px rgba(52, 106, 253, 0.22); */
    border: none;
    color: #ffffff;
    text-align: center;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    padding: 0 30px;
    outline: none;
    cursor: pointer;
}

.sp_btn:hover,
.sp_btn:focus {
    color: #ffffff;
}

.sp_btn.sp_btn_block {
    display: block;
    width: 100%;
}

.sp_btn[disabled] {
    pointer-events: none;
    opacity: 0.5;
}

.sp_btn.sp_btn_border {
    color: var(--color-body);
    font-weight: 600;
    background-color: transparent;
    border: 1px solid #c7c7f5;
    box-shadow: none;
}

.sp_btn.sp_btn_border:hover {
    border-color: #c7c7f5;
}

.sp_btn.sp_btn_danger {
    background-color: #ff5a5a;
    /* box-shadow: 0px 10px 40.5px 4.5px rgba(255, 90, 90, 0.22); */
}

.sp_btn.sp_btn_link {
    color: #5c669f;
    background-color: transparent;
    box-shadow: none;
    padding: 0 20px;
}

.sp_btn.sp_btn_link:hover {
    color: var(--main-color);
}

.sp_btn.sp_btn_link>svg {
    margin-left: 5px;
    margin-bottom: -2px;
}

.sp_btn.sp_btn_link:hover>svg path {
    fill: var(--main-color);
}

.sp_btn[disabled='disabled'] {
    opacity: 0.5;
    pointer-events: none;
}

.sp_btn.sp_btn_small {
    height: 38px;
    line-height: 38px;
    font-size: 14px;
    border-radius: 5px;
}
.btn_disabled{
    opacity: 0.6;
    pointer-events: none;
}
/* button end */

/* input start */
.sp_input_wrapper_list {
    display: flex;
    align-items: center;
    margin: 0 -10px;
}

.sp_input_wrapper_list>.sp_input_wrapper {
    margin: 0 10px;
    margin-bottom: 20px;
    flex: 1;
}

.sp_input_wrapper {
    margin-bottom: 20px;
    position: relative;
}

.sp_input_icon>.sp_icon {
    position: absolute;
    top: -1px;
    left: -1px;
    width: 70px;
    height: 74px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sp_input_icon>.sp_icon>img {
    backface-visibility: hidden;
}

.sp_input_wrapper>label {
    display: block;
    font-size: 14px;
    margin-bottom: 5px;
    color: var(--color-body);
    font-weight: 400;
}

.sp_input_wrapper .sp_input {
    border: 1px solid #e9e9f4;
    border-radius: 10px;
    width: 100%;
    height: 74px;
    padding: 0 30px;
    background-color: #ffffff;
    outline: none;
    color: var(--color-heading);
    font-size: 16px;
    font-family: inherit;
}

.sp_input_wrapper .sp_input[readonly="readonly"] {
    background-color: #f9f9f9;
    cursor: not-allowed;
}

.sp_input_wrapper .sp_input[type="file"] {
    padding: 1.5rem;
}

.sp_input_wrapper textarea.sp_input {
    height: auto;
    padding: 30px;
    resize: vertical;
}

.sp_input_wrapper>.sp_auth_input_placeholder {
    position: absolute;
    color: #a8aec0;
    display: block;
    top: 50%;
    left: 31px;
    pointer-events: none;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    transition: all 0.2s;
}

.sp_input_wrapper.sp_input_icon>.sp_auth_input_placeholder {
    left: 71px;
}

.sp_input_wrapper.sp_input_icon>.sp_input {
    padding-left: 70px;
}

.sp_input_wrapper>.sp_input::-webkit-input-placeholder {
    color: #a8aec0;
}

.sp_input_wrapper>.sp_input::-moz-input-placeholder {
    color: #a8aec0;
}

.sp_input_wrapper.hasvalue>.sp_auth_input_placeholder {
    top: 22px;
    font-size: 14px;
}

.sp_input_wrapper.hasvalue>.sp_auth_input_placeholder~.sp_input {
    padding-top: 20px;
}

.sp_input_wrapper>.sp_input:focus {
    box-shadow: 0px 8px 32px rgba(0, 0, 0, 0.06);
}

.sp_input_info_text {
    margin: 0;
    margin-top: -15px;
    font-size: 13px;
    color: #FD4034;
    font-weight: 600;
    margin-bottom: 20px;
}

/* editor input start */
.sp_editor_sidebar .sp_input_wrapper>label {
    color: #dadada;
    margin: 0;
    margin-bottom: 12px;
    display: block;
    font-weight: 400;
    font-size: 14px;
}

.sp_editor_sidebar .sp_input_wrapper .sp_input {
    height: 44px;
    border-radius: 4px;
    color: #bbc2ef;
    padding: 0 20px;
    font-size: 16px;
    background-color: #353b5b;
    border-color: #555e8d;
}

.sp_editor_sidebar .sp_input_wrapper>textarea.sp_input {
    height: auto;
    padding: 20px;
    resize: vertical;
}

/* editor input end */
/* input end */

/* color picker start */
.sp_colorpicker_wrapper .sp_input {
    display: block !important;
    padding-left: 38px !important;
    text-transform: uppercase;
    font-size: 14px !important;
}

.sp_colorpicker_wrapper .sp-replacer {
    position: absolute;
    left: 8px;
    bottom: 11px;
    background: transparent;
    border: none;
    padding: 0;
}

.sp_colorpicker_wrapper .sp-replacer>.sp-preview {
    margin: 0;
    width: 20px;
    height: 20px;
    border-radius: 20px;
    overflow: hidden;
    border-color: #555e8d;
}

.sp_colorpicker_wrapper .sp-replacer>.sp-dd {
    display: none;
}

.sp_colorpicker_wrapper .sp_colorpicker_wrapper {
    max-width: 130px;
    position: relative;
    display: inline-flex;
    vertical-align: middle;
    margin-right: 5px;
    margin-bottom: 7px;
}

.sp_colorpicker_wrapper .sp-replacer {
    right: 6px;
}

.sp-container {
    background-color: #ffffff;
    border: none;
    padding: 0;
    border-radius: 5px;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
    transform: translateX(-100%) !important;
}

.sp-clear,
.sp-color,
.sp-hue {
    border: none;
    border-radius: 8px;
}

.sp-sat,
.sp-val {
    border-radius: 8px;
}

.sp-dragger {
    border-radius: 15px;
    /* height: 10px;
    width: 10px; */
    border: 1px solid #7d7d7d;
    background: #fff;
}

.sp-color {
    right: 10%;
}

.sp-clear-enabled .sp-hue {
    width: 10px;
    top: 0px;
    height: 100%;
    left: 94%;
}

.sp-clear-enabled .sp-clear {
    display: none;
}

.sp-slider {
    height: 12px;
    width: 12px;
    border-radius: 10px;
    background: #ffffff;
    opacity: 1;
    border: none;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
    margin-top: 5px;
}

.sp-input-container {
    margin-bottom: 0;
}

.sp-input {
    border: 1px solid #e9e9f4;
    border-radius: 5px;
    font-family: inherit;
    color: #a8aec0;
    outline: none;
}

.sp-input:focus {
    border-color: var(--main-color);
}

.sp-button-container {
    display: none;
}

/* color picker end */

/* select custom start */
.sp_select_wrapper .sp_select {
    display: none;
}

.select2-container {
    display: block;
    z-index: 11;
}

.select2-container>.selection {
    display: block;
}

.select2-selection {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 44px;
    border: 1px solid #555e8d;
    background-color: #353b5b;
    border-radius: 4px;
    padding: 0 20px;
    cursor: pointer;
    color: #a8aec0;
    font-size: 16px;
    font-weight: 400;
    outline: none;
}

.select2-container--open .select2-selection {
    border-radius: 4px 4px 0 0;
}

.select2-selection__arrow {
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 6px solid #a8aec0;
}

.select2-container>.select2-dropdown {
    display: block;
    background-color: #FBFDFF;
    border: 1px solid #D7DDEC;
    box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.04);
    border-radius: 0 0 4px 4px;
}

.select2-results>.select2-results__options>.select2-results__option[aria-selected="true"] {
    background-color: rgba(var(--main-color-rgb), 0.1);
    color: var(--main-color);
}

.select2-search {
    display: block;
    padding: 10px 15px;
    border-bottom: 1px solid #d7ddec;
}

.select2-search>input {
    display: block;
    width: 100%;
    background-color: #FBFDFF;
    border: 1px solid #D7DDEC;
    padding: 8px 15px;
    outline: none;
    border-radius: 4px;
    color: var(--color-heading);
}

.select2-results {
    display: block;
}

.select2-results>.select2-results__options {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 297px;
    overflow: auto;
}

.select2-results>.select2-results__options>.select2-results__option {
    padding: 8px 15px;
    border-bottom: 1px solid rgba(241, 241, 249, 0.08);
    cursor: pointer;
    font-size: 14px;
    color: var(--color-body);
}

.select2-results>.select2-results__options>.select2-results__option.select2-results__option--highlighted {
    background-color: var(--main-color);
    color: #ffffff;
}

.select2-results>.select2-results__options>.select2-results__option>span {
    pointer-events: none;
}

.select2-results>.select2-results__options>.select2-results__option:last-child {
    border-bottom: none;
    border-radius: 0 0 8px 8px;
}

.select2-results>.select2-results__options>.select2-results__option:hover {
    background-color: var(--main-color);
    color: #ffffff;
}

/* select2 dark start */
.sp_editor_header .select2-container>.select2-dropdown {
    background-color: #353b5a;
    box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.04);
    border: 1px solid #555e8d;
}

.sp_editor_header .select2-search {
    border-bottom: 1px solid #535c8a;
}

.sp_editor_header .select2-search {
    border-bottom: 1px solid #535c8a;
}

.sp_editor_header .select2-search>input {
    border: 1px solid #555e8d;
    background-color: #2c314d;
    color: #ffffff;
}

.sp_editor_header .select2-results>.select2-results__options>.select2-results__option {
    color: #bbc2ef;
}

.sp_editor_header .select2-results>.select2-results__options>.select2-results__option.select2-results__option--highlighted {
    background-color: var(--main-color);
    color: #ffffff;
}

.sp_editor_header .select2-results>.select2-results__options>.select2-results__option:hover {
    background-color: var(--main-color);
    color: #ffffff;
}

/* select2 dark end */

/* select2 light start */
.sp_select_light .select2-selection {
    background-color: #FBFDFF;
    border: 1px solid #D7DDEC;
    font-size: 14px;
    color: #919CB7;
    border-radius: 6px;
}

.sp_select_light .select2-container>.select2-dropdown {
    background-color: #FBFDFF;
    border: 1px solid #D7DDEC;
}

/* select2 light end */

/* select2 multiple start */
.select2-selection.select2-selection--multiple {
    height: auto;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding: 10px;
    position: relative;
}

.sp_popup_wrapper .select2-selection.select2-selection--multiple {
    padding: 20px 14px;
}

.select2-selection.select2-selection--multiple:after {
    content: "";
    position: absolute;
    top: calc(50% - 2px);
    right: 6px;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-top: 4px solid #a8aec0;
}

.select2-selection.select2-selection--multiple>.select2-selection__rendered {
    flex: 1;
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    width: 100%;
    gap: 10px;
}

.select2-selection.select2-selection--multiple>.select2-selection__rendered>li.select2-search {
    padding: 0;
    flex: 1;
    border: none;
}

.select2-selection.select2-selection--multiple>.select2-selection__rendered>li.select2-search>input {
    width: 100% !important;
    border: none;
    background-color: transparent;
    padding: 0;
    font-size: 14px;
    min-height: 20px;
}

.select2-selection.select2-selection--multiple>.select2-selection__rendered>li.select2-search>input::-webkit-input-placeholder {
    color: #999999;
}

.select2-selection__choice {
    padding: 2px 6px;
    background-color: var(--main-color);
    border-radius: 4px;
    color: #ffffff;
    font-size: 12px;
    position: relative;
    padding-right: 22px;
}

.select2-selection__choice .select2-selection__choice__remove {
    width: 16px;
    display: flex;
    vertical-align: middle;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    align-items: center;
    justify-content: center;
    background-color: rgb(255 255 255 / 20%);
    border-radius: 0 4px 4px 0;
}

.sp_select2_element_dd_item {
    position: relative;
    padding-left: 30px;
}

.sp_select2_element_dd_item>.sp_select2_checkbox {
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
    border-radius: 3px;
    border: 1px solid #555E8D;
    display: flex;
    align-items: center;
    justify-content: center;
}

.select2-results__option[aria-selected="true"] .sp_select2_element_dd_item>.sp_select2_checkbox {
    background-color: var(--main-color);
    border-color: var(--main-color);
}

.select2-results__option[aria-selected="true"] .sp_select2_element_dd_item>.sp_select2_checkbox::before {
    content: "";
    position: absolute;
    top: 5px;
    left: 3px;
    width: 12px;
    height: 6px;
    border-left: 3px solid #ffffff;
    border-bottom: 3px solid #ffffff;
    transform: rotate(-45deg);
}

.sp_select2_element_dd_item>h3 {
    font-size: 14px;
    margin: 0;
    color: #ffffff;
}

.sp_select2_element_dd_item>p {
    font-size: 12px;
    margin: 0;
    color: #DADADA;
}

.sp_editor_header .select2-results>.select2-results__options#select2-sp_textai_element_list-results>.select2-results__option.select2-results__option--highlighted,
.sp_editor_header .select2-results>.select2-results__options#select2-sp_textai_element_list-results>.select2-results__option[aria-selected="true"],
.sp_editor_header .select2-results>.select2-results__options#select2-sp_textai_element_list-results>.select2-results__option:hover {
    background-color: #3F4567;
}

/* select2 multiple end */

/* select custom end */

/* checkbox start */
.sp_checkbox_list {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
    margin-bottom: 15px;
}

.sp_checkbox_grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(calc(100% - 10px), 1fr));
    gap: 10px;
}

.sp_checkbox_grid.col1 {
    grid-template-columns: repeat(auto-fill, minmax(calc(100% - 10px), 1fr));
}

.sp_checkbox_grid.col2 {
    grid-template-columns: repeat(auto-fill, minmax(calc(50% - 10px), 1fr));
}

.sp_checkbox_grid.col3 {
    grid-template-columns: repeat(auto-fill, minmax(calc(33.333% - 10px), 1fr));
}

.sp_checkbox>input {
    position: absolute;
    left: -99999px;
    opacity: 0;
}

.sp_checkbox>label {
    color: var(--color-body);
    font-weight: 500;
    cursor: pointer;
    position: relative;
}

.sp_checkbox>label::before {
    content: "";
    width: 18px;
    height: 18px;
    border: 1px solid #ddddea;
    border-radius: 3px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
    margin-top: -2px;
}

.sp_checkbox>label::after {
    content: "";
    position: absolute;
    top: 6px;
    left: 3px;
    width: 12px;
    height: 6px;
    border-left: 3px solid var(--main-color);
    border-bottom: 3px solid var(--main-color);
    -webkit-transform: rotate(-45deg) scale(0);
    -moz-transform: rotate(-45deg) scale(0);
    transform: rotate(-45deg) scale(0);
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

.sp_checkbox>input:checked~label::after {
    -webkit-transform: rotate(-45deg) scale(1);
    -moz-transform: rotate(-45deg) scale(1);
    transform: rotate(-45deg) scale(1);
}

.sp_checkbox.sp_checkbox_svg>label::after {
    display: none;
}

.sp_checkbox.sp_checkbox_svg>label>.sp_checkbox_chk_icon {
    position: absolute;
    top: 8px;
    left: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    transform: scale(0);
    /* -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s; */
}

.sp_checkbox.sp_checkbox_svg>label::before {
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

.sp_checkbox.sp_checkbox_svg>input:checked~label::before {
    background-color: var(--main-color);
    border-color: var(--main-color);
    box-shadow: 0px 3px 11.4px 0.6px rgba(151, 68, 255, 0.2);
}

.sp_checkbox.sp_checkbox_svg>input:checked~label>.sp_checkbox_chk_icon {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    transform: scale(1);
}

.sp_checkbox.semi_chk>input:checked~label::before {
    background-color: transparent;
}

.sp_checkbox.semi_chk>input:checked~label>.sp_checkbox_chk_icon {
    width: 10px;
    height: 10px;
    background-color: var(--main-color);
    top: 55%;
    left: 4px;
    -webkit-transform: scale(1) translateY(-60%);
    -moz-transform: scale(1) translateY(-60%);
    transform: scale(1) translateY(-60%);
}

.sp_checkbox>input:disabled~label {
    opacity: 0.5;
    cursor: not-allowed;
}

/* checkbox end */

/* datatable start */
.sp_table_wrapper {
    margin-bottom: 50px;
}

.sp_table_wrapper table.dataTable {
    border-spacing: 0;
}

.sp_table_wrapper table.dataTable thead th,
.sp_table_wrapper table.dataTable thead td {
    border-bottom: none;
    background-color: #ffffff;
    text-align: left;
    color: #a8aec0;
    font-weight: 400;
    /* background-image: none; */
    padding: 16px 15px;
}

.sp_table_wrapper table.dataTable thead th:first-child {
    border-radius: 10px 0 0 10px;
}

.sp_table_wrapper table.dataTable thead th:last-child {
    border-radius: 0 10px 10px 0;
}

table.dataTable thead .sorting {
    background-image: url('../images/sort_both.png');
    background-repeat: no-repeat;
    cursor: pointer;
}

.sp_table_wrapper table.dataTable thead th[class*='sorting'] {
    padding-left: 20px;
    background-position: left;
}

.sp_table_wrapper table.dataTable thead th.sorting_disabled {
    padding-left: 15px;
}

.sp_table_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.sp_table_header>h3 {
    margin: 0;
    font-weight: 600;
    font-size: 18px;
}

table.dataTable tbody tr {
    background-color: transparent;
    position: relative;
}

table.dataTable tbody tr.ui-sortable-helper {
    display: table;
}

table.dataTable tbody tr.ui-sortable-placeholder {
    visibility: visible !important;
    background-color: rgba(var(--main-color-rgb), 0.04);
}

table.dataTable.no-footer {
    border-bottom: none;
}

table.dataTable tbody th,
table.dataTable tbody td {
    padding: 16px 15px;
    border-bottom: 1px solid #e9e9f4;
    position: relative;
}

table.dataTable tbody>tr:hover {
    box-shadow: 0px 8px 34px rgba(0, 0, 0, 0.04);
}

table.dataTable tbody>tr:hover>td {
    background-color: #ffffff;
}

/* table.dataTable tbody > tr:hover > td:first-child{
    border-radius: 10px 0 0 10px;
}
table.dataTable tbody > tr:hover > td:last-child{
    border-radius: 0 10px 10px 0;
} */
table.dataTable tbody>tr:hover>td:first-child::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: -1px;
    left: -6px;
    width: 6px;
    background-color: var(--main-color);
    border-radius: 8px 0 0 8px;
    border: 1px solid #e9e9f4;
    border-right: 0;
    /* box-shadow: inset -4px 0px 0px #9744ff; */
}

table.dataTable tbody>tr:hover>td:last-child::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: -1px;
    right: -6px;
    width: 6px;
    background-color: #ffffff;
    border-radius: 0 8px 8px 0;
    border: 1px solid #e9e9f4;
    border-left: 0;
}

.sp_dt_name {
    display: flex;
    align-items: center;
}

.sp_dt_name>img {
    width: 34px;
    height: 34px;
    border: 2px solid #e9e9f4;
    border-radius: 6px;
    margin-right: 10px;
}

.sp_dt_level {
    width: 90px;
    height: 26px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 500;
}

.sp_dt_level.basic {
    color: #79d70f;
    background-color: #e5f5da;
}

.sp_dt_level.business {
    color: #14cee6;
    background-color: #dcf8fb;
}

.sp_dt_level.premium {
    color: #fa7d09;
    background-color: #f7e6d8;
}

.sp_table_btns {
    display: flex;
    align-items: center;
}

.sp_table_btns>a {
    width: 32px;
    height: 32px;
    display: inline-flex;
    vertical-align: middle;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 8px;
    margin-right: 10px;
    background-color: var(--main-color);
}

.sp_table_btns>a:last-child {
    margin-right: 0;
}

.sp_table_btns>a.edit {
    background-color: #ffc734;
}

.sp_table_btns>a.delete {
    background-color: #ff6666;
}

.sp_table_btns>a.view_user_click_sale_data,
.sp_table_btns>a.sp_get_affiliate_link,
.sp_table_btns>a.view_user_onboarding_details,
.sp_table_btns>a.view_user_payment_history,
.sp_table_btns>a.view_user_download_history,
.sp_table_btns>a.spj_invoice_generate_pop,
.sp_table_btns>a.spj_set_amount_per_user_pop {
    background-color: #d5e1f9;
}

.sp_table_btns>a>svg {
    fill: #ffffff;
    width: 17px;
    height: 17px;
    margin-top: -1px;
}

.sp_dt_no {
    width: 50px;
    text-align: center !important;
}

.sp_dt_action {
    width: 100px;
}

.dataTables_wrapper .dataTables_length {
    display: none;
}

.dataTables_wrapper#sp_user_list_wrapper .dataTables_length {
    display: block;
    margin-bottom: 15px;
}

.dataTables_wrapper .dataTables_paginate {
    width: 100%;
    background-color: #ffffff;
    border-radius: 10px;
    text-align: center;
    padding: 0;
    margin-top: 30px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 14px 0;
    border: none;
    border-radius: 0px;
    margin: 0 8px;
    color: var(--color-heading) !important;
    outline: none;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.previous,
.dataTables_wrapper .dataTables_paginate .paginate_button.next {
    font-size: 10px;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 0.5em;
    margin: 0;
    width: 44px;
    overflow: hidden;
    vertical-align: middle;
    outline: none;
    border: 1px solid transparent;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.previous {
    margin-right: 60px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.next {
    margin-left: 60px;
}

.dataTables_wrapper .dataTables_paginate .ellipsis {
    display: inline-block;
    -webkit-transform: translateY(-3px);
    -moz-transform: translateY(-3px);
    transform: translateY(-3px);
}

.dataTables_wrapper .dataTables_paginate .paginate_button:focus,
.dataTables_wrapper .dataTables_paginate .paginate_button:active,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background-color: transparent;
    background: none;
    border: 1px solid transparent;
    box-shadow: none;
    color: var(--main-color) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background-color: transparent;
    background: none;
    border: 1px solid transparent;
    color: var(--main-color) !important;
    box-shadow: inset 0px -3px 0px var(--main-color);
}

.dataTables_wrapper .dataTables_info {
    display: none;
}

.sp_table_avatar {
    display: flex;
    align-items: center;
}

.sp_table_avatar>.sp_table_avatar_icon {
    position: relative;
    margin-right: 10px;
}

.sp_table_avatar>.sp_table_avatar_icon>span {
    width: 34px;
    height: 34px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--main-color);
    color: #ffffff;
    text-transform: uppercase;
    padding-top: 3px;
    flex: none;
}

.sp_table_avatar>.sp_table_avatar_icon>img {
    position: absolute;
    top: 0;
    right: -1px;
    width: 36px;
    height: 36px;
    border-radius: 50px;
    object-fit: cover;
    background-color: #ffffff;
}

.sp_table_avatar>.sp_table_avatar_details>.sp_table_avatar_name,
.sp_table_avatar>.sp_table_avatar_name {
    font-weight: 600;
}

.sp_table_avatar>.sp_table_avatar_name>.sp_table_avatar_level {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--main-color);
    font-size: 12px;
}

.sp_table_avatar>.sp_table_avatar_details {
    flex: 1;
}

.sp_table_avatar>.sp_table_avatar_details>.sp_table_avatar_email {
    font-size: 12px;
    color: #acaeb5;
}

.sp_table_avatar.sp_design>.sp_table_avatar_icon>img,
.sp_table_avatar.sp_design>.sp_table_avatar_icon>span {
    width: 50px;
    height: 50px;
    border-radius: 5px;
    background-color: #e8ecf4;
}

.sp_table_wrapper table.dataTable#sp_user_list thead th:nth-child(2),
.sp_table_wrapper table.dataTable#sp_user_list thead td:nth-child(2) {
    width: 220px !important;
}

.sp_table_wrapper .dataTables_wrapper#sp_category_list_wrapper {
    overflow: auto;
}

.sp_table_wrapper .dataTables_wrapper#sp_category_list_wrapper::-webkit-scrollbar {
    height: 10px;
}

.sp_custom_data_table_wrapper .sp_datatable {
    width: 100%;
}

/* datatable end */

/* custom table start */
.sp_ctable_wrapper {
    overflow-y: hidden;
    overflow-x: auto;
}

.sp_ctable_head {
    background-color: #ffffff;
    border-radius: 6px;
}

.sp_ctable_row {
    display: flex;
    width: 100%;
    align-items: center;
}

.sp_ctable_body .sp_ctable_row {
    border-bottom: 1px solid #E9E9F4;
}

.sp_ctable_body .sp_ctable_row:last-child {
    border-bottom: none;
}

.sp_ctable_col {
    flex: 1;
    padding: 15px;
    white-space: nowrap;
}

.sp_ctable_head .sp_ctable_col {
    font-weight: 600;
}

.sp_ctable_col.sp_ctable_center {
    text-align: center;
}


.sp_ctable_data_thumb {
    width: 100px;
    height: 100px;
    border: 1px solid #E3E3E3;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
}

.sp_ctable_data_thumb>img {
    width: 100px;
    height: 100px;
    object-fit: contain;
    padding: 8px;
}

.sp_ctable_data_thumb_overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(30, 31, 40, 0.80);
    cursor: pointer;
    flex-direction: column;
    color: #ffffff !important;
    gap: 4px;
    font-size: 14px;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    transition: all 0.2s;
}

.sp_ctable_row:hover .sp_ctable_data_thumb_overlay {
    opacity: 1;
    visibility: visible;
}

.sp_ctable_data_thumb_overlay>svg {
    width: 16px;
    height: auto;
}

.sp_ctable_data_thumb_overlay>svg path {
    fill: #ffffff;
}

.sp_ctable_btn {
    width: 32px;
    height: 32px;
    display: inline-flex;
    vertical-align: middle;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 8px;
    position: relative;
}

/* .sp_ctable_btn > svg{
    width: 20px;
    height: auto;
} */
.sp_ctable_btn .tooltip-inner {
    white-space: nowrap;
}

/* .sp_ctable_btn > svg path{
    fill: var(--main-color);
}
.sp_ctable_btn:hover{
    background-color: rgba(var(--main-color-rgb),0.10);
} */

.sp_ctable_btn.spj_download_access_product>svg path {
    fill: var(--main-color);
}

.sp_ctable_col .sp_switch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sp_ctable_col .sp_switch>label {
    height: 15px;
}

.sp_ctable_data_status {
    width: 74px;
    height: 24px;
    border-radius: 30px;
    border: 1px solid;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sp_ctable_data_status.approved {
    color: #2AC34B;
}

.sp_ctable_data_status.rejected {
    color: #F13333;
}

.sp_ctable_data_status.inreview {
    color: var(--main-color);
}

.sp_ctable_col .sp_table_avatar>.sp_table_avatar_name span {
    display: block;
}

.sp_ctable_col .sp_table_avatar>.sp_table_avatar_name span.sp_tan_name {
    color: var(--color-heading);
}

.sp_ctable_col .sp_table_avatar>.sp_table_avatar_name span.sp_tan_email {
    font-size: 12px;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sp_ctable_pagination {
    width: 100%;
    background-color: #ffffff;
    border-radius: 10px;
    text-align: center;
    padding: 0;
    margin-top: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sp_ctable_pagination>.sp_ctable_btn {
    font-size: 10px;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 0.5em;
    margin: 0;
    width: 44px;
    vertical-align: middle;
    outline: none;
    border: 1px solid transparent;
    background-color: transparent;
}

.sp_ctable_pagination>.sp_ctable_btn:hover {
    color: var(--main-color);
}

.sp_ctable_pagination>ul {
    list-style: none;
    padding: 0;
    margin: 0 60px;
}

.sp_ctable_pagination>ul>li {
    padding: 14px 0;
    border: none;
    border-radius: 0px;
    margin: 0 8px;
    color: var(--color-heading);
    display: inline-block;
    cursor: pointer;
    min-width: 1.5em;
}

.sp_ctable_pagination>ul>li:hover {
    color: var(--main-color);
}

.sp_ctable_pagination>ul>li.active {
    color: var(--main-color) !important;
    box-shadow: inset 0px -3px 0px var(--main-color);
}

.sp_ctable_pagination>ul>li>span {
    line-height: 0;
    display: inline-block;
    vertical-align: middle;
    margin-top: -8px;
}

/* custom table end */

/* popup start */
.sp_popup_wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    background-color: rgba(30, 31, 40, 0.85);
    padding: 15px;
    padding-right: 15px !important;
    padding-left: 15px !important;
    /* backdrop-filter: blur(5px); */
    text-align: center;
    overflow: auto;
    opacity: 0;
    visibility: hidden;
    /* transition: all 0.2s; */
}

.sp_popup_wrapper.in {
    opacity: 1;
    visibility: visible;
}

.sp_popup_wrapper::before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 1px;
    height: 100%;
}

.sp_popup_wrapper>.sp_popup_inner {
    display: inline-block;
    vertical-align: middle;
    width: 100%;
    max-width: 570px;
    margin-left: -1px;
    background-color: #ffffff;
    border-radius: 15px;
    padding: 50px;
    text-align: left;
    position: relative;
    -webkit-transition: all 0.2s cubic-bezier(0.71, -0.11, 0.25, 0.88);
    -moz-transition: all 0.2s cubic-bezier(0.71, -0.11, 0.25, 0.88);
    transition: all 0.2s cubic-bezier(0.71, -0.11, 0.25, 0.88);
    opacity: 0;
    -webkit-transform: scale(0.95);
    -moz-transform: scale(0.95);
    transform: scale(0.95);
}

.sp_popup_wrapper.in>.sp_popup_inner {
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    transform: scale(1);
}

.sp_popup_closer_overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.sp_popup_title {
    text-align: center;
    font-size: 24px;
    color: var(--color-heading);
    font-weight: 600;
    margin-bottom: 40px;
}

.sp_popup_title>p {
    margin: 0;
    font-size: 14px;
    color: var(--color-body);
    font-weight: 400;
}

.sp_popup_close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffe8e8;
    cursor: pointer;
}

.sp_popup_close::before,
.sp_popup_close::after {
    content: "";
    position: absolute;
    width: 12px;
    height: 2px;
    border-radius: 2px;
    background-color: #ff6666;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}

.sp_popup_close::after {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.sp_popup_wrapper>.sp_popup_inner>.sp_popup_footer>.sp_btn {
    height: 50px;
    line-height: 50px;
    min-width: 170px;
}

.sp_popup_wrapper>.sp_popup_inner .sp_popup_body {
    margin-bottom: 30px;
}

.sp_popup_wrapper#delete_popup {
    z-index: 9999999;
}

.sp_popup_wrapper#delete_popup>.sp_popup_inner .sp_popup_body,
.sp_popup_wrapper#sp_image_library>.sp_popup_inner .sp_popup_body {
    margin-bottom: 0;
}

.sp_popup_wrapper#add_campaign_popup>.sp_popup_inner {
    max-width: 640px;
}

.sp_popup_wrapper#show_affiliate_link>.sp_popup_inner {
    max-width: 700px;
}

.sp_delete_popup_wrapper {
    display: flex;
    align-items: center;
}

.sp_delete_popup_wrapper>.sp_dp_icon {
    flex: none;
    margin-right: 20px;
}

.sp_delete_popup_wrapper>.sp_dp_details>h3 {
    margin: 0;
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 10px
}

.sp_delete_popup_wrapper>.sp_dp_details>p {
    margin: 0;
    font-size: 16px;
    margin-bottom: 20px;
}

.sp_delete_popup_wrapper>.sp_dp_details>.sp_dp_action>.sp_btn {
    min-width: 150px;
    margin-right: 10px;
}

.sp_delete_popup_wrapper>.sp_dp_details>.sp_dp_action>.sp_btn:last-child {
    margin-right: 0px;
}

.sp_popup_logo {
    margin-bottom: 30px;
}

.sp_popup_logo>img {
    width: 200px;
}
/* popup end */

/* dropdown start */
.sp_dropdown_wrapper {
    position: absolute;
    top: 100%;
    right: -20px;
    min-width: 210px;
    opacity: 0;
    visibility: hidden;
    z-index: 10;
    -webkit-transition: all 0.2s cubic-bezier(0.71, -0.11, 0.25, 0.88);
    -moz-transition: all 0.2s cubic-bezier(0.71, -0.11, 0.25, 0.88);
    transition: all 0.2s cubic-bezier(0.71, -0.11, 0.25, 0.88);
    -webkit-transform: translateY(-10px);
    -moz-transform: translateY(-10px);
    transform: translateY(-10px);
}

.sp_dd_hover_link:hover>.sp_dropdown_wrapper,
.open>.sp_dropdown_wrapper {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    transform: translateY(0px);
}

.sp_dropdown_wrapper>.sp_dropdown_inner {
    background-color: #ffffff;
    box-shadow: 0px 3px 6px 0px rgb(0 0 0 / 6%), 0px 3px 6px 0px rgb(0 0 0 / 23%);
    /* border-radius: 10px;
    padding: 15px; */
    border-radius: 3px;
    position: relative;
}

.sp_dropdown_wrapper>.sp_dropdown_inner:before {
    content: "";
    width: 18px;
    height: 10px;
    position: absolute;
    top: -9px;
    right: 26px;
    z-index: 0;
    background-size: 100%;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg width='42' height='22' viewBox='0 0 42 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_d_6_5)'%3E%3Cpath d='M18.8787 5.73654C20.0503 4.56497 21.9497 4.56497 23.1213 5.73654L39.3848 22H21H2.61522L18.8787 5.73654Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d_6_5' x='0.615219' y='0.857864' width='40.7696' height='21.1421' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dy='-2'/%3E%3CfeGaussianBlur stdDeviation='1'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_6_5'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_6_5' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E%0A");
}

.sp_header_right .sp_dropdown_wrapper>.sp_dropdown_inner {
    margin-top: 14px;
}

.sp_header_right .sp_dropdown_wrapper>.sp_dropdown_inner:before {
    right: 23px;
}

.sp_dropdown_wrapper>.sp_dropdown_inner>ul {
    list-style: none;
    padding: 0;
    margin: 0;
    padding: 10px 0;
}

.sp_dropdown_wrapper>.sp_dropdown_inner>ul>li {
    display: block;
}

.sp_dropdown_wrapper>.sp_dropdown_inner>ul>li>a {
    display: flex;
    align-items: center;
    padding: 10px 18px;
    white-space: nowrap;
    /* color: var(--color-body); */
    color: #282828;
    font-size: 14px;
    border-radius: 4px;
    border-radius: 0px;
    font-weight: 600;
}

.sp_dropdown_wrapper>.sp_dropdown_inner>ul>li>a>svg {
    margin-right: 10px;
    -webkit-transform: translateY(-1px);
    -moz-transform: translateY(-1px);
    transform: translateY(-1px);
}

.sp_dropdown_wrapper>.sp_dropdown_inner>ul>li>a>svg path {
    /* fill: var(--color-body); */
    fill: #282828;
}

.sp_dropdown_wrapper>.sp_dropdown_inner>ul>li>a:hover {
    color: var(--main-color);
    background-color: rgba(var(--main-color-rgb), 0.10);
}

.sp_dropdown_wrapper>.sp_dropdown_inner>ul>li>a:hover>svg path {
    fill: var(--main-color);
}

.sp_dropdown_wrapper>.sp_dropdown_inner>ul>li>a.spj_shareddesign>svg {
    -webkit-transform: translateY(1px);
    -moz-transform: translateY(1px);
    transform: translateY(1px);
}

.sp_dd_hover_link>.sp_dropdown_wrapper>.sp_dropdown_inner>ul>li {
    display: flex;
    align-items: center;
    padding: 5px;
    white-space: nowrap;
    color: var(--color-body);
    font-size: 14px;
}

.sp_dd_hover_link>.sp_dropdown_wrapper>.sp_dropdown_inner>ul>li:hover {
    color: var(--main-color);
}

/* dropdown end */

/* alert start */
.sp_alert_wrapper {
    position: fixed;
    right: 30px;
    bottom: 30px;
    z-index: 99999999;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.2s cubic-bezier(0.71, -0.11, 0.25, 0.88);
    -moz-transition: all 0.2s cubic-bezier(0.71, -0.11, 0.25, 0.88);
    transition: all 0.2s cubic-bezier(0.71, -0.11, 0.25, 0.88);
    -webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    transform: translateY(100%);
    max-width: 450px;
}

.sp_alert_wrapper.alert_open {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    transform: translateY(0);
}

.sp_alert_wrapper>.sp_alert_inner {
    border-radius: 12px;
    padding: 22px 40px 22px 87px;
    background-color: #ff5d5d;
    color: #ffffff;
    position: relative;
}

.sp_alert_wrapper.error>.sp_alert_inner {
    background-color: #ff5d5d;
}

.sp_alert_wrapper.success>.sp_alert_inner {
    background-color: #2cdd77;
}

.sp_alert_wrapper>.sp_alert_inner>.sp_alert_icon {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 67px;
    background-color: rgba(0, 0, 0, 0.08);
    border-radius: 12px 0 0 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sp_alert_wrapper>.sp_alert_inner>.sp_alert_icon>svg {
    display: none;
}

.sp_alert_wrapper.error>.sp_alert_inner>.sp_alert_icon>svg.sp_alert_icon_error {
    display: block;
}

.sp_alert_wrapper.success>.sp_alert_inner>.sp_alert_icon>svg.sp_alert_icon_success {
    display: block;
}

.sp_alert_wrapper>.sp_alert_inner>.sp_alert_content>p {
    margin: 0;
}

/* alert end */

/* infobox start */
.sp_infobox {
    background-color: rgba(var(--main-color-rgb), 0.2);
    border: 1px solid rgba(var(--main-color-rgb), 0.5);
    border-radius: 4px;
    padding: 10px 15px;
    color: var(--main-color);
    margin-bottom: 15px;
}

.sp_infobox a,
.sp_infobox span {
    font-weight: 700;
}

.sp_infobox .sp_infobox_inline_text {
    display: inline;
}

.sp_infobox.error {
    background-color: #FFEBEB;
    color: #FD3434;
    border-color: #ffb3b3;
}

.sp_infobox.info {
    background-color: #fff6dc;
    color: #957212;
    border-color: #f7d77b;
}

.sp_infobox ul {
    font-size: 13px;
    margin: 0;
    padding: 0;
    padding-left: 18px;
    margin-bottom: 10px;
}

.sp_infobox .sp_copy_url {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    cursor: pointer;
}

.sp_infobox .sp_copy_url svg {
    width: 14px;
    height: auto;
}

.sp_storage_tab_wrapper .sp_infobox {
    word-break: break-word;
}

/* infobox end */

/* range slider start */
.sp_range_slider {
    display: flex;
    align-items: center;
    flex-direction: row;
    position: relative;
}

.sp_range_slider .sp_range_value {
    width: 74px;
    height: 40px;
    flex: none;
    border: 1px solid #555e8d;
    background-color: #353b5b;
    border-radius: 4px;
    margin-left: 20px;
    outline: none;
    text-align: center;
    color: #a8aec0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-weight: 400;
}

.sp_range_slider .sp_range_value[type="number"] {
    padding-left: 10px;
}

.sp_range_slider::after {
    content: "%";
    position: absolute;
    bottom: 2px;
    top: 2px;
    right: 2px;
    background-color: #353b5b;
    color: #a8aec0;
    padding-left: 3px;
    width: 24px;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sp_range_slider.without_percent::after {
    display: none;
}

.ed_shadow_enable .sp_range_slider::after {
    display: none;
}


.sp_slider {
    -webkit-appearance: none;
    /* Override default CSS styles */
    appearance: none;
    width: 100%;
    /* Full-width */
    height: 2px;
    /* Specified height */
    background: #555e8d;
    /* Grey background */
    outline: none;
    /* Remove outline */
    -webkit-transition: .2s;
    /* 0.2 seconds transition on hover */
    transition: opacity .2s;
}

/* Mouse-over effects */
.sp_slider:hover {
    opacity: 1;
    /* Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.sp_slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    /* Override default look */
    appearance: none;
    width: 16px;
    /* Set a specific slider handle width */
    height: 16px;
    /* Slider handle height */
    background: #ffffff;
    /* Green background */
    cursor: pointer;
    /* Cursor on hover */
    border-radius: 50px;
    border: 5px solid var(--main-color);
}

.sp_slider::-moz-range-thumb {
    width: 16px;
    /* Set a specific slider handle width */
    height: 16px;
    /* Slider handle height */
    background: #ffffff;
    /* Green background */
    cursor: pointer;
    /* Cursor on hover */
    border-radius: 50px;
    border: 5px solid var(--main-color);
}

/* range slider end */

/* cropper popup start */
.sp_popup_wrapper#image_cropper_popup>.sp_popup_inner {
    max-width: 860px;
}

.sp_image_cropper_wrapper {
    display: flex;
    margin-bottom: 30px;
}

.sp_image_cropper_wrapper .sp_croper_container {
    flex: 1;
    max-height: 400px;
}

.sp_image_cropper_wrapper>.sp_crop_preview {
    flex: none;
    overflow: hidden;
    width: 90px;
    height: 90px;
    margin-left: 15px
}

/* cropper popup end */

/* tooltip start */
.tooltip {
    position: absolute;
    z-index: 1070;
    display: block;
    font-style: normal;
    font-weight: 400;
    line-height: 1.42857143;
    line-break: auto;
    text-align: left;
    text-align: start;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    word-break: normal;
    word-spacing: normal;
    word-wrap: normal;
    white-space: normal;
    font-size: 12px;
    filter: alpha(opacity=0);
    opacity: 0;
}

.tooltip.in {
    filter: alpha(opacity=100);
    opacity: 1;
}

.tooltip.top {
    padding: 5px 0;
    margin-top: -3px;
}

.tooltip.right {
    padding: 0 5px;
    margin-left: 3px;
    top: -8px !important;
}

.tooltip.bottom {
    padding: 5px 0;
    margin-top: 3px;
}

.tooltip.left {
    padding: 0 5px;
    margin-left: -3px;
}

.tooltip.top .tooltip-arrow {
    bottom: 0;
    left: 50%;
    margin-left: -5px;
    border-width: 5px 5px 0;
    border-top-color: #222222;
}

.tooltip.top-left .tooltip-arrow {
    right: 5px;
    bottom: 0;
    margin-bottom: -5px;
    border-width: 5px 5px 0;
    border-top-color: #222222;
}

.tooltip.top-right .tooltip-arrow {
    bottom: 0;
    left: 5px;
    margin-bottom: -5px;
    border-width: 5px 5px 0;
    border-top-color: #222222;
}

.tooltip.right .tooltip-arrow {
    top: 16px !important;
    left: 0;
    margin-top: -5px;
    border-width: 5px 5px 5px 0;
    border-right-color: #222222;
}

.tooltip.left .tooltip-arrow {
    top: 50%;
    right: 0;
    margin-top: -5px;
    border-width: 5px 0 5px 5px;
    border-left-color: #222222;
}

.tooltip.bottom .tooltip-arrow {
    top: 0;
    left: 50%;
    margin-left: -5px;
    border-width: 0 5px 5px;
    border-bottom-color: #222222;
}

.tooltip.bottom-left .tooltip-arrow {
    top: 0;
    right: 5px;
    margin-top: -5px;
    border-width: 0 5px 5px;
    border-bottom-color: #222222;
}

.tooltip.bottom-right .tooltip-arrow {
    top: 0;
    left: 5px;
    margin-top: -5px;
    border-width: 0 5px 5px;
    border-bottom-color: #222222;
}

.tooltip-inner {
    max-width: 156px;
    background-color: #222222;
    color: #ffffff;
    padding: 12px 15px;
    border-radius: 3px;
    box-shadow: 0px 5px 7px rgba(0, 0, 0, 0.08);
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
}

.tooltip-arrow {
    position: absolute;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
}

.tooltip_title {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
}

.tooltip_trafficcampname .tooltip-inner {
    min-width: 156px;
}

.tooltip_path .tooltip-inner {
    min-width: 254px;
}

.ui-tooltip {
    position: absolute;
    z-index: 1070;
    display: block;
    font-style: normal;
    font-weight: 400;
    line-height: 1.42857143;
    line-break: auto;
    text-align: left;
    text-align: start;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    word-break: normal;
    word-spacing: normal;
    word-wrap: normal;
    white-space: normal;
    font-size: 12px;
}

.ui-tooltip>.ui-tooltip-content {
    position: relative;
    max-width: 156px;
    background-color: #222222;
    color: #ffffff;
    padding: 12px 15px;
    border-radius: 3px;
    box-shadow: 0px 5px 7px rgba(0, 0, 0, 0.08);
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    -webkit-transform: translate(-15px, -86px);
    -moz-transform: translate(-15px, -86px);
    transform: translate(-15px, -86px);
}

.ui-tooltip>.ui-tooltip-content:before {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -4px;
    margin-top: -5px;
    width: 8px;
    height: 8px;
    border-radius: 1px;
    background-color: #222222;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* tooltip end */

/* popup tab start */
.sp_popup_tab {
    margin-bottom: 30px;
}

.sp_popup_tab>ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: inline-flex;
    align-items: center;
    background-color: #f3f3f3;
    background-color: rgba(var(--main-color-rgb), 0.05);
    padding: 5px;
    border-radius: 50px;
}

.sp_popup_tab>ul>li {
    display: inline-block;
    vertical-align: middle;
}

.sp_popup_tab>ul>li>a {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    font-size: 14px;
    color: #636994;
    position: relative;
    padding: 10px 30px 9px;
    border-radius: 50px;
}

.sp_popup_tab>ul>li.active>a {
    background-color: var(--main-color);
    color: #ffffff;
}

.sp_popup_tab.sp_square_tab>ul {
    border-radius: 5px;
    background-color: #E8ECF4;
    padding: 2px;
}

.sp_popup_tab.sp_square_tab>ul>li>a {
    border-radius: 4px;
    font-weight: 600;
    color: var(--color-body);
    min-width: 116px;
}

.sp_popup_tab.sp_square_tab>ul>li.active>a {
    color: #ffffff;
}

.sp_popup_tab_content {
    display: none;
}

.sp_popup_tab_content.active {
    display: block;
}

.sp_popup_tab_content>h5 {
    font-size: 14px;
}

.sp_popup_tab_content>p {
    margin: 0;
    margin-bottom: 30px;
    margin-top: -10px;
}

.sp_popup_title.sp_popup_tab_title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
}

.sp_popup_title.sp_popup_tab_title>.sp_popup_tab {
    margin: 0;
}

/* popup tab end */

/* custom Dropdown start */
.sp_custom_dd_wrapper {
    text-align: left;
    position: relative;
}

.sp_custom_dd_wrapper>.sp_cusdd_toggle {
    height: 50px;
    background-color: #ffffff;
    box-shadow: 0px 10px 34px 0px rgba(0, 0, 0, 0.03);
    font-size: 14px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px;
    color: #a8aec0;
    cursor: pointer;
}

.sp_custom_dd_wrapper>.sp_cusdd_toggle>span {
    max-width: 80%;
    text-overflow: ellipsis;
    overflow: hidden;
}

.sp_dfytemp_header_search .sp_custom_dd_wrapper>.sp_cusdd_toggle>span {
    white-space: nowrap;
}

.sp_custom_dd_wrapper.open>.sp_cusdd_toggle {
    border-radius: 10px 10px 0 0;
}

.sp_custom_dd_wrapper>.sp_cusdd_toggle:after {
    content: "";
    display: inline-block;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid #a8aec0;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

.sp_custom_dd_wrapper.open>.sp_cusdd_toggle:after {
    -webkit-transform: rotateX(180deg);
    -moz-transform: rotateX(180deg);
    transform: rotateX(180deg);
}

.sp_custom_dd_wrapper>.sp_cusdd_dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    /* width: 100%; */
    padding: 20px;
    background-color: #ffffff;
    box-shadow: 0px 40px 34px -20px rgba(0, 0, 0, 0.03);
    border-radius: 0px 0px 10px 10px;
    border-top: 1px solid #e1ebfb;
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    transition: all 0.2s;
    -webkit-transform: translateY(-10px);
    -moz-transform: translateY(-10px);
    transform: translateY(-10px);
    max-height: 270px;
    overflow: auto;
}

.sp_custom_dd_wrapper.open>.sp_cusdd_dropdown {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    transform: translateY(0);
}

.sp_custom_dd_wrapper>.sp_cusdd_dropdown>ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sp_custom_dd_wrapper>.sp_cusdd_dropdown>ul>li {
    display: block;
    cursor: pointer;
    padding: 8px 10px;
    font-size: 14px;
    border-radius: 5px;
    white-space: nowrap;
}

.sp_custom_dd_wrapper>.sp_cusdd_dropdown>ul>li span {
    display: block;
}

.sp_custom_dd_wrapper>.sp_cusdd_dropdown>ul>li>span:hover {
    color: var(--main-color);
}

.sp_custom_dd_wrapper>.sp_cusdd_dropdown>ul>li.active,
.sp_custom_dd_wrapper>.sp_cusdd_dropdown>ul>li:hover {
    color: var(--main-color);
    background-color: rgba(var(--main-color-rgb), 0.05);
}

.sp_custom_dd_wrapper>.sp_cusdd_dropdown>ul>li>ul {
    list-style: none;
    padding-left: 0px;
    margin: 0;
    font-size: 12px;
    margin-top: 5px;
}

.sp_custom_dd_wrapper>.sp_cusdd_dropdown>ul>li>ul>li span {
    padding: 6px 6px 6px 10px;
    color: var(--color-body);
    border-radius: 3px;
}

.sp_custom_dd_wrapper>.sp_cusdd_dropdown>ul>li>ul>li span:before {
    content: "";
    width: 6px;
    height: 1px;
    border-radius: 5px;
    display: inline-block;
    margin-right: 8px;
    background-color: var(--color-body);
    vertical-align: middle;
    margin-top: -1px;
    opacity: 0.5;
}

.sp_custom_dd_wrapper>.sp_cusdd_dropdown>ul>li>ul>li span:hover:before {
    opacity: 1;
    background-color: var(--main-color);
}

.sp_custom_dd_wrapper>.sp_cusdd_dropdown>ul>li>ul>li span:hover {
    color: var(--main-color);
    background-color: rgba(var(--main-color-rgb), 0.05);
}

.sp_custom_dd_wrapper>.sp_cusdd_dropdown>ul>li.sp_cusdd_submenu:hover {
    color: inherit;
    background-color: transparent;
}

/* custom Dropdown end */

/* switch start */
.sp_switch>input {
    position: absolute;
    left: -9999999px;
    opacity: 0;
}

.sp_switch>label {
    display: inline-flex;
    align-items: center;
    position: relative;
    cursor: pointer;
    margin: 0;
}

.sp_switch>label::before {
    content: "";
    width: 26px;
    height: 5px;
    border-radius: 10px;
    background-color: #d2d2d2;
}

.sp_switch>label::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 0;
    width: 13px;
    height: 13px;
    border-radius: 15px;
    background-color: #888888;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

.sp_switch>input:checked~label::before {
    background-color: #e5eeff;
}

.sp_switch>input:checked~label::after {
    left: 13px;
    background-color: var(--main-color);
}

.sp_switch>label>span {
    margin-left: 7px;
}

.sp_switch.sp_switch_two_text>label {
    display: inline-flex;
    align-items: center;
    gap: 40px;
}

.sp_switch.sp_switch_two_text>label::before {
    position: absolute;
    left: calc(50% - 6px);
    height: 8px;
}

.sp_switch.sp_switch_two_text>label::after {
    left: calc(50% + 8px);
    top: 3px;
    width: 14px;
    height: 14px;
}

.sp_switch.sp_switch_two_text>input:checked~label::after {
    left: calc(50% - 8px);
}

.sp_switch.sp_switch_two_text>label>span {
    margin: 0;
    font-weight: 600;
}

.sp_switch.sp_switch_two_text>label::before {
    background-color: #e5eeff;
}

.sp_switch.sp_switch_two_text>label::after {
    background-color: var(--main-color);
}

.sp_switch.sp_switch_two_text>label>span.sp_switch_on {
    color: var(--color-body);
}

.sp_switch.sp_switch_two_text>label>span.sp_switch_off {
    color: var(--main-color);
}

.sp_switch.sp_switch_two_text>input:checked~label>span.sp_switch_on {
    color: var(--main-color);
}

.sp_switch.sp_switch_two_text>input:checked~label>span.sp_switch_off {
    color: var(--color-body);
}

/* switch end */

/* radio start */
.sp_radio_list .sp_radio {
    display: inline-flex;
    vertical-align: middle;
    align-items: center;
    margin-right: 10px;
}

.sp_radio>input {
    position: absolute;
    left: -99999px;
    opacity: 0;
}

.sp_radio>label {
    margin: 0;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    position: relative;
    height: 14px;
}

.sp_radio>label:before {
    content: "";
    width: 14px;
    height: 14px;
    border: 1px solid;
    border-radius: 50px;
    margin-right: 5px;
    flex: none;
}

.sp_radio>label:after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 8px;
    height: 8px;
    background-color: var(--main-color);
    border-radius: 50px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    transform: scale(0);
}

.sp_radio>input:checked~label {
    color: var(--main-color);
}

.sp_radio>input:checked~label:after {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    transform: scale(1);
}

/* radio end */

.sp_badge {
    display: inline-flex;
    align-items: center;
    position: relative;
    cursor: pointer;
    height: 13px;
}

.sp_badge::before {
    content: "";
    width: 26px;
    height: 5px;
    border-radius: 10px;
    background-color: #d2d2d2;
}

.sp_badge::after {
    content: "";
    position: absolute;
    top: 0px;
    left: 13px;
    width: 13px;
    height: 13px;
    border-radius: 15px;
    background-color: var(--main-color);
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

.sp_badge.blocked::after {
    left: 0;
    background-color: #888888;
}

/* responsive video start */
.sp_video_iframe_wrapper {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 56.25%;
    /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
    margin-bottom: 15px;
}

.sp_video_iframe_wrapper:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    cursor: pointer;
}

.sp_video_iframe_wrapper .sp_video_iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 10px;
    pointer-events: none;
}

.sp_video_iframe_wrapper.playing .sp_video_iframe {
    pointer-events: auto;
}

.sp_video_iframe_wrapper.playing:before {
    display: none;
}

/* responsive video end */

/* datetime picker start */
.xdsoft_datetimepicker {
    border: none;
    padding: 0;
    font-family: inherit;
}

.xdsoft_datetimepicker .xdsoft_datepicker {
    margin-left: 0;
    width: 280px;
}

.xdsoft_datetimepicker .xdsoft_calendar td,
.xdsoft_datetimepicker .xdsoft_calendar th {
    height: 36px;
    background: transparent;
    text-align: center;
    font-weight: 600;
}

.xdsoft_datetimepicker .xdsoft_calendar td>div {
    padding-right: 0;
}

.xdsoft_datetimepicker .xdsoft_calendar td,
.xdsoft_datetimepicker .xdsoft_calendar th {
    border: 1px solid #eaedf5;
    color: var(--color-body);
}

.xdsoft_datetimepicker .xdsoft_calendar td:hover,
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box>div>div:hover {
    background: transparent !important;
    color: var(--main-color) !important;
}

.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_default,
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current,
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box>div>div.xdsoft_current {
    box-shadow: none;
    background: var(--main-color) !important;
    color: #ffffff !important;
}

.xdsoft_datetimepicker .xdsoft_monthpicker {
    display: flex;
    box-shadow: 0 1px 3px rgb(0 0 0 / 12%), 0 1px 2px rgb(0 0 0 / 24%);
    margin-bottom: 5px;
    border-radius: 3px;
    height: 35px;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
}

.xdsoft_datetimepicker .xdsoft_month {
    text-align: center;
    background-color: transparent;
}

.xdsoft_datetimepicker .xdsoft_label i {
    margin-left: 2px;
}

.xdsoft_datetimepicker .xdsoft_year {
    width: 60px;
    margin-left: 0;
}

.xdsoft_datetimepicker .xdsoft_label>.xdsoft_select {
    box-shadow: 0 1px 3px rgb(0 0 0 / 12%), 0 1px 2px rgb(0 0 0 / 24%);
    border: none;
    padding: 0px;
    border-radius: 5px;
    max-height: 170px;
}

.xdsoft_datetimepicker .xdsoft_label>.xdsoft_select>div>.xdsoft_option {
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    border-radius: 0px;
    color: var(--color-body);
}

.xdsoft_datetimepicker .xdsoft_label>.xdsoft_select>div>.xdsoft_option.xdsoft_current {
    background: var(--main-color) !important;
    box-shadow: none;
    color: #ffffff !important;
}

.xdsoft_datetimepicker .xdsoft_label>.xdsoft_select>div>.xdsoft_option:hover {
    background: transparent;
    color: var(--main-color);
}

.xdsoft_datetimepicker .xdsoft_label>.xdsoft_select.xdsoft_monthselect {
    left: 0px;
}

.xdsoft_datetimepicker .xdsoft_timepicker {
    width: 80px;
    margin-left: 15px;
}

.xdsoft_datetimepicker .xdsoft_datepicker.active+.xdsoft_timepicker {
    margin-top: 0;
    margin-bottom: 0;
}

.xdsoft_time_box {
    border-radius: 5px;
    box-shadow: 0 1px 3px rgb(0 0 0 / 12%), 0 1px 2px rgb(0 0 0 / 24%);
    border: none;
}

.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box {
    height: 200px;
    border-bottom: none;
}

.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box>div>div {
    background: transparent;
    border-top: none;
    color: var(--color-body);
    font-weight: 600;
}

.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_prev,
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_next {
    margin-left: 26px;
}

.xdsoft_datetimepicker .xdsoft_label>.xdsoft_select.xdsoft_yearselect {
    left: 0;
}

.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_other_month,
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_disabled,
.xdsoft_datetimepicker .xdsoft_time_box>div>div.xdsoft_disabled {
    opacity: 0.7;
}

.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* datetime picker end */

/* custom tooltip start */
.sp_custom_tooltip_wrapper {
    position: relative;
}

.sp_custom_tooltip_wrapper>.sp_custom_tooltip_link {
    position: relative;
    cursor: default;
}

.sp_custom_tooltip_wrapper>.sp_custom_tooltip_inner {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    background-color: #222222;
    color: #ffffff;
    padding: 12px 15px;
    border-radius: 3px;
    box-shadow: 0px 5px 7px rgba(0, 0, 0, 0.08);
    font-weight: 400;
    font-size: 12px;
    min-width: 100px;
    display: none;
}

.sp_custom_tooltip_wrapper>.sp_custom_tooltip_inner>span {
    color: #C3C3C3;
}

.sp_custom_tooltip_wrapper>.sp_custom_tooltip_inner>h3 {
    margin: 3px auto;
    font-size: 14px;
    color: inherit;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 600;
}

.sp_custom_tooltip_wrapper>.sp_custom_tooltip_inner>p {
    margin: 0;
    font-size: 10px;
}

.sp_custom_tooltip_wrapper>.sp_custom_tooltip_inner:before {
    content: "";
    position: absolute;
    top: calc(100% - 12px);
    left: calc(50% - 7px);
    width: 14px;
    height: 14px;
    background-color: #222222;
    border-radius: 1px;
    transform: rotate(45deg);
}

.sp_custom_tooltip_wrapper>.sp_custom_tooltip_link:hover~.sp_custom_tooltip_inner {
    display: block;
}

/* custom tooltip end */

/* whats new box start */
.sp_whats_new_list {
    margin: 0 auto;
    display: grid;
    grid-template-columns: 225px 225px 225px;
    gap: 20px;
    justify-content: center;
    margin-top: 30px;
}

.sp_whats_new_list>.sp_whats_new_item {
    display: grid;
    grid-template-columns: 100px auto;
    position: relative;
    background-color: #ffffff;
    padding: 5px;
    border-radius: 8px;
    align-items: center;
    cursor: pointer;
}

.sp_whats_new_list>.sp_whats_new_item>img {
    width: 100%;
    border-radius: 5px;
}

.sp_whats_new_list>.sp_whats_new_item>p {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
}

.sp_whats_new_list>.sp_whats_new_item>span {
    position: absolute;
    background-color: #F72D48;
    color: #fff;
    border-radius: 50px;
    font-size: 12px;
    padding: 2px 10px;
    top: -10px;
    right: 10px;
}

/* whats new box end */


/* daterangepicker start */
.daterangepicker td.in-range {
    background-color: rgba(var(--main-color-rgb), 0.10);
}

.daterangepicker td.active,
.daterangepicker td.active:hover {
    background-color: var(--main-color);
}

.daterangepicker td.available:hover,
.daterangepicker th.available:hover {
    background-color: rgba(var(--main-color-rgb), 0.20);
    color: var(--main-color);
}

.daterangepicker .drp-buttons .btn {
    padding: 10px 20px;
    border-radius: 6px;
    border: none;
    outline: none;
    cursor: pointer;
    color: var(--color-body);
}

.daterangepicker .drp-buttons .btn.btn-primary {
    background-color: var(--main-color);
    color: #ffffff;
}

.daterangepicker .ranges li.active {
    background-color: var(--main-color);
}

/* daterangepicker end */

/* Range Slider Light start */
.ed_range_slider_light {
    display: flex;
    flex-direction: column-reverse;
    gap: 12px;
    margin-bottom: 16px;
}

.ed_range_slider_light>label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    font-size: 14px;
    font-weight: 600;
}

.ed_range_slider_light>label>input {
    width: 46px;
    height: 32px;
    border-radius: 3px;
    border: 1px solid var(--line-color);
    outline: none;
    padding: 6px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
}

.ed_range_slider_light>label>input:focus {
    border-color: var(--main-color);
}

.ed_range_slider_light .sp_slider {
    background: #dde1e9;
}

.ed_range_slider_light .sp_slider::-webkit-slider-thumb,
.ed_range_slider_light .sp_slider::-moz-range-thumb {
    transition: 0.2s ease-in-out;
}

.ed_range_slider_light .sp_slider::-webkit-slider-thumb:hover,
.ed_range_slider_light .sp_slider::-moz-range-thumb:hover {
    box-shadow: 0px 0px 0px 4px rgba(var(--main-color-rgb), 0.1);
}

.ed_range_slider_light .sp_slider::-webkit-slider-thumb:focus,
.ed_range_slider_light .sp_slider::-moz-range-thumb:focus {
    box-shadow: 0px 0px 0px 6px rgba(var(--main-color-rgb), 0.4);
}

/* Range Slider Light end */

/* filter dropdown start */
.sp_filter_dd_wrapper {
    position: relative;
}

.sp_filter_dd_wrapper>.sp_fdd_link {
    border: 1px solid var(--line-color);
    border-radius: 4px;
    padding: 8px 12px 8px 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-weight: 600;
}

.sp_filter_dd_wrapper>.sp_fdd_link>.sp_fdd_link_icon {
    width: 22px;
    height: 22px;
    border-radius: 3px;
    background-color: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sp_filter_dd_wrapper>.sp_fdd_link>.sp_fdd_link_icon svg path {
    fill: var(--color-body);
}

.sp_filter_dd_wrapper.open>.sp_fdd_link {
    color: var(--main-color);
    border-color: var(--main-color);
}

.sp_filter_dd_wrapper.open>.sp_fdd_link>.sp_fdd_link_icon {
    background-color: rgba(var(--main-color-rgb), 0.1);
}

.sp_filter_dd_wrapper.open>.sp_fdd_link>.sp_fdd_link_icon svg path {
    fill: var(--main-color);
}

.sp_filter_dd_wrapper>.sp_dropdown_wrapper {
    top: calc(100% + 10px);
    right: 0px;
}

/* filter dropdown end */

/* content loader start */
.sp_content_preloader .sp_content_preloader_item {
    background: linear-gradient(110deg, rgba(var(--main-color-rgb), 0.06) 0%, rgba(var(--main-color-rgb), 0.15) 50%, rgba(var(--main-color-rgb), 0.06) 100%);
    background-size: 200% 100%;
    animation: 1s shine linear infinite;
}

@keyframes shine {
    to {
        background-position-x: -200%;
    }
}

/* content loader end */

/********************************************************************************************* 
51. components end
*********************************************************************************************/

.append_image {
    text-align: center;
}

.no_search_result {
    text-align: center;
    width: 100%;
    margin: 35px auto;
    display: none;
    white-space: nowrap;
}

.no_search_result>img {
    max-width: 164px;
    margin-bottom: 30px;
}

.no_search_result>h4 {
    font-size: 24px;
    margin: 0;
    margin-bottom: 15px;
    font-weight: 600;
}

.no_search_result>p {
    font-size: 16px;
    color: #707b91;
    margin: 0;
    margin-bottom: 25px;
}

.no_search_result>p>span {
    font-weight: 500;
    color: var(--color-heading);
}

.no_search_result_with_hide {
    display: block;
}


.empty_img_lib {
    text-align: center;
}

.sp_popup_wrapper .empty_img_lib {
    margin: 0;
    padding: 40px 10px;
    background-color: #f6f6f6;
    border-radius: 4px;
}

.sp_popup_wrapper#image_preview_popup>.sp_popup_inner {
    padding: 0;
    max-width: 760px;
}

.sp_image_preview {
    text-align: center;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px;
}

.sp_image_preview img {
    max-width: 100%;
    background-color: #ffffff;
    max-height: 500px;
}

.sp_multiimg_preview>.sp_multiimg_preview_big {
    display: none;
}

.sp_multiimg_preview>.sp_multiimg_preview_thumb {
    width: 100%;
}

.sp_multiimg_preview>.sp_multiimg_preview_thumb>ul {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

.sp_multiimg_preview>.sp_multiimg_preview_thumb>ul>li {
    display: block;
    pointer-events: none;
}

.sp_multiimg_preview>.sp_multiimg_preview_thumb>ul>li>img {
    width: 100%;
    cursor: pointer;
    pointer-events: none;
}

.sp_popup_wrapper#image_preview_popup .sp_popup_inner>.ed_canvas_preloader,
.sp_popup_wrapper#multi_image_preview_popup .sp_popup_inner>.ed_canvas_preloader {
    inset: 50px !important;
}

/* .sp_multiimg_preview > .sp_multiimg_preview_thumb > ul > li.active > img{
    box-shadow: 0px 0px 0px 2px var(--main-color);
}
.sp_multiimg_preview > .sp_multiimg_preview_big > img{
    max-width: 100%;
} */

.edp_svg_colors>.ed_property_body {
    max-height: 300px;
    overflow: auto;
}

/* .sp_popup_wrapper[data-desgintype="blocks"] > .sp_popup_inner,
.sp_popup_wrapper[data-desgintype="custom_image"] > .sp_popup_inner{
    max-width: 760px;
} */

/********************************************************************************************* 
new design changes start
*********************************************************************************************/
.sp_body_main .sp_header_wrapper {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 345px;
    background-color: #272b45;
    box-shadow: none;
}

.sp_body_main .sp_content_wrapper {
    margin: 50px 0;
    margin-left: 345px;
    padding: 0 80px;
}

.sp_body_main .sp_page_title {
    margin-bottom: 50px;
}

.sp_body_main .sp_container {
    max-width: 100%;
    padding: 0;
}

.sp_body_main .sp_header_wrapper .sp_header_inner {
    align-items: inherit;
    flex-direction: column;
    height: 100vh;
}

.sp_body_main .sp_logo {
    margin: 40px 0;
    text-align: center;
}

.sp_body_main .sp_logo>a.sp_logo_inner {
    color: #ffffff;
}

.sp_body_main .sp_nav_wrapper {
    flex: 1;
    overflow: auto;
    padding: 0 30px;
}

.sp_body_main .sp_nav_wrapper>ul>li {
    display: block;
    margin: 0;
    margin-bottom: 15px;
}

.sp_body_main .sp_nav_wrapper>ul>li>a {
    padding: 20px 40px;
    color: #bbc2ef;
    border-radius: 10px;
    position: relative;
}

.sp_body_main .sp_nav_wrapper>ul>li>a:hover {
    box-shadow: none;
    color: #ffffff;
}

.sp_body_main .sp_nav_wrapper>ul>li>a.active::before {
    content: "";
    position: absolute;
    top: 10px;
    left: 0;
    bottom: 10px;
    width: 4px;
    border-radius: 0 10px 10px 0;
    background-color: var(--main-color);
}

.sp_body_main .sp_nav_wrapper>ul>li>a.active {
    box-shadow: none;
    background-color: #353b5b;
    color: #ffffff;
}

.sp_body_main .sp_nav_wrapper>ul>li>a svg path {
    fill: #bbc2ef;
}

.sp_body_main .sp_nav_wrapper>ul>li>a:hover svg path,
.sp_body_main .sp_nav_wrapper>ul>li>a.active svg path {
    fill: #ffffff;
}

.sp_body_main .sp_nav_wrapper>ul>li>a>.sp_nav_icon {
    margin-right: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 22px;
    margin-top: -2px;
}

.sp_body_main .sp_search_wrapper>input {
    background-color: #ffffff;
    box-shadow: 0px 10px 34px 0px rgba(0, 0, 0, 0.03);
    border: none;
}

.sp_body_main .sp_search_wrapper>.sp_search_icon {
    background-color: transparent;
}

.sp_body_main .sp_logout {
    display: none;
}

.sp_body_main .sp_header_right {
    background-color: #353b5b;
    border-radius: 10px;
    padding: 10px;
    margin: 0 30px 40px 30px;
    display: flex;
    align-items: center;
}

.sp_body_main .sp_header_right .sp_header_avatar {
    width: 52px;
    height: 52px;
    flex: none;
    margin-right: 20px;
}

.sp_body_main .sp_header_right .sp_avatar_details {
    flex: 1;
}

.sp_body_main .sp_header_right .sp_avatar_details>h3 {
    margin: 0;
    font-size: 16px;
    color: #bbc2ef;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 190px;
}

.sp_body_main .sp_header_right .sp_avatar_details>p {
    margin: 0;
    font-size: 14px;
    color: #6a75bc;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 190px;
}

.sp_body_main .sp_header_avatar>.sp_avatar_initials {
    width: 52px;
    height: 52px;
    border-radius: 10px;
    font-size: 22px;
}

.sp_body_main .sp_header_avatar>.sp_profile_img {
    width: 52px;
    height: 52px;
    border-radius: 10px;
    background-color: var(--main-color);
}

p.sp_attribution {
    clear: both;
    margin: 0;
    font-size: 12px;
    color: #9ea3c3;
    text-align: right;
    margin-top: 4px;
}

p.sp_attribution>a {
    font-weight: 600;
}

/* list view start */
.sp_list_grid_switch {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 1px solid #e9e9f4;
    /* margin-right: 20px; */
    border-radius: 8px;
    background-color: #ffffff;
    position: relative;
    flex: none;
}

.sp_list_grid_switch>svg {
    width: 24px;
    height: auto;
}

.sp_list_grid_switch>svg circle,
.sp_list_grid_switch>svg path {
    fill: var(--main-color);
}

.sp_list_grid_switch>svg.sp_lgs_grid {
    display: none;
}

.sp_list_grid_switch .tooltip-inner {
    min-width: 100px;
}

.listview_uimp .sp_list_grid_switch.sp_uimp_list_grid>svg.sp_lgs_grid,
.listview_mydrive .sp_list_grid_switch.sp_lgs_mydrive>svg.sp_lgs_grid,
.listview_theme .sp_list_grid_switch.sp_lgs_themes>svg.sp_lgs_grid {
    display: block;
}

.listview_uimp .sp_list_grid_switch.sp_uimp_list_grid>svg.sp_lgs_list,
.listview_mydrive .sp_list_grid_switch.sp_lgs_mydrive>svg.sp_lgs_list,
.listview_theme .sp_list_grid_switch.sp_lgs_themes>svg.sp_lgs_list {
    display: none;
}

.listview_mydrive .sp_campaign_list.load_myfolder_body,
.listview_theme .sp_campaign_list.load_themes_list {
    margin: 0;
    grid-template-columns: 100%;
    grid-gap: 0px;
}

.listview_mydrive .sp_campaign_list.load_myfolder_body>.sp_campaign_item,
.listview_theme .sp_campaign_list.load_themes_list>.sp_campaign_item {
    width: 100%;
    padding: 0;
    border-bottom: 1px solid #eaf1f9;
}

.listview_mydrive .sp_campaign_list.load_myfolder_body>.sp_campaign_item>.sp_campaign_inner,
.listview_theme .sp_campaign_list.load_themes_list>.sp_campaign_item>.sp_campaign_inner {
    display: flex;
    align-items: center;
    border-radius: 0px;
}

.listview_mydrive .sp_campaign_list.load_myfolder_body>.sp_campaign_item:hover>.sp_campaign_inner,
.listview_theme .sp_campaign_list.load_themes_list>.sp_campaign_item:hover>.sp_campaign_inner {
    box-shadow: 0px 4px 34px 0px rgb(0, 0, 0, 0.03), -3px 0px 0px var(--main-color);
}

.listview_mydrive .sp_campaign_list.load_myfolder_body>.sp_campaign_item>.sp_campaign_inner>.sp_camp_img,
.listview_theme .sp_campaign_list.load_themes_list>.sp_campaign_item>.sp_campaign_inner>.sp_camp_img {
    position: inherit;
    border: none;
}

.listview_mydrive .sp_campaign_list.load_myfolder_body>.sp_campaign_item>.sp_campaign_inner>.sp_camp_img>img,
.listview_theme .sp_campaign_list.load_themes_list>.sp_campaign_item>.sp_campaign_inner>.sp_camp_img>img {
    width: 70px;
    object-fit: cover;
    height: 60px;
}

.listview_mydrive .sp_campaign_list.load_myfolder_body>.sp_campaign_item>.sp_campaign_inner>.sp_camp_img>svg,
.listview_theme .sp_campaign_list.load_themes_list>.sp_campaign_item>.sp_campaign_inner>.sp_camp_img>svg {
    width: 70px;
    height: 60px;
}

.listview_theme .sp_theme_wrapper_popup[loadfor="admin"] .sp_campaign_list.load_themes_list>.sp_campaign_item>.sp_campaign_inner>.sp_camp_img>svg {
    margin-left: 25px;
}

.listview_mydrive .sp_campaign_list.load_myfolder_body>.sp_campaign_item>.sp_campaign_inner>.sp_camp_detail,
.listview_theme .sp_campaign_list.load_themes_list>.sp_campaign_item>.sp_campaign_inner>.sp_camp_detail {
    padding: 0;
}

.listview_mydrive .sp_campaign_list.load_myfolder_body>.sp_campaign_item>.sp_campaign_inner>.sp_camp_img>.sp_camp_action,
.listview_theme .sp_campaign_list.load_themes_list>.sp_campaign_item>.sp_campaign_inner>.sp_camp_img>.sp_camp_action {
    top: 15px;
    right: 15px;
    z-index: inherit;
}

.listview_mydrive .sp_campaign_list.load_myfolder_body>.sp_campaign_item>.sp_campaign_inner>.sp_camp_img>.sp_camp_overlay,
.listview_theme .sp_campaign_list.load_themes_list>.sp_campaign_item>.sp_campaign_inner>.sp_camp_img>.sp_camp_overlay {
    opacity: 1;
    visibility: inherit;
    border-radius: 5px;
    background-color: transparent;
    width: auto;
    left: auto;
    right: 60px;
    transition: none;
    display: flex;
    align-items: center;
    flex-direction: row;
}

.listview_theme .sp_theme_wrapper_popup[loadfor="dfy"] .sp_campaign_list.load_themes_list>.sp_campaign_item>.sp_campaign_inner>.sp_camp_img>.sp_camp_overlay {
    right: 20px;
}

.listview_theme .sp_theme_wrapper_popup[loadfor="dfy"] .sp_campaign_list.load_themes_list>.sp_campaign_item.sp_padlocked>.sp_campaign_inner>.sp_camp_img>.sp_camp_overlay {
    right: 60px;
}

.listview_mydrive .sp_campaign_list.load_myfolder_body>.sp_campaign_item>.sp_campaign_inner>.sp_camp_img>.sp_camp_action>.sp_camp_action_icon>span,
.listview_theme .sp_campaign_list.load_themes_list>.sp_campaign_item>.sp_campaign_inner>.sp_camp_img>.sp_camp_action>.sp_camp_action_icon>span {
    background-color: #cad5ec !important;
}

.listview_mydrive .sp_campaign_list.load_myfolder_body>.sp_campaign_item>.sp_campaign_inner>.sp_camp_img>.sp_camp_overlay .sp_btn,
.listview_theme .sp_campaign_list.load_themes_list>.sp_campaign_item>.sp_campaign_inner>.sp_camp_img>.sp_camp_overlay .sp_btn {
    opacity: 0;
    visibility: hidden;
    margin: 0;
}

.listview_mydrive .sp_campaign_list.load_myfolder_body>.sp_campaign_item:hover>.sp_campaign_inner>.sp_camp_img>.sp_camp_overlay .sp_btn,
.listview_theme .sp_campaign_list.load_themes_list>.sp_campaign_item:hover>.sp_campaign_inner>.sp_camp_img>.sp_camp_overlay .sp_btn {
    opacity: 1;
    visibility: visible;
}

.listview_theme .sp_theme_wrapper_popup .sp_campaign_list>.sp_campaign_item>.sp_campaign_inner>.sp_camp_detail>h3>.sp_pd_name {
    max-width: 100%;
}

.listview_theme .sp_theme_wrapper_popup .sp_campaign_list>.sp_campaign_item>.sp_campaign_inner>.sp_camp_img>.sp_switch {
    top: 17px;
    left: auto;
    right: 190px;
    opacity: 0;
    visibility: hidden;
}

.listview_theme .sp_theme_wrapper_popup .sp_campaign_list>.sp_campaign_item>.sp_campaign_inner>.sp_camp_img>.sp_checkbox {
    top: 20px;
    left: 15px;
}

.listview_theme .sp_theme_wrapper_popup .sp_campaign_list>.sp_campaign_item:hover>.sp_campaign_inner>.sp_camp_img>.sp_switch {
    opacity: 1;
    visibility: visible;
}

.sp_campaign_list.load_myfolder_body>.sp_campaign_item>.sp_campaign_inner>.sp_camp_img>svg {
    width: 100%;
    height: auto;
    vertical-align: middle;
}

.sp_svg_main_color_path {
    fill: var(--main-color);
}

/* list view end */

/* drive folder share start */
.sp_shared_folder_user_list_wrapper {
    margin-bottom: 30px;
}

.sp_shared_folder_user_list_wrapper>h3 {
    margin: 0;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 700;
}

.sp_shared_folder_user_list_wrapper>.sp_sfu_list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.sp_shared_folder_user_list_wrapper>.sp_sfu_list>.sp_sfu_item>.sp_sfu_item_inner {
    width: 34px;
    height: 34px;
}

.sp_shared_folder_user_list_wrapper>.sp_sfu_list>.sp_sfu_item>.sp_sfu_item_inner>.sp_sfu_image {
    position: absolute;
    top: 0;
    left: 0px;
    width: 34px;
    height: 34px;
    border-radius: 34px;
    object-fit: cover;
    background-color: #ffffff;
}

.sp_shared_folder_user_list_wrapper>.sp_sfu_list>.sp_sfu_item>.sp_sfu_item_inner>.sp_sfu_initials {
    width: 34px;
    height: 34px;
    border-radius: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--main-color);
    color: #ffffff;
    text-transform: uppercase;
    padding-top: 3px;
    flex: none;
}

.sp_sfu_item.sp_custom_tooltip_wrapper>.sp_custom_tooltip_inner>h3 {
    white-space: nowrap;
    text-align: center;
    margin: 0;
    font-size: 12px;
    font-weight: 400;
}

/* drive folder share end */

/********************************************************************************************* 
new design changes end
*********************************************************************************************/





.sp_info_tooltip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    margin-left: 6px;
    width: 15px;
    height: 15px;
    border-radius: 20px;
    border: 1px solid var(--main-color);
    cursor: pointer;
    transform: translateY(2px);
}

.sp_info_tooltip>svg {
    width: 9px;
    height: 9px;
}

.sp_info_tooltip>svg path {
    fill: var(--main-color);
}

.sp_info_tooltip~.tooltip>.tooltip-inner {
    text-align: left;
}

.sp_template_heading.sp_settingpage_heading .tooltip-inner {
    min-width: 160px;
}

.sp_content_wrapper>.sp_container:first-child,
.sp_calendar_container,
.sp_profile_container,
.sp_setting_container,
.sp_download_history_container,
.sp_checkout_page_wrapper,
.sp_package_container {
    margin: 50px auto;
}


.sp_edit_layer_option_wrapper {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translateX(50%);
    z-index: 11;
}

.sp_edit_layer_option_wrapper>.sp_elp_inner {
    background-color: var(--main-color);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 13px 50px;
    border-radius: 10px;
}

.sp_editor_info {
    max-width: 290px;
    width: 100%;
    background-color: rgba(var(--main-color-rgb), 0.12);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 30px auto;
    min-height: 40px;
    color: var(--main-color);
}

.sp_editor_info>svg {
    margin-right: 10px;
}

.sp_editor_info>svg path {
    fill: var(--main-color);
    stroke: var(--main-color);
}

.sp_mockup_editor .sp_editor_info {
    margin-bottom: 10px;
}

.sp_image_preview_wrapper {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 11;
    width: 32%;
    /* height: 300px; */
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    transform: translateY(100%);
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

.show_preview .sp_image_preview_wrapper {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    transform: translateY(0);
}

.show_preview .sp_editor_preview_wrapper {
    /* padding-right: 300px; */
}

.show_preview .sp_editor_sidebar {
    left: -450px;
}

.show_preview .sp_editor_preview_wrapper {
    padding-left: 20px;
}

.show_preview .sp_editor_sidebar>.sp_editor_sidebar_toggle>svg {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.sp_image_preview_wrapper>.sp_ipw_inner {
    padding: 30px;
    background-color: #ffffff;
    box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.03);
    border-radius: 5px;
}

.sp_image_preview_wrapper>.sp_ipw_inner>img {
    width: 100%;
    max-height: 500px;
    object-fit: contain;
}

.sp_image_preview_wrapper .sp_ipw_loader {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.8);
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

.sp_image_preview_wrapper.loading .sp_ipw_loader {
    opacity: 1;
    visibility: visible;
}

.sp_image_preview_wrapper .sp_ipw_loader .sp_logo {
    -webkit-animation: preloader_anim 1.2s linear infinite;
    -moz-animation: preloader_anim 1.2s linear infinite;
    animation: preloader_anim 1.2s linear infinite;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    width: auto;
}

.sp_image_preview_wrapper .sp_ipw_loader .sp_logo>.sp_logo_inner>span,
.sp_image_preview_wrapper .sp_ipw_loader .sp_logo {
    margin-right: 0;
}

.sp_image_preview_wrapper .sp_ipw_close {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 20px;
    height: 20px;
    border-radius: 20px;
    background-color: #F44336;
    color: transparent;
    overflow: hidden;
    z-index: 25;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.sp_image_preview_wrapper .sp_ipw_close::after,
.sp_image_preview_wrapper .sp_ipw_close::before {
    content: "";
    width: 10px;
    height: 2px;
    background-color: #ffffff;
    position: absolute;
    transform: rotate(45deg);
}

.sp_image_preview_wrapper .sp_ipw_close::before {
    transform: rotate(-45deg);
}

.sp_export_options .sp_dropdown_wrapper {
    width: 260px;
}

.sp_export_options .sp_radio_list {
    margin-bottom: 15px;
    border: 1px solid #e2e2e2;
    padding: 12px 12px 0px;
    border-radius: 5px;
}

.sp_export_options .sp_radio_list>.sp_radio {
    margin-bottom: 10px;
}

.sp_export_options .sp_dropdown_inner {
    padding: 20px;
}

.sp_export_options .sp_dropdown_inner p {
    font-size: 14px;
    margin: 0px;
    margin-bottom: 5px;
}

.sp_export_options .sp_checkbox {
    margin-bottom: 10px;
}

.sp_export_options .sp_checkbox>label {
    font-size: 14px;
}

.sp_export_options .sp_checkbox>label::after {
    top: 6px;
    left: 4px;
    width: 10px;
    height: 5px;
    border-left: 2px solid var(--main-color);
    border-bottom: 2px solid var(--main-color);
}

.ieditor_popup_open .sp_export_options {
    display: none;
}

.sp_export_layer {
    display: none;
}

.ieditor_popup_open .sp_export_layer {
    display: block;
}

.ieditor_popup_open.sp_force_show_export .sp_export_options {
    display: inline-block;
}

.sp_btn.sp_btn_link.redirect_to_temp,
.sp_btn.sp_btn_link.redirect_to_dash {
    padding: 0 10px;
    min-width: 90px;
}

.ieditor_popup_open .redirect_to_dash {
    display: none;
}

.ieditor_popup_open.show_exit_button .redirect_to_dash {
    display: inline-block;
}

.sp_inline_loader {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 15px auto;
    color: #9ba1c9;
    text-transform: capitalize;
}

.sp_inline_loader::before {
    content: '';
    width: 20px;
    height: 20px;
    background-image: url('../images/inline_loader.svg');
    display: inline-block;
    background-size: 200%;
    background-position: center;
    vertical-align: middle;
    margin-right: 10px;
}

.sp_admin_content_wrapper {
    margin-top: 40px;
    margin-bottom: 50px;
}

.ed_angle_list {
    margin-bottom: 10px;
}

.ed_angle_list>.ed_angle_item {
    display: inline-block;
    padding: 5px 15px 4px;
    border: 1px solid;
    border-radius: 50px;
    font-size: 14px;
    color: #8e96ce;
    font-weight: 500;
    cursor: pointer;
}

.ed_angle_list>.ed_angle_item:hover {
    color: var(--main-color);
}

#add_to_drive .sp_search_wrapper {
    margin: 0 auto;
    margin-bottom: 20px;
}

#add_to_drive .ed_category_folder ul {
    max-height: 370px;
    overflow: auto;
    padding-bottom: 10px;
}

#add_to_drive .ed_category_folder ul>li {
    text-align: center;
    width: 118px;
    background-color: transparent;
    padding: 0 7.5px;
    margin: 0;
    margin-bottom: 15px;
    cursor: pointer;
    position: relative;
}

#add_to_drive .ed_category_folder ul>li>span.ed_folder_icon {
    background-color: rgba(var(--main-color-rgb), 0.02);
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(var(--main-color-rgb), 0.12);
    border-radius: 5px 5px 0 0;
}

#add_to_drive .ed_category_folder ul>li>span.ed_folder_icon>svg {
    width: 30px;
    height: auto;
}

#add_to_drive .ed_category_folder ul>li>span.ed_folder_icon>svg>path {
    fill: var(--color-body);
}

#add_to_drive .ed_category_folder ul>li:hover>span.ed_folder_icon {
    border-color: var(--main-color);
}

#add_to_drive .ed_category_folder ul>li:hover>span.ed_folder_icon>svg path {
    fill: var(--main-color);
}

#add_to_drive .ed_category_folder ul>li.active>span.ed_folder_icon {
    border-color: var(--main-color);
}

#add_to_drive .ed_category_folder ul>li.active>span.ed_folder_icon>svg path {
    fill: var(--main-color);
}

#add_to_drive .ed_category_folder ul>li.active::before {
    content: "";
    position: absolute;
    top: 8px;
    right: 14px;
    width: 15px;
    height: 15px;
    border-radius: 15px;
    background-color: #8bc34a;
}

#add_to_drive .ed_category_folder ul>a {
    margin-left: 6px;
}

#add_to_drive .ed_category_folder ul>li.active>span.ed_folder_icon::after,
#add_to_drive .ed_category_folder ul>li.active>span.ed_folder_icon::before {
    content: "";
    width: 8px;
    height: 2px;
    position: absolute;
    top: 14px;
    right: 16px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

#add_to_drive .ed_category_folder ul>li.active>span.ed_folder_icon::before {
    width: 9px;
    -webkit-transform: rotate(130deg);
    -moz-transform: rotate(130deg);
    transform: rotate(130deg);
    right: 17px;
    top: 12px;
    height: 5px;
    border-top: 2px solid;
    border-right: 2px solid;
    color: #ffffff;
}

#add_to_drive .ed_category_folder ul>li>span.ed_folder_name {
    font-size: 14px;
    display: block;
    background-color: rgba(var(--main-color-rgb), 0.12);
    padding: 5px;
    border-radius: 0 0 5px 5px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    color: var(--main-color);
}

#add_to_drive .ed_category_folder ul>li:hover>span.ed_folder_name,
#add_to_drive .ed_category_folder ul>li.active>span.ed_folder_name {
    color: #ffffff;
    background-color: var(--main-color);
}

.sp_campaign_list>.sp_campaign_item>.sp_campaign_inner>.sp_camp_img {
    border-bottom: 1px solid #f1f1f1;
}

/* .sp_campaign_list.load_myfolder_body{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(18%, 1fr));
} */
.sp_campaign_list.load_myfolder_body>.sp_campaign_item {
    width: 100%;
}

.sp_campaign_list.load_myfolder_body>.sp_campaign_item>.sp_campaign_inner>.sp_camp_img>img {
    background-color: #ffffff;

}

.sp_campaign_list.load_myfolder_body>.sp_campaign_item>.sp_campaign_inner>.sp_camp_img>.sp_camp_action>.sp_camp_action_icon>span,
.sp_campaign_list.load_myfolder_body>.sp_campaign_item>.sp_campaign_inner>.sp_camp_img>.sp_camp_action>.sp_camp_action_icon>span:first-child::after {
    background-color: #d6d6d6;
}

.sp_campaign_list.load_myfolder_body>.sp_campaign_item:hover>.sp_campaign_inner>.sp_camp_img>.sp_camp_action>.sp_camp_action_icon>span,
.sp_campaign_list.load_myfolder_body>.sp_campaign_item:hover>.sp_campaign_inner>.sp_camp_img>.sp_camp_action>.sp_camp_action_icon>span:first-child::after {
    background-color: #ffffff;
}

/* cutout tab start */
#bg_library_tab>.ed_property_widget>.ed_element_shape_list,
#library_tab_main>.ed_property_widget>.ed_element_shape_list,
#cutouts_tab_main>.ed_property_widget>.ed_element_shape_list {
    position: relative;
    padding-top: 25px;
}

#bg_library_tab .sp_search_wrapper,
#library_tab_main .sp_search_wrapper,
#cutouts_tab_main .sp_search_wrapper {
    margin-bottom: 20px;
}

#bg_library_tab .sp_search_wrapper>input,
#library_tab_main .sp_search_wrapper>input,
#cutouts_tab_main .sp_search_wrapper>input {
    background-color: transparent;
    border-color: #555e8d;
    border-radius: 8px;
    color: #dadada;
}

#bg_library_tab .sp_search_wrapper>.sp_search_icon,
#library_tab_main .sp_search_wrapper>.sp_search_icon,
#cutouts_tab_main .sp_search_wrapper>.sp_search_icon {
    background-color: rgba(52, 106, 253, 0.102);
}

#bg_library_tab .sp_back_arrow,
#library_tab_main .sp_back_arrow,
#cutouts_tab_main .sp_back_arrow {
    cursor: pointer;
    width: 20px;
    height: 20px;
    position: absolute;
    left: 0px;
    top: -10px;
    display: flex;
    align-items: center;
    justify-content: center;
    display: none;
    z-index: 1;
}

#bg_library_tab .sp_back_arrow>svg,
#library_tab_main .sp_back_arrow>svg,
#cutouts_tab_main .sp_back_arrow>svg {
    width: 16px;
    height: 16px;
}

#bg_library_tab .sp_back_arrow>svg path,
#library_tab_main .sp_back_arrow>svg path,
#cutouts_tab_main .sp_back_arrow>svg path {
    fill: #ffffff;
}

/* cutout tab end */

/* image filter start */
.ed_filter_list>ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    grid-gap: 10px;
}

.ed_filter_list>ul>li {
    position: relative;
}

.ed_filter_list .ed_filter_item>input {
    position: absolute;
    left: -999999px;
    opacity: 0;
}

.ed_filter_list .ed_filter_item>label {
    width: 100%;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border: 1px solid #555e8d;
    border-radius: 5px;
    color: #dadada;
    font-weight: 400;
    cursor: pointer;
    font-size: 12px;
    margin: 0;
}

.ed_filter_list .ed_filter_item>label>img {
    max-width: 40px;
    margin-bottom: 5px;
}

.ed_filter_list .ed_filter_item>label[for="filter_Grayscale"]>img {
    filter: grayscale(1);
}

.ed_filter_list .ed_filter_item>label[for="filter_Sepia"]>img {
    filter: sepia(1);
}

.ed_filter_list .ed_filter_item>label[for="filter_Sepia2"]>img {
    filter: sepia(1) hue-rotate(30deg) saturate(2);
}

.ed_filter_list .ed_filter_item>label[for="filter_Invert"]>img {
    filter: invert(1);
}


.ed_filter_list li.active .ed_filter_item>label {
    border-color: var(--main-color);
    background-color: var(--main-color);
    color: #ffffff;
}

.ed_filter_overlay_toggle {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    border-radius: 5px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    display: none;
}

.active>.ed_filter_overlay_toggle {
    display: flex;
}

.ed_filter_overlay_toggle:hover {
    background-color: var(--main-color);
}

.ed_filter_overlay_toggle>svg {
    width: 14px;
    height: auto;
    fill: #ffffff;
}

.ed_filter_overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 5px;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 15px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
}

.overlay_open .ed_filter_overlay {
    opacity: 1;
    visibility: visible;
}

.ed_filter_overlay input {
    width: 100%;
}

.ed_filter_overlay input[type="number"] {
    background-color: transparent;
    border: 1px solid #ffffff;
    text-align: center;
    color: #fff;
    width: 100%;
    height: 26px;
    border-radius: 5px;
    margin-bottom: 10px;
    font-size: 14px;
}

/* image filter end */


.sp_template_list.template_rename>.sp_template_item.sp_temp_mockup>.sp_template_item_inner>.sp_template_details h3 {
    margin: 0;
    color: var(--color-body);
    font-size: 14px;
    font-weight: normal;
}

.sp_template_list.template_rename>.sp_template_item>.sp_template_item_inner:hover {
    -webkit-transform: none;
    -moz-transform: none;
    transform: none;
    box-shadow: 0px 8px 34px 0px rgb(0 0 0 / 6%);
}

.sp_template_list.template_rename>.sp_template_item.sp_temp_mockup>.sp_template_item_inner>.sp_template_details h3.sp_inline_editor>.sp_pd_icon>span>svg {
    width: 14px;
    height: 14px;
}

.sp_watermark_overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9;
    background-image: url('../images/watermark.png');
    background-size: 190px;
    opacity: 0.2;
    background-position: center center;
    pointer-events: none;
    display: none;
}

.sp_social_camp_sidebar {
    display: none;
}


body.setstemp_popup_open,
body.bundletemp_popup_open,
body.theme_popup_open {
    overflow: hidden;
}


.sp_campaign_list.load_bundletemp_body>.sp_campaign_item>.sp_campaign_inner>.sp_camp_img>.sp_camp_overlay {
    flex-direction: column;
}

.sp_campaign_list.load_bundletemp_body>.sp_campaign_item>.sp_campaign_inner>.sp_camp_img>.sp_camp_overlay>.sp_btn:first-child {
    margin-bottom: 15px;
    background-color: #ffffff;
    color: var(--main-color);
}

.ui-helper-hidden-accessible>div {
    display: none !important;
}

.sp_package_size_box>p {
    font-size: 14px;
}

#custom_branding_tab .sp_upload_image_box_overlay>img {
    opacity: 1;
}

#custom_branding_tab .ed_colorPicker_wrapper {
    border-color: #e9e9f4;
    background-color: #fcfcff;
}

#custom_branding_tab .ed_colorPicker_wrapper>input {
    color: var(--color-heading);
    font-weight: 600;
}

body.modal-open {
    overflow: hidden;
}

.sp_url_setup_wrapper {
    display: flex;
    align-items: center;
    height: 70px;
    border: 1px solid #e9e9f4;
    border-radius: 10px;
    position: relative;
}

.sp_url_setup_wrapper>.sp_url_fixed {
    height: 100%;
    display: flex;
    align-items: center;
    background-color: rgba(var(--main-color-rgb), 0.1);
    padding: 0 20px;
    border-radius: 10px 0 0 10px;
    flex: none;
    font-size: 16px;
    font-weight: 500;
    color: var(--main-color);
    flex: 1;
}

#invite_team_member_popup .sp_url_setup_wrapper>.sp_url_fixed {
    background-color: transparent;
}

#copy_image_url_popup .sp_url_setup_wrapper>.sp_url_fixed>span {
    display: block;
    width: calc(100% - 40px);
    word-break: break-word;
}

.sp_url_setup_wrapper>.sp_url_editable {
    border: none;
    height: 100%;
    width: auto;
    flex: 1;
    outline: none;
    background-color: transparent;
    border-radius: 0 10px 10px 0;
    padding: 0 60px 0 20px;
    font-size: 16px;
    font-weight: 500;
}

.sp_url_setup_wrapper .sp_copy_url {
    position: relative;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex: none;
    margin-right: 5px;
}

.sp_url_setup_wrapper .sp_copy_url>svg {
    width: 22px;
    height: 20px;
}

.sp_url_setup_wrapper .sp_share_permission_wrapper .sp_copy_url>svg {
    height: 18px;
}

.sp_url_setup_wrapper .sp_copy_url>svg path {
    fill: var(--main-color);
}

.sp_url_setup_wrapper .tooltip-inner {
    min-width: 90px;
}

.sp_share_permission_wrapper {
    width: 40px;
    height: 40px;
    margin-right: 5px;
    position: relative;
}
.sp_share_permission_wrapper ~ .tooltip{
    display: none !important;
}
.sp_share_permission_wrapper:hover ~ .tooltip{
    display: block !important;
}
.sp_share_permission_wrapper>.sp_copy_url:after {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 6px;
    height: 6px;
    border-left: 2px solid #707B91;
    border-bottom: 2px solid #707B91;
    transform: rotate(-45deg);
    margin-left: 5px;
    margin-top: -2px;
}

.sp_share_permission_wrapper>.sp_sp_dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    background-color: #ffffff;
    /* border: 1px solid #E9E9F4; */
    border-radius: 6px;
    padding: 15px;
    z-index: 1;
    width: 160px;
    opacity: 0;
    visibility: hidden;
    box-shadow: 0 3px 6px rgb(0 0 0 / 16%), 0 3px 6px rgb(0 0 0 / 23%);
    -webkit-transition: all 0.2s cubic-bezier(0.71, -0.11, 0.25, 0.88);
    -moz-transition: all 0.2s cubic-bezier(0.71, -0.11, 0.25, 0.88);
    transition: all 0.2s cubic-bezier(0.71, -0.11, 0.25, 0.88);
    -webkit-transform: translateY(-10px);
    -moz-transform: translateY(-10px);
    transform: translateY(-10px);
}

.sp_share_permission_wrapper.open>.sp_sp_dropdown {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    transform: translateY(0px);
}

.sp_share_permission_wrapper>.sp_sp_dropdown>ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sp_share_permission_wrapper>.sp_sp_dropdown>ul>li {
    padding: 10px;
    cursor: pointer;
    border-radius: 6px;
    margin-bottom: 5px;
}

.sp_share_permission_wrapper>.sp_sp_dropdown>ul>li:last-child {
    margin-bottom: 0px;
}

.sp_share_permission_wrapper>.sp_sp_dropdown>ul>li.active {
    color: var(--main-color);
    background-color: rgba(var(--main-color-rgb), 0.05);
}

.sp_share_permission_wrapper>.sp_sp_dropdown>ul>li:hover {
    color: var(--main-color);
}

.sp_share_permission_wrapper>.sp_sp_dropdown>ul>li>svg {
    width: 18px;
    height: 16px;
    margin-right: 2px;
    vertical-align: middle;
    margin-top: -5px;
    pointer-events: none;
}

.sp_share_permission_wrapper>.sp_sp_dropdown>ul>li>svg path {
    fill: var(--color-body);
}

.sp_share_permission_wrapper>.sp_sp_dropdown>ul>li:hover>svg path,
.sp_share_permission_wrapper>.sp_sp_dropdown>ul>li.active>svg path {
    fill: var(--main-color);
}

.sp_share_permission_wrapper>.sp_sp_dropdown>ul>li>span {
    pointer-events: none;
}

.sp_share_permission_wrapper>.sp_copy_url>svg.svg_sp_edit {
    display: none;
}

.sp_social_clkshre_wrapper.clone_edit_only .sp_share_permission_wrapper>.sp_copy_url>svg.svg_sp_edit {
    display: block;
}

.sp_social_clkshre_wrapper.clone_edit_only .sp_share_permission_wrapper>.sp_copy_url>svg.svg_sp_view {
    display: none;
}

.sp_share_permission_wrapper~.tooltip>.tooltip-inner {
    min-width: 115px;
}

.sp_share_permission_wrapper.open~.tooltip {
    display: none !important;
}

.sp_popup_tab_content#custom_branding_tab>h5,
.sp_input_wrapper>label .sp_info_tooltip {
    transform: translateY(-1px);
}

.sp_btn.disconnect_account {
    background-color: #ff5a5a;
}

.sp_btn.sp_color_generate {
    height: 30px;
    border: 1px solid #8e96ce;
    background-color: transparent;
    line-height: 28px;
    font-size: 14px;
    font-weight: 400;
    border-radius: 6px;
    color: #8e96ce;
}

.sp_btn.sp_color_generate:hover {
    color: #ffffff;
    background-color: var(--main-color);
    border-color: var(--main-color);
}

.sp_color_palette_list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(30px, 1fr));
    grid-gap: 10px;
    margin-bottom: 10px;
}

.sp_color_palette_list>.sp_color_palette_item {
    height: 30px;
    border-radius: 5px;
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sp_color_palette_list>.sp_color_palette_item>svg {
    width: 16px;
    height: 16px;
    fill: #ffffff;
    opacity: 0;
    visibility: hidden;
}

.sp_color_palette_list>.sp_color_palette_item:hover>svg {
    opacity: 1;
    visibility: visible;
}

/* .sp_image_editor_wrapper[data-type="infographics"] #campaign_list_tab .sp_es_body .edb_tab,
.sp_image_editor_wrapper[data-type="marketing"] #campaign_list_tab .sp_es_body .edb_tab,
.sp_image_editor_wrapper[data-type="logo"] #campaign_list_tab .sp_es_body .edb_tab,
.sp_image_editor_wrapper[data-type="thumbnail"] #campaign_list_tab .sp_es_body .edb_tab,
.sp_image_editor_wrapper[data-type="package"] #campaign_list_tab .sp_es_body .edb_tab,
.sp_image_editor_wrapper[data-type="blocks"] #campaign_list_tab .sp_es_body .edb_tab,
.sp_image_editor_wrapper[data-type="illustration"] #campaign_list_tab .sp_es_body .edb_tab,
.sp_image_editor_wrapper[data-type="annotation"] #campaign_list_tab .sp_es_body .edb_tab,
.sp_image_editor_wrapper[data-type="custom_image"] #campaign_list_tab .sp_es_body .edb_tab,
.sp_image_editor_wrapper[data-type="dbundle"] #campaign_list_tab .sp_es_body .edb_tab,
.sp_image_editor_wrapper[data-type="cbundle"] #campaign_list_tab .sp_es_body .edb_tab,
.sp_image_editor_wrapper[data-type="social"] #campaign_list_tab .sp_es_body .edb_tab{
    display: none;
} */
#mydesign_view_container {
    display: none;
}

.sp_popup_wrapper#login_history_popup>.sp_popup_inner {
    max-width: 750px;
}

.sp_ip_list {
    border: 1px solid #e9e9f4;
}

.sp_ip_list .login_history_list_body {
    overflow: auto;
    max-height: 400px;
}

.sp_ip_list .sp_ip_tr {
    display: grid;
    grid-template-columns: 25% 20% 20% 35%;
    grid-row-gap: 5px;
    border-bottom: 1px solid #e9e9f4;
}

.sp_ip_list .sp_ip_tr.sp_ip_head {
    background-color: #f5f7ff;
    border-bottom: none;
    position: sticky;
    top: 0;
}

.sp_ip_list .sp_ip_tr.sp_ip_head>.sp_ip_td {
    font-weight: 600;
}

.sp_ip_list .sp_ip_tr>.sp_ip_td {
    padding: 10px 20px;
    word-break: break-word;
}

.sp_ip_list .sp_ip_tr:last-child {
    border-bottom: none;
}

.sp_ip_no_record {
    padding: 10px;
    text-align: center;
    display: none;
}

.sp_popup_filter {
    margin-bottom: 15px;
}

.sp_popup_filter>label>input {
    border: 1px solid #e9e9f4;
    padding: 5px;
    border-radius: 5px;
    color: var(--color-heading);
    outline: none;
}

.sp_popup_filter>label>input:focus {
    border-color: var(--main-color);
}

.sp_popup_filter>label>.sp_btn {
    height: 32px;
    line-height: 32px;
    border-radius: 4px;
    min-width: 80px;
    padding: 0;
    margin-left: 10px;
    vertical-align: middle;
    font-size: 14px;
}

/* social share popup start */
.sp_popup_wrapper#click_share_popup>.sp_popup_inner {
    max-width: 960px;
}

.sp_popup_wrapper#click_share_popup>.sp_popup_inner>.sp_popup_body>.sp_input_wrapper {
    margin-bottom: 30px;
}

.sp_popup_wrapper#click_share_popup>.sp_popup_inner>.sp_popup_body>.sp_input_wrapper:nth-last-child(2) {
    margin-bottom: 0px;
}

.sp_social_clkshre_wrapper {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.sp_social_clkshre_wrapper>.sp_url_setup_wrapper {
    flex: 1;
    border-radius: 8px 0 0 8px;
    border-right: none;
}

.sp_social_clkshre_wrapper>.sp_url_setup_wrapper>.sp_url_fixed {
    font-size: 14px;
    font-weight: 600;
}

.sp_social_clkshre_wrapper>.sp_clkshre_views {
    flex: none;
    width: 135px;
}

.sp_social_clkshre_wrapper.sp_hide_share_views>.sp_url_setup_wrapper {
    border-radius: 8px;
    border-right: 1px solid #e9e9f4;
}

.sp_social_clkshre_wrapper.sp_hide_share_views>.sp_clkshre_views {
    display: none;
}

.sp_visitor_count_box {
    display: flex;
    height: 70px;
    align-items: center;
    justify-content: center;
    border: 1px solid #e9e9f4;
    border-radius: 0 8px 8px 0;
    gap: 10px;
}

.sp_visitor_count_box>span {
    font-size: 16px;
    color: var(--color-heading);
    font-weight: 600;
}

.sp_social_app_list {
    margin-bottom: 20px;
}

.sp_social_app_list>ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    grid-gap: 20px;
}

.sp_social_app_list>ul>li>a {
    height: 100px;
    border-radius: 5px;
    border: 1px solid #E9E9F4;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    cursor: pointer;
    color: inherit;
    position: relative;
}

.sp_social_app_list>ul>li>a:after {
    content: "";
    width: 11px;
    height: 11px;
    border-radius: 2px 0;
    transform: rotate(45deg) scale(1.0);
    border-bottom: 1px solid var(--main-color);
    border-right: 1px solid var(--main-color);
    position: absolute;
    bottom: -6px;
    background-color: #ffffff;
    left: calc(50% - 5.5px);
    display: none;
    flex: none;
}

.sp_social_app_list>ul>li.active>a:after {
    display: block;
}

.sp_social_app_list>ul>li>a>img {
    pointer-events: none;
    width: 24px;
}

.sp_social_app_list>ul>li>a>p {
    margin: 0;
    pointer-events: none;
}

.sp_social_app_list>ul>li.active>a,
.sp_social_app_list>ul>li>a:hover {
    color: var(--main-color);
    border-color: var(--main-color);
}

.cal_post_editor_edit .sp_social_app_list>ul>li {
    pointer-events: none;
}

.cal_post_editor_edit .sp_social_app_list>ul>li.active {
    pointer-events: inherit;
}

.sp_socialapp_tab_content {
    display: none;
}

.sp_socialapp_tab_content.active {
    display: block;
}

.sp_social_publish_button {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sp_social_publish_button .sp_btn {
    border-radius: 8px;
    font-size: 14px;
    min-width: 145px;
}


.sp_social_cusdd_toggle {
    height: 56px;
    border: 1px solid #e9e9f4;
    border-radius: 10px;
    display: flex;
    align-items: center;
    padding: 0 40px 0 15px;
    cursor: pointer;
    position: relative;
    -webkit-transition: all 0.2s cubic-bezier(0.71, -0.11, 0.25, 0.88);
    -moz-transition: all 0.2s cubic-bezier(0.71, -0.11, 0.25, 0.88);
    transition: all 0.2s cubic-bezier(0.71, -0.11, 0.25, 0.88);
}

.sp_social_cusdd_toggle:after {
    content: "";
    display: inline-block;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid #a8aec0;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    position: absolute;
    right: 18px;
    top: calc(50% - 2px);
}

.sp_social_custom_dd_wrapper.open .sp_social_cusdd_toggle:after {
    -webkit-transform: rotateX(180deg);
    -moz-transform: rotateX(180deg);
    transform: rotateX(180deg);
}

.sp_social_cusdd_toggle>.sp_social_cusdd_value {
    display: grid;
    align-items: center;
    flex: 1;
    grid-template-columns: 40px auto;
}

.sp_social_custom_dd_wrapper .sp_social_dd_initial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
    vertical-align: middle;
    width: 32px;
    height: 32px;
    border-radius: 50px;
    color: transparent;
    pointer-events: none;
    font-size: 12px;
    font-weight: 600;
    position: relative;
    background-size: contain;
    background-repeat: no-repeat;
}

.sp_social_custom_dd_wrapper .sp_social_dd_initial:before {
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    width: 32px;
    height: 32px;
    background-image: url('../images/icons/social_facebook.svg');
    background-size: 20px;
    background-color: white;
    border-radius: 50px;
    background-repeat: no-repeat;
    background-position: center;
    box-shadow: 0 1px 3px rgb(0 0 0 / 12%), 0 1px 2px rgb(0 0 0 / 24%);
}

.sp_social_custom_dd_wrapper .linkedin .sp_social_dd_initial:before {
    background-image: url('../images/icons/social_linkedin.svg');
}

.sp_social_custom_dd_wrapper .twitter .sp_social_dd_initial:before {
    background-image: url('../images/icons/social_twitter.svg');
}

.sp_social_custom_dd_wrapper .pinterest .sp_social_dd_initial:before {
    background-image: url('../images/icons/social_pinterest.svg');
}

.sp_social_custom_dd_wrapper .instagram .sp_social_dd_initial:before {
    background-image: url('../images/icons/social_instagram.svg');
}

.sp_social_custom_dd_wrapper .facebook .sp_social_dd_initial.has_cal_image:before {
    display: none;
}

.sp_social_custom_dd_wrapper .linkedin .sp_social_dd_initial.has_cal_image:before {
    display: none;
}

.sp_social_custom_dd_wrapper .twitter .sp_social_dd_initial.has_cal_image:before {
    display: none;
}

.sp_social_custom_dd_wrapper .pinterest .sp_social_dd_initial.has_cal_image:before {
    display: none;
}

.sp_social_custom_dd_wrapper .instagram .sp_social_dd_initial.has_cal_image:before {
    display: none;
}

.sp_social_custom_dd_wrapper .sp_social_dd_initial.has_cal_image {
    box-shadow: 0 1px 3px rgb(0 0 0 / 12%), 0 1px 2px rgb(0 0 0 / 24%);
}

.sp_social_custom_dd_wrapper .sp_social_dd_text {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    pointer-events: none;
}

.sp_social_cusdd_dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1;
    background-color: #ffffff;
    border: 1px solid #e9e9f4;
    border-radius: 0 0 10px 10px;
    max-height: 260px;
    overflow: auto;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.2s cubic-bezier(0.71, -0.11, 0.25, 0.88);
    -moz-transition: all 0.2s cubic-bezier(0.71, -0.11, 0.25, 0.88);
    transition: all 0.2s cubic-bezier(0.71, -0.11, 0.25, 0.88);
    -webkit-transform: translateY(-10px);
    -moz-transform: translateY(-10px);
    transform: translateY(-10px);
}

.sp_social_cusdd_dropdown>ul {
    list-style: none;
    padding: 0;
    margin: 0;
    padding: 10px;
}

.sp_social_cusdd_dropdown>ul>li {
    display: block;
}

.sp_social_cusdd_dropdown>ul>li>a {
    color: inherit;
    padding: 8px 10px;
    border-radius: 5px;
    display: grid;
    align-items: center;
    grid-template-columns: 40px auto;
}

.sp_social_cusdd_dropdown>ul>li>a:hover {
    color: var(--main-color);
    background-color: rgba(var(--main-color-rgb), 0.05);
}

/* .sp_social_cusdd_dropdown > ul > li > a:hover .sp_social_dd_initial{
    background-color: var(--main-color);
    color: #ffffff;
} */
.sp_social_custom_dd_wrapper.open .sp_social_cusdd_dropdown {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateY(-1px);
    -moz-transform: translateY(-1px);
    transform: translateY(-1px);
    box-shadow: 0 3px 6px rgb(0 0 0 / 16%), 0 5px 6px rgb(0 0 0 / 23%);
    border-color: transparent;
    border-top-color: #e9e9f4;
}

.sp_social_custom_dd_wrapper.open .sp_social_cusdd_toggle {
    border-radius: 10px 10px 0 0;
    box-shadow: 0 3px 6px rgb(0 0 0 / 16%), 0 3px 6px rgb(0 0 0 / 23%);
    border-color: transparent;
}

.sp_social_no_dd .sp_social_cusdd_toggle {
    background-color: rgba(var(--main-color-rgb), 0.04);
    border-color: rgba(var(--main-color-rgb), 0.20);
    pointer-events: none;
}

.sp_social_no_dd .sp_social_cusdd_toggle:after {
    display: none;
}

.sp_social_no_dd .sp_social_cusdd_dropdown {
    display: none !important;
}

.sp_popup_wrapper#click_share_popup .sp_input_wrapper textarea.sp_input {
    font-size: 14px;
}

.sp_popup_wrapper#click_share_popup .sp_input_wrapper input.sp_input {
    font-size: 14px;
    padding-top: 0px;
}

.sp_or_divider {
    margin: 20px auto;
    text-align: center;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.sp_or_divider:before,
.sp_or_divider:after {
    content: "";
    height: 1px;
    background-color: #f3f0f0;
    width: 60px;
}

.sp_or_divider:before {
    margin-right: 15px;
}

.sp_or_divider::after {
    margin-left: 15px;
}

.sp_social_schedule_date_wrapper {
    height: 70px;
    border: 1px solid rgba(var(--main-color-rgb), 0.5);
    background-color: rgba(var(--main-color-rgb), 0.1);
    color: var(--main-color);
    display: flex;
    align-items: center;
    padding: 0 25px;
    position: relative;
    margin-bottom: 20px;
    border-radius: 10px;
}

.sp_social_schedule_date_wrapper>.sp_sdb_date_overlay {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 50px;
    cursor: pointer;
    border-radius: 10px;
}

.sp_social_schedule_date_wrapper>span {
    font-weight: 700;
}

.sp_social_schedule_date_wrapper>.sp_social_schedule_date_remove {
    position: absolute;
    top: calc(50% - 10px);
    right: 15px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.sp_social_schedule_date_wrapper>svg {
    margin-right: 15px;
}

.sp_social_schedule_date_wrapper>svg path {
    fill: var(--main-color);
}

.sp_social_schedule_date_wrapper .tooltip-inner {
    min-width: 120px;
    text-align: center;
}

.sp_social_schedule_button_wrapper {
    position: relative;
    margin-bottom: 20px;
}

.sp_social_schedule_button_wrapper .sp_btn.sp_btn_border {
    height: 70px;
    border: 1px solid rgba(var(--main-color-rgb), 0.3);
    background-color: rgba(var(--main-color-rgb), 0.04);
    color: var(--main-color);
    display: flex;
    width: 100%;
    align-items: center;
    gap: 15px;
    padding: 0 25px;
}

.sp_social_schedule_button_wrapper .sp_btn.sp_btn_border svg path {
    fill: var(--main-color);
}

.sp_social_sdb_wrapper {
    position: relative;
}

.sp_social_schedule_button_dd {
    position: absolute;
    bottom: calc(100% + 5px);
    left: 0;
    background-color: #ffffff;
    min-width: 406px;
    min-height: 365px;
    opacity: 0 !important;
    visibility: hidden !important;
    -webkit-transition: all 0.2s cubic-bezier(0.71, -0.11, 0.25, 0.88);
    -moz-transition: all 0.2s cubic-bezier(0.71, -0.11, 0.25, 0.88);
    transition: all 0.2s cubic-bezier(0.71, -0.11, 0.25, 0.88);
    -webkit-transform: translateY(-10px);
    -moz-transform: translateY(-10px);
    transform: translateY(-10px);
    box-shadow: 0 3px 6px rgb(0 0 0 / 16%), 0 3px 6px rgb(0 0 0 / 23%);
    padding: 15px;
    border-radius: 8px;
    z-index: 1;
}

.sp_social_schedule_button_dd .xdsoft_datetimepicker .xdsoft_next,
.sp_social_schedule_button_dd .xdsoft_datetimepicker .xdsoft_prev,
.sp_social_schedule_button_dd .xdsoft_datetimepicker .xdsoft_today_button {
    visibility: hidden !important;
}

.sp_social_sdb_wrapper.open .sp_social_schedule_button_dd,
.sp_social_schedule_button_wrapper.open .sp_social_schedule_button_dd {
    opacity: 1 !important;
    visibility: visible !important;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    transform: translateY(0px);
}

.sp_social_sdb_wrapper.open .sp_social_schedule_button_dd .xdsoft_datetimepicker .xdsoft_next,
.sp_social_sdb_wrapper.open .sp_social_schedule_button_dd .xdsoft_datetimepicker .xdsoft_prev,
.sp_social_sdb_wrapper.open .sp_social_schedule_button_dd .xdsoft_datetimepicker .xdsoft_today_button {
    visibility: visible !important;
}

.sp_social_schedule_button_dd>h3 {
    display: flex;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    margin: 0;
    margin-bottom: 15px;
}

.sp_social_schedule_button_dd>h3 svg {
    width: 16px;
    height: auto;
}

.sp_social_schedule_button_dd .sp_btn {
    margin-top: 8px;
    border-radius: 6px;
}

.sp_social_zone>select {
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 5px;
    border: 1px solid #dbdbdb;
    outline: none;
}

.sp_social_zone>select:foucs {
    border-color: var(--main-color);
}

.sp_popup_wrapper#click_share_popup .no_search_result {
    display: block;
    margin-top: 60px;
}

.sp_popup_wrapper#click_share_popup .no_search_result>img {
    max-width: 120px;
    margin-bottom: 15px;
}

.sp_popup_wrapper#click_share_popup .no_search_result>h4 {
    font-size: 18px;
    margin-bottom: 10px;
}

.sp_popup_wrapper#click_share_popup .no_search_result>p {
    font-size: 14px;
    margin-bottom: 0;
}

.sp_popup_wrapper#click_share_popup .no_search_result>p>a {
    font-weight: 600;
}

.sp_popup_wrapper#click_share_popup .no_search_result>p>a>span {
    font-family: monospace;
}

.tox .tox-button {
    background-color: var(--main-color) !important;
    border-radius: 6px !important;
    border-color: var(--main-color) !important;
    font-family: inherit !important;
    font-weight: 500 !important;
}

.tox .tox-button[aria-label="Close"] svg path {
    fill: #ffffff;
}

.tox .tox-button.tox-button--secondary {
    background-color: #f0f0f0 !important;
    border-color: #f0f0f0 !important;
}

.tox .tox-button.tox-button--naked {
    background-color: transparent !important;
    border-color: transparent !important;
}

/* social share popup end */

.no_folder_result {
    margin: 0;
    text-align: center;
}

.sp_storage_connect_box {
    display: inline-flex;
    align-items: center;
    padding: 15px;
    background-color: rgba(var(--main-color-rgb), 0.05);
    border-radius: 5px;
    border: 1px solid rgba(var(--main-color-rgb), 0.32);
    min-width: 300px;
}

.sp_storage_connect_box>.sp_scb_icon {
    flex: none;
    margin-right: 15px;
}

.sp_storage_connect_box>.sp_scb_icon>span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    background-color: var(--main-color);
    color: #ffffff;
    font-size: 20px;
    text-transform: uppercase;
    border-radius: 50px;
}

.sp_storage_connect_box>.sp_scb_details {
    flex: 1;
}

.sp_storage_connect_box>.sp_scb_details>h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 2px;
}

.sp_storage_connect_box>.sp_scb_details>p {
    margin: 0;
    font-size: 14px;
}

.sp_deleted_user {
    font-size: 12px;
    color: #f44336;
    font-weight: 600;
    margin-top: 2px;
}

.sp_bin_tab {
    display: none;
}

.sp_bin_tab.active {
    display: block;
}

.sp_template_list.template_rename {
    margin-bottom: 30px;
}

/* Bundle Template Popup Start */
.sp_bundletemp_wrapper_popup {
    position: fixed;
    top: 63px;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 60px 80px;
    background-color: #f8fafd;
    z-index: 999;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    transition: all 0.2s ease;
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateY(10%);
    -moz-transform: translateY(10%);
    transform: translateY(10%);
}

.bundletemp_popup_open .sp_bundletemp_wrapper_popup {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    transform: translateY(0);
}

.sp_bundletemp_wrapper_popup .sp_back_arrow {
    cursor: pointer;
    width: 25px;
    height: 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    margin-right: 25px;
}

.sp_bundletemp_wrapper_popup .sp_back_arrow>svg {
    width: 20px;
    height: 20px;
}

.sp_bundletemp_wrapper_popup .sp_back_arrow>svg path {
    fill: var(--main-color);
}

/* Bundle Template Popup End */

/* sets Template Popup Start */
.sp_setstemp_wrapper_popup {
    position: fixed;
    top: 63px;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 60px 80px;
    background-color: #f8fafd;
    z-index: 999;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    transition: all 0.2s ease;
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateY(10%);
    -moz-transform: translateY(10%);
    transform: translateY(10%);
}

.setstemp_popup_open .sp_setstemp_wrapper_popup {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    transform: translateY(0);
}

.sp_setstemp_wrapper_popup .sp_back_arrow {
    cursor: pointer;
    width: 25px;
    height: 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    margin-right: 25px;
}

.sp_setstemp_wrapper_popup .sp_back_arrow>svg {
    width: 20px;
    height: 20px;
}

.sp_setstemp_wrapper_popup .sp_back_arrow>svg path {
    fill: var(--main-color);
}

/* Bundle Template Popup End */

/* hide option from logo editor start */
.sp_image_editor_wrapper[data-type="print"] .ed_property_widget.square_image_option,
.sp_image_editor_wrapper[data-type="print"] .ed_property_widget.circle_image_option,
.sp_image_editor_wrapper[data-type="print"] .edp_text_option>ul>li.txt_overline_option,
.sp_image_editor_wrapper[data-type="print"] .edp_text_option>ul>li.txt_linethrough_option,
.sp_image_editor_wrapper[data-type="print"] .edp_text_option>ul>li.txt_underlined_option,
.sp_image_editor_wrapper[data-type="logo"] .ed_property_widget.square_image_option,
.sp_image_editor_wrapper[data-type="logo"] .ed_property_widget.circle_image_option,
.sp_image_editor_wrapper[data-type="logo"] .edp_text_option>ul>li.txt_overline_option,
.sp_image_editor_wrapper[data-type="logo"] .edp_text_option>ul>li.txt_linethrough_option,
.sp_image_editor_wrapper[data-type="logo"] .edp_text_option>ul>li.txt_underlined_option {
    display: none !important;
}

/* hide option from logo editor end */

.feedback_no svg path {
    fill: #ff5a5a;
}

.feedback_yes svg path {
    stroke: #8bc34a;
}


#sp_banner_grid {
    margin: 30px auto;
}

.grid-item {
    margin: 10px;
    max-width: 400px;
    position: relative;
    overflow: hidden;
}

.grid-item .canvas-container {
    background-color: #ffffff;
    border: 1px solid #dcdeea;
    height: auto !important;
    max-width: 100%;
    max-height: fit-content;
}

.grid-item .canvas-container>canvas {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    vertical-align: middle;
}

.grid-item .canvas-container>canvas.lower-canvas {
    position: absolute !important;
}

.grid-item .sp_single_edit {
    position: absolute;
    top: 0px;
    right: 0;
    width: 25px;
    height: 25px;
    background-color: var(--main-color);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
    transform: translate(30px, -30px);
}

.grid-item:hover .sp_single_edit {
    opacity: 1;
    visibility: visible;
    transform: translate(0px, 0px);
}

.grid-item .sp_single_edit svg {
    width: 15px;
    height: 15px;
}

.grid-item .sp_single_edit svg path {
    fill: #ffffff;
}

.grid-item.single_edit_active .sp_single_edit {
    display: none;
}

.grid-item.single_edit_active {
    position: fixed !important;
    top: 54px !important;
    left: 450px !important;
    right: 0;
    bottom: 0;
    background-color: #f8fafd;
    z-index: 10;
    max-width: inherit;
    margin: 0;
    transform: none !important;
}

.grid-item.single_edit_active .canvas-container {
    margin: 40px auto;
}

.sp_back_arrow.m_exit_single_edit {
    display: none;
    cursor: pointer;
    width: 25px;
    height: 25px;
    position: absolute;
    left: 15px;
    top: 15px;
    padding: 2px;
}

.sp_back_arrow.m_exit_single_edit>svg {
    width: 20px;
    height: 20px;
}

.sp_back_arrow.m_exit_single_edit>svg path {
    fill: var(--main-color);
}

.sp_back_arrow.m_exit_single_edit~.tooltip {
    margin-top: 15px;
}

/*tutorials breadcrumb start*/
ul.sp_tuto_breadcrumb {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-bottom: 15px;
}

ul.sp_tuto_breadcrumb>li {
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
    padding-right: 10px;
    position: relative;
}

ul.sp_tuto_breadcrumb>li:after {
    content: "/";
    display: inline-block;
    position: absolute;
    top: 0;
    left: 100%;
    vertical-align: middle;
    line-height: inherit;
    opacity: 0.5;
}

ul.sp_tuto_breadcrumb>li:last-child {
    margin-right: 0px;
    padding-right: 0px;
}

ul.sp_tuto_breadcrumb>li:last-child:after {
    display: none;
}

ul.sp_tuto_breadcrumb>li:last-child>a {
    pointer-events: none;
    color: var(--color-body);
}

ul.sp_tuto_breadcrumb>li>a {
    display: block;
}

/*tutorials breadcrumb end*/


/* new sub menu start */
.sp_sub_menu_wrapper {
    background-color: #ffffff;
    margin-bottom: 40px;
    margin-top: -40px;
}

.sp_sub_menu_slider_wrapper {
    max-width: 1600px;
    margin: 0 auto;
    position: relative;
    padding: 0 50px;
}

.sp_sub_menu_slider .sp_ssm_item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 208px;
    height: 120px;
    cursor: pointer;
    position: relative;
    border-radius: 3px;
    color: var(--color-body);
}

.sp_sub_menu_slider .sp_ssm_item>span {
    margin-bottom: 10px;
}

.sp_sub_menu_slider .sp_ssm_item>span>svg {
    width: 35px;
    height: 25px;
}

.sp_sub_menu_slider .sp_ssm_item>span>svg path {
    fill: #b5b5b5;
}

.sp_sub_menu_slider .sp_ssm_item:hover>span>svg path {
    fill: var(--main-color);
}

.sp_sub_menu_slider .sp_ssm_item>p {
    margin: 0;
}

.sp_sub_menu_slider .sp_ssm_item:hover>p {
    color: var(--main-color);
}

.sp_sub_menu_slider .sp_ssm_item.active {
    background-color: var(--main-color);
}

.sp_sub_menu_slider .sp_ssm_item.active>span>svg path {
    fill: #ffffff;
}

.sp_sub_menu_slider .sp_ssm_item.active>p {
    color: #ffffff;
}

.sp_sub_menu_slider .sp_ssm_item.active:before {
    /* content: ""; */
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: #346afd;
    top: 100%;
    transform: rotate(45deg) translate(-8px);
    transform-origin: center;
    left: 50%;
}

.swiper-button-next-page,
.swiper-button-prev-page {
    position: absolute;
    top: 50%;
    width: calc(var(--swiper-navigation-size)/ 44 * 27);
    height: var(--swiper-navigation-size);
    margin-top: calc(-1 * var(--swiper-navigation-size)/ 2);
    z-index: 10;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--swiper-navigation-color, var(--swiper-theme-color));
}

.swiper-button-next-page:after,
.swiper-button-prev-page:after {
    font-family: swiper-icons;
    font-size: var(--swiper-navigation-size);
    text-transform: none !important;
    letter-spacing: 0;
    text-transform: none;
    font-variant: initial;
    line-height: 1
}

.swiper-button-prev-page:after {
    content: 'prev';
}

.swiper-button-next-page:after {
    content: 'next';
}

.sp_ssm_slider_btn {
    width: 34px;
    height: 34px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    border-radius: 50px;
    box-shadow: 0 3px 6px rgb(0 0 0 / 16%), 0 3px 6px rgb(0 0 0 / 23%);
    margin-top: -32px;
}

.sp_ssm_slider_btn.swiper-button-next-page:after,
.sp_ssm_slider_btn.swiper-button-prev-page:after,
.sp_ssm_slider_btn.swiper-button-next:after,
.sp_ssm_slider_btn.swiper-button-prev:after {
    font-size: 14px;
    font-weight: 600;
    color: var(--main-color);
}

.sp_ssm_slider_btn.swiper-button-next-page.swiper-button-disabled,
.sp_ssm_slider_btn.swiper-button-prev-page.swiper-button-disabled,
.sp_ssm_slider_btn.swiper-button-next.swiper-button-disabled,
.sp_ssm_slider_btn.swiper-button-prev.swiper-button-disabled {
    opacity: 1;
    background-color: #f8fafd;
    box-shadow: none;
}

.sp_ssm_slider_btn.swiper-button-next-page.swiper-button-disabled:after,
.sp_ssm_slider_btn.swiper-button-prev-page.swiper-button-disabled:after,
.sp_ssm_slider_btn.swiper-button-next.swiper-button-disabled:after,
.sp_ssm_slider_btn.swiper-button-prev.swiper-button-disabled:after {
    color: #abbad4;
}

.sp_ssm_slider_btn.swiper-button-prev-page,
.sp_ssm_slider_btn.swiper-button-prev {
    right: auto;
    left: -15px;
}

.sp_ssm_slider_btn.swiper-button-next-page,
.sp_ssm_slider_btn.swiper-button-next {
    left: auto;
    right: -15px;
}



.sp_ssm_dd_menus {
    background-color: #f0f3f8;
}

.sp_ssm_dd_menus>ul {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
}

.sp_ssm_dd_menus>ul>li {
    display: inline-block;
    cursor: pointer;
    padding: 5px 0px 15px;
    font-size: 14px;
    position: relative;
    margin: 10px 10px 0;
    display: none;
}

.sp_ssm_dd_menus>ul>li.active,
.sp_ssm_dd_menus>ul>li:hover {
    color: var(--main-color);
    box-shadow: inset 0px -2px 0px var(--main-color);
}

/* super sub menu start */
.sp_ssm_dd_menus>ul>li>ul {
    position: absolute;
    top: 100%;
    left: 0;
    padding: 10px;
    background-color: #ffffff;
    border: 1px solid #CFD6E3;
    min-width: 190px;
    text-align: left;
    border-radius: 5px;
    display: none;
}

.sp_ssm_dd_menus>ul>li:hover>ul {
    display: block;
}

.sp_ssm_dd_menus>ul>li>ul>li {
    display: block !important;
    color: var(--color-body);
}

/* super sub menu end */
/* new sub menu end */

.sp_user_filter_wrapper {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    align-items: center;
}

.sp_user_filter {
    display: inline-flex;
    align-items: center;
    position: relative;
    margin-top: 0;
    margin-bottom: 30px;
    z-index: 11;
}

.sp_user_filter>label {
    margin-right: 15px;
}

.sp_user_filter>.sp_custom_dd_wrapper {
    min-width: 240px;
    flex: 1;
}

.sp_user_filter>.sp_custom_dd_wrapper>.sp_cusdd_dropdown {
    width: 100%;
}

.sp_user_filter_wrapper.filter_with_banner {
    justify-content: space-between;
}

.sp_user_filter_wrapper.filter_with_banner_only {
    justify-content: flex-end;
}

.sp_user_filter_wrapper .sp_user_filter_inner {
    display: flex;
    align-items: center;
    gap: 20px;
}

.sp_user_filter_wrapper .sp_info_banner {
    margin-bottom: 30px;
}


.sp_download_popup_btns {
    display: grid;
    align-items: center;
    margin-bottom: 15px;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 30px;
}

.sp_download_popup_btns>.sp_dpb_item {
    width: 100%;
    height: 130px;
    background-color: #FBFBFB;
    border: 1px solid #E9E9F4;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    cursor: pointer;
    font-size: 16px;
    color: var(--main-color);
}

.sp_download_popup_btns>.sp_dpb_item:hover {
    background-color: rgba(var(--main-color-rgb), 0.1);
    border: 1px solid var(--main-color);
}

.sp_download_popup_btns>.sp_dpb_item>svg {
    margin-bottom: 15px;
}

.sp_download_popup_btns>.sp_dpb_item>svg path {
    fill: var(--main-color);
}


/* canvas to html research start */
.cde_anim_preview_box .cde_editor_elements {
    text-align: left;
    /* margin-bottom: 25px; */
}

.cde_obj_highlighted {
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border: 2px dashed transparent;
    pointer-events: none;
    display: none;
    z-index: 1;
}

.cde_obj_hover .cde_obj_highlighted {
    display: block;
    border-color: var(--main-color);
}

.cde_obj_active .cde_obj_highlighted {
    display: block;
    border-style: solid;
    border-color: var(--main-color);
}

.cde_obj.cde_obj_txt>.cde_obj_highlighted {
    /* top: -8%;
    bottom: 14%; */
}

.cde_obj.cde_obj_txt .cde_obj_inner {
    margin-top: inherit !important;
}

.cde_anim_preview_box .cde_obj {
    cursor: pointer;
}

/* canvas to html research end */

/* animation list editor start */
.sp_animation_list .animation-group {
    display: grid;
    grid-template-columns: calc(33.3333% - 4px) calc(33.3333% - 4px) calc(33.3333% - 4px);
    grid-gap: 6px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.sp_animation_list>section {
    margin-bottom: 10px;
}

.sp_animation_list .animation-group>li {
    text-align: center;
    text-transform: capitalize;
    font-size: 11px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.sp_animation_list h3.animation-title {
    margin: 15px 0;
    font-size: 14px;
    color: #dadada;
}

.sp_animation_list .animation-group>li:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 90px;
    border-radius: 5px;
    border: 1px solid #e6e6ef;
    background-color: #fbfbff;
    z-index: -1;
}

.sp_animation_list .animation-group>li>span {
    height: 90px;
    background-image: url('../images/logo_icon.svg');
    background-position: center center;
    background-size: 30px;
    display: block;
    background-repeat: no-repeat;
    margin-bottom: 3px;
    animation-fill-mode: backwards;
}

.sp_animation_list .animation-group>li.active {
    color: var(--main-color);
}

.sp_animation_list .animation-group>li.active:before {
    border-color: var(--main-color);
    background-color: rgba(var(--main-color-rgb), 0.1);
}

.animation-item-none {
    max-width: 112px;
    position: relative;
    text-align: center;
    margin-bottom: 15px;
    cursor: pointer;
    font-size: 11px;
}

.animation-item-none:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 80px;
    border-radius: 5px;
    border: 1px solid #e6e6ef;
    background-color: #f5f5f9;
    z-index: -1;
}

.animation-item-none>span {
    height: 80px;
    background-repeat: no-repeat;
    margin-bottom: 3px;
    animation-fill-mode: backwards;
    display: flex;
    align-items: center;
    justify-content: center;
}

.animation-item-none>span>svg {
    fill: #e57373;
    width: 40px;
}

.animation-item-none.active:before {
    border-color: var(--main-color);
    background-color: rgba(var(--main-color-rgb), 0.1);

}

.ed_sidebar_input.sp_anim_loop>label {
    color: var(--color-body);
}

/* animation list editor end */

/* testimonial admin popup start */
.sp_testimonial_box {
    padding: 15px;
    border: 1px solid #d6dfec;
    border-radius: 5px;
}

.sp_testimonial_box .sp_table_avatar {
    margin-bottom: 15px;
    flex-direction: column-reverse;
    align-items: flex-start;
}

.sp_testimonial_box .sp_table_avatar>.sp_table_avatar_icon {
    /* overflow: hidden; */
    margin-top: 10px;
    margin-right: 0;
}

.sp_testimonial_box .sp_table_avatar>.sp_table_avatar_icon>img {
    position: relative;
    width: 200px;
    height: 200px;
    background-color: #f8fafd;
    border-radius: 5px;
    border: 1px solid #d6dfec;
    object-fit: contain;
}

.sp_testimonial_box .sp_table_avatar>.sp_table_avatar_icon>span {
    display: none;
}

.sp_testimonial_box .sp_table_avatar>.sp_table_avatar_name {
    color: var(--color-heading);
    font-size: 16px;
}

.sp_testimonial_box .sp_table_avatar>.sp_table_avatar_name>span {
    display: block;
    font-size: 12px;
    color: var(--color-body);
}

.sp_testimonial_box .sp_testimonial_text {
    margin: 0;
    margin-bottom: 15px;
}

.sp_testimonial_box .sp_input_wrapper {
    margin-bottom: 0;
}

.sp_testimonial_box .sp_input_wrapper video {
    width: 100%;
    vertical-align: middle;
    height: auto;
    margin-bottom: 10px;
}

/* testimonial admin popup end */

.sp_input_wrapper .sp_file_uploader .dropzone {
    border: none;
}

.sp_mm_tab_wrapper .sp_input_wrapper .sp_file_uploader .dropzone {
    border: 1px dashed #dadada;
}

/* my template indication on templates page start */
.sp_campaign_list>.sp_campaign_item.sp_my_temp {
    box-shadow: 0px 0px 0px 1px var(--main-color);
    border-radius: 8px;
}

.sp_campaign_list>.sp_campaign_item.sp_my_temp>.sp_campaign_inner {
    background-color: rgba(var(--main-color-rgb), 0.1);
}

.sp_my_temp .sp_additional_info {
    border-top-color: #ccdbf3;
}

.sp_campaign_list>.sp_campaign_item.sp_my_temp>.sp_campaign_inner>.sp_camp_img {
    border-bottom-color: #ccdbf3;
}

.sp_campaign_list>.sp_campaign_item.sp_my_temp>.sp_campaign_inner>.sp_camp_img>img,
.sp_campaign_list>.sp_campaign_item.sp_my_temp>.sp_campaign_inner>.sp_camp_img>.sp_camp_img_overlay.sp_has_img {
    background-color: #d4ddff;
}

.sp_campaign_list>.sp_campaign_item.sp_my_temp.draft {
    box-shadow: 0px 0px 0px 1px rgba(var(--main-color-rgb), 0.3);
}

.sp_campaign_list>.sp_campaign_item.sp_my_temp.draft>.sp_campaign_inner {
    box-shadow: none;
}

.sp_campaign_list>.sp_campaign_item.sp_my_temp.draft>.sp_campaign_inner>.sp_camp_img>img,
.sp_campaign_list>.sp_campaign_item.sp_my_temp.draft>.sp_campaign_inner>.sp_camp_img>.sp_camp_img_overlay.sp_has_img {
    background-color: #d8d9de;
}

/* my template indication on templates page end */

#ed_button_list .sp_btn_temp_item {
    display: inline-block;
    padding: 10px 22px;
    margin: 0px 10px 10px 0px;
    cursor: pointer;
    font-weight: 600;
}

.sp_popup_wrapper#animation_preview_popup>.sp_popup_inner {
    width: auto;
    max-width: 90%;
}

.sp_anim_preview_wrapper {}


/* Animation export css start */
body {
    margin: 0;
    padding: 0;
}

.cde_editor_elements {
    margin: 0px auto;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.cde_editor_elements * {
    box-sizing: border-box;
}

.cde_editor_elements .cde_editor_bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    background-size: cover;
    background-position: center center;
}

.cde_obj {
    position: absolute;
    z-index: 1;
}

.cde_obj.cde_obj_link {
    cursor: pointer;
}

.cde_obj svg {
    overflow: inherit;
    vertical-align: middle;
    transform-origin: top left;
    position: absolute;
    top: 0;
    left: 0;
}

.cde_obj svg>g {
    transform: none;
}

.cde_obj.cde_obj_img img {
    transform-origin: top left;
}

.cde_obj_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cde_obj_anim {
    animation-fill-mode: backwards;
    height: 100%;
}

.cde_obj_inner {
    height: 100%;
}

.cde_obj.cde_obj_txt {
    white-space: nowrap;
}

/* Animation export css end */



.show_preview .sp_edpr_temp_wrapper>.sp_box_shadow {
    opacity: 1;
    visibility: visible;
}

.sp_url_setup_wrapper.sp_anim_embed_code_box {
    height: 135px;
}

.sp_url_setup_wrapper.sp_anim_embed_code_box>.sp_url_fixed>textarea {
    display: block;
    width: calc(100% - 40px);
    word-break: break-word;
    height: 100%;
    border: none;
    pointer-events: none;
    padding: 20px 0;
    font-size: inherit;
    color: inherit;
    font-weight: inherit;
    resize: none;
}

/* Statistics Admin start */
.sp_statistics_link {
    display: inline-flex;
    vertical-align: middle;
    margin-right: 15px;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
}

.sp_custom_table_wrapper {
    background-color: #ffffff;
    margin-bottom: 50px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #dbdfe9;
}

.sp_custom_table_wrapper .sp_ct_head {
    background-color: #EEF2FD;
}

.sp_ct_row {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #dbdfe9;
    flex-wrap: wrap;
    width: 100%;
}

.sp_ct_row:last-child {
    border-bottom: none;
}

.sp_ct_body .sp_ct_row:hover {
    background-color: #fbfcff;
}

.sp_ct_body.sp_ct_body_country {
    max-height: 418px;
    overflow: auto;
}

.sp_ct_row>.sp_ct_col {
    flex: 1;
    padding: 15px 20px;
    font-size: 15px;
}

.sp_ct_row>.sp_ct_col.autowidth {
    flex: none;
}

.sp_ct_row.sp_ct_no_record .sp_ct_col.autowidth {
    flex: 1;
    text-align: center;
}

.sp_ct_head .sp_ct_row>.sp_ct_col {
    font-weight: bold;
    color: var(--color-heading);
}

.sp_ct_row .sp_ct_sub_body {
    border-top: 1px solid #dbdfe9;
    width: 100%;
    display: none;
    padding: 10px 0;
}

.sp_ct_row .sp_ct_row {
    border-bottom: none;
}

.sp_ct_row .sp_ct_row:hover {
    background-color: #ffffff;
    box-shadow: 0 1px 3px rgb(0 0 0 / 12%), 0 1px 2px rgb(0 0 0 / 24%);
}

.sp_ct_row .sp_ct_row>.sp_ct_col {
    font-size: 13px;
    padding: 10px 20px;
}

.sp_ct_row .sp_ct_row>.sp_ct_col:first-child {
    padding-left: 55px;
    flex: 0.9;
}

.sp_ct_subrow_toggle {
    display: none;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    margin-left: 10px;
    margin-top: -1px;
}

.sp_ct_has_subrow {
    cursor: pointer;
}

.sp_ct_has_subrow .sp_ct_subrow_toggle {
    display: inline-flex;
    transition: all 0.3s;
}

.sp_ct_has_subrow.open {
    background-color: #fbfcff;
}

.sp_ct_has_subrow.open .sp_ct_subrow_toggle {
    transform: rotate(90deg);
}

/* Statistics Admin end */

/* dynamic popup preview start */
.cd_dpopup_wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    background-color: rgba(30, 31, 40, 0.85);
    padding: 15px;
    padding-right: 15px !important;
    padding-left: 15px !important;
    text-align: center;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
}

.cd_dpopup_wrapper.in {
    opacity: 1;
    visibility: visible;
}

.cd_dpopup_wrapper::before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 1px;
    height: 100%;
}

.cd_dpopup_wrapper>.cd_dpopup_inner {
    display: none;
    vertical-align: middle;
    width: auto;
    max-width: 90%;
    margin-left: -1px;
    background-color: #ffffff;
    text-align: left;
    position: relative;
}

.cd_dpopup_wrapper.in>.cd_dpopup_inner {
    display: inline-block;
}

.cd_dpopup_wrapper>.cd_dpopup_inner iframe {
    vertical-align: middle;
}

.cd_dpopup_inner .cd_dpopup_close {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 20px;
    height: 20px;
    border-radius: 20px;
    background-color: #ff5a5a;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #ffffff;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.6);
    cursor: pointer;
}

.cd_dpopup_inner .cd_dpopup_close:before,
.cd_dpopup_inner .cd_dpopup_close:after {
    content: '';
    width: 10px;
    height: 2px;
    background-color: #ffffff;
    transform: rotate(45deg);
    position: absolute;
}

.cd_dpopup_inner .cd_dpopup_close:after {
    transform: rotate(-45deg);
}

.cd_dpopup_wrapper.top_left:before,
.cd_dpopup_wrapper.top_right:before,
.cd_dpopup_wrapper.top_middle:before {
    display: none;
}

.cd_dpopup_wrapper.top_left {
    text-align: left;
}

.cd_dpopup_wrapper.top_right {
    text-align: right;
}

.cd_dpopup_wrapper.center_left {
    text-align: left;
}

.cd_dpopup_wrapper.center_right {
    text-align: right;
}

.cd_dpopup_wrapper.bottom_left {
    text-align: left;
}

.cd_dpopup_wrapper.bottom_right {
    text-align: right;
}

.cd_dpopup_wrapper.bottom_left>.cd_dpopup_inner,
.cd_dpopup_wrapper.bottom_middle>.cd_dpopup_inner,
.cd_dpopup_wrapper.bottom_right>.cd_dpopup_inner {
    vertical-align: bottom;
}

/* dynamic popup preview end */


#google_translate_element {
    position: fixed;
    top: 100px;
    right: 0;
    z-index: 999;
}

.goog-te-banner-frame.skiptranslate {
    display: none !important;
}

body {
    top: 0px !important;
}

/* editor canvas object options start */
.sp_canvas_obj_options {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #ffffff;
    border-radius: 5px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    padding: 10px;
    display: none;
    width: 170px;
    z-index: 6;
}

.sp_canvas_obj_options>ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sp_canvas_obj_options>ul>li {
    padding: 5px;
    cursor: pointer;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    border-radius: 5px;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.sp_canvas_obj_options>ul>li.active,
.sp_canvas_obj_options>ul>li:hover {
    background-color: rgba(var(--main-color-rgb), 0.08);
    color: var(--main-color);
}

.sp_canvas_obj_options>ul>li.active svg path,
.sp_canvas_obj_options>ul>li:hover svg path {
    fill: var(--main-color);
}

.sp_canvas_obj_options>ul>li:last-child {
    margin-bottom: 0;
}

.sp_canvas_obj_options>ul>li>.sp_coo_icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 5px;
}

.sp_canvas_obj_options>ul>li.group_ungroup_ops span.sp_coo_group_ungroup_text>.sp_coo_ungroup,
.sp_canvas_obj_options>ul>li.group_ungroup_ops svg.sp_svg_ungroup {
    display: none;
}

.sp_canvas_obj_options>ul>li.group_ungroup_ops.active span.sp_coo_group_ungroup_text>.sp_coo_ungroup,
.sp_canvas_obj_options>ul>li.group_ungroup_ops.active svg.sp_svg_ungroup {
    display: block;
}

.sp_canvas_obj_options>ul>li.group_ungroup_ops.active span.sp_coo_group_ungroup_text>.sp_coo_group,
.sp_canvas_obj_options>ul>li.group_ungroup_ops.active svg.sp_svg_group {
    display: none;
}

/* editor canvas object options end */

/* new menu sets start */
.sp_camp_grid_img_list {
    display: grid;
    grid-template-columns: 50% 50%;
    width: 100%;
    position: relative;
    padding: 10px;
}

.sp_camp_grid_img_list>.sp_camp_grid_img_item {
    padding: 5px;
}

.sp_camp_grid_img_list>.sp_camp_grid_img_item>img {
    width: 100%;
    background-color: #e2e4eb;
    border-radius: 6px;
    height: 90px;
    object-fit: contain;
}

#sp_sets_view_container {
    display: none;
    margin-bottom: 50px;
}

.sp_sets_creator_popup {
    position: fixed;
    top: 63px;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #f8fafd;
    padding: 0px !important;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    transition: all 0.2s;
    z-index: 111;
}

.sp_sets_creator_popup.in {
    opacity: 1;
    visibility: visible;
}

.sp_sets_creator_popup>.sp_sets_creator_popup_inner {
    margin: 0 auto;
    padding: 30px 30px 100px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: auto;
}

.sp_sets_creator_popup>.sp_sets_creator_popup_inner .sp_popup_close {
    position: fixed;
    top: 80px;
}

.sp_sets_creator_popup_body {
    max-width: 1200px;
    margin: 0 auto;
}

.sp_sets_creator_popup_body .sp_popup_footer {
    text-align: center;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px;
    background-color: #ffffff;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.04);
    z-index: 11;
}

.sp_sets_creator_popup .sp_input_wrapper.hasvalue>select.sp_input {
    padding-top: 0;
}

.sp_sets_templates_editor {
    display: grid;
    grid-gap: 15px;
    grid-template-columns: 50% 50%;
    width: calc(100% - 15px);
}

.sp_sets_dfy_templates {
    background-color: #ffffff;
    padding: 15px;
    border: 1px solid #e9e9f4;
    border-radius: 5px;
}

.sp_sets_templates_list .sp_campaign_list,
.sp_sets_dfy_templates .sp_campaign_list {
    grid-template-columns: repeat(auto-fill, minmax(28%, 1fr));
    grid-gap: 15px;
    padding: 5px;
    max-height: 425px;
    overflow: auto;
}

.sp_sets_templates_list .sp_campaign_list {
    max-height: 565px;
}

.sp_sets_dfy_templates .sp_page_head_admin_temp>.sp_input_wrapper>.sp_input {
    height: 35px;
    padding: 0 5px;
    width: 150px;
    font-size: 12px;
}

.sp_sets_dfy_templates .sp_search_wrapper>input {
    height: 35px;
    padding: 5px 5px 5px 40px;
    border-radius: 6px;
}

.sp_sets_dfy_templates .sp_search_wrapper>.sp_search_icon {
    top: 5px;
    left: 5px;
    width: 25px;
    height: 25px;
}

.sp_sets_dfy_templates>.sp_page_title {
    margin-bottom: 12px;
}

.sp_sets_dfy_templates .sp_page_head_admin_temp {
    margin-left: 0;
}

.sp_sets_templates_list {
    background-color: #ffffff;
    padding: 15px;
    border: 1px solid #e9e9f4;
    border-radius: 5px;
}
.sp_sets_templates_list .sp_campaign_list>.sp_campaign_item{
    cursor: move;
}
.sp_sets_templates_list .sp_campaign_list>.sp_campaign_item.ui-sortable-placeholder{
    border: 1px dashed var(--main-color);
    background-color: rgba(var(--main-color-rgb), 0.06);
    visibility: visible !important;
    border-radius: 8px;
}

/* new menu sets end */

#download_stats_popup .sp_popup_inner {
    max-width: 1170px;
}

/* animation editor timeline start */
.cd_timeline_wrapper {
    position: fixed;
    left: 0;
    right: 400px;
    bottom: 0;
    overflow: auto;
    z-index: 999;
    background-color: #ffffff;
    height: 200px;
    top: auto !important;
    width: auto !important;
}

.cd_timeline_wrapper:before {
    content: "";
    position: absolute;
    left: 200px;
    top: 0;
    right: 0;
    height: 50px;
    background-color: #F3F3F3;
}

.cd_timeline_wrapper>.ui-resizable-handle {
    z-index: 90;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 30px;
    display: flex;
    align-items: flex-start;
    cursor: n-resize;
}

.cd_timeline_wrapper>.ui-resizable-handle:before {
    content: "";
    width: calc(100% - 4px);
    height: 3px;
    background-color: #eaf0ff;
}

.cd_timeline_layer_list {
    position: absolute;
    left: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    z-index: 11;
    height: 200px;
    width: 200px;
}

.cd_timeline_layer_list>h3 {
    margin: 0;
    background-color: var(--main-color);
    color: #ffffff;
    display: flex;
    align-items: center;
    padding: 0 15px;
    width: 100%;
    height: 50px;
    flex: none;
    font-size: 16px;
    font-weight: 600;
    padding-top: 4px;
}

.cd_timeline_body {
    height: 200px;
    position: absolute;
    left: 200px;
    right: 0;
    bottom: 0;
    overflow: auto;
}

.cd_timeline_body::-webkit-scrollbar {
    height: 10px;
}

.cd_timeline_item {
    display: grid;
    align-items: center;
    min-height: 40px;
    border-top: 1px solid #F1F1F1;
}

.cd_timeline_layer_list_inner {
    overflow: auto;
    flex: 1;
}

.cd_timeline_layer_list_inner::-webkit-scrollbar {
    display: none;
}

.cd_timeline_item.active {
    background-color: rgba(var(--main-color-rgb), 0.08);
    border-top-color: rgba(var(--main-color-rgb), 0.08);
}

.cd_timeline_item.active .cd_timeline_draggable {
    background-color: var(--main-color);
    color: #ffffff;
}

.cd_timeline_item.active .cd_timeline_draggable .ui-resizable-handle::before,
.cd_timeline_item.active .cd_timeline_draggable .ui-resizable-handle::after {
    background-color: #ffffff;
}

.cd_timeline_item.cd_tl_no_animation .cd_timeline_draggable {
    display: none;
}

.cd_timeline_item.cd_tl_no_animation .cd_timeline_item_box:before {
    content: "No Animation Selected";
    height: 100%;
    display: flex;
    align-items: center;
    opacity: 0.8;
    color: #e35454;
}

.cd_timeline_item.cd_tl_no_animation {
    background-color: #ffefef;
    border-top-color: #ffb3b3;
    box-shadow: 0px 1px 0px #ffb3b3;
    z-index: 1;
    position: relative;
}

.cd_timeline_item.cd_tl_no_animation.active {
    background-color: #fbdede;
}

/* Hide scrollbar for IE, Edge and Firefox */
.cd_timeline_layer_list_inner {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
    background-color: var(--main-color);
    padding-bottom: 10px;
}

.cd_timeline_layer_title {
    height: 40px;
    display: flex;
    align-items: center;
    padding: 0 15px;
    color: #ffffff;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    z-index: 11;
}

.cd_timeline_layer_title.active {
    background-color: #ffffff;
    color: var(--main-color);
}

.cd_timeline_layer_title>.cde_asl_icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    margin-right: 5px;
}

.cd_timeline_layer_title>.cde_asl_icon>svg {
    width: 15px;
    height: auto;
}

.cd_timeline_layer_title>.cde_asl_icon>svg path {
    fill: #ffffff;
}

.cd_timeline_layer_title.active>.cde_asl_icon>svg path {
    fill: var(--main-color);
}

.cd_timeline_item_box {
    height: 100%;
    position: relative;
    z-index: 1;
    margin-left: 15px;
}

.cd_timeline_layer_title>.cde_asl_text {
    max-width: 140px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.cd_timeline_draggable {
    background-color: rgba(var(--main-color-rgb), 0.6);
    position: absolute;
    top: 5px !important;
    bottom: 5px;
    left: 5px;
    border-radius: 5px;
    min-width: 50px;
    cursor: e-resize;
    height: 29px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #fff;
    font-weight: 600;
}

.cd_timeline_draggable.ui-draggable-dragging,
.cd_timeline_draggable.ui-resizable-resizing {
    background-color: #7512FB;
}

.cd_timeline_draggable .ui-resizable-handle {
    position: absolute;
    top: 6px;
    left: 0;
    bottom: 6px;
    width: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.cd_timeline_draggable .ui-resizable-handle::before,
.cd_timeline_draggable .ui-resizable-handle::after {
    content: "";
    width: 2px;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.3);
    margin: 0 1px;
}

.cd_timeline_draggable .ui-resizable-handle::before {
    height: 60%;
}

.cd_timeline_draggable .ui-resizable-handle:hover::before,
.cd_timeline_draggable .ui-resizable-handle:hover::after {
    background-color: #ffffff;
}

.cd_timeline_draggable .ui-resizable-e {
    left: auto;
    right: 0;
}

.cd_timeline_draggable .ui-resizable-e::before {
    height: 100%;
}

.cd_timeline_draggable .ui-resizable-e::after {
    height: 60%;
}

.cd_timeline_scale {
    display: flex;
    padding: 0 15px;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-body);
    background-color: #F3F3F3;
    height: 100%;
    align-items: flex-end;
    height: 50px;
    position: sticky;
    top: 0;
    z-index: 11;
}

.cd_timeline_scale_item {
    width: 100px;
    min-height: 20px;
    flex: none;
    height: 100%;
    background-color: #F3F3F3;
    padding-top: 10px;
}

.cd_timeline_scale_item:last-child {
    width: 20px;
}

.cd_timeline_scale_item:last-child .cd_tsi_ruler {
    display: none;
}

.cd_timeline_scale_item:nth-last-child(2) .cd_tsi_ruler {
    border-right: 1px solid var(--color-body);
}

.cd_tsi_number {
    width: 15px;
    display: block;
    text-align: center;
    margin-left: -7.5px;
}

.cd_tsi_ruler {
    display: flex;
    border-left: 1px solid var(--color-body);
    height: 24px;
    align-items: flex-end;
    padding: 0 5px;
}

.cd_tsi_ruler>span {
    display: block;
    width: 1px;
    height: 8px;
    margin: 0 auto;
    background-color: #cccccc;
}

.cd_tsi_ruler>span.cd_tsi_ruler_middle {
    height: 18px;
    background-color: #adb4c3;
}

/* animation editor timeline end */

/* youtube thumbnail popup start */
.sp_popup_wrapper#youtube_thumbnail_popup {
    padding: 0 !important;
    top: 63px;
    overflow: inherit;
    background-color: transparent;
    z-index: 999;
}

.sp_popup_wrapper#youtube_thumbnail_popup::before {
    display: none;
}

.sp_popup_wrapper#youtube_thumbnail_popup>.sp_popup_inner {
    max-width: 100%;
    border-radius: 0;
    position: fixed;
    top: 63px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: auto;
    -webkit-transform: translateY(10%);
    -moz-transform: translateY(10%);
    transform: translateY(10%);
}

.sp_popup_wrapper#youtube_thumbnail_popup.in>.sp_popup_inner {
    -webkit-transform: translateY(0%);
    -moz-transform: translateY(0%);
    transform: translateY(0%);
}

.sp_popup_wrapper#youtube_thumbnail_popup .sp_popup_body {
    max-width: 1520px;
    margin: 0 auto;
}

.sp_popup_wrapper#youtube_thumbnail_popup .sp_popup_footer {
    position: sticky;
    bottom: -50px;
    background-color: #fff;
    padding: 15px;
    border-top: 1px solid #f5f5f5;
    max-width: 1520px;
    margin: 0 auto;
    z-index: 10;
}

.sp_popup_wrapper#youtube_thumbnail_popup .sp_input_wrapper {
    max-width: 350px;
}

.sp_popup_wrapper#youtube_thumbnail_popup .sp_input_wrapper .sp_input {
    height: 64px;
    padding: 0 20px;
    background-color: #f5f5f5;
    font-size: 15px;
}

.sp_popup_wrapper#youtube_thumbnail_popup .sp_popup_close {
    position: fixed;
    top: 80px;
    z-index: 999;
}

.sp_video_box_list {
    background-color: #f5f5f5;
    padding: 25px;
    margin-bottom: 30px;
    border-radius: 8px;
    min-height: 350px;
}

.sp_video_box_list>h3 {
    margin: 0;
    margin-bottom: 15px;
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.sp_video_box_list>h3 input {
    background-color: #ffffff;
}

.sp_video_box_list>.sp_video_box_list_inner {
    display: grid;
    grid-gap: 20px;
}

.sp_video_box_list>.sp_video_box_list_inner .sp_video_box {
    background-color: #ffffff;
    border-radius: 5px;
}

.sp_video_box_list>.sp_video_box_list_inner .sp_video_box.active {
    background-color: rgba(var(--main-color-rgb), 0.08);
    box-shadow: 0px 0px 0px 1px var(--main-color);
}

.sp_video_box_list>.sp_view_more {
    display: block;
}

.sp_video_box_inner {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    align-items: center;
    padding: 10px;
    position: relative;
    cursor: pointer;
    gap: 10px;
}

.sp_video_box_inner>.sp_vb_icon {
    flex: none;
}

.sp_video_box_inner>.sp_vb_icon>img {
    width: 100%;
    border-radius: 5px;
    object-fit: cover;
}

.sp_video_box_inner>.sp_vb_details {
    flex: 1;
}

.sp_video_box_inner>.sp_vb_details>h3 {
    margin: 0;
    margin-bottom: 4px;
    font-size: 14px;
    font-weight: 600;
}

.sp_video_box_inner>.sp_vb_details>p {
    margin: 0;
    font-size: 12px;
    color: var(--main-color);
}

.sp_video_box_inner>.sp_vb_details>span {
    display: block;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.sp_video_box_inner>.sp_vb_details>span.sp_vb_privacy {
    display: inline-block;
    background-color: var(--main-color);
    color: #fff;
    border-radius: 3px;
    padding: 2px 6px;
    font-size: 12px;
    font-weight: 600;
    text-transform: capitalize;
}

.public>.sp_video_box_inner>.sp_vb_details>span.sp_vb_privacy {
    background-color: #8bc34a;
}

.unlisted>.sp_video_box_inner>.sp_vb_details>span.sp_vb_privacy {
    background-color: var(--color-body);
}

.sp_vb_active_badge {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 16px;
    height: 16px;
    display: none;
}

.sp_video_box.active .sp_vb_active_badge {
    display: block;
}

.sp_video_box_list .sp_vbl_next_preview {
    max-width: 70px;
    margin: 0px auto;
    margin-top: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sp_video_box_list .sp_vbl_next_preview>.sp_vbl_item {
    width: 32px;
    height: 32px;
    cursor: pointer;
}

.sp_video_box_list .sp_vbl_next_preview>.sp_vbl_item>svg path {
    fill: #b8b8bb;
}

.sp_video_box_list .sp_vbl_next_preview>.sp_vbl_item:hover>svg path {
    fill: var(--main-color);
}

.sp_video_box_list>.sp_video_box_list_inner .sp_video_box.selected {
    background-color: var(--main-color);
    box-shadow: 0px 0px 0px 1px var(--main-color);
}

.sp_video_box_list>.sp_video_box_list_inner .sp_video_box.selected .sp_video_box_inner>.sp_vb_details>h3 {
    color: #ffffff;
}

.sp_video_box_list>.sp_video_box_list_inner .sp_video_box.selected .sp_video_box_inner>.sp_vb_details>p,
.sp_video_box_list>.sp_video_box_list_inner .sp_video_box.selected .sp_video_box_inner>.sp_vb_details>span {
    color: #ffffff;
}

.sp_popup_wrapper#add_channel_popup>.sp_popup_inner {
    max-width: 700px;
}

.sp_popup_wrapper#add_channel_popup>.sp_popup_inner .sp_popup_body {
    margin-bottom: 0;
}

.sp_create_channel_popup {
    display: grid;
    grid-template-columns: 40% 60%;
    align-items: center;
}

.sp_create_channel_popup>.sp_chp_icon>img {
    max-width: 100%;
}

.sp_create_channel_popup>.sp_chp_details {
    padding-left: 20px;
}

.sp_create_channel_popup>.sp_chp_details>h3 {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 8px;
}

.sp_create_channel_popup>.sp_chp_details>p {
    margin: 0;
    margin-bottom: 15px;
}

.sp_google_btn {
    display: inline-flex;
    align-items: center;
    background-color: #4285F4;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    padding-right: 20px;
    margin-bottom: 15px;
}

.sp_google_btn:focus,
.sp_google_btn:hover {
    color: #ffffff;
}

.sp_google_btn>.sp_google_btn_icon {
    width: 40px;
    height: 40px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    margin-right: 10px;
}

@media screen and (max-width:480px) {
    .sp_create_channel_popup {
        display: block;
    }

    .sp_create_channel_popup>.sp_chp_icon {
        margin-bottom: 15px;
    }
}

.sp_create_channel_popup>.sp_chp_details>.sp_close_popup {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    padding: 10px;
    text-transform: uppercase;
    font-weight: 600;
}

.sp_create_channel_popup>.sp_chp_details>.sp_close_popup>svg {
    margin-right: 5px;
    margin-top: -2px;
}

.sp_create_channel_popup>.sp_chp_details>.sp_close_popup>svg path {
    fill: var(--color-body);
}

/* youtube thumbnail popup end */

.paginationjs>.paginationjs-pages>ul {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-top: 25px;
    text-align: center;
}

.paginationjs>.paginationjs-pages>ul>li {
    display: inline-block;
    margin-right: 5px;
}

.paginationjs>.paginationjs-pages>ul>li:last-child {
    margin-right: 0px;
}

.paginationjs>.paginationjs-pages>ul>li>a {
    width: 32px;
    height: 32px;
    display: flex;
    background-color: #fff;
    align-items: center;
    justify-content: center;
    color: inherit;
    font-weight: 600;
    font-size: 14px;
    border-radius: 3px;
    cursor: pointer;
    padding-top: 2px;
    border: 1px solid #ebebeb;
}

.paginationjs>.paginationjs-pages>ul>li>a:hover {
    border-color: var(--main-color);
    color: var(--main-color);
}

.paginationjs>.paginationjs-pages>ul>li.active>a {
    background-color: var(--main-color);
    color: #ffffff;
}

.paginationjs>.paginationjs-pages>ul>li.disabled>a {
    opacity: 0.6;
    pointer-events: none;
}

.sp_need_to_upgrade {
    padding: 15px 35px;
    display: none;
    margin: 0 auto;
    background-color: rgba(var(--main-color-rgb), 0.1);
    margin-top: 25px;
    border-radius: 50px;
}

.sp_need_to_upgrade>a {
    font-weight: 600;
}

/* favorites start */
.sp_favorites {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 9;
    width: 29px;
    height: 29px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* box-shadow: 0px 0px 5px rgb(0 0 0 / 10%);
    background: linear-gradient(96.88deg, #346AFD 15.44%, #7512FB 97.89%); */
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    transform: scale(0);
}

.sp_template_item:hover .sp_favorites,
.sp_campaign_item:hover .sp_favorites {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

.sp_favorites>svg {
    width: 17px;
    height: auto;
    vertical-align: middle;
    overflow: visible;
    /* filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.12)) drop-shadow(0 3px 1px rgba(0, 0, 0, 0.14)) drop-shadow(0 1px 5px rgba(0, 0, 0, 0.12)) drop-shadow(0 -1px 2px rgba(0, 0, 0, 0.1)); */
}

.sp_favorites>svg path {
    fill: #fff;
    stroke: #fff;
}

/* favorites end */

.sp_switch_text {
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
}

.sp_switch_text input {
    position: absolute;
    left: -9999999px;
}

.sp_switch_text .sp_st {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 50px;
    padding: 6px 12px 6px 6px;
    color: var(--color-body);
    font-weight: 600;
    cursor: pointer;
    font-size: 13px;
    border: 1px solid #c7c7f5;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.sp_switch_text .sp_st>.sp_st_handle {
    width: 22px;
    height: 22px;
    border-radius: 50px;
    background-color: #bfc2cf;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.sp_switch_text input:checked~.sp_st {
    flex-direction: row-reverse;
    background-color: #66bb6a;
    color: #ffffff;
    padding: 6px 6px 6px 12px;
    border-color: #66bb6a;
}

.sp_switch_text input:checked~.sp_st>.sp_st_handle {
    background-color: #ffffff;
}

.sp_resize_wrapper .dropdown-backdrop {
    display: none;
}

/* Platforms start */
.sp_platform_wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fill, minMax(400px, 1fr));
    gap: 15px;
}

.sp_platform_item {
    background-color: #ffffff;
    padding: 20px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.04);
}

.sp_platform_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px
}

.sp_platform_header>.sp_platform_title {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-heading);
}

.sp_platform_header>.sp_platform_edit {
    font-weight: 700;
    color: #FF1C1C;
    cursor: pointer;
}

.sp_platform_body>ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sp_platform_body>ul>li {
    border: 1px solid #EEEEEE;
    display: flex;
    align-items: center;
    border-bottom: none;
}

.sp_platform_body>ul>li:last-child {
    border-bottom: 1px solid #EEEEEE;
}

.sp_platform_body>ul>li>span {
    padding: 10px;
    flex: 1;
}

.sp_platform_body>ul>li>a {
    padding: 10px;
    flex: none;
    border-left: 1px solid #EEEEEE;
    font-weight: 600;
}

/* Platforms end */

/* youtube to image start */
.sp_btn_youtubeToImage {
    height: 50px;
    background-color: #353B5B;
    border: 1px solid #555E8D;
    border-radius: 3px;
    margin-bottom: 30px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    color: #7F87BD;
    padding: 10px;
    font-size: 13px;
    display: none !important;
}

.sp_btn_youtubeToImage:hover {
    color: #9fa5c9;
}

.sp_btn_youtubeToImage .sp_byti_icons {
    flex: none;
    display: flex;
    align-items: center;
    gap: 7px;
}

.sp_btn_youtubeToImage .sp_byti_icons span {
    display: flex;
}

.sp_btn_youtubeToImage .sp_byti_icons span svg path {
    stroke: var(--main-color);
}

.sp_popup_wrapper#youtube_to_image_popup>.sp_popup_inner {
    max-width: 700px;
}

.sp_popup_yip_video video {
    width: 100%;
    height: auto;
}


.sp_input_youtube_wrapper .sp_search_icon {
    position: absolute;
    bottom: 12px;
    right: 14px;
    width: 50px;
    height: 50px;
    border-radius: 6px;
    background-color: rgba(var(--main-color-rgb), 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    cursor: pointer;
}

.sp_input_youtube_wrapper .sp_search_icon svg {
    width: 18px;
    height: auto;
}

.sp_input_youtube_wrapper .sp_search_icon svg path {
    fill: var(--main-color);
}

.sp_input_youtube_wrapper .sp_input {
    padding-right: 80px;
}

.sp_ytip_footer_button {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.sp_ytip_footer_button>button {
    flex: none;
    min-width: 200px;
}

.sp_ytip_footer_button>p {
    margin: 0;
}

.sp_ytip_footer_canvas {
    display: flex;
    align-items: center;
    gap: 15px;
}

.ed_capture_youtube_video canvas {
    max-width: 200px;
    height: auto;
    vertical-align: middle;
    border-radius: 8px;
    background-color: #f8fafd;
    border: 1px solid #d7dce5;
}

/* youtube to image end */

/* thumbnail suggestion start */
.sp_thumbnail_suggestion_wrapper {
    margin-bottom: 20px;
    position: relative;
    z-index: 11;
}

.sp_thumbnail_suggestion_wrapper>.sp_tsw_icon {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    position: relative;
}

.sp_thumbnail_suggestion_wrapper>.sp_tsw_icon>svg {
    margin-right: 10px;
    margin-top: -2px;
}

.sp_thumbnail_suggestion_wrapper>.sp_tsw_icon>.sp_info_tooltip {
    margin-top: -3px;
}

.sp_thumbnail_suggestion_wrapper>.sp_tsw_icon .tooltip-inner {
    min-width: 150px;
}

.sp_tsw_dropdown {
    position: absolute;
    top: calc(100% + 10px);
    left: -13px;
    width: 100%;
    max-width: 350px;
    background-color: #ffffff;
    padding: 15px;
    border-radius: 6px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    transform: translateY(-10px);
}

.sp_tsw_dropdown:before {
    content: "";
    position: absolute;
    top: -4px;
    left: 12px;
    width: 14px;
    height: 14px;
    background-color: #ffffff;
    transform: rotate(45deg);
    box-shadow: -4px -4px 10px rgb(0, 0, 0, 0.04);
    border-radius: 2px;
}

.sp_thumbnail_suggestion_wrapper.open .sp_tsw_dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0px);
}

.sp_tsw_dropdown .sp_input_wrapper {
    margin-bottom: 0;
}

.sp_tsw_dropdown .sp_input_wrapper .sp_input {
    height: 50px;
    border-radius: 6px;
    padding: 0 18px;
    font-size: 14px;
    padding-right: 50px;
}

.sp_tsw_dropdown .sp_input_youtube_wrapper .sp_search_icon {
    width: 35px;
    height: 35px;
    right: 8px;
    bottom: 8px;
}

.sp_tsw_dropdown .sp_input_youtube_wrapper .sp_search_icon svg {
    width: 14px;
}

.sp_thumbnail_suggestion_wrapper.open>.sp_tsw_icon {
    color: var(--color-heading);
}

.sp_thumbnail_suggestion_wrapper.open>.sp_tsw_icon>svg path {
    fill: var(--color-heading);
}

/* thumbnail suggestion end */

/* brand kit start */
.sp_brandkit_wrapper {
    padding: 30px;
    background-color: #ffffff;
    border-radius: 8px;
    min-height: 400px;
}

.sp_brandkit_header {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    font-size: 16px;
    min-height: 25px;
}

.sp_brandkit_title {
    font-weight: 600;
    color: var(--color-heading);
}

.sp_brandkit_header .sp_back_arrow {
    cursor: pointer;
    width: 25px;
    height: 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    margin-right: 25px;
}

.sp_brandkit_header .sp_back_arrow>svg {
    width: 20px;
    height: 20px;
}

.sp_brandkit_header .sp_back_arrow>svg path {
    fill: var(--main-color);
}

.sp_brandkit_header_name {
    margin-left: 15px;
    font-size: 14px;
}

.sp_brandkit_header_name>svg {
    margin-right: 12px;
    width: 6px;
    height: auto;
}

.sp_brandkit_header .sp_brandkit_back,
.sp_brandkit_header .sp_brandkit_header_name {
    display: none;
}

.sp_brandkit_single_open .sp_brandkit_header .sp_brandkit_back,
.sp_brandkit_single_open .sp_brandkit_header .sp_brandkit_header_name {
    display: block;
}

.sp_brandkit_single_open .sp_brandkit_list {
    display: none;
}

.sp_brandkit_list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    grid-gap: 20px;
    margin-bottom: 15px;
}

.sp_brandkit_item {
    height: 120px;
    padding: 5px;
    border: 1px solid #D7DDEC;
    border-radius: 6px;
    transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
    position: relative;
}

.sp_brandkit_item:hover {
    border-color: var(--main-color);
}

.sp_brandkit_item>.sp_brandkit_icon {
    height: 80px;
    background-color: rgba(var(--main-color-rgb), 0.15);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.sp_brandkit_item:hover>.sp_brandkit_icon {
    background-color: var(--main-color);
}

.sp_brandkit_item:hover>.sp_brandkit_icon>svg {
    transform: scale(1.4) rotate(90deg);
    transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.sp_brandkit_item>.sp_brandkit_icon>svg path {
    fill: var(--main-color);
}

.sp_brandkit_item:hover>.sp_brandkit_icon>svg path {
    fill: #ffffff;
}

.sp_brandkit_item>.sp_brandkit_name {
    font-size: 12px;
    font-weight: 600;
    padding: 3px 6px;
    display: grid;
    grid-template-columns: 1fr 20px;
    grid-gap: 4px;
    align-items: center;
}

.sp_brandkit_item>.sp_brandkit_name>.sp_brandkit_item_title {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.sp_brandkit_item>.sp_brandkit_name>.sp_brandkit_item_edit {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
}

.sp_brandkit_item:hover>.sp_brandkit_name>.sp_brandkit_item_edit {
    opacity: 1;
    visibility: visible;
}

.sp_brandkit_item>.sp_brandkit_name>.sp_brandkit_item_edit>svg {
    width: 14px;
    height: 14px;
}

.sp_brandkit_item>.sp_brandkit_name>.sp_brandkit_item_edit>svg path {
    fill: var(--main-color);
}

.sp_brandkit_item .sp_switch {
    position: absolute;
    top: 10px;
    right: 10px;
    height: 16px;
    display: flex;
}

.sp_brandkit_item .sp_switch>label::before {
    width: 26px;
    height: 14px;
}

.sp_brandkit_item .sp_switch>label::after {
    width: 10px;
    height: 10px;
    left: 3px;
    top: 3px;
}

.sp_brandkit_item .sp_switch>input:checked~label::before {
    background-color: rgba(var(--main-color-rgb), 0.25);
}

.sp_brandkit_item:hover .sp_switch>input:checked~label::before {
    background-color: #fff;
}

.sp_brandkit_item.sp_product_disable {
    border-color: #cbcbcb;
}

.sp_brandkit_item.sp_product_disable>.sp_brandkit_icon {
    background-color: #f3f3f3;
}

.spj_productmanager_wrapper .sp_brandkit_item.sp_product_disable>.sp_brandkit_icon>span {
    color: #939191 !important;
}

.sp_brandkit_add {
    height: 120px;
    padding: 5px;
    border: 1px solid #D7DDEC;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.sp_brandkit_add>svg {
    margin-bottom: 10px;
}

.sp_brandkit_add>p {
    margin: 0px;
}

.sp_brandkit_add:hover {
    border-color: var(--main-color);
    color: var(--main-color);
}

.sp_brandkit_add:hover>svg path {
    fill: var(--main-color);
}

.sp_brandkit_single_wrapper .sp_input_wrapper {
    max-width: 400px;
}

.sp_bks_title {
    color: var(--color-heading);
    font-weight: 600;
    margin-bottom: 15px;
}

.sp_brandkit_single_wrapper .sp_input_wrapper .sp_input {
    height: 50px;
    border-radius: 6px;
    padding: 0 20px;
}

.sp_bks_box_wrapper {
    margin-bottom: 30px;
}

.sp_bks_box_inner {
    padding: 24px;
    background-color: #FBFDFF;
    border: 1px solid #D7DDEC;
    border-radius: 6px;
}

.sp_brandkit_single_wrapper.sp_productmanager_single_wrapper {
    max-width: 1000px;
}

.sp_brandkit_single_wrapper.sp_productmanager_single_wrapper .sp_input_wrapper {
    max-width: 100%;
}

.sp_brandkit_single_wrapper.sp_productmanager_single_wrapper .sp_input_wrapper .sp_input {
    height: 60px;
    font-size: 14px;
}

.sp_brandkit_single_wrapper.sp_productmanager_single_wrapper .sp_input_wrapper select.sp_input,
.sp_brandkit_single_wrapper.sp_productmanager_single_wrapper .sp_input_wrapper textarea.sp_input {
    height: auto;
    padding: 20px;
    font-size: 14px;
}

.sp_product_duration {
    display: flex;
    align-items: center;
    gap: 20px;
}

.sp_product_duration>p {
    margin: 0;
}

.spj_productmanager_wrapper .sp_brandkit_item>.sp_brandkit_icon>span {
    font-size: 16px;
    font-weight: 900;
    color: var(--main-color);
}

.spj_productmanager_wrapper .sp_brandkit_item:hover>.sp_brandkit_icon>span {
    color: #ffffff;
}



.sp_brand_logo_list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    grid-gap: 10px;
}

.sp_brand_logo_list>.sp_brand_logo_item {
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e4e5e8;
    background-color: #ffffff;
    border-radius: 5px;
    position: relative;
}

.sp_brand_logo_list>.sp_brand_logo_item img {
    max-width: 70%;
    max-height: 70%;
}

.sp_brand_logo_add {
    position: relative;
}

.sp_brand_logo_add>input {
    position: absolute;
    opacity: 0;
    left: -99999px;
}

.sp_brand_logo_add>label {
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border: 1px solid #e4e5e8;
    background-color: #ffffff;
    border-radius: 5px;
    cursor: pointer;
}

.sp_brand_logo_add>label svg {
    margin-bottom: 10px;
}

.sp_brand_logo_add:hover>label {
    border-color: var(--main-color);
    color: var(--main-color);
}

.sp_brand_logo_add:hover>label svg path {
    fill: var(--main-color);
}

.sp_remove_brand_icon {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 20px;
    height: 20px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffd4d4;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    transform: scale(0);
}

.sp_remove_brand_icon::before,
.sp_remove_brand_icon::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 2px;
    border-radius: 5px;
    background-color: #f44336;
    transform: rotate(45deg);
}

.sp_remove_brand_icon::after {
    transform: rotate(-45deg);
}

.sp_brand_logo_list>.sp_brand_logo_item:hover .sp_remove_brand_icon {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

.sp_remove_icon_new {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 20px;
    height: 20px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffd4d4;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    transform: scale(0);
}

.sp_remove_icon_new::before,
.sp_remove_icon_new::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 2px;
    border-radius: 5px;
    background-color: #f44336;
    transform: rotate(45deg);
}

.sp_remove_icon_new::after {
    transform: rotate(-45deg);
}

.sp_bks_box_inner .sp_color_palette_item {
    margin-bottom: 15px;
    padding: 15px;
    border-radius: 6px;
    border: 1px solid #D7DDEC;
    background-color: #ffffff;
    position: relative;
}

.sp_bks_box_inner .sp_color_palette_item:hover>.sp_remove_brand_icon {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

.sp_bks_box_inner .sp_color_palette_item>h3 {
    margin: 0;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 600;
}

.sp_cp_title_edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    margin-left: 5px;
    width: 15px;
    height: 15px;
    margin-top: -2px;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
}

.sp_cp_title_edit>svg {
    width: 13px;
    height: auto;
}

.sp_cp_title_edit>svg path {
    fill: var(--main-color);
}

.sp_color_palette_item:hover .sp_cp_title_edit {
    opacity: 1;
    visibility: visible;
}

.sp_brand_color_list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
    grid-gap: 10px;
}

.sp_brand_color_item {
    position: relative;
}

.sp_brand_color_item>.sp_remove_brand_icon {
    width: 16px;
    height: 16px;
    top: -5px;
    right: -5px;
}

.sp_brand_color_item>.sp_remove_brand_icon::before,
.sp_brand_color_item>.sp_remove_brand_icon::after {
    width: 8px;
}

.sp_brand_color_item:hover>.sp_remove_brand_icon {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

.sp_brand_color_item>span.sp_brand_color {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    border-radius: 5px;
}

.sp_brand_color_add {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    border: 1px solid #f1f1f1;
    border-radius: 3px;
    cursor: pointer;
    position: relative;
    background-color: #ffffff;
}

.sp_brand_color_add:hover {
    border-color: var(--main-color);
}

.sp_brand_color_add>svg {
    width: 15px;
    height: auto;
}

.sp_brand_color_add:hover>svg path {
    fill: var(--main-color);
}

.sp_brand_color_add>.sp_brand_color_add_dd {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    opacity: 0;
    visibility: hidden;
    background-color: #ffffff;
    box-shadow: 0px 5px 34px 0px rgb(0, 0, 0, 0.06);
    border-radius: 6px;
    min-width: 184px;
    z-index: 1;
    cursor: initial;
    border: 1px solid #d7ddec;
}

.sp_brand_color_add.open>.sp_brand_color_add_dd {
    opacity: 1;
    visibility: visible;
}

.sp_brand_color_add>.sp_brand_color_add_dd .sp_btn {
    display: block;
    width: calc(100% - 20px);
    margin: 10px;
    height: 38px;
    line-height: 38px;
    border-radius: 5px;
    margin-top: 0;
    font-size: 14px;
}

.sp_bcad_input {
    padding: 5px;
}

.sp_bcad_input>input {
    border: 1px solid #d7ddec;
    border-radius: 5px;
    width: 100%;
    outline: none;
    padding: 6px 10px;
}

.sp_bcad_input>input:focus {
    border-color: var(--main-color);
}

.sp_brand_color_add_dd .colorpicker.colorpicker-with-alpha .colorpicker-alpha {
    display: none;
}

.sp_color_palette_add {
    color: var(--main-color);
    border: 1px dashed var(--main-color);
    padding: 12px;
    background-color: #ffffff;
    text-align: center;
    border-radius: 5px;
    cursor: pointer;
}

.sp_brand_font_wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    grid-gap: 10px;
}

.sp_brand_font_wrapper>.sp_brand_font_item {
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e4e5e8;
    background-color: #ffffff;
    border-radius: 5px;
    position: relative;
    text-align: center;
}

.sp_brand_font_wrapper>.sp_brand_font_item:hover .sp_remove_brand_icon {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

.sp_brand_font_add {
    position: relative;
}

.sp_brand_font_add>.sp_brand_font_add_icon {
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border: 1px solid #e4e5e8;
    background-color: #ffffff;
    border-radius: 5px;
    cursor: pointer;
}

.sp_brand_font_add>.sp_brand_font_add_icon:hover {
    border-color: var(--main-color);
    color: var(--main-color);
}

.sp_brand_font_add>.sp_brand_font_add_icon svg {
    margin-bottom: 4px;
    width: 18px;
}

.sp_brand_font_add>.sp_brand_font_add_icon:hover svg path {
    fill: var(--main-color);
}

.sp_brand_font_add>.sp_brand_font_add_dropdown {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    opacity: 0;
    visibility: hidden;
    background-color: #ffffff;
    box-shadow: 0px 5px 34px 0px rgb(0, 0, 0, 0.06);
    border-radius: 6px;
    min-width: 340px;
    z-index: 1;
    cursor: initial;
    border: 1px solid #d7ddec;
    padding: 5px;
    display: flex;
    align-items: center;
}

.sp_brand_font_add.open>.sp_brand_font_add_dropdown {
    opacity: 1;
    visibility: visible;
}

.sp_brand_font_add>.sp_brand_font_add_dropdown .sp_select_light {
    flex: 1;
}

.select2-hidden-accessible {
    display: none;
}

.spe_brandkit_inner_box {
    margin-bottom: 30px;
}

.spe_brandkit_inner_box>h3 {
    margin: 0;
    margin-bottom: 15px;
    color: #dadada;
    font-size: 14px;
}

.spe_brandkit_inner_box>h3>svg {
    display: inline-block;
    vertical-align: middle;
    margin-right: 6px;
    width: 15px;
    height: auto;
    margin-top: -2px;
}

.spe_brandkit_inner_box>h3>svg path {
    fill: #dadada;
}

.spe_color_palette_item {
    margin-bottom: 10px;
    background-color: #272B45;
    padding: 10px;
    border-radius: 6px;
}

.spe_color_palette_item>span {
    display: block;
    margin-bottom: 5px;
    font-size: 12px;
    color: #9196BD;
}

.spe_color_palette_item>ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.spe_color_palette_item>ul>li {
    display: inline-block;
    width: 24px;
    height: 24px;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.1s;
}

.spe_color_palette_item>ul>li:hover {
    box-shadow: 0px 0px 0px 2px #ffffff;
}

.spe_brandkit_font_list {
    background-color: #272b45;
    padding: 5px 15px;
}

.spe_brandkit_font_list>.spe_brandkit_font_item {
    padding: 10px 0px;
    color: #9ba1c9;
    cursor: pointer;
    border-bottom: 1px solid #303952;
    font-size: 16px;
}

.spe_brandkit_font_list>.spe_brandkit_font_item:hover {
    color: #ffffff;
}

.spe_brandkit_font_list>.spe_brandkit_font_item:last-child {
    border-bottom: none;
}
.sp_delete_permission_ .sp_remove_brand_icon,
.sp_delete_permission_ .sp_btn.ed_delete_brand_kit{
    display: none !important;
}
/* brand kit end */

/* add tag start */
.sp_input_with_button {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
}

.sp_input_with_button>input {
    height: 50px;
    border: 1px solid #e9e9f4;
    padding: 0 20px;
    border-radius: 6px 0 0 6px;
    flex: 1;
    outline: none;
}

.sp_input_with_button>input:foucs {
    border-color: var(--main-color);
}

.sp_input_with_button>.sp_btn {
    flex: none;
    border-radius: 0 6px 6px 0;
}

.sp_tag_list {
    margin-bottom: 15px;
}

.sp_tag_list>.sp_tag_item {
    padding: 8px 24px;
    border-radius: 25px;
    display: inline-flex;
    margin-right: 8px;
    margin-bottom: 8px;
    background-color: #fbfbfb;
    color: var(--main-color);
    box-shadow: 0px 0px 0px 1px;
    font-size: 14px;
    font-weight: 600;
    cursor: default;
    position: relative;
}

.sp_tag_list>.sp_tag_item>.sp_tag_remove {
    position: absolute;
    right: 12px;
    top: 10px;
    width: 15px;
    height: 15px;
    background-color: #ffd0cd;
    border-radius: 20px;
    opacity: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
    transform: scale(0);
}

.sp_tag_list>.sp_tag_item>.sp_tag_remove:before,
.sp_tag_list>.sp_tag_item>.sp_tag_remove:after {
    content: "";
    width: 7px;
    height: 1px;
    border-radius: 2px;
    background-color: #c62828;
    position: absolute;
    transform: rotate(45deg);
}

.sp_tag_list>.sp_tag_item>.sp_tag_remove:after {
    transform: rotate(-45deg);
}

.sp_tag_list>.sp_tag_item>.sp_tag_title {
    transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.sp_tag_list>.sp_tag_item:hover>.sp_tag_title {
    transform: translateX(-8px);
}

.sp_tag_list>.sp_tag_item:hover>.sp_tag_remove {
    opacity: 1;
    transform: scale(1);
}

/* add tag end */

/* dpi option start */
.sp_dpi_options_wrapper {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.sp_dpi_options_wrapper>.sp_dpi_option_title {
    color: var(--color-heading);
    font-weight: 600;
    font-size: 16px;
}

.sp_dpi_option_list {
    display: flex;
    align-items: center;
    gap: 15px;
}

.sp_dpi_option_item>input {
    position: absolute;
    left: -999999px;
    opacity: 0;
}

.sp_dpi_option_item>label {
    font-size: 16px;
    font-weight: 600;
    position: relative;
    cursor: pointer;
    height: 16px;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sp_dpi_option_item>label:before {
    content: "";
    width: 15px;
    height: 15px;
    border-radius: 16px;
    display: inline-block;
    background-color: rgba(var(--main-color-rgb), 0.2);
    vertical-align: middle;
    margin-top: -2px;
    margin-right: 6px;
    flex: none;
}

.sp_dpi_option_item>label:after {
    content: "";
    position: absolute;
    top: 2.5px;
    left: 3px;
    width: 9px;
    height: 9px;
    border-radius: 16px;
    background-color: #ffffff;
    flex: none;
}

.sp_dpi_option_item>input:checked~label:before {
    background-color: rgba(var(--main-color-rgb), 0.3);
}

.sp_dpi_option_item>input:checked~label:after {
    background-color: var(--main-color)
}

.sp_export_dd_inner .sp_dpi_option_list {
    display: inline-flex;
    gap: 2px;
    margin-bottom: 15px;
    border-radius: 5px;
    overflow: hidden;
}

.sp_export_dd_inner .sp_dpi_option_item>label:before,
.sp_export_dd_inner .sp_dpi_option_item>label:after {
    display: none;
}

.sp_export_dd_inner .sp_dpi_option_item>label {
    margin: 0;
    width: 50px;
    height: 34px;
    color: var(--main-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    background-color: rgba(var(--main-color-rgb), 0.15);
}

.sp_export_dd_inner .sp_dpi_option_item>input:checked~label {
    background-color: var(--main-color);
    color: #ffffff;
}

.sp_dp_format_dd>select {
    border: 1px solid #E9E9F4;
    border-radius: 3px;
    height: 30px;
    background-color: #FBFBFB;
    outline: none;
    color: var(--color-body);
    font-weight: 600;
    font-family: inherit;
    width: 70px;
}

.sp_dp_format_dd>select:focus {
    border-color: var(--main-color);
}

/* dpi option end */

/* edit image popup start */
.sp_popup_wrapper.sp_edit_image_popup_wrapper>.sp_popup_inner {
    max-width: 1200px;
    border-radius: 5px;
    padding: 0;
    background-color: #F8FAFD;
    overflow: hidden;
}

.sp_popup_wrapper.sp_edit_image_popup_wrapper>.sp_popup_inner .sp_popup_body {
    margin-bottom: 0;
}

.sp_edit_image_popup_wrapper .sp_eip_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #ffffff;
    padding: 15px 30px;
    border-bottom: 1px solid #ededed;
}

.sp_edit_image_popup_wrapper .sp_btn.sp_btn_border:hover {
    color: var(--main-color);
    border-color: var(--main-color);
}

.sp_eip_header_title>h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.sp_eip_header_title>h3>span {
    font-size: 14px;
    font-weight: 400;
    color: var(--color-body);
}

.sp_eip_header_title>p {
    margin: 0;
}

.sp_eip_header_action {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.sp_eip_body {
    display: grid;
    grid-template-columns: 280px 1fr;
    align-items: flex-start;
}

.sp_eip_body>.sp_eip_sidebar {
    background-color: #fcfcff;
    padding: 14px;
    border-right: 1px solid #ededed;
    position: relative;
    padding-bottom: 14px;
    height: 100%;
}

.sp_eip_tab {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sp_eip_tab>li {
    display: block;
    position: relative;
}

.sp_eip_tab>li>a {
    display: block;
    padding: 8px 10px;
    color: var(--color-body);
    border-radius: 5px;
}

.sp_eip_tab>li>a:hover {
    color: var(--main-color);
}


.sp_eip_tab>li>a>span.sp_eip_ai_credit {
    display: block;
    font-size: 12px;
    color: #a19e9e;
    font-weight: 600;
}

.sp_eip_tab>li.active>a {
    color: var(--main-color);
    background-color: rgba(var(--main-color-rgb), 0.10);
}

.sp_eip_tab.sp_eip_tab_grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 14px 12px;
}

.sp_eip_tab.sp_eip_tab_grid>li>a {
    padding: 0;
    font-size: 12px;
    text-align: center;
    background-color: transparent;
}

.sp_eip_tab.sp_eip_tab_grid>li>a .sp_eip_ai_thumb {
    display: block;
    margin-bottom: 4px;
}

.sp_eip_tab.sp_eip_tab_grid>li>a .sp_eip_ai_thumb>img {
    max-width: 100%;
    box-shadow: 0px 0px 0px 1px var(--line-color);
    border-radius: 6px;
    transition: all 0.1s;
}

.sp_eip_tab.sp_eip_tab_grid>li.active>a .sp_eip_ai_thumb>img {
    box-shadow: 0px 0px 0px 2px var(--main-color);
    padding: 2px;
}

.sp_eip_tab.sp_eip_tab_grid>li>a .sp_eip_ai_name {
    font-weight: 600;
}

.sp_eip_tab.sp_eip_tab_grid>li>a .sp_eip_ai_credit {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 5%;
    width: 90%;
    z-index: 11;
    background-color: #444343;
    color: #fff;
    padding: 4px 10px;
    border-radius: 4px;
    opacity: 0;
    visibility: hidden;
}

.sp_eip_tab.sp_eip_tab_grid>li:hover>a .sp_eip_ai_credit {
    opacity: 1;
    visibility: visible;
}

.sp_eip_tab.sp_eip_tab_grid>li>a .sp_eip_ai_credit::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 2px;
    background-color: #444343;
    transform: rotate(45deg);
    position: absolute;
    top: calc(100% - 7px);
    left: calc(50% - 5px);
    z-index: -1;
}

.sp_eip_tab.sp_eip_tab_grid .sp_nav_beta {
    top: -8px;
    right: calc(50% + 2px);
}

.sp_aimts_header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.sp_aimts_header>.sp_aimts_back {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.sp_aimts_header>.sp_aimts_back svg path {
    fill: var(--main-color);
}

.sp_aimts_header>h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.sp_eip_body>.sp_eip_content {
    padding: 30px;
    display: flex;
    flex-direction: column;
    position: relative;
    min-height: 480px;
}
.sp_eip_image_size{
    font-size: 13px;
    margin-bottom: 4px;
}
.sp_eip_image_size > span{
    font-weight: 700;
}
.sp_eip_body>.sp_eip_content .sp_edit_image_loader {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.9);
    z-index: 8;
}

.sp_eip_body>.sp_eip_content .sp_edit_image_loader .sp_logo {
    margin: 0;
    width: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sp_eip_body>.sp_eip_content .sp_edit_image_loader .sp_logo p {
    margin: 0;
    font-size: 14px;
    color: var(--color-heading);
    font-weight: 600;
    margin-top: 12px;
}

.sp_eip_tab_content {
    display: none;
}

.sp_eip_tab_content.active {
    display: block;
}

.sp_eip_canvas_preview_wrapper {
    width: 100%;
    height: 100%;
    /* display: flex;
    flex-direction: column; */
    /* display: grid;
    grid-template-columns: 1fr 300px;
    gap: 26px;
    align-items: flex-start; */
}

.sp_eip_image_preview {
    margin: 0 auto;
    padding: 5px;
    /* border: 1px solid #ededed; */
    border-radius: 3px;
    background-color: #ffffff;
    margin-bottom: 15px;
    flex: 1;
    text-align: center;
    position: relative;
    width: 100%;
    background: rgba(0, 0, 0, 0) url(data:image/gif;base64,R0lGODlhJAAkAIAAAP///83NzSH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMwNjcgNzkuMTU3NzQ3LCAyMDE1LzAzLzMwLTIzOjQwOjQyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxNSAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpBMTM2REE2MjcxNkIxMUU1OTZEMUE3MjBFNzk0Qjg0MSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpBMTM2REE2MzcxNkIxMUU1OTZEMUE3MjBFNzk0Qjg0MSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkExMzZEQTYwNzE2QjExRTU5NkQxQTcyMEU3OTRCODQxIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkExMzZEQTYxNzE2QjExRTU5NkQxQTcyMEU3OTRCODQxIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Af/+/fz7+vn49/b19PPy8fDv7u3s6+rp6Ofm5eTj4uHg397d3Nva2djX1tXU09LR0M/OzczLysnIx8bFxMPCwcC/vr28u7q5uLe2tbSzsrGwr66trKuqqainpqWko6KhoJ+enZybmpmYl5aVlJOSkZCPjo2Mi4qJiIeGhYSDgoGAf359fHt6eXh3dnV0c3JxcG9ubWxramloZ2ZlZGNiYWBfXl1cW1pZWFdWVVRTUlFQT05NTEtKSUhHRkVEQ0JBQD8+PTw7Ojk4NzY1NDMyMTAvLi0sKyopKCcmJSQjIiEgHx4dHBsaGRgXFhUUExIREA8ODQwLCgkIBwYFBAMCAQAAIfkEAAAAAAAsAAAAACQAJAAAAlKMj3nA7d+UTLC+iYPdIE9ueRJYiQoJmRTqqAjbugYcyRrd2Xgu7/ZN+/l0OGGRGETuYMZk7/h0uoZRppLVtFaxV1SWu/V2SV9xmDwGldFnta0AADs=) repeat scroll left top;
    background-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.sp_eip_image_preview img {
    max-width: 100%;
    /* border-radius: 3px; */
    border-radius: 0px;
    max-height: 500px;
}

/* .sp_eip_image_preview.spj_eip_canvas_preview{
    display: none;
} */
.spj_eip_canvas_preview .sp_eip_image_preview {
    /* width: 70%; */
}

.spj_eip_canvas_preview .sp_eip_image_preview .canvas-container {
    width: 100% !important;
    height: auto !important;
}

.spj_eip_canvas_preview .sp_eip_image_preview .canvas-container>.lower-canvas {
    width: 100% !important;
    height: auto !important;
}

.spj_eip_canvas_preview .sp_eip_image_preview .canvas-container>.upper-canvas {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    vertical-align: middle;
}

.sp_eip_canvas_preview {
    position: relative;
}

.sp_eip_canvas_preview>#brush_cursor {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none !important;
}

.sp_object_removal_options {
    /* display: flex;
    align-items: center;
    justify-content: center; */
    /* margin: 10px auto;
    padding: 0 10px;
    gap: 12px;
    width: 100%; */
}

.sp_object_removal_options .ed_sidebar_input {
    /* margin-bottom: 0; */
    flex: none;
}

.sp_object_removal_options .ed_sidebar_input:nth-child(1) {
    flex: 1;
}

.sp_object_removal_options .ed_sidebar_input>label {
    text-align: left;
    color: var(--color-body);
    font-size: 13px;
    margin-bottom: 4px;
}

.sp_object_removal_options .sp_slider {
    background: #ced0db;
}

.sp_object_removal_options .sp_range_slider::after {
    display: none;
}

.sp_object_removal_options .ed_colorPicker_wrapper {
    width: 100px;
    height: 30px;
    border-color: #d3d3e3;
    background-color: #ffffff;
    border-radius: 30px;
    margin: 0;
}

.sp_object_removal_options .ed_colorPicker_wrapper>span {
    top: 4px;
    left: 5px;
}

.sp_object_removal_options .ed_colorPicker_wrapper:after {
    top: 4px;
    left: 5px;
}

.sp_object_removal_options .ed_colorPicker_wrapper>input {
    height: 30px;
    font-size: 12px;
    color: var(--color-body);
    font-weight: 600;
    padding-left: 30px;
}

.sp_object_removal_options .ed_sidebar_input .sp_btn.sp_btn_small {
    height: 30px;
    line-height: 30px;
    border-radius: 30px;
    background-color: transparent;
    color: var(--main-color);
    box-shadow: inset 0px 0px 0px 1px;
    padding: 0 20px;
}

.sp_object_removal_options .ed_sidebar_input .sp_btn.sp_btn_small:hover {
    background-color: rgba(var(--main-color-rgb), 0.10);
}

.sp_object_removal_options .sp_range_slider {
    min-height: 30px;
}


.sp_eip_sidebar_action {
    position: absolute;
    bottom: 10px;
    left: 10px;
    right: 10px;
    text-align: center;
}

.sp_eip_sidebar_action>p {
    margin: 0;
    font-size: 14px;
}

.sp_eip_sidebar_action>.sp_btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: linear-gradient(135.54deg, #ffc107 12.86%, #ff9800 89.29%);
    border-radius: 6px;
}

.sp_blue_check {
    width: 16px;
    height: 16px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 5px;
    box-shadow: 0px 0px 0px 1px var(--main-color);
}

.sp_blue_check>svg path {
    stroke: var(--main-color);
}

.sp_blue_check.cross {
    box-shadow: 0px 0px 0px 1px #D22222 !important;
}

.sp_blue_check.cross>svg path {
    fill: #D22222 !important;
    stroke: #D22222 !important;
}


.sp_purchase_btn_box.active .sp_blue_check {
    box-shadow: 0px 0px 0px 1px #22d248;
}

.sp_purchase_btn_box.active .sp_blue_check>svg path {
    stroke: #22D248;
}

.sp_eip_sidebar_tabs {
    margin: -14px;
    margin-bottom: 14px;
    padding: 4px 8px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ededed;
    font-size: 13px;
    font-weight: 600;
}

.sp_eip_sidebar_tabs>.sp_eipst_tab_item {
    text-align: center;
    padding: 10px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    flex: 1;
}

.sp_eip_sidebar_tabs>.sp_eipst_tab_item svg path {
    fill: var(--color-body);
}

.sp_eip_sidebar_tabs>.sp_eipst_tab_item.active {
    color: var(--main-color);
    background-color: rgba(var(--main-color-rgb), 0.06);
}

.sp_eip_sidebar_tabs>.sp_eipst_tab_item.active svg path {
    fill: var(--main-color)
}

.sp_eip_sidebar_tabs>.sp_eipst_tab_item:hover {
    color: var(--main-color);
}

.sp_eip_sidebar_tabs>.sp_eipst_tab_item:hover svg path {
    fill: var(--main-color)
}

.sp_eipst_tab_content {
    display: none;
    height: 100%;
}

.sp_eipst_tab_content.active {
    display: block;
}

.sp_eipst_tab_content#ai_editor {
    padding-bottom: 100px;
    position: relative;
}

/* AI Image start */
.sp_eip_ai_body {
    /* display: grid;
    grid-template-columns: 1fr 300px;
    gap: 26px;
    align-items: flex-start; */
}

.sp_eip_ai_image_options {
    position: absolute;
    top: 10px;
    left: 10px;
}

.sp_eip_ai_image_options>.sp_eipaiio_item {
    display: inline-block;
    padding: 3px 10px;
    color: #152930;
    cursor: pointer;
    border-radius: 20px;
    font-size: 12px;
    background-color: rgb(248, 250, 253);
    box-shadow: 0px 1px 4.65px 0.35px rgba(0, 0, 0, 0.18);
    font-weight: 600;
    margin-right: 4px;
    border: 1px solid transparent;
}

.sp_eip_ai_image_options>.sp_eipaiio_item.active {
    color: #ffffff;
    border-color: rgb(206, 208, 219);
    background-color: rgb(63, 63, 71);
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.28);
}

.sp_eip_ai_image_wrapper .sp_eip_image_preview {
    padding: 0;
    border-radius: 10px;
    width: 100%;
    background: rgba(0, 0, 0, 0) url(data:image/gif;base64,R0lGODlhJAAkAIAAAP///83NzSH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMwNjcgNzkuMTU3NzQ3LCAyMDE1LzAzLzMwLTIzOjQwOjQyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxNSAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpBMTM2REE2MjcxNkIxMUU1OTZEMUE3MjBFNzk0Qjg0MSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpBMTM2REE2MzcxNkIxMUU1OTZEMUE3MjBFNzk0Qjg0MSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkExMzZEQTYwNzE2QjExRTU5NkQxQTcyMEU3OTRCODQxIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkExMzZEQTYxNzE2QjExRTU5NkQxQTcyMEU3OTRCODQxIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Af/+/fz7+vn49/b19PPy8fDv7u3s6+rp6Ofm5eTj4uHg397d3Nva2djX1tXU09LR0M/OzczLysnIx8bFxMPCwcC/vr28u7q5uLe2tbSzsrGwr66trKuqqainpqWko6KhoJ+enZybmpmYl5aVlJOSkZCPjo2Mi4qJiIeGhYSDgoGAf359fHt6eXh3dnV0c3JxcG9ubWxramloZ2ZlZGNiYWBfXl1cW1pZWFdWVVRTUlFQT05NTEtKSUhHRkVEQ0JBQD8+PTw7Ojk4NzY1NDMyMTAvLi0sKyopKCcmJSQjIiEgHx4dHBsaGRgXFhUUExIREA8ODQwLCgkIBwYFBAMCAQAAIfkEAAAAAAAsAAAAACQAJAAAAlKMj3nA7d+UTLC+iYPdIE9ueRJYiQoJmRTqqAjbugYcyRrd2Xgu7/ZN+/l0OGGRGETuYMZk7/h0uoZRppLVtFaxV1SWu/V2SV9xmDwGldFnta0AADs=) repeat scroll left top;
    background-size: 10px;
    aspect-ratio: 1/0.86;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.sp_eip_ai_image_wrapper .sp_eip_image_preview>img {
    /* border-radius: 10px; */
    border-radius: 0px;
    background: none;
}

.sp_eip_ai_image_wrapper .sp_eip_image_preview>.sp_eip_iew_canvas_preview {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.sp_edit_image_popup_wrapper .ed_sidebar_input>label {
    color: var(--color-body);
    margin-bottom: 6px;
}

.sp_edit_image_popup_wrapper .ed_sidebar_input .form-control {
    height: 44px;
    border-radius: 4px;
    color: var(--color-heading);
    padding: 0 20px;
    font-size: 14px;
    border: 1px solid var(--line-color);
    background-color: #ffffff;
}

.sp_edit_image_popup_wrapper .ed_sidebar_input textarea.form-control {
    height: auto;
    padding: 20px;
    resize: vertical;
}

.sp_edit_image_popup_wrapper .image-ai-style-title {
    color: var(--color-body);
    font-weight: 400;
}

.sp_edit_image_popup_wrapper .image-ai-style-view-title span {
    color: var(--color-body);
}

.sp_edit_image_popup_wrapper .image-ai-style-view-title.collapsed span:hover {
    color: var(--main-color);
}

.sp_edit_image_popup_wrapper .image-ai-style-images-div {
    /* overflow: auto;
    max-height: 330px; */
}

.sp_edit_image_popup_wrapper .image-ai-style-images-box {
    margin: 0;
}

.sp_edit_image_popup_wrapper .image-ai-style-images-box .style-images {
    border-color: transparent;
    background-color: transparent;
    border-radius: 6px;
}

.sp_edit_image_popup_wrapper .image-ai-style-images-box.active .style-images,
.sp_edit_image_popup_wrapper .image-ai-style-images-box:hover .style-images,
.sp_edit_image_popup_wrapper .image-ai-style-images-box:focus .style-images,
.sp_edit_image_popup_wrapper .image-ai-style-images-box:focus-visible .style-images {
    border-color: var(--main-color);
}

.sp_edit_image_popup_wrapper .image-ai-style-images-box .style-images-title {
    color: var(--color-body);
    font-weight: 400;
    font-size: 12px;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

.sp_edit_image_popup_wrapper .image-ai-style-images-box.active .style-images-title,
.sp_edit_image_popup_wrapper .image-ai-style-images-box:hover .style-images-title,
.sp_edit_image_popup_wrapper .image-ai-style-images-box:focus .style-images-title,
.sp_edit_image_popup_wrapper .image-ai-style-images-box:focus-visible .style-images-title {
    color: var(--main-color);
}

.sp_eip_ai_image_wrapper .sp_more_example_ai>span>svg path {
    stroke: var(--color-body);
}

.sp_eip_ai_image_wrapper .sp_btn {
    min-width: 200px;
    border-radius: 6px;
}

.sp_eip_aigenip_images {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 30px;
}

.sp_eip_aigenip_images>.sp_eip_aigenip_image_item {
    cursor: pointer;
    border-radius: 12px;
}

.sp_eip_aigenip_images>.sp_eip_aigenip_image_item:hover img {
    box-shadow: 0px 0px 0px 2px rgba(var(--main-color-rgb), 0.5);
}

.sp_eip_aigenip_images>.sp_eip_aigenip_image_item.active img {
    box-shadow: 0px 0px 0px 2px var(--main-color);
}

.sp_eip_aigenip_images>.sp_eip_aigenip_image_item>img {
    width: 100%;
    aspect-ratio: 383/255;
    object-fit: contain;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0) url(data:image/gif;base64,R0lGODlhJAAkAIAAAP///83NzSH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMwNjcgNzkuMTU3NzQ3LCAyMDE1LzAzLzMwLTIzOjQwOjQyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxNSAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpBMTM2REE2MjcxNkIxMUU1OTZEMUE3MjBFNzk0Qjg0MSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpBMTM2REE2MzcxNkIxMUU1OTZEMUE3MjBFNzk0Qjg0MSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkExMzZEQTYwNzE2QjExRTU5NkQxQTcyMEU3OTRCODQxIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkExMzZEQTYxNzE2QjExRTU5NkQxQTcyMEU3OTRCODQxIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Af/+/fz7+vn49/b19PPy8fDv7u3s6+rp6Ofm5eTj4uHg397d3Nva2djX1tXU09LR0M/OzczLysnIx8bFxMPCwcC/vr28u7q5uLe2tbSzsrGwr66trKuqqainpqWko6KhoJ+enZybmpmYl5aVlJOSkZCPjo2Mi4qJiIeGhYSDgoGAf359fHt6eXh3dnV0c3JxcG9ubWxramloZ2ZlZGNiYWBfXl1cW1pZWFdWVVRTUlFQT05NTEtKSUhHRkVEQ0JBQD8+PTw7Ojk4NzY1NDMyMTAvLi0sKyopKCcmJSQjIiEgHx4dHBsaGRgXFhUUExIREA8ODQwLCgkIBwYFBAMCAQAAIfkEAAAAAAAsAAAAACQAJAAAAlKMj3nA7d+UTLC+iYPdIE9ueRJYiQoJmRTqqAjbugYcyRrd2Xgu7/ZN+/l0OGGRGETuYMZk7/h0uoZRppLVtFaxV1SWu/V2SV9xmDwGldFnta0AADs=) repeat scroll left top;
    background-size: 10px;
}

.sp_eip_aigenip_images.single_image {
    grid-template-columns: 1fr;
    gap: 0px;
}

.sp_eip_aigenip_images.single_image>.sp_eip_aigenip_image_item>img {
    aspect-ratio: inherit;
}

.sp_eip_iew_preview {
    aspect-ratio: 2/1;
}

.sp_eip_iew_preview>.sp_eip_image_preview {
    /* height: 100%; */
}

.sp_eip_iew_controls {
    margin-bottom: 20px;
}

.sp_eip_iew_controls_inner {
    display: grid;
    /* grid-template-columns: 200px 1fr auto; */
    grid-template-columns: 1fr auto;
    gap: 20px;
}

.sp_eip_iewci_custom {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sp_eip_iewci_custom>input {
    border-radius: 10px;
    border: 1px solid var(--line-color);
    width: 86px;
    padding: 8px 12px;
    outline: none;
}

.sp_eip_iewci_custom>input:focus {
    border-color: var(--main-color);
}

.sp_eip_iewci_btns {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sp_eip_iewci_btns>.sp_eip_iewci_btn {
    background-color: rgba(var(--main-color-rgb), 0.1);
    color: var(--color-heading);
    border-radius: 10px;
    padding: 8px 10px;
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
    text-align: center;
}

.sp_eip_iewci_btns>.sp_eip_iewci_btn:hover {
    color: var(--main-color);
}

.sp_eip_iewci_btns>.sp_eip_iewci_btn.active {
    box-shadow: 0px 0px 0px 1px var(--main-color);
    color: var(--main-color);
}

.sp_ai_object_replacer_prompt_input {
    flex: 1;
}

.sp_ai_object_replacer_prompt_input>textarea {
    width: 100%;
    border: 1px solid var(--line-color);
    border-radius: 10px;
    padding: 15px;
    outline: none;
}

.sp_ai_object_replacer_prompt_input>textarea:focus {
    border-color: var(--main-color);
}

.sp_eip_image_expand_wrapper .sp_eip_iew_preview>.sp_eip_image_preview {
    height: 100%;
}

.sp_eip_image_expand_preview {
    position: relative;
    max-width: 96%;
    max-height: 96%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sp_eip_image_preview .sp_eip_image_expand_preview img {
    border-radius: 0;
    width: 100%;
    height: 100%;
    object-fit: scale-down;
}

.sp_eip_image_expand_preview>.sp_eip_image_expand_ratio_box {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 1px solid var(--main-color);
}

.sp_eip_iew_canvas_preview {
    position: relative;
    margin-bottom: 15px;
}

.sp_eip_iew_canvas_preview .canvas-container {
    width: 100% !important;
    height: auto !important;
    background: rgba(0, 0, 0, 0) url(data:image/gif;base64,R0lGODlhJAAkAIAAAP///83NzSH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMwNjcgNzkuMTU3NzQ3LCAyMDE1LzAzLzMwLTIzOjQwOjQyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxNSAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpBMTM2REE2MjcxNkIxMUU1OTZEMUE3MjBFNzk0Qjg0MSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpBMTM2REE2MzcxNkIxMUU1OTZEMUE3MjBFNzk0Qjg0MSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkExMzZEQTYwNzE2QjExRTU5NkQxQTcyMEU3OTRCODQxIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkExMzZEQTYxNzE2QjExRTU5NkQxQTcyMEU3OTRCODQxIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Af/+/fz7+vn49/b19PPy8fDv7u3s6+rp6Ofm5eTj4uHg397d3Nva2djX1tXU09LR0M/OzczLysnIx8bFxMPCwcC/vr28u7q5uLe2tbSzsrGwr66trKuqqainpqWko6KhoJ+enZybmpmYl5aVlJOSkZCPjo2Mi4qJiIeGhYSDgoGAf359fHt6eXh3dnV0c3JxcG9ubWxramloZ2ZlZGNiYWBfXl1cW1pZWFdWVVRTUlFQT05NTEtKSUhHRkVEQ0JBQD8+PTw7Ojk4NzY1NDMyMTAvLi0sKyopKCcmJSQjIiEgHx4dHBsaGRgXFhUUExIREA8ODQwLCgkIBwYFBAMCAQAAIfkEAAAAAAAsAAAAACQAJAAAAlKMj3nA7d+UTLC+iYPdIE9ueRJYiQoJmRTqqAjbugYcyRrd2Xgu7/ZN+/l0OGGRGETuYMZk7/h0uoZRppLVtFaxV1SWu/V2SV9xmDwGldFnta0AADs=) repeat scroll left top;
    background-size: 10px;
}

.sp_eip_iew_canvas_preview .canvas-container>.lower-canvas {
    width: 100% !important;
    height: auto !important;
}

.sp_eip_iew_canvas_preview .canvas-container>.upper-canvas {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    vertical-align: middle;
}

.sp_eip_adjust_wrapper {
    max-height: 528px;
    overflow: auto;
    padding-right: 8px;
}

.sp_eip_adjust_wrapper .ed_sidebar_input {
    margin-bottom: 0px;
}

.sp_edit_image_popup_wrapper .sp_eip_adjust_wrapper .ed_sidebar_input>label {
    font-weight: 600;
}

.sp_eip_adjust_wrapper .sp_object_removal_options {
    margin-bottom: 16px;
}

/* AI Image end */

/* edit image popup end */


.sp_upgrade_edit_image {
    position: relative;
    border-color: #ffc107;
    color: #ffc107;
    padding-left: 12px;
    justify-content: flex-start;
}

.cd_bg_remover.sp_upgrade_edit_image>.cd_bg_remover_icon>svg path {
    fill: #ffc107;
}

.sp_upgrade_edit_image>.sp_padlock {
    position: absolute;
    top: 8px;
    right: 10px;
    left: auto;
    width: 26px;
    height: 19px;
    border-radius: 15px;
}

.sp_upgrade_edit_image>.sp_padlock>svg {
    width: 12px;
}

.sp_upgrade_edit_image:focus,
.sp_upgrade_edit_image:hover {
    background: linear-gradient(135.54deg, #ffc107 12.86%, #ff9800 89.29%);
    color: #ffffff;
    border-color: transparent;
}

.cd_bg_remover.sp_upgrade_edit_image:focus>.cd_bg_remover_icon>svg path,
.cd_bg_remover.sp_upgrade_edit_image:hover>.cd_bg_remover_icon>svg path {
    fill: #ffffff;
}

.sp_upgrade_edit_image:focus>.sp_padlock,
.sp_upgrade_edit_image:hover>.sp_padlock {
    background: #ffffff;
}

.sp_upgrade_edit_image:focus>.sp_padlock>svg path,
.sp_upgrade_edit_image:hover>.sp_padlock>svg path {
    fill: #ff9e01;
}

.sp_yt_thumb_popup_wrapper {
    display: grid;
    align-items: flex-start;
    grid-template-columns: 400px minmax(0, 1fr);
    gap: 30px;
}

.sp_yt_thumb_popup_wrapper>.sp_yt_thumb_popup_preview {
    /* flex: 0.4; */
    background-color: rgba(var(--main-color-rgb), 0.05);
    border: 1px solid rgba(var(--main-color-rgb), 0.15);
    border-radius: 6px;
    padding: 15px;
    position: sticky;
    top: 0;
}

.sp_yt_thumb_popup_wrapper>.sp_yt_thumb_popup_preview>h3 {
    margin: 0;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 600;
}

.sp_yt_thumb_popup_wrapper>.sp_yt_thumb_popup_preview>img {
    background-color: rgb(0, 0, 0, 0.05);
    border-radius: 4px;
    width: 100%;
}

.sp_yt_thumb_popup_wrapper>.sp_yt_thumb_popup_content {
    flex: 1;
}

/* wireframe uploader start */
.sp_popup_wrapper#add_wireframe_popup>.sp_popup_inner {
    max-width: 800px;
}

.sp_wfu_box_wrapper {
    margin-bottom: 30px;
}

.sp_wfu_title {
    color: var(--color-body);
    margin-bottom: 6px;
    font-size: 12px;
}

.sp_wfu_box_inner {
    padding: 15px;
    background-color: #FBFDFF;
    border: 1px solid #D7DDEC;
    border-radius: 6px;
}

.sp_wf_image_list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    grid-gap: 10px;
}

.sp_wf_image_list>.sp_wf_image_item {
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #b1b9d1;
    background-color: #dbdee9;
    border-radius: 5px;
    position: relative;
}

.sp_wf_image_list>.sp_wf_image_item img {
    max-width: 70%;
    max-height: 70%;
}

.sp_wfu_box_wrapper:nth-child(2) .sp_wf_image_list>.sp_wf_image_item,
.sp_wfu_box_wrapper:nth-child(3) .sp_wf_image_list>.sp_wf_image_item,
.sp_wfu_box_wrapper:nth-child(4) .sp_wf_image_list>.sp_wf_image_item {
    background-color: #ffffff;
    border-color: #e4e5e8;
}

.sp_wf_image_add {
    position: relative;
}

.sp_wf_image_add>input {
    position: absolute;
    opacity: 0;
    left: -99999px;
}

.sp_wf_image_add>label {
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border: 1px solid #e4e5e8;
    background-color: #ffffff;
    border-radius: 5px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
}

.sp_wf_image_add>label svg {
    margin-bottom: 10px;
    pointer-events: none;
}

.sp_wf_image_add>label span {
    pointer-events: none;
}

.sp_wf_image_add:hover>label {
    border-color: var(--main-color);
    color: var(--main-color);
}

.sp_wf_image_add:hover>label svg path {
    fill: var(--main-color);
}

.sp_remove_wf_icon {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 20px;
    height: 20px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f44336;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
}

.sp_remove_wf_icon::before,
.sp_remove_wf_icon::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 2px;
    border-radius: 5px;
    background-color: #ffffff;
    transform: rotate(45deg);
}

.sp_remove_wf_icon::after {
    transform: rotate(-45deg);
}

.sp_wf_image_list>.sp_wf_image_item:hover .sp_remove_wf_icon {
    opacity: 1;
    visibility: visible;
}

.sp_remove_wf_icon[data-key="replacer"],
.sp_remove_wf_icon[data-key="colors"] {
    display: none;
}

.sp_edit_wf_icon {
    position: absolute;
    top: -5px;
    right: 18px;
    width: 20px;
    height: 20px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--main-color);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
}

.sp_edit_wf_icon>svg {
    width: 12px;
    height: auto;
    pointer-events: none;
}

.sp_edit_wf_icon>svg path {
    fill: #ffffff;
}

.sp_wf_image_list>.sp_wf_image_item:hover .sp_edit_wf_icon {
    opacity: 1;
    visibility: visible;
}

.sp_wf_image_replacer_uploader {
    padding: 15px;
    background-color: #FBFDFF;
    border: 1px solid #D7DDEC;
    border-radius: 6px;
    max-width: 460px;
    position: relative;
}

.sp_wf_image_replacer_uploader:before {
    content: "";
    position: absolute;
    top: -10px;
    left: 30px;
    width: 20px;
    height: 20px;
    border-radius: 2px;
    border: 1px solid #D7DDEC;
    background-color: #fbfdff;
    transform: rotate(45deg);
    z-index: -1;
}

.sp_wf_image_replacer_uploader:after {
    content: "";
    position: absolute;
    top: -8px;
    left: 30px;
    width: 21px;
    height: 19px;
    border-radius: 2px;
    background-color: #fbfdff;
    transform: rotate(45deg);
}

.sp_wf_image_replacer_uploader .sp_input_wrapper .sp_input {
    height: 50px;
    padding: 0 20px;
    font-size: 14px;
    border-radius: 6px;
}

.sp_wf_image_replacer_uploader .sp_input_wrapper .sp_input[type="file"] {
    padding: 14px !important;
}

.sp_campaign_list.spj_temp_mockup>.sp_campaign_item>.sp_campaign_inner>.sp_camp_img>img {
    height: 222px;
    object-fit: contain;
}

/* wireframe uploader end */

/* purchase popup start */
.sp_purchase_popup {
    font-family: 'Poppins', sans-serif;
}

.sp_purchase_popup .sp_purchase_heading {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    gap: 10px;
    font-size: 22px;
    color: var(--color-heading);
    font-weight: 600;
}

.sp_purchase_popup .sp_purchase_heading .sp_padlock {
    border-radius: 50px;
    width: 26px;
    height: 26px;
}

.sp_purchase_popup .sp_popup_body img {
    max-width: 100%;
}

.sp_popup_wrapper.sp_purchase_popup>.sp_popup_inner {
    max-width: 1200px;
}

.sp_popup_wrapper.sp_purchase_popup>.sp_popup_inner .sp_popup_body {
    margin-bottom: 0;
}

.sp_popup_wrapper.sp_purchase_popup::before {
    display: none;
}

#upgrade_pro_business_popup.sp_popup_wrapper.sp_purchase_popup>.sp_popup_inner {
    max-width: 600px;
}

#upgrade_pro_business_popup.sp_popup_wrapper .sp_pp_inner>.sp_pp_payment_action {
    flex: 1;
}

#upgrade_pro_business_popup.sp_popup_wrapper.sp_purchase_popup::before {
    display: inline-block;
}

#upgrade_pro_business_popup.sp_popup_wrapper.sp_purchase_popup .sp_purchase_btn_box_list {
    grid-template-columns: 1fr 1fr;
}

@media(max-width:900px) {
    .sp_pp_inner {
        flex-direction: column;
    }

    .sp_pp_inner>.sp_pp_content {
        width: 100%;
    }

    .sp_pp_inner>.sp_pp_payment_action {
        flex: 1;
        width: 100%;
    }
}

.sp_purchase_btn_box_list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    justify-content: center;
    gap: 15px;
}

.sp_purchase_btn_box_list .sp_purchase_btn_box {
    padding: 30px 15px;
    border-radius: 5px;
    background-color: rgba(var(--main-color-rgb), 0.1);
    border: 1px solid rgba(var(--main-color-rgb), 0.5);
    position: relative;
}

.sp_purchase_btn_box_list .sp_purchase_btn_box:hover {
    box-shadow: 0 3px 6px rgb(0 0 0 / 16%), 0 3px 6px rgb(0 0 0 / 23%);
}

.sp_purchase_btn_box_list .sp_purchase_btn_box h3 {
    margin: 0;
    font-weight: 400;
    font-size: 18px;
    text-align: center;
}

.sp_purchase_btn_box_list .sp_purchase_btn_box p {
    text-align: center;
    margin: 6px 0;
}

.sp_purchase_btn_box_list .sp_purchase_btn_box h1 {
    margin: 0;
    font-weight: 700;
    color: var(--main-color);
    margin: 8px 0px 10px;
    text-align: center;
    font-size: 24px;
}

.sp_purchase_btn_box_list .sp_purchase_btn_box h1>span {
    font-size: 14px;
    font-weight: 400;
    color: var(--color-body);
}

.sp_purchase_btn_box_list .sp_purchase_btn_box .sp_btn {
    width: 100%;
    border-radius: 8px;
    font-weight: 400;
    font-size: 14px;
    background: linear-gradient(180deg, #346AFD 0%, #1346D3 100%);
    margin-bottom: 15px;
}

.sp_purchase_btn_box_list .sp_purchase_btn_box ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sp_purchase_btn_box_list .sp_purchase_btn_box ul>li {
    font-size: 13px;
    margin-bottom: 6px;
    display: grid;
    grid-template-columns: 22px auto;
}

.text-line-through {
    text-decoration: line-through;
}

.sp_purchase_btn_box_list .sp_purchase_btn_box ul>li:last-child {
    margin-bottom: 0;
}

.sp_purchase_btn_active_badge {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 16px;
    height: 16px;
    background-color: #22D248;
    border-radius: 20px;
    align-items: center;
    justify-content: center;
    display: none;
}

.sp_purchase_btn_box_list .sp_purchase_btn_box.active {
    background-color: rgba(38, 226, 79, 0.1);
    border-color: rgba(20, 155, 49, 0.5);
}

.sp_purchase_btn_box_list .sp_purchase_btn_box.active h1 {
    color: #22D248;
}

.sp_purchase_btn_box_list .sp_purchase_btn_box.active .sp_btn {
    background: none;
    box-shadow: 0px 0px 0px 1px #1ec342;
    color: #1EC342;
    background-color: #ffffff;
    pointer-events: none;
}

.sp_purchase_btn_box_list .sp_purchase_btn_box.active .sp_purchase_btn_active_badge {
    display: flex;
}

.sp_pp_inner {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.sp_pp_inner>.sp_pp_content {
    flex: 1;
}

.sp_pp_inner>.sp_pp_payment_action {
    flex: 0.8;
}

/* purchase popup end */

/* dynamic purchase popup start */
.sp_dynamic_purchase_popup {
    font-family: 'Poppins', sans-serif;
}

.sp_dynamic_purchase_popup .sp_purchase_heading {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    gap: 10px;
    font-size: 22px;
    color: var(--color-heading);
    font-weight: 600;
}

.sp_dynamic_purchase_popup .sp_purchase_heading .sp_padlock {
    border-radius: 50px;
    width: 26px;
    height: 26px;
}

.sp_dynamic_purchase_popup .sp_popup_body img {
    max-width: 100%;
}

.sp_popup_wrapper.sp_dynamic_purchase_popup>.sp_popup_inner {
    max-width: 1200px;
}

.sp_popup_wrapper.sp_dynamic_purchase_popup>.sp_popup_inner .sp_popup_body {
    margin-bottom: 0;
}

.sp_popup_wrapper.sp_dynamic_purchase_popup::before {
    display: none;
}

.sp_popup_wrapper.sp_dynamic_purchase_popup .sp_pp_inner>.sp_pp_payment_action {
    flex: 0.5;
    background-color: rgba(var(--main-color-rgb), 0.05);
    padding: 25px;
    border-radius: 10px;
    border: 1px solid rgba(var(--main-color-rgb), 0.15);
}

.sp_popup_wrapper.sp_dynamic_purchase_popup .sp_btn {
    width: 100%;
    border-radius: 8px;
    font-weight: 400;
    font-size: 14px;
    background: linear-gradient(180deg, #346AFD 0%, #1346D3 100%);
    margin-bottom: 15px;
}

.sp_purchase_heading .sp_back_arrow {
    cursor: pointer;
    width: 25px;
    height: 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}

.sp_purchase_heading .sp_back_arrow>svg {
    width: 20px;
    height: 20px;
}

.sp_purchase_heading .sp_back_arrow>svg path {
    fill: var(--main-color);
}

.sp_dpp_selectplan_heading {
    margin: 0;
    margin-bottom: 15px;
    font-size: 16px;
    font-weight: 600;
}

.sp_dpp_plans_item {
    margin-bottom: 15px;
}

.sp_dpp_plans_item>input {
    position: absolute;
    left: -99999px;
    opacity: 0;
}

.sp_dpp_plans_item>label {
    border: 1px solid #D3D8E3;
    background-color: #FBFCFE;
    border-radius: 6px;
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(.71, -.11, .25, .88);
    height: 70px;
}

.sp_dpp_plans_item>label>.sp_dpp_plan_check {
    flex: none;
    width: 20px;
    height: 20px;
    border-radius: 50px;
    background-color: #D3D8E3;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sp_dpp_plans_item>label>.sp_dpp_plan_check::before {
    content: "";
    width: 14px;
    height: 14px;
    background-color: #ffffff;
    border-radius: 50px;
    transition: all 0.1s;
    position: absolute;
}

.sp_dpp_plans_item>input:checked~label {
    border-color: var(--main-color);
    background-color: rgba(var(--main-color-rgb), 0.10);
}

.sp_dpp_plans_item>input:checked~label>.sp_dpp_plan_check {
    background-color: var(--main-color)
}

.sp_dpp_plans_item>input:checked~label>.sp_dpp_plan_check::before {
    width: 8px;
    height: 8px;
}

.sp_dpp_plans_item>label>.sp_dpp_plan_details {
    flex: 1;
}

.sp_dpp_plans_item>label>.sp_dpp_plan_details>p {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-heading);
}

.sp_dpp_plans_item>label>.sp_dpp_plan_details>h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--main-color);
}

.sp_dpp_plans_item>label>.sp_dpp_plan_details>h3>span {
    margin: 0;
    font-weight: 400;
    color: var(--color-body);
}

/* dynamic purchase popup end */

#add_thumbnail_popup_ .sp_dp_details h3 {
    font-size: 24px;
    margin-bottom: 10px;
}

#add_thumbnail_popup_ .sp_dp_details>p {
    margin: 0;
    font-size: 16px;
    margin-bottom: 20px;
}

/* steper start */
.step_box {
    display: none;
}

.step_box.active {
    display: block;
    animation: step_anim 0.3s cubic-bezier(0.84, -0.12, 0.46, 1.07);
    animation-fill-mode: forwards;
}

@keyframes step_anim {
    0% {
        transform: translateY(10px);
        opacity: 0;
    }

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

/* steper end */

/********************************************************************************************* 
52. responsive start
*********************************************************************************************/
@media(max-width:1600px) {
    .sp_template_list.sp_logo_list>.sp_template_item>.sp_template_item_inner {
        width: 220px;
        height: 188px;
    }

    .sp_header_right .sp_btn_upgrade {
        width: 40px;
        padding: 12px;
    }

    .sp_header_right .sp_btn_upgrade>span {
        display: none;
    }

    .sp_logo {
        margin-right: 20px;
        width: 124px;
    }

    .sp_nav_wrapper>ul>li {
        margin-right: 12px;
    }

    .sp_nav_wrapper>ul>li>a {
        font-size: 13px;
    }
}

@media(max-width:1440px) {
    body {
        font-size: 14px;
    }

    .sp_logo {
        font-size: 20px;
        margin-right: 20px;
        width: 124px;
    }

    .sp_logo>a.sp_logo_inner>img {
        max-width: 124px;
    }

    .sp_btn {
        height: 40px;
        line-height: 42px;
        border-radius: 6px;
        font-size: 14px;
    }

    .sp_ps_temp_preview .sp_btn {
        min-width: inherit;
    }

    .sp_nav_wrapper>ul>li {
        margin-right: 10px;
    }

    .sp_nav_wrapper>ul>li>a {
        /* padding: 24px 0; */
        font-size: 13px;
    }

    .sp_nav_wrapper>ul>li>a>.sp_nav_icon {
        margin-top: -4px;
    }

    .sp_pack_setup_popup_wrapper,
    .sp_template_popup_wrapper {
        /* left: 300px; */
        padding: 40px;
    }

    /* .sp_content_wrapper {
        margin: 40px 0;
    } */
    .sp_logo>.sp_logo_inner>span {
        width: 32px;
        height: 32px;
        line-height: 35px;
        font-size: 22px;
    }

    .sp_container,
    .sp_header_wrapper .sp_header_inner {
        padding: 0px 15px;
    }

    .sp_search_wrapper>input {
        border-radius: 6px;
        height: 40px;
        padding: 10px 10px 10px 45px;
    }

    .sp_list_grid_switch {
        width: 40px;
        height: 40px;
        border-radius: 6px;
    }

    .sp_list_grid_switch>svg {
        width: 18px;
    }

    .sp_custom_dd_wrapper>.sp_cusdd_toggle {
        height: 40px;
    }

    .sp_dfytemp_header_search>.sp_custom_dd_wrapper>.sp_cusdd_toggle {
        border-radius: 6px 0 0 6px;
    }

    .sp_search_wrapper>.sp_search_icon {
        top: 6px;
        left: 6px;
        width: 28px;
        height: 28px;
        border-radius: 4px;
    }

    .sp_page_title>.sp_page_heading {
        font-size: 18px;
    }

    .sp_page_title>.sp_pt_right>.sp_btn {
        min-width: 130px;
    }

    .sp_dropdown_wrapper {
        left: auto;
        right: -10px;
    }

    .sp_auth_body .sp_logo {
        font-size: 22px;
        margin-bottom: 20px;
    }

    .sp_auth_body .sp_logo>.sp_logo_inner>span {
        width: 34px;
        height: 34px;
        font-size: 24px;
        line-height: 38px;
    }

    /* .sp_auth_body .sp_auth_title{
        font-size: 26px;
    } */
    .sp_auth_body .sp_auth_subtitle {
        margin-bottom: 20px;
    }

    .sp_auth_body .sp_btn {
        font-size: 18px;
    }

    .sp_auth_body .sp_checkbox>label::after {
        top: 6px;
    }

    .sp_auth_wrapper>.sp_auth_inner {
        max-width: 450px;
    }

    .sp_auth_divider {
        margin: 30px -40px 30px -40px;
    }

    .sp_popup_title {
        font-size: 18px;
        margin-bottom: 30px;
    }

    .sp_popup_wrapper>.sp_popup_inner {
        padding: 50px 20px;
    }

    .sp_popup_wrapper#add_campaign_popup>.sp_popup_inner {
        max-width: 550px;
    }

    .sp_camp_type_wrapper>.sp_camp_type_item>.sp_camp_type_inner>label>span {
        width: 80px;
        height: 80px;
        margin-bottom: 8px;
        border-radius: 10px;
    }

    .sp_camp_type_wrapper>.sp_camp_type_item>.sp_camp_type_inner>label>span>img {
        width: 34px;
        height: 34px;
    }

    .sp_camp_type_wrapper>.sp_camp_type_item>.sp_camp_type_inner>label>span>svg {
        width: 34px;
        height: 34px;
    }

    .sp_camp_type_wrapper>.sp_camp_type_item>.sp_camp_type_inner>label>p {
        font-size: 13px;
    }

    .sp_popup_wrapper>.sp_popup_inner>.sp_popup_footer>.sp_btn {
        height: 50px;
        line-height: 50px;
        min-width: 160px;
    }

    .sp_input_wrapper>.sp_auth_input_placeholder {
        left: 21px;
    }

    .sp_input_wrapper.hasvalue>.sp_auth_input_placeholder {
        top: 18px;
        font-size: 12px;
    }

    .sp_input_wrapper .sp_input {
        height: 54px;
        padding: 0 20px;
        font-size: 14px;
    }

    .sp_wl_domain_verify_btn {
        right: 10px;
        bottom: 8px;
    }

    .sp_input_icon>.sp_icon {
        top: 0px;
        left: 0px;
        width: 55px;
        height: 55px;
    }

    .sp_input_icon>.sp_icon>img {
        max-width: 20px;
    }

    .sp_input_wrapper.sp_input_icon>.sp_input {
        padding-left: 50px;
    }

    .sp_input_wrapper.sp_input_icon>.sp_auth_input_placeholder {
        left: 51px;
    }

    .sp_alert_wrapper {
        right: 15px;
        bottom: 15px;
    }

    .sp_alert_wrapper>.sp_alert_inner {
        border-radius: 8px;
        padding: 15px 30px 15px 77px;
    }

    .sp_alert_wrapper>.sp_alert_inner>.sp_alert_icon {
        width: 50px;
    }

    .ed_property_widget_title,
    .sp_editor_sidebar .sp_es_title {
        padding: 18px 10px;
        font-size: 16px;
    }

    .sp_editor_sidebar {
        width: 400px;
    }
    .sp_editor_sidebar.sp_aiigp_sidebar {
        width: auto;
    }

    .close_sidebar .sp_editor_sidebar {
        left: -400px;
    }

    .sp_editor_preview_wrapper {
        padding-left: 420px;
    }

    .sp_editor_preview_wrapper>.sp_ed_right_btns {
        left: 400px;
    }

    .ed_element_shape_list ul>li>a {
        height: 80px;
    }

    .sp_text_option_list>.sp_to_item,
    .edp_layer_option_btn>ul>li>a,
    .edp_text_option>ul>li>a {
        width: 42px;
    }

    /* .sp_package_editor > .sp_editor_preview_wrapper{
        padding-left: 360px;
    } */
    .ed_element_property>.ed_property_widget_body,
    .ed_element_campaign_list .ed_element_upload_body,
    .ed_element_background .tab-content,
    .ed_element_upload .ed_element_upload_body,
    .sp_es_body {
        padding: 30px 20px;
        padding-top: 0;
    }

    .sp_editor_sidebar_inner .sp_search_wrapper>input {
        font-size: 13px;
    }

    span.sp_search_clear {
        top: 12px;
    }

    .sp_iup_btns>.sp_btn {
        margin-right: 10px;
    }

    .edb_tab>ul>li {
        margin-right: 15px;
    }

    .edb_tab>ul>li>a {
        /* min-height: 42px; */
        font-size: 12px;
        white-space: nowrap;
    }

    .ed_color_group>.ed_color_block {
        margin-bottom: 4px;
        margin-right: 4px;
    }

    .ed_color_group>.ed_color_block>.ed_js_color {
        padding: 11px;
    }

    .sp_image_editor_wrapper .sp_logo_editor .sp_edpr_box {
        min-width: auto;
    }

    .sp_body_main .sp_content_wrapper {
        padding: 0 40px;
    }

    .sp_dropdown_wrapper {
        left: auto;
        right: -10px;
    }

    .sp_body_main .sp_header_wrapper {
        width: 300px;
    }

    .sp_select_campaign_popup {
        /* left: 300px; */
        padding: 40px;
        padding-bottom: 100px;
    }

    .sp_select_campaign_popup>.sp_container {
        padding: 0;
    }

    .sp_body_main .sp_content_wrapper {
        margin-left: 300px;
    }

    .sp_body_main .sp_nav_wrapper>ul>li>a {
        padding: 16px 25px;
    }

    .sp_body_main .sp_header_right .sp_avatar_details>h3,
    .sp_body_main .sp_header_right .sp_avatar_details>p {
        max-width: 150px;
    }

    .sp_ed_tab_box>.sp_edtb_tab_list .sp_edtb_item>svg {
        margin-bottom: 5px;
    }

    .sp_header_wrapper.sp_header_editor>.sp_container {
        padding: 0 30px;
    }

    .sp_header_wrapper .sp_header_inner .sp_template_name>p {
        font-size: 15px;
        max-width: 250px;
    }

    .sp_editor_header_action {
        margin-right: 20px;
    }

    .edb_tab>ul>li>a::before {
        width: 15px;
        height: 15px;
        margin-right: 5px;
    }

    .edb_tab>ul>li>a::after {
        width: 7px;
        height: 7px;
    }

    .sp_dfytemp_header {
        padding: 40px 20px;
    }

    .ed_image_list>.ed_imglist_item>.ed_image {
        height: 70px;
    }

    .ed_colorPicker_wrapper {
        width: 110px;
        height: 34px;
    }

    .ed_colorPicker_wrapper>input {
        font-size: 12px;
        padding-left: 30px;
        height: 34px;
    }

    .ed_colorPicker_wrapper>span,
    .ed_colorPicker_wrapper:after {
        width: 15px;
        height: 15px;
        top: 8px;
    }

    .sp_colorpicker_wrapper .sp_input {
        height: 34px !important;
        font-size: 12px !important;
        padding-left: 30px !important;
        padding-right: 10px !important;
    }

    .sp_colorpicker_wrapper:after,
    .sp_colorpicker_wrapper>span {
        width: 15px;
        height: 15px;
        bottom: 10px;
    }

    .shape_color_list .sp_colorpicker_wrapper {
        width: 110px;
    }

    .shape_color_list .sp_colorpicker_wrapper::after,
    .shape_color_list .sp_colorpicker_wrapper>span {
        bottom: 16px;
    }

    .sp_editor_sidebar_inner .sp_back_arrow {
        top: 19px;
    }

    .sp_pack_setup_popup_wrapper>.sp_container,
    .sp_template_popup_wrapper>.sp_container {
        padding: 0;
    }

    .sp_template_list>.sp_template_item>.sp_template_item_inner .sp_logo_var_item>.sp_lvi_inner>img {
        width: 50px;
        height: 50px;
    }

    .sp_logo_var_item>.sp_lvi_inner>p {
        font-size: 18px;
    }

    .ed_category_folder>ul>li>ul>li>a {
        height: 85px;
    }

    .ed_category_folder>ul>li>ul>li>a>img {
        max-width: 60px;
        max-height: 60px;
    }

    .sp_image_preview_wrapper>.sp_ipw_inner>img {
        max-height: 400px;
    }

    .sp_auth_body .sp_auth_title {
        font-size: 30px;
    }

    .sp_auth_body .sp_auth_subtitle {
        font-size: 16px;
    }

    .sp_theme_wrapper_popup .sp_campaign_list>.sp_campaign_item>.sp_campaign_inner>.sp_camp_detail>h3>.sp_pd_name,
    .sp_admin_content_wrapper .sp_campaign_list>.sp_campaign_item>.sp_campaign_inner>.sp_camp_detail>h3>.sp_pd_name {
        /* max-width: 110px; */
    }

    .sp_pst_design.add>.sp_pst_add_overlay>.sp_pst_add_icon {
        width: 30px;
        height: 30px;
    }

    .sp_pst_design.add>.sp_pst_add_overlay>.sp_pst_add_icon>span {
        width: 30px;
    }

    /* .sp_mockup_editor .sp_edpr_box{
        transform: scale(0.65);
        transform-origin: top center;
    } */
    .sp_dbi_content>h3 {
        font-size: 25px;
    }

    .sp_dbi_content>p {
        margin-bottom: 12px;
        font-size: 16px;
    }

    .sp_profile_box {
        max-width: 540px;
        padding: 40px;
    }

    .sp_popup_wrapper#youtube_to_image_popup>.sp_popup_inner {
        max-width: 600px;
    }

    .sp_input_youtube_wrapper .sp_search_icon {
        bottom: 7px;
        right: 7px;
        width: 40px;
        height: 40px;
    }

    .sp_input_youtube_wrapper .sp_search_icon svg {
        width: 16px;
    }

    .sp_company_profile_wrapper {
        gap: 30px;
    }

    .sp_company_profile_right .sp_input_wrapper.sp_input_icon>.sp_icon {
        height: 52px;
    }

    .sp_company_profile_right .sp_input_wrapper.sp_input_icon>.sp_input {
        padding-left: 75px;
    }

    .cdm_review_data_wrapper {
        grid-template-columns: 100%;
    }

    .cdm_review_data_wrapper>.cdm_rd_box {
        width: 100%;
    }

    .sp_dash_oto_banner_dynamic {
        min-height: inherit;
    }

    .sp_dash_oto_banner_2box>.sp_dash_oto_banner_2box_item>img {
        max-width: 40%;
    }

    .sp_dash_oto_banner_2box>.sp_dash_oto_banner_2box_item::before {
        width: 126px;
        height: 126px;
    }

    .sp_dash_oto_banner_2box>.sp_dash_oto_banner_2box_item {
        padding: 14px 10px;
    }

    .sp_dash_oto_banner_2box>.sp_dash_oto_banner_2box_item>p {
        font-size: 12px;
    }

    .sp_dash_oto_banner_2box>.sp_dash_oto_banner_2box_item>h3 {
        font-size: 18px;
    }
}

@media(max-width:1240px) {
    .sp_marketplace_banner_bg_grid {
        opacity: 0.1;
    }

    .sp_nav_toggle {
        display: inline-flex;
    }

    .sp_header_wrapper .sp_header_inner {
        justify-content: space-between;
        padding: 12px 30px;
    }

    .sp_nav_wrapper {
        position: absolute;
        top: 100%;
        right: 160px;
        background-color: #ffffff;
        padding: 10px 20px;
        z-index: -1;
        opacity: 0;
        visibility: hidden;
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        transition: all 0.3s;
        -webkit-transform: translateY(-10px);
        -moz-transform: translateY(-10px);
        transform: translateY(-10px);
        min-width: 230px;
        box-shadow: 0px 5px 34px 0px rgb(0 0 0 / 6%);
        border-radius: 0 0 10px 10px;
    }

    .nav_open .sp_nav_wrapper {
        opacity: 1;
        visibility: visible;
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        transform: translateY(0px);
    }

    .sp_nav_wrapper>ul>li {
        display: block;
        margin-right: 0;
        margin-bottom: 10px;
    }

    .sp_nav_wrapper>ul>li>a {
        display: flex;
        margin-right: 0;
        padding: 10px;
        padding-left: 15px;
    }

    .sp_nav_wrapper>ul>li>a:hover,
    .sp_nav_wrapper>ul>li>a.active {
        box-shadow: inset 3px 0px 0px var(--main-color);
        background-color: rgba(var(--main-color-rgb), 0.06);
    }

    .sp_social_camp_list.supersub_active>.sp_social_camp_body>.sp_campaign_list,
    .sp_social_camp_list.supersub_active>.sp_social_camp_body>.sp_template_list,
    .sp_social_camp_list.marketing_active>.sp_social_camp_body>.sp_campaign_list,
    .sp_social_camp_list.marketing_active>.sp_social_camp_body>.sp_template_list,
    .sp_social_camp_list.thumbnail_active>.sp_social_camp_body>.sp_campaign_list,
    .sp_social_camp_list.thumbnail_active>.sp_social_camp_body>.sp_template_list,
    .sp_social_camp_list.social_active>.sp_social_camp_body>.sp_campaign_list,
    .sp_social_camp_list.social_active>.sp_social_camp_body>.sp_template_list,
    .sp_campaign_list.load_myfolder_body,
    .sp_campaign_list,
    .sp_template_list {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    }

    .sp_social_camp_list.supersub_active,
    .sp_social_camp_list.thumbnail_active,
    .sp_social_camp_list.marketing_active,
    .sp_social_camp_list.social_active {
        grid-template-columns: 100%;
    }

    .sp_dash_banner_inner {
        grid-template-columns: 100%;
    }

    .sp_dbi_img {
        position: absolute;
        height: 100%;
        width: 100%;
    }

    .sp_dbi_img>svg {
        opacity: 0.2;
        width: 50%;
        height: 90%;
        right: 0;
        left: auto;
    }

    .sp_dbi_content {
        padding: 15px 30px;
    }

    .sp_dbi_content>ul {
        margin-bottom: 10px;
    }

    .sp_dbi_content>.sp_dbi_viewall {
        width: 140px;
        height: 34px;
        font-size: 12px;
    }

    .sp_dbi_content>ul>li {
        margin-right: 0px;
        width: 70px;
    }

    .sp_dbi_content>ul>li>a {
        padding: 6px;
    }

    .sp_dbi_content>h3 {
        font-size: 20px;
    }

    .sp_dbi_content>p {
        font-size: 12px;
    }

    .sp_profile_wrapper .sp_input_wrapper_list {
        display: block;
    }

    .sp_yt_thumb_popup_wrapper {
        grid-template-columns: 350px minmax(0, 1fr);
    }

    .sp_dash_minibanner_list>a {
        font-size: 15px;
    }

    .sp_dash_minibanner_list {
        gap: 15px;
    }

    .sp_admin_wrapper {
        grid-template-columns: minmax(0px, 1fr) 370px;
    }

    .sp_wl_setting_wrapper>.sp_wl_setting_label {
        max-width: 30%;
    }

    .sp_dash_oto_banner_static_svg .sp_dobss_cd {
        top: 29%;
        font-size: 0.95vw;
    }
    .sp_popup_wrapper.sp_ai_image_generator_popup::before{
        display: none;
    }
    .sp_header_wrapper .sp_header_inner .sp_template_name>p {
        max-width: 180px;
    }
}

@media(max-width:1024px) {
    .sp_profile_wrapper {
        flex-direction: column;
        max-width: 800px;
        margin: 0 auto;
    }

    .sp_profile_wrapper>.sp_profile_left {
        margin: 0;
        margin-bottom: 30px;
    }

    .sp_body_main .sp_nav_wrapper {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        background-color: transparent;
        opacity: 1;
        visibility: visible;
        z-index: 1;
    }

    .sp_body_main .sp_nav_wrapper>ul>li>a {
        display: flex;
    }

    .sp_body_main .sp_header_wrapper {
        left: -300px;
        z-index: 9999;
        transition: all 0.3s;
    }

    .sp_body_main.nav_open .sp_header_wrapper {
        left: 0px;
    }

    .sp_body_main .sp_content_wrapper {
        margin-left: 0;
    }

    .sp_template_popup_wrapper {
        left: 0;
        top: 62px;
    }

    .sp_image_preview_wrapper>.sp_ipw_inner>img {
        max-height: 300px;
    }

    .sp_addtuto_wrapper,
    .sp_tuto_wrapper {
        grid-template-columns: 290px auto;
    }

    .sp_tuto_wrapper>.sp_tuto_sidebar {
        padding: 20px;
    }

    .sp_profile_access_list {
        grid-template-columns: repeat(auto-fill, minmax(46%, 1fr));
    }

    .sp_billing_wrapper {
        grid-template-columns: 1fr;
    }

    .sp_popup_wrapper#click_share_popup::before {
        display: none;
    }

    .sp_yt_thumb_popup_wrapper {
        grid-template-columns: 300px minmax(0, 1fr);
    }

    .sp_video_box_inner {
        grid-template-columns: 160px minmax(0, 1fr);
    }

    .cdm_header_search_toggle {
        display: flex;
    }

    .cdm_header_search_wrapper {
        max-width: 100%;
        position: fixed;
        top: 61px;
        left: 0;
        right: 0;
        z-index: 9;
        border-radius: 0;
        border: none;
        opacity: 0;
        visibility: hidden;
    }

    .open_search .cdm_header_search_wrapper {
        opacity: 1;
        visibility: visible;
    }

    .sp_checkout_box_wrapper {
        flex-direction: column;
    }

    .cdma_dashboard_transactions .sp_table_wrapper {
        overflow: auto;
    }

}

@media(max-width:768px) {
    .sp_auth_wrapper::before {
        display: none;
    }

    /* .sp_header_wrapper{
        padding: 15px;
    } */
    .sp_nav_toggle {
        display: inline-flex;
    }

    .sp_header_wrapper .sp_header_inner {
        justify-content: space-between;
        padding: 12px 30px;
    }

    .sp_body_main .sp_nav_toggle {
        display: flex;
    }

    .sp_nav_wrapper {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: #ffffff;
        padding: 20px 30px;
        z-index: -1;
        opacity: 0;
        visibility: hidden;
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        transition: all 0.3s;
        -webkit-transform: translateY(-10px);
        -moz-transform: translateY(-10px);
        transform: translateY(-10px);
        border-radius: 0;
    }

    .nav_open .sp_nav_wrapper {
        opacity: 1;
        visibility: visible;
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        transform: translateY(0px);
    }

    .sp_nav_wrapper>ul>li {
        display: block;
        margin-right: 0;
        margin-bottom: 10px;
    }

    .sp_nav_wrapper>ul>li>a {
        display: flex;
        margin-right: 0;
        padding: 10px;
        padding-left: 15px;
    }

    .sp_nav_wrapper>ul>li>a:hover,
    .sp_nav_wrapper>ul>li>a.active {
        box-shadow: inset 3px 0px 0px var(--main-color);
        background-color: #f1f5ff;
    }

    .sp_page_title {
        flex-direction: column;
    }

    .sp_page_title>.sp_page_heading {
        width: 100%;
        margin-bottom: 20px;
        font-size: 18px;
    }

    .sp_page_title>.sp_pt_right {
        width: 100%;
        justify-content: flex-start;
    }

    .sp_page_title>.sp_pt_right>.sp_search_wrapper {
        max-width: inherit;
    }

    .sp_popup_wrapper::before {
        display: none;
    }

    /* .sp_content_wrapper {
        margin: 30px 0;
    } */

    .sp_dfytemp_header_search {
        flex-direction: column;
    }

    .sp_dfytemp_header_search>.sp_custom_dd_wrapper {
        margin-bottom: 15px;
    }

    .sp_dfytemp_header_search>.sp_custom_dd_wrapper>.sp_cusdd_toggle {
        border-radius: 6px;
    }

    .sp_dfytemp_header_search>.sp_custom_dd_wrapper.open>.sp_cusdd_toggle {
        border-radius: 6px 6px 0 0;
    }

    .sp_dfytemp_header_search>.sp_search_wrapper {
        margin-bottom: 15px;
    }

    .sp_dfytemp_header_search>.sp_btn {
        border-radius: 10px;
    }

    .sp_my_designs .sp_dfytemp_header_search>.sp_search_wrapper>input,
    .sp_dfytemp_header_search>.sp_search_wrapper>input {
        border-radius: 6px;
    }

    .sp_template_heading>h3 {
        font-size: 16px;
        margin-left: 35px;
    }

    .sp_template_heading .sp_back_arrow>svg {
        width: 16px;
        height: 16px;
    }

    .sp_dfytemp_filter_wrapper {
        flex-direction: column;
        align-items: flex-start;
    }

    .sp_dfytemp_filter_wrapper>h3 {
        margin-bottom: 10px;
    }

    .sp_addtuto_wrapper {
        grid-template-columns: 100%;
    }

    .sp_addtuto_list {
        margin-left: 0;
        margin-top: 15px;
    }

    .sp_tuto_wrapper {
        grid-template-columns: 100%;
    }

    .sp_tuto_wrapper>.sp_tuto_sidebar {
        margin-right: 0;
    }

    .sp_dash_wrapper .sp_dash_inner {
        display: block;
    }

    .sp_dbi_content {
        padding: 25px 30px;
        white-space: inherit;
    }

    .sp_dash_ad>a>img,
    .sp_dash_ad>a>svg {
        max-height: fit-content;
    }

    .sp_dash_ad {
        /* width: calc(50% - 15px); */
        margin-top: 20px;
        vertical-align: top;
    }

    .sp_dash_inner .sp_dash_ad:nth-child(2) {
        margin-left: 0;
    }

    .sp_theme_wrapper_popup,
    .sp_bundletemp_wrapper_popup {
        padding: 30px 0px;
    }

    .sp_filter_tab_wrapper {
        margin-bottom: 15px;
        margin-left: 0 !important;
    }

    .sp_wf_editor_wrapper {
        flex-direction: column-reverse;
    }

    .sp_wf_editor_sidebar {
        margin: 0 auto;
    }

    .sp_company_profile_wrapper {
        grid-template-columns: 1fr;
    }

    .sp_marketplace_banner_inner {
        padding: 15px;
    }

    .sp_dash_minibanner_list>a {
        flex: inherit;
    }

    .sp_social_clkshre_wrapper {
        flex-direction: column;
    }

    .sp_url_setup_wrapper>.sp_url_fixed {
        word-break: break-all;
        display: inline;
        padding: 10px 20px;
    }

    .sp_social_clkshre_wrapper>.sp_url_setup_wrapper {
        border-radius: 8px;
        border-right: 1px solid #e9e9f4;
    }

    .sp_social_clkshre_wrapper>.sp_clkshre_views {
        width: 100%;
    }

    .sp_visitor_count_box {
        border-radius: 8px;
        margin-top: 5px;
    }

    .sp_yt_thumb_popup_wrapper {
        grid-template-columns: 100%;
    }

    .sp_yt_thumb_popup_wrapper>.sp_yt_thumb_popup_preview {
        position: relative;
    }

    .sp_video_box_inner {
        grid-template-columns: 120px minmax(0, 1fr);
        align-items: flex-start;
    }

    .sp_whats_new_list {
        gap: 10px;
        grid-template-columns: 225px 225px;
    }

    .cdm_header_right {
        gap: 5px;
    }

    .cdm_header_icon_btn {
        width: 30px;
    }

    .cdm_header_action_btns>.sp_btn.sp_btn_signup {
        min-width: auto;
    }

    .cdm_single_wrapper {
        margin: 30px 0;
    }

    .cdm_single_wrapper {
        grid-template-columns: 100%;
    }

    .cdm_design_price_box>h1 {
        font-size: 26px;
    }

    .cdm_design_price_box>.sp_btn {
        font-size: 16px;
        min-width: inherit;
    }

    .cdm_single_content>h1 {
        font-size: 22px;
    }

    .cdm_design_image {
        min-height: inherit;
    }

    .cdm_review_wrapper>.cdm_review_header>h3 {
        font-size: 16px;
    }

    .cdm_review_wrapper>.cdm_review_header>.cdm_create_review_link {
        font-size: 14px;
    }

    .sp_admin_wrapper {
        grid-template-columns: 100%;
    }

    .sp_wl_white_box {
        padding: 30px;
    }

    .sp_wl_setting_wrapper {
        flex-direction: column;
        margin-bottom: 10px;
    }

    .sp_wl_setting_wrapper>.sp_wl_setting_label {
        max-width: 100%;
    }

    /* New Signup */
    .cdn_signup_inner {
        grid-template-columns: 100%;
    }

    .cdn_signup_testimonial_wrapper {
        display: none;
    }

    .sp_dash_oto_banner_static_svg .sp_dobss_cd {
        top: 32%;
        font-size: 4vw;
    }

    .sp_dash_oto_banner_static_svg .sp_dobss_notifi {
        top: 49.8%;
        font-size: 5.2vw;
    }
}

@media(max-width:480px) {
    .sp_camp_type_wrapper>.sp_camp_type_item {
        margin-bottom: 15px;
    }

    .sp_page_title>.sp_pt_right>.sp_btn {
        min-width: 140px;
        margin: 0;
    }

    .sp_auth_social_btns .sp_social_btn {
        margin-right: 10px;
        min-width: 135px;
        font-size: 14px;
        border-radius: 6px;
    }

    .sp_auth_social_btns .sp_social_btn>span {
        width: 30px;
        height: 30px;
        margin-right: 12px;
    }

    .sp_auth_action>.sp_auth_line {
        width: 30px;
        margin: 0 10px;
    }

    .sp_auth_body .sp_btn {
        min-width: 100px;
        height: 40px;
        line-height: 42px;
        font-size: 14px;
    }

    .sp_camp_type_wrapper {
        margin: 0 -5px;
        margin-bottom: 15px;
    }

    .sp_camp_type_wrapper>.sp_camp_type_item {
        padding: 0 5px
    }

    .sp_camp_type_wrapper>.sp_camp_type_item>.sp_camp_type_inner>label>span {
        width: 85px;
        height: 85px;
        border-radius: 8px;
    }

    .sp_pd_content {
        margin-top: -30px;
        padding: 0 10px 0 20px;
    }

    .sp_pd_content>.sp_pd_avatar>.sp_pd_thunb_uploader {
        right: 0px;
        bottom: 0px;
    }

    .sp_pd_content>.sp_pd_avatar {
        margin-right: 15px;
    }

    .sp_pd_content>.sp_pd_avatar,
    .sp_pd_content>.sp_pd_avatar>img,
    .sp_pd_content>.sp_pd_avatar>.sp_pd_initials {
        width: 90px;
        height: 90px;
        border-radius: 6px;
        font-size: 25px;
    }

    .sp_profile_detail>img {
        width: 100%;
    }

    .sp_pd_content>.sp_pd_detail {
        padding-top: 40px;
    }

    .sp_pd_content>.sp_pd_detail>h3 {
        font-size: 18px;
    }

    .sp_profile_box {
        padding: 30px;
    }

    .sp_body_main .sp_content_wrapper {
        margin: 30px 0;
    }

    .sp_body_main .sp_content_wrapper {
        padding: 0 20px;
    }

    .sp_page_title>.sp_pt_right {
        flex-direction: column;
    }

    /* .sp_page_title > .sp_pt_right > .sp_search_wrapper{
        margin-bottom: 15px;
    } */
    .sp_template_heading {
        flex-direction: column;
        margin-bottom: 30px;
    }

    .sp_template_heading>h3 {
        margin-bottom: 15px;
    }

    .sp_setting_container .sp_template_heading>h3 {
        margin-bottom: 0px;
    }

    .sp_template_heading .sp_back_arrow {
        top: 17%;
    }

    .sp_template_popup_wrapper {
        padding: 30px;
    }

    .sp_container {
        padding: 0 20px;
    }

    .sp_logo {
        font-size: 20px;
        margin-right: 20px;
    }

    .sp_nav_wrapper>ul>li>ul {
        opacity: inherit;
        visibility: inherit;
        transform: none;
        position: relative;
        box-shadow: none;
        padding-left: 40px;
    }

    .sp_assets_uploader_wrapper {
        flex-direction: column;
    }

    .sp_assets_body {
        margin-left: 0;
        width: 100%;
        margin-top: 20px;
    }

    .sp_assets_type_list ul {
        flex-wrap: wrap;
    }

    .sp_assets_image_list>ul {
        grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    }

    .sp_assets_image_list>ul>li>.sp_assets_image {
        height: 110px;
    }

    .sp_header_wrapper .sp_header_inner {
        padding: 12px 15px;
    }

    .sp_announcements_icon_wrapper {
        margin-right: 10px;
    }

    .sp_nav_toggle {
        margin-right: 10px;
    }

    .sp_logo {
        width: 110px;
    }

    .sp_logo>a.sp_logo_inner>img {
        width: 110px;
    }

    .sp_assets_uploader_wrapper .sp_assets_sidebar {
        width: 100%;
    }

    .sp_profile_access_list {
        grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
    }

    .sp_campaign_list>.sp_campaign_item>.sp_campaign_inner>.sp_camp_detail>h3>.sp_pd_name,
    .listview_theme .sp_theme_wrapper_popup .sp_campaign_list>.sp_campaign_item>.sp_campaign_inner>.sp_camp_detail>h3>.sp_pd_name {
        max-width: 120px;
    }

    .listview_mydrive .sp_campaign_list.load_myfolder_body>.sp_campaign_item>.sp_campaign_inner>.sp_camp_img>.sp_camp_overlay .sp_btn,
    .listview_theme .sp_campaign_list.load_themes_list>.sp_campaign_item>.sp_campaign_inner>.sp_camp_img>.sp_camp_overlay .sp_btn {
        height: 30px;
        line-height: 30px;
        font-size: 13px;
        min-width: 70px;
        border-radius: 6px;
        padding: 0;
    }

    .sp_te_editor_wrapper {
        grid-template-columns: 100%;
    }

    .sp_te_editor_icon {
        bottom: -30px;
        left: calc(50% - 15px);
        top: auto;
        transform: rotate(90deg);
    }

    .sp_te_editor_content,
    .sp_te_editor_sidebar .sp_search_wrapper,
    .sp_te_editor_sidebar {
        max-width: 100%;
    }

    .sp_setting_wrapper {
        flex-direction: column;
    }

    .sp_storage_tab_wrapper {
        padding: 30px;
    }

    .sp_storage_tab_wrapper>h3 {
        margin-bottom: 20px;
        font-size: 16px;
    }

    .sp_wm_wrapper {
        grid-template-columns: 100%;
    }

    .sp_profile_container,
    .sp_setting_container,
    .sp_package_container {
        margin: 30px auto;
    }

    .dataTables_wrapper {
        overflow: auto;
    }

    .dataTables_wrapper {
        overflow: auto;
    }

    .dataTables_wrapper .dataTables_paginate {
        position: sticky;
        left: 0;
    }

    .sp_social_camp_list.thumbnail_active,
    .sp_social_camp_list.marketing_active,
    .sp_social_camp_list.social_active {
        grid-template-columns: 100%;
    }

    .sp_whats_new_list {
        gap: 10px;
        grid-template-columns: 225px;
    }

    /* New Signup */
    .cdn_signup_inner {
        padding: 40px 15px;
    }

    .cdn_signup_content_box {
        padding: 30px 20px;
    }

    .cdn_signup_content_box>h1 {
        font-size: 22px;
    }

    .cdn_signup_content_box>h1>span {
        font-size: 14px;
    }

    .cdn_signup_content_box>p {
        font-size: 16px;
    }

    .cdn_signup_content_box .sp_input_wrapper .sp_input {
        height: 52px;
        border-radius: 12px;
    }

    .cdn_signup_content_box .sp_btn {
        height: 52px;
        line-height: 52px;
        border-radius: 12px;
    }
}

/********************************************************************************************* 
52. responsive end
*********************************************************************************************/

.sp_copb_wrapper {
    max-width: 400px;
    background-color: #ffffff;
    border-radius: 5px;
    padding: 30px;
}

.sp_copb_wrapper .sp_copb_body {
    border-bottom: 1px solid #e1e5ea;
}

.sp_copb_wrapper .sp_copb_item {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sp_copb_wrapper .sp_copb_item h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 900;
    color: var(--main-color);
}

.sp_copb_wrapper .sp_copb_item p {
    margin: 12px 0;
    font-size: 16px;
}

.sp_copb_wrapper .sp_btn {
    display: block;
    margin-top: 4px;
    margin-bottom: 12px;
}



/* new design for create campaign popup start */
/* .sp_popup_wrapper#add_campaign_popup{
    padding: 0 !important;
    top: 64px;
    background-color: #ffffff;
}
.sp_popup_wrapper#add_campaign_popup > .sp_popup_inner{
    max-width: 100%;
    border-radius: 0;
}
.sp_popup_wrapper#add_campaign_popup::before{
    display: none;
}
.sp_popup_wrapper#add_campaign_popup .sp_popup_title{
    text-align: left;
}
.sp_popup_wrapper#add_campaign_popup .sp_input_wrapper .sp_input{
    max-width: 400px;
}
.sp_popup_wrapper#add_campaign_popup .sp_camp_type_wrapper{
    justify-content: flex-start;
}
.sp_popup_wrapper#add_campaign_popup .sp_popup_footer.text-center{
    text-align: left;
}
.sp_popup_wrapper#add_campaign_popup .sp_popup_footer,
.sp_popup_wrapper#add_campaign_popup .sp_popup_body,
.sp_popup_wrapper#add_campaign_popup .sp_popup_header{
    max-width: 1200px;
    margin: 0 auto;
}
.sp_popup_wrapper#add_campaign_popup .sp_camp_type_wrapper > .sp_camp_type_item > .sp_camp_type_inner > label > span{
    width: 120px;
    height: 120px;
} */
/* new design for create campaign popup end */


.sp_content_wrapper>button {
    position: relative;
    z-index: 999;
}

.sp_apikey_box {
    max-width: 500px;
}

.sp_apikey_box .sp_url_setup_wrapper>.sp_url_fixed {
    box-shadow: 0px 0px 0px 1px;
    border-radius: 10px;
    flex: 1;
}

.sp_apikey_box .sp_url_setup_wrapper .tooltip-inner {
    min-width: 105px;
    text-align: center;
}

.sp_apikey_box .sp_url_setup_wrapper .sp_copy_url {
    position: absolute;
    right: 5px;
    top: 13px;
}

.sp_table_wrapper .sp_subuser_label {
    font-size: 12px;
    color: #acaeb5;
}

.sp_table_wrapper .sp_subuser_label>svg {
    width: 12px !important;
    height: auto;
    margin-right: 4px;
}

.sp_table_wrapper .sp_subuser_label>svg path {
    fill: #acaeb5;
}


.sp_social_error {
    color: #f44336;
    background-color: #ffebee;
    padding: 10px 15px;
    border-radius: 5px;
}

.sp_facebook_login_btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: #1877F2;
    border-radius: 6px;
    padding: 0px 20px;
}


/* Calendar start */
.sp_calendar_wrapper {
    background-color: #ffffff;
    padding: 30px;
    border-radius: 8px;
    animation: calenderAnim 0.3s;
    animation-fill-mode: forwards;
}

@keyframes calenderAnim {
    0% {
        transform: translateY(10px);
        opacity: 0;
    }

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

.fc .fc-timegrid-col.fc-day-today,
.fc .fc-daygrid-day.fc-day-today {
    background-color: rgba(var(--main-color-rgb), 0.08);
}

.fc-theme-standard th {
    border: none;
}

.fc .fc-col-header-cell-cushion {
    padding: 10px;
    color: var(--color-heading);
}

.fc-scrollgrid-section-header {
    box-shadow: 0 1px 3px rgb(0 0 0 / 12%), 0 1px 2px rgb(0 0 0 / 24%);
    border-radius: 5px;
    position: relative;
    z-index: 5;
}

.fc-theme-standard .fc-scrollgrid {
    border: none;
    /* border-spacing: 0px 3px; */
}

.fc-theme-standard td,
.fc-theme-standard th {
    border-color: #e9e9e9;
}

.fc-scrollgrid-section-body>td {
    border: 1px solid #e9e9e9;
    border-top: none;
    border-left-width: 1px !important;
}

.fc-theme-standard .fc-scrollgrid>thead>tr>td {
    border: none;
}

.fc .fc-daygrid-day-number {
    padding-top: 5px;
    color: var(--color-body);
    font-size: 16px;
    width: 32px;
    height: 32px;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 5px;
    border-radius: 4px;
}

.fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-number {
    color: #ffffff;
    background-color: var(--main-color);
}

.fc .fc-button-group {
    box-shadow: 0 1px 3px rgb(0 0 0 / 12%), 0 1px 2px rgb(0 0 0 / 24%);
    border-radius: 5px;
}

.fc .fc-button-primary {
    background-color: transparent;
    color: var(--color-body);
    border-color: #cfd1d9;
    text-transform: capitalize;
    border: none;
}

.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active,
.fc .fc-button-primary:hover,
.fc .fc-button-primary:disabled {
    background-color: var(--main-color);
    border-color: var(--main-color);
}

.fc .fc-button-primary:focus,
.fc .fc-button-primary:not(:disabled).fc-button-active:focus,
.fc .fc-button-primary:not(:disabled):active:focus {
    box-shadow: none;
}

/* .fc .fc-daygrid-day-frame{
    cursor: pointer;
} */
.fc .fc-daygrid-day-events {
    margin-top: 5px;
    padding: 0 10px;
    max-height: 100px;
    overflow-x: hidden;
    overflow-y: auto;
}

.fc-h-event {
    background-color: transparent;
    border-color: var(--main-color);
    margin-bottom: 5px;
    padding: 4px;
    font-weight: 600;
    font-size: 12px;
    border: none;
}

.fc-h-event .fc-event-main {
    color: var(--main-color);
}

.fc-h-event .fc-event-title {
    text-overflow: ellipsis;
}

.fc .fc-daygrid-event-harness:nth-last-child(2) .fc-h-event {
    margin-bottom: 0;
}

.fc .fc-scroller-harness,
.fc .fc-scroller-liquid-absolute {
    overflow: inherit !important;
}

.sp_cal_add_post_btn {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 34px;
    height: 34px;
    border-radius: 50px;
    background-color: var(--main-color);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s cubic-bezier(0.71, -0.11, 0.25, 0.88);
    transform: scale(0);
    cursor: pointer;
    z-index: 100;
}

.fc-daygrid-day-frame:hover .sp_cal_add_post_btn {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

.fc-daygrid-day-frame .tooltip-inner {
    min-width: 100px;
    text-align: center;
}

.fc-theme-standard td.fc-day-past {
    background-color: #fbfbfb;
}

.fc-theme-standard td.fc-day-past .sp_cal_add_post_btn {
    display: none;
}

.fc .fc-daygrid-day-bg .fc-highlight {
    display: none;
}

.sp_popup_wrapper#cal_post_design_popup>.sp_popup_inner {
    max-width: 1200px;
}

.sp_popup_wrapper#cal_post_design_popup>.sp_popup_inner .sp_popup_body {
    margin-bottom: 0;
}

.sp_popup_wrapper#cal_post_design_popup>.sp_popup_inner .sp_popup_body .sp_popup_tab_content .sp_view_more {
    margin-bottom: 0;
}

.sp_popup_wrapper#cal_post_design_popup .sp_input_wrapper input.sp_input {
    padding-top: 0;
}

#cal_post_design_popup .sp_popup_title {
    text-align: left;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

#cal_post_design_popup .sp_popup_title .sp_back_arrow {
    display: none;
}

.cal_post_editor_active #cal_post_design_popup .sp_popup_title .sp_back_arrow {
    display: inline-flex;
}

#cal_post_design_popup .sp_back_arrow {
    cursor: pointer;
    width: 25px;
    height: 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    margin-right: 15px;
}

#cal_post_design_popup .sp_back_arrow>svg {
    width: 20px;
    height: 20px;
}

#cal_post_design_popup .sp_back_arrow>svg path {
    fill: var(--main-color);
}

#cal_post_design_popup .sp_popup_tab {
    margin: 0;
}

#cal_post_design_popup .sp_popup_tab>ul {
    background-color: rgba(var(--main-color-rgb), 0.05);
}

#cal_post_design_popup .sp_campaign_list>.sp_campaign_item>.sp_campaign_inner>.sp_camp_img>img,
#cal_post_design_popup .sp_campaign_list>.sp_campaign_item>.sp_campaign_inner>.sp_camp_img>.sp_camp_overlay,
#cal_post_design_popup .sp_campaign_list>.sp_campaign_item>.sp_campaign_inner>.sp_camp_img>.sp_camp_img_overlay {
    border-radius: 5px;
}

#cal_post_design_popup .no_search_result {
    display: block;
}


.sp_cpdv_wrapper {
    display: grid;
    grid-template-columns: 184px auto;
    gap: 20px;
}

.sp_cpdv_tab_content {
    display: none;
}

.sp_cpdv_tab_content.active {
    display: block;
}

.sp_cpdv_wrapper .sp_cpdv_sidebar {
    background-color: rgba(var(--main-color-rgb), 0.1);
    padding: 35px 0 15px 15px;
    border-radius: 8px;
}

.sp_cpdv_wrapper .sp_cpdv_sidebar>ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.sp_cpdv_wrapper .sp_cpdv_sidebar>ul>li {
    display: block;
    margin-bottom: 10px;
}

.sp_cpdv_wrapper .sp_cpdv_sidebar>ul>li:last-child {
    margin-bottom: 0px;
}

.sp_cpdv_wrapper .sp_cpdv_sidebar>ul>li>a {
    display: block;
    padding: 10px 15px;
    border-radius: 50px 0 0 50px;
    color: var(--color-body);
    font-size: 16px;
}

.sp_cpdv_wrapper .sp_cpdv_sidebar>ul>li.active>a {
    background-color: var(--main-color);
    color: #ffffff;
}

.sp_cpdv_wrapper .sp_iup_progress_bar_wrapper {
    position: relative;
    margin-bottom: 30px;
}

.sp_cpdv_wrapper .sp_iup_progress_bar_wrapper>.sp_iup_progress_bar {
    height: 32px;
    background-color: rgba(var(--main-color-rgb), 0.1);
    border-color: var(--main-color);
    margin: 0;
}

.sp_cpdv_wrapper .sp_iup_progress_bar_wrapper>.sp_iup_progress_bar>.sp_iup_progress_bar_active {
    opacity: 0.3;
    top: 0px;
    left: 0px;
    bottom: 0px;
}

.sp_cpdv_wrapper .sp_iup_progress_bar_wrapper>.sp_iup_progress_bar>.sp_iup_progress_bar_text {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    line-height: 32px;
    color: var(--main-color);
    z-index: 1;
    font-weight: 600;
}

.sp_cpdv_wrapper .sp_iup_progress_bar_wrapper .sp_iup_close {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 5;
}

.sp_cpdv_wrapper .sp_iup_progress_bar_wrapper .sp_iup_close>.sp_iup_close_icon {
    width: 20px;
    height: 20px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    cursor: pointer;
}

.sp_cpdv_wrapper .sp_iup_progress_bar_wrapper .sp_iup_close>.sp_iup_close_icon>span {
    width: 10px;
    height: 1px;
    background-color: #FF1515;
    position: absolute;
    transform: rotate(45deg);
}

.sp_cpdv_wrapper .sp_iup_progress_bar_wrapper .sp_iup_close>.sp_iup_close_icon>span:nth-child(2) {
    transform: rotate(-45deg);
}

.sp_cal_video_requirement>h3 {
    margin: 0;
    color: var(--main-color);
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.sp_cal_video_requirement>h3 svg path {
    stroke: var(--main-color);
}

.sp_cvr_table {
    border: 1px solid rgba(var(--main-color-rgb), 0.2);
    border-radius: 8px;
}

.sp_cvr_table>.sp_cvr_head {
    background-color: rgba(var(--main-color-rgb), 0.05);
    border-bottom: 1px solid rgba(var(--main-color-rgb), 0.2);
    font-weight: 600;
    border-radius: 8px 8px 0 0;
}

.sp_cvr_table .sp_cvr_row {
    display: flex;
    align-items: center;
}

.sp_cvr_table .sp_cvr_row>.sp_cvr_column {
    flex: 1;
    padding: 10px 20px;
    color: var(--color-body);
}

.sp_cvr_table .sp_cvr_body .sp_cvr_row {
    border-bottom: 1px solid rgba(var(--main-color-rgb), 0.1);
}

.sp_cvr_table .sp_cvr_body .sp_cvr_row:last-child {
    border-bottom: none;
}

.sp_cal_post_design_list .sp_cal_pdl_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 25px;
}

.sp_cal_post_design_list #sp_cpdv_tab_designs>.sp_btn {
    margin-top: 15px;
}

.sp_cal_post_design_create {
    display: none;
    gap: 30px;
    grid-template-columns: 60% calc(40% - 30px);
    align-items: flex-start;
}

.cal_post_editor_active .sp_cal_post_design_create {
    display: grid;
}

.cal_post_editor_active .sp_cal_post_design_list {
    display: none;
}

.sp_cal_post_design_create .sp_cal_pdc_right>h3 {
    font-size: 16px;
    margin: 0;
    margin-bottom: 15px;
    font-weight: 600;
}

.sp_cal_pdc_preview_wrapper {
    padding: 40px;
    background-color: #F0F2F5;
    border-radius: 5px;
}

.sp_cal_pdc_preview_wrapper>.sp_cal_pdc_preview_inner {
    display: none;
}

.sp_cal_pdc_preview_type {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 700;
    color: var(--color-heading);
    margin-bottom: 10px;
}

.sp_cal_pdc_preview_theme {
    background-color: #ffffff;
    border-radius: 5px;
    box-shadow: 0px 1px 3px rgb(0 0 0 / 20%);
}

.sp_cal_pdc_preview_theme .sp_cal_pdct_image {
    position: relative;
}

.sp_cal_pdc_preview_theme .sp_cal_pdct_image img {
    width: 100%;
    background-color: #fbfbfb;
    height: 250px;
    object-fit: contain;
}

.sp_cal_pdc_preview_theme .sp_cal_pdct_image a {
    display: flex;
    align-items: center;
    justify-content: center;
}

.sp_cal_pdc_preview_theme .sp_cal_pdct_image a>.sp_cal_pdct_video_play {
    width: 36px;
    height: 36px;
    border-radius: 36px;
    background-color: var(--main-color);
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
}

.sp_cal_pdct_header {
    display: grid;
    grid-template-columns: 40px 1fr 20px;
    gap: 15px;
    align-items: center;
    padding: 16px;
}

.sp_cal_pdct_header>.sp_cal_pdct_header_icon {
    width: 40px;
    height: 40px;
    border-radius: 50px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sp_cal_pdct_header>.sp_cal_pdct_header_icon>img {
    border-radius: 50px;
    width: 40px;
    height: 40px;
}

.sp_cal_pdct_header>.sp_cal_pdct_header_action {
    width: 20px;
    height: 20px;
}

.sp_cal_pdct_header>.sp_cal_pdct_header_content>h3 {
    margin: 0;
    font-size: 14px;
    color: #050505;
    font-weight: 600;
}

.sp_cal_pdct_header>.sp_cal_pdct_header_content>p {
    margin: 0;
    font-size: 13px;
    color: #65676B;
}

.sp_cal_pdct_caption {
    margin-bottom: 10px;
    padding: 0px 16px;
    color: #050505;
    word-break: break-word;
}

/* .sp_cal_pdct_caption p{
    margin: 0;
} */

.sp_cal_pdct_grid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 25px;
}

.sp_cal_pdct_grid>.sp_cal_pdct_grid_item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #606266;
    font-weight: 600;
}

.sp_cal_pdc_preview_wrapper.facebook>.sp_cal_pdc_preview_inner.facebook {
    display: block;
}

.sp_cal_pdc_preview_wrapper.instagram>.sp_cal_pdc_preview_inner.instagram {
    display: block;
}

.sp_cal_pdc_preview_wrapper.pinterest>.sp_cal_pdc_preview_inner.pinterest {
    display: block;
}

.sp_cal_pdc_preview_wrapper.twitter>.sp_cal_pdc_preview_inner.twitter {
    display: block;
}

.sp_cal_pdc_preview_wrapper.linkedin>.sp_cal_pdc_preview_inner.linkedin {
    display: block;
}

/* instagram preview start */
.sp_cal_pdc_preview_inner.instagram .sp_cal_pdc_preview_theme {
    box-shadow: 0px 0px 0px 1px #DBDBDB;
}

.sp_cal_pdc_preview_inner.instagram .sp_cal_pdct_header {
    grid-template-columns: 32px 1fr 20px;
    padding: 12px;
}

.sp_cal_pdc_preview_inner.instagram .sp_cal_pdct_header>.sp_cal_pdct_header_icon {
    width: 32px;
    height: 32px;
}

.sp_cal_pdc_preview_inner.instagram .sp_cal_pdct_header>.sp_cal_pdct_header_action {
    width: 18px;
    height: 18px;
}

.sp_cal_pdc_preview_inner.instagram .sp_cal_pdct_header>.sp_cal_pdct_header_icon>img {
    width: 32px;
    height: 32px;
}

.sp_cal_pdc_preview_inner.instagram .sp_cal_pdct_grid {
    padding: 14px 12px;
}

.sp_cal_pdc_preview_inner.instagram .sp_cal_pdct_grid>.sp_cal_pdct_grid_item {
    gap: 15px;
}

.sp_cal_pdc_preview_inner.instagram .sp_cal_pdct_caption {
    color: #262626;
}

.sp_cal_pdc_preview_inner.instagram .sp_cal_pdct_caption>.sp_cal_preview_source {
    font-weight: 700;
}

.sp_cal_pdc_preview_inner.instagram .sp_cal_pdct_date {
    padding: 0px 15px 15px;
    text-transform: uppercase;
    font-size: 11px;
    color: #858181;
    letter-spacing: 0.2px;
    font-weight: 300;
}

/* instagram preview end */

/* pinterest preview start */
.sp_cal_pdc_preview_wrapper.pinterest {
    background-color: #fbfbfb;
    box-shadow: 0px 0px 0px 1px #e4e6e9;
}

.sp_cal_pdc_preview_wrapper.pinterest>.sp_cal_pdc_preview_inner.pinterest {
    max-width: 266px;
    margin: 0 auto;
}

.sp_cal_pdc_preview_inner.pinterest .sp_cal_pdc_preview_theme {
    padding: 15px;
    box-shadow: 0px 0px 0px 1px rgb(0, 0, 0, 0.05);
}

.sp_cal_pdc_preview_inner.pinterest .sp_cal_pdc_preview_theme .sp_cal_pdct_image {
    margin-bottom: 10px;
}

.sp_cal_pdc_preview_inner.pinterest .sp_cal_pdc_preview_theme .sp_cal_pdct_image>img {
    border-radius: 16px;
    background-color: #ffffff;
}

.sp_cal_pdc_preview_inner.pinterest .sp_cal_pdct_caption {
    color: #111111;
    font-size: 13px;
    padding: 0;
}

.sp_cal_pdc_preview_inner.pinterest .sp_cal_pdct_header {
    grid-template-columns: 32px 1fr 20px;
    gap: 5px;
    padding: 0;
}

.sp_cal_pdc_preview_inner.pinterest .sp_cal_pdct_header>.sp_cal_pdct_header_icon {
    width: 32px;
    height: 32px;
    background-color: #efefef;
}

.sp_cal_pdc_preview_inner.pinterest .sp_cal_pdct_header>.sp_cal_pdct_header_icon>img {
    width: 32px;
    height: 32px;
}

.sp_cal_pdc_preview_inner.pinterest .sp_cal_pdct_header>.sp_cal_pdct_header_content>h3 {
    font-size: 13px;
    font-weight: 700;
    color: #111111;
}

.sp_cal_pdc_preview_inner.pinterest .sp_cal_pdct_header>.sp_cal_pdct_header_content>p {
    font-size: 13px;
    color: #111111;
}

/* pinterest preview end */

/* twitter preview start */
.sp_cal_pdc_preview_wrapper.twitter {
    background-color: rgba(0, 0, 0, 0.03);
    padding: 40px 20px;
}

.sp_cal_pdc_preview_inner.twitter .sp_cal_pdct_header {
    grid-template-columns: 40px 1fr 18px;
    gap: 8px;
    padding: 0 0 15px;
    align-items: flex-start;
}

.sp_cal_pdc_preview_inner.twitter .sp_cal_pdc_preview_theme {
    padding: 15px;
    box-shadow: none;
}

.sp_cal_pdc_preview_inner.twitter .sp_cal_pdct_header>.sp_cal_pdct_header_icon>img {
    border-radius: 0px;
    width: 20px;
    height: auto;
}

.sp_cal_pdc_preview_inner.twitter .sp_cal_pdct_header>.sp_cal_pdct_header_content>h3 {
    color: #000000;
}

.sp_cal_pdc_preview_inner.twitter .sp_cal_pdct_header>.sp_cal_pdct_header_content>h3 .sp_cal_posted_date {
    color: #536471;
    font-weight: 400;
    font-size: 12px;
}

.sp_cal_pdc_preview_inner.twitter .sp_cal_pdct_header>.sp_cal_pdct_header_content>h3 .sp_cal_posted_date::before {
    content: ".";
    font-size: 16px;
    margin: 0 2px;
    width: 5px;
    height: 5px;
    line-height: 0px;
    display: inline-block;
    vertical-align: middle;
    margin-top: -4px;
    font-weight: 600;
}

.sp_cal_pdc_preview_inner.twitter .sp_cal_pdct_header>.sp_cal_pdct_header_content>p {
    padding: 0;
    color: #000000;
}

.sp_cal_pdc_preview_inner.twitter .sp_cal_pdct_header>.sp_cal_pdct_header_action {
    width: 18px;
    height: 18px;
    margin-top: 3px;
}

.sp_cal_pdc_preview_inner.twitter .sp_cal_pdct_image {
    padding-left: 48px;
}

.sp_cal_pdc_preview_inner.twitter .sp_cal_pdct_image>img {
    box-shadow: 0px 0px 0px 1px #CFD9DE;
    border-radius: 15px;
    background-color: #ffffff;
}

.sp_cal_pdc_preview_inner.twitter .sp_cal_pdct_grid {
    padding: 10px 0px;
    margin-left: 48px;
}

.sp_cal_pdc_preview_inner.twitter .sp_cal_pdct_grid>.sp_cal_pdct_grid_item {
    flex: 1;
}

.sp_cal_pdc_preview_inner.twitter .sp_cal_pdct_grid>.sp_cal_pdct_grid_item>svg {
    width: 15px;
    height: 15px;
}

/* twitter preview end */

/* Linkedin preview start */
.sp_cal_pdc_preview_wrapper.linkedin {
    padding: 30px 20px;
}

.sp_cal_pdc_preview_inner.linkedin .sp_cal_pdct_header {
    grid-template-columns: 48px 1fr 20px;
    gap: 10px;
    padding: 12px 16px 0;
    margin-bottom: 8px;
    align-items: flex-start;
}

.sp_cal_pdc_preview_inner.linkedin .sp_cal_pdc_preview_theme {
    box-shadow: 0px 0px 0px 1px rgb(0, 0, 0, 0.08);
    border-radius: 8px;
}

.sp_cal_pdc_preview_inner.linkedin .sp_cal_pdct_header>.sp_cal_pdct_header_icon {
    width: 48px;
    height: 48px;
}

.sp_cal_pdc_preview_inner.linkedin .sp_cal_pdct_header>.sp_cal_pdct_header_icon>img {
    border-radius: 0;
    width: 22px;
    height: auto;
}

.sp_cal_pdc_preview_inner.linkedin .sp_cal_pdct_header_content {
    margin-top: 5px;
}

.sp_cal_pdc_preview_inner.linkedin .sp_cal_pdct_grid>.sp_cal_pdct_grid_item {
    gap: 6px;
    font-size: 13px;
}

.sp_cal_pdc_preview_inner.linkedin .sp_cal_pdct_grid>.sp_cal_pdct_grid_item>svg {
    width: 14px;
    height: auto;
}

.sp_cal_pdc_preview_inner.linkedin .sp_cal_pdct_header>.sp_cal_pdct_header_content>p {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
}

.sp_cal_pdc_preview_inner.linkedin .sp_cal_pdct_header>.sp_cal_pdct_header_content>p>span:after {
    content: "•";
    margin: 0 4px;
    width: 5px;
    height: 5px;
    display: inline-block;
    vertical-align: middle;
    line-height: 4px;
    font-size: 10px;
}

/* Linkedin preview end */

.sp_calendar_wrapper .fc-timegrid-col-events,
.sp_calendar_wrapper .fc-daygrid-day-events {
    display: grid;
    grid-template-columns: 40px 40px 40px 40px;
    gap: 8px;
    padding: 6px 8px;
    /* bottom: 10px; */
}

.sp_calendar_wrapper .fc-timegrid-col-events {
    /* display: inherit;
    grid-template-columns: inherit; */
    gap: 0;
    padding: 0;
}

.sp_calendar_wrapper .fc-daygrid-day-events::before,
.sp_calendar_wrapper .fc-daygrid-day-events::after {
    display: none;
}

.sp_calendar_wrapper .fc-daygrid-day-events>.fc-daygrid-day-bottom {
    margin: 0;
    padding: 0;
}

.sp_calendar_wrapper .fc-daygrid-day-events>.fc-daygrid-day-bottom .fc-more-link {
    width: 40px;
    height: 40px;
    box-shadow: 0px 0px 0px 1px var(--main-color);
    border-radius: 4px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: var(--main-color);
}

.sp_calendar_wrapper .fc-daygrid-day-events>.fc-daygrid-day-bottom .fc-more-link:hover {
    background-color: rgba(var(--main-color-rgb), 0.08);
}

.sp_calendar_wrapper .fc-daygrid-day-events .fc-daygrid-event-harness>a.fc-daygrid-dot-event {
    margin: 0;
    padding: 0;
}

.sp_calendar_wrapper .fc-daygrid-day-events .fc-daygrid-event-harness>a.fc-daygrid-dot-event:hover {
    background-color: transparent;
}

.sp_calendar_wrapper .fc-timegrid-event-harness {
    position: relative;
}

.sp_calendar_wrapper .fc-timegrid-event-harness>.fc-timegrid-event {
    box-shadow: none;
    background-color: transparent;
    border: none;
}

.sp_cal_event_wrapper {
    position: relative;
    width: 40px;
    height: 40px;
    cursor: pointer;
}

.sp_cal_event_wrapper:after {
    content: "";
    width: 100%;
    height: 4px;
    border-radius: 10px;
    background-color: var(--main-color);
    display: block;
    margin-top: 2px;
}

/* .sp_cal_event_wrapper.sp_cal_event_published{
    cursor: default;
} */
.sp_cal_event_wrapper.sp_cal_event_published:after {
    background-color: #4caf50;
}

.sp_cal_event_wrapper.sp_cal_event_schedule:after {
    background-color: var(--main-color);
}

.sp_cal_event_wrapper.sp_cal_event_draft:after {
    background-color: #ffc107;
}
/* event popover start */
.sp_cal_event_popover_wrapper{
    opacity: 0;
    visibility: hidden;
}
.sp_cal_event_popover_wrapper.show{
    opacity: 1;
    visibility: visible;
}
.sp_cal_event_popover{
    position: fixed;
    top: 0;
    left: 0;
    width: 200px;
    transform: translateY(calc(-100% - 10px));
    background-color: #ffffff;
    border-radius: 6px;
    box-shadow: 1px 3px 6px 0px rgba(0, 0, 0, 0.23), 0px 2px 3px 0px rgba(0, 0, 0, 0.06);
    z-index: 11;
    padding: 4px;
}
.sp_cal_event_popover > .sp_calep_image{
    position: relative;
    background-color: #EAEEF4;
    border-radius: 4px;
}
.sp_cal_event_popover > .sp_calep_image > img{
    max-width: 100%;
    padding: 4px;
    max-height: 192px;
}
.sp_cal_event_popover > .sp_calep_image .sp_calep_type{
    position: absolute;
    top: 8px;
    left: 8px;
    width: 22px;
    height: 22px;
    background-size: 16px;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #ffffff;
    border-radius: 4px;
}
.sp_cal_event_popover > .sp_calep_image .sp_calep_type.facebook{
    background-image: url('../images/icons/social_facebook.svg');
}

.sp_cal_event_popover > .sp_calep_image .sp_calep_type.linkedin{
    background-image: url('../images/icons/social_linkedin.svg');
}

.sp_cal_event_popover > .sp_calep_image .sp_calep_type.twitter{
    background-image: url('../images/icons/social_twitter.svg');
}

.sp_cal_event_popover > .sp_calep_image .sp_calep_type.pinterest{
    background-image: url('../images/icons/social_pinterest.svg');
}

.sp_cal_event_popover > .sp_calep_image .sp_calep_type.instagram{
    background-image: url('../images/icons/social_instagram.svg');
}

.sp_cal_event_popover .sp_calep_status{
    border-radius: 4px;
    padding: 8px;
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 4px 0 6px;
    color: var(--color-heading);
    font-size: 13px;
    font-weight: 600;
    text-transform: capitalize;
}
.sp_cal_event_popover .sp_calep_status > .sp_calep_status_circle{
    width: 8px;
    height: 8px;
    border-radius: 8px;
}
.sp_cal_event_popover.published .sp_calep_status{
    background-color: #EEF7EE;
}
.sp_cal_event_popover.published .sp_calep_status > .sp_calep_status_circle{
    background-color: #4CAF50;
}
.sp_cal_event_popover.draft .sp_calep_status{
    background-color: #FFF9E7;
}
.sp_cal_event_popover.draft .sp_calep_status > .sp_calep_status_circle{
    background-color: #ffc107;
}
.sp_cal_event_popover.schedule .sp_calep_status{
    background-color: rgba(var(--main-color-rgb), 0.1);
}
.sp_cal_event_popover.schedule .sp_calep_status > .sp_calep_status_circle{
    background-color: var(--main-color);
}
.sp_cal_event_popover .sp_calep_date{
    padding: 0 4px;
    margin-bottom: 2px;
    color: var(--color-heading);
    font-weight: 700;
}
.sp_cal_event_popover .sp_calep_content{
    padding: 0 4px 6px;
    font-size: 13px;
    max-height: 54px;
    overflow: hidden;
    margin-bottom: 4px;
}
/* event popover end */

.sp_calender_color_info {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.sp_calender_color_info>p {
    margin: 0;
    color: var(--color-heading);
    font-weight: 600;
}

.sp_calender_color_info>ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 15px;
}

.sp_calender_color_info>ul>li {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sp_calender_color_info>ul>li>span {
    width: 10px;
    height: 10px;
    border-radius: 15px;
}

.sp_calender_color_info>ul>li.publish>span {
    background-color: #4caf50;
}

.sp_calender_color_info>ul>li.schedule>span {
    background-color: var(--main-color);
}

.sp_calender_color_info>ul>li.draft>span {
    background-color: #ffc107;
}

.fc-timegrid .sp_cal_add_post_btn {
    display: none;
}

.fc-timegrid-more-link {
    width: 40px;
    height: 40px;
    box-shadow: 0px 0px 0px 1px var(--main-color);
    border-radius: 4px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    background-color: #ffffff;
    color: var(--main-color);
}

.sp_cal_event_wrapper>.sp_cal_event_inner>.sp_cal_event_image {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    box-shadow: 0 1px 3px rgb(0, 0, 0, 0.12), 0 1px 2px rgb(0, 0, 0, 0.24);
    background-color: #ffffff;
}

.sp_cal_event_wrapper .sp_cal_event_social_type {
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    background-color: #ffffff;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 10px;
    box-shadow: 0 1px 3px rgb(0, 0, 0, 0.12), 0 1px 2px rgb(0, 0, 0, 0.24);
}

.sp_cal_event_wrapper.facebook .sp_cal_event_social_type {
    background-image: url('../images/icons/social_facebook.svg');
}

.sp_cal_event_wrapper.linkedin .sp_cal_event_social_type {
    background-image: url('../images/icons/social_linkedin.svg');
}

.sp_cal_event_wrapper.twitter .sp_cal_event_social_type {
    background-image: url('../images/icons/social_twitter.svg');
}

.sp_cal_event_wrapper.pinterest .sp_cal_event_social_type {
    background-image: url('../images/icons/social_pinterest.svg');
}

.sp_cal_event_wrapper.instagram .sp_cal_event_social_type {
    background-image: url('../images/icons/social_instagram.svg');
}

.sp_cal_event_wrapper .sp_cal_event_delete {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 14px;
    height: 14px;
    background-color: #FC5F5F;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
}

.sp_cal_event_wrapper .sp_cal_event_delete:before,
.sp_cal_event_wrapper .sp_cal_event_delete:after {
    content: "";
    width: 8px;
    height: 2px;
    background-color: #ffffff;
    border-radius: 5px;
    position: absolute;
    transform: rotate(45deg);
}

.sp_cal_event_wrapper .sp_cal_event_delete:after {
    transform: rotate(-45deg);
}

.sp_cal_event_wrapper:hover .sp_cal_event_delete {
    opacity: 1;
    visibility: visible;
}

.sp_calendar_wrapper .fc .fc-more-popover {
    box-shadow: 0 1px 3px rgb(0 0 0 / 12%), 0 1px 2px rgb(0 0 0 / 24%);
    border-radius: 5px;
    border: none;
}

.sp_calendar_wrapper .fc .fc-more-popover .fc-popover-header {
    padding: 5px 8px;
    font-size: 13px;
    color: #ffffff;
    background-color: var(--main-color);
    border-radius: 5px 5px 0 0;
}

.sp_calendar_wrapper .fc .fc-more-popover .fc-popover-body {
    display: grid;
    grid-template-columns: 40px 40px 40px 40px;
    gap: 12px 8px;
    padding: 10px 8px;
    min-width: 208px;
    justify-content: center;
}

.fc .fc-daygrid-event.fc-event-today,
.sp_calendar_wrapper .fc .fc-more-popover .fc-popover-body>.fc-daygrid-event-harness>a.fc-daygrid-event {
    margin: 0;
    padding: 0;
}

.fc .fc-daygrid-event {
    margin: 0 !important;
}

.sp_calendar_wrapper .fc .fc-more-popover .fc-timegrid-event {
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
}

.sp_calendar_wrapper .fc .fc-more-popover .fc-event-main {
    margin: 0;
    padding: 0;
    border: none;
}

.fc .fc-highlight {
    background-color: rgba(var(--main-color-rgb), 0.1);
    box-shadow: 0px 0px 0px 1px var(--main-color);
}

.sp_post_character_limit {
    display: block;
    text-align: right;
    font-size: 12px;
    font-weight: 600;
    margin-top: 4px;
}

/* Calendar end */

.sp_repeat_event_wrapper .sp_switch>label {
    gap: 8px;
}

.sp_repeat_event_wrapper .sp_switch>label::before {
    height: 8px;
}

.sp_repeat_event_wrapper .sp_switch>label::after {
    top: 3px;
    width: 14px;
    height: 14px;
}

.sp_repeat_event_wrapper>.sp_repeat_event {
    padding: 15px;
    border: 1px solid #E9E9F4;
    border-radius: 10px;
    margin-top: 10px;
}

.sp_repeat_event_wrapper>.sp_repeat_event>p {
    margin: 0;
    margin-bottom: 10px;
}

.sp_repeat_event_wrapper>.sp_repeat_event .sp_input_wrapper {
    margin: 0;
    margin-top: 10px;
}

.sp_repeat_event_wrapper>.sp_repeat_event .sp_input_wrapper>.sp_input {
    height: 54px;
    padding: 0 20px;
    border-radius: 6px;
    font-size: 14px;
}

.sp_calendar_container .sp_page_title>.sp_page_heading>span>span {
    display: none;
    vertical-align: middle;
}

.sp_calendar_container .sp_page_title>.sp_page_heading>span>span.sp_event_ph_name {
    font-size: 14px;
    font-weight: 400;
    color: var(--color-body);
    margin-left: 15px;
}

.sp_calendar_container .sp_page_title>.sp_page_heading>span>span.sp_event_ph_name::before {
    content: ">";
    margin-right: 15px;
    font-family: monospace;
}

.calendar_event_open.sp_calendar_container .sp_page_title>.sp_page_heading>span>span {
    display: inline-flex;
}

.calendar_event_open.sp_calendar_container .sp_calendar_wrapper {
    display: none;
}


/* admin banner preview start */
.sp_banner_preview_list>.sp_banner_preview_item {
    margin-bottom: 15px;
    border: 1px solid #e2e2e2;
    border-radius: 8px;
    padding: 15px;
    position: relative;
}

.sp_banner_preview_list>.sp_banner_preview_item .sp_remove_brand_icon {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

.sp_banner_preview_list>.sp_banner_preview_item>p {
    margin: 0;
    margin-bottom: 15px;
}

.sp_banner_preview_list>.sp_banner_preview_item .sp_banner_preview_images {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

.sp_banner_preview_list>.sp_banner_preview_item .sp_banner_preview_images>.spj_single_banner,
.sp_banner_preview_list>.sp_banner_preview_item .sp_banner_preview_images>img {
    width: 150px;
    max-height: 150px;
    margin-right: 15px;
    border-radius: 8px;
    object-fit: contain;
    padding: 15px;
    border: 1px solid #e3e3e3;
    text-align: center;
    position: relative;
}

.sp_banner_preview_list>.sp_banner_preview_item .sp_banner_preview_images>.spj_single_banner>img {
    max-width: 100%;
    max-height: 110px;
    box-shadow: 0 1px 3px rgb(0 0 0 / 12%), 0 1px 2px rgb(0 0 0 / 24%);
    border-radius: 3px;
}

/* admin banner preview end */

/* upload font start */
.sp_popup_wrapper#upload_custom_font_popup .select2-container {
    width: 100% !important;
}

.sp_popup_wrapper#upload_custom_font_popup .select2-selection {
    height: 58px;
}

.sp_popup_wrapper#upload_custom_font_popup .sp_upload_image_box {
    max-width: 100%;
}

.sp_popup_wrapper#upload_custom_font_popup .sp_popup_body>h4 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
}

.sp_popup_wrapper#upload_custom_font_popup .sp_input_wrapper .sp_input {
    height: 58px;
    font-size: 14px;
    padding: 0px 20px;
    border-radius: 6px;
}

.sp_popup_wrapper#upload_custom_font_popup .sp_upload_image_box>label {
    min-height: 150px;
}

.modal-open .select2-container {
    z-index: 9999;
}

/* upload font end */

/* trash start */
.sp_dfytemp_wrapper.sp_trash_wrapper {
    margin: 50px auto;
}

.sp_trash_wrapper .sp_dfytemp_header_search>.sp_search_wrapper>input {
    border-radius: 10px 0 0 10px;
}

.sp_campaign_list.sp_trash_list>.sp_campaign_item>.sp_campaign_inner>.sp_camp_img>.sp_camp_overlay {
    flex-direction: column;
    gap: 15px;
}

.sp_trash_wrapper .no_search_result,
.sp_trash_wrapper .sp_view_more {
    display: block;
}

.sp_trash_wrapper .sp_popup_tab>ul {
    background-color: rgba(var(--main-color-rgb), 0.05);
}

.sp_trash_wrapper .sp_page_title {
    margin-bottom: 15px;
}

/* trash end */

.sp_camp_badge {
    position: absolute;
    top: 20px;
    left: -10px;
    z-index: 11;
    background-color: var(--main-color);
    color: #fff;
    font-weight: 600;
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 4px 4px 4px 0;
}

.sp_camp_badge::before {
    content: "";
    position: absolute;
    left: 0px;
    top: 100%;
    border-top: 0px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 10px solid #1A50A1;
}


/* new menu design with images start */
.sp_sub_menu_slider_wrapper {
    padding: 0 0px !important;
    margin: 5px auto;
}

.sp_sub_menu_wrapper {
    display: flex;
    flex-direction: column;
}

.sp_sub_menu_slider {
    padding: 10px 0 !important;
}

.sp_sub_menu_slider .sp_ssm_item {
    width: 208px;
    margin-right: 10px;
    height: auto;
}

.sp_sub_menu_slider .sp_ssm_item>span {
    margin-bottom: 8px;
    width: 100%;
    height: 141px;
    background-color: rgba(var(--main-color-rgb), 0.05);
    /* border: 1px solid rgba(var(--main-color-rgb),0.25); */
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    transition: ease 0.5s;
}

.sp_sub_menu_slider .sp_ssm_item[data-type="all"]>span {
    box-shadow: inset 0px 0px 0px 1px var(--main-color);
}

.sp_sub_menu_slider .sp_ssm_item>span::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 8px;
    background-color: rgba(0, 0, 0, 0.5);
    transition: ease 0.5s;
    opacity: 0;
}

.sp_sub_menu_slider .sp_ssm_item[data-type="all"]>span::before {
    background-color: rgba(var(--main-color-rgb), 0.10);
}

.sp_sub_menu_slider .sp_ssm_item>span:hover {
    transform: translateY(-8px);
}

.sp_sub_menu_slider .sp_ssm_item.active>span::before,
.sp_sub_menu_slider .sp_ssm_item>span:hover::before {
    opacity: 1;
}

.sp_sub_menu_slider .sp_ssm_item.active {
    background-color: transparent;
}

.sp_sub_menu_slider .sp_ssm_item.active span {
    background-color: rgba(var(--main-color-rgb), 0.15);
    border-color: var(--main-color);
}

.sp_sub_menu_slider .sp_ssm_item>p {
    text-align: left;
    width: 100%;
    padding-left: 8px;
}

.sp_sub_menu_slider .sp_ssm_item.active>p {
    color: var(--main-color);
}

.sp_sub_menu_slider .sp_ssm_item>span>svg path {
    fill: var(--main-color);
}

.sp_ssm_slider_btn.swiper-button-next-page.swiper-button-disabled,
.sp_ssm_slider_btn.swiper-button-prev-page.swiper-button-disabled,
.sp_ssm_slider_btn.swiper-button-next.swiper-button-disabled,
.sp_ssm_slider_btn.swiper-button-prev.swiper-button-disabled {
    opacity: 0;
    pointer-events: none;
}

.sp_sub_menu_slider .sp_ssm_item>span>svg {
    opacity: 0;
    pointer-events: none;
    position: relative;
    z-index: 1;
}

.sp_sub_menu_slider .sp_ssm_item[data-type="all"]>span>svg {
    opacity: 1;
}

.sp_sub_menu_slider .sp_ssm_item.active>span>svg path {
    fill: var(--main-color);
}

.sp_sub_menu_slider .sp_ssm_item[data-type="custom_image"]>span {
    background-image: url('../images/category/new/custom_image.png');
}

.sp_sub_menu_slider .sp_ssm_item[data-type="logo"]>span {
    background-image: url('../images/category/new/logo.png');
}

.sp_sub_menu_slider .sp_ssm_item[data-type="ebook"]>span {
    background-image: url('../images/category/new/ebook.png');
}

.sp_sub_menu_slider .sp_ssm_item[data-type="covers"]>span {
    background-image: url('../images/category/new/covers.png');
}

.sp_sub_menu_slider .sp_ssm_item[data-type="worksheet"]>span {
    background-image: url('../images/category/new/worksheet.png');
}

.sp_sub_menu_slider .sp_ssm_item[data-type="mockup"]>span {
    background-image: url('../images/category/new/mockup.png');
}

.sp_sub_menu_slider .sp_ssm_item[data-type="illustration"]>span {
    background-image: url('../images/category/new/illustration.png');
}

.sp_sub_menu_slider .sp_ssm_item[data-type="annotation"]>span {
    background-image: url('../images/category/new/annotation.png');
}

.sp_sub_menu_slider .sp_ssm_item[data-type="blocks"]>span {
    background-image: url('../images/category/new/blocks.png');
}

.sp_sub_menu_slider .sp_ssm_item[data-type="bundles"]>span {
    background-image: url('../images/category/new/bundles.png');
}

.sp_sub_menu_slider .sp_ssm_item[data-type="funnels"]>span {
    background-image: url('../images/category/new/funnels.png');
}

.sp_sub_menu_slider .sp_ssm_item[data-type="marketing"]>span {
    background-image: url('../images/category/new/marketing.png');
}

.sp_sub_menu_slider .sp_ssm_item[data-type="thumbnail"]>span {
    background-image: url('../images/category/new/thumbnail.png');
}

.sp_sub_menu_slider .sp_ssm_item[data-type="social"]>span {
    background-image: url('../images/category/new/social.png');
}

.sp_sub_menu_slider .sp_ssm_item[data-type="mockups_wf"]>span {
    background-image: url('../images/category/new/mockups_wf.png');
}

.sp_sub_menu_slider .sp_ssm_item[data-type="apparel_wf"]>span {
    background-image: url('../images/category/new/apparel_wf.png');
}

.sp_sub_menu_slider .sp_ssm_item[data-type="packaging_wf"]>span {
    background-image: url('../images/category/new/packaging_wf.png');
}

.sp_sub_menu_slider .sp_ssm_item[data-type="pages"]>span {
    background-image: url('../images/category/new/pages.png');
}

.sp_sub_menu_slider .sp_ssm_item[data-type="infographics"]>span {
    background-image: url('../images/category/new/infographics.png');
}

.sp_sub_menu_slider .sp_ssm_item[data-type="print"]>span {
    background-image: url('../images/category/new/print.png');
}

.sp_sub_menu_slider .sp_ssm_item[data-type="cover_wf"]>span {
    background-image: url('../images/category/new/publishable.png');
}

.sp_sub_menu_slider .sp_ssm_item[data-type="publishable"]>span {
    background-image: url('../images/category/new/cover_wf.png');
}

.sp_sub_menu_slider .sp_ssm_item[data-type="sets"]>span {
    background-image: url('../images/category/new/sets.png');
}

/* images not available for these */
.sp_sub_menu_slider .sp_ssm_item[data-type="animation"]>span {
    background-image: url('../images/category/logos.png');
}

/* new menu design with images end */

#add_customer_popup .sp_checkbox_list>.sp_checkbox {
    margin-right: 12px;
}


/* share design with people start */
.sp_stp_email_input {
    margin-bottom: 2px;
    position: relative;
}

.sp_stp_email_input>input {
    width: 100%;
    height: 70px;
    border: 1px solid #e9e9f4;
    border-radius: 8px;
    font-size: 14px;
    padding: 0 25px;
    outline: none;
    padding-right: 145px;
}

.sp_stp_email_input>.sp_stp_email_input_submit {
    position: absolute;
    top: 1px;
    right: 0px;
    bottom: 1px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0 8px 8px 0;
    cursor: pointer;
    background-color: rgba(var(--main-color-rgb), 0.05);
    border-left: 1px solid #e9e9f4;
}

.sp_stp_email_input>.sp_stp_email_input_submit:after {
    content: "Search";
    color: var(--main-color);
    font-weight: 600;
    font-size: 16px;
    margin-left: 8px;
}

.sp_stp_email_input>.sp_stp_email_input_submit>svg {
    width: 16px;
    height: auto;
    pointer-events: none;
}

.sp_stp_email_input>.sp_stp_email_input_submit>svg path {
    stroke: var(--main-color);
}

.sp_stp_email_input>.sp_stp_email_input_submit:hover {
    background-color: rgba(var(--main-color-rgb), 0.1);
}


.sp_stp_message_input {
    border: 1px solid #e9e9f4;
    border-radius: 8px;
    padding: 20px;
}

.sp_stp_message_input>textarea {
    width: 100%;
    border: 1px solid #e9e9f4;
    border-radius: 8px;
    background-color: #FBFBFC;
    padding: 20px;
    outline: none;
    resize: vertical;
    margin-bottom: 5px;
}

.sp_stp_message_input>textarea::-webkit-input-placeholder,
.sp_stp_email_input>input::-webkit-input-placeholder {
    color: #B7BAC1;
}

.sp_stp_message_input>textarea:focus,
.sp_stp_email_input>input:focus {
    border-color: var(--main-color);
}

.sp_stp_message_input>p {
    margin: 0;
    font-size: 13px;
    margin-bottom: 15px;
}

.sp_stp_message_input>p>span {
    font-weight: 700;
}

.sp_stp_message_action {
    text-align: right;
}

.sp_stp_message_action>.sp_btn {
    min-width: 120px;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    border-radius: 6px;
}

.sp_stp_shared_user_list {
    border: 1px solid #e9e9f4;
    border-radius: 8px;
    padding: 20px;
    max-height: 185px;
    overflow: auto;
}

.sp_stp_shared_user_list>.sp_stp_sul_item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.sp_stp_shared_user_list>.sp_stp_sul_item:last-child {
    margin-bottom: 0;
}

.sp_stp_shared_user_list>.sp_stp_sul_item>.sp_stp_sul_icon {
    flex: none;
    width: 40px;
    height: 40px;
    position: relative;
}

.sp_stp_shared_user_list>.sp_stp_sul_item>.sp_stp_sul_icon>.sp_stp_sul_initial {
    width: 40px;
    height: 40px;
    border-radius: 50px;
    background-color: rgba(var(--main-color-rgb), 0.05);
    border: 1px solid rgba(var(--main-color-rgb), 0.10);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--main-color);
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 600;
}

.sp_stp_shared_user_list>.sp_stp_sul_item>.sp_stp_sul_icon>.sp_stp_sul_image {
    position: absolute;
    top: -1px;
    left: -1px;
    width: 42px;
    height: 42px;
    border-radius: 50px;
    object-fit: cover;
}

.sp_stp_shared_user_list>.sp_stp_sul_item>.sp_stp_sul_details {
    flex: 1;
}

.sp_stp_shared_user_list>.sp_stp_sul_item>.sp_stp_sul_details>h3 {
    margin: 0;
    font-size: 14px;
}

.sp_stp_shared_user_list>.sp_stp_sul_item>.sp_stp_sul_details>p {
    margin: 0;
    font-size: 12px;
}

.sp_stp_shared_user_list>.sp_stp_sul_item>.sp_stp_sul_remove {
    flex: none;
}

.sp_stp_shared_user_list>.sp_stp_sul_item>.sp_stp_sul_remove .sp_stp_sul_remove_icon {
    width: 30px;
    height: 30px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.sp_stp_shared_user_list>.sp_stp_sul_item>.sp_stp_sul_remove .sp_stp_sul_remove_icon svg {
    width: 14px;
    height: auto;
}

.sp_stp_shared_user_list>.sp_stp_sul_item>.sp_stp_sul_remove .sp_stp_sul_remove_icon:hover {
    background-color: #ffe8e8;
}

.sp_stp_shared_user_list>.sp_stp_sul_item>.sp_stp_sul_remove .sp_stp_sul_remove_icon:hover svg path {
    fill: #f44336;
}

/* share design with people end */

.sp_popup_wrapper#sp_shared_design_popup>.sp_popup_inner {
    max-width: 650px;
}

.sp_shared_user_icon_wrapper>.sp_shared_user_icon {
    width: 24px;
    height: 24px;
    margin-right: 6px;
}

.sp_shared_user_icon_wrapper>.sp_shared_user_icon>.sp_sui_initials {
    width: 24px;
    height: 24px;
    border-radius: 30px;
    background-color: var(--main-color);
    color: #ffffff;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sp_shared_user_icon_wrapper .sp_custom_tooltip_inner {
    white-space: nowrap;
    max-width: 200px;
}

.sp_shared_user_icon_wrapper .sp_custom_tooltip_inner span {
    color: #C3C3C3;
}

.sp_shared_user_icon_wrapper .sp_custom_tooltip_inner h3 {
    margin: 3px auto;
    font-size: 14px;
    color: inherit;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 600;
}

.sp_shared_user_icon_wrapper .sp_custom_tooltip_inner p {
    margin: 0;
    font-size: 10px;
}

/* page preview popup start */
.sp_popup_wrapper#page_preview_popup>.sp_popup_inner {
    max-width: 750px;
}

@media (max-width: 700px) {
    .sp_popup_wrapper#page_preview_popup:before {
        display: none;
    }
}

.sp_browser_wrapper {
    background-color: #eeeff1;
    border-radius: 8px;
    padding: 1px;
}

.sp_browser_wrapper>.sp_browser_header {
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.sp_browser_wrapper>.sp_browser_header>span {
    width: 12px;
    height: 12px;
    border-radius: 20px;
    background-color: #ffffff;
}

.sp_browser_wrapper>.sp_browser_body {
    position: relative;
}

.sp_browser_wrapper>.sp_browser_body>.sp_browser_body_inner {
    width: 100%;
    height: 365px;
    overflow: auto;
    border-radius: 0 0 8px 8px;
    background-color: #ffffff;
}

.sp_browser_wrapper>.sp_browser_body>.sp_browser_body_inner>img {
    width: 100%;
    display: block !important;
}

.sp_browser_wrapper>.sp_browser_body .sp_no_preview_image {
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    pointer-events: none;
    display: none;
}

.sp_browser_wrapper>.sp_browser_body .sp_no_preview_image>h3 {
    margin: 0;
    font-weight: 600;
}

.sp_browser_wrapper>.sp_browser_body .sp_no_preview_image>p {
    margin: 0;
    font-size: 13px;
}

.sp_browser_wrapper>.sp_browser_body>.sp_page_preview_edit {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    border-radius: 40px;
    background-color: var(--main-color);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    display: none;
}

.sp_browser_wrapper>.sp_browser_body>.sp_page_preview_edit svg {
    width: 16px;
    height: auto;
    fill: #ffffff;
}

.sp_browser_wrapper>.sp_browser_body .tooltip-inner {
    min-width: 120px;
    text-align: center;
}

.sp_page_preview_uploader .sp_upload_image_box {
    max-width: 100%;
    margin-bottom: 15px;
}

.sp_page_preview_uploader .sp_upload_image_box>label {
    min-height: 150px;
}

.sp_page_preview_uploader .sp_upload_image_box>label>h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
}

.sp_page_preview_uploader .sp_upload_image_box>label>p {
    margin: 0;
    font-size: 13px;
}

.sp_page_preview_uploader .sp_btn_list {
    text-align: right;
}

.sp_page_preview_uploader .sp_btn_list>.sp_btn {
    font-size: 14px;
    min-width: 110px;
    height: 40px;
    line-height: 40px;
    border-radius: 6px;
}

/* page preview popup end */

/* complete book start */
.sp_complete_book_wrapper_popup {
    position: fixed;
    top: 63px;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 60px 80px;
    background-color: #f8fafd;
    z-index: 999;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    transition: all 0.2s ease;
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateY(10%);
    -moz-transform: translateY(10%);
    transform: translateY(10%);
}

.complete_book_popup_open .sp_complete_book_wrapper_popup {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    transform: translateY(0);
}

.sp_complete_book_wrapper_popup .sp_back_arrow {
    cursor: pointer;
    width: 25px;
    height: 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    margin-right: 25px;
}

.sp_complete_book_wrapper_popup .sp_back_arrow>svg {
    width: 20px;
    height: 20px;
}

.sp_complete_book_wrapper_popup .sp_back_arrow>svg path {
    fill: var(--main-color);
}

.sp_popup_wrapper#complete_book_editor_popup>.sp_popup_inner {
    max-width: 730px;
}

.sp_popup_wrapper#complete_book_editor_popup>.sp_popup_inner .sp_popup_body {
    margin-bottom: 0;
}

.sp_popup_wrapper#complete_book_editor_popup .sp_popup_body .text-center .sp_btn,
.sp_popup_wrapper#complete_book_editor_popup .sp_popup_title {
    text-transform: capitalize;
}


.sp_te_editor_wrapper.sp_book_editor_wrapper {
    grid-template-columns: auto 260px;
}

.sp_te_editor_wrapper.sp_book_editor_wrapper .sp_te_editor_sidebar {
    max-width: 100%;
}

.sp_complete_book_wrapper_popup .no_search_result {
    display: block;
}

/* .sp_complete_book_wrapper_popup .sp_campaign_list.load_themes_list > .sp_campaign_item > .sp_campaign_inner > .sp_camp_img > svg,
.sp_complete_book_wrapper_popup .sp_campaign_list.load_themes_list > .sp_campaign_item > .sp_campaign_inner > .sp_camp_img > img{
    height: 406px;
} */

/* complete book end */

.sp_popup_wrapper#add_3d_cover_publishable_popup>.sp_popup_inner {
    max-width: 1000px;
}

.sp_popup_wrapper#add_3d_cover_publishable_popup>.sp_popup_inner .sp_view_more {
    display: block;
}

@media(max-width: 1040px) {
    .sp_popup_wrapper#add_3d_cover_publishable_popup:before {
        display: none;
    }
}

.sp_subuser_email_exist {
    padding: 10px;
    border-radius: 8px;
    text-align: left;
    margin-bottom: 25px;
    background-color: #fff7f5;
    color: #ff5722;
    border: 1px solid #ffd0c1;
}

.sp_camp_pages_item .sp_camp_grid_img_list {
    grid-template-columns: 100%;
    padding: 0;
}

.sp_camp_pages_item .sp_camp_grid_img_list>.sp_camp_grid_img_item {
    display: none;
    padding: 0;
}

.sp_camp_pages_item .sp_camp_grid_img_list>.sp_camp_grid_img_item:first-child {
    display: block;
}

.sp_camp_pages_item .sp_camp_grid_img_list>.sp_camp_grid_img_item>img {
    height: 380px;
    border-radius: 8px 8px 0 0;
}

.sp_campaign_list>.sp_campaign_item.sp_camp_pages_item>.sp_campaign_inner>.sp_camp_img>.sp_camp_img_overlay {
    background-position: top;
    background-size: cover;
}

.sp_campaign_list.load_dfysets_body>.sp_campaign_item.sp_camp_pages_item>.sp_campaign_inner>.sp_camp_img>img {
    height: 380px;
}

/* affiliate URL start */
.sp_affiliate_url_list {
    max-width: 540px;
}

.sp_affiliate_url_list .sp_affiliate_url_item_wrapper {
    position: relative;
}

.sp_affiliate_url_list .sp_affiliate_url_item {
    display: grid;
    grid-template-columns: 58px auto;
    align-items: center;
    margin-bottom: 20px;
    cursor: pointer;
    position: relative;
}

.sp_affiliate_url_list .sp_affiliate_url_item>.sp_affiliate_check {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 52px;
    background-color: #ecf2fb;
    border-radius: 8px 0 0 8px;
    border: 1px solid #ced5e1;
    border-right: none;
}

.sp_affiliate_url_list .sp_affiliate_url_item>.sp_affiliate_check>.sp_aff_check_icon {
    width: 22px;
    height: 22px;
    border-radius: 24px;
    border: 2px solid #bcc4d3;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sp_affiliate_url_list .sp_affiliate_url_item>.sp_affiliate_check>.sp_aff_check_icon>svg {
    display: none;
}

.sp_affiliate_url_list .sp_affiliate_url_item>.sp_affiliate_check>.sp_aff_check_icon:after {
    content: '';
    width: 10px;
    height: 10px;
    background-color: #bcc4d3;
    border-radius: 10px;
}

.sp_affiliate_url_list .sp_affiliate_url_item>.sp_affiliate_check>.sp_aff_check_icon svg path {
    stroke: #7a8495;
}

.sp_affiliate_url_list .sp_affiliate_url_item>.sp_affiliate_link {
    height: 52px;
    background-color: #ffffff;
    border: 1px solid #CED5E1;
    border-radius: 0 8px 8px 0;
    padding: 15px;
    font-weight: 600;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.sp_affiliate_url_list .sp_affiliate_url_item.active {
    pointer-events: none;
}

.sp_affiliate_url_list .sp_affiliate_url_item.active>.sp_affiliate_check>.sp_aff_check_icon:after {
    background-color: #ffffff;
}

.sp_affiliate_url_list .sp_affiliate_url_item.active>.sp_affiliate_check>.sp_aff_check_icon {
    border-color: #ffffff;
}

.sp_affiliate_url_list .sp_affiliate_url_item.active>.sp_affiliate_check>.sp_aff_check_icon svg path {
    stroke: #ffffff;
}

.sp_affiliate_url_list .sp_affiliate_url_item.active>.sp_affiliate_check {
    background-color: #4caf50;
    border-color: #4caf50;
}

.sp_affiliate_url_list .sp_affiliate_url_item.active>.sp_affiliate_link {
    border-color: #4caf50;
    color: #4caf50;
}

.sp_affiliate_url_list .sp_affiliate_url_item_wrapper:hover .sp_remove_icon_new {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

/* affiliate URL end */

.sp_campaign_list.sp_whatsnew>.sp_campaign_item>.sp_campaign_inner>.sp_camp_detail>h3 {
    display: flex;
    align-items: center;
    gap: 15px;
}

.sp_whatsnew .sp_padlock {
    width: 24px;
    height: 17px;
    border-radius: 15px;
}

.sp_whatsnew .sp_padlock>svg {
    width: 12px;
}



.sp_send_limit_exceeded {
    background-color: #FFEED4;
    border: 1px solid #FF9800;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
}

.sp_send_limit_exceeded>.sp_sle_content {
    flex: 1;
}

.sp_send_limit_exceeded>.sp_sle_content>h3 {
    margin: 0;
}

.sp_send_limit_exceeded>.sp_sle_content>p {
    margin: 0;
}

.sp_send_limit_exceeded>.sp_sle_button {
    flex: none;
}

.sp_banner_img {
    text-align: center;
}

.sp_banner_img>a {
    display: inline-block;
    text-align: center;
}

.sp_banner_img img,
.sp_banner_img>a>img {
    max-width: 100%;
}

.sp_banner_branding_wrapper {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
    align-items: flex-start;
}

.spj_user_access_level {
    display: flex;
    gap: 5px;
    align-items: center;
    flex-wrap: wrap;
}

.spj_user_access_level>span {
    color: var(--main-color);
    box-shadow: 0px 0px 0px 1px;
    border-radius: 5px;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 700;
}

.sp_campaign_list.spj_temp_mockup>.sp_campaign_item.sp_ignore_mockup_bo_glb>.sp_campaign_inner>.sp_camp_img::before {
    content: "Need To Delete";
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #F95454;
    border-radius: 50px;
    padding: 5px 15px;
    color: #ffffff;
    font-weight: 600;
    font-size: 13px;
    z-index: 4;
}

.sp_campaign_list.spj_temp_mockup>.sp_campaign_item.sp_glb_final .sp_camp_badge {
    background-color: #10bb1e;
}

.sp_campaign_list.spj_temp_mockup>.sp_campaign_item.sp_glb_final .sp_camp_badge::before {
    border-right-color: #0b7c14;
}

.sp_campaign_list.spj_temp_mockup>.sp_campaign_item>.sp_campaign_inner>.sp_camp_img .sp_delete_marker {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 20px;
    height: 20px;
    cursor: pointer;
    background-color: #F95454;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sp_campaign_list.spj_temp_mockup>.sp_campaign_item>.sp_campaign_inner>.sp_camp_img .sp_delete_marker::before,
.sp_campaign_list.spj_temp_mockup>.sp_campaign_item>.sp_campaign_inner>.sp_camp_img .sp_delete_marker::after {
    content: '';
    width: 10px;
    height: 2px;
    background-color: #FFFFFF;
    position: absolute;
    transform: rotate(45deg);
}

.sp_campaign_list.spj_temp_mockup>.sp_campaign_item>.sp_campaign_inner>.sp_camp_img .sp_delete_marker::after {
    transform: rotate(-45deg);
}

.sp_campaign_list.spj_temp_mockup>.sp_campaign_item>.sp_campaign_inner>.sp_camp_img .sp_delete_marker.sp_fianl_marker {
    right: 35px;
    background-color: #10bb1e;
}

.sp_campaign_list.spj_temp_mockup>.sp_campaign_item.sp_ignore_mockup_bo_glb>.sp_campaign_inner>.sp_camp_img .sp_fianl_marker {
    display: none;
}

.sp_campaign_list.spj_temp_mockup>.sp_campaign_item>.sp_campaign_inner>.sp_camp_img .sp_delete_marker.sp_fianl_marker:before {
    transform: rotate(42deg);
    width: 5px;
    top: 11px;
    left: 4px;
}

.sp_campaign_list.spj_temp_mockup>.sp_campaign_item>.sp_campaign_inner>.sp_camp_img .sp_delete_marker.sp_fianl_marker:after {
    top: 9px;
    left: 6px;
}

.spj_alert_red_color .sp_info_banner_inner {
    border-top: 1px solid #fd3f3a;
}

.spj_alert_red_color.sp_info_banner span.sp_ibi_icon {
    background-color: #fd3f3a;
}

.sp_analysis_free_trial {
    display: block;
    font-size: 12px;
    color: var(--main-color);
    font-weight: 600;
    white-space: nowrap;
}

/* replace mockup start */
.cd_replace_mockup {
    background-color: #77FC84;
    color: #2c314d;
    border: 1px solid;
    padding: 8.2px 15px;
    text-align: center;
    width: -webkit-fill-available;
    width: -moz-available;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 10px;
    border-radius: 4px;
    margin-top: 12px;
    font-weight: 600;
}

.cd_replace_mockup:hover {
    background-color: transparent;
    color: #77FC84;
}

.cd_replace_mockup svg path {
    stroke-width: 1.4px;
    stroke: #2c314d;
}

.cd_replace_mockup:hover svg path {
    stroke: #77FC84;
    ;
}

.sp_campaign_list_mockup_replacer .sp_campaign_list>.sp_campaign_item>.sp_campaign_inner>.sp_camp_img>.sp_camp_overlay {
    flex-direction: column;
    gap: 10px;
}

.sp_campaign_list_mockup_replacer .sp_campaign_list>.sp_campaign_item.sp_temp_add>.sp_campaign_inner .sp_camp_img {
    position: initial;
}

.sp_campaign_list_mockup_replacer .sp_campaign_list>.sp_campaign_item.sp_temp_add>.sp_campaign_inner .sp_camp_overlay {
    opacity: 1;
    visibility: visible;
    background-color: #2c314d;
    flex-direction: column;
    border: 1px dashed #77FC84;
    border-radius: 8px;
    cursor: pointer;
    background-color: #272b45;
}

.sp_campaign_list_mockup_replacer .sp_campaign_list>.sp_campaign_item.sp_temp_add:hover>.sp_campaign_inner .sp_camp_overlay {
    border-color: #a2aad3;
}

.sp_campaign_list_mockup_replacer .sp_campaign_list>.sp_campaign_item.sp_temp_add>.sp_campaign_inner .sp_camp_overlay>p {
    margin: 0;
    font-size: 14px;
    color: #77FC84;
}

.sp_campaign_list_mockup_replacer .sp_campaign_list>.sp_campaign_item.sp_temp_add:hover>.sp_campaign_inner .sp_camp_overlay>p {
    color: #c3c8df;
}

.sp_campaign_list_mockup_replacer .sp_campaign_list>.sp_campaign_item.sp_temp_add>.sp_campaign_inner .sp_camp_overlay svg path#sfc_icon_bg {
    fill: #77FC84;
}

.sp_campaign_list_mockup_replacer .sp_campaign_list>.sp_campaign_item.sp_temp_add>.sp_campaign_inner .sp_camp_overlay svg path#sfc_icon_plus {
    fill: #2c324c;
}

.sp_campaign_list_mockup_replacer .sp_campaign_list>.sp_campaign_item.sp_temp_add:hover>.sp_campaign_inner .sp_camp_overlay svg path#sfc_icon_bg {
    fill: rgba(255, 255, 255, 0.1);
}

.sp_campaign_list_mockup_replacer .sp_campaign_list>.sp_campaign_item.sp_temp_add:hover>.sp_campaign_inner .sp_camp_overlay svg path#sfc_icon_plus {
    fill: #ffffff;
}

.sp_es_body .sp_campaign_list_mockup_replacer .sp_campaign_list>.sp_campaign_item>.sp_campaign_inner>.sp_camp_img>.sp_camp_overlay .sp_btn:nth-child(2) {
    min-width: 70px;
}

.sp_mockup_replacer_iframe {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99998;
}

.sp_mockup_replacer_iframe>iframe {
    width: 100%;
    height: 100%;
    border: none;
    background-color: #f8fafd;
    background-image: url('../images/loader.gif');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 45px;
}


.mockup_replacer_body #main_tab_campaign,
.mockup_replacer_body .spj_duplicate_popup_link,
.mockup_replacer_body .sp_export_layer,
.mockup_replacer_body .sp_img_uploader_list>.sp_iul_item>.sp_iup_btns.sp_export_flat_layer,
.mockup_replacer_body .sp_header_avatar,
.mockup_replacer_body .sp_export_dd_link {
    display: none;
}

.mockup_replacer_body .sp_img_uploader_list>.sp_iul_item>.sp_iup_btns:nth-last-child(2) {
    border-right: none;
}

.mockup_replacer_body.ieditor_popup_open .sp_editor_header_action>.sp_ieditor_header_btns {
    flex-direction: row-reverse;
}

.ed_canvas_wrapper .sp_info_banner {
    text-align: left;
    max-width: 1200px;
    margin: 0 auto;
    margin-top: 30px;
}

/* replace mockup end */

.sp_bundletemp_wrapper_popup>.sp_container>.sp_info_banner {
    display: none;
}


.sp_popup_wrapper#invoice_history_popup>.sp_popup_inner {
    max-width: 1200px;
}

.sp_popup_wrapper#invoice_history_popup .sp_custom_table_wrapper {
    margin-bottom: 20px;
}

/* .sp_popup_wrapper#invoice_history_popup .sp_custom_table_wrapper .sp_ct_sub_body .sp_ct_row .sp_ct_col:first-child{
    text-transform: uppercase;
    color: var(--main-color);
} */

.sp_invoice_id_wrapper {
    display: flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
    font-size: 14px;
    color: inherit;
    line-height: 15px;
}

.sp_invoice_id_wrapper>svg {
    transform: translateY(-1px);
    opacity: 0;
    visibility: hidden;
}

.sp_table_wrapper tbody tr:hover .sp_invoice_id_wrapper,
.sp_ct_row:hover .sp_invoice_id_wrapper {
    color: var(--main-color);
}

.sp_table_wrapper tbody tr:hover .sp_invoice_id_wrapper>svg,
.sp_ct_row:hover .sp_invoice_id_wrapper>svg {
    opacity: 1;
    visibility: visible;
}

.sp_button_list {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.sp_input_wrapper .sp_input_px_size {
    display: block;
    font-size: 12px;
    font-weight: 600;
    position: absolute;
    right: 15px;
    bottom: -10px;
    background-color: #ffffff;
    padding: 3px 8px 2px;
    border-radius: 20px;
}

.cd_double_quote {
    display: inline;
    font-size: inherit;
    font-weight: 400;
    color: inherit;
}

.cd_double_quote:after {
    content: '"';
}

.cd_message_page_header {
    padding: 25px;
    text-align: center;
    background-color: #ffffff;
    margin-bottom: 80px;
    margin-top: -63px;
}

.cd_message_page_body {
    max-width: 400px;
    margin: 0 auto;
    text-align: center;
    margin-bottom: 25px;
}

.cd_message_page_body>.cd_message_page_svg {
    margin-bottom: 50px;
}

.cd_message_page_body>.cd_message_page_content h3 {
    font-size: 22px;
    font-weight: 700;
    margin: 0;
    margin-bottom: 8px;
}

.cd_message_page_body>.cd_message_page_content h3>span {
    display: block;
    color: var(--main-color);
}

.cd_message_page_body>.cd_message_page_content p {
    font-size: 16px;
    margin: 0;
}

.cd_dpi_300 {
    color: var(--main-color);
    font-size: 12px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 3px;
    box-shadow: 0px 0px 0px 1px, inset 0px 0px 10px 1px #d1e3ff;
    margin-left: 4px;
}

.spj_print_hide {
    display: none !important;
}


table.dataTable#sp_user_list tbody td:nth-child(7) {
    /* width: 180px; */
    word-break: break-word;
}

.cropper-point {
    height: 10px !important;
    opacity: 1 !important;
    width: 10px !important;
    background-color: #ffffff;
    box-shadow: 0 0 4px 1px rgb(57 76 96 / 15%), 0 0 0 1px rgb(47 64 80 / 25%);
    border-radius: 50px;
}

.cropper-view-box {
    outline: 2px solid var(--main-color);
    outline-color: var(--main-color);
}

.cropper-point.point-nw {
    left: -5px;
    top: -5px;
}

.cropper-point.point-n {
    margin-left: -5px;
    top: -6px;
}

.cropper-point.point-ne {
    right: -5px;
    top: -5px;
}

.cropper-point.point-w {
    left: -5px;
    margin-top: -5px;
}

.cropper-point.point-e {
    margin-top: -5px;
    right: -6px;
}

.cropper-point.point-sw {
    bottom: -5px;
    left: -5px;
}

.cropper-point.point-s {
    bottom: -6px;
    margin-left: -5px;
}

.cropper-point.point-se {
    bottom: -5px;
    right: -5px;
}

body.modal-open .colorpicker {
    z-index: 9999;
}


/* new grid view start */
/* .sp_campaign_list{
    width: 100%;
}
.sp_campaign_list > .sp_campaign_item{
    
} */
/* new grid view end */

.sp_popup_wrapper#payment_history_popup>.sp_popup_inner {
    max-width: 1200px;
}

@media (max-width: 1240px) {
    .sp_popup_wrapper#payment_history_popup::before {
        display: none;
    }
}

#payment_history_popup .sp_ip_list {
    overflow: auto;
    white-space: nowrap;
}

#payment_history_popup .sp_ip_list .sp_ip_tr {
    grid-template-columns: 12% 12% 26% 35% 15%;
    white-space: normal;
}

#payment_history_popup .sp_ip_list .sp_ip_tr.sp_ip_head .sp_ip_td {
    background-color: #f5f7ff;
}

.sp_chart_left_side .sp_admin_dashboard_box {
    margin-bottom: 30px;
}


/* Full with design changes start */
/* .sp_template_popup_wrapper>.sp_container,
.sp_sub_menu_slider_wrapper,
.sp_header_wrapper .sp_header_inner,
.sp_container{
    max-width: 100%;
}
.sp_dash_wrapper .sp_dash_inner{
    grid-template-columns: 66.4% 33.6%;
}
.sp_dash_wrapper .sp_dash_inner .sp_dash_banner,
.sp_dash_wrapper .sp_dash_inner .sp_dash_banner .sp_dash_banner_inner{
    height: 100%;
    align-items: center;
}
.sp_dash_banner_inner{
    grid-template-columns: 64% 35%;
}
.sp_template_list,
.sp_campaign_list{
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.sp_section .sp_campaign_list{
    grid-template-columns: repeat(auto-fill, minmax(18%, 1fr));
}
.sp_sub_menu_slider .sp_ssm_item>span{
    height: 130px;
}

.sp_profile_wrapper{
    flex-direction: row;
    gap: 30px;
}
.sp_profile_wrapper>.sp_profile_left{
    max-width: 450px;
}
.sp_profile_detail>img{
    width: 100%;
}
.sp_pd_content{
    padding-left: 30px;
}
.sp_profile_box{
    padding: 30px;
}
.sp_company_profile_wrapper{
    gap: 20px;
}
.sp_pd_content>.sp_pd_avatar>img,
.sp_pd_content>.sp_pd_avatar>.sp_pd_initials,
.sp_pd_content>.sp_pd_avatar{
    width: 120px;
    height: 120px;
}
.sp_pd_content>.sp_pd_avatar{
    margin-right: 20px;
}
.sp_pd_content>.sp_pd_detail>h3{
    font-size: 18px;
    font-weight: 600;
}
.sp_pd_content>.sp_pd_detail{
    padding-top: 65px;
}
.sp_sub_menu_slider .sp_ssm_item{
    width: 188px !important;
}
.sp_cal_pdl_body .sp_campaign_list{
    grid-template-columns: repeat(auto-fill, minmax(18%, 1fr));
}

@media (max-width: 1400px) {
    .sp_profile_wrapper{
        flex-direction: column;
    }
    .sp_profile_wrapper>.sp_profile_left{
        max-width: 650px;
    }
} */
/* Full with design changes end */


/* admin full width start */
/* .admin_body .sp_header_wrapper .sp_header_inner,
.admin_body .sp_container{
    max-width: 100%;
} */
/* admin full width end */


/* profile page redesign start */
.sp_profile_wrapper {
    gap: 30px;
}

.sp_profile_wrapper>.sp_profile_left {
    max-width: 450px;
}

.sp_profile_detail>img {
    width: 100%;
}

.sp_pd_content {
    padding-left: 30px;
}

.sp_profile_box {
    padding: 30px;
}

.sp_company_profile_wrapper {
    gap: 20px;
}

.sp_pd_content>.sp_pd_avatar>img,
.sp_pd_content>.sp_pd_avatar>.sp_pd_initials,
.sp_pd_content>.sp_pd_avatar {
    width: 120px;
    height: 120px;
}

.sp_pd_content>.sp_pd_avatar {
    margin-right: 20px;
}

.sp_pd_content>.sp_pd_detail>h3 {
    font-size: 18px;
    font-weight: 600;
}

.sp_pd_content>.sp_pd_detail {
    padding-top: 65px;
}

.sp_profile_detail {
    margin-bottom: 30px;
}

.sp_profile_box_list {
    grid-template-columns: 100%;
    max-width: 1200px;
}

/* .sp_profile_survey_box{
    margin-top: 30px;
} */
.sp_profile_survey_box .sp_survey_question {
    font-size: 15px;
    margin-bottom: 4px;
}

.sp_profile_survey_box .sp_survey_option_list.checkbox,
.sp_profile_survey_box .sp_survey_option_list {
    gap: 0px;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    margin-bottom: 20px;
}

.sp_profile_survey_box .sp_survey_option_list.checkbox .sp_survey_option_item,
.sp_profile_survey_box .sp_survey_option_list .sp_survey_option_item {
    padding: 6px 0px;
    border: none;
    border-radius: 0;
}

.sp_profile_survey_box .sp_survey_option_list .sp_survey_option_item.active {
    background-color: transparent;
}

.sp_profile_survey_box .sp_input_wrapper>label {
    color: var(--color-heading);
    font-weight: 600;
    margin-bottom: 8px;
}

.sp_profile_options {
    margin-bottom: 30px;
}

.sp_profile_options>ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sp_profile_options>ul>li {
    display: inline-block;
    vertical-align: middle;
    margin-right: 15px;
}

.sp_profile_options>ul>li>a {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-weight: 600;
    color: var(--color-body);
}

.sp_profile_options>ul>li.active>a {
    color: var(--main-color);
}

.sp_profile_options>ul>li>a>span {
    width: 18px;
    height: 18px;
    border: 1px solid #bec3c9;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.sp_profile_options>ul>li.active>a>span {
    border-color: var(--main-color);
}

.sp_profile_options>ul>li.active>a>span:before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 20px;
    background-color: var(--main-color);
}

.sp_profile_options_tab_content {
    display: none;
}

.sp_profile_options_tab_content.active {
    display: block;
}

/* profile page redesign end */


/* admin table scroll start */
/* .admin_body .sp_custom_table table.dataTable{
    display: flex;
    flex-direction: column;
    overflow-x: auto;
}
.admin_body .sp_custom_table table.dataTable thead > tr,
.admin_body .sp_custom_table table.dataTable tbody > tr{
    display: flex;
}
.admin_body .sp_custom_table table.dataTable thead > tr > th,
.admin_body .sp_custom_table table.dataTable tbody > tr > td{
    flex: 1;
}
.admin_body .sp_custom_table table.dataTable thead > tr > th:first-child,
.admin_body .sp_custom_table table.dataTable tbody > tr > td:first-child{
    flex: none;
    width: 50px;
} */

.admin_body .sp_custom_table.sp_customer_table table.dataTable {
    display: flex;
    flex-direction: column;
    overflow-x: auto;
}

.admin_body .sp_custom_table.sp_customer_table table.dataTable thead>tr>th {
    width: auto !important;
}

.admin_body .sp_custom_table.sp_customer_table table.dataTable thead>tr,
.admin_body .sp_custom_table.sp_customer_table table.dataTable tbody>tr {
    display: grid;
    /* grid-template-columns: 200px 240px 120px 120px 120px 240px 140px 160px 210px 210px 210px 210px 210px 210px 160px 200px 140px 140px 140px 140px 200px 320px; */
    /* grid-template-columns: 200px 240px 120px 120px 120px 240px 140px 160px 320px; */
    grid-template-columns: 200px 240px 240px 160px 140px 120px 120px 120px 120px 100px 360px;
}

.admin_body .sp_custom_table.sp_customer_table table.dataTable thead>tr>th:nth-child(1),
.admin_body .sp_custom_table.sp_customer_table table.dataTable tbody>tr>td:nth-child(1) {
    display: none;
}

.admin_body .sp_custom_table.sp_customer_table table.dataTable thead,
.admin_body .sp_custom_table.sp_customer_table table.dataTable tbody {
    flex: 1;
    width: fit-content;
}

.admin_body .sp_custom_table.sp_customer_table table.dataTable thead>tr>th:nth-child(2),
.admin_body .sp_custom_table.sp_customer_table table.dataTable tbody>tr>td:nth-child(2) {
    position: sticky;
    left: 0;
    z-index: 2;
    background-color: #fff;
}

.admin_body .sp_custom_table.sp_customer_table table.dataTable thead>tr>th:last-child,
.admin_body .sp_custom_table.sp_customer_table table.dataTable tbody>tr>td:last-child {
    position: sticky;
    right: 0;
    z-index: 2;
    background-color: #fff;
}

.admin_body .sp_custom_table.sp_table_wrapper.sp_customer_table table.dataTable#sp_user_list thead th:nth-child(2),
.admin_body .sp_custom_table.sp_table_wrapper.sp_customer_table table.dataTable#sp_user_list thead td:nth-child(2) {
    width: auto !important;
}

.sp_table_btns .user_status {
    margin-right: 15px;
}

/* admin table scroll end */

.sp_onboarding_popup_question {
    border-right: 1px solid #dbdfe9;
    font-weight: 600;
}

#onboarding_details_popup .sp_ct_row {
    align-items: stretch;
}

.sp_remove_watermark_btn {
    position: absolute;
    bottom: 0;
    right: 0;
}

.sp_remove_watermark_btn .sp_btn.sp_btn_small {
    border-radius: 12px 0;
    padding: 0 10px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 26px;
    font-size: 13px;
}

.sp_remove_watermark_btn .sp_btn.sp_btn_small>svg {
    transform: translateY(-1px);
}

.sp_social_share_icon_list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
}

.sp_social_share_icon_list>.sp_ssil_item {
    border: 1px solid #d7d7e3;
    width: 60px;
    height: 60px;
    padding: 10px;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s cubic-bezier(0.71, -0.11, 0.25, 0.88);
}

.sp_social_share_icon_list>.sp_ssil_item>svg {
    width: 24px;
    height: auto;
    transition: all 0.3s cubic-bezier(0.71, -0.11, 0.25, 0.88);
}

.sp_social_share_icon_list>.sp_ssil_item:hover>svg {
    transform: scale(1.2);
}

.sp_social_share_icon_list>.sp_ssil_item:hover>svg path {
    fill: #ffffff;
}

.sp_social_share_icon_list>.sp_ssil_item.facebook:hover {
    background-color: #1877f2;
    border-color: #1877f2;
}

.sp_social_share_icon_list>.sp_ssil_item.linkedin:hover {
    background-color: #0177B5;
    border-color: #0177B5;
}


/* create design popup new UI start */
.sp_popup_wrapper#add_campaign_popup{
    display: none;
}
.sp_popup_wrapper#add_campaign_popup>.sp_popup_inner {
    max-width: 1070px;
    padding: 30px 30px 40px;
}

.sp_popup_wrapper#add_campaign_popup>.sp_popup_inner .sp_popup_body,
.sp_popup_wrapper#add_campaign_popup>.sp_popup_inner .sp_camp_type_wrapper {
    margin-bottom: 0;
}

.sp_camp_type_wrapper>.sp_camp_type_item>.sp_camp_type_inner>label>span {
    width: 126px;
    height: auto;
    aspect-ratio: 201/144;
    background-size: cover;
}

.sp_camp_type_wrapper>.sp_camp_type_item>.sp_camp_type_inner>label>span>svg {
    opacity: 0;
    visibility: hidden;
}

#add_package_popup .sp_camp_type_wrapper>.sp_camp_type_item>.sp_camp_type_inner>label>span>svg {
    opacity: 1;
    visibility: visible;
}

.sp_camp_type_wrapper>.sp_camp_type_item:first-child>.sp_camp_type_inner>label>span>svg {
    opacity: 1;
    visibility: visible;
}

.sp_camp_type_wrapper>.sp_camp_type_item>.sp_camp_type_inner>label[for="campType_custom_image"]>span {
    background-image: url('../images/category/new/custom_image.png');
}

.sp_camp_type_wrapper>.sp_camp_type_item>.sp_camp_type_inner>label[for="campType_logo"]>span {
    background-image: url('../images/category/new/logo.png');
}

.sp_camp_type_wrapper>.sp_camp_type_item>.sp_camp_type_inner>label[for="campType_ebook"]>span {
    background-image: url('../images/category/new/ebook.png');
}

.sp_camp_type_wrapper>.sp_camp_type_item>.sp_camp_type_inner>label[for="campType_covers"]>span {
    background-image: url('../images/category/new/covers.png');
}

.sp_camp_type_wrapper>.sp_camp_type_item>.sp_camp_type_inner>label[for="campType_worksheet"]>span {
    background-image: url('../images/category/new/worksheet.png');
}

.sp_camp_type_wrapper>.sp_camp_type_item>.sp_camp_type_inner>label[for="campType_mockup"]>span {
    background-image: url('../images/category/new/mockup.png');
}

.sp_camp_type_wrapper>.sp_camp_type_item>.sp_camp_type_inner>label[for="campType_illustration"]>span {
    background-image: url('../images/category/new/illustration.png');
}

.sp_camp_type_wrapper>.sp_camp_type_item>.sp_camp_type_inner>label[for="campType_annotation"]>span {
    background-image: url('../images/category/new/annotation.png');
}

.sp_camp_type_wrapper>.sp_camp_type_item>.sp_camp_type_inner>label[for="campType_blocks"]>span {
    background-image: url('../images/category/new/blocks.png');
}

.sp_camp_type_wrapper>.sp_camp_type_item>.sp_camp_type_inner>label[for="campType_bundles"]>span {
    background-image: url('../images/category/new/bundles.png');
}

.sp_camp_type_wrapper>.sp_camp_type_item>.sp_camp_type_inner>label[for="campType_funnels"]>span {
    background-image: url('../images/category/new/funnels.png');
}

.sp_camp_type_wrapper>.sp_camp_type_item>.sp_camp_type_inner>label[for="campType_marketing"]>span {
    background-image: url('../images/category/new/marketing.png');
}

.sp_camp_type_wrapper>.sp_camp_type_item>.sp_camp_type_inner>label[for="campType_thumbnail"]>span {
    background-image: url('../images/category/new/thumbnail.png');
}

.sp_camp_type_wrapper>.sp_camp_type_item>.sp_camp_type_inner>label[for="campType_social"]>span {
    background-image: url('../images/category/new/social.png');
}

.sp_camp_type_wrapper>.sp_camp_type_item>.sp_camp_type_inner>label[for="campType_mockups_wf"]>span {
    background-image: url('../images/category/new/mockups_wf.png');
}

.sp_camp_type_wrapper>.sp_camp_type_item>.sp_camp_type_inner>label[for="campType_apparel_wf"]>span {
    background-image: url('../images/category/new/apparel_wf.png');
}

.sp_camp_type_wrapper>.sp_camp_type_item>.sp_camp_type_inner>label[for="campType_packaging_wf"]>span {
    background-image: url('../images/category/new/packaging_wf.png');
}

.sp_camp_type_wrapper>.sp_camp_type_item>.sp_camp_type_inner>label[for="campType_pages"]>span {
    background-image: url('../images/category/new/pages.png');
}

.sp_camp_type_wrapper>.sp_camp_type_item>.sp_camp_type_inner>label[for="campType_infographics"]>span {
    background-image: url('../images/category/new/infographics.png');
}

.sp_camp_type_wrapper>.sp_camp_type_item>.sp_camp_type_inner>label[for="campType_print"]>span {
    background-image: url('../images/category/new/print.png');
}

.sp_camp_type_wrapper>.sp_camp_type_item>.sp_camp_type_inner>label[for="campType_cover_wf"]>span {
    background-image: url('../images/category/new/publishable.png');
}

.sp_camp_type_wrapper>.sp_camp_type_item>.sp_camp_type_inner>label[for="campType_publishable"]>span {
    background-image: url('../images/category/new/cover_wf.png');
}

/* create design popup new UI end */


.sp_kdp_design_sizeinpx {
    color: var(--main-color);
    display: flex;
    justify-content: space-between;
    font-size: 16px;
    border: 1px solid rgba(var(--main-color-rgb), 0.2);
    padding: 10px;
    border-radius: 6px;
    background-color: rgba(var(--main-color-rgb), 0.06);
}

.sp_ct_body.spj_cst_body .sp_ct_row:not(.autowidth) .sp_ct_col:first-child {
    text-transform: uppercase;
}

.spj_ai_style_image_ai {
    max-height: 270px;
    overflow: hidden;
}

.spj_ai_style_image_ai.open {
    max-height: max-content;
}

.image-ai-style-view-title>span.active {
    color: #ffffff;
}


/* Templates page hover option icons new UI start */
.sp_campaign_list>.sp_campaign_item.sp_new_icons>.sp_campaign_inner .sp_camp_overlay,
.sp_template_list>.sp_template_item.sp_new_icons>.sp_template_item_inner .sp_templete_overlay {
    top: auto;
    /* background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%); */
    border-radius: 0px 0px 8px 8px;
    padding: 14px;
    min-height: 100px;
    flex-direction: row !important;
    justify-content: flex-end;
    align-items: flex-end;
    gap: 10px !important;
    background-color: transparent;
    z-index: 1;
}

.sp_campaign_list>.sp_campaign_item.sp_new_icons>.sp_campaign_inner .sp_camp_overlay::before,
.sp_template_list>.sp_template_item.sp_new_icons>.sp_template_item_inner .sp_templete_overlay::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%);
    border-radius: 0px 0px 8px 8px;
    z-index: -1;
    transition: all 0.2s cubic-bezier(0.71, -0.11, 0.25, 0.88);
    transform-origin: bottom;
    transform: rotateX(90deg);
}

.sp_campaign_list>.sp_campaign_item.sp_new_icons>.sp_campaign_inner .sp_camp_overlay::before {
    border-radius: 0px;
}

.sp_campaign_list>.sp_campaign_item.sp_new_icons>.sp_campaign_inner:hover .sp_camp_overlay::before,
.sp_template_list>.sp_template_item.sp_new_icons>.sp_template_item_inner:hover .sp_templete_overlay::before {
    transform: rotateX(0deg);
}

.sp_campaign_list>.sp_campaign_item.sp_new_icons>.sp_campaign_inner .sp_camp_overlay .sp_btn,
.sp_template_list>.sp_template_item.sp_new_icons>.sp_template_item_inner .sp_templete_overlay .sp_btn {
    width: 32px;
    height: 32px;
    background-color: #ffffff !important;
    border-radius: 50px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s cubic-bezier(0.71, -0.11, 0.25, 0.88);
    transform: translateY(20px);
    opacity: 0;
    visibility: hidden;
    position: relative;
    top: auto;
    left: auto;
    min-width: inherit;
}

.sp_campaign_list>.sp_campaign_item.sp_new_icons>.sp_campaign_inner:hover .sp_camp_overlay .sp_btn,
.sp_template_list>.sp_template_item.sp_new_icons>.sp_template_item_inner:hover .sp_templete_overlay .sp_btn {
    transform: translateY(0px);
    opacity: 1;
    visibility: visible;
}

.sp_campaign_list>.sp_campaign_item.sp_new_icons>.sp_campaign_inner .sp_camp_overlay .sp_btn:hover,
.sp_template_list>.sp_template_item.sp_new_icons>.sp_template_item_inner .sp_templete_overlay .sp_btn:hover {
    background-color: var(--main-color) !important;
}

.sp_campaign_list>.sp_campaign_item.sp_new_icons>.sp_campaign_inner .sp_camp_overlay .sp_btn:nth-child(2),
.sp_template_list>.sp_template_item.sp_new_icons>.sp_template_item_inner .sp_templete_overlay .sp_btn:nth-child(2) {
    transition-delay: 0.02s;
}

.sp_campaign_list>.sp_campaign_item.sp_new_icons>.sp_campaign_inner .sp_camp_overlay .sp_btn:nth-child(3),
.sp_template_list>.sp_template_item.sp_new_icons>.sp_template_item_inner .sp_templete_overlay .sp_btn:nth-child(3) {
    transition-delay: 0.05s;
}

.sp_campaign_list>.sp_campaign_item.sp_new_icons>.sp_campaign_inner .sp_camp_overlay .sp_btn:nth-child(4),
.sp_template_list>.sp_template_item.sp_new_icons>.sp_template_item_inner .sp_templete_overlay .sp_btn:nth-child(4) {
    transition-delay: 0.08s;
}

.sp_campaign_list>.sp_campaign_item.sp_new_icons>.sp_campaign_inner .sp_camp_overlay .sp_btn:nth-child(5),
.sp_template_list>.sp_template_item.sp_new_icons>.sp_template_item_inner .sp_templete_overlay .sp_btn:nth-child(5) {
    transition-delay: 0.11s;
}

.sp_campaign_list>.sp_campaign_item.sp_new_icons>.sp_campaign_inner .sp_camp_overlay .sp_btn>svg,
.sp_template_list>.sp_template_item.sp_new_icons>.sp_template_item_inner .sp_templete_overlay .sp_btn>svg {
    width: auto;
    height: 14px;
    transform: translateY(1px);
    overflow: visible;
}

.sp_campaign_list>.sp_campaign_item.sp_new_icons>.sp_campaign_inner .sp_camp_overlay .sp_btn>svg path,
.sp_template_list>.sp_template_item.sp_new_icons>.sp_template_item_inner .sp_templete_overlay .sp_btn>svg path {
    fill: var(--main-color);
    transition: all 0.2s cubic-bezier(0.71, -0.11, 0.25, 0.88);
}

.sp_campaign_list>.sp_campaign_item.sp_new_icons>.sp_campaign_inner .sp_camp_overlay .sp_btn:hover>svg path,
.sp_template_list>.sp_template_item.sp_new_icons>.sp_template_item_inner .sp_templete_overlay .sp_btn:hover>svg path {
    fill: #ffffff;
}

.sp_template_list>.sp_template_item.sp_new_icons>.sp_template_item_inner>.sp_template_img>.sp_camp_img_overlay {
    transition: all 0.2s cubic-bezier(0.71, -0.11, 0.25, 0.88);
}

.sp_template_list>.sp_template_item.sp_new_icons>.sp_template_item_inner:hover>.sp_template_img>.sp_camp_img_overlay {
    bottom: 40px;
}

.sp_favorites>svg path {
    fill: #ffffff;
    stroke: #ffffff;
}

.listview_theme .sp_campaign_list.load_themes_list>.sp_campaign_item.sp_new_icons>.sp_campaign_inner>.sp_camp_img>.sp_camp_overlay {
    min-height: inherit;
    top: 0;
}

.listview_theme .sp_campaign_list.load_themes_list>.sp_campaign_item.sp_new_icons>.sp_campaign_inner>.sp_camp_img>.sp_camp_overlay::before {
    display: none;
}



.sp_page_block_list>.sp_pbl_item.sp_new_icons>.sp_pbl_item_inner>.sp_pbl_action_overlay {
    border-radius: 0px 0px 8px 8px;
    padding: 14px;
    min-height: 100px;
    flex-direction: row;
    justify-content: flex-end;
    align-items: flex-end;
    gap: 10px;
    background-color: transparent;
    z-index: 1;
    top: auto;
}

.sp_page_block_list>.sp_pbl_item.sp_new_icons>.sp_pbl_item_inner>.sp_pbl_action_overlay::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%);
    border-radius: 0px 0px 8px 8px;
    z-index: -1;
    transition: all 0.2s cubic-bezier(0.71, -0.11, 0.25, 0.88);
    transform-origin: bottom;
    transform: rotateX(90deg);
}

.sp_page_block_list>.sp_pbl_item.sp_new_icons:hover>.sp_pbl_item_inner>.sp_pbl_action_overlay::before {
    transform: rotateX(0deg);
}

.sp_page_block_list>.sp_pbl_item.sp_new_icons>.sp_pbl_item_inner>.sp_pbl_action_overlay .sp_btn {
    width: 32px;
    height: 32px;
    background-color: #ffffff !important;
    border-radius: 50px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s cubic-bezier(0.71, -0.11, 0.25, 0.88);
    transform: translateY(20px);
    opacity: 0;
    visibility: hidden;
    position: relative;
    top: auto;
    left: auto;
}

.sp_page_block_list>.sp_pbl_item.sp_new_icons>.sp_pbl_item_inner>.sp_img_overlay {
    transition: all 0.2s cubic-bezier(0.71, -0.11, 0.25, 0.88);
}

.sp_page_block_list>.sp_pbl_item.sp_new_icons:hover>.sp_pbl_item_inner>.sp_img_overlay {
    bottom: 40px;
}

.sp_page_block_list>.sp_pbl_item.sp_new_icons>.sp_pbl_item_inner:hover>.sp_pbl_action_overlay .sp_btn {
    transform: translateY(0px);
    opacity: 1;
    visibility: visible;
}

.sp_page_block_list>.sp_pbl_item.sp_new_icons>.sp_pbl_item_inner>.sp_pbl_action_overlay .sp_btn:hover {
    background-color: var(--main-color) !important;
}

.sp_page_block_list>.sp_pbl_item.sp_new_icons>.sp_pbl_item_inner>.sp_pbl_action_overlay .sp_btn:nth-child(2) {
    transition-delay: 0.02s;
}

.sp_page_block_list>.sp_pbl_item.sp_new_icons>.sp_pbl_item_inner>.sp_pbl_action_overlay .sp_btn:nth-child(3) {
    transition-delay: 0.05s;
}

.sp_page_block_list>.sp_pbl_item.sp_new_icons>.sp_pbl_item_inner>.sp_pbl_action_overlay .sp_btn:nth-child(4) {
    transition-delay: 0.08s;
}

.sp_page_block_list>.sp_pbl_item.sp_new_icons>.sp_pbl_item_inner>.sp_pbl_action_overlay .sp_btn:nth-child(5) {
    transition-delay: 0.11s;
}

.sp_page_block_list>.sp_pbl_item.sp_new_icons>.sp_pbl_item_inner>.sp_pbl_action_overlay .sp_btn>svg {
    width: auto;
    height: 14px;
    transform: translateY(1px);
    overflow: visible;
}

.sp_page_block_list>.sp_pbl_item.sp_new_icons>.sp_pbl_item_inner>.sp_pbl_action_overlay .sp_btn>svg path {
    fill: var(--main-color);
    transition: all 0.2s cubic-bezier(0.71, -0.11, 0.25, 0.88);
}

.sp_page_block_list>.sp_pbl_item.sp_new_icons>.sp_pbl_item_inner>.sp_pbl_action_overlay .sp_btn:hover>svg path {
    fill: #ffffff;
}

/* Templates page hover option icons new UI end */

.sp_recently_used_slider {
    position: relative;
}

.sp_rusi_inner {
    border: 2px solid var(--line-color);
    border-radius: 10px;
    position: relative;
    aspect-ratio: 520/400;
    background-color: #ffffff;
}

.sp_rusi_inner>img {
    width: 100%;
    height: 157px;
    border-radius: 10px;
    /* aspect-ratio: 520/400; */
    object-fit: contain;
    padding: 8px;
    background-color: #ffffff;
}

.sp_rusi_inner>.sp_rusi_overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 10px;
    background-color: rgba(30, 31, 40, 0.60);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.sp_recently_used_slider_item:hover .sp_rusi_inner>.sp_rusi_overlay {
    opacity: 1;
    visibility: visible;
}

.sp_rusi_inner>.sp_rusi_overlay>.sp_btn {
    padding: 10px 16px;
    line-height: inherit;
    height: auto;
    border-radius: 8px;
    font-size: 14px;
}

.sp_recently_used_slider .sp_ssm_slider_btn {
    margin-top: -17px;
}

/* top bar start */
.sp_topbar_wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 56px;
    background-color: #ffffff;
    text-align: center;
    /* padding: 12px 6px; */
    font-weight: 800;
    color: var(--main-color);
    z-index: 9990;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.sp_topbar_wrapper::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(var(--main-color-rgb), 0.10);
    z-index: -1;
}

.sp_topbar_icon {
    margin-right: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-2px);
    vertical-align: middle;
}

.sp_topbar_icon>svg path {
    fill: var(--main-color);
}

.sp_xdays {
    font-weight: 700;
}

.show_topbar .sp_main_wrapper {
    padding-top: 115px;
}

.show_topbar .sp_main_wrapper>.sp_header_wrapper {
    top: 56px;
}

.show_topbar .sp_complete_book_wrapper_popup,
.show_topbar .sp_popup_wrapper#youtube_thumbnail_popup>.sp_popup_inner,
.show_topbar .sp_sets_creator_popup,
.show_topbar .sp_setstemp_wrapper_popup,
.show_topbar .sp_bundletemp_wrapper_popup,
.show_topbar .sp_page_wrapper_popup,
.show_topbar .sp_ann_popup_wrapper,
.show_topbar .sp_free_trial_popup_wrapper,
.show_topbar .sp_media_manager_popup,
.show_topbar .sp_add_tutorial_popup,
.show_topbar .sp_tutorial_preview_popup,
.show_topbar .sp_theme_wrapper_popup,
.show_topbar .sp_manage_assets_cat_popup,
.show_topbar .sp_select_campaign_popup,
.show_topbar #spj_add_ai_image_popup.sp_popup_wrapper>.sp_popup_inner,
.show_topbar #spj_add_ai_image_popup.sp_popup_wrapper,
.show_topbar .sp_pixi_template_popup_wrapper,
.show_topbar .sp_pack_setup_popup_wrapper,
.show_topbar .sp_template_popup_wrapper,
.show_topbar .update_subscription_popup_wrapper {
    top: 119px;
}

.sp_topbar_wrapper .sp_free_trial_timer{
    display: inline-block;
    vertical-align: middle;
    margin: 0;
    margin: 0 10px;
}
.sp_topbar_wrapper .sp_free_trial_timer .sp_timer{
    gap: 6px;
}
.sp_topbar_wrapper .sp_timer>.ce-col>.ce-seconds, 
.sp_topbar_wrapper .sp_timer>.ce-col>.ce-minutes, 
.sp_topbar_wrapper .sp_timer>.ce-col>.ce-hours, 
.sp_topbar_wrapper .sp_timer>.ce-col>.ce-days{
    box-shadow: none;
    width: 34px;
    height: 28px;
    font-size: 15px;
    margin: 0;
    font-weight: 800;
    /* color: #ef5045; */
    color: #1e1e1e;
    background-color: white;
    border-radius: 4px;
}
.sp_topbar_wrapper .sp_timer>.ce-col>.ce-seconds-label, 
.sp_topbar_wrapper .sp_timer>.ce-col>.ce-minutes-label, 
.sp_topbar_wrapper .sp_timer>.ce-col>.ce-hours-label, 
.sp_topbar_wrapper .sp_timer>.ce-col>.ce-days-label{
    display: none;
}
.sp_topbar_wrapper .upgrade_btn{
    /* text-decoration: underline; */
    height: auto;
    line-height: normal;
    padding: 10px 24px;
    /* font-size: 12px; */
    font-size: 14px;
    font-weight: 700;
    border-radius: 50px;
    /* background-color: #82c01f; */
    background-color: #FF5722;
    box-shadow: 1px 3px 8px #99760b80;
}
.sp_topbar_wrapper.danger{
    color: #2f2f2f;
}
.sp_topbar_wrapper.danger .sp_topbar_icon > svg path{
    fill: #F44336;
}
.sp_topbar_wrapper.danger.sp_topbar_wrapper::before{
    /* background-color: rgb(255 229 227); */
    background: linear-gradient(0deg, #fff06c, #ffcd37);
}
/* top bar end */


/********************************************************************************************* 
30. Uploaded Image Manager start
*********************************************************************************************/
.sp_image_manager_popup_link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    margin-bottom: 15px;
    color: #DCDFF6;
    font-weight: 600;
}

.sp_image_manager_popup_link>svg path {
    stroke: #DCDFF6;
}

.sp_image_manager_popup_link:hover {
    color: #ffffff;
}

.sp_image_manager_popup_link:hover>svg path {
    stroke: #ffffff;
}

.image-ai-generate-bottom .sp_image_manager_popup_link {
    margin-bottom: 0;
    padding: 10px;
    display: flex;
    justify-content: center;
}

.sp_uimp_popup_wrapper {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.sp_uimp_popup_wrapper.sp_popup_wrapper>.sp_popup_inner {
    max-width: 1260px;
}
.sp_uimp_popup_wrapper.sp_popup_wrapper::before{
    display: none;
}

.sp_uimp_header {
    margin-bottom: 20px;
}

.sp_uimp_header>h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.sp_uimp_header>h3>span {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    color: var(--color-body);
    font-weight: 400;
}

.sp_uimp_popup_wrapper .sp_list_grid_switch {
    width: 40px;
    height: 40px;
    border-color: var(--line-color);
    border-radius: 4px;
}

.sp_uimp_popup_wrapper .sp_list_grid_switch>svg {
    width: 18px;
}

.sp_uimp_checkAll {
    width: 40px;
    height: 40px;
    border: 1px solid var(--line-color);
    border-radius: 4px;
    position: relative;
}

.sp_selected_count>span {
    font-weight: 700;
    color: var(--main-color);
}

.sp_uimp_checkAll>.sp_checkbox {
    width: 40px;
    height: 40px;
}

.sp_uimp_checkAll>.sp_checkbox>label {
    margin: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.sp_uimp_checkAll>.sp_checkbox>label::before {
    margin: 0;
}

.sp_uimp_checkAll>.sp_checkbox>label::after {
    top: 16px;
    left: 14px;
}

.sp_uimp_checkAll>.sp_checkbox>input:checked~label::before {
    background-color: var(--main-color);
    border-color: var(--main-color);
}

.sp_uimp_checkAll>.sp_checkbox>input:checked~label::after {
    border-left-color: #ffffff;
    border-bottom-color: #ffffff;
}

.sp_uimp_popup_wrapper .sp_popup_tab {
    margin-bottom: 0;
}

.sp_uimp_popup_wrapper .sp_popup_tab_content {
    margin-top: 30px;
}

.sp_uimp_body_tab_wrapper {
    position: sticky;
    top: -16px;
    background-color: #ffffff;
    z-index: 10;
    padding: 10px 4px;
    margin: 0 -4px;
}

.sp_uimp_image_list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
    grid-gap: 20px;
}

.sp_uimp_image_list>.sp_uimp_image_item {
    position: relative;
    user-select: none;
}

.sp_uimp_image_list>.sp_uimp_image_item>.sp_uimp_image_img {
    background-color: rgba(var(--main-color-rgb), 0.12);
    border-radius: 4px;
    padding: 4px;
    aspect-ratio: 1/1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sp_uimp_image_list>.sp_uimp_image_item:hover>.sp_uimp_image_img {
    box-shadow: 0px 0px 0px 1px rgba(var(--main-color-rgb), 0.3);
}

.sp_uimp_image_list>.sp_uimp_image_item>.sp_uimp_image_img>img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 4px;
}

.sp_uimp_image_overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.sp_uimp_checkbox {
    height: 100%;
}

.sp_uimp_checkbox>input {
    position: absolute;
    left: -9999999px;
    opacity: 0;
    visibility: hidden;
}

.sp_uimp_checkbox>label {
    position: relative;
    display: block;
    height: 100%;
    border-radius: 4px;
}

.sp_uimp_checkbox>label>.sp_uimp_chk_unchecked {
    width: 16px;
    height: 16px;
    background-color: #FFFFFF;
    border: 1px solid var(--main-color);
    border-radius: 3px;
    position: relative;
    top: 10px;
    left: 10px;
}

.sp_uimp_checkbox>label>.sp_uimp_chk_checked {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1;
    width: 16px;
    height: 16px;
    background-color: var(--main-color);
    border: 1px solid #FFFFFF;
    border-radius: 2px;
    opacity: 0;
    visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sp_uimp_checkbox>label>.sp_uimp_chk_checked>span {
    width: 10px;
    height: 6px;
    border-left: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    display: block;
    border-radius: 1px;
    transform: rotate(-45deg) translate(1px, -1px);
}

.sp_uimp_checkbox>input:checked~label {
    box-shadow: 0px 0px 0px 2px var(--main-color);
    background-color: rgba(var(--main-color-rgb), 0.06);
}

.sp_uimp_checkbox>input:checked~label>.sp_uimp_chk_checked {
    opacity: 1;
    visibility: visible;
}

.sp_uimp_image_item .sp_uimp_action_btn {
    position: absolute;
    left: 4px;
    right: 4px;
    bottom: 4px;
    display: none;
    align-items: center;
    gap: 6px;
    padding: 6px;
    justify-content: center;
    backdrop-filter: blur(10px);
    background-color: rgb(0 0 0 / 10%);
    border-radius: 0 0 4px 4px;
}

.sp_uimp_image_item:hover .sp_uimp_action_btn {
    display: flex;
}

.sp_uimp_action_btn>.sp_uimp_btn {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
}

.sp_uimp_action_btn>.sp_uimp_btn>svg path {
    fill: var(--main-color);
}

.sp_uimp_action_btn>.sp_uimp_btn>svg {
    width: 14px;
    height: auto;
}

.sp_uimp_action_btn>.sp_uimp_btn.btn_success {
    background-color: #82D12F;
}

.sp_uimp_action_btn>.sp_uimp_btn.btn_danger {
    background-color: #FF5353;
}

.sp_uimp_action_btn>.sp_uimp_btn.btn_success>svg path,
.sp_uimp_action_btn>.sp_uimp_btn.btn_danger>svg path {
    fill: #ffffff;
}

.sp_uimp_action_btn>.sp_uimp_btn.btn_big {
    width: 40px;
    height: 40px;
}

.sp_uimp_action_btn>.sp_uimp_btn.btn_big>svg {
    width: 18px;
    height: auto;
}

.sp_uimp_copy_prompt {
    width: 26px;
    height: 26px;
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    border-radius: 3px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
}

.sp_uimp_copy_prompt>svg {
    width: 16px;
    height: auto;
}

.sp_uimp_copy_prompt:hover {
    background-color: rgba(0, 0, 0, 0.4);
}

.sp_uimp_image_item:hover .sp_uimp_copy_prompt {
    opacity: 1;
    visibility: visible;
}

.sp_uimp_copy_prompt~.tooltip .tooltip-inner {
    white-space: nowrap;
}

/* list view start */
.listview_uimp .sp_uimp_image_list {
    display: block;
}

.listview_uimp .sp_uimp_image_list>.sp_uimp_image_item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    padding: 6px;
}

.listview_uimp .sp_uimp_image_list>.sp_uimp_image_item>.sp_uimp_image_img>img,
.listview_uimp .sp_uimp_image_list>.sp_uimp_image_item>.sp_uimp_image_img {
    aspect-ratio: auto;
    width: 40px;
    height: 40px;
}

.listview_uimp .sp_uimp_image_list>.sp_uimp_image_item>.sp_uimp_image_overlay {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding-right: 10px;
}

.listview_uimp .sp_uimp_image_item .sp_uimp_action_btn {
    display: flex;
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    padding: 0;
    background-color: transparent;
    backdrop-filter: none;
}

.listview_uimp .sp_uimp_action_btn>.sp_uimp_btn.ed_canvas_add_image {
    background-color: rgba(var(--main-color-rgb), 0.1);
}

.listview_uimp .sp_uimp_checkbox {
    height: auto;
}

.listview_uimp .sp_uimp_checkbox>label {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 120px;
    box-shadow: 0px 0px 0px 1px var(--line-color);
}

.listview_uimp .sp_uimp_checkbox>label>.sp_uimp_chk_unchecked {
    top: auto;
    left: auto;
}

.listview_uimp .sp_uimp_checkbox>label>.sp_uimp_chk_checked {
    top: auto;
    left: auto;
}

.listview_uimp .sp_uimp_copy_prompt {
    right: 150px;
    top: 14px;
    background-color: transparent;
    backdrop-filter: none;
    opacity: 1;
    visibility: visible;
}

.listview_uimp .sp_uimp_copy_prompt>svg path {
    fill: var(--main-color);
}

/* list view end */
/********************************************************************************************* 
30. Uploaded Image Manager end
*********************************************************************************************/

/********************************************************************************************* 
31. Campaign list with sidebar start
*********************************************************************************************/
.sp_camp_list_with_sidebar{
    display: grid;
    grid-template-columns: 20% 1fr;
    grid-gap: 20px;
    margin-bottom: 30px;
    align-items: flex-start;
}
.sp_camp_list_with_sidebar .sp_campaign_list{
    grid-template-columns: repeat(auto-fill, minmax(20%, 1fr));
}
.sp_camp_list_with_sidebar > .sp_social_size_list > ul > li{
    padding: 10px 0;
    display: block;
}
.sp_camp_list_with_sidebar > .sp_social_size_list > ul > li.uncategorized{
    border-bottom: 1px solid #e9e9e9;
    margin-bottom: 10px;
    padding-bottom: 20px;
    color: #EF5350;
}
.sp_camp_list_with_sidebar > .sp_social_size_list > ul > li.uncategorized.active{
    font-weight: 700;
}
@media(max-width:1024px) {
    .sp_camp_list_with_sidebar{
        grid-template-columns: 30% 1fr;
    }
    .sp_camp_list_with_sidebar .sp_campaign_list{
        grid-template-columns: repeat(auto-fill, minmax(40%, 1fr));
    }
}
@media(max-width:768px) {
    .sp_camp_list_with_sidebar,
    .sp_camp_list_with_sidebar .sp_campaign_list{
        grid-template-columns: 1fr;
    }
}
/********************************************************************************************* 
31. Campaign list with sidebar end
*********************************************************************************************/
.grid_box_wrapper{
    text-align: center;
}
.grid_box {
    display: grid;
    grid-template-columns: 0px 1fr 0px;
    grid-template-rows: 0px 1fr 0px;
    /* gap: 10px; */
    max-width: 800px;
    margin: 50px auto;
    position: relative;
}

.grid_box>.grid_box_item img {
    max-width: 100%;
    vertical-align: middle;
}

.grid_box>.controls {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    box-shadow: 0px 0px 0px 2px blue;
}

.grid_box>.controls>.controls_item {
    position: absolute;
    width: 30px;
    height: 10px;
    border-radius: 6px;
    background-color: #ffffff;
    box-shadow: 0px 0px 0px 2px blue;
    cursor: pointer;
}

.grid_box>.controls>.controls_item.top {
    top: -6px !important;
    left: calc(50% - 15px) !important;
    cursor: n-resize;
}

.grid_box>.controls>.controls_item.bottom {
    top: auto !important;
    bottom: -6px !important;
    left: calc(50% - 15px) !important;
    cursor: n-resize;
}

.grid_box>.controls>.controls_item.left {
    top: calc(50% - 15px) !important;
    left: -6px !important;
    width: 10px;
    height: 30px;
    cursor: e-resize;
}

.grid_box>.controls>.controls_item.right {
    left: auto !important;
    top: calc(50% - 15px) !important;
    right: -6px;
    width: 10px;
    height: 30px;
    cursor: e-resize;
}

.cd_new_edit_btns{
    display: flex;
    align-items: center;
    gap: 6px;
}
.cd_new_edit_btns > .sp_beta_btn{
    background: linear-gradient(45deg, #9C27B0, #673AB7, #E91E63);
}


.sp_input_wrapper.sp_customer_profile{
    flex: none;
    width: 74px;
    height: 74px;
    position: relative;
}
.sp_input_wrapper.sp_customer_profile > input.sp_input{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    opacity: 0;
    cursor: pointer;
}
.sp_input_wrapper.sp_customer_profile > img{
    width: 74px;
    height: 74px;
    border-radius: 10px;
    background-color: #e9e9f4;
    object-fit: cover;
}
.sp_input_wrapper.sp_customer_profile .sp_customer_profile_remove{
    position: absolute;
    top: -6px;
    right: -6px;
    width: 18px;
    height: 18px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #F44336;
    cursor: pointer;
}
.sp_input_wrapper.sp_customer_profile .sp_customer_profile_remove::before,
.sp_input_wrapper.sp_customer_profile .sp_customer_profile_remove::after{
    content: "";
    position: absolute;
    width: 10px;
    height: 2px;
    border-radius: 2px;
    background-color: #FFFFFF;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}
.sp_input_wrapper.sp_customer_profile .sp_customer_profile_remove::after {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
@media (max-width: 1440px) {
    .sp_input_wrapper.sp_customer_profile > img,
    .sp_input_wrapper.sp_customer_profile{
        width: 54px;
        height: 54px;
    }
}

/* new corp 2024 plans start */
.sp_popup_wrapper#download_popup .sp_popup_body.basic_corp24 .sp_dpb_item.medium,
.sp_popup_wrapper#download_popup .sp_popup_body.basic_corp24 .sp_dpb_item.original,
.sp_popup_wrapper#download_popup .sp_popup_body.basic_corp24 .sp_dpi_option_item.dpi96,
.sp_popup_wrapper#download_popup .sp_popup_body.basic_corp24 .sp_dpi_option_item.dpi300{
    pointer-events: none;
    opacity: 0.5;
}
.sp_popup_wrapper#download_popup .sp_popup_body.basic_corp24 .spj_dp_format_option option[value="pdf"],
.sp_popup_wrapper#download_popup .sp_popup_body.basic_corp24 .spj_dp_format_option option[value="webp"],
.sp_popup_wrapper#download_popup .sp_popup_body.basic_corp24 .spj_dp_format_option option[value="jpeg"]{
    pointer-events: none;
    opacity: 0.5;
    color: #c1c1c1;
}
/* new corp 2024 plans end */


/* black friday popup start */
.sp_popup_wrapper.sp_black_friday_popup > .sp_popup_inner{
    background-color: #1b112d;
    background: url('../images/black_friday_popup_bg.svg') #1b112d;
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
}
.sp_popup_wrapper.sp_black_friday_popup > .sp_popup_inner .sp_popup_close{
    background-color: transparent;
}
.sp_popup_wrapper.sp_black_friday_popup > .sp_popup_inner .sp_popup_body{
    margin-bottom: 0;
}
.sp_black_friday_wrapper{
    text-align: center;
    color: #FFFFFF;
}
.sp_black_friday_wrapper .sp_bfp_tag{
    background-color: #FFFFFF;
    padding: 6px 12px 5px;
    border-radius: 8px;
    display: inline-block;
    font-weight: 700;
    color: #222222;
    text-transform: uppercase;
    font-size: 13px;
}
.sp_black_friday_wrapper > h1{
    font-size: 30px;
    color: #FFFFFF;
    margin-bottom: 10px;
}
.sp_black_friday_wrapper .sp_bfp_off{
    font-size: 50px;
    color: #FFEB3B;
    margin-bottom: 20px;
    font-weight: 900;
}
.sp_black_friday_wrapper .sp_bfp_price{
    font-size: 20px;
    color: #FFFFFF;
    margin: 20px auto;
    font-weight: 300;
}
.sp_black_friday_wrapper .sp_bfp_price > span{
    font-size: 14px;
    text-decoration: line-through;
    display: block;
    margin-bottom: 2px;
}
.sp_black_friday_wrapper .sp_btn{
    background-color: #53b557;
    border-radius: 50px;
    font-size: 18px;
    height: auto;
    padding: 10px 30px;
    width: 100%;
    max-width: 240px;
}
.sp_black_friday_wrapper .sp_timer{
    justify-content: center;
}
.sp_black_friday_wrapper .sp_timer > .ce-col{
    width: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: #ffffff0f;
    padding: 10px;
    border-radius: 10px;
}
.sp_black_friday_wrapper .sp_timer > .ce-col > .ce-seconds, 
.sp_black_friday_wrapper .sp_timer > .ce-col > .ce-minutes, 
.sp_black_friday_wrapper .sp_timer > .ce-col > .ce-hours, 
.sp_black_friday_wrapper .sp_timer > .ce-col > .ce-days{
    box-shadow: none;
    color: #8f83a5;
    height: auto;
    width: auto;
    font-size: 30px;
    font-weight: 900;
    margin: 0;
}
.sp_black_friday_wrapper .sp_timer > .ce-col > .ce-seconds-label, 
.sp_black_friday_wrapper .sp_timer > .ce-col > .ce-minutes-label, 
.sp_black_friday_wrapper .sp_timer > .ce-col > .ce-hours-label, 
.sp_black_friday_wrapper .sp_timer > .ce-col > .ce-days-label{
    color: #8f83a5;
}
/* black friday popup end */

.cd_table_ai_usage{
    font-size: 12px;
    font-weight: 700;
}
.cd_table_ai_usage > span{
    display: block;
    color: var(--main-color);
    font-weight: 600;
}