@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/*
Copyright (c) 2024
------------------------------------------------------------------
[MagicPhoto AI - Global Stylesheet]
-------------------------------------------------------------------
*/
:root{
    --primaryColor : #3365EC;
    --secondaryColor: #2753c9;
    --textColor : #929292;
    --headingColor : #000000;
    --darkColor:#000000;
    --whiteColor : #ffffff;
    /* --gradientColor : ; */
    --placeholderColor : #C7C7C7;
    --border : 1px solid #E4E4E4;
    --circleRadius : 50%;
    --poppinsFont: "Poppins", sans-serif;
    --line-color-input : #dedede;
    --main-color-rgb: 52, 106, 253;
    --main-color : #3365EC;
    --buttonBgColor : #3365EC;
    --buttonTextColor: #ffffff;
}
*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
/*------ ScrollBar CSS Start ----*/
*::-webkit-scrollbar {
    width: 2px;
    height: 2px;
}
*::-webkit-scrollbar-track {
    background-color: #f2f2f2;
    border-radius: 10px;
}
*::-webkit-scrollbar-thumb {
    background-color: var(--primaryColor) !important;
    border-radius: 2px;
}
* {
    scrollbar-color: #e8ecef transparent !important;
    scrollbar-width: thin;
}
a,
a:hover,
a:focus {
  /* color: var(--dark-color); */
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  cursor: pointer;
  text-decoration: none !important;
}
::placeholder {
    font-family: var(--vg-roboto);
    font-size: 13px;
    font-weight: 400;
}
img{
    max-width: 100%;
}
input{
    height: 44px;
    border-radius: 8px;
    background: var(--whiteColor);
    border: var(--border);
    font-size: 13px;
    font-weight: 400;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
}
body{
    margin: 0px;
    padding: 0px;
    font-family: "Inter", sans-serif;
}
.mgi_label{
    font-size: 14px;
    font-weight: 700;
    color: var(--darkColor);
}
/* Button start */
.mgi_ck_btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 38px;
    /* line-height: 38px; */
    background-color: var(--buttonBgColor);
    border: 1px solid var(--buttonBgColor);
    border-radius: 10px;
    font-size: 13px;
    color: #FFFFFF;
    font-weight: 600;
    padding: 0 16px;
    cursor: pointer;
}
.mgi_ck_btn:focus,
.mgi_ck_btn:hover{
    color: #FFFFFF;
}
.mgi_ck_btn.mgi_ck_btn_block{
    display: flex;
    width: 100%;
}
.mgi_ck_btn.mgi_ck_btn_round{
    border-radius: 80px;
}
.mgi_ck_btn.mgi_ck_btn_gray{
    background-color: #F1F1F1;
    border: none;
    color: var(--color-dark1);
    font-weight: 500;
}
.mgi_ck_btn.mgi_ck_btn_red{
    background-color: #D31510;
    border: none;
    color: #FFFFFF;
    font-weight: 500;
}
.mgi_ck_btn.mgi_ck_btn_green{
    background-color: #4CAF50;
    border: none;
    color: #FFFFFF;
    font-weight: 500;
}
.mgi_ck_btn.mgi_ck_btn_outline{
    border-color: var(--line-color-input);
    background-color: transparent;
    color: var(--color-dark1);
}
.mgi_ck_btn.mgi_ck_btn_outline:hover{
    border-color: var(--buttonBgColor);
    color: var(--buttonBgColor);
}
.mgi_ck_btn.mgi_ck_btn_link{
    background-color: transparent;
    border-color: transparent;
    color: var(--buttonBgColor);
}
.mgi_ck_btn.mgi_ck_btn_upgrade{
    background: linear-gradient(45deg, #FF9800, #FFC107);
    color: #FFFFFF;
}
/* Button end */
/* dropdown start */
.mgi_ck_dropdown_wrapper{
    position: relative;
}
.mgi_ck_dropdown_toggle{
    height: 38px;
    padding: 0 30px 0 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: var(--color-dark1);
    box-shadow: 0px 0px 0px 1px var(--line-color-input);
    border-radius: 10px;
    position: relative;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}
.mgi_ck_dropdown_toggle > p{
    margin: 0;
    color: inherit;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mgi_ck_dropdown_toggle > .mgi_ck_dropdown_toggle_icon{
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mgi_ck_dropdown_toggle > span{
    position: absolute;
    top: 12px;
    right: 10px;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.mgi_ck_dropdown_toggle.show > span{
    transform: rotate(-180deg);
}
.mgi_ck_dropdown_dd{
    background: #FFFFFF;
    border-radius: 11px;
    border: none;
    min-width: 279px;
    min-height: 80px;
    box-shadow: 0px 7px 18.7px 0px #0000001A;
    border: 1px solid #E7E7E7;
}
.mgi_ck_dropdown_dd.with_padding{
    padding: 8px;
    right: 0 !important;
    left: auto !important;
}
.mgi_ck_dropdown_dd.with_padding .mgi_ck_dropdown_item{
    border-radius: 9px;
    padding: 10px;
    padding-right: 30px;
}
.mgi_ck_dropdown_dd > .cdn_search_wrapper{
    max-width: 100%;
    margin-bottom: 4px;
}
.mgi_ck_dropdown_wrapper.checkbox_dd .mgi_ck_dropdown_list > .mgi_ck_dropdown_item{
    text-overflow: ellipsis;
    overflow: hidden;
    border-bottom: 1px solid #f1f1f1;
    border-radius: 0;
    display: block;
}
.mgi_ck_dropdown_wrapper.checkbox_dd .mgi_ck_dropdown_list > .mgi_ck_dropdown_item:last-child{
    border-bottom: none;
}
.mgi_ck_dropdown_wrapper.checkbox_dd .mgi_ck_dropdown_list > .mgi_ck_dropdown_item::before{
    content: "";
    position: absolute;
    top: calc(50% - 8px);
    right: 10px;
    width: 16px;
    height: 16px;
    border: 1px solid var(--color-light3);
    border-radius: 4px;
}
.mgi_ck_dropdown_wrapper.checkbox_dd .mgi_ck_dropdown_list > .mgi_ck_dropdown_item:hover::before{
    border-color: var(--buttonBgColor);
}
.mgi_ck_dropdown_wrapper.checkbox_dd .mgi_ck_dropdown_list > .mgi_ck_dropdown_item.active::before{
    border-color: var(--buttonBgColor);
    background-color: var(--buttonBgColor);
}
.mgi_ck_dropdown_wrapper.checkbox_dd .mgi_ck_dropdown_list > .mgi_ck_dropdown_item.active::after{
    content: "";
    position: absolute;
    top: calc(50% - 4px);
    right: 13px;
    width: 10px;
    height: 6px;
    border-left: 2px solid #FFFFFF;
    border-bottom: 2px solid #FFFFFF;
    transform: rotate(-45deg);
}
.mgi_ck_dropdown_wrapper.checkbox_dd .mgi_ck_dropdown_list > .mgi_ck_dropdown_item.active{
    background-color: transparent;
}
.mgi_ck_dropdown_item > .mgi_ck_dropdown_item_icon > img {
    max-width: 14px;
}
.mgi_ck_dropdown_item {
    padding: 12px 18px;
    padding-right: 30px;
    display: grid;
    align-items: center;
    grid-template-columns: 20px auto;
    gap: 6px;
    font-weight: 500;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    position: relative;
}
.mgi_ck_dropdown_item:hover {
    color: var(--buttonBgColor);
}
/* dropdown end */
/**
=========================================
    Header Menu Toggle Css
=========================================
**/
@keyframes hover {
  50% {
    transform: translateX(10px);
  }
}
.hide{
    display: none !important;
}
.mgi_mainWrapper > label {
    top: 24px;
    left: 15px;
    position: fixed;
    width: 20px;
    height: 20px;
    cursor: pointer;
    /* transition: 0.3s ease; */
    display: flex;
    align-items: center;
    z-index: 0;
    opacity: 0;
}
.mgi_mainWrapper > label span,
.mgi_mainWrapper > label span::before,
.mgi_mainWrapper > label span::after,
.mgi_mainWrapper nav > .mgi_headerWrap .mgi_logoHolder label span,
.mgi_mainWrapper nav > .mgi_headerWrap .mgi_logoHolder label span:before,
.mgi_mainWrapper nav > .mgi_headerWrap .mgi_logoHolder label span:after {
  transition: background 0.3s, transform 0.3s;
}
.mgi_mainWrapper > label span,
.mgi_mainWrapper > label span::before,
.mgi_mainWrapper > label span::after,
.mgi_mainWrapper nav > .mgi_headerWrap .mgi_logoHolder label span,
.mgi_mainWrapper nav > .mgi_headerWrap .mgi_logoHolder label span:before,
.mgi_mainWrapper nav > .mgi_headerWrap .mgi_logoHolder label span:after {
  content: "";
  position: absolute;
  height: 2px;
  width: 20px;
  background: #b3b3b3;
}
.mgi_mainWrapper > label span::before {
  transform: translateY(-6px);
}
.mgi_mainWrapper > label span::after {
  transform: translateY(6px);
}
.mgi_logoHolder .mgi_createbtn_sidebar {
    padding: 0;
}
/* .mgi_mainWrapper nav {
  position: fixed;
  height: 100%;
  width: 350px;
  left: -350px;
  overflow: hidden;
  background: var(--whiteColor);
  transition: 0.3s ease;
  padding: 40px 30px;
} */
.mgi_mainWrapper nav > div.mgi_headerWrap > label {
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 0.3s ease;
  position: absolute;
  top: 35px;
  right: 20px;
  /* display: none !important; */
}
.mgi_mainWrapper nav > .mgi_headerWrap .mgi_logoHolder label span,
.mgi_mainWrapper nav > .mgi_headerWrap .mgi_logoHolder label span:before,
.mgi_mainWrapper nav > .mgi_headerWrap .mgi_logoHolder label span:after {
  background: #4d4d4d;
}
.mgi_mainWrapper > input[type=checkbox] {
  display: none;
  opacity: 0;
  position: absolute;
}
.mgi_mainWrapper > input[type=checkbox]:checked ~ label {
  opacity: 0;
  pointer-events: none;
}
.mgi_mainWrapper > input[type=checkbox]:checked ~ nav {
  left: 0;
}
.mgi_mainWrapper > input[type=checkbox]:checked ~ nav .mgi_headerWrap .mgi_logoHolder label span {
  background: transparent;
}
.mgi_mainWrapper > input[type=checkbox]:checked ~ nav .mgi_headerWrap .mgi_logoHolder label span:before {
  transform: rotate(-45deg);
}
.mgi_mainWrapper > input[type=checkbox]:checked ~ nav .mgi_headerWrap .mgi_logoHolder label span:after {
  transform: rotate(45deg);
}
.mgi_mainWrapper > input[type=checkbox]:checked ~ nav .mgi_headerWrap .mgi_logoHolder label span:before,
.mgi_mainWrapper > input[type=checkbox]:checked ~ nav .mgi_headerWrap .mgi_logoHolder label span:after {
  transition-delay: 0.2s;
}
.mgi_headerWrap {
    flex-shrink: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    height: calc(100vh - 0px);
    overflow: auto;
    padding: 0px 0px 50px;
}
.mgi_headerWrap > .mgi_bottomMenu {
    position: sticky;
    bottom: -50px;
    background-color: #f9f9fa;
    padding: 20px;
    z-index: 1;
}
/* section {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80vh;
  font-size: 4rem;
  color: #b3b3b3;
}
section:nth-child(odd) {
  background: #120a21;
}
section:nth-child(even) {
  background: #170d28;
} */
/** 
=========================================
    Dashboard Flow Design Start 
=========================================
**/
.mgi_mainWrapper {
    display: flex;
    align-items: start;
    justify-content: start;
    max-height: 100vh;
    overflow: auto;
    background-color: var(--whiteColor);
}
.mgi_rightSection_wrapper {
    max-width: calc(100% - 312px);
    width: 100%;
}
.mgi_sideBar_menu {
    max-width: 312px;
    background-color: #F9F9FA;
    padding: 0px;
    height: 100vh;
    max-height: 100vh;
    overflow: auto;
    position: sticky;
    top: 0px;
    width: 100%;
    z-index: 9;
}
.mgi_svgHolder .material-symbols-outlined {
    color: var(--darkColor);
}
.mgi_logoHolder {
    padding: 40px 30px 25px;
    position: sticky;
    top: 0;
    background-color: #f9f9fa;
    z-index: 99;
}
.mgi_logoHolder img{
    max-height: 25px;
}
.mgi_logoHolder input#Modaltoogle-menu {
    display: none;
}
.mgi_createbtn_sidebar {
    margin: 15px 0 40px;
    padding: 0px 30px;
}
.mgi_btn {
    height: 44px;
    border-radius: 8px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--buttonBgColor);
    color: var(--buttonTextColor);
    transition: all 0.3s;
    font-size: 16px;
    font-weight: 700;
    line-height: 16.36px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    gap: 5px;
}
.mgi_btn > img {
    margin-right: 0px;
    height: 25px;
    width: 15px;
}
.mgi_btn:hover, .mgi_btn:active, .mgi_btn:focus {
    background-color: var(--secondaryColor);
    color: var(--buttonTextColor);
}
.mgi_listItem {
    width: 100%;
    margin-bottom: 15px;
}
.mgi_listItem:last-child {
    margin-bottom: 0px;
}
.mgi_linkMenu {
    display: flex;
    align-items: center;
    justify-content: start;
    line-height: 44px;
    width: 100%;
    padding: 0 15px;
    border-radius: 8px;
    background-color: transparent;
    font-family: Inter;
    font-size: 16px;
    font-weight: 700;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: var(--headerColor);
    transition: all 0.3s;
}
.mgi_activeMenu, .mgi_linkMenu:hover{    
    background-color: #EEEEEF;
}
.mgi_linkMenu span{
    margin-left: 8px;
    color: var(--darkColor);
}
.mgi_sidebarMenu {
    padding: 0px 19px;
}
.mgi_bottomMenu {
    border-top: 1px solid #EAEAEA;
    padding: 20px 30px 0;
}
.mgi_header {
    height: 80px;
    border-bottom: 1px solid #ECECF3;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    justify-content: end;
    padding: 0 35px;
    position: sticky;
    top: 0;
    z-index: 99;
    background: var(--whiteColor);
}
.mgi_justifyBetween{
    justify-content: space-between !important;
}
.mgi_creditsWrap {
    border: 1px solid #F1F1F1;
    background-color: transparent;
    color: var(--textColor);
    font-size: 11px;
    font-weight: 500;
    line-height: 13.31px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    padding: 8px 20px;
    border-radius: 10px;
    max-width: fit-content;
    min-width: fit-content;
}
.mgi_nameCredits {
    color: var(--darkColor);
    margin-bottom: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 19.36px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
}
.mgi_profileMenu .btn.dropdown-toggle {
    display: flex;
    padding: 0;
    margin: 0;
    background-color: transparent;
    border: 0;
    padding: 0px !important;
}
.mgi_profileMenu {
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    gap: 20px;
}
.mgi_arrowDown {
    display: flex;
    align-items: center;
    margin-left: 5px;
}
.mpj_account_delete {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
.mgi_profileMenu .dropdown-toggle::after{
    display: none;
}
.mgi_profileMenu .dropdown-menu {
    box-shadow: 0px 7px 22.3px 0px #0000001C;
    border: 0;
    padding: 23px;
    border-radius: 10px;
    min-width: 300px;
    top: 20px !important;
}
.mgi_profileMenu .btn.dropdown-toggle > img {
    width: 49px;
    height: 49px;
    min-width: 49px;
    object-fit: cover;
    object-position: top;
}
.mgi_profileMenu .dropdown-item span {
    font-size: 14px;
    font-weight: 500;
    line-height: 16.94px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
}
.mgi_profileMenu .dropdown-item {
    padding: 15px 0px;
    background-color: transparent;
    color: var(--darkColor);
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 8px;
}
.mgi_profileDetails img {
    width: 35px;
    height: 35px;
    gap: 5px;
    display: flex;
    object-fit: cover;
    object-position: top;
}
.mgi_profileName {
    font-size: 16px;
    font-weight: 700;
    line-height: 19.36px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    flex-direction: column;
    max-width: calc(100% - 45px);
}
.mgi_profileDetails {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}
.mgi_email {
    font-size: 12px;
    font-weight: 400;
    line-height: 14.52px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #ABABAB;
    display: block;
}
/************* Inner Page Design ************/
.mgi_innerPageContent {
    padding: 25px 30px;
    position: relative;
}
.mgi_welcomeSection {
    background-size: 100% 100%;
    padding: 35px 70px 35px 100px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    flex-wrap: wrap;
}
.mgi_welcome_video {
    border-radius: 17px;
    overflow: hidden;
}
.mgi_welcomeSection h1 {
    font-size: 36px;
    font-weight: 700;
    line-height: 43.57px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
}
.mgi_welcomeSection p {
    font-size: 18px;
    font-weight: 400;
    line-height: 30px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #6F789B;
    max-width: 490px;
}
.mgi_featureSection {
    padding: 70px 5px 30px;
}
.mgi_headingLabel h3 {
    font-size: 19px;
    font-weight: 700;
    line-height: 22.99px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    margin-bottom: 20px;
}
.mgi_toolList {
    max-width: 100%;
    height: 170px;
    gap: 8px;
    border-radius: 11px;
    border: 1px solid transparent;
    display: flex;
    align-items: baseline;
    justify-content: start;
    background-color: #EEEEEF;
    padding: 0 20px 10px;
    font-size: 16px;
    font-weight: 600;
    line-height: 19.36px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: var(--darkColor);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.mgi_toolList span {
    color: var(--whiteColor);
    margin-top: auto;
    font-size: 14px;
    position: relative;
    z-index: 2;
    font-weight: 500;
}
.mgi_toolList span.mgi_overlayToolbar {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 55%;
    transition: all 0.3s;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
    top: 0;
    left: 0;
    right: 0;
    border-radius: 0px 0px 10px 10px;
    z-index: 0;
}
iframe {
    border: 0;
    max-width: 100%;
}
.mgi_welCome_content {
    max-width: calc(100% - 520px);
    padding-right: 20px;
}
/********** Swiper Slicer Css *********/
/* .mgi_swiperSlider_editor,
.mgi_swipSlider_wrapper {
} */
.swiper{
    height: fit-content;
}
.swiper-button-prev1:after, 
.swiper-rtl .swiper-button-next1:after,
.swiper-button-prev2:after, 
.swiper-rtl .swiper-button-next2:after,
.swiper-button-prev3:after, 
.swiper-rtl .swiper-button-next3:after,
.swiper-button-prev:after, 
.swiper-rtl .swiper-button-next:after,
.previewSwiper-button-prev:after,
.swiper-rtl .previewSwiper-button-prev:after{
    content: 'prev';
}
.swiper-button-next1:after, 
.swiper-rtl .swiper-button-prev1:after,
.swiper-button-next2:after, 
.swiper-rtl .swiper-button-prev2:after,
.swiper-button-next3:after, 
.swiper-rtl .swiper-button-prev3:after,
.swiper-button-next:after, 
.swiper-rtl .swiper-button-prev:after,
.previewSwiper-button-next:after,
.swiper-rtl .previewSwiper-button-next:after{
    content: 'next';
}
.swiper-button-next1:after, 
.swiper-button-prev1:after,
.swiper-button-next2:after, 
.swiper-button-prev2:after,
.swiper-button-next3:after, 
.swiper-button-prev3:after,
.swiper-button-next:after, 
.swiper-button-prev:after,
.previewSwiper-button-next:after,
.previewSwiper-button-prev:after {
    font-family: swiper-icons;
    font-size: var(--swiper-navigation-size);
    text-transform: none !important;
    letter-spacing: 0;
    font-variant: initial;
    line-height: 1;
}
.swiper-button-next1, .swiper-button-prev1,
.swiper-button-next2, .swiper-button-prev2,
.swiper-button-next3, .swiper-button-prev3,
.swiper-button-next, .swiper-button-prev,
.previewSwiper-button-next,
.previewSwiper-button-prev {
    position: absolute;
    top: var(--swiper-navigation-top-offset, 50%);
    width: calc(var(--swiper-navigation-size) / 44* 27);
    height: var(--swiper-navigation-size);
    margin-top: calc(0px -(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-slide.swiper-slide-active .mgi_toolList,
.swiper-slide.swiper-slide-active .mgi_imgListItem,
.mgi_bgRemoveSlider .swiper-slide .mgi_toolList.active,
.mgi_bgRemoveSlider .swiper-slide .mgi_imgListItem.active,
.mgi_bgRemoveSlider .mgi_imgListItem.active,
.mgi_bgRemoveSlider .swiper-slide.swiper-slide-active .mgi_toolList.active,
.mgi_bgRemoveSlider .swiper-slide.swiper-slide-active .mgi_imgListItem.active{
    border: 1px solid var(--primaryColor) !important;
    border-radius: 11px;
}
.mgi_bgRemoveSlider .swiper-slide.swiper-slide-active .mgi_toolList,
.mgi_bgRemoveSlider .swiper-slide.swiper-slide-active .mgi_imgListItem{
    border: 0px !important;
}
.mgi_swiperSlider_editor .swiper-slide,
.mgi_swiperSlider_editor .swiper-wrapper{
    width: 100%;
    height: fit-content;
}
.mgi_swipSlider_wrapper .swiper-button-next, 
.mgi_swipSlider_wrapper .swiper-button-prev,
.previewSwiper-button-next, .previewSwiper-button-prev {
    box-shadow: 0px 2px 13px 0px #00000021;
    padding: 10px;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background-color: var(--whiteColor);
    top: calc(35%);
}
.mgi_swiperSlider_editor .swiper-button-next3,
.mgi_swiperSlider_editor .swiper-button-prev3 {
    box-shadow: 0px 2px 13px 0px #00000021;
    padding: 10px;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background-color: var(--whiteColor);
    top: calc(35%);
}
.mgi_swiperSlider_editor .swiper-button-next1,
.mgi_swiperSlider_editor .swiper-button-prev1,
.mgi_swiperSlider_editor .swiper-button-next2,
.mgi_swiperSlider_editor .swiper-button-prev2 {
    box-shadow: 0px 2px 13px 0px #00000021;
    padding: 10px;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background-color: var(--whiteColor);
    top: calc(33%);
}
.mgi_swipSlider_wrapper .swiper-button-next:after, 
.mgi_swipSlider_wrapper .swiper-rtl .swiper-button-prev:after,
.mgi_swipSlider_wrapper .swiper-button-prev:after, 
.mgi_swipSlider_wrapper .swiper-rtl .swiper-button-next:after,
.mgi_swiperSlider_editor .swiper-button-next1:after, 
.mgi_swiperSlider_editor .swiper-rtl .swiper-button-prev1:after,
.mgi_swiperSlider_editor .swiper-button-prev1:after, 
.mgi_swiperSlider_editor .swiper-rtl .swiper-button-next1:after,
.mgi_swiperSlider_editor .swiper-button-next2:after, 
.mgi_swiperSlider_editor .swiper-rtl .swiper-button-prev2:after,
.mgi_swiperSlider_editor .swiper-button-prev2:after, 
.mgi_swiperSlider_editor .swiper-rtl .swiper-button-next2:after,
.mgi_swiperSlider_editor .swiper-button-next3:after, 
.mgi_swiperSlider_editor .swiper-rtl .swiper-button-prev3:after,
.mgi_swiperSlider_editor .swiper-button-prev3:after, 
.mgi_swiperSlider_editor .swiper-rtl .swiper-button-next3:after,
.previewSwiper-button-prev:after,
.swiper-rtl .previewSwiper-button-next:after,
.previewSwiper-button-next:after,
.swiper-rtl .previewSwiper-button-prev:after {
    font-size: 11px;
    font-weight: bolder;
    color: var(--darkColor);
}
.mgi_swiperSlider_editor .form-group {
    position: relative;
}
.mgi_toolList {
    font-size: 16px;
    font-weight: 600;
    line-height: 19.36px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: var(--darkColor);
}
.mgi_sliderWrpa .swiper-button-next{
    z-index: 99;
}
.mgi_sliderWrpa .swiper-button-next:before {
    /* content: ''; */
    background: linear-gradient(91.9deg, #eeeeef -8.27%, var(--whiteColor) 106.88%);
    width: 64px;
    position: absolute;
    right: -35px;
    z-index: -1;
    height: 73px;
    border-radius: 11px !important;
    top: -26px;
    display: block !important;
}
.mgi_swiperSlider_editor {
    position: relative;
}
.mgi_swiperSlider_editor .swiper-button-next1, 
.mgi_swiperSlider_editor .swiper-rtl .swiper-button-prev1,
.mgi_swiperSlider_editor .swiper-button-next2, 
.mgi_swiperSlider_editor .swiper-rtl .swiper-button-prev2,
.mgi_swiperSlider_editor .swiper-button-next3, 
.mgi_swiperSlider_editor .swiper-rtl .swiper-button-prev3{
    right: var(--swiper-navigation-sides-offset, -12px);
}
.previewSwiper-button-prev,
.swiper-rtl .previewSwiper-button-prev {
    left: var(--swiper-navigation-sides-offset, 15px);
}
.previewSwiper-button-next,
.swiper-rtl .previewSwiper-button-next {
    right: var(--swiper-navigation-sides-offset, 15px);
}
.mgi_swiperSlider_editor .swiper-button-prev1, 
.mgi_swiperSlider_editor .swiper-rtl .swiper-button-next1,
.mgi_swiperSlider_editor .swiper-button-prev2, 
.mgi_swiperSlider_editor .swiper-rtl .swiper-button-next2,
.mgi_swiperSlider_editor .swiper-button-prev3, 
.mgi_swiperSlider_editor .swiper-rtl .swiper-button-next3 {
    left: var(--swiper-navigation-sides-offset, -12px);
}
.mgi_swipSlider_wrapper {
    position: relative;
}
.mgi_swipSlider_wrapper .swiper-button-disabled,
.mgi_swiperSlider_editor .swiper-button-disabled{
    opacity: 0 !important;
}
.mgi_recentListItem p {
    font-size: 11px;
    font-weight: 500;
    line-height: 35px;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #222222;
}
/******************* Recent Design Css ********************/
.mgi_recentListItem {
    max-width: 100%;
    height: 100%;
    border: 0.58px solid #f3f3f3;
    border-radius: 12px;
}
.mgi_imgListItem {
    display: flex;
    max-width: 286px;
    gap: 0px;
    border-radius: 11px;
    overflow: hidden;
    width: 100%;
    height: 210px;
    background-size: cover !important;
    background-position: center center;
}
.mgi_sliderWrapper .mgi_imgListItem{
    height: 160px;
}
.mgi_imgListItem img {
    object-fit: cover;
    object-position: top center;
    max-height: 250px;
    margin: 0 auto;
    width: 100%;
}
.mgi_inputGroup input.form-control {
    border-right: 0;
}
.mgi_inputGroup {
    border-radius: 8px;
    margin-bottom: 20px;
    border: 1px solid #DEDEDE;
    background: #fff;
    padding: 0 10px;
    color: #808080;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    line-height: 44px;
    cursor: pointer;
    transition: all 0.3s;
    outline: 1px solid #fff;
}
.mp_group_radio .btn-check:checked + .mgi_inputGroup,
.mgi_inputGroup.active,
.mgi_inputGroup:hover{
    border: 1px solid var(--primaryColor);
    outline: 1px solid var(--primaryColor);
}
.mgi_upscaleSize {
    font-family: var(--poppinsFont);
    font-size: 14px;
    font-weight: 600;
    line-height: 21px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: var(--darkColor);
}
/** 
=========================================
    End Dashboard Flow Design 
=========================================
**/
/**
==========================================
    Login Page Css Start
==========================================
**/ 
.modal-fullscreen-xl {
    padding: 0 !important;
}
.modal-fullscreen-xl .modal-dialog {
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
}
.modal-fullscreen-xl .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
}
.modal-fullscreen-xl .modal-body {
    overflow-y: auto;
} 
.tab-left {
    height: 100vh;
    width: 59.7%;
    background: url(../images/logbg.png) no-repeat center top;
    background-size: cover;
    padding: 0 8%;
    background-color: #040506;
}
.tab-right{
    height: 100vh;
    width: 480px;
    background-color: var(--whiteColor);
    margin: 0 auto;
    padding: 0px 20px;
} 
.tab-title{
    font-weight: 700;
    line-height: 110%;
    color: var(--darkColor);
    font-style: inherit;
    letter-spacing: 0px;
}
.tab-subtitle{
    font-weight: 400;
    line-height: 150%;
    color: var(--darkColor);
    font-style: inherit;
    margin-top: 14px;
}
.tab-subtitle .tablinks{
    padding: 0;
    background-color: transparent;
    border: 0;
    font-weight: 600;
    cursor: pointer;
    color:#2c7dfa;
}
.tab-subtitle .tablinks:focus, .tab-subtitle .tablinks:focus-visible { 
    outline:0;outline: -webkit-focus-ring-color auto 0px;
}
.tab-subtitle .tablinks:hover{
    color:#2c7dfa;
    text-decoration:underline;}
.tab-right form{
    margin-top: 25px;
}
.tab-right form .form-group{
    margin-bottom: 22px;
    width: 100%;
}
.tab-right form .form-group label{
    width: 100%;
    font-weight: 400;
    line-height: 150%;
    color: var(--darkColor);
    font-style: inherit;
    font-size: 14px;
    margin-bottom: 6px;
}
.tab-right form .form-group label .forget{
    float: right;
    font-size: 12px;
}
.tab-right form .form-group label .forget a{
    color:#2c7dfa;
}
.tab-right form .form-group label .forget a:hover{
    color:#2c7dfa;
    text-decoration:underline;
}
.tab-right form .form-group input {
    background-color: var(--whiteColor);
    padding: 13.2px 20px;
    border-radius: 10px;
    border-color: rgb(217, 217, 217);
    color: var(--textColor);;
    font-size: 14px;
}
.tab-right form .form-group input:focus, .tab-right form .form-group input:focus{box-shadow:none;}
.submit-login{
    border-radius: 8px;
    background-color: rgb(0, 0, 0);
    color: var(--whiteColor) !important;
    padding: 14px 5px;
    transition: 0.5s;
    border: 0;
    width: 100%;
    margin-top: 0;
    font-size: 16px;
    font-weight: 700;
}
.submit-login:hover, .submit-login.focus, .submit-login:focus, .submit-login:focus-visible {
    box-shadow: none;
    outline: -webkit-focus-ring-color auto 0px;
    background-color: #404147;
}
.Continue-link{
    display: flex;
    justify-content: space-between;
    margin: 0;
}
.btn-Continue{
    font-weight: 400;
    line-height: 150%;
    color: var(--darkColor);
    font-style: inherit;
    margin-top: 0;
    font-size: 12px;
    border-width: 1px;
    border-color: rgb(217, 217, 217);
    border-style: solid;
    border-radius: 9px;
    background-color: rgb(255, 255, 255);
    padding: 0px 23px;
    width: 48%;
    text-align: center;
    position: relative;
    margin-top: 30px;
    transition:0.5s;    
    line-height: 40px;
}
.btn-Continue:hover {
    box-shadow: 0px 4px 16px #00000026;
}
.tab-subtitle {
    font-size: 15px;
}
.google-btn{}
.facebook-btn{background-color: #2981f2;color: var(--whiteColor);border-color: #2981f2;}
.google-btn:hover{color: var(--darkColor);}
.facebook-btn:hover{color: var(--whiteColor);}
.btn-Continue svg{
    position: relative;
    top: 0px;
    right: 12px;
}
.facebook-btn svg{fill:var(--whiteColor);top: 0px;}
.separation{
    position:relative;
    font-size:10px;
    font-weight: 400;
    line-height: 150%;
    color: #93949a;
    font-style: inherit;
    margin-top: 30px;
    text-align: center;
}
.separation span{
}
.separation span:before{
    content:" ";
    height: 1px;
    width: 46%;
    background: #d9d9d9;
    display: block;
    position: absolute;
    top: 45%;
    left: 0;
}
.separation span:after{
    content:" ";
    height: 1px;
    width: 46%;
    background: #d9d9d9;
    display: block;
    position: absolute;
    top: 45%;
    right: 0;
}
#show_hide_password{
    padding:0;
    position:relative;
}
.pass-eye{
    position:absolute;
    right: 10px;
    top: 15.2px;
    cursor: pointer;
}
.pass-eye .material-symbols-outlined{
    font-size: 20px;
    color: var(--textColor);;
}
.tab-right-inn {
    width: 100%;
}
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 20px;  /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    color: var(--textColor);
  }
/**
==========================================
    Login Page Css End
==========================================
**/  
label.toogle-close {
    display: none;
}
input#toogle-menu {
    opacity: 0;
    position: absolute;
}
/**
==========================================
    Profile Modal Css
==========================================
**/
.tool-img {
    background-color: #aecefc;
    width: 100%;
}
.kt_modal_profile{}
.profile-left{
    width: 20%;
    background-color: var(--whiteColor);
    padding: 20px 23px;
}
.profile-right {
    width: 80%;
    background-color: #f9f9fa;
    padding: 24px 30px;
    max-height: 90vh;
    overflow-y: scroll;
    min-height: 90vh;
}
.cross-btn{
    position: absolute;
    right: 0;
    top: 0;	
    width: 40px;
    height: 40px;
}
.stepper-desc{
    font-size: 16px;
    font-weight: 700;
    margin: 0 0;
    padding: 1rem 0.7rem 1.4rem 0.7rem;
    border-radius: 0;
    color: var(--darkColor);
    border-bottom: 1px solid #f1f1f1;
    margin-bottom: 12px;
}  
.profile-list{
    font-size: 1.15rem;
    font-weight: 500;
    margin: 0 0;
    border-radius: 6px;
    cursor:pointer;
    color: var(--darkColor);
    border: 0 !important;
    width: 100%;
}
.profile-list:hover{
	background-color: #e3e3e3;
	color: var(--darkColor);
} 
.profile-list-model{
    font-size: 14px;
    font-weight: 400;
    padding: 7px 12px;
    border-radius: 5px !important;
    background-color: transparent !important;
    color: var(--darkColor) !important;
    /* margin: 4px 0; */
    width: 100%;
}
.profile-list-model.active{
    background-color: #e3e3e3 !important;
}
.profile-left li.nav-item {
    width: 100%;
    margin-bottom: 0.5rem;
}
.profile-details, .mgi_tableWrapper {
    background-color: var(--whiteColor);
    margin-top: 10px;
    padding: 35px 35px 35px 35px;
    border-radius: 10px;
    margin-bottom: 25px;
}
.profile-details2 {
    background-color: var(--whiteColor);
    margin-top: 10px;
    padding: 12px 26px 25px 26px;
    border-radius: 10px;
    margin-bottom: 25px;
}
.profile-details3 {
    background-color: var(--whiteColor);
    margin-top: 10px;
    padding: 20px 35px 35px 35px;
    border-radius: 10px;
    margin-bottom: 25px;
}
.profile-title {
    padding: 8px 0;
    margin-bottom: 0;
    color: var(--darkColor);
    font-size: 19px;
    font-weight: 700;
    line-height: 22.99px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
}
#show_hide_password{
	padding:0;
	position:relative;
}
.pass-eye {
    position: absolute;
    right: 10px;
    top: 13px;
    cursor: pointer;
}
.pass-eye .material-symbols-outlined{
	 font-size: 20px;
	 color: var(--textColor);;
}
.page-heading {
    padding: 0 6px;
    margin-bottom: 40px;
    font-size: 26px !important;
}
.tool-box {
    width: 24.8%;
    padding: 0 6px;
    margin-top: 0;
    margin-bottom: 17px;
}
.profile-model-image{width: 25%;margin-top: 16px;}
.profile-model-details{width: 71%;}
.profile-details label, .profile-change-password label{
    font-size: 14px;
    font-weight: 400;
    color: var(--darkColor);
    margin-bottom: 8px;
    margin-top: 12px;
}
.profile-details .form-control, 
.profile-change-password .form-control {
    border-width: 1px;
    border-color: rgb(217, 217, 217);
    border-style: solid;
    border-radius: 10px;
    background-color: rgb(255, 255, 255);
    color: var(--darkColor);
    font-size: 15px;
    padding: 1px 19px;
}
.profile-details .form-select.form-select-solid {
    border-width: 1px;
    border-color: rgb(217, 217, 217);
    border-style: solid;
    border-radius: 10px;
    background-color: rgb(255, 255, 255) !important;
    color: var(--darkColor);
    font-size: 15px;
}
.profile-details .select2-selection__placeholder {
  color: var(--darkColor); 
}
.profile_save_btn {
    padding: 10px 63px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--whiteColor);
    background-color: var(--darkColor);
    border-radius: 10px !important;
    margin-top: 22px;
}
.profile_save_btn:hover, .profile_save_btn:active, .profile_save_btn.active {
    background-color: #404147 !important;
    color: var(--whiteColor) !important;
}
.profile_save_btn2 {
    padding: 10px 29px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--whiteColor);
    background-color: var(--darkColor);
    border-radius: 10px !important;
    margin-top: 10px;
}
.profile_save_btn2:hover, .profile_save_btn2:active, .profile_save_btn2.active {
    background-color: #404147 !important;
    color: var(--whiteColor) !important;
}
.profile_save_btn3{
    font-size: 13px;
    font-weight: 400;
    color: #949494;
    background-color: transparent;
    border-radius: 0;
    margin-top: 6px;
    padding: 0 !important;
}
.profile_save_btn3:hover, .profile_save_btn3:active, .profile_save_btn3.active {
    background-color: transparent !important;
    color: #949494 !important;
    border: 1px solid transparent !important;
}
.profile_save_btn3 span{text-decoration:underline; color: #000000;}
.profile_save_btn3:hover span{text-decoration:none;}
.profile_save_btn3 svg{
    fill: var(--darkColor);
    position: relative;
    top: -2px;
    margin-right: 1px;
}
.profile-toogle input {
    width: 36px !important;
    height: 20px !important;
}
.profile-toogle .form-check-input:checked {
    background-color: var(--darkColor);
    border-color: var(--darkColor);
}
.profile-toogle-text{
	font-size:12px;
	font-weight:400;
	color:#767676;
}
.profile-toogle-text span{
	font-size:14px;
	font-weight:700;
	color:var(--darkColor);
}
.profile-plans .card-body{
    padding: 0;
}
.profile-plans-btn{
    padding: 0 !important;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}
.profile-plans-btn span.free-btn {
    margin-right: 0;
}
.profile-plans-btn .upgrade-btn {
    padding: 7px 12px !important;
    font-size: 10px !important;
    margin-top: 0px !important;
    margin-left: 0px !important;
    border: 0;
    font-weight: 500 !important;
    border-radius: 5px !important;
}
.profile-plans-credits{
    /* margin-top: 28px; */
    padding: 0 !important;
}
.plans-credits-title{
	font-size: 14px;
	font-weight:400;
	color:#767676;
	margin-bottom: 4px;
}
.plans-credits{
	font-size: 18px;
	font-weight:700;
	color:var(--darkColor);
}
.profile-plans .separator{
    border-bottom: 1px solid #e3e3e3;
    margin-top: 26px !important;
}
.select2-search--dropdown{display:none;}
.upgrade-left {
    background-color: #f9f9fa;
    padding: 30px 50px !important;
}
.upgrade-left .separator {
    margin: 40px 0 10px 0;
}
.upgrade-right{
    background-color: var(--whiteColor);
    padding: 30px 50px !important;
}
.upgrade-modal .profile-title{padding:0;}
.upgrade-left .profile-title span {
    display: inline-block;
    background-color: #d9e8fe;
    padding: 2px 6px;
    border-radius: 5px;
    font-weight: 600;
    color: var(--whiteColor);
    background-image: linear-gradient(to bottom right, var(--primaryColor), #95c0fc);
    line-height: 18px;
}
.check-icon {
    color: var(--primaryColor);
}
.upgrade-right .table{
    border: 2px solid var(--primaryColor);
    border-radius: 6px;
    border-collapse: inherit;
    margin-top: 2rem;    
	padding-right: 4px;
	cursor:pointer;
}
.upgrade-right .table .check-icon{
	font-size: 3rem;
}
.upgrade-right td {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}
.price-text-list{margin-top: 1.25rem !important;}
.kt_modal_profile .modal-dialog {
    max-width: 1190px;
}
.popover {
    --bs-popover-header-border-color: #F4F4F4;
}
.popover .popover-header {
    font-size: 1rem;
    font-weight: 500;
    border-bottom: 1px solid var(--bs-popover-header-border-color);
}
.popover .popover-dismiss {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    height: 1.25rem;
    width: 1.25rem;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    background-color: var(--bs-gray-500);
    -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='var%28--bs-gray-500%29'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e");
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='var%28--bs-gray-500%29'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e");
    mask-size: 50%;
    -webkit-mask-size: 50%;
}
.popover .popover-dismiss:hover {
    background-color: var(--bs-primary);
}
.popover .popover-dismiss + .popover-header {
    padding-right: 2.5rem;
}
.popover-inverse {
    --bs-popover-bg: var(--bs-gray-900);
    --bs-popover-border-color: var(--bs-gray-900);
    --bs-popover-box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.3);
    --bs-popover-header-color: var(--bs-gray-200);
    --bs-popover-header-bg: var(--bs-gray-900);
    --bs-popover-body-color: var(--bs-gray-400);
    --bs-popover-arrow-border: transparent;
    --bs-popover-header-border-color: var(--bs-gray-800);
}
[data-bs-theme=dark] .popover:not(.popover-inverse) {
    --bs-popover-bg: #2B2B40;
    --bs-popover-border-color: #2B2B40;
    --bs-popover-header-bg: #2B2B40;
    --bs-popover-box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.3);
    --bs-popover-header-border-color: #323248;
}
.tooltip .tooltip-inner {
    box-shadow: var(--bs-tooltip-box-shadow);
}
.tooltip.tooltop-auto-width .tooltip-inner {
    white-space: nowrap;
    max-width: none;
}
.tooltip.tooltip-inverse {
    --bs-tooltip-color: var(--bs-dark-inverse);
    --bs-tooltip-bg: var(--bs-dark);
}
[data-bs-theme=dark] .tooltip:not(.tooltip-inverse) {
    --bs-tooltip-bg: #2B2B40;
    --bs-tooltip-box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.15);
}
.accordion .accordion-header {
    cursor: pointer;
}
.accordion.accordion-icon-toggle .accordion-icon {
    display: flex;
    flex-shrink: 0;
    transition: all 0.2s ease-in-out;
    transform: rotate(90deg);
    align-items: center;
    justify-content: center;
}
.accordion.accordion-icon-toggle .accordion-icon i,
.accordion.accordion-icon-toggle .accordion-icon .svg-icon {
    color: var(--bs-primary);
}
.accordion.accordion-icon-toggle .collapsed .accordion-icon {
    transition: all 0.2s ease-in-out;
    transform: rotate(0);
}
.accordion.accordion-icon-toggle .collapsed .accordion-icon i,
.accordion.accordion-icon-toggle .collapsed .accordion-icon .svg-icon {
    color: var(--bs-text-muted);
}
.accordion.accordion-icon-collapse .accordion-icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease-in-out;
}
.accordion.accordion-icon-collapse .accordion-icon .accordion-icon-on {
    display: inline-flex;
}
.accordion.accordion-icon-collapse .accordion-icon .accordion-icon-off {
    display: none;
}
.accordion.accordion-icon-collapse .accordion-icon i,
.accordion.accordion-icon-collapse .accordion-icon .svg-icon {
    color: var(--bs-primary);
}
.accordion.accordion-icon-collapse .collapsed .accordion-icon {
    transition: all 0.2s ease-in-out;
}
.accordion.accordion-icon-collapse .collapsed .accordion-icon .accordion-icon-on {
    display: none;
}
.accordion.accordion-icon-collapse .collapsed .accordion-icon .accordion-icon-off {
    display: inline-flex;
}
.accordion.accordion-icon-collapse .collapsed .accordion-icon i,
.accordion.accordion-icon-collapse .collapsed .accordion-icon .svg-icon {
    color: var(--bs-text-muted);
}
.accordion.accordion-borderless .accordion-item {
    border: 0;
}
.accordion.accordion-flush .accordion-item {
    background-color: transparent;
    border: 0;
    border-radius: 0;
    padding-left: 0;
    padding-right: 0;
}
.image-input {
    position: relative;
    display: inline-block;
    border-radius: 0.75rem;
    background-repeat: no-repeat;
    background-size: cover;
}
.image-input:not(.image-input-empty) {
    background-image: none !important;
}
.image-input .image-input-wrapper {
    width: 138px;
    height: 138px;
    border-radius: 10px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
    box-shadow: none !important;
    border: 0 !important;
}
.image-input [data-kt-image-input-action] {
    cursor: pointer;
    position: absolute;
    transform: translate(-50%, -50%);
    border-radius: 30px;
    padding: 4px;
}
.image-input [data-kt-image-input-action=change] {
    left: 5%;
    top: 94%;
    margin: 0;
    padding: 4px;
    border-radius: 30px;
}
.image-input [data-kt-image-input-action=change] input {
    width: 0 !important;
    height: 0 !important;
    overflow: hidden;
    opacity: 0;
    display: none;
}
.image-input [data-kt-image-input-action=cancel],
.image-input [data-kt-image-input-action=remove] {
    position: absolute;
    left: 93%;
    top: 94%;
}
.image-input [data-kt-image-input-action=cancel] {
    display: none;
}
.image-input.image-input-changed [data-kt-image-input-action=cancel] {
    display: flex;
}
.image-input.image-input-changed [data-kt-image-input-action=remove] {
    display: none;
}
.image-input.image-input-empty [data-kt-image-input-action=remove],
.image-input.image-input-empty [data-kt-image-input-action=cancel] {
    display: none;
}
.image-input.image-input-circle {
    border-radius: 50%;
}
.image-input.image-input-circle .image-input-wrapper {
    border-radius: 50%;
}
.image-input.image-input-circle [data-kt-image-input-action=change] {
    left: 100%;
    top: 0;
    transform: translate(-100%, 0%);
}
.image-input.image-input-circle [data-kt-image-input-action=cancel],
.image-input.image-input-circle [data-kt-image-input-action=remove] {
    left: 100%;
    top: 100%;
    transform: translate(-100%, -100%);
}
.image-input.image-input-outline .image-input-wrapper {
    border: 3px solid var(--bs-body-bg);
    box-shadow: var(--bs-box-shadow);
}
.form-text {
    margin-top: 18px !important;
    font-size: 11px;
    color: #737373;
    text-align: center;
}
.free-btn {
    display: flex;
    padding: 10px 15px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
    color: var(--darkColor);
    border: 1px solid var(--primaryColor);
    background: #F1F5FF;
    width: calc(33.3% - 15px);
    height: 72px;
    text-align: center;
    margin-top: 15px;
    margin-right: 15px;
    align-items: center;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
}
.free-btn:hover {
    background-color: #fff;
}

.mgi_upgradeOto {
    display: flex;
    flex-direction: column;
    width: calc(33.3% - 15px);
    margin: 15px 0;
    padding: 1px;
    text-align: center;
    border: 0px solid transparent;
    background: linear-gradient(270.09deg, #42B8FE 0.07%, #A344FF 99.91%);
    border-radius: 11px;
}
.mgi_upgradeOto .free-btn {
    margin: 0;
    width: 100%;
    border: 0px;
    height: auto;
    padding: 15px 15px;
    display: flex;
    flex-direction: column;
}
.upgrade-btn {
    background-color: #737cfe;
    color: var(--whiteColor);
    border-radius: 9px !important;
    background-image: -moz-linear-gradient(-180deg, rgb(63, 187, 254) 0%, rgb(165, 65, 255) 100%);
    background-image: -webkit-linear-gradient(-180deg, rgb(63, 187, 254) 0%, rgb(165, 65, 255) 100%);
    background-image: -ms-linear-gradient(-180deg, rgb(63, 187, 254) 0%, rgb(165, 65, 255) 100%);
    transition: 0.5s;
    padding: 12px 14.7px !important;
    font-size: 11px;
    font-weight: 700 !important;
}
.modal-content {    
    background-color: var(--whiteColor);
}
.modal_profile .modal-content {
    border-radius: 15px;
    overflow: hidden;
}
#kt_sign_in_submit {
    background-color: var(--primaryColor);
    color: var(--whiteColor);
    padding: 12px 10px;
    border-radius: 10px;
    font-size: 15px;
}
#kt_sign_in_submit:hover, #kt_sign_in_submit:active{
    background-color: var(--primaryColor);
    box-shadow: none;
    color: var(--whiteColor);	
}
#kt_sign_in_submit:checked + #kt_sign_in_submit, :not(.btn-check) + #kt_sign_in_submit:active, 
#kt_sign_in_submit:first-child:active, #kt_sign_in_submit.active, #kt_sign_in_submit.show{
	background-color: var(--primaryColor);
    box-shadow: none;
    color: var(--whiteColor);	
}
.kt_sign_in_submit_line {
    position: relative;
    margin-top: 10px;
}
.upgrade-right .table.gy-4 th, .upgrade-right .table.gy-4 td {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
.comingsoon{
    width: auto;
    position: absolute;
    right: -4px;
    top: -4px;
}
/***************** Inner Tab Css **************/
.profile-innerTabList {
    border: 1px solid #DEDEDE !important;
    margin-right: 10px;
    font-size: 13px;
    background-color: var(--whiteColor) !important;
    color: var(--darkColor) !important;
    padding: 10px 20px;
    border-radius: 8px !important;
}
.profile-innerTabList.active{
    background-color: #F7F9FF !important;
    border: 1px solid var(--primaryColor) !important;
}
.profile-innerTabList img {
    max-height: 20px;
    height: 20px;
}
.innerTab-body {
    border: 1px solid #E2E2E2;
    border-radius: 12px;
    padding: 20px;
}
.mgi_logoIcon {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #dedede;
    border-radius: 10px;
    padding: 10px;
}
.mgi_connectionContent {
    max-width: calc(100% - 50px);
    padding-left: 15px;
}
.mgi_connectionContent h5 {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: .2rem;
}
.mgi_connectionContent p{
    font-size: 14px;
    font-weight: 400;
    color: var(--textColor);
    margin: 0;
}
.mgi_connectionWrap {
    display: flex;
    align-items: start;
    flex-wrap: wrap;
}
.mgi_socialBtn span>img {
    width: 18px;
    margin-right: 7px;
}
.mgi_socialBtn {
    padding: 10px 20px;
    background-color: #dededede;
    color: var(--darkColor);
    border-radius: 10px;
    display: inline-block;
    margin-top: 30px;
    text-align: center;
}
.mgi_socialBtn:hover{
    background-color: #d7d4d4fa;
}
.mgi_inlineContent {
    font-size: 14px;
    font-weight: 700;
    line-height: 24px;
    color: #2B2B2B;
}
.mgi_solcialIcon .alert {
    padding: 10px 25px;
    margin-top: 30px;
    font-size: 12px;
    color: #F1A525;
    background-color: #FFF8EB;
    border: 1px solid #F2A930;
}
.mgi_alert ul li {
    font-size: 13px;
    color: var(--textColor);
}
.mgi_alert p {
    font-size: 12px;
    color: var(--textColor);
}
.mgi_socialBtn.mgi_blueBtn {
    background-color: var(--primaryColor);
    color: var(--whiteColor);
}
.mgi_blueBtn span>img {
    width: 24px;
}
.mgi_blueBtn .mgi_inlineContent {
    font-weight: 500;
    color: var(--whiteColor);
}
.mgi_socialBtn.mgi_blueBtn:hover {
    background-color: #2954c9;
}
.mgi_innerTabContent> .tab-pane,
#kt_stats_widget_16_tab_4 ul.nav.nav-pills {
    max-width: 100%;
    width: 100%;
}
#kt_stats_widget_16_tab_4 ul.nav.nav-pills > li {
    width: 100%;
    max-width: 20%;
    text-align: center;
}
#kt_stats_widget_16_tab_4 ul.nav.nav-pills > li:last-child > a{
    margin-right: 0px;
}
/**
==========================================
    Designers Page Css Start
==========================================
*/
.mgi_innerPageContent .container {
    max-width: 931px;
}
.mgi_innerPage_title h2{
    font-size: 22px;
    font-weight: 700;
    line-height: 26.63px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: var(--darkColor);
}
.mgi_innerPage_title h3 {
    font-size: 20px;
    font-weight: 700;
    line-height: 24.2px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    margin-bottom: 45px;
}
.mgi_designerBox_list {
    display: flex;
    gap: 45px;
    flex-wrap: wrap;
}
.mgi_designerItems {
    max-width: calc(33.3% - 30px);
    border-radius: 11px;
    position: relative;
    width: 100%;
    text-align: center;
}
.mgi_listBox {
    position: relative;
    overflow: hidden;
    border-radius: 11px;
    cursor: pointer;
}
.mgi_boxContent {
    position: absolute;
    bottom: 0;
    color: var(--whiteColor);
    padding: 20px 20px 20px;
    text-align: left;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
    height: 75%;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: end;
    width: 100%;
}
.mgi_designerItems h4 {
    font-size: 18px;
    font-weight: 700;
    line-height: 21.78px;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    text-transform: uppercase;
}
.mgi_boxOverlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 100%;
    transition: all 0.3s;
    opacity: 0;
    visibility: hidden;
    z-index: 11;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mgi_boxOverlay .mgi_btn {
    width: fit-content;
    padding: 0px 20px;
    font-size: 16px;
    font-weight: 500;
    line-height: 19.36px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    height: 38px;
}
.mgi_boxContent h6 {
    background: #0000008C;
    padding: 4px 10px;
    border-radius: 90px;
    font-size: 15px;
    font-weight: 700;
    line-height: 18.15px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    width: fit-content;
    color: var(--whiteColor);
}
.mgi_boxContent p {
    font-size: 14px;
    font-weight: 300;
    line-height: 16.94px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    margin-bottom: 0;
}
.mgi_listBox:hover .mgi_boxOverlay{
    top: 0;
    opacity: 1;
    visibility: visible;
}
.mgi_listBox .mgi_videoHover{
    width: 100%;
}
.mgi_listBox .mgi_videoHover {
    width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 0;
}
.mgi_listBox img{
    position: relative;
    z-index: 1;
}
.mgi_listBox:hover img {
    opacity: 0;
}
/**
==========================================
    Designers Page Css End
==========================================
*/
.form-check:not(.form-switch) .form-check-input[type=checkbox] {
    background-size: 60% 60%;
}
.form-check.form-check-sm .form-check-input {
    height: 1.55rem;
    width: 1.55rem;
}
.form-check.form-check-lg .form-check-input {
    height: 2.25rem;
    width: 2.25rem;
}
.form-check.form-check-inline {
    display: inline-block;
    margin-right: 1rem;
}
.form-check.form-check-solid .form-check-input {
    border: 0;
}
.form-check.form-check-solid .form-check-input:not(:checked) {
    background-color: var(--bs-gray-200);
}
.form-check.form-check-solid .form-check-input[type=checkbox]:indeterminate {
    background-color: #3E97FF;
}
.form-check.form-check-success .form-check-input:checked {
    background-color: var(--bs-success);
}
.form-check.form-check-danger .form-check-input:checked {
    background-color: var(--bs-danger);
}
.form-check.form-check-warning .form-check-input:checked {
    background-color: var(--bs-warning);
}
.form-check-custom {
    display: flex;
    align-items: center;
    padding-left: 0;
    margin: 0;
}
.form-check-custom .form-check-input {
    margin: 0;
    float: none;
    flex-shrink: 0;
}
.form-check-custom .form-check-label {
    margin-left: 0.55rem;
}
.form-switch.form-check-custom .form-check-input {
    height: 2.25rem;
}
.form-switch.form-check-custom.form-switch-sm .form-check-input {
    height: 1.5rem;
    width: 2.5rem;
}
.form-switch.form-check-custom.form-switch-lg .form-check-input {
    height: 2.75rem;
    width: 3.75rem;
}
.form-switch.form-check-solid .form-check-input {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e");
}
.form-switch.form-check-solid .form-check-input:not(:checked) {
    background-color: #e5e5e5;
}
[data-bs-theme=dark] .form-switch .form-check-input:focus:not(:checked) {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255, 255, 255, 0.25%29'/%3e%3c/svg%3e");
}
.form-check-image {
    position: relative;
    overflow: hidden;
}
.form-check-image img {
    max-width: 100%;
}
.form-check-image .form-check-wrapper {
    border-radius: 0.85rem;
    border: 2px solid transparent;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    overflow: hidden;
    margin-bottom: 0.75rem;
}
.form-check-image .form-check-rounded {
    border-radius: 0.85rem;
}
.form-check-image .form-check-label {
    font-weight: 600;
    margin-left: 0.5rem;
}
.form-check-image.active:not(.form-check-success):not(.form-check-danger) .form-check-wrapper {
    border-color: var(--bs-primary) !important;
}
.form-check-image.form-check-success.active .form-check-wrapper {
    border-color: var(--bs-success) !important;
}
.form-check-image.form-check-danger.active .form-check-wrapper {
    border-color: var(--bs-danger) !important;
}
.form-check-image.disabled {
    opacity: 0.65;
}
.input-group.input-group-solid {
    border-radius: 0.75rem;
}
.input-group.input-group-solid.input-group-sm {
    border-radius: 0.35rem;
}
.input-group.input-group-solid.input-group-lg {
    border-radius: 0.85rem;
}
.input-group.input-group-solid .input-group-text {
    background-color: var(--bs-gray-100);
    border-color: var(--bs-gray-100);
}
.input-group.input-group-solid .input-group-text + .form-control {
    border-left-color: var(--bs-gray-300);
}
.input-group.input-group-solid .form-control {
    background-color: var(--bs-gray-100);
    border-color: var(--bs-gray-100);
}
.input-group.input-group-solid .form-control + .input-group-text {
    border-left-color: var(--bs-gray-300);
}
.form-floating .form-control.form-control-solid::placeholder {
    color: transparent;
}
/**
==========================================
    Editor Page Css Start
==========================================
*/
.mgi_sideBar_menu.mgi_editorSidebar {
    max-width: 400px;
    width: 100%;
}
.mgi_borderNone{
    border: 0px !important;
}
.mgi_imagePlaceholder {
    background: #F0F0F0;
    width: 100%;
    height: 680px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color:#C7C7C7;
    font-size: 20px;
    font-weight: 400;
    line-height: 24.2px;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    max-width: 680px;
    max-height: 680px;
    margin: 0px auto;
    padding: 1px;
}
.mgi_imagePlaceholder.landscape {
    aspect-ratio: 16/9;
    width: 680px;
    height: auto;
}
.mpj_edit_image_preview_new {
    max-height: 100%;
}
.mgi_imagePlaceholder.square {
    aspect-ratio: 1/1;
    width: 680px;
    height: 680px;
}
.mgi_imagePlaceholder.portrait  {
    aspect-ratio: 9/16;
    width: auto;
    height: 680px;
}
.mgi_bgProfile {
    border: 1px solid var(--whiteColor);
    box-shadow: 0px 2px 8.6px 0px #0000003B;
    width: 36px;
    height: 36px;
    display: flex;
    gap: 0px;
    border-radius: 55px;
    background-size: cover;
    margin-right: 5px;
}
.mgi_profileData {
    display: flex;
    align-items: center;
    margin: 10px 0 25px;
    justify-content: start;
    gap: 5px;
}
.mgi_designerDetails {
    display: flex;
    align-items: start;
    flex-direction: column;
    justify-content: start;
    text-align: left;
}
.mgi_designerDetails b {
    width: 100%;
    font-size: 18px;
    font-weight: 700;
    line-height: 21.78px;
    text-align: left;
    text-transform: uppercase;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
}
.mgi_designerDetails span {
    font-size: 11px;
    font-weight: 400;
    line-height: 13.31px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #929292;
}
.mgi_mainLabel {
    font-size: 14px;
    font-weight: 700;
    line-height: 16.94px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    margin-bottom: 10px;
    color: var(--darkColor);
}
input.form-control {
    height: 44px;
}
.form-control {
    border-radius: 8px;
    margin-bottom: 15px;
    border: 1px solid #E4E4E4;
    padding: 10px 15px;
    font-size: 14px;
}
.form-control:placeholder {
    color: #C7C7C7 !important;
    font-size:13px;
    font-weight: 400;
    line-height: 15.73px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
}
.mgi_listLink {
    background: var(--whiteColor);
    font-size: 9px;
    font-weight: 500;
    line-height: 10.89px;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    border: 1px solid #E4E4E4;
    height: 25px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px 5px;
    max-width: calc(100%);
    width: 100%;
    gap: 5px;
    color: var(--darkColor);
}
.mgi_btnList.nav {
    display: flex;
    gap: 10px;
    width: 100%;
    flex-wrap: wrap;
    margin-bottom: 25px !important;
}
.mgi_btnList.nav>li {
    max-width: calc(33.3% - 7px);
    width: 33.3%;
}
.mgi_editorImg_list li p {
    font-size: 12px;
    font-weight: 400;
    line-height: 14.52px;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    margin-top: 5px;
    margin-bottom: 10px;
}
.mgi_editorImg_list {
    list-style: none;
    padding: 0;
    margin-bottom: 15px;
    display: flex;
    align-items: start;
    justify-content: start;
    gap: 10px;
    flex-wrap: wrap;
}
.mgi_editorImg_list li {
    max-width: calc(33.3% - 7px);
    border-radius: 8px;
    width: 100%;
}
.mgi_selectitems {
    overflow: hidden;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mgi_innerBox_radio {
    border: 1px solid #EBEBEB;
    background: var(--whiteColor);
    width: 100%;
    height: 75px;
    gap: 8px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.mgi_innerBox_radio>svg>rect{
    fill: #ffffff;
}
.mgi_innerBox_radio:hover>svg>rect,
.mgi_radioinput:checked ~ span.mgi_innerBox_radio>svg>rect,
.mpj_image_extender_size:hover span.mgi_innerBox_radio>svg>rect,
.mpj_image_extender_size.active span.mgi_innerBox_radio>svg>rect {
    fill: #F3F5F7;
}
.mgi_innerBox_radio p {
    margin: 0;
    color: #A1A1A1;
    font-size: 11px;
    font-weight: 400;
    line-height: 16.5px;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
}
.mgi_radioinput:checked ~ span.mgi_innerBox_radio {
    border: 1px solid var(--primaryColor);
    background-color: #F9F9FA;
}
.mgi_aspectRatioHolder > label {
    position: relative;
    cursor: pointer;
    z-index: 1;
    width: 100%;
    max-width: calc(33.3% - 7px);
}
.mgi_radioinput {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    cursor: pointer;
    z-index: -1;
}
.mgi_aspectRatioHolder {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 10px;
    flex-wrap: wrap;
}
.mgi_editorImg_list .active > .mgi_selectitems {
    border: 1px solid var(--primaryColor);
}
.mgi_selectitems {
    border: 0px;
    display: block;
    border-radius: 8px;
    width: 100%;
    min-width: 100%;
    height: 110px;
    background-size: cover;
    background-position: center;
}
.mgi_commanBtn {
    border: 1px solid #E4E4E4;
    background: var(--whiteColor);
    /* width: 125px; */
    height: 38px;
    gap: 5px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all 0.3s;
    padding: 0px 15px;
}
.mgi_commanBtn>.mgi_proLabel{
    position: absolute;
}
.mgi_commanBtn span {
    font-size: 12px;
    font-weight: 500;
    line-height: 14px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: var(--darkColor);
}
.mgi_commanBtn svg path {
    /* fill: var(--darkColor); */
}
.mgi_toolbarList, .mgi_actionBtn {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    margin-right: auto;
    justify-content: start;
}
.mgi_toolbarList{
    margin: 0px auto;
}
.mgi_top_header_events > a > svg,
.mgi_top_header_events > a > img {
    width: 13px;
    height: 13px;
}
.swiper-slide .mgi_dashboard_events> svg,
.swiper-slide .mgi_dashboard_events> img {
    width: 24px;
    height: 24px;
}
.mgi_toolBar_holder {
    flex-basis: auto;
    display: flex;
    align-items: start;
    gap: 15px;
    padding: 25px;    
    flex-wrap: wrap;
}
.mgi_commanBtn>.mgi_proLabel {
    position: absolute;
    background: linear-gradient(270deg, #3FBBFE 0%, #A541FF 100%);
    width: 36px;
    height: 11px;
    gap: 3px;
    border-radius: 20px;
    font-size: 7px;
    font-weight: 700;
    line-height: 11px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--whiteColor);
    top: -5px;
    right: -3px;
}
.mgi_proLabel> img {
    width: 7px;
    height: 5px;
}
.mgi_actionBtn {
    gap: 10px;
    margin: 0px;
    min-width: 210px;
}
.mgi_actionBtn .mgi_commanBtn {
    width: fit-content;
    padding: 0px 15px;
}
.mgi_downloadBtn{
    background-color: var(--buttonBgColor);
    border: 1px solid var(--buttonBgColor);
    color: var(--buttonTextColor);
}
.mgi_downloadBtn span{
    color: var(--buttonTextColor);
}
.mgi_recentOption_dv .mgi_dotted_dropdown .dropdown-menu {
    /* transform: translate(calc(27px - 100%), 20px) !important; */
}
.mgi_recentListItem .mgi_imgListItem {
    position: relative;
}
.mgi_recentListItem span.mgi_searchListIcon {
    left: 10px;
}
.mgi_searchListIcon{
    cursor: pointer;
}
.mgi_recentOption_dv{
    opacity: 0;
    visibility: hidden;
    position: absolute;
    bottom: 100%;
    width: 100%;
    height: 100%;
    transition: all 0.3s;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
}
.mgi_imgListItem{
    overflow: hidden;
    cursor: pointer;
}
.mgi_imgListItem:hover .mgi_recentOption_dv {
    opacity: 1;
    visibility: visible;
    bottom: 0px;
}

/********** Toolbar Hover Css ***********/
.mgi_deleteBtn:hover, .mgi_deleteBtn.active,
.mgi_move_to_trash:hover, .mgi_move_to_trash.active,
.mgi_commanBtn.mgi_deleteBtn, .mgi_commanBtn.mgi_deleteBtn.active {
    border: 1px solid #F36666;
    color: #F36666;
}
.mgi_deleteBtn:hover>span, .mgi_deleteBtn.active>span,
.mgi_move_to_trash:hover>span, .mgi_move_to_trash.active>span,
.mgi_commanBtn.mgi_deleteBtn>span, .mgi_commanBtn.mgi_deleteBtn.active>span{
    color: #F36666;
}
.mgi_deleteBtn:hover svg>path, .mgi_deleteBtn.active svg>path,
.mgi_move_to_trash:hover svg>path, .mgi_move_to_trash.active svg>path,
.mgi_commanBtn.mgi_deleteBtn svg>path, .mgi_commanBtn.mgi_deleteBtn.active svg>path{
    fill: #F36666;
}
.mgi_downloadBtn:hover, .mgi_downloadBtn.active{
    border: 1px solid var(--primaryColor);
    background-color: var(--secondaryColor);
}
.mgi_removeBg:hover, .mgi_removeBg.active {
    border: 1px solid #F0F3FF;
    background: #F0F3FF;
}
.mgi_removeBg:hover>svg path, .mgi_removeBg.active>svg path{
    fill: var(--primaryColor);
} 
.mgi_magicEraser:hover, .mgi_magicEraser.active {
    border: 1px solid #EBFBF8;
    background: #EBFBF8;
}
.mgi_magicEraser:hover>svg path, .mgi_magicEraser.active>svg path{
    fill: #0FE6BF;
} 
.mgi_generativeFill:hover, .mgi_generativeFill.active {
    border: 1px solid #FCEDFF;
    background: #FCEDFF;
}
.mgi_generativeFill:hover>svg path, .mgi_generativeFill.active>svg path{
    fill: #9A12FF;
}  
.mgi_magicExpand:hover, .mgi_magicExpand.active {
    border: 1px solid #F2EEFF;
    background: #F2EEFF;
}
.mgi_magicExpand:hover>svg path, .mgi_magicExpand.active>svg path{
    fill: #676BFF;
} 
.mgi_bgReplacer:hover , .mgi_bgReplacer.active {
    border: 1px solid #FFEDE5;
    background: #FFEDE5;
}
.mgi_bgReplacer:hover>svg path, .mgi_bgReplacer.active>svg path{
    fill: #FF4E54;
}  
.mgi_magicUpscaler:hover, .mgi_magicUpscaler.active {
    border: 1px solid #EDFCEC;
    background: #EDFCEC;
}
.mgi_magicUpscaler:hover>svg path, .mgi_magicUpscaler.active>svg path{
    fill: #53E490;
} 
.mpj_image_extender_size {
    border: 1px solid #EBEBEB;
    background: var(--whiteColor) !important;
    width: 100%;
    gap: 8px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0px;
}
.mpj_image_extender_size.active,
.mpj_image_extender_size:hover {
    border: 1px solid var(--primaryColor);
}
.mpj_image_extender_size span.mgi_innerBox_radio {
    border: 0px;
}
.mpj_image_extender_size.active span.mgi_innerBox_radio,
.mpj_image_extender_size:hover span.mgi_innerBox_radio {
    background-color: #F9F9FA !important;
}
.mgi_aspectRatioHolder {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 30px;
}
.mgi_aspectRatioHolder > ul {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    gap: 10px;
}
.mgi_aspectRatioHolder > ul > li.nav-item {
    width: 100%;
    max-width: calc(33.3% - 7px);
}
.mgi_undoRedo_option {
    position: relative;
    left: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    /* margin-right: 30px; */
}
.mgi_undoRedo_option .material-symbols-outlined {
    color: var(--darkColor);
    font-size: 22px;
}
.mgi_undoRedo_option a {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.mgi_borderBar {
    font-style: normal;
    font-size: 31px;
    color: #ededed;
    font-weight: 100;
}
.mgi_undoRedo_option > button, .mgi_undoRedo_option > a {
    border: 0px;
    background-color: transparent;
    padding: 0;
}
/**
==========================================
    Editor Page Css End
==========================================
*/
/** 
==========================================
    Custom Css
==========================================
.hide{
	display: none !important;
}
/* ----------------------------- Component start -------------------------- */
/* loader start */
.mp_loader_wrapper{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999999;
	/* background: linear-gradient(45deg, rgb(8 20 42 / 94%), rgb(4 39 44 / 89%)); */
	background-color: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(4px);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s;
}
.mp_loader_wrapper.show{
	opacity: 1;
	visibility: visible;
}
.mp_loader_inner{
	display: flex;
	align-items: center;
	flex-direction: column;
}
.mp_loader_icon{
	display: flex;
	align-items: center;
	gap: 6px;
	height: 50px;
}
.mp_loader_icon > span{
	width: 6px;
	border-radius: 15px;
	background-color: var(--whiteColor);
	display: block;
	animation: h40Anim 0.6s ease-in-out infinite;
	animation-direction: alternate;
}
.mp_loader_icon > span:nth-child(1),
.mp_loader_icon > span:nth-child(5){
	animation-delay: 0.2s;
}
.mp_loader_icon > span:nth-child(2),
.mp_loader_icon > span:nth-child(4){
	animation-delay: 0.4s;
}
.mp_loader_icon > span:nth-child(3){
	animation-delay: 0.1s;
}
.mp_loader_icon > span:nth-child(1){background-color: #46B1FE;}
.mp_loader_icon > span:nth-child(2){background-color: #5F93FE;}
.mp_loader_icon > span:nth-child(3){background-color: #757AFF;}
.mp_loader_icon > span:nth-child(4){background-color: #8962FF;}
.mp_loader_icon > span:nth-child(5){background-color: #A145FF;}
@keyframes h40Anim {
	0%{height: 6px;}
	100%{height: 40px;}
}
.mp_loader_inner > p{
	margin-top: 16px;
    color: #071b2a;
    font-weight: 500;
    font-size: 13px;
	display: none;
}
.mp_loader_wrapper.withText .mp_loader_inner > p{
	display: block;
}
/* loader end */
/* alert start */
.mp_alert_wrapper{
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 9999999;
	transition: all 0.2s cubic-bezier(0.20, 0.04, 0.27, 1.2);
	opacity: 0;
	visibility: hidden;
	transform: translateX(100%);
}
.mp_alert_wrapper.show{
	opacity: 1;
	visibility: visible;
	transform: translateX(0%);
}
.mp_alert_wrapper > .mp_alert_inner{
	padding: 16px 30px 16px 20px;
	border-radius: 6px;
	background-color: var(--whiteColor);
	box-shadow: 2px 3px 6px rgb(0 0 0 / 6%), 1px 2px 8px rgb(0 0 0 / 16%);
	display: flex;
	align-items: center;
	gap: 12px;
    position: relative;
    max-width: 340px;
}
.mp_alert_wrapper > .mp_alert_inner::before{
	content: "";
	width: 24px;
	height: 24px;
	background-color: #333333;
	border-radius: 50px;
	color: var(--whiteColor);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	flex: none;
	font-family: monospace;
}
.mp_alert_wrapper > .mp_alert_inner::after{
	content: "";
	position: absolute;
	left: 0;
	top: 10px;
	bottom: 10px;
	width: 6px;
	background-color: #333333;
	border-radius: 0 6px 6px 0;
}
.mp_alert_wrapper.success > .mp_alert_inner::before{content: "✔";}
.mp_alert_wrapper.success > .mp_alert_inner::before,
.mp_alert_wrapper.success > .mp_alert_inner::after{
	background-color: #49cd52;
}
.mp_alert_wrapper.error > .mp_alert_inner::before{content: "!";}
.mp_alert_wrapper.error > .mp_alert_inner::before,
.mp_alert_wrapper.error > .mp_alert_inner::after{
	background-color: #ff5447;
}
.mp_alert_wrapper.info > .mp_alert_inner::before{content: "i";}
.mp_alert_wrapper.info > .mp_alert_inner::before,
.mp_alert_wrapper.info > .mp_alert_inner::after{
	background-color: #f9c118;
}
/* alert end */
.app-header{
	z-index: 999;
}
/* A.I. editor popup start */
.mp_aieditor_popup_wrapper{
	position: fixed;
	top: 80px;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: var(--whiteColor);
	z-index: 110;
}
.mp_aieditor_popup_inner{
	width: 100%;
	height: 100vh;
	display: grid;
	grid-template-columns: 396px 1fr;
}
.mp_aieditor_popup_inner > .mp_aieditor_popup_sidebar{
	background-color: #f9f9fa;
}
/* A.I. editor popup end */
/* bootstrap group radio start */
.mp_group_radio {
    display: inline-flex;
    align-items: center;
    box-shadow: none;
    border-radius: 0;
    width: 100%;
}
.mp_group_radio .btn{
	margin: 0;
	font-weight: 700;
}
.mp_group_radio .btn:active{
	background-color: #161616 !important;
}
.mp_group_radio .btn-check:checked + .btn{
	color: var(--whiteColor);
    background-color: #161616;
}
/* bootstrap group radio end */
/* Range Slider Light start */
.sp_slider {
    -webkit-appearance: none;
    /* Override default CSS styles */
    appearance: none;
    width: 100%;
    /* Full-width */
    height: 5px;
    /* Specified height */
    background: #555e8d;
    /* Grey background */
    outline: none;
    /* Remove outline */
    -webkit-transition: .2s;
    /* 0.2 seconds transition on hover */
    transition: opacity .2s;
	border-radius: 50px;
}
/* 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: var(--whiteColor);
    /* Green background */
    cursor: pointer;
    /* Cursor on hover */
    border-radius: 50px;
    border: 2px solid var(--primaryColor);
}
.sp_slider::-moz-range-thumb {
    width: 16px;
    /* Set a specific slider handle width */
    height: 16px;
    /* Slider handle height */
    background: var(--whiteColor);
    /* Green background */
    cursor: pointer;
    /* Cursor on hover */
    border-radius: 50px;
    border: 2px solid var(--primaryColor);
}
.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(--primaryColor);
}
.ed_range_slider_light .sp_slider{
    background: #dde2e6;
}
.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(--primaryColor), 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(--primaryColor), 0.4);
}
/* Range Slider Light end */
/* datatable start */
.mp_table_wrapper .dataTables_wrapper .dataTables_length select{
    height: 34px;
    width: 60px;
    display: inline-block;
    padding: 4px 8px;
}
.mp_table_wrapper div.dataTables_wrapper div.dataTables_filter > label{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}
.mp_table_wrapper .page-item{
    margin: 0;
}
.mp_table_wrapper .page-item.active .page-link{
    background-color: #2e2e2e;
    border-color: #2e2e2e;
    color: var(--whiteColor);
}
.mp_table_wrapper .page-item:hover:not(.active):not(.offset):not(.disabled) .page-link,
.mp_table_wrapper .page-link:focus,
.mp_table_wrapper .page-link:hover{
    color: #2e2e2e;
}
.mp_table_wrapper div.dataTables_wrapper div.dataTables_info,
.mp_table_wrapper div.dataTables_wrapper div.dataTables_paginate{
    margin-top: 30px;
    line-height: 34px;
}
.mp_table_wrapper .dataTables_wrapper .dataTables_paginate .paginate_button{
    padding: 0;
    background: transparent;
    border-color: transparent;
}
.mp_table_wrapper .dataTables_wrapper .dataTables_paginate .paginate_button:active,
.mp_table_wrapper .dataTables_wrapper .dataTables_paginate .paginate_button:focus{
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}
.mp_table_wrapper div.dataTables_wrapper div.dataTables_filter,
.mp_table_wrapper div.dataTables_wrapper div.dataTables_length{
    padding: 0;
}
.mp_table_wrapper div.dataTables_wrapper div.dataTables_length > label{
    margin: 0;
}
/* datatable end */
/* date picker start */
.daterangepicker{
    border-radius: 10px;
}
.daterangepicker .ranges li:hover{
    color: #2e2e2e;
}
.daterangepicker .ranges li.active{
    background-color: #2e2e2e;
    color: var(--whiteColor);
}
.daterangepicker.show-calendar .ranges{
    margin-top: 0;
}
.daterangepicker .drp-calendar th.available:hover, 
.daterangepicker .drp-calendar td.available:hover{
    border-radius: 0.45rem;
    color: #2e2e2e;
}
.daterangepicker .drp-calendar td.active{
    border-radius: 0.45rem;
}
.daterangepicker .drp-calendar td.active{
    background-color: #2e2e2e !important;
}
.daterangepicker .drp-calendar td.active.end-date{
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.daterangepicker .drp-calendar td.active.start-date {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.daterangepicker .drp-calendar td.in-range.available:not(.active):not(.off):not(.today){
    color: #2e2e2e;
}
.daterangepicker .drp-calendar td.today, 
.daterangepicker .drp-calendar td.today.active{
    color: #2e2e2e !important;
    font-weight: 600;
    border-radius: 0.45rem;
    background-color: rgb(0 0 0 / 8%) !important;
}
.daterangepicker .drp-calendar td.today.in-range{
    border-radius: 0;
    background-color: var(--bs-component-hover-bg) !important;
}
.daterangepicker .btn.btn-primary{
    background-color: #2e2e2e;
}
.daterangepicker .btn.btn-primary:hover{
    background-color: #4b4b4b !important;
}
/* date picker end */
/* ----------------------------- Component end -------------------------- */
.cross-btn{
	border: none;	
	background-color: transparent;
}
#imageModalContainer #crop-image-container{
	object-fit: contain;
}
#imageModalContainer .modal-content .app-wrapper .app-main{
	height: calc(100vh - 120px);
    overflow: auto;
}
.brush-color-tab .nav-item{
	position: relative;
}
.custom_color_picker > input{
	opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 32px;
    height: 32px;
    vertical-align: middle;
    border-radius: 50px;
    cursor: pointer;
}
.brush-color-tab .nav-item.custom_color_picker > img{
	display: none !important;
}
.mp_canvas_preview {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    transform-origin: top;
    background: url('../images/bg.png') no-repeat center top;
    background-size: cover;
}
.mp_canvas_preview .canvas-container {
    width: 100% !important;
    height: auto !important;
    background: #F9F9FA !important;
    padding: 0;
    border: 1px solid #E7E7E7;
    margin: auto !important;
    text-align: center;
    transform-origin: top !important;
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
}
.mp_canvas_preview .canvas-container > .lower-canvas {
    width: 100% !important;
    height: auto !important;
}
.mp_canvas_preview .canvas-container > .upper-canvas {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    vertical-align: middle;
}
.mp_canvas_preview > #mpj_remove_object_brush {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none !important;
}
.mp_square_grid_preview{
	display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}
.mp_square_grid_preview .artgenerator-box{
	width: 100%;
}
.sp_eip_image_preview{
	display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
}
.kt_Expand_section .croppie-container,
.kt_Expand_section div#crop__modal-body,
.kt_Expand_section .sp_eip_image_preview {
    height: 100%;
}
.kt_Expand_section .sp_eip_image_preview .sp_eip_image_expand_preview img {
    /*max-height: calc(100vh - 300px);*/
}
.kt_Expand_section .modal-body {
    padding: 0 !important;
}
.sp_eip_image_expand_preview{
    position: relative;
    max-width: 96%;
    max-height: 96%;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
	/*max-height: calc(100vh - 120px);*/
}
.sp_eip_image_preview .sp_eip_image_expand_preview img{
    border-radius: 0;
    max-width: 100%;
    max-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: 2px solid var(--darkColor);
}
.background-generator-editor .croppie-container{
    background: url('../images/bg.webp') no-repeat center top;
}
#crop__modal-body {
    /* background: url('../images/bg.webp') no-repeat center top; */
    background-position: center;
    background-size: cover;
}
nav.navbar.main-navbar .nav-link{
    border-radius: 10px;
    padding: 16px 24px !important;
}
nav.navbar.main-navbar .nav-link.active{
    background-color: rgba(0, 0, 0, 0.1);
}
nav.navbar.main-navbar .nav-link:hover{
    background-color: rgba(0, 0, 0, 0.04);
}
.designpreview-img,
.design-box-inn{
    background-image: url(data:image/gif;base64,R0lGODlhCgAKAIAAAOLi4v///yH5BAAHAP8ALAAAAAAKAAoAAAIRhB2ZhxoM3GMSykqd1VltzxQAOw==);
}
#user_list_id.dataTable > tbody > tr > td:last-child .form-switch{
    padding-left: 50px !important;
}
#user_list_id.dataTable > tbody > tr > td:last-child .form-switch .form-check-input{
    cursor: pointer;
}
.navbar .navbar-collapse .app-navbar-item .menu-sub-dropdown .menu-item a{
    word-break: break-word;
}
/********* Social Select option Css ***********/
.mgi_optionImg> img {
    width: 15px;
    height: 15px;
}
.mgi_optionImg {
    font-size: 12px;
    font-weight: 500;
    line-height: 14.52px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    display: flex;
    align-items: center;
    gap: 5px;
    line-height: 42px;
    padding: 0px 10px;
    background-color: var(--whiteColor);
    color: var(--darkColor);
}
.select2-container{
    max-width: 100%;
}
span.select2-selection.select2-selection--single {
    border-radius: 8px;
    margin-bottom: 0px;
    border: 1px solid #E4E4E4;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--whiteColor);
}
.select2-container--default .select2-results>.select2-results__options{
    max-height: 310px !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #444;
    line-height: 28px;
    width: 100%;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 44px;
    width: 40px;
}
.select2-results__option{
    padding: 0px;
}
.select2-results__options .select2-results__option:hover .mgi_optionImg {
    background-color: #ededed !important;
}
.select2-results__option[aria-selected] span.mgi_optionImg {
    padding: 0px 20px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    top: 43%;
    border-bottom: 1px solid var(--darkColor);
    border-left: 1px solid var(--darkColor);
    transform: rotate(-45deg);
    border-top: 0px;
    border-right: 0px;
    width: 7px;
    height: 7px;
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    top: 50%;
    border-bottom: 1px solid var(--darkColor);
    border-left: 1px solid var(--darkColor);
    transform: rotate(135deg);
    border-top: 0px;
    border-right: 0px;
    width: 7px;
    height: 7px;
}
span.select2-dropdown.select2-dropdown--below {
    border: 1px solid #D9D9D9;
    border-radius: 0px 0px 8px 8px;
    padding-bottom: 10px;
}
/****************** Editor Radio btn ****************/
.mgi_radioBtn span {
    border: 1px solid #A1A1A1;
    height: 19px;
    width: 19px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    position: relative;
}
.mgi_radioBtn label {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 8px;
    color: var(--darkColor);
    font-family: var(--poppinsFont);
    font-size: 13px;
    font-weight: 500;
    line-height: 24px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    position: relative;
    cursor: pointer;
}
.mgi_radioBtn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.mgi_radioBtn span:before {
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;
    background-color: transparent;
    border-radius: 20px;
}
.mgi_radioinput:checked ~ span:before {
    background-color: var(--primaryColor);
}
/**
==========================================
    Custom Css End
==========================================
**/
/*editor-modal*/
.modal-open .modal{
    padding: 0 15px !important;
}
.crop__modal {
    max-width: 100vw;
    min-height: auto;
    margin: 0;
    height: 100%;
}
.crop__modal-content {
    height: 100%;
    border-radius: 0 !important;
    background: #ffffff;
    border: 0 !important;
    box-shadow: none;
}
.crop__modal-content .modal-header h5 { 
    margin-left: 10px;
}
.crop__modal-content .modal-header {
    border-bottom: none;
    color: #949191;
    align-items: center;
    padding: 0;
    background-color: white;
}
.crop__modal-content .modal-header .close {
    margin: -1rem !important;
}
.crop__modal-content .modal-header .modal-title {
    flex-grow: 1;
}
.crop__modal-content .modal-footer {
    margin-top: 40px;
    justify-content: center;
}
.crop__action {
    background: linear-gradient(0.45turn, #D4D2D2, #EEECED);
    box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.35), -3px -3px 8px rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    padding: 16px;
    color: #949191;
}
.crop__action:focus {
    outline: 0;
    box-shadow: 0 0 2px 3px #f7c4c9;
}
.crop__action:hover {
    color: #ED8C82;
}
.crop__action:first-child {
    margin-right: 20px;
}
.container-form {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    padding-bottom: 0;
    margin-bottom: 16px;
}
.modal-body > .croppie-container {
    max-height: 100%;
    /* background: url('../images/bg.png') no-repeat center top; */
    /* background: #F9F9FA; */
    /* background-size: cover; */
    width: 100%;
    margin: auto;
    text-align: center;
    /* border: 1px solid #E7E7E7; */
}
.kt_bg_remove_section .modal-body > .croppie-container,
.kt_Expand_section .modal-body > .croppie-container{
    background: url('../images/bg.png') no-repeat center top;
    background-size: cover;
}
.croppie-container.mpj_object_replacer_preview_wrapper {
    /* background: #F9F9FA !important; */
    /* border: 1px solid #E7E7E7; */
    position: sticky;
    bottom: 0;
    z-index: 1;
}
.art-generator-tab-row.mp_square_grid_preview.mpj_square_grid_preview {
    display: flex !important;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center !important;
    gap: 5px;
}

.mp_square_grid_preview .artgenerator-box {
    width: auto !important;
    padding: 15px 3px;
}

.object-remover-editor .croppie-container,
.object-replacer-editor .croppie-container,
.photo-editor .croppie-container,
.background-generator-editor .croppie-container{ 
    background-image:none; 
}
.photo-editor .croppie-container, .object-remover-editor .croppie-container, .object-replacer-editor .croppie-container, .background-generator-editor .croppie-container {
	width: fit-content;
	position:relative;
	border-radius: 10px;
}
.photo-editor .editor-link, .object-remover-editor .editor-link, .object-replacer-editor .editor-link, .background-generator-editor .editor-link,
.artgenerator-box-inn .editor-link {
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 1;
    border-radius: 6px;
    background-color: rgb(0 0 0 / 32%);
    font-size: 13px;
    color: var(--whiteColor);
}
.photo-editor .editor-link svg, .object-remover-editor .editor-link svg , .object-replacer-editor .editor-link svg, .background-generator-editor .editor-link svg,
.artgenerator-box-inn .editor-link svg{
    width: 17px;
    z-index: 1;
    right: 0;
    fill: var(--whiteColor);
}
.photo-editor .editor-link:hover, .object-remover-editor .editor-link:hover, .object-replacer-editor .editor-link:hover, .background-generator-editor .editor-link:hover,
.artgenerator-box-inn .editor-link:hover{background-color: rgb(0 0 0 / 70%);}
a.editor-link {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  padding: 7.5px 7.5px;
  transition: 0.2s;
  position: absolute;
  top: 0;
  z-index: 1111;
}
a.editor-link svg {
}
a.editor-link .label-hidden {
  max-width: 0;
  opacity: 0;
  white-space: nowrap;
  transition: 0.2s;
     line-height: 16px; 
     font-size: 11px;
}
a.editor-link:hover .label-hidden {
  max-width: 200px;
  margin-left: 8px;
  opacity: 1;
}
.object-remover-editor .croppie-container img, .object-replacer-editor .croppie-container img, .background-generator-editor .croppie-container img {
    height: auto !important;
}
#crop-image-container {
    min-width: 100%;
    max-width: 100%;
    height: auto !important;
    border-radius: 10px;
    max-height: 680px;
}
.photo-editor .croppie-container img {
    height: auto !important;
}
.modal-body {
    /* max-height: calc(100% - 120px) !important; */
}
.cr-boundary, .cr-slider-wrap{display:none !important;}
.modal-header .dropdown .dropdown-menu {
}
.modal-header .dropdown:hover .dropdown-menu {
}
.app-main{background-color:var(--whiteColor);}
.crop__modal .close {
    text-align: left;
    color: var(--darkColor);
    font-size: 14px;
    text-align: left;
    font-weight: 600;
    opacity: 1;
}
.crop__modal .close img {
    position: relative;
    top: -1px;
    margin-right: 3px;
}
.crop__modal .close .material-symbols-outlined {
    position: relative;
    top: 0px;
    left: -5px;
    width: 18px;
    cursor: pointer;
}
.side-list {
    display: flex;
    align-items: center;
    color: var(--darkColor);
    font-size: 16px;
    text-align: left;
    margin-top: 60px;
    margin-bottom: 50px;
    font-weight: 600;
}
.side-list:hover{color: var(--darkColor);}
.side-list .menu-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.5rem;
    border-style: solid;
    border-width: 3px;
    border-color: rgb(236, 239, 241);
    border-radius: 50%;
    background-color: rgb(255, 255, 255);
    width: 54px;
    height: 54px;
}
.side-list .menu-icon svg {
    width: 19px;
    position: relative;
    right: -1px;
    top: -2px;
}
.editor-price#kt_modal_create_app, #kt_modal_profile{background-color: #0000005c;} 
.mgi_profileMenu .btn.dropdown-toggle:focus:not(.btn-active), 
.mgi_profileMenu .btn.dropdown-toggle:hover:not(.btn-active), 
.mgi_profileMenu .btn.dropdown-toggle:active:not(.btn-active), 
.mgi_profileMenu .btn.dropdown-toggle.active, 
.mgi_profileMenu .btn.dropdown-toggle.show, 
.show > .mgi_profileMenu .btn.dropdown-toggle {
    color: inherit;
    border-color: transparent;
    background-color: transparent !important;
  }
#imageModalContainer {
    padding: 0 !important;
    background-color: #f9f9fa;
}
.modal {
    overflow-x: hidden !important;
    overflow-y: auto !important;
}
body:has(.modal.show) {
overflow: hidden !important;
}
.download-btn, .remove-btn {
    font-size: 14px;
    font-weight: 700;
    color: var(--whiteColor);
    background-color: var(--darkColor);
    display: inline-block;
    border-radius: 10px;
    padding: 12px 10px;
    text-align: center;
    margin-top: 0px;
}
.download-btn:hover, .remove-btn:hover {
    background-color: #1d1d1d;
    color: var(--whiteColor);
}
.download-hd-btn {
    font-size: 14px;
    font-weight: 700;
    color: var(--darkColor);
    background-color: var(--whiteColor);
    display: inline-block;
    border-radius: 10px;
    padding: 12px 10px;
    text-align: center;
    position: relative;
    justify-content: center;
    align-items: center;
    background: linear-gradient(var(--whiteColor), var(--whiteColor)) padding-box, linear-gradient(to right, #a541ff, #3fbbfe) border-box;
    border: 1px solid transparent;
    margin-top: 12px;
}
.download-hd-btn:hover { 
    color: var(--whiteColor);
    background: linear-gradient(#ffffff00, #ffffff00) padding-box, linear-gradient(to right, #a541ff, #3fbbfe) border-box;
}
.download-btn2 {
    font-size: 16px;
    font-weight: 700;
    color: var(--whiteColor);
    background-color: var(--darkColor);
    display: inline-block;
    border-radius: 10px;
    padding: 11px 60px;
    text-align: center;
    margin-top: 0px;
    border: 1px solid var(--darkColor);
}
.download-btn2:hover {
    border: 1px solid #1d1d1d;
    background-color: #1d1d1d;
    color: var(--whiteColor);
}
.download-hd-btn2 {
    font-size: 16px;
    font-weight: 700;
    color: var(--darkColor);
    background-color: var(--whiteColor);
    display: inline-block;
    border-radius: 10px;
    padding: 11px 45.3px;
    text-align: center;
    position: relative;
    justify-content: center;
    align-items: center;
    background: linear-gradient(var(--whiteColor), var(--whiteColor)) padding-box, linear-gradient(to right, #a541ff, #3fbbfe) border-box;
    border: 1px solid transparent;
    margin-top: 0;
}
.download-hd-btn2:hover { 
    color: var(--whiteColor);
    background: linear-gradient(#ffffff00, #ffffff00) padding-box, linear-gradient(to right, #a541ff, #3fbbfe) border-box;
}
.artgenerator-box .download-btn-box ul{
    justify-content: center;
    width: 100%;
    padding: 0;
    list-style: none;
    margin-bottom: 0;
}
.artgenerator-box .download-btn-box ul li{
    width: 85.5%;
}
.artgenerator-box .download-btn2{
    font-size: 14px;
    padding: 11px 5px;
    width: 100%;
}
.artgenerator-box .download-hd-btn2{
    font-size: 14px;
    padding: 11px 5px;
    width: 100%;
}
.brush-erase-tab {
    margin-top: 30px;
}
.brush-erase-tab .nav-item{width:50%;}
.brush-erase-tab .nav-item a{
    font-size: 14px;
    font-weight: 700;
    color: #4d4e54;
    background-color: var(--whiteColor);
    display: inline-block;
    border-width: 1px;
    border-color: rgb(221, 226, 230);
    border-style: solid;
    border-radius: 10px;
    padding: 11px 6px;
    text-align: center;
    width: 97%;
}
.brush-erase-tab .nav-item a.active{
	background-color: var(--darkColor);border-color: var(--darkColor);color: var(--whiteColor);
}
.brush-erase-tab.nav-pills .nav-item:last-child { 
    text-align: right;
}
#imageModalContainer .app-sidebar .menu {
    padding: 6px 36px 0 36px;
}
.size-chart {
    text-align: center;
    color: #8d99ae;
    margin: 6px;
    font-size: 15px;
}
.tooltip-img{}
.crownicon2 {
    position: relative;
    margin-left: 5px;
}
.infoIcon {
}
.infoIcon {
  position: relative;
}
.infoIcon:hover .extraInfo {
  visibility: visible;
}
.infoIcon img {
  width: 15px;
}
.extraInfo {
    top: 108%;
    left: -59px;
    position: absolute;
    color: var(--whiteColor);
    background-color: #2a2a2a;
    border-radius: 5px;
    padding: 6px 5px;
    width: 135px;
    text-align: center;
    visibility: hidden;
    /* display: none; */
    z-index: 1;
    font-size: 10px;
}
.extraInfo:before {
    content: '';
    border-bottom: 5px solid #2a2a2a;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    bottom: 100%;
    position: absolute;
    left: 45%;
}
.infoIcon:hover .extraInfo {
  visibility: visible;
}
.remove-icon {
    position: relative;
    left: -2px;
    top: -1px;
}
.app-header {
    border-bottom: 0px;
    padding: 0px !important;
}
.app-header .app-header-logo {
    width: 100%;
    padding: 0px 35px;
    max-width: 396px;
}
.kt_all_sections {
    flex-shrink: 0 !important;
    flex-direction: column !important;
    height: auto;
    display: flex;
    margin-bottom: auto;
}
.mgi_buttonAction_setting.events_apply_button_div {
    margin-top: auto;
    position: relative;
    padding: 10px 30px;
}
.mgi_settingObjects {
    margin-bottom: auto !important;
    width:100%;
}
.brush-slider-div{margin: 5px 0 !important; }
.mpj_clear_remove_object_drawing {
    margin-top: 24px;
    margin-bottom: 25px;
}
.brush-color-div{margin: 2px 0;}
.art-generator-div {
    margin: 28px 0 10px 0;
    display: flex;
    justify-content: space-between;
}
.art-generator-div2 {
    margin: 2px 0 10px 0;
    display: flex;
    justify-content: space-between;
}
.art-generator-div3 {
    margin: 2px 0 10px 0;
    display: flex;
    justify-content: space-between;
    margin-bottom: 50px;
}
#slider {
    width: 100%;
    margin: 0;
    background-color: #dde2e6;
    height: 5px;
    cursor: pointer;
}
#slider-value {
	font-size: 14px;
	font-weight: bold;
	color: var(--darkColor);
}
.brush-slider-div .noUi-target .noUi-connect {
    background: var(--darkColor);
}
.brush-slider-div .noUi-target.noUi-horizontal .noUi-handle {
    width: 16px;
    height: 16px;
    top: -6.5px;
    border: 4px solid var(--darkColor);
    box-shadow: none;
    outline: 0;
    right: -3px;
}
#kt_app_header .kt_app_header-div{}
.brush-slider-title{
    font-size: 14px;
    font-weight: 700;
    color: var(--darkColor);
    margin-bottom: 10px;
    width: 100%;
}
.brush-color-title{
    font-size: 14px;
    font-weight: 700;
    color: var(--darkColor);
    margin-bottom: 5px;
}
.photo-editor-title{
    font-size: 14px;
    font-weight: 700;
    color: var(--darkColor);
    margin-bottom: 10px;
    margin-top: 28px;
}
.object-replacer-title{
    font-size: 14px;
    font-weight: 700;
    color: var(--darkColor);
    margin-bottom: 10px;
    margin-top: 4px;
}
.background-generator-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--darkColor);
    margin-bottom: 10px;
    margin-top: 25px;
}
.background-generator-title2 {
    font-size: 14px;
    font-weight: 700;
    color: var(--darkColor);
    margin-bottom: 10px;
    margin-top: 25px;
}
.background-generator-title2 span{font-weight: 400;}
.art-generator-title{
    font-size: 14px;
    font-weight: 700;
    color: var(--darkColor); 
}
.art-generator-inspire-text {
    font-size: 13px;
    font-weight: 400;
    color: #4d4e54;
    cursor: pointer;
}
.brush-color-tab {
    -webkit-box-pack: justify!important;
    -ms-flex-pack: justify!important;
    justify-content: space-between!important;
    margin-bottom: 25px;
}
.brush-color-tab .nav-item {
    width: 36px;
    height: 36px;
    border-radius: 5px;
    margin: 5px 0px;
}
.brush-color-tab .nav-item .nav-link{
    height: 100%;
    border-radius: 5px;
    border: 1px solid var(--whiteColor);
}
.brush-color-tab .nav-item:first-child{margin-left:0;}
.brush-color-tab .nav-item:last-child{margin-right:0;}
.brush-color-tab .nav-item.active {
    border: 1px solid var(--primaryColor);
    padding: 1px;
}
.brush-color-tab .nav-item:nth-child(1) .nav-link{background-color:#f95350;}
.brush-color-tab .nav-item:nth-child(2) .nav-link{background-color:#ffd23a;}
.brush-color-tab .nav-item:nth-child(3) .nav-link{background-color:#99d44f;}
.brush-color-tab .nav-item:nth-child(4) .nav-link{background-color:#00aff5;}
.brush-color-tab .nav-item:nth-child(5) .nav-link{background-color:#6b6eff;}
.brush-color-tab .nav-item:nth-child(6) .nav-link{background-color:#ff6bb6;}
.brush-color-tab .nav-item:nth-child(7) .nav-link{background-color:#707070;}
.brush-color-tab .nav-item:nth-child(8) .nav-link{background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);}
.brush-color-tab .nav-link.active{border: 2px solid var(--whiteColor);box-shadow: 0px 0px 0px 1px var(--primaryColor);}
.photo-editor textarea, .art-generator-editor textarea{
    border-width: 1px;
    border-color: rgb(222, 222, 222);
    border-style: solid;
    border-radius: 10px;
}
.form-control:focus {
    color: var(--darkColor);
    background-color: var(--whiteColor);
    border-color: var(--darkColor);
    outline: 0;
    box-shadow: none;
}
.download-btn-box {
    background-color: #ffffff59;
    position: absolute;
    bottom: 0;
    z-index: 1;
    width: 100%;
    border-radius: 0 0 10px 10px;
    padding: 21px 0 13px 0;
    backdrop-filter: blur(20px);
    transition: 0.2s;
}
.artgenerator-box .download-btn-box{
    padding: 10px 0px;
}
.download-btn-box ul{
    display: inline-flex;
}
.download-btn-box ul li {
    margin: 0 10px;
}
.size-chart2 {
    text-align: center;
    color: var(--whiteColor);
    margin: 4px 0 0 0;
    font-size: 12px;
}
.tooltip-img2{
    position: relative;
    top: -1px;
    left: 1px;
}
.crownicon2 {
    position: relative;
    margin-left: 5px;
}
.infoIcon2 {
}
.infoIcon2 {
  position: relative;
}
.infoIcon2:hover .extraInfo2 {
  visibility: visible;
}
.infoIcon2 img {
  width: 15px;
}
.extraInfo2 {
    bottom: 108%;
    left: -59px;
    position: absolute;
    color: var(--whiteColor);
    background-color: #2a2a2a;
    border-radius: 5px;
    padding: 6px 5px;
    width: 135px;
    text-align: center;
    visibility: hidden;
    /* display: none; */
    z-index: 1;
    font-size: 10px;
}
.extraInfo2:after {
    content: '';
    border-top: 5px solid #2a2a2a;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    top: 100%;
    position: absolute;
    left: 45%;
}
.infoIcon2:hover .extraInfo2 {
  visibility: visible;
}
.fix-foot-btn{}
/**/
/**/
#exit_warning{
	text-align:center;
}
#exit_warning .modal-content{
 background-color: var(--whiteColor);
 padding: 25px 25px;
 background-image: none;
}
.exit_warning_title{
    font-size: 18px;
    font-weight: 700;
    color: var(--darkColor);
    margin-bottom: 5px;
}
.exit_warning_subtitle{
    font-size: 14px;
    color: #707177;
    font-style: inherit;
    text-align: center;
    font-weight: 300;
    margin-bottom: 21px;
}
.exit_warning_btn{}
.exit_warning_cancel_btn {
    float: none;
    font-size: 16px;
    font-weight: 700;
    color: var(--darkColor);
    background-color: #ebeef0 !important;
    display: inline-block;
    border-radius: 5px;
    padding: 8px 26px !important;
    text-align: center;
    text-shadow: none;
    opacity: 1;
    border: 0;
    position: relative;
    width: 43%;
    height: auto;
}
.exit_warning_cancel_btn:hover {
        opacity: .75;
}
.exit_warning_close_btn{
    font-size: 16px;
    font-weight: 700;
    color: var(--whiteColor);
    background-color: var(--darkColor);
    display: inline-block;
    border-radius: 5px;
    padding: 8px 31px;
    text-align: center;
    text-shadow: none;
    opacity: 1;
    margin-left: 13px;
    border: 0;
    position: relative;
    width: 43%;
    height: auto;
}
.exit_warning_close_btn:hover{
    background-color: #1d1d1d !important; 
    color: var(--whiteColor);	
}
.art-generator-negative-switch .switch {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 18px;
  }
.art-generator-negative-switch .switch input { 
    opacity: 0;
    width: 0;
    height: 0;
  }
.art-generator-negative-switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgb(146, 146, 157);
    -webkit-transition: .4s;
    transition: .4s;
  }
.art-generator-negative-switch .slider:before {
    position: absolute;
    content: "";
    height: 12px;
    width: 12px;
    left: 3px;
    bottom: 3px;
    background-color: var(--whiteColor);
    -webkit-transition: .4s;
    transition: .4s;
  }
.art-generator-negative-switch input:checked + .slider {
    background-color: var(--darkColor);
}
.art-generator-negative-switch input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
  }
.art-generator-negative-switch input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(18px);
  }
  /* Rounded sliders */
.art-generator-negative-switch .slider.round {
    border-radius: 35px;
  }
.art-generator-negative-switch .slider.round:before {
    border-radius: 50%;
  }
/*END OF TOGGLE SWITCH*/
.art-generator-style-box {
    border-radius: 6px;
    background-color: rgb(255 255 255);
    overflow: hidden;
    width: 100%;
    margin: 2.2% 0;
    padding: 0;
    position: relative;
    justify-content: space-between;
}
.art-generator-style-box .nav-item{
    width: 31.33%;
    border: 0;
}
.art-generator-style-box .nav-link {
    padding: 0;
    border-radius: 0;
    transition: 0.2s;
}
.style-icon{
	width:100%;
	border: 0;
	border-radius: 6px;
}
.style-icon-name-div {
    background-color: #00000024;
    position: absolute;
    bottom: -1px;
    z-index: 1;
    width: 100%;
    padding: 9px 0;
    backdrop-filter: blur(20px);
    border-radius: 0 0 6px 6px;
}
.style-icon-name{
    font-size: 12px;
    font-weight: 400;
    color: #f9f9fa;
    text-align:center;
}
.art-generator-style-box .nav-link.active{
    background-color: var(--whiteColor);
}
.art-generator-style-box .nav-link.active .style-icon{
    border: 1px solid var(--darkColor);
    border-bottom: 0;
    border-radius: 6px;
    border: 1px double var(--darkColor);
    outline: 3px solid var(--whiteColor);
    outline-offset: -4px;
    transition: 0.2s;
    background-color: var(--darkColor);
}
.art-generator-style-box .nav-link:hover .style-icon{
    opacity: 0.9;
    transition: 0.2s;
}
.art-generator-style-box-inn{position: relative;border-radius: 6px;background-color: rgb(0 0 0);overflow: hidden;}
.art-generator-style-box .nav-link.active .art-generator-style-box-inn{}
.art-generator-size{
    width: 100%;
}
.art-generator-size-div{
    width: auto !important;
    margin-right: 16px !important;
}
.art-generator-size-div a{
    font-size: 13px;
    color: #4d4e54;
    font-weight: 400;
    text-align: center;
    padding: 0;
}
.art-generator-size-div a span{
    display: block;
    width: 55px;
    height: 55px;
    border-width: 1px;
    border-color: rgb(222, 222, 222);
    border-style: solid;
    border-radius: 6px;
    background-color: rgb(255, 255, 255);
    padding: 19px 0;
    margin-bottom: 5px;
}
.art-generator-size-div a.nav-link-square span{ 
    width: 55px;
    height: 55px; 
    padding: 19px 0; 
}
.art-generator-size-div a.nav-link-wide span{ 
    width: 96px;
	height: 53px;
    padding: 19px 0; 
}
.art-generator-size-div a.nav-link-vertical span{
    width: 53px;
    height: 71px;
    padding: 27px 0;
}
.art-generator-size-div a span svg{
    fill: var(--darkColor);
}
.art-generator-size-div a.active, .art-generator-size-div a:hover{
    color: var(--darkColor) !important;
    background-color: transparent !important;
}
.art-generator-size-div a.active span{
    background-color: var(--darkColor);
}
.art-generator-size-div a.active span svg{
    fill: var(--whiteColor);
}
.art-generator-tab-content{}
.art-generator-tab{}
.artgenerator-box{
    width: 34%;
    padding: 15px 5px;
}
#wide .artgenerator-box{
    width: 50%; 
}
#vertical .artgenerator-box{
    width: 25%; 
}
#vertical .size-chart2{font-size:10px;}
#vertical .artgenerator-box .download-btn2{
    font-size: 10px; 
} 
#vertical .artgenerator-box .download-hd-btn2 {
    font-size: 10px; 
}
#vertical .artgenerator-box .download-hd-btn2 .crownicon2 {
    width: 10px; 
    margin-left: 0px;
}
.artgenerator-box img{}
.artgenerator-box-inn{
    position: relative;
    cursor: pointer;
    border-radius: 10px;
    outline: 1px solid transparent;
    border: 2px solid #fff;
}

.artgenerator-box-inn.active{
    outline: 1px solid var(--primaryColor);
}
.artgenerator-box-inn .artgenerator-image {
    border-radius: 10px;
    background-color: rgb(249, 249, 250);
    width: auto;
    max-height: 75px;
}
.artgenerator-box .editor-link, .artgenerator-box .download-btn-box{visibility:hidden;}
.artgenerator-box:hover .editor-link, .artgenerator-box:hover .download-btn-box{visibility:visible;}
.art-generator-app-toolbar{width:100%;}
.art-generator-tab-row, .art-generator-tab-wide-row{margin:auto;justify-content: center;}
.tabbed{
    width: 100%;
}
.tabbed ul{
    display: flex;
    justify-content: space-between;
}
.tabbed li{
    width: 23% !important;
}
.tabbed li a{
    display: block;
    position: relative;
    width: 100%;
    height: 33px;
    text-align: center;
    border-width: 1px;
    border-color: rgb(222, 222, 222);
    border-style: solid;
    border-radius: 6px;
    background-color: rgb(255, 255, 255);
    padding: 8px 0;
    color: var(--darkColor);
}
.tabbed li a:hover{color:var(--darkColor);}
.tabbed li a.active{
    background-color: var(--darkColor) !important;
}
.side-remove-btn-box{
    padding: 10px 0 20px 0;
    position: fixed;
    bottom: 0;
    width: 306px;
    z-index: 1;
    background-color: #f9f9fa;
    margin-top: 0;
}
.side-remove-btn-box a{
    width: 100%;
}
/**/
.mgi_toolbarTitle {
    font-size: 18px;
    font-weight: 700;
    line-height: 21.78px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 5px;    
    margin-bottom: 30px;
}
.mgi_toolbarTitle span.material-symbols-outlined {
    color: var(--darkColor);
}
.mpj_clear_remove_object_drawing {
    border: 1px solid #E83434 !important;
    color: #E83434 !important;
    font-size: 14px;
    font-weight: 600;
    line-height: 16.94px;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
}
.brush-slider-div {
    margin: 30px 0;
    display: flex    ;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 10px;
    flex-wrap: wrap;
}
.ed_range_slider_light {
    display: flex;
    flex-direction: column-reverse;
    gap: 12px;
    margin-bottom: 16px;
    width: calc(100% - 0px);
    margin: 0;
}
.mgi_whiteBgbtn {
    border: 1px solid #DEDEDE;
    height: 44px;
    gap: 0px;
    border-radius: 8px;
    background: var(--whiteColor);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 15px 0;
    color: var(--darkColor);
    font-size: 16px;
    font-weight: 500;
    transition: all 0.3s;
}
.mgi_whiteBgbtn:hover{
    background: var(--darkColor);
    color: var(--whiteColor);
}
.close.back-warning{
    cursor: auto !important;
}
.crop__modal .app-wrapper{
}
/*********** Slider Css ***************/
.mgi_listHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    font-size: 14px;
}
.mgi_linkViewAll {
    font-size: 10px;
    font-weight: 500;
    line-height: 12.1px;
    text-align: right;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: var(--primaryColor);
}
.mgi_listHeader h5 {
    font-size: 13px;
    font-weight: 700;
    line-height: 15.73px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: var(--darkColor);
    display: flex;
    align-items: center;
    justify-content: start;
}
.mgi_sliderWrapper {
    position: relative;
}
.arrowBack{
    cursor: pointer;
}
.arrowBack, 
.mgi_showList1,
.mgi_sliderList.active .mgi_sliderWrapper,
.mgi_sliderList.active .mgi_linkViewAll {
    display: none;
}
.mgi_sliderList.active .arrowBack,
.mgi_sliderList.active .mgi_showList1 {
    display: block;
}
.mgi_sliderList.active .arrowBack .material-symbols-outlined{
    color: var(--darkColor);
}
.mgi_backPage:hover svg path {
    fill: var(--primaryColor);
}
.mgi_editorImg_list li.mgi_slideItem {
    max-width: calc(50% - 5px);
}
.mgi_italicText {
    font-size: 14px;
    font-style: italic;
    font-weight: 500;
    line-height: 16.94px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    display: block;
    color: var(--darkColor);
}
input[type="range"].sp_slider{
    color: light-dark(var(--primaryColor), rgb(255, 255, 255));
}
a#mg_bulk_restore_from_trash.mgi_commanBtn svg path {
    fill: var(--whiteColor);
}
/**/ 
/**** Upload Files ****/
/**/ 
.file-selector__boxDradDrop {
    border: 1px dashed #D7D7D7;
    padding: 12px 20px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.file-selector {
    position: relative;
    cursor: pointer;
    margin-bottom: 20px;
    margin-top: 20px;
}
.file-selector__button {
    background-color: var(--buttonBgColor);
    width: 100%;
    color: var(--buttonTextColor);
    border: 0;
    height: 57px;
    border-radius: 90px;
}
.file-selector__input:hover + .file-selector__button {
    box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.35), -3px -3px 8px rgba(255, 255, 255, 0.8);
    transition: 0.3s all ease-in-out;
}
.file-selector__input {
    background: transparent;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    cursor: pointer;
    height: 100%;
    width: 100%;
}
.file-selector__input::-webkit-file-upload-button {
    cursor: pointer;
}
.mgi_seprateBorder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    position: relative;
    font-size: 9px;
    font-weight: 400;
    line-height: 10.89px;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    text-transform: capitalize;
    color: #A4A4A4;
}
.mgi_seprateBorder::after, 
.mgi_seprateBorder::before {
    content: '';
    width: calc(50% - 10px);
    height: 1px;
    position: relative;
    background-color: #E9E9E9;
}
.mgi_seprateBorder::before{
    left: -10px;
}
.mgi_seprateBorder::after{
    right: -10px;
}
.text_wrap span {
    font-size: 9px;
    font-weight: 400;
    line-height: 10.89px;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #A4A4A4;
}
.text_wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.text {
    color: var(--whiteColor);
    font-style: inherit;
    margin-top: 1.5%;
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    line-height: 24.2px;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
}
.text svg {
    position: relative;
    top: -2px;
    margin-right: 5px;
    width: 17px;
}
.background-remover-banner-box hr{
	border-top : 1px dashed rgb(203, 202, 210);
	margin: 22px 0;
}
.try-list{
    text-align: center;
    margin-top: 18px;
    margin-bottom: 20px;
}
.try-list li{
    display: inline-block;
    border-radius: 8px;
    width: 56px;
    height: 56px;
    margin: 0 6px;
}
.upload-image-text1{
    font-weight: 700;
    line-height: 140%;
    color: #000000;
    font-style: inherit;
    margin-top: 0;
    text-align: center; 
}
.upload-image-text2{
    font-weight: 700;
    line-height: 140%;
    color: #000000;
    font-style: inherit;
    margin-top: 0;
    text-align: center; 
}
.upload-image-text3{
    font-weight: 300;
    line-height: 140%;
    color: #000000;
    font-style: inherit;
    margin-top: 0;
    text-align: center; 
}
.upload-image-text3 a{
    font-weight: 600;
    color: var(--primaryColor);
	text-decoration:underline;
}
.upload-image-text3 a:hover {
    color: #004cba;
    text-decoration: none;
}
/********* Page Heading Css *********/
.mgi_headingWrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.mgi_headingWrapper h2 {
    font-size: 22px;
    font-weight: 700;
    line-height: 36.63px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
}
.mgi_checkBox_label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    position: relative;
    color: #949494;
}
.mgi_checkBox_label span {
    border: 1px solid #D8DDE9;
    width: 21px;
    height: 21px;
    border-radius: 6px;
    background-color: #fff;
    position: relative;
    /* box-shadow: 0px 4px 6.3px 0px #00000026; */
}
.mgi_select_all_btn .mgi_checkBox_label span,
.mgi_headingWrapper .mgi_checkBox_label span{
    width: 17px;
    height: 17px;
    border-radius: 4px;
}
.mgi_select_all_btn .mgi_checkbox_input:checked + span:before {
    top: 4px;
    left: 3px;
}
.mgi_holder .mgi_checkBox_label span {
    border: 0;
    width: 24px;
    height: 24px;
}

ul#mg_get_trash_design .mgi_holder .mgi_checkBox_label span {
    border: 0;
    width: 17px;
    height: 17px;
    border-radius: 4px;
}
ul#mg_get_trash_design .mgi_imgGrig .mgi_checkbox_input:checked + span:before {
    top: 5px;
    left: 3px;
}
.mgi_checkbox_input {
    width: 100%;
    opacity: 0;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    height: 100%;
    z-index: -1;
}
.mgi_checkbox_input:checked + span{
    background-color: var(--primaryColor);
}
.mgi_checkbox_input:checked + span:before {
    content: '';
    width: 10px;
    height: 5px;
    border-left: 1px solid var(--whiteColor);
    border-bottom: 1px solid var(--whiteColor);
    transform: rotate(-45deg);
    position: absolute;
    top: 3px;
    left: 3px;
}
.mgi_selectWrap .mgi_filter:after {
    display: none;
}
.dropdown-menu.mgi_SelectedMenu {
    position: absolute;
    left: auto !important;
    right: 0 !important;
    width: 170px;
    padding: 10px 10px;
    box-shadow: 0px 3px 16.4px 0px #00000021;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: var(--darkColor);
    transition: all 0.3s;
    top: 10px !important;
}
.mgi_SelectedMenu li a{
    color: var(--darkColor);
    font-size: 12px;
    line-height: 20.52px;
    font-weight: 500;
    text-align: left;
}
.mgi_SelectedMenu li:hover a{
    color: var(--primaryColor);
    background: transparent !important;
}
/**** Custom Grid Gallery Design Css *****/
/* Masonry image gallery styling */
.mgi_grid_layout {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.mgi_grid_layout .mgi_grid_item {
    gap: 20px;
    max-width: 100%;
    margin: 40px 0;
    list-style: none;
    padding: 0;
    margin-top: 20px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
.mgi_grid_layout .mgi_grid_item .mgi_imgGrig {
    display: flex;
    cursor: pointer;
    /* overflow: hidden; */
    position: relative;
    margin-bottom: 25px;
    border-radius: 4px;
}
.mgi_grid_layout .mgi_grid_item img {
    width: 100%;
    border-radius: 10px;
    transition: transform 0.2s ease;
    max-height: 237px;
    width: auto;
    object-fit: cover;
    object-position: center;
    min-height: 237px;
}
.mgi_grid_layout .mgi_grid_item .mgi_imgGrig:hover img {
    /* transform: scale(1.1); */
}
.mgi_imgGrig.mg_image_item_li.active > img{
    border: 2px solid var(--primaryColor);
    display: flex;
    margin: 0;
}
.mg_image_item_li.active .mgi_holder {
    opacity: 1;
    visibility: visible;
}
#mg_get_trash_design .mgi_imgGrig.mg_image_item_li> img,
.mgi_imgGrig.mg_image_item_li> img, 
#mg_get_trash_design .mgi_imgGrig.mg_image_item_li.active > img {
    border: 2px solid transparent;
}
.mgi_holder{
    background: transparent;
    border-radius: 10px;
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s;
}
.mgi_hoverOverlay {
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
    right: 0;
    bottom: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
    border-radius: 10px;
}
.mgi_imgGrig:hover .mgi_hoverOverlay,
.mgi_imgGrig:hover .mgi_holder{
    opacity: 1;
    visibility: visible;
}
.mgi_imgGrig .mgi_checkbox_input:checked + span:before {
    top: 8px;
    left: 7px;
}
/* Image lightbox styling */
.lightbox {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    position: fixed;
    visibility: hidden;
    background: rgba(0,0,0,0.65);
}
.lightbox.show {
    visibility: visible;
}
.lightbox .wrapper {
    position: fixed;
    left: 50%;
    top: 50%;
    width: 100%;
    padding: 20px;
    max-width: 850px;
    background: #fff;
    border-radius: 6px;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0.9);
    transition: transform 0.1s ease;
}
.lightbox.show .wrapper {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
}
.wrapper :where(header, .details) {
    display: flex;
    align-items: center;
}
.wrapper header {
    justify-content: space-between;
}
header .details i {
    font-size: 1.7rem;
}
header .details span {
    font-size: 1.2rem;
    margin-left: 10px;
}
header .buttons i {
    height: 40px;
    width: 40px;
    cursor: pointer;
    display: inline-block;
    color: #fff;
    margin-left: 10px;
    background: #6C757D;
    font-size: 1.25rem;
    line-height: 40px;
    text-align: center;
    border-radius: 4px;
    transition: 0.2s ease;
}
header .buttons i:hover {
    background: #5f666d;
}
.wrapper .preview-img {
    display: flex;
    justify-content: center;
    margin-top: 25px;
}
.preview-img .mgi_imgGrig {
    max-height: 65vh;
}
.preview-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
/** Upload Designer Image **/
.mgi_designerUpload {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 10px;
    border-radius: 10px;
    background-color: var(--whiteColor);
    cursor: pointer;
    position: relative;
}
.mgi_fileUpload_input {
    position: absolute;
    z-index: 11;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    border: 0px;
    opacity: 0;
}
.mgi_uploadBox {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 15px 20px;
    border: 1px dashed var(--primaryColor);
    border-radius: 10px;
    width: 100%;
}
.mgi_uploadBox p {
    font-family: var(--poppinsFont);
    font-size: 11px;
    font-weight: 400;
    line-height: 16.5px;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    margin-bottom: 0;
    color: #a4a4a4;
}
.mgi_uploadBox p a{
    color: var(--primaryColor);
}
.image-preview img {
    width: 67px;
    height: 67px;
    border-radius: 8px;
    margin-right: 15px;
    object-fit: cover;
    object-position: center;
}
#category_style_div .mgi_mainLabel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
#category_style_div .mgi_mainLabel .mgi_viewMore_btn {
    font-size: 10px;
    font-weight: normal;
}
.image-preview.animate-image {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 10px;
}
.image-preview {
    display: none;
}
.delImage.mgi_commanBtn.mgi_deleteBtn {
    font-size: 9px;
    height: 35px;
    border: 1px solid #D9D9D9;
    border-radius: 8px;
}
.mgi_changeImgBtn {
    border: 1px solid #D9D9D9;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px 15px;
    border-radius: 8px;
    color: var(--darkColor);
    gap: 5px;
    background-color: var(--whiteColor);
    font-family: Poppins;
    font-size: 9px;
    font-weight: 400;
    line-height: 13.5px;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    cursor: pointer;
}
.mgi_commanBtn.mgi_openNewEditor:hover, .mgi_commanBtn.mgi_openNewEditor.active {
    background-color: #fff8e1;
    border: 1px solid #fff8e1;
}
.mgi_openNewEditor:hover> svg path, 
.mgi_openNewEditor.active> svg path{
    fill: #c19b20;
} 
.mgi_commanBtn.mgi_openNewEditor:hover span, 
.mgi_commanBtn.mgi_openNewEditor.active span{
    color:#c19b20;
}
#pixieEditor{
    width : 100%;
    height : calc(100vh - 80px);
}

/* Responsive media query code */
@media screen and (max-width: 688px) {
    .lightbox .wrapper {
    padding: 12px;
    max-width: calc(100% - 26px);
    }
    .wrapper .preview-img {
    margin-top: 15px;
    }
    .mgi_grid_layout .mgi_grid_item {
    max-width: 100%;
    padding: 0 13px;
    margin-top: 20px;
    }
}
/************ Dropdown Dotted Css **************/
.mgi_dotted_dropdown .dropdown-menu {
    box-shadow: 0px 3px 16.4px 0px #00000021;
    border-radius: 8px;
    min-width: 170px;
}
.mgi_dotted_dropdown .dropdown-item {
    font-size: 12px;
    font-weight: 500;
    line-height: 14.52px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    border: 0px !important;
}
.mgi_dotted_dropdown.dropdown {
    position: absolute;
    right: 10px;
    z-index: 9;
    top: 10px;
}
.mgi_dotted_dropdown .dropdown-item span svg path{
    fill: var(--darkColor);
    /* stroke: var(--darkColor); */
}
.mgi_dotted_dropdown .dropdown-menu .dropdown-item:hover span svg path{
    fill: var(--primaryColor);
    /* stroke: var(--primaryColor); */
}
.mgi_dotted_dropdown .dropdown-item {
    color: var(--darkColor);
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 5px;
}
.mgi_dotted_dropdown .dropdown-menu .dropdown-item:hover {
    color: var(--primaryColor);
}
.mgi_holder label.mgi_checkBox_label {
    position: absolute;
    left: 10px;
    z-index: 8;
    top: 10px;
}
.mgi_dotted_dropdown .dropdown-toggle {
    width: 29.75px;
    height: 17px;
    background-color: var(--whiteColor);
    padding: 2px 5px;
    display: inline-block;
    line-height: normal;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 4px 6.3px 0px #00000026;
}
.mgi_dotted_dropdown .dropdown-toggle::after {
    display: none;
}
.mgi_holder .mgi_dotted_dropdown .dropdown-toggle {
    width: 40px;
    height: 23px;
    border-radius: 6px;
}
/*************** My Design Page Css **************/
.mgi_pageTitle h2, .mgi_ck_page_title {
    font-size: 32px;
    font-weight: 700;
    line-height: 38.73px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
} 
.mgi_pageTitle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
.mgi_filterList {
    margin-top: 50px;
}
.mgi_filterList ul.mgi_grid_item {
    margin-bottom: 0px;
}
.mgi_filterIcon, .mgi_filterImage {
    background: #F8F8F8;
    border: 1px solid #F4F4F4;
    width: 62px;
    height: 63px;
    gap: 0px;
    border-radius: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mgi_filterIcon img {
    width: 28px;
    height: 28px;
}
.mgi_filterImage {
    box-shadow: 0px 7px 19.1px 0px #0000003B;
    border: 1px solid #FFFFFF;
    background-size: cover;
    background-position: top center;
}
.mgi_filterTitle {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 15px;
    margin-bottom: 20px;
    position: relative;
}
.mgi_viewMoreBtn {
    font-size: 14px;
    font-weight: 500;
    line-height: 18.15px;
    text-align: right;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    position: absolute;
    right: 0;
    color: var(--primaryColor);
}
.mgi_filterName {
    font-size: 18px;
    font-weight: 700;
    line-height: 21.78px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: var(--darkColor);
}
.mgi_searchListIcon {
    position: absolute;
    left: 40px;
    width: 24px;
    height: 24px;
    border-radius: 25px;
    background-color: var(--whiteColor);
    top: 10px;
    z-index: 8;
    display: flex;
    align-items: center;
    justify-content: center;
}
/****** No Data found css ********/
.mgi_noDataFoundBox{
    width: 269px;
    height: 238px;
    top: 10073px;
    border-radius: 15px;
    background: #F8F8F8;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.mgi_grayBtn {
    font-size: 12px;
    font-weight: 500;
    line-height: 14.52px;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #222222;
    background: #F1F1F1;
    padding: 9px 15px;
    border-radius: 25px;
    display: inline-block;
    margin: auto;
}
.mgi_dataContent > p {
    font-size: 12px;
    font-weight: 500;
    line-height: 14.52px;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #A9ACB2;
}
.mgi_dataContent {
    text-align: center;
}
/********** EditImage Modal Css ***********/
.mgi_imageContent_details {
    max-width: 100%;
    border: 1px solid #EFEFEF;
    height: 100%;
    border-radius: 10px;
    padding: 15px;
    width: 100%;
}
.mgi_imageContent_details> p {
    font-size: 15px;
    font-weight: 400;
    line-height: 20.7px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    margin-bottom: 25px;
}
.modal-content.mgi_modalContent {
    padding: 30px;
    position: relative;
}
.mw-1220px {
    max-width: 1220px !important;
}
.mgi_modalBody {
    display: flex;
    align-items: start;
    justify-content: start;
    gap: 20px;
    flex-wrap: revert;
    flex: 1 1 0;
}
.mgi_imageHolder {
    max-width: fit-content;
    border-radius: 15px;
    overflow: hidden;
    width: 100%;
}
.mgi_portraitModalImage .mgi_imageHolder {
    max-width: 400px;
}
.mgi_portraitModalImage .mgi_imageContent_details {
    max-width: calc(100% - 420px);
}
.mgi_imageHolder > img {
    width: auto;
    max-height: 700px;
    max-width: 100%;
    border-radius: 20px;
}


.mgi_actionPrompt_btn {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 15px;    
    padding-bottom: 30px;
    border-bottom: 1px solid #F1F1F1;
    margin-bottom: 30px;
}
.mgi_promptBtn {
    border: 1px solid #D9D9D9;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px 15px;
    border-radius: 10px;
    color: var(--darkColor);
    gap: 5px;
}
.mgi_promptBtn.editImages:hover > svg,
.mgi_promptBtn.editImages:hover > svg > path,
.mgi_promptBtn.mgi_preview_copy_prompt:hover > svg, 
.mgi_promptBtn.mgi_preview_copy_prompt:hover > svg>path{
    fill: var(--primaryColor);
}
.mgi_btnHolder_prompt .mgi_promptBtn.editImages:hover, .mgi_promptBtn.editImages:hover,
.mgi_btnHolder_prompt .mgi_promptBtn.editImages:first-child:hover,
.mgi_promptBtn.mgi_preview_copy_prompt:hover {
    border: 1px solid var(--primaryColor);
}
.mgi_promptBtn.editImages:hover svg {
    fill: var(--primaryColor);
}
.mgi_btnHolder_prompt {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
}
.mgi_promptBtn.mgi_downloadBtn {
    border: 0px !important;
    width: 100%;
}
.mgi_btnHolder_prompt .mgi_promptBtn:first-child,
.mgi_promptBtn:hover{
    border: 1px solid var(--darkColor);
}
.mgi_imgSize p {
    color: var(--darkColor);
}
.mgi_imgSize .mgi_svgTitle {
    color: #838383;
    font-size: 14px;
    font-weight: 400;
    line-height: 16.94px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    display: flex;
    align-items: center;
    gap: 3px;
}
.mgi_imgProperties {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 15px;
}
.close.mgi_closeBtn {
    position: absolute;
    right: 15px;
    top: 15px;
}
.modal-backdrop.show {
    display: block;
    background: rgb(0 0 0 / 40%) !important;
}
.mgi_selectedItems {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.mgi_selectedCount {
    cursor: pointer;
    display: inline-flex;
    width: -webkit-fill-available;
    color: #949494;
    align-items: center;
    gap: 7px;
}
.mgi_checkboxWrapper {
    min-width: 80px;
    display: flex;
    gap: 10px;
}
.form-select {
    font-size: 13px;
    font-weight: 500;
    line-height: 15.73px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: var(--darkColor) !important;
}
.form-select:hover{
    color: var(--darkColor) !important;
}
.mgi_selectWrap select {
    width: 140px;
}

/********************************************************************************************* 
14. Publisher start
*********************************************************************************************/
#publisher_create_post_popup .modal-dialog {
    max-width: 1080px;
}
.mgi_ck_popup_wrapper {
    z-index: 9999;
    background-color: transparent;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    height: 100vh;
}
.mgi_ck_page_title{
    
}
.mgi_ck_publisher_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 25px;
    position: sticky;
    top: 80px;
    background-color: #ffffff;
    padding: 16px 0px;
    margin: 0px 0px 10px;
    z-index: 10;
}
.mgi_ck_publisher_header_left{
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    flex: 1;
}
.mgi_ck_publisher_header_right{
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.mgi_ck_publisher_header_right .mgi_ck_dropdown_toggle > p{
    display: flex;
    align-items: center;
    gap: 6px;
}
.mgi_ck_publisher_header_right .mgi_ck_dropdown_toggle > p img{
    max-width: 14px;
}
.mgi_ck_publisher_tabs{
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 300px;
    gap: 4px;
    border-radius: 9px;
    padding: 5px;
    border: 1px solid var(--line-color-input);
    flex: 1;
}
.mgi_ck_publisher_tab_item{
    background-color: transparent;
    cursor: pointer;
    font-size: 12px;
    color: rgb(161, 161, 161);
    font-weight: 500;
    height: 30px;
    line-height: 30px;
    border-width: initial;
    border-style: none;
    border-color: initial;
    border-image: initial;
    outline: none;
    flex: 1 1 0%;
    border-radius: 9px;
    text-align: center;
    min-width: 88px;
}
.mgi_ck_publisher_tab_item.active{
    background-color: var(--primaryColor);
    color: rgb(255, 255, 255);
}
.mgi_ck_cal_controler{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.mgi_ck_cal_controler_btn{
    width: 20px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--color-dark1);
}
.mgi_ck_cal_controler_btn:hover{
    color: var(--primaryColor);
}
.mgi_ck_cal_current_date{
    font-size: 18px;
    color: var(--color-dark1);
    font-weight: 600;
    white-space: nowrap;
}
.mgi_ck_calendar_inner{
    display: grid;
    grid-template-rows: auto 1fr;
    border-radius: 10px;
    border: 1px solid #e7e7e7;
    overflow: auto;
    scrollbar-width: thin;
}
.mgi_ck_cal_week_wrapper{
    display: grid;
    grid-template-columns: repeat(7, 14.29%);
    border-bottom: 1px solid #ececec;
}
.mgi_ck_cal_day_wrapper{
    display: grid;
    grid-template-columns: repeat(7, 14.29%);
}
.mgi_ck_cal_week{
    font-size: 13px;
    font-weight: 600;
    color: var(--color-dark1);
    border-width: initial;
    border-style: none;
    border-color: initial;
    border-image: initial;
    padding: 10px;
}
.mgi_ck_cal_day_wrapper > .mgi_ck_cal_day{
    text-align: center;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 10px;
    border-left: 1px solid rgb(236, 236, 236);
    border-bottom: 1px solid rgb(236, 236, 236);
    gap: 6px;
    position: relative;
}
.mgi_ck_date{
    color: var(--color-dark1);
    font-size: 13px;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 8px;
    height: 26px;
    line-height: 23px;
}
.mgi_ck_cal_day.mgi_ck_day_other .mgi_ck_date,
.mgi_ck_cal_day.disabled .mgi_ck_date{
    color: var(--color-light1);
}
.mgi_ck_cal_day.disabled .mgi_ck_date{
    margin-bottom: 36px;
}
.mgi_ck_cal_day.current .mgi_ck_date{
    color: var(--primaryColor);
    background-color: rgba(var(--main-color-rgb), 0.1);
}
.mgi_ck_calendar_inner:not(.day_view) .mgi_ck_cal_day_wrapper > .mgi_ck_cal_day:nth-child(7n + 1){
    border-left: none;
}
.mgi_ck_calendar_inner:not(.day_view) .mgi_ck_cal_day_wrapper > .mgi_ck_cal_day:nth-last-child(7),
.mgi_ck_calendar_inner:not(.day_view) .mgi_ck_cal_day_wrapper > .mgi_ck_cal_day:nth-last-child(7) ~ .mgi_ck_cal_day{
    border-bottom: none;
}
.day_view .mgi_ck_cal_day_wrapper > .mgi_ck_cal_day{
    border-left: none;
}
.day_view .mgi_ck_cal_day_wrapper > .mgi_ck_cal_day:first-child{
    border-radius: 10px 10px 0 0;
}
.day_view .mgi_ck_cal_day_wrapper > .mgi_ck_cal_day:last-child{
    border-bottom: none;
    border-radius: 0 0 10px 10px;
}
.week_view .mgi_ck_cal_day_wrapper > .mgi_ck_cal_day:first-child{
    border-radius: 0 0 0 10px;
}
.week_view .mgi_ck_cal_day_wrapper > .mgi_ck_cal_day:last-child{
    border-bottom: none;
    border-radius: 0 0 10px 0;
}
.mgi_ck_cal_day_wrapper > .mgi_ck_cal_day.disabled{
    background-color: #fafafa;
}
.week_view .mgi_ck_cal_day_wrapper > .mgi_ck_cal_day{
    min-height: calc(-300px + 100vh);
}
.day_view .mgi_ck_cal_day_wrapper{
    grid-template-columns: 1fr;
}
.day_view .mgi_ck_cal_day_wrapper > .mgi_ck_cal_day{
    min-height: 70px;
    flex-direction: row;
    gap: 30px;
    align-items: center;
}
.day_view .mgi_ck_cal_day_wrapper > .mgi_ck_cal_day > .mgi_ck_btn.mgi_ck_btn_block{
    max-width: 120px;
}
.mgi_ck_cal_day > .mgi_ck_btn.mgi_ck_btn_block{
    display: flex;
    height: 30px;
    border-radius: 6px;
    font-size: 12px;
    line-height: 30px;
    background-color: rgba(var(--main-color-rgb), 0.04);
    border-color: var(--primaryColor);
    color: var(--primaryColor);
    opacity: 0;
    white-space: nowrap;
}
.mgi_ck_cal_day:hover > .mgi_ck_btn.mgi_ck_btn_block{
    opacity: 1;
}
/* Publish post popup start */
.mgi_ck_publisher_selected_title{
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-dark1);
    margin-top: 20px;
}
.mgi_ck_publisher_selected_items{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 14px;
    margin-bottom: 20px;
    max-height: 410px;
    overflow: auto;
    padding-right: 12px;
    margin-right: -12px;
    height: 100vh;
}
.mgi_ck_publisher_selected_items > .mgi_ck_psi_item{
    position: relative;
}
.mgi_ck_publisher_selected_items > .mgi_ck_psi_item > img{
    max-width: 100%;
    aspect-ratio: 1/1;
    padding: 1px;
    background-color: #F2F3F5;
    border-radius: 8px;
    object-fit: contain;
}
.mgi_ck_publisher_selected_items > .mgi_ck_psi_item > .mgi_ck_psi_remove{
    position: absolute;
    top: 10px;
    right: 10px;
    width: 20px;
    height: 20px;
    background-color: var(--primaryColor);
    box-shadow: 0px 2.30769px 3.84615px rgba(0, 0, 0, 0.05);
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s cubic-bezier(0.71, -0.11, 0.25, 0.88);
    transform: translateY(-10px);
}
.mgi_ck_publisher_selected_items > .mgi_ck_psi_item:hover > .mgi_ck_psi_remove{
    opacity: 1;
    visibility: visible;
    transform: translateY(0px);
}
.mgi_ck_publisher_selected_items > .mgi_ck_psi_item > .mgi_ck_psi_remove > svg{
    width: 8px;
}
.mgi_ck_publisher_selected_items > .mgi_ck_psi_item > .mgi_ck_psi_remove > svg path{
    fill: #FFFFFF;
}
.mgi_ck_publisher_selected_items.no_designs::before{
    content: "No design(s) selected! \A Please select designs from the left panel.";
    position: absolute;
    top: 1px;
    left: 1px;
    right: 1px;
    bottom: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--color-light1);
    font-weight: 400;
    background-color: #ffffff;
    border-radius: 10px;
    white-space: pre-wrap;
    text-align: center;
}
.mgi_ck_multipage_list_wrapper{
    display: flex;
    flex-direction: column;
    height: 100%;
    margin-top: 10px;
}
.mgi_ck_multipage_list_wrapper > .mgi_ck_multipage_list_header{
    flex: none;
    display: inline-flex;
    align-items: center;
    color: var(--color-dark1);
    font-weight: 600;
    width: max-content;
    cursor: pointer;
}
.mgi_ck_multipage_list_wrapper > .mgi_ck_image_box_list{
    flex: 1;
}
.mgi_ck_multipage_count {
    position: absolute;
    width: 44px;
    height: 14px;
    left: 4px;
    top: 4px;
    background: rgba(4, 4, 6, 0.6);
    border-radius: 8px;
    font-size: 8px;
    color: #ffffff;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}
.mgi_ck_publisher_popup .mgi_ck_popup_footer .mgi_ck_btn{
    min-width: 137px;
}
.sp_cal_post_design_create {
    /* display: none; */
    padding: 30px;
}
.sp_cal_post_design_create .sp_cal_pdc_right{
    border-radius: 15px;
    border: 1px solid #E7E7E7;
}
.sp_cal_post_design_create .sp_cal_pdc_right>h3 {
    font-size: 13px;
    margin: 0;
    margin: 15px;
    font-weight: 600;
}
.sp_cal_pdc_inner{
    display: grid;
    gap: 30px;
    grid-template-columns: 60% calc(40% - 30px);
    align-items: flex-start;
}
.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(154px, 1fr));
    grid-gap: 10px;
}
.sp_social_app_list>ul>li>a {
    height: 42px;
    border-radius: 10px;
    border: 1px solid var(--line-color-input);
    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>img {
    pointer-events: none;
    max-height: 20px;
}
.sp_social_app_list>ul>li>a>p {
    margin: 0;
    pointer-events: none;
}
.sp_social_app_list>ul>li>a.active,
.sp_social_app_list>ul>li>a:hover {
    color: var(--primaryColor);
    border-color: var(--primaryColor);
    background-color: rgba(var(--main-color-rgb), 0.04);
}
.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_social_schedule_date_wrapper {
    height: 46px;
    border: 1px solid var(--primaryColor);
    /* background-color: rgba(var(--main-color-rgb), 0.1); */
    color: var(--primaryColor);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    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: 0;
    cursor: pointer;
    border-radius: 10px;
}
.sp_social_schedule_date_wrapper span.sp_social_schedule_datetime{
    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_publish_button {
    display: flex;
    align-items: center;
    gap: 10px;
}
/* .sp_social_schedule_date_wrapper>svg {
    margin-right: 15px;
} */
.sp_social_schedule_date_wrapper>svg path {
    fill: var(--primaryColor);
}
.sp_social_schedule_date_wrapper .tooltip-inner {
    min-width: 120px;
    text-align: center;
}
.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(--primaryColor);
}
.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_social_sdb_wrapper {
    position: relative;
}
.sp_social_schedule_button_wrapper {
    position: relative;
    margin-bottom: 20px;
}
.sp_social_schedule_button_wrapper .sp_btn.sp_btn_border {
    height: 46px;
    border: 1px solid var(--line-color-input);
    background-color: transparent;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-light3);
    display: flex;
    width: 100%;
    align-items: center;
    gap: 15px;
    padding: 0 16px;
    justify-content: space-between;
}
.sp_social_schedule_button_dd {
    position: absolute;
    bottom: calc(100% + 5px);
    left: 0;
    background-color: #ffffff;
    min-width: 410px;
    max-width: 410px;
    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: 10px;
    border: 1px solid var(--line-color-input);
    outline: none;
    font-size: 12px;
    font-weight: 500;
    width: 100%;
}
.sp_social_zone>select:foucs {
    border-color: var(--primaryColor);
}
.sp_cal_pdc_preview_wrapper {
    padding: 20px;
    background-color: #F0F2F5;
    border-radius: 0 0 15px 15px;
}
.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-dark1);
    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 .sp_post_image_slider{
    overflow: hidden;
}
.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(--primaryColor);
    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 */
.tox-tinymce-aux {
    z-index: 9999 !important;
}
.tox .tox-statusbar {
    display: none !important;
}
.sp_cal_post_text_editor_wrapper .tox-toolbar__primary {
    border-top-color: #F8F8F8 !important;
    background-color: #F8F8F8 !important;
    border-radius: 0 0 10px 10px;
}
.sp_cal_post_text_editor_wrapper .tox-tinymce {
    border-color: #e9e9f4;
    border-radius: 10px;
}
.sp_socialapp_tab_content {
    display: none;
}
.sp_socialapp_tab_content.show{
    display: block;
}
.sp_social_cusdd_toggle {
    height: 46px;
    border: 1px solid var(--line-color-input);
    border-radius: 10px;
    display: flex;
    align-items: center;
    padding: 0 40px 0 16px;
    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: "";
    position: absolute;
    right: 18px;
    width: 8px;
    height: 8px;
    border-left: 2px solid;
    border-bottom: 2px solid;
    top: calc(50% - 5px);
    color: var(--color-light1);
    transform: rotateZ(-45deg) rotateX(0deg) rotateY(0deg);
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
.sp_social_cusdd_toggle.show:after {
    transform: rotateZ(-45deg) rotateX(-180deg) rotateY(-180deg);
}
.sp_social_cusdd_toggle>.sp_social_cusdd_value {
    display: grid;
    align-items: center;
    flex: 1;
    grid-template-columns: 25px auto;
    gap: 10px;
}
.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: 25px;
    height: 25px;
    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: 25px;
    height: 25px;
    background-image: url('../images/svg/social_facebook.svg');
    background-size: 12px;
    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/svg/social_linkedin.svg');
}
.sp_social_custom_dd_wrapper .twitter .sp_social_dd_initial:before {
    background-image: url('../images/svg/social_twitter.svg');
}
.sp_social_custom_dd_wrapper .pinterest .sp_social_dd_initial:before {
    background-image: url('../images/svg/social_pinterest.svg');
}
.sp_social_custom_dd_wrapper .instagram .sp_social_dd_initial:before {
    background-image: url('../images/svg/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;
    font-size: 12px;
    color: var(--color-dark1);
    font-weight: 500;
}
.sp_social_cusdd_dropdown {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    z-index: 1;
    background-color: #ffffff;
    border: 1px solid #e9e9f4;
    border-radius: 10px;
    max-height: 260px;
    overflow: auto;
    opacity: 0;
    visibility: hidden;
    display: block !important;
    inset: inherit !important;
    width: 100%;
    box-shadow: 0px 3px 16.4px rgba(0, 0, 0, 0.13);
    -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) !important;
    -moz-transform: translateY(-10px) !important;
    transform: translateY(-10px) !important;
}
.sp_social_cusdd_dropdown>ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.sp_social_cusdd_dropdown>ul>li {
    display: block;
}
.sp_social_cusdd_dropdown>ul>li>a {
    color: inherit;
    padding: 8px 10px;
    display: grid;
    align-items: center;
    grid-template-columns: 40px auto;
}
.sp_social_cusdd_dropdown>ul>li>a:hover {
    color: var(--primaryColor);
    background-color: rgba(var(--main-color-rgb), 0.05);
}
/* .sp_social_cusdd_dropdown > ul > li > a:hover .sp_social_dd_initial{
    background-color: var(--primaryColor);
    color: #ffffff;
} */
.sp_social_cusdd_dropdown.show,
.sp_social_custom_dd_wrapper.open .sp_social_cusdd_dropdown {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateY(-1px) !important;
    -moz-transform: translateY(-1px) !important;
    transform: translateY(-1px) !important;
    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;
}
/* text AI start */
.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;
}
.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: 6px;
    padding: 4px 10px;
    color: var(--primaryColor);
    font-weight: 600;
    cursor: pointer;
    position: absolute;
    bottom: 6px;
    right: 6px;
    z-index: 11;
    font-size: 12px;
}
.sp_cal_textai_btn_label>.sp_cal_textai_btn>svg path {
    fill: var(--primaryColor);
}
.sp_cal_textai_btn_label>.sp_cal_textai_btn .image_ai_tag {
    top: -10px;
}
.sp_cal_textai_content_wrapper {
    padding: 15px;
    border-radius: 15px;
    border: 1px solid #E7E7E7;
}
.sp_cal_textai_content_wrapper>h3 {
    font-size: 13px;
    margin: -3px -15px;
    margin-bottom: 15px;
    padding: 0 15px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    border-bottom: 1px solid #E7E7E7;
    padding-bottom: 12px;
}
.sp_cal_textai_content_wrapper>h3 .sp_back_arrow {
    position: relative;
}
.sp_cal_textai_content_wrapper .mgi_ck_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;
    scrollbar-width: thin;
}
.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(--primaryColor);
}
/* text AI end */
/* datetime picker start */
.xdsoft_datetimepicker {
    border: none;
    padding: 0;
    font-family: inherit;
}
.xdsoft_datetimepicker.xdsoft_inline{
    display: grid;
    align-items: flex-start;
    grid-template-columns: 1fr 70px;
    margin-bottom: 10px;
    gap: 10px;
}
.xdsoft_datetimepicker .xdsoft_datepicker {
    margin-left: 0;
    width: 100%;
}
.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(--primaryColor) !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(--primaryColor) !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(--primaryColor) !important;
    box-shadow: none;
    color: #ffffff !important;
}
.xdsoft_datetimepicker .xdsoft_label>.xdsoft_select>div>.xdsoft_option:hover {
    background: transparent;
    color: var(--primaryColor);
}
.xdsoft_datetimepicker .xdsoft_label>.xdsoft_select.xdsoft_monthselect {
    left: 0px;
}
.xdsoft_datetimepicker .xdsoft_timepicker {
    width: 100%;
    margin-left: 0px;
}
.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 */
.mgi_ck_social_schedule_toggler{
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-dark1);
    width: 100%;
    margin-bottom: 12px;
    border: 1px solid var(--line-color-input);
    padding: 0 16px;
    cursor: pointer;
}
.mgi_ck_social_schedule_toggler > .mgi_ck_social_schedule_toggler_text{
    display: flex;
    align-items: center;
    gap: 8px;
}
.mgi_ck_social_schedule_toggler > .mgi_ck_social_schedule_toggler_switch > .mgi_ck_sst_switch_bar{
    width: 27px;
    height: 14px;
    background-color: var(--color-light4);
    border-radius: 30px;
    padding: 2px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.mgi_ck_social_schedule_toggler > .mgi_ck_social_schedule_toggler_switch > .mgi_ck_sst_switch_bar > .mgi_ck_sst_switch_handle{
    width: 10px;
    height: 10px;
    background-color: #FFFFFF;
    border-radius: 30px;
}
.mgi_ck_social_schedule_toggler:hover{
    border-color: var(--primaryColor);
}
.mgi_ck_social_schedule_toggler.active{
    border-color: var(--primaryColor);
    background-color: rgba(var(--main-color-rgb), 0.04);
}
.mgi_ck_social_schedule_toggler.active > .mgi_ck_social_schedule_toggler_switch > .mgi_ck_sst_switch_bar{
    background-color: var(--primaryColor);
    justify-content: flex-end;
}
/* Publish post popup end */
.mgi_ck_publisher_post_type_list{
    display: flex;
    align-items: center;
    gap: 20px;
    margin-right: 20px;
}
.mgi_ck_publisher_post_type_list > .mgi_ck_pptl_item{
    padding: 8px 0;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-dark1);
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}
.mgi_ck_publisher_post_type_list > .mgi_ck_pptl_item > span{
    width: 12px;
    height: 12px;
    border-radius: 12px;
    background-color: var(--primaryColor);
}
.mgi_ck_publisher_post_type_list > .mgi_ck_pptl_item.published > span{
    background-color: #3BBA48;
}
.mgi_ck_publisher_post_type_list > .mgi_ck_pptl_item.draft > span{
    background-color: #FBAB25;
}
.mgi_ck_publisher_post_type_list > .mgi_ck_pptl_item:hover{
    color: var(--primaryColor);
}
.mgi_ck_publisher_post_type_list > .mgi_ck_pptl_item.active{
    color: var(--primaryColor);
    font-weight: 700;
    box-shadow: 0px 2px 0px;
}
/* Calendar Post List Start */
.mgi_ck_cal_post_list_wrapper{
    width: 100%;
    position: relative;
    z-index: 1;
}
.mgi_ck_cal_post_wrapper{
    border: 1px solid var(--line-color-input);
    border-radius: 5px;
    padding: 10px;
    text-align: left;
    margin-top: 10px;
    background-color: #FFFFFF;
    position: relative;
}
.mgi_ck_cal_post_wrapper.scheduled,
.mgi_ck_cal_post_wrapper.draft{
    cursor: pointer;
}
.mgi_ck_cal_post_wrapper:first-child{
    margin-top: 0;
}
.mgi_ck_cal_post_wrapper > .mgi_ck_cal_post_remove{
    position: absolute;
    top: -6px;
    right: -6px;
    width: 16px;
    height: 16px;
    border-radius: 16px;
    background-color: #F44336;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    z-index: 2;
}
.mgi_ck_cal_post_wrapper:hover > .mgi_ck_cal_post_remove{
    opacity: 1;
    visibility: visible;
}
.mgi_ck_cal_post_wrapper > .mgi_ck_cal_post_remove svg{
    width: 8px;
    height: auto;
    color: #FFFFFF;
}
.mgi_ck_cal_post_wrapper > .mgi_ck_post_click{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 5px;
}
.mgi_ck_cal_post_wrapper.published > .mgi_ck_cal_post_remove{
    display: none;
}
.mgi_ck_cal_post_wrapper > .mgi_ck_cal_post_design{
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 10px;
    margin-bottom: 10px;
}
.mgi_ck_cal_post_wrapper > .mgi_ck_cal_post_design > .mgi_ck_cal_post_design_icon > img{
    width: 40px;
    height: 40px;
    border-radius: 2px;
    object-fit: cover;
}
.mgi_ck_calendar_inner.month_view .mgi_ck_cal_post_list_wrapper > .mgi_ck_cal_post_wrapper:nth-child(2) ~ .mgi_ck_cal_post_wrapper{
    display: none;
}
.mgi_ck_cal_post_design_details{
    overflow: hidden;
}
.mgi_ck_cal_post_design_details > p{
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin: 0;
    font-size: 13px;
    color: var(--color-dark1);
    font-weight: 500;
}
.mgi_ck_cal_post_wrapper > .mgi_ck_cal_post_hover > .mgi_ck_cal_post_design_details{
    display: none;
    margin-bottom: 8px;
}
.mgi_ck_cal_post_status_type{
    position: relative;
    margin-bottom: 10px;
}
.mgi_ck_cal_post_status_type > .mgi_ck_cal_post_status{
    height: 25px;
    border-radius: 3px;
    padding: 6px 10px;
    color: var(--primaryColor);
    background-color: rgba(var(--main-color-rgb), 0.1);
    font-size: 11px;
    font-weight: 600;
    box-shadow: -3px 0px 0px;
}
.mgi_ck_cal_post_wrapper.draft .mgi_ck_cal_post_status_type > .mgi_ck_cal_post_status{
    color: #FBAB25;
    background-color: rgba(251, 172, 37, 0.1);
}
.mgi_ck_cal_post_wrapper.published .mgi_ck_cal_post_status_type > .mgi_ck_cal_post_status{
    color: #3BBA48;
    background-color: rgba(59, 186, 72, 0.1);
}
.mgi_ck_cal_post_status_type > .mgi_ck_cal_post_type{
    position: absolute;
    top: 0;
    right: 0;
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mgi_ck_cal_post_status_type > .mgi_ck_cal_post_type > img{
    width: 15px;
}
.mgi_ck_cal_post_datetime{
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--color-light1);
    font-weight: 500;
}
.mgi_ck_cal_post_datetime > svg{
    width: 12px;
    height: auto;
}
.mgi_ck_cal_post_view_more{
    text-align: center;
    display: block;
    width: 100%;
    color: var(--primaryColor);
    font-size: 11px;
    font-weight: 600;
    padding: 2px;
    cursor: pointer;
}
.mgi_ck_calendar_inner:not(.month_view) .mgi_ck_cal_post_view_more{
    display: none;
}
.mgi_ck_cal_post_list_wrapper.mgi_ck_more_post{
    padding-right: 8px;
    margin-right: -8px;
    width: -webkit-fill-available;
    max-height: 265px;
    overflow: auto;
    scrollbar-width: thin;
}
.mgi_ck_calendar_inner.month_view .mgi_ck_cal_post_list_wrapper.mgi_ck_more_post > .mgi_ck_cal_post_wrapper:nth-child(2) ~ .mgi_ck_cal_post_wrapper{
    display: block;
}
.mgi_ck_cal_post_list_wrapper.mgi_ck_more_post + .mgi_ck_cal_post_view_more{
    opacity: 0;
    visibility: hidden;
}
.mgi_ck_calendar_inner.day_view .mgi_ck_cal_post_list_wrapper{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    align-items: flex-start;
    gap: 10px;
}
.mgi_ck_calendar_inner.day_view .mgi_ck_cal_post_list_wrapper > .mgi_ck_cal_post_wrapper{
    margin-top: 0;
}
/* Calendar Post List End */
.mgi_ck_calendar_post_hover_preview{
    position: fixed;
    top: 0;
    left: 0;
    max-width: 160px;
    z-index: 20;
    background-color: #ffffff;
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0px 3px 16.4px rgba(0, 0, 0, 0.13);
    transform: translateY(calc(-100% - 6px));
    pointer-events: none;
    display: none;
}
.mgi_ck_calendar_post_hover_preview .mgi_ck_cal_post_design_details{
    margin-bottom: 8px;
}
@media(max-width:1140px) {
    .mgi_ck_cal_post_hover{
        display: none;
    }
    .mgi_ck_cal_post_list_wrapper{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        align-items: flex-start;
        gap: 6px;
    }
    .mgi_ck_cal_post_wrapper{
        width: 42px;
        height: 42px;
        padding: 0px;
        border-radius: 6px;
        margin: 0 auto;
    }
    .mgi_ck_cal_post_wrapper > .mgi_ck_cal_post_design > .mgi_ck_cal_post_design_icon > img{
        border-radius: 6px;
    }
    .mgi_ck_cal_post_wrapper::before{
        content: "";
        position: absolute;
        left: 6px;
        right: 6px;
        bottom: -2px;
        height: 4px;
        border-radius: 8px;
        background-color: var(--primaryColor);
        box-shadow: 0px 0px 0px 2px #FFFFFF;
    }
    .mgi_ck_cal_post_wrapper.published::before{ background-color: #3BBA48; }
    .mgi_ck_cal_post_wrapper.draft::before{ background-color: #FBAB25; }
    .mgi_ck_cal_post_wrapper > .mgi_ck_cal_post_design{
        margin-bottom: 0;
        grid-template-columns: 1fr;
    }
    .mgi_ck_cal_post_wrapper > .mgi_ck_cal_post_design .mgi_ck_cal_post_design_details{
        display: none;
    }
    .mgi_ck_cal_post_wrapper > .mgi_ck_cal_post_hover > .mgi_ck_cal_post_design_details{
        display: block;
    }
    .mgi_ck_calendar_post_hover_preview:not(.hide){
        display: initial !important;
    }
}
@media(max-width:980px) {
    .sp_cal_post_design_create{
        padding: 20px;
    }
    .sp_cal_pdc_inner{
        gap: 20px;
        grid-template-columns: 60% calc(40% - 20px);
    }
}
@media(max-width:768px) {
    .sp_cal_post_design_create{
        padding: 20px;
    }
    .sp_cal_pdc_inner{
        gap: 20px;
        grid-template-columns: 100%;
    }
    .mgi_ck_popup_upload_wrapper{
        grid-template-columns: 1fr;
    }
    .mgi_ck_publisher_selected_items{
        grid-template-columns: 1fr 1fr;
    }
    .mgi_ck_cal_post_list_wrapper{
        grid-template-columns: repeat(1, 1fr);
    }
    .mgi_ck_date{
        font-size: 11px;
    }
}
/********************************************************************************************* 
14. Publisher end
*********************************************************************************************/
/* Training Page Css */
div#v-pills-tabContent {
    max-width: calc(100% - 300px);
    width: 100%;
}
.mgi_tutorialWrapper .nav.nav-pills {
    border: 1px solid #DFDFE0;
    max-width: 300px;
    width: 100%;
    gap: 15px;
    border-radius: 15px;
    padding: 20px;
    margin-right: 25px !important;
}
.mgi_tutorialWrapper .nav-pills .nav-link {
    font-size: 18px;
    font-weight: 700;
    line-height: 22px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    width: 100%;
    padding: 11px 20px;
    margin-bottom: 15px;
}
.mgi_tutorialWrapper .nav-pills .nav-link.active, 
.mgi_tutorialWrapper .nav-pills .show > .nav-link {
    color: var(--whiteColor);
    background-color: var(--primaryColor);
}
.mgi_tranningItems {
    max-width: 100%;
    border: 1px solid #DFDFE0;
    background: #F8F9FA;
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 15px;
}
.mgi_tranningItems >video {
    max-width: 100%;
    border-radius: 15px;
    background: #DDDDDD;
}
.mgi_tranningItems h4 {
    font-size: 15px;
    font-weight: 700;
    line-height: 18.15px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    margin-top: 15px;
    padding: 0px 10px;
}
.mgi_doc_box {
    border: 1px solid #dfdfe0;
    border-radius: 10px;
    background: #F8F9FA;
    padding: 10px;
    display: grid;
    grid-template-columns: 1fr 30px;
    align-items: center;
    width: 100%;
}
.mgi_doc_box h4{
    margin: 0px;
    font-size: 14px;
    font-weight: 700;
}
.mgi_doc_box > a{
    color: var(--darkColor);
}
.mgi_doc_box > a:hover{
    color: var(--primaryColor);
}
.mgi_accordianSetting.accordion .accordion-button {
    display: flex;
    position: relative;
    cursor: pointer;
    padding: 14px 14px 14px 14px;
    background: #f6f6f6;
    border-radius: 8px 8px 0 0;
    color: var(--darkColor);
    font-weight: bold;
    font-size: 14px;
}
.mgi_accordianSetting.accordion .accordion-button:not(.collapsed),
.mgi_accordianSetting.accordion .accordion-button:not(.collapsed)::after {
    color: var(--primaryColor);
}
.mgi_accordianSetting.accordion .accordion-collapse .accordion-body{
    padding: 10px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 20px;
}
.mgi_accordianSetting.accordion .accordion-item {
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    margin: 0 0 10px;
    color: #717171;
}
/* End Training Page Css */
.mgi_sliderList .mgi_imgListItem{
    height: 160px;
}
.mgi_sliderList .mgi_imgListItem img {
    object-fit: cover;
    object-position: top center;
    max-height: 160px;
    margin: 0 auto;
    width: 100%;
}
.mgi_sliderList .mgi_imgListItem.active{
    box-shadow: 0px 0px 0px 1px var(--primaryColor);
}
/* Modern Filled Tabs */
.modern-tabs {
    background: white;
    padding: 0;
    /* border-radius: 1rem; */
    /* box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.08); */
}
.modern-tabs .nav-tabs {
    border: none;
    gap: 20px;
    margin-bottom: 25px;
}
.modern-tabs .nav-link {
    border-radius: 0.5rem;
    font-weight: 500;
    color: var(--darkColor);
    transition: all 0.3s ease;
    border: 1px solid #b9b9b9;
    font-size: 16px;
    padding: 7px 20px;
}
.modern-tabs .nav-link:hover,
.modern-tabs .nav-link.active {
    color: var(--primaryColor);
    background: #f0f3fc;
    border-color: #f0f3fc;
}
/* Content Animation */
.modern-tabs .tab-pane.fade {
    transition: all 0.2s ease-out;
}
.modern-tabs .tab-pane.fade.show {
    animation: fadeIn 0.5s ease-out;
}
.mgi-tab-section {
    border: 1px solid #dfdfe0;
    padding: 30px 40px;
    border-radius: 16px;
}
.mgi-input-field label {
    font-weight: 700;
    font-size: 14px;
    margin: 0px 0px 6px;
    display: block;
    width: 100%;
    color: #1f2328;
}
.mgi-whitelabel-box .mgi-input-field input[type="file"] {
    padding: 9px 20px;
}
.mgi-input-field .mgi_colorPicker_wrap input{
    padding: 0 0 0 15px;
}
.mgi-imgupload-box.mgi-avatar-update {
    background: #fdfdfd;
    border-radius: 5px;
    padding: 10px 20px;
    border: 1px solid #dfdfe0;
    width: 100%;
    align-items: center;
    grid-template-columns: 1fr 120px;
    position: relative;
    display: grid;
    grid-gap: 20px;
    margin: 0 0 40px;
    text-align: center;
}
.mgi-imgupload-box.mgi-avatar-update .mgi-avatar-preview {
    width: fit-content;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    height: fit-content;
}
.mgi-imgupload-box.mgi-avatar-update .mgi-avatar-preview>img {
    max-height: 60px;
    border-radius: 0px;
    width: auto;
    height: auto;
    object-fit: contain;
}
.mgi-input-field.lable-link label {
    display: flex;
    flex-wrap: wrap;
    grid-gap: 10px;
    justify-content: space-between;
}
.mgi-input-field.lable-link label a {
    color: var(--primaryColor);
}
.mgi-whitelabel-box .mgi-input-field input[type=file] {
    padding: 9px 20px;
}
.mgi-avatar-update .avatar-edit input {
    display: none;
}
.mgi-admin-settings {
    border: 0;
    border-radius: 16px;
    max-width: 580px;
}
.mgi-input-note {
    margin: 4px 0 25px;
    font-size: 13px;
    color: #a1a1a1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    grid-gap: 6px;
    font-weight: 400;
}
.whitelabel-user-list .mgi-tab-section,
.whitelabel-custom-domain .mgi-tab-section {
    max-width: 100%;
}
.mgi-notification-box {
    background: #F0F3FC;
    color: var(--primaryColor);
    border: 1px solid #e3eaff;
    border-radius: 5px;
    margin: 0 0 20px;
    padding: 10px 20px;
}
.mgi-page-title {
    margin: 0 0 10px;
    display: flex    ;
    flex-wrap: wrap;
    align-items: center;
    margin: 0 0 20px;
    grid-gap: 20px;
    justify-content: space-between;
}
.mgi-page-title h2 {
    font-size: 16px;
}
.btn-lg {
    min-width: 130px;
    min-height: 40px;
}
.btn-xl {
    min-height: 50px;
}
.mgi-page-title h2 {
    font-weight: 700;
    font-size: 20px;
}
.mgi-head-widget {
    display: inline-flex;
    grid-gap: 20px;
    max-width: 480px;
    width: 100%;
    justify-content: flex-end;
}
.mgi-head-widget .mgi-input-field {
    max-width: 300px;
}
.mgi-filter-menu li {
    display: flex;
}
.mgi-input-field label.mgi-label-lg {
    font-size: 16px;
}
div#AgencyCreatmodal .mgi-input-field input {
    margin-bottom: 25px;
}
.error-message {
    color: red;
    font-size: 12px;
    margin-top: 5px;
    position: relative;
    bottom: 20px;
}
/* Profile Page Upload Img CSS */
.mgi-avatar-update .avatar-edit input {
    display: none;
}
.mgi-avatar-update .mgi-avatar-preview {
    width: 75px;
    height: 75px;
    border-radius: 100%;
    background: #f5f5f5;
    margin: 0;
    border: 2px solid var(--whiteColor);
    box-shadow: 0 2px 18px 0 rgb(0 0 0 / 25%);
}
.mgi-avatar-update .mgi-avatar-preview>div {
    width: 100%;
    height: 100%;
    border-radius: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.mgi-avatar-update .mgi-avatar-preview>img {
    width: 100%;
    height: 100%;
    border-radius: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.avatar-edit label {
    font-weight: 700;
    cursor: pointer;
    color: var(--primaryColor);
    border: 1px solid var(--primaryColor);
    border-radius: 6px;
    padding: 9px 15px;
    display: inline-block;
    margin-bottom: 0px;
}
.mgi-tab-section {
    border: 1px solid #dfdfe0;
    padding: 30px 40px;
    border-radius: 16px;
    max-width: 1090px;
}
.max-100 {
    max-width: 100% !important;
}
.mgi-avatar-update {
    position: relative;
}
.mgi-avatar-update {
    position: relative;
    display: grid;
    grid-template-columns: 80px 140px 140px;
    grid-gap: 20px;
    align-items: center;
    margin: 0 0 40px;
    text-align: center;
}
.mgi-avatar-update .border-btn {
    padding: 9px 15px;
    font-weight: 700;
}
.mgi-col-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 0 30px;
}
.mgi-input-field.mgi-input-inline {
    margin: 0 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
}
.mgi-input-field.mgi-input-inline label {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    color: var(--darkColor);
    display: flex;
    width: max-content;
    gap: 10px;
    align-items: center;
    justify-content: start;
    width: 120px;
}
.mgi-input-field.mgi-input-inline select,
.mgi-input-field.mgi-input-inline input {
    min-height: 35px;
    height: 35px;
    border-radius: 10px;
}
.mgi-timer-divider {
    border-bottom: 1px solid #dfdfe0;
    margin: 5px -20px 20px;
}
/******* ColorPicker Css ***********/

.mgi_colorPicker_wrap {
    width: calc(100% - 130px);
    border: 1px solid #cccc;
    border-radius: 10px;
    padding: 0px 0px;
    position: relative;
    height: 37px;
}
.mgi_colorPicker_wrap input {
    border: 0px !important;
    padding: 0 10px 0px 15px;
    width: fit-content;
    min-width: 90px;
    max-width: 90px;
}
.mgi_colorPicker_wrap .sp-replacer.sp-light {
    background-color: transparent;
    border: 0px;
    padding: 0;
    width: calc(100% - 90px);
    height: 36px;
    position: relative;
    top: -1px;
}
.mgi_colorPicker_wrap .sp-dd {
    display: none;
}
.mgi_colorPicker_wrap .sp-preview {
    width: 100%;
    line-height: 35px;
    height: 35px;
    border-radius: 10px;
    border: 0px;
    overflow: hidden;
    box-shadow: 0 0 0 1px #dfdfe0;
}
.mgi_colorPicker_wrap .sp-preview-inner {
    border-left: 1px solid #dfdfe0 !important;
    overflow: hidden;
}
.mgi_colorPicker_wrap input {
    outline: none !important;
}
div#apk_hide_password input#ApiKey {
    margin-bottom: 0;
}
.mgi-saveBtn, .sp-choose{
    padding: 6px 15px;
    align-items: center;
    display: inline-flex;
    text-align: center;
    min-width: 100px;
    color: var(--buttonTextColor) !important;
    background: var(--buttonBgColor) !important;
    font-weight: 700;
    position: relative;
    justify-content: center;
    overflow: hidden;
    border: none;
    border-radius: 7px !important;
    grid-gap: 6px;
    min-height: 40px;
    font-size: 13px;
    border: 0px !important;
    text-transform: capitalize;
}
.mgi-saveBtn:hover, .sp-choose:hover {
    background: var(--secondaryColor) !important;
    color: var(--buttonTextColor) !important;
}
.mgi-input-field.mgi-global-color-title {
    margin-bottom: 10px;
}
.sp-container {
    border-radius: 10px !important;
    background-color: #ffffff !important;
    border: solid 1px var(--line-color-input) !important;
    padding: 0;
}
.sp-choose, .sp-cancel{
    text-transform: capitalize !important;
}
.sp-picker-container{
    width: 250px !important;
    padding-bottom: 10px !important;
}
span.sp-original-input-container {
    width: 100% !important;
    position: relative;
}
.mgi_checkboxWrapper.mgi_select_all_btn {
    min-width: 85px;
}
span.sp-original-input-container input.colorPicker.spectrum {
    position: absolute;
    width: 100%;
    z-index: 11;
    max-width: 100%;
    background-color: transparent;
}
.sp-colorize-container.sp-add-on {
    order: 2;
    width: calc(100% - 80px) !important;
    border-radius: 10px !important;
    height: 35px;
    position: absolute;
    right: 0;
    z-index: 10;
    box-shadow: 0px 0px 2px #c9c9c9;
}
/** End Modern Tab **/
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}  
.mgi-input-field input,
.mgi-input-field select {
    width: 100%;
    min-height: 40px;
    color: var(--darkColor);
    padding: 5px 20px;
    border-radius: 10px;
    color: var(--darkColor);
    font-weight: 500;
    border: 1px solid #dedede;
}
.mgi-input-field textarea {
    width: 100%;
    min-height: 130px;
    padding: 15px 20px;
    color: var(--darkColor);
    border-radius: 6px;
    border: 1px solid #dedede;
    font-weight: 500;
}
.mgi-input-field select {
    color: #a1a1a1;
    color: var(--darkColor);
    /* font-weight: 500; */
}
.mgi-input-field input:focus,
.mgi-input-field select:focus,
.mgi-input-field textarea:focus {
    border-color: var(--primaryColor);
}
.mgi-input-field input,
.mgi-input-field input:focus,
.mgi-input-field select,
.mgi-input-field select:focus {
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
.mgi-input-field .mgi-input-has-icon input {
    padding-right: 60px;
    outline: none;
}
.mgi-input-has-icon{
    position: relative;
}
.mgi-input-has-icon img {
    position: absolute;
    right: 20px;
    top: 0;
    bottom: 0;
    margin: auto;
}
.mgi-input-field input::-webkit-input-placeholder,
.mgi-input-field input::-webkit-textarea-placeholder {
    /* Chrome/Opera/Safari */
    color: #a1a1a1;
    color: #757575;
}
.mgi-input-field input::-moz-placeholder,
.mgi-input-field textarea::-moz-placeholder {
    /* Firefox 19+ */
    color: #a1a1a1;
    color: #757575;
}
.mgi-input-field input:-ms-input-placeholder,
.mgi-input-field input:-ms-textarea-placeholder {
    /* IE 10+ */
    color: #a1a1a1;
    color: #757575;
}
.mgi-input-field input:-moz-placeholder,
.mgi-input-field textarea:-moz-placeholder {
    /* Firefox 18- */
    color: #a1a1a1;
    color: #757575;
}
.mgi-pws-icon {
    cursor: pointer;
}
.mgi-from-box .mgi-btn {
    margin: 30px 0 25px;
}
.mgi-btn {
    padding: 6px 15px;
    align-items: center;
    display: inline-flex;
    text-align: center;
    color: var(--whiteColor) !important;
    background: var(--primaryColor);
    font-weight: 700;
    position: relative;
    justify-content: center;
    overflow: hidden;
    border: none;
    border-radius: 6px;
    grid-gap: 6px;
    font-size: 13px;
    transition: all 0.3s;
    height: 44px;
}
.mgi-btn:hover {
    background: var(--darkColor);
    color: var(--whiteColor);
}
.mgi-auth-note p {
    font-size: 16px;
}
.mgi-link {
    color: var(--primaryColor);
}
/* Table style  */
.mgi-table-responsive {
    width: 100%;
    overflow: auto;
    border: 1px solid var(--line-color-input);
    border-radius: 10px;
}
.mgi-table-responsive table {
    width: 100%;
    border-spacing: 0;
}
.mgi-table-responsive table thead {
    background: #f6f7fb;
}
.mgi-table-responsive table tr th{
    color: var(--darkColor);
}
.mgi-table-responsive table tr td{
    color: #1f2328;
}
.mgi-table-responsive table tr th,
.mgi-table-responsive table tr td {
    padding: 9px 20px;
    text-align: left;
    font-size: 14px;
    border-bottom: 0px !important;
}
.mgi-table-responsive table thead tr th:first-child {
    border-radius: 10px 0 0 0;
}
.mgi-table-responsive table thead tr th:last-child {
    border-radius: 0 10px 0 0;
}
.mgi-table-responsive table tbody tr:last-child td:first-child {
    border-radius: 0 0 0 10px;
}
.mgi-table-responsive table tbody tr:last-child td:last-child {
    border-radius: 0 0 10px 0;
}
.text-center {
    text-align: center !important;
}
.mgi-budget {
    background: #D4E0FF;
    color: #000;
    font-size: 12px;
    padding: 4px 10px;
    display: inline-block;
    border-radius: 4px;
    min-width: 50px;
    font-weight: 600;
}
.mgi-table-responsive table tr td {
    font-size: 14px;
    padding: 12px 20px;
}
.mgi-table-action {
    position: relative;
    width: 20px;
    text-align: center;
    display: inline-block;
}
.mgi-table-dropdown {
    position: absolute;
    min-width: fit-content;
    right: 20px;
    text-align: left;
    border: 1px solid var(--line-color-input);
    border-radius: 7px;
    background: var(--whiteColor);
    visibility: hidden;
    opacity: 0;
    z-index: 2;
    padding: 2px;
    top: 0;
    white-space: nowrap;
}
.mgi-table-dropdown.show {
    opacity: 1;
    visibility: visible;
}
.mgi-table-dropdown.show,
.mgi-table-dropdown {
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
.mgi-table-dropdown ul li {
    color: var(--darkColor);
    padding: 3px 15px;
    min-height: 31px;
    display: flex;
    align-items: center;
    cursor: pointer;
}
.mgi-table-dropdown ul li span {
    display: block;
}
.mgi-table-dropdown ul li:hover {
    background: #F8F9FA;
    color: var(--darkColor);
}
.mgi-table-dropdown ul li:hover,
.mgi-table-dropdown ul li {
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
.mgi-action-icon {
    width: 20px;
    display: inline-block;
    cursor: pointer;
}
.mgi-view-more-link img {
    height: 8px;
    margin-left: 3px;
}
.mgi-table-wrapper {
    margin: 0 0 30px;
}
.mgi-view-more-link {
    color: #6F7782;
    font-size: 12px;
}
.text-right {
    text-align: right !important;
}
.col-sm {
    width: 90px;
}
.mgi-table-responsive table tbody tr:not(:last-child) td {
    border-bottom: 1px solid var(--line-color-input);
}
/* Switch */
.mgi-switch-label input[type=checkbox] {
    height: 0;
    width: 0;
    visibility: hidden;
    min-height: initial;
    padding: 0;
    border: 0;
    position: absolute;
    left: 0;
    top: 0;
}
.mgi-switch-label {
    display: flex;
    gap: 10px;
}
.mgi-switch-label span {
    font-size: 14px;
    font-weight: 700;
    line-height: 16.94px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: var(--darkColor);
}
.mgi-btn-wrap {
    margin-top: 20px;
}
.mgi-switch-label label {
    cursor: pointer;
    text-indent: -9999px;
    width: 32px;
    height: 17px;
    background: var(--line-color-input);
    display: block;
    border-radius: 100px;
    position: relative;
}
.mgi-switch-label label:after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 13px;
    height: 13px;
    background: var(--whiteColor);
    border-radius: 90px;
    transition: 0.3s;
}
.mgi-switch-label input:checked+label {
    background: var(--primaryColor);
}
.mgi-switch-label input:checked+label:after {
    left: calc(100% - 2px);
    transform: translateX(-14px);
}
.mgi-has-switch {
    padding-right: 150px;
    position: relative;
}
.mgi-has-switch .mgi-switch-label {
    position: absolute;
    right: 5px;
    top: 5px;
}
.mgi_backPage {
    font-size: 13px;
    font-weight: 600;
    line-height: 15.73px;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: var(--darkColor);
    width: 82px;
    height: 38px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #F2F6FF;
}
.action-btns>span {
    cursor: pointer;
}
.mgi_checkboxWrapper {
    min-width: 80px;
    display: flex;
    gap: 10px;
}
/** 
==============================================
    Remove Sidebar 
=============================================
**/
.mgi_dashboard_fullHeader nav.mgi_editorSidebar, 
.mgi_rightBarLogo > .otherHide{
    display: none !important;
}
.mgi_dashboard_fullHeader .mgi_rightBarLogo > .otherHide{
    display: block !important;
}
.mgi_dashboard_fullHeader .mgi_rightBarLogo {
    display: flex !important;
    width: 100%;
    max-width: calc(100% - 230px);
    align-items: center;
    justify-content: start;
    gap: 30px;
}
.mgi_dashboard_fullHeader .mgi_rightSection_wrapper {
    max-width: calc(100% - 0px);
    width: 100%;
}
.mgi_rightBarLogo img {
    height: 30px;
    width: auto;
}
.mgi_dashboard_fullHeader .mgi_header {
    display: flex;
    flex-wrap: nowrap;
    gap:10px;
}
div#spj_confirm_popup {
    z-index: 99999;
    background-color: rgba(0 0 0 / 20%);
}
.zoom_control {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid #e4e4e4;
    padding: 7px 10px;
    border-radius: 8px;
}
.mpj_zoom_number {
    margin: 0;
    line-height: 30px;
    color: var(--darkColor);
}
.mgi_adminHead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-top: 0;
    margin-bottom: 20px;
    padding: 10px 25px;
    background-color: #F8F7FB;
    border-radius: 10px 10px 0 0;
    border: transparent;
}
.mgi_adminHead .mgi_checkBox_label {
    margin-bottom: 0;
	color: #444;
    width: auto;
}
.mgi_adminHead .mgi_labelHead {
    margin-bottom: 0;
}
.mgi_adminHead .mgi_checkbox_input:checked + span:before, 
form#agencyUserForm .mgi_checkbox_input:checked + span:before {
    top: 4px;
    left: 3px;
}
form#agencyUserForm .mgi_checkboxWrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: start;
    column-gap: 15px;
    margin-bottom: 20px;
    padding: 0px 20px;
}
form#agencyUserForm .mgi_checkBox_label span {
    width: 18px;
    height: 18px;
    border-radius: 5px;
}
form#agencyUserForm .mgi_adminHead .mgi_checkBox_label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    position: relative;
    color: #949494;
    max-width: 200px;
    justify-content: start;
    width: 100%;
}
form#agencyUserForm .mgi_adminHead .mgi_checkBox_label {
    width: auto;
}
form#agencyUserForm label.mgi_checkBox_label {
    width: 100%;
    justify-content: start;
    max-width: 200px;
}
div#upload_facefusion_image_div {
    margin-bottom: 30px !important;
}
/****************** Preview Modal Css *********************/
.previewModal .modal-dialog {
    max-width: 1356px !important;
}
.previewModal .swiper {
    width: 100%;
    overflow: visible;
}
.previewModal .swiper .mgi_modalContent {
    max-width: 1220px;
    margin: auto;
    padding: 30px;
    position: relative;
    border-radius: 15px;
}
.previewModal .modal-content {
    background-color: transparent;
}
.previewSwiper-button-next.swiper-button-disabled,
.previewSwiper-button-prev.swiper-button-disabled {
    display: none;
}
.previewModal .swiper-wrapper{
    align-items: center;
}
.previewSwiper-button-next, 
.previewSwiper-button-prev {
    top: calc(50% - 13px);
}
/************* Grid Galley Css *************/
.mgi_resentGrid_gallery .mgi_grid_item {
    gap: 8px;
}
.mgi_resentGrid_gallery .mgi_recentListItem .mgi_imgListItem {
    position: relative;
    height: auto;
    width: 100%;
    max-width: 100%;
}
.mgi_resentGrid_gallery.mgi_grid_layout .mgi_grid_item .mgi_imgGrig img {
    max-height: max-content;
    min-height: max-content;
    width: 100%;
    height: auto;
}
.mgi_resentGrid_gallery-sizer {
    float: left;
}
.mgi_resentGrid_gallery-item {
    float: left;
    max-width:calc(25% - 10px);
    width: 100%;
    padding: 5px;
}
.mgi_resentGrid_gallery {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}
.mgi_resentGrid_gallery .mgi_imgListItem img {
    object-fit: cover;
    object-position: top center;
    max-height: max-content;
    margin: 0 auto;
    width: 100%;
    height: auto;
}
@media (max-width: 1024px) {
    .mgi_resentGrid_gallery-sizer {
        width: 33.33%; /* For tablets */
    }
    .mgi_resentGrid_gallery-item{
        max-width: calc(33.3% - 10px);
    }
}
@media (max-width: 768px) {
    .mgi_resentGrid_gallery-sizer {
        width: 50%; /* For mobile */
    }
    .mgi_resentGrid_gallery-item{
        max-width: calc(50% - 10px);
    }
}
@media (max-width: 480px) {
    .mgi_resentGrid_gallery-sizer {
        width: 100%; /* For smaller devices */
    }
    .mgi_resentGrid_gallery-item{
        max-width: calc(100% - 0px);
    }
}


.mgi_backbtn_modal {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 4px;
    padding: 8px 15px;
    margin-right: 10px;
    border: 1px solid #e4e4e4;
    border-radius: 10px;
    color: #000 !important;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.3s;
}
.mgi_backbtn_modal .material-symbols-outlined{
	font-size: 15px;
	color: #000 !important;
}
.mgi_backbtn_modal:hover{
    border: 1px solid var(--primaryColor);
}
.mgi_backbtn_modal:hover,
.mgi_backbtn_modal:hover .material-symbols-outlined{
	color: var(--primaryColor) !important;
}
/*********** Preview Images ***************/
.mgi_magicAlex_thumbnailBox {
    display: flex !important;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center !important;
    gap: 5px;
    width: 100%;
    position: sticky;
    bottom: 0;
    z-index: 1;
}
.mgi_thumbnailItem_img.mgi_activeThumbnail{
    outline: 2px solid var(--primaryColor);
    overflow: hidden;
}
.mgi_thumbnailItem_img {
    position: relative;
    cursor: pointer;
    border-radius: 10px;
    outline: 1px solid transparent;
    border: 2px solid #fff;
    max-width: 130px;
    width:auto;
    overflow: hidden;
    max-height: 75px;
}
.mgi_thumbnailItem_img>img{
    max-height:75px;
}
/*****************************************/
.mgi_imageVariationsHolder {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 30px;
}
.mgi_imageVariationsHolder label {
    width: 100%;
    padding: 0px;
    display: inline-block;
    max-width:calc(25% - 8px);
    cursor: pointer;
}
.mgi_imageVariationsHolder .mgi_innerBox_radio {
    border: 1px solid #EBEBEB;
    background: var(--whiteColor);
    width: 100%;
    height: 43px;
    gap: 8px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.mgi_imageVariationsHolder .mgi_innerBox_radio p {
    font-size: 15px;
    color: #000;
}
div#varient_ratio_div{
    margin-top:20px;
}

/************ Downloaded Links ****************/
.mgi_downloaded_links {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 20px;
    flex-wrap: wrap;
    padding: 0;
}
.mgi_linksItems {
    background: #fdfdfd;
    border-radius: 5px;
    padding: 10px 20px;
    border: 1px solid #dfdfe0;
    max-width: calc(50% - 10px);
    align-items: center;
    grid-template-columns: 1fr 100px;
    position: relative;
    display: grid;
    grid-gap: 20px;
    margin: 0px;
    text-align: left;
    width: 100%;
}
.mgi_linkBox {
    font-weight: 700;
    cursor: pointer;
    color: var(--primaryColor);
    border: 1px solid var(--primaryColor);
    border-radius: 6px;
    padding: 9px 15px;
    display: inline-block;
    margin-bottom: 0px;
    text-align: center;
    transition: all 0.3s;
    width: fit-content;
}
.mgi_linkBox:hover{
    background-color: var(--primaryColor);
    color: #fff;
}
.mgi_linksItems h4 {
    text-align: left;
    margin: 0;
}
/********************************/
.profile-plans-buycredits .mgi_btn {
    width: fit-content;
    padding: 0px 20px;
    height: 35px;
    font-size: 12px;
    font-weight: 400;
    display: flex;
}
.col-6.profile-plans-buycredits.text-right {
    align-items: center;
    justify-content: end;
    display: flex;
}
.mgi_creditsList .modal_title {
    margin-bottom: 25px;
}
.mgi_creditsList .mgi_radioBtn {
    margin-bottom: 20px !important;
    width: 100%;
    flex-wrap: wrap;
}
.mgi_creditsList .mgi_radioBtn label{
    width: 100%;
}
.mgi_creditsList .mgi_radioBtn label b {
    background-color: #e6f6ff;
    color: var(--primaryColor);
    padding: 5px;
    border-radius: 5px;
    width: 50px;
    height: 30px;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    line-height: 22px;
}
div#mgi_buyCreditsModal a.close {
    right: 15px;
    position: absolute;
    top: 13px;
}
/********* Payment Status Page ************/
.mgi_statusIcon svg {
    width: 85px;
    height: 85px;
}
.mgi_statusIcon{
    margin-bottom: 30px;
}
.mgi_paymentStatus {
    display: flex;
    align-items: center;
    justify-content: center;
    max-height: calc(100vh - 80px);
    height: 100vh;
}
.mgi_paymentStatus h1 {
    font-weight: bolder;
    margin-bottom: 15px;
}
.mgi_paymentStatus .mgi_btn {
    width: fit-content;
    padding: 0px 30px;
    margin: 20px auto;
}
.mgi_paymentStatus p{
    font-size: 18px;
}
.mgi_paymentStatus p {
    font-size: 16px;
    max-width: 450px;
    width: 100%;
    line-height: 25px;
}
/***************** Table Design Css ****************/
.mgi_tableWrapper {
    background-color: var(--whiteColor);
    margin-top: 10px;
    padding: 35px 35px 35px 35px;
    border-radius: 10px;
    margin-bottom: 25px;
}
.mgi_tableWrapper h5 {
    margin-bottom: 20px;
    font-size: 16px;
}
.mgi_tabCreditLimit_box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    /*flex-wrap: wrap;*/
    margin-bottom: 15px;
}
.mgi_userCreditsBuy {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border: 1px solid #F1F1F1;
    padding: 3px;
    border-radius: 5px;
    max-width: fit-content;
    margin-bottom: 0px;
}
.mgi_userCreditsBuy .mgi_creditsWrap {
    border-top: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 0px;
    padding-left: 10px;
    padding-top: 0;
    padding-bottom: 0;
}
.mgi_userPlans_buyCredits .mgi_btn {
    font-size: 14px;
    font-weight: 400;
    padding: 0px 20px;
    height: 38px;
}
.mgi_tabCreditLimit_box .mgi-page-title {
    margin: 0 0 0px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    grid-gap: 10px;
    justify-content: space-between;
    width: 100%;
    max-width: calc(100% - 335px);
}
.action-btns {
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 15px;
}
.mgi_consistentCharacter_wrapper {
    border: 1px solid #EBEBEB;
    background: var(--whiteColor);
    width: 100%;
    height: auto;
    gap: 8px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px;
    gap: 20px;
    margin-bottom: 20px;
}
.mgi_consistentCharacter_wrapper h5 {
    margin: 0px;
    vertical-align: middle;
    line-height: 25px;
    font-size: 14px;
    font-weight: 700;
    text-align: left;
    color: var(--darkColor);
}
.mgi_unLockIcon {
    display: none; 
}
.mgi_consistentCharacter_wrapper> i {
    cursor: pointer;
}
/**
==========================================
    Responsive Css State
==========================================
**/
.mgi_overlayBody{display: none;}
@media(max-width:1780px){        
    .mgi_welcome_video {
        max-width: 480px;
    }
    .mgi_toolList {
        padding: 0 10px 10px;
    }
    .mgi_toolbarList{
        margin: 0px auto;
    }
}
@media(max-width:1580px){
    .mgi_welcomeSection {
        padding: 35px 30px 35px 30px;
        gap: 0px;
    }
    .mgi_welcome_video iframe{
        aspect-ratio: 16/10;
        max-width: 450px;
        height: auto;
    }
    .mgi_welCome_content {
        max-width: calc(100% - 450px);
        padding-right: 20px;
    }
    .mgi_toolbarList {
        margin: 0px auto;
    }
    .mgi-head-widget {
        max-width: fit-content;
    }
}
@media(max-width:1350px){
    .mgi_welCome_content {
        max-width: calc(100% - 350px);
        padding-right: 20px;
    }
    .mgi_welcome_video iframe{
        max-width: 350px;
    }
    .mgi_toolBar_holder {
        justify-content: center;
        align-items: center;
    }
    .mgi_toolbarList, .mgi_actionBtn {
        justify-content: center;
        margin: 0;
    }
    .mgi_tabCreditLimit_box .mgi-page-title {
        max-width: calc(100% - 0px);
        flex-wrap:wrap;
    }
}
@media(max-width:1200px){
    .tab-left {
        height: 130px;
        width: 100%;
    }
    .tab-right {
        padding: 40px 20px;
        height: fit-content;
    }
    .free-btn{
        width: fit-content;
        max-width: 240px;
        line-height: normal;
        height: auto;
        padding: 10px 10px;
        line-height: normal;
    }
    .mgi_upgradeOto .free-btn {
        height: auto;
        padding: 10px 10px;
        line-height: normal;
    }
    
    .mgi_upgradeOto .free-btn {
        height: auto;
        padding: 10px 10px;
        line-height: normal;
    }
}
@media(max-width:1150px){
    .mgi_designerItems {
        max-width: calc(50% - 15px);
    }
    .mgi_designerBox_list {
        gap: 30px;
    }
    .mgi_welCome_content {
        max-width: calc(100% );
        padding-right: 0px;
        text-align: center;
        width: 100%;
    }
    .mgi_welcome_video iframe{
        max-width: 100%;
        margin: auto;
        width: 100%;
    }
    .mgi_welcomeSection {
        background-size: 100%;
        background-repeat: no-repeat;
        text-align: center;
    }
    .mgi_welcomeSection p{
        max-width: 100%;
        width: 100%;
        text-align: center;
    }
    .mgi_welcomeSection h1{
        text-align: center;
    }
    .mgi_welcome_video {
        width: 100%;
        max-width: 100%;
    }
    
    .mgi_linksItems{
        max-width:100%;
    }
}
@media(max-width:1080px){
    .profile-innerTabList{
        padding: 10px;
    }
    .mgi_imagePlaceholder{
        height: calc(100vh - 200px);
    }
    .mgi-tab-section {
        padding: 15px;
    }
    .mgi-imgupload-box.mgi-avatar-update {
        padding: 10px 10px;
        grid-template-columns: 1fr 90px;
        grid-gap: 15px;
    }
    .avatar-edit label {
        width: fit-content;
    }
}
/************************************/
@media (min-width: 992px) {
	.crop__modal [data-kt-app-aside-fixed=true] .app-wrapper {
		margin-right: calc(var(--bs-app-aside-width) + var(--bs-app-aside-gap-start, 0px) + var(--bs-app-aside-gap-end, 0px));
	}	
	.crop__modal [data-kt-app-sidebar-fixed=true] .app-sidebar {
		position: fixed;
		z-index: 105;
		top: 0;
		bottom: 0;
		left: 0;
	}	
	.crop__modal [data-kt-app-sidebar-fixed=true][data-kt-app-header-fixed=true]:not([data-kt-app-sidebar-push-header=true]) .app-sidebar{
	}
	.crop__modal .app-sidebar {
		position: fixed;
		z-index: 105;
		top: 0;
		bottom: 0;
		left: 0;
	}
	.crop__modal [data-kt-app-sidebar-fixed=true][data-kt-app-header-fixed=true]:not([data-kt-app-sidebar-push-header=true]) .app-sidebar {
		top: 80px;
	}
	.app-header {
		height: 80px;
	}
	.crop__modal .app-sidebar { 
		width: 396px; 
	}
	.crop__modal .app-wrapper{
		margin-left: calc(var(--bs-app-sidebar-width2) + var(--bs-app-sidebar-gap-start, 0px) + var(--bs-app-sidebar-gap-end, 0px));	
	}
}
@media(max-width:991px){
    .mgi_rightFilter {
        width: 100%;
    }
    .mgi_designerItems {
        max-width: calc(100% - 0px);
    }
    .mgi_designerBox_list {
        gap: 0px;
    }
    .profile-model-image {
        width: 100%;
        margin-top: 0;
        margin-bottom: 16px;
    }
    .profile-left {
        padding: 20px 10px;
    }
    .profile-right {
        padding: 25px 20px;
    }
    .profile-details {
        padding: 35px 15px 35px
    }
    .profile-model-details {
        width: 100%;
    }
    .mgi_toolList {
        font-size: 12px;
        gap: 5px;
        padding: 0 10px 10px;
    }
    .mgi_tutorialWrapper .nav-pills .nav-link {
        font-size: 14px;
        line-height: 14px;
        margin-bottom: 5px;
    }
    .mgi_tutorialWrapper .nav.nav-pills {
        max-width: 100%;
        gap: 10px;
        padding: 10px;
        margin-right: 0px !important;
    }
    div#v-pills-tabContent {
        max-width: calc(100% - 0px);
    }
    .mgi_verticalTab {
        flex-wrap: wrap;
        gap: 20px;
    }
    .mgi_accordianSetting.accordion .accordion-collapse .accordion-body {
        grid-template-columns: repeat(1, 1fr);
    }
    /* .crop__modal .mgi_sideBar_menu.mgi_editorSidebar {
        left: -400px;
        position: fixed;
    }
    .crop__modal  .mgi_rightSection_wrapper {
        max-width: calc(100% - 0px);
    } */
    .crop__modal .app-sidebar {
        display: flex;
        width: 100%;
        min-width: 100%;
        margin: 0px;
        padding: 0px;
    }
    #imageModalContainer .app-sidebar .menu{
        padding: 0px;
    }
    input#Modaltoogle-menu.mgi_mobileHide {
        position: absolute;
        visibility: hidden;
        /* display: none; */
    }
    .mgi-col-2 {
        grid-template-columns: none;
        grid-gap: 0px;
    }
    .mgi-imgupload-box.mgi-avatar-update {
        grid-template-columns: 1fr 95px;
    }
    .mgi_toolbarList, .mgi_actionBtn {
        justify-content: start;
    }
    .mgi_header {
        padding: 0 10px;
    }
    .mgi_undoRedo_option, .mgi_profileMenu {
        gap: 5px;
    }
    .mgi_sideBar_menu.mgi_editorSidebar {
        max-width: 350px;
    }    
    .profile-right {
        width: calc(100% - 150px);
    }
    .profile-left {
        width: 150px;
    }
}
@media(max-width:768px){  
    .swiper-slide .mgi_toolList{
        max-width: 100%;
        width: 100%;
    }
    .mgi_logoHolder {
        padding: 15px 15px 15px;
    } 
    .mgi_sidebarMenu, .mgi_createbtn_sidebar {
        padding: 0px 15px;
    } 
    .mgi_designerItems {
        max-width: calc(50% - 15px);
    }
    .mgi_designerBox_list {
        gap: 30px;
    }
    .mgi_mainWrapper > input[type=checkbox]:checked ~ nav + .toogle-open {
        position: fixed;
        left: 0;
        right: 0;
        z-index: 100;
        background-color: rgba(0 0 0 / 0.5);
        top: 0;
        bottom: 0;
        display: block;
    }
    .mgi_mainWrapper > input[type=checkbox]:checked ~ label {
        opacity: 1;
        pointer-events: unset;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: rgb(0 0 0 / 50%);
        z-index: 100;
        width: 100%;
        height: 100%;
    }
    .mgi_mobileHide {
        display: flex !important;
    }
    .mgi_mobileShow {
        display: none !important;
    }
    .mgi_mainWrapper nav {
        position: fixed;
        height: 100%;
        width: 312px;
        left: -400px;
        overflow: hidden;
        transition: 0.3s ease;
        z-index: 101;
        padding-top: 15px;
    }
    .mgi_mainWrapper nav > .mgi_headerWrap .mgi_logoHolder label {
        top: 27px;
        position: absolute;
        right: 26px;
    }
    .mgi_logoHolder.mgi_mobileHide {
        display: flex;
        width: 100%;
        flex-direction: column;
        align-items: start;
        justify-content: center;
    }
    label.toogle-open.mgi_mobileHide > span {
        top: 12px;
    }
    .mgi_logoHolder .mgi_createbtn_sidebar {
        padding: 0;
        width: 100%;
    }
    label.toogle-close {
        display: block;
        position: relative;
        right: 0;
        top: 0;
        width: 30px;
        height: 1px;
        margin-left: 10px;
        cursor: pointer;
    }
    .mgi_rightSection_wrapper {
        max-width: calc(100% - 0px);
        width: 100%;
    }
    .mgi_mainWrapper > label{
        opacity: 1;
        z-index: 101;
    }
    .free-btn {
        width: 100%;
        max-width: 100%;
        padding: 10px 10px;
        line-height: 30px;
        flex-wrap: wrap;
    }
    .mgi_upgradeOto {
        display: flex;
        flex-wrap: wrap;
        max-width: 100%;
        width: 100%;
    }
    .mgi_upgradeOto .free-btn {
        height: auto;
        padding: 10px 10px;
        line-height: normal;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    .profile-list-model {
        font-size: 12px;
    }
    .profile-left {
        padding: 20px 10px;
    }
    .profile-details3, .profile-details {
        padding: 7px 10px 20px;
    }
    .mgi_header {
        height: fit-content;
        padding: 10px 15px 10px 50px;
    }
    .free-btn {
        margin-right: 0;
    }
    .mgi_modalBody {
        flex: 0 0 100%;
        flex-wrap: wrap;
    }
    .mgi_imageHolder > img {
        width: 100%;
        max-height: max-content;
    }
    .mgi_imageHolder,
    .mgi_imageContent_details,
    .mgi_portraitModalImage .mgi_imageHolder,
    .mgi_portraitModalImage .mgi_imageContent_details {
        max-width: 100%;
    }
    .mgi_creditsWrap {
        font-size: 9px;
        padding: 10px 10px;
    }
    .mgi_nameCredits {
        font-size: 12px;
    }
    .mgi_profileMenu .btn.dropdown-toggle > img {
        width: 35px;
        height: 35px;
        min-width: 35px;
    }
    .mgi_rightBarLogo img {
        height: 20px;
    }
    .mgi_toolBar_holder {
        justify-content: start;
    }
	.mgi_linksItems {
        max-width: 100%;
        grid-template-columns: 100%;
    }
}
@media(max-width:575px){    
    .mgi_designerItems {
        max-width: calc(100% - 0px);
    }
    .mgi_designerBox_list {
        gap: 0px;
    }
    .mgi_ck_publisher_tab_item{
        min-width: 70px;
    }
}
@media(max-width:480px){
    .btn-Continue {
        width: 100%;
    }
    .mgi_ck_publisher_post_type_list > .mgi_ck_pptl_item {
        font-size: 12px;
    }
    .mgi_ck_publisher_post_type_list{
        gap: 10px;
    }
    .mgi_ck_btn{
        padding: 0px 10px;
    }
}