/* Style START */
/* .main-wrapper {
    display: inline-block;
    background-color: var(--color-light-gray);
    width: 100%;
    height: 100%;
    min-height: 100dvh;
    overflow: hidden;

} */
.editing-option {
    margin: 25px auto;
}

/*---- new changes for project start ----*/

.pen-main-wrapper{
    padding-inline: 0;
}



/*---- new changes for project end ----*/

/* .option-ul {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 25px;
}
.option-icon svg { 
   width: 20px;
   height: 20px;
}
.option-icon svg path { 
    transition: .4s;
}
.option-icon:hover svg path, .option-icon.active svg path {
    fill: var(--color-primary);
} */
.project-title {
    color: #B2B6BF;
    font-size: 14px;
    margin-bottom: 15px;
    font-family: var(--font-book);
}

/* .canvas-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: calc(100dvh - 100px);
} */
.canvas-wrp {
    width: 100%;
    height: 360px;
    margin-bottom: 25px;
    background-color: var(--bs-white);
    box-shadow: 0px 3px 6px rgb(0 0 0 / 16%);
}

.projects-back-cont {
    background-image: url(../../../../../images/heading-bg/head-bg-project.png);
}

/* Button CSS START */
/* .btn-common,
.btn-remove,
.btn-error {
    font-family: var(--font-regular);
    font-size: 10px;
    color: var(--bs-white);
    background-color: var(--color-primary);
    border: 1px solid var(--color-primary);
    min-width: 140px;
    height: 45px;
    line-height: 45px;
    padding: 0 15px;
    border-radius: 50px;
    letter-spacing: .20px;
    text-transform: capitalize;
    transition: .4s;
} 

.btn-common:hover{
    color: var(--bs-white);
    background-color: var(--color-secondary);
    border-color: transparent;
}*/

.btn-secondary {
    background-color: var(--color-secondary);
    color: var(--bs-white);
    border-color: var(--color-secondary);
}

.btn-sm {
    min-width: 75px;
    height: 30px;
    padding: 0 0.5rem;
    font-size: 10px;
    line-height: 30px;
    background-color: var(--color-secondary);
    border-radius: 50px;
    color: var(--bs-white);
    border: 0;
    transition: .3s;
}

.daterangepicker .drp-buttons .btn-sm {
    line-height: normal;
}

.btn-sm:hover {
    background-color: var(--color-blue-gray);
    color: var(--bs-white);
}

/* Button CSS END */

.switches-container {
    background: var(--bs-white);
    /* background: var(--color-input-bg); */
}

.option-main-content .cm-select {
    background-color: var(--color-light-gray);
    text-align: center;
    padding: 0px 40px 0 40px;
}

.option-main-content .cm-input {
    background-color: var(--color-input-bg);
}

/* Round checkbox START */
.checkbox-text {
    font-size: 10px;
    letter-spacing: 0.2px;
    color: var(--color-secondary);
    font-family: var(--font-book);
}

.checkerboard-round {
    width: 15px;
    height: 15px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #E2E7F2;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    border: 1.3px solid #E2E7F2;
    display: inline-block;
    margin-top: 0;
    margin-right: 8px;
    margin-bottom: -2px;
    transition: all 0.3s 0s ease;
}

.checkerboard-round:focus {
    outline: none;
    border: 1px solid #E2E7F2;
}

.checkerboard-round:checked {
    background-color: var(--color-primary);
    text-align: center;
    border: 1px solid #E2E7F2;
    animation: bounce 0.15s linear;
    -webkit-box-shadow: inset 0px 0px 0px 1px #ffffff;
}


@keyframes bounce {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(0.95)
    }

    75% {
        transform: scale(0.8);
    }

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

/* Round checkbox START */

/* Add new canvas START */
.add-new-canvas {
    display: flex;
    align-items: center;
    justify-content: center;
}

.add-new-canvas svg {
    width: 25px;
    height: 25px;
}

.add-new-canvas svg path {
    fill: var(--color-primary);
    transition: .4s;
}

.add-new-canvas:hover svg path {
    fill: var(--color-secondary);
}

/* Add new canvas END */

/* Modal START */
.modal.fade .modal-dialog {
    transform: translate(0, 50px);
}

.modal.show .modal-dialog {
    transform: none;
}

.content-title {
    font-size: 19px;
    font-family: var(--font-regular);
    text-align: center;
    margin-bottom: 10px;
    padding-top: 30px !important;
}

.back-action {
    position: absolute;
    left: 25px;
    top: 32px;
    display: flex;
    width: 16px;
    height: 16px;
    z-index: 1;
    cursor: pointer;
}

.back-action svg {
    height: 100%;
    width: 100%;
}

.back-action svg path {
    fill: #000;
}

.option-modal .modal-body {
    padding: 0;
    max-height: 90dvh;
    min-height: 90dvh;
    background-color: var(--bs-white);
}

.modal-dialog-bottom {
    display: flex;
    align-items: flex-end;
    height: calc(100% - 0px);
    width: 100%;
    margin: 0 auto;
}

.option-modal {
    border-radius: 0;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border: none;
    overflow: hidden;
}

/* template option START */
.template-switch {
    padding: 0 50px;
}

.choose-template-content .template-switch {
    /* padding: 5px 35px 0px 15px; */
    padding: 20px 50px 0;
    /* border-bottom: 1px solid var(--color-border-v1); */
}

.choose-template-content.extended-open .template-switch {    
    padding: 20px 0 0;
}
/* .template-switch,
.tool-box-header {  
    border-bottom: 1px solid var(--color-border-v1);
} */

.switches-container label {   
    padding: 0;
}
/* .tool-box-wrapper .switches-container label,
.cm-text-color-picker .switches-container label {   
    padding: 2.5px 0;
} */

.choose-template-content .mt-7 {
    opacity: 0;
    margin-top: 15px !important;
}

.extended-open .choose-template-content .mt-7 {
    margin-top: 18px !important;
}

.mt-20 {
    margin-top: 20px;
}

.choose-template-content .template-option {
    padding-bottom: 7px;
}

.template-view-extended {
    position: absolute;
    /* left: -11.5px; */
    right: -25px;
    /* top: 50%;
    transform: translateY(-50%); */
    top: 0;
    transform: unset;
    background-color: var(--color-new-gray-v1);
    width: 25px;
    height: 70px;
    border-radius: 0 9px 9px 0;
    /* border: 1px solid #DEE0E8; */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1;
}

.extended-open .template-view-extended {
    display: none;
}

.cave-left-arrow-c {
    transform: rotate(-180deg);
}
.cave-left-arrow-c.open {
     transform: rotate(360deg);
}
.cave-left-arrow-c svg {
    width: 10px;
    height: 10px;
    display: flex;
}
.cave-left-arrow-c svg path {
    fill: var(--color-secondary);
}
/* .extended-open .template-main-cont{
    / * max-height: calc(var(--viewport-height) - 268px); * /
    max-height: calc(var(--viewport-height) - 447px);
} */

.extended-open .tb-c-templates,
.extended-open.project-popup-cont .tool-box-content {
    position: relative;
    max-height: calc(100vh - 92px);
    margin-top: 20px;
    margin-bottom: 20px;
    overflow: auto;
}

.extended-open.project-popup-cont .tool-box-content {
    /* padding: 0 65px 0; */
    padding: 0 100px 0;
}

.extended-open .template-main-cont {
    /* max-height: calc(var(--viewport-height) - 268px); */
    max-height: 100%;
}

.project-popup-cont {
    transition: .4s;
}

.extended-open.choose-template-content.tool-box-left-wrapper {       
    z-index: 1002;
}
.extended-open.schedule-opt-wrapper,
.extended-open.project-popup-cont {       
    z-index: 1002 !important;
}

.extended-backdrop {
    position: fixed;
    left: 0;
    top: 0;
    background-color: hsla(231, 7%, 21%, 0.527);
    width: 100%;
    height: 100%;
    z-index: 1001;
}

.extended-open .div-template-published {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.expand-like-cont {
    display: none;
}
.extended-open .expand-like-cont {
    display: block;
}

.with-ai-cont {
    display: flex;
    align-items: center;
    justify-content: space-between;
    column-gap: 10px;
}

.ai-btn-cont {
    width: 190px;
    column-gap: 7px;
}

.extended-open .ai-btn-cont {
    width: 120px;
}
.extended-open .select {   
    width: 280px;
}
.extended-open .social-list-name .select {   
    width: 100%;
}
.extended-open .project-popup-right .select {
    width: 165px;
}

.extended-open .template-search .mb-7 {
    width: 365px;
    margin-bottom: 0 !important;
}
.extended-open .extend-close,
.icon-w-search,
.project-title-popup {
    display: none;
}
.extended-open .icon-w-search {
    display: block;
}
/* .extended-open .switches-container {
    margin-left: 20px;
} */
.extend-open-title,
.extended-open .button-w-icon,
.extended-open .back-folder.ext-none,
.tab-search-input .hs-info-block {
    display: none;
}
.extended-open .extend-open-title,
.extended-open .tab-search-input .hs-info-block,
.extended-open .project-title-popup {
    display: flex;
}
.extend-width {   
    width: 100%;
}
.extended-open .extend-width {
    margin-bottom: 0 !important;
    width: auto;
}
.extended-open.project-popup-cont .extend-width{
    width: 365px;
}
.extend-open-title {    
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 31px;
    font-family: var(--font-bold);
    color: var(--color-dark-gray-v2);
    column-gap: 6px;
    padding-top: 0;
}

.back-folder.ext-none {
    display: flex;
    align-items: center;
    column-gap: 20px;
    margin: 10px 0 12px;
}

.back-popup-project,
.folder-name-cont {
    display: flex;
    align-items: center;
    column-gap: 3px;
    color: var(--color-secondary);
    font-size: 10px;
    line-height: 11px;
    cursor: pointer;
}

.back-popup-project svg,
.folder-name-cont svg {
    width: 12px;
    height: 12px;
}
.back-popup-project svg path{
    fill: var(--bs-white)
}
.folder-name-cont svg path {
    fill: var(--color-secondary);
}

/* Template popup slider START */
.template-popup-slider {
    display: none;
    width: calc(100% - 200px);
    margin: 20px auto;
    padding: 20px;
    background-color: var(--color-input-bg);
    border-radius: 15px;
}
.extended-open .template-popup-slider {
    display: block;
    height: max-content;   
    /* max-height: 275px; */
    -webkit-animation: fade-in-slider-cont 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    animation: fade-in-slider-cont 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
@-webkit-keyframes fade-in-slider-cont {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  @keyframes fade-in-slider-cont {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

.choose-template-content .template-slider-li {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    cursor: pointer;
    padding: 8px 0;
    transition: .3s;
}

.choose-template-content .template-slider-li .template-image-preview {
    transition: .3s;
    /* margin-bottom: 15px; */
}

.choose-template-content .template-image-preview {
    width: 100%;
    /* height: 170px; */
    /* background-color: var(--color-light-gray); */
    background-color: var(--color-input-bg);
    padding: 0;
    border-radius: 15px;
    /* border: 2px solid transparent; */
    overflow: hidden;
}

/* .choose-template-content .template-slider-li:not(.active) .template-image-preview::before {
    position: absolute;
    content: "";
    width: 100%;
    height: calc(100% - 16px);
    background-color: rgb(51 60 84 / 60%);
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    border-radius: 15px;
    transition: .3s;
    opacity: 0;
} */
.choose-template-content .template-slider-li.active .template-image-preview:before {   
    /* border-color: var(--color-primary);
    border-width: 2px;
    box-shadow: var(--box-shadow); */
    position: absolute;
    content: "";
    background-image: url(../../../../../images/pen-checkmark.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 23px;
    height: 22px;
    top: 0px;
    right: -8px;
}
.choose-template-content .template-image-preview img {
    width: 100%;
    height: 100%;
    max-width: 180px;
    object-fit: contain;
}
.choose-template-content .template-name {
    /* color: var(--bs-white); */
    color: var(--color-secondary);
    font-size: 12px;
    font-family: var(--font-book);
    margin-bottom: 0;
    margin-top: 5px;
    /* position: absolute; */
    /* top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0; */
    opacity: 1;
    transition: .3s;
}
.choose-template-content .template-slider-li:not(.active):hover .template-image-preview::before,
.choose-template-content .template-slider-li:not(.active):hover .template-name {
    opacity: 1;
}

/* template popup tag START */
.tool-box-left-wrapper .popup-tag-cont {  
    display: none;
}
.tool-box-left-wrapper.extended-open .template-filter-content.popup-tag-cont {      
    display: flex;
}
.tool-box-left-wrapper.extended-open .template-filter-content {   
    margin-bottom: 15px;   
    align-items: center;
    justify-content: space-between;
    min-height: 40px;
    padding: 0 20px;
}
.choose-template-content.extended-open .template-filter-content {
    padding: 0 100px;
}
.tool-box-left-wrapper .template-title-badge {
    display: flex;
    align-items: center;
    grid-gap: 20px;
    width: 70%;
}
.tool-box-left-wrapper .template-list-title {
    white-space: nowrap;
}
.tool-box-left-wrapper .sm-title-text {
    font-family: var(--font-regular);
    font-size: 10px;
    line-height: 18px;
    letter-spacing: 0;
    margin-bottom: 0;
    color: var(--color-dark-gray-v2);
    /* text-transform: uppercase; */
}

.project-folder-opt-block .sm-title-text,
.template-filter-content .template-list-title,
.project-folder-structure .sm-title-text {
    font-size: 15px;
}

.tool-box-left-wrapper .btn-tmp-badge {
    color: var(--color-secondary);
    font-size: 10px;
    font-family: var(--font-regular);
    background-color: var(--color-input-bg);
    border: 0;
    border-radius: 9px;
    padding: 0 15px;
    line-height: 35px;
    transition: .3s;
}
.extended-open .popup-tag-cont .select {
    width: 100%;
}
.tool-box-left-wrapper .btn-tmp-badge.active,
.tool-box-left-wrapper .btn-tmp-badge.active:hover {
    /* background-color: var(--color-primary) !important; */
    background-image: url(../../../../../images/bg_gradiant_img.png);
    background-size: 100% 100%;
    background-position: center center;
    transition: background-size 0.4s ease;
    color: var(--bs-white);
}
/* template popup tag END */

/* Template popup slider END */

.template-main-cont {
    max-height: -webkit-calc(var(--viewport-height) - 312px);
    max-height: -moz-calc(var(--viewport-height) - 312px);    
    max-height: calc(var(--viewport-height) - 312px);
    /* min-height: -webkit-fill-available; */
    position: relative;
	/* overflow: hidden;
	overflow-y: auto; */
}

.search-show.template-main-cont,
.search-show.template-main-cont .template-option-wrp {
	max-height: calc(var(--viewport-height) - 266px);
	min-height: 320px;
}

.saved-template-content {
    max-height: -webkit-calc(var(--viewport-height) - 330px);
    max-height: -moz-calc(var(--viewport-height) - 330px);    
    max-height: calc(var(--viewport-height) - 330px);   
    position: relative;
}

.template-option-wrp {
    position: relative;
    padding: 0 7px;
    height: 100%;
    display: grid;
    grid-gap: 8px 5px;
    grid-template-columns: repeat(3, 1fr);
    max-height: -webkit-calc(var(--viewport-height) - 330px);
    max-height: -moz-calc(var(--viewport-height) - 330px);    
    max-height: calc(var(--viewport-height) - 330px);
    /* min-height: -webkit-fill-available; */
    overflow: auto;
}

.template-main-cont .template-option-wrp {
    /* -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    -webkit-column-gap: 10px;
    -moz-column-gap: 10px;
    column-gap: 10px; */
    margin: 0 10px 0;
    padding: 0;
    /* -moz-column-gap: 10px;
    -webkit-column-gap: 10px;   
    display: grid;   */
    display: block;
    height: auto;
    /* max-height: unset;  */
    max-height: calc(var(--viewport-height) - 312px); 
    min-height: 592px;
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
    overflow: auto;
}

.template-main-cont .template-result-cont {
	max-height: calc(var(--viewport-height) - 266px);
    min-height: 360px;
}

.extended-open .template-main-cont .template-option-wrp,
.extended-open .tool-box-content .projct-list-section {   
    overflow: unset;
}

.choose-template-content.extended-open .template-main-cont .template-option-wrp {
    margin: 0 100px 0;
}

.template-main-cont .template-option-wrp::-webkit-scrollbar { 
    display: none;  /* Safari and Chrome */
}

.create-grid-sizer,
.template-option-wrp .option-wrapper {
    /* width: 48.2%; */
    width: 46.2%;
}
.create-gutter-sizer { 
    /* width: 3.3%; */
    width: 6%;
 }

.extended-open .create-grid-sizer,
.extended-open.choose-template-content .template-option-wrp .option-wrapper,
.extended-open.folder-opt-wrapper .projct-list-section .option-wrapper {
    width: 18.95%;
}

.extended-open .prj-list-block .create-grid-sizer {
    width: 17.85%;
}

.extended-open.folder-opt-wrapper .projct-list-section .option-wrapper {
    margin-bottom: 20px;
}

.extended-open .create-gutter-sizer { width: 1.3%; }

.extended-open .prj-list-block .create-gutter-sizer {
    width: 2.5%;
}

.extended-open .prj-list-block {   
    /* max-height: calc(var(--viewport-height) - 320px); */
    max-height: 100%;
    padding: 5px 0 35px;
    background-color: transparent;
    border-radius: 0;
    width: 100%;
}

.template-main-cont .option-wrapper {
    display: inline-block;
    margin-bottom: 16px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -webkit-animation: fade-in-top-right 0.35s cubic-bezier(0.390, 0.575, 0.565, 1.000) 0.98s both;
    animation: fade-in-top-right 0.35s cubic-bezier(0.390, 0.575, 0.565, 1.000) 0.98s both;
}

@-webkit-keyframes fade-in-top-right {
    0% {
      -webkit-transform: translateY(-2px);
              transform: translateY(-2px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
      opacity: 1;
    }
  }
  @keyframes fade-in-top-right {
    0% {
      -webkit-transform: translateY(-2px);
              transform: translateY(-2px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
      opacity: 1;
    }
  }

.template-main-cont .small-with-bg-loader.pencila-loader {
    background-color: transparent;
}

.list-all-project .pencila-loader {
    background-color: transparent;
    height: 35px;
    inset: auto;
    padding: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
}

.choose-template-content.tool-box-wrapper .template-option-wrp {
    /* max-height: calc(100dvh - 400px); */
    /* max-height: calc(100dvh - 375px); */
    min-height: 500px;
}

.choose-template-content .template-option-wrp {
    grid-template-columns: repeat(2, 1fr);
}

.no-templates {
    position: relative;
    padding: 0 20px 5px;
    height: var(--viewport-height);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    grid-gap: 20px;
    max-height: calc(var(--viewport-height) - 320px);
    /* min-height: -webkit-fill-available; */
    overflow: auto;
}

.tb-c-templates .no-templates{
    height: calc(var(--viewport-height) - 345px);
    max-height: unset;
}

.extended-open .tb-c-templates .no-templates {    
    height: calc(var(--viewport-height) - 448px);  
}

.tool-box-left-wrapper.extended-open  {    
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.tb-c-saved .no-templates{
    height: calc(var(--viewport-height) - 275px);
    max-height: unset;
}

.no-templates-info {
    font-size: 10px;
    text-align: center;
    color: var(--color-secondary);
    margin-bottom: 0;
    max-width: 275px;
}

.template-search {
    margin: 10px auto 0;
    padding: 0 10px;
    /* max-width: 400px; */
    max-width: 100%;
}
.choose-template-content.extended-open .template-search {
    padding: 0 100px;
}

.choose-template-content .template-search {
    margin-top: 0;
}

.template-search .mb-7 {
    margin-bottom: 7px;
}

.product-page-wrp .template-search {
    padding: 0 50px;
}

.option-cont {
    position: relative;
    cursor: pointer;
    padding: 15px;
    background-color: var(--bs-white);
    border-radius: 17px;
    /* border: 1px solid #E2E7F2; */
    text-align: center;
}

.choose-template-content .option-cont {
    padding: 0;
}

.choose-template-content #div-template-option-wrp .option-cont {
    height: 144px;
}

.choose-template-content .template-main-cont #div-template-option-wrp .option-cont {
    height: auto;
    background: transparent;
}

.choose-template-content .template-slider-li:not(.active):hover .template-image-preview0,
.choose-template-content .template-slider-li.active .template-image-preview0 {
    border-color: var(--color-gray-v1);
}

.no-template-found {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 100%;
    row-gap: 15px;
}
.no-template-icon svg {
    width: 40px;
    height: 40px;
    display: flex;
}
.no-template-icon svg path {
   fill: var(--color-secondary);
}
.no-template-text {
    font-size: 12px;
	line-height: 14px;
    margin-bottom: 0;
	color: var(--color-secondary);
}

#div-template-option-wrp .option-cont {   
    /* border-radius: 5px;
    border: 1px solid #E2E7F2; */
    border-radius: 11px;
    overflow: hidden;
}

#div-template-option-wrp .option-cont.active {
    border: 2px solid var(--color-primary);
    overflow: hidden;
}

.option-cont img {
    /* border-radius: 10px; */
    width: 150px;
    /* filter: drop-shadow(0 2px 5px rgb(0 0 0 / 16%)); */
}

.choose-template-content .option-cont img {
    object-fit: contain;
    width: 100%;
}

.choose-template-content #div-template-option-wrp .option-cont img {   
    height: unset;
}

.create-page-wrp .option-cont img {
    max-height: 120px;
    min-height: 120px;
    object-fit: contain;
}

.ai-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-left: 3px;
}

.ai-icon svg {
    width: 100%;
    height: 100%;
    display: flex;
}

.option-name {
    font-size: 10px;
    letter-spacing: 0;
    text-align: center;
    margin-bottom: 0;
    margin-top: 10px;
    color: var(--color-secondary);
    font-family: var(--font-regular);
    letter-spacing: .5;
}

.template-main-cont .option-name {
    max-width: 49px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.image-name-cont {
    display: flex;
    align-items: center;
    column-gap: 5px;
}

.image-name-cont .option-name {   
    text-align: left;
}

.creator-image-cont {
    width: 23px;
    height: 23px;
    min-width: 23px;
    border-radius: 4px;
    overflow: hidden;
}
.creator-name-icon {
    width: 100%;
    height: 100%;
    background-color: var(--color-primary);
    color: var(--bs-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 12px;
    letter-spacing: .5;
}

/* .template-main-cont .option-name {
    max-width: max-content;
} */

.extended-open .image-name-cont {  
    column-gap: 8px;
}

.extended-open .creator-image-cont {
    width: 35px;
    height: 35px;
    border-radius: 6px;
}
.creator-image-cont img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}
.creator-name-cont {
    font-size: 8px;
    letter-spacing: 0;
    text-align: left;
    margin-bottom: 0;
    margin-top: 0;
    color: var(--color-secondary);
    font-family: var(--font-regular);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.extended-open .creator-name-cont {
    font-size: 9px;
}

.pro-tab {
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: hsl(225deg 7.14% 21.96% / 92%);
    border-radius: 20px;
    font-size: 9px;
    line-height: 5px;
    font-family: var(--font-regular);
    color: var(--bs-white);
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 5px;
    /* width: 25px;
    height: 25px;
    line-height: 25px; */
   	width: 18px;
    height: 18px;
    line-height: 26px;
    padding: 5px;
    z-index: 789;
    cursor: pointer;
}

.pro-tab svg {
    display: block;
    width: 100%;
    height: 100%;
}

.ai-power-tab {
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: rgba(28, 32, 51, 0.671);
    border-radius: 20px;
    font-size: 10px;
    line-height: 5px;
    font-family: var(--font-regular);
    color: var(--bs-white);
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 5px;
    width: 73px;
    height: 28px;
    line-height: 20px;
    z-index: 789;
    cursor: pointer;
}

.name-with-icon {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 10px 0 5px;
    column-gap: 5px;
    padding: 0;
}

.name-with-icon .option-name {
    margin-top: 0;
}

.heart-icon-content {
    cursor: pointer;
    display: flex;
}
.heart-icon-content svg {
    width: 15px;
    height: 15px;
    display: flex;
}

.heart-icon-content svg path,
.like-button-template svg path {
    fill: var(--color-dark-gray-v2);
}

.filter-favourite-template svg path {
    fill: var(--bs-white);
}

.heart-icon-content.active svg path {
    /* fill: var(--color-primary); */
    fill: url(#icon-gradient);;
}

/* template option START */

/* template preview START */
.template-wrp {
    max-height: -webkit-calc(var(--viewport-height) - 135px);
    max-height: -moz-calc(var(--viewport-height) - 135px);    
    max-height: calc(var(--viewport-height) - 135px);
    /* min-height: -webkit-fill-available; */
    overflow: auto;
    padding: 0 50px 20px;
}

.template-title {
    text-align: center;
    font-size: 18px;
    font-family: var(--font-bold);
    margin-top: 11px;
    margin-bottom: 15px;
    letter-spacing: 0.2px;
    line-height: 18px;
    padding: 20px 50px 0;
}

.large-preview {
    width: 100%;
    height: 300px;
    margin-bottom: 12px;
}

.large-preview img, .preview-thumb img {
    border-radius: 10px;
    height: 100%;
    object-fit: cover;
}

.small-preview {
    position: relative;
    /* height: 100%; */
    height: 85px;
    display: grid;
    grid-gap: 12px;
    grid-template-columns: repeat(4, 1fr);
    overflow: auto;
}

.create-title {
    font-size: 15px;
    line-height: 15px;
    font-family: var(--font-regular);
    margin-bottom: 10px;
    text-align: center;
}

.create-info {
    font-size: 13px;
    text-align: center;
    color: var(--color-secondary);
    font-family: var(--font-book);
    margin-bottom: 15px;
    padding: 0 5px;
}

/* .template-image-preview {
    margin-bottom: 30px;
} */

.select-product-error {
    background-color: #F27F7F;
    padding: 3px;
    border-radius: 25px;
    font-size: 10px;
    color: var(--bs-white);
    font-family: var(--font-book);
    text-align: center;
    margin-bottom: 10px;
}

.success-dot {
    position: absolute;
    width: 14px;
    height: 14px;
    top: 13px;
    left: 17px;
    background-color: #A4E0AB;
    border-radius: 50%;
    display: inline-block;
}

.ai-icon-right {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
}

/* Product START */
.product-content {
    position: relative;
}

.form-control {
    /* color: var(--dark-icon-color); */
    color: var(--color-secondary);
}

.cm-input {
    height: 35px;
    /* background-color: var(--color-light-gray);
    border: 1px solid var(--color-border-v2); */
    background-color: var(--bs-white);
    border: none;
    border-radius: 9px;
    padding: 5px 15px;
    /* padding-left: 15px; */
    font-size: 10px;
    font-family: var(--font-regular);
    letter-spacing: .5;
}

.cm-input.gradient-color-input {   
    padding: 5px;
}

.product-content .cm-input {
    padding: 5px 30px;
}
.tool-box-content .cm-input,
.right-icon-padding .search-template-input,
.template-search .select-styled {
    /* background-color: var(--color-input-bg); */
    background-color: var(--bs-white);
}

.tool-box-content .cm-input:focus {
    background-color: var(--bs-white);
}

.download-option .cm-input {
    font-family: var(--font-book);
}

.product-content .add-item-popup, .arrow-right {
    width: 13px;
    height: 13px;
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    cursor: pointer;
}

.add-item-popup svg, .arrow-right svg {
    display: block;
    width: 100%;
    height: 100%;
}

.add-item-popup svg path, .btn-with-icon-svg svg path, .arrow-right svg path {
    fill: #71808E;
}

.process-action-block {
    margin-top: 15px;
}

.brand-color {
    margin-top: 18px;
    position: relative;
}

.info-tooltip {
    position: absolute;
    right: 0;
    top: 4px;
    display: flex;
}

/* Product END */

/* template preview END */

/* Select product START */
.add-new-button-content {
    margin-bottom: 25px;
    padding: 5px 50px;
    max-width: 400px;
    margin: 0 auto;
}

.product-listing {
    position: relative;
    height: 100%;
    display: grid;
    grid-gap: 15px;
    grid-template-columns: repeat(1, 1fr);
    overflow: auto;
    padding: 0 50px 15px;
    max-height: -webkit-calc(var(--viewport-height) - 400px);
    max-height: -moz-calc(var(--viewport-height) - 400px);    
    max-height: calc(var(--viewport-height) - 400px);
    /* min-height: -webkit-fill-available; */
}

.product-listing.page-listing {
    grid-template-columns: repeat(3, 1fr);
}

.product-listing-wrp {
    position: relative;
    border: 1px solid var(--color-border-v1);
    background-color: var(--bs-white);
    border-radius: 12px;
    padding: 5px;
    display: flex;
    align-items: center;
    cursor: pointer;
    column-gap: 25px;
}

.product-listing-wrp:hover, .product-listing-wrp.active {
    border: 1px solid var(--color-primary);
}

.product-img img {
    width: 65px;
    height: 65px;
    object-fit: cover;
    border-radius: 10px;
}

.product-name {
    font-size: 10px;
    font-family: var(--font-book);
    color: var(--color-secondary);
    word-break: break-word;
}

.tab-search-input {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0;
}
.extended-open .tab-search-input {
    margin-bottom: 15px;   
}

/* Select product END */

/* Add new product START */
.sub-title {
    margin: 25px 0;
    padding: 0 35px;
}

.sub-title .create-info {
    font-size: 10px;
    margin-bottom: 0;
}

.product-detail {
    padding: 0 55px;
    max-width: 400px;
    margin: 0 auto;
    margin-bottom: 45px;
}

.product-detail .form-group {
    margin-bottom: 10px;
}

.product-detail .cm-input {
    text-align: center;
}

.page-top-0 {
    top: unset;
    bottom: 5px;
}

/* .product-page-wrp .content-title, .projects-page-wrp .content-title{
    margin-top: 20px !important;
} */
/* Add new product END */

/* Loader START */
.generate-loader {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: var(--bs-white);
    padding: 40px 20px;
    z-index: 9;
}

.loading-title {
    font-size: 25px;
    color: var(--color-secondary);
    font-family: var(--font-bold);
    text-align: center;
    margin-bottom: 15px;
}

.option-modal .loading-desc, .option-modal .loading-btm-tx {
    text-align: center;
    font-size: 10px;
    color: var(--color-secondary);
    font-family: var(--font-book);
    margin-bottom: 0;
    padding: 0;
}

/* Loader END */

.template-preview,
.add-new-product,
.select-product,
.generate-loader {
    display: none;
}

/* Style END */

/* Desktop right div START */
.choose-template-content {
    position: fixed;
    /* top: 110px; */
    right: 20px;
    width: 340px;
    min-height: 235px;
    /* opacity: 0;
    -webkit-transform: translateX(1000px);
    transform: translateX(1000px); */
    /* transition: .4s; */
    /* box-shadow: 0px 3px 6px rgb(0 0 0 / 16%); 
    border: 1px solid var(--color-box-border); */
    background-color: var(--bs-white);
    border-radius: 20px;
}
.choose-template-content.tool-box-left-wrapper,
.project-popup-cont.tool-box-left-wrapper,
.ai-tool-option.tool-box-left-wrapper {
    width: 250px;
}

.choose-template-content .cm-lg-drop-group,
.project-popup-cont .cm-lg-drop-group {
    width: 230px;
}

.choose-template-content.extended-open .cm-lg-drop-group {
    width: 365px;
}

/* .choose-template-content.show {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
} */
.choose-template-content.show  .btn-tb-header {
    /* top: 8px;
    right: 6px; 
    top: 16px;*/
    right: 20px;
    top: 9px;
    padding-left: 0;
}

/* large popup modal START */
.template-preview-large {
    display: flex;
    flex-wrap: nowrap;
}

.content-left {
    position: relative;
    width: 73.4%;
    padding: 65px;
    background-color: var(--color-input-bg);
    height: 100%;
    max-height: -webkit-calc(var(--viewport-height) - 115px);
    max-height: -moz-calc(var(--viewport-height) - 115px);    
    max-height: calc(var(--viewport-height) - 115px);
    /* min-height: -webkit-fill-available; */
    overflow: auto;
}

.content-right {
    position: relative;
    width: 26.6%;
    max-height: -webkit-calc(var(--viewport-height) - 115px);
    max-height: -moz-calc(var(--viewport-height) - 115px);    
    max-height: calc(var(--viewport-height) - 115px);
    /* min-height: -webkit-fill-available; */
    overflow: auto;
}

.desktop-large-modal .add-new-button-content {
    margin: 0 auto 20px;
}

.template-preview-cont {
    box-shadow: var(--box-shadow);
}

.template-action-option .template-preview {
    display: block;
}

.template-action-option .template-preview .back-action {
    display: none;
}

.template-action-option .product-listing {
    max-height: -webkit-calc(var(--viewport-height) - 270px);
    max-height: -moz-calc(var(--viewport-height) - 270px);    
    max-height: calc(var(--viewport-height) - 270px);
    /* min-height: -webkit-fill-available; */
}

.template-action-option .gl-img-box {
    grid-template-columns: repeat(2, 1fr);
}

.template-action-option .gallery-content {
    padding-inline: 43px;
}

.template-action-option .product-gallery .gl-drop-label .drop-placeholder {
    min-height: 159px;
    max-height: 159px;
}

/* large popup modal END */

/* Desktop right div END */

/* Medium popup modal START */
.publish-content-modal .content-left {
    width: 72.3%;
    padding: 25px
}

.publish-content-modal .content-right {
    width: 27.8%;
    /* border-left: 1px solid #CFD1DD; */
}

.publish-fill-up-detail {
    padding: 45px;
}

.publish-title {
    font-size: 17px;
    font-family: var(--font-regular);
    margin-bottom: 10px;
}

.publish-name-info {
    display: flex;
    align-items: center;
    column-gap: 15px;
    margin-bottom: 15px;
    margin-top: 15px;
}

.user-short-name {
    width: 46px;
    height: 46px;
    background-color: var(--color-primary);
    color: var(--bs-white);
    font-family: var(--font-regular);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 18px;
    line-height: 40px;
    text-transform: uppercase;
}

.user-name-detail {
    font-size: 10px;
    color: var(--color-secondary);
    font-family: var(--font-book);
}

.publish-fill-up-detail .text-area-c {
    height: 70px;
}

.publish-fill-up-detail .cm-label-title,
.publish-fill-up-detail .cm-inner-title-with-icon,
.publish-fill-up-detail .cm-input,
.publish-fill-up-detail .text-area-c {
    font-size: 10px;
}

.publish-fill-up-detail .cm-input:not(.search-categorize) {
    padding: 5px 15px;
}

.agree-tag {
    color: var(--color-secondary);
    text-decoration: underline;
}

.agree-tag:hover {
    text-decoration: none;
}

.right-preview-content {
    width: 620px;
    height: 620px;
}

.small-thumbnail-preview {
    width: 93px;
    height: 93px;
    cursor: pointer;
}

.right-preview-content img,
.small-thumbnail-preview img {
    width: 100%;
    height: 100%;
    border: 1px solid var(--color-border-v1);
    object-fit: contain;
    background-color: var(--bs-white);
    transition: .3s;
   
}
.right-preview-content img {
    background-color: unset;
    border: none;
    filter: drop-shadow(0px 3px 6px rgb(0 0 0 / 26%));
}

.small-thumbnail-preview:hover img {
    border: 2px solid var(--color-primary);
}

.small-thumbnail-preview.active img {
    border: 1px solid var(--color-primary);
}

.template-image-preview-content {
    display: flex;
    column-gap: 20px;
    justify-content: center;
}

.left-preview-content {
    display: flex;
    flex-direction: column;
    row-gap: 15px;
    height: 624px;
    overflow: auto;
}

.publish-header {
    display: flex;
    align-items: center;
    grid-gap: 8px;
}

.small-paragraph-text {
    font-size: 10px;
    margin-bottom: 8px;
    line-height: 14px;
}

.user-short-name-small {
    width: 25px;
    height: 25px;
    font-size: 10px;
}

.publish-name-info-small {
    column-gap: 6px;
}

.tag-span {
    background-color: var(--color-secondary);
    color: var(--bs-white);
    padding: 4px 10px;
    border-radius: 20px;
}

.button-light-gary {
    background-color: #737784;
}

.publish-fill-up-detail .filter-box {
    padding: 20px;
    column-gap: 15px;
    /* border-top: 1px solid var(--color-border-v1); */
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.publish-fill-up-detail .filter-description {
    display: flex;
    align-items: center;
    column-gap: 10px;
}

.publish-fill-up-detail .profile-image-cont {
    width: 45px;
    min-width: 45px;
    max-width: 45px;
    height: 45px;   
    min-height: 45px;
    max-height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-primary);
    border-radius: 11px;
    overflow: hidden;
}

.publish-fill-up-detail .profile-image-cont .profile-name-cont{
    width: 100%;
    height: 100%;
}

.publish-fill-up-detail .profile-name-cont {
    color: var(--bs-white);
    font-size: 14px;
    line-height: 15px;
    font-family: var(--font-regular);
    text-transform: uppercase;   
    display: flex;
    align-items: center;
    justify-content: center;
}

.publish-fill-up-detail .profile-image-cont img {
    width: 100%;
    height: 100%;
    background-color: var(--bs-white);
    object-fit: cover;
}

.publish-fill-up-detail .profile-filter-name {
    font-size: 13px;
    line-height: 15px;
    color: var(--color-secondary);
    margin-bottom: 2px;
    font-family: var(--font-regular);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.publish-fill-up-detail .filter-creator {
    font-size: 10px;
    color: var(--color-secondary);
    margin-bottom: 2px;
    font-family: var(--font-book);
    font-style: italic;
}

.publish-fill-up-detail .filter-symbol {
    display: flex;
    align-items: center;
    column-gap: 10px;
}

.publish-fill-up-detail .f-icon {
    width: 17px;
    height: 17px;
    display: flex;
}

.publish-fill-up-detail .f-icon svg {
    width: 100%;
    height: 100%;
}

/* .publish-fill-up-detail .f-icon svg path {
    color: var(--color-secondary);
} */
.publish-fill-up-detail .eye-icon-cont.active .f-icon svg path {
    fill: var(--color-primary);
}
.publish-fill-up-detail .like-tab svg path {
    fill: var(--color-primary);
}

.eye-icon-cont {
    display: flex;
    align-items: center;
    column-gap: 3px;
}

.count-number {
    font-size: 10px;
    line-height: 12px;
    font-family: var(--font-italic);
    color: var(--color-secondary);
}

.filter-image-preview {
    position: relative;
    width: 100%;
    /* height: 325px; */
    display: block;
}

.filter-image-preview img {
    width: 100%;
    height: 100%;
}

.filter-image-preview img {
    object-fit: contain;
    display: block;
}

/* Medium popup modal END */

/* Extra Small popup preview START */
.template-review-modal .modal-sm {
    --bs-modal-width: 396px;
    max-width: var(--bs-modal-width);
}

.template-review-modal .cm-inner-body {
    padding: 25px 51px;
}

/* Extra Small popup preview END */

/* New project design START */
.project-folder-structure {
    padding: 20px 50px 40px;
    /* background-color: #F2F3F5; */
}

.project-left-account-detail {
    background-color: var(--color-light-gray);
    padding: 20px 45px;
    width: 340px;
    height: 100%;
    border-radius: 25px;
    position: sticky;
    top: 120px;
}

/* Top action START */
.top-action-content {
    padding-bottom: 28px;
}
.top-action-content .switch-text {
    line-height: 20px;
}
/* Top action END */

/* Create New Folder START */
.project-right-content {
    width: calc(100% - 380px);
}

.two-split-view {
    display: flex;
    align-items: center;
    column-gap: 30px;
}

.create-element-wrp {
    position: relative;
    background-color: var(--color-input-bg);
    border: 0;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.create-folder-wrp {
    height: 100px;
    width: 257px;
}

.add-element-icon-top {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 18px;
    height: 18px;
}

.add-element-icon-top svg {
    display: flex;
    width: 100%;
    height: 100%;
}

.add-element-icon-top svg path {
    fill: var(--color-secondary);
}

.create-new-folder {
    padding: 30px 0;
    border-top: 1px solid #D9DCE8;
    border-bottom: 1px solid #D9DCE8;
    width: 100%;
}

.small-text-bottom, .folder-name-wrp {
    font-size: 10px;
    line-height: 18px;
    font-family: var(--font-regular);
    color: var(--color-secondary);
    text-align: center;
    margin-top: 15px;
    word-break: break-word;
    letter-spacing: 0;
}

.small-text-bottom,
.folder-name-wrp{
    font-size: 10px;
    line-height: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-box-orient: vertical;
}
.small-text-bottom.project-name-wrp,
.small-text-bottom.f-12 {
    font-size: 10px;
}
/* .canvas-project-box {
    background-color: var(--bs-white);
    border-radius: 11px;
} */

.projects-body .canvas-project-box .small-text-bottom,
.recent-update-project .canvas-project-box .small-text-bottom {    
    text-align: left;
    padding: 0 15px;
}
.p-15-c {
    padding: 0 15px;
}

.folder-list-li {
    position: relative;
    padding-top: 2px;
    /* max-width: 100px; */
    transition: .3s;
}

.folder-list-li.active{
    scale: 1.09;
}

.small-sqr-box {
    /* width: 100px;
    height: 100px; */
    padding: 8px;
    background-color: var(--bs-white);
    /* border: 2px solid transparent; */
    border-radius: 11px;
    /* scale: 0.98; */
    transition: .3s;
}

.small-sqr-box:hover,
.small-sqr-box.active {
    /* scale: 1.01; */
    border-color: var(--color-primary);
    box-shadow: var(--box-shadow);
}

.small-sqr-box img, .large-image-view img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.anchor_project .large-image-view img {  
    object-fit: contain;
}
.full-view-image.large-image-view img {
    object-fit: cover;
}
.full-view-image.large-image-view {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.folder-thumb,
.folder-thumb svg {
    display: block;
    width: 100%;
    height: 100%;
}
.folder-thumb svg path {
    fill: var(--color-secondary);
}
.folder-thumb {
    /* padding: 16px; */
    max-width: 25px;
    margin-inline: auto;
}

.folder-projects-container .folder-thumb {
    max-width: 25px;
}

/* .folder-thumb svg path{
    fill: var(--bs-white);
    stroke: var(--color-desc-gray);
    stroke-width: 2px;
} */

.custom-create-thumb svg{
    width: 25px;
}

.custom-create-thumb svg path{
    fill: var(--bs-white);
    stroke-width: 2px;
}

.temp-thumb svg path{
    fill: var(--color-secondary);
}

/* .add_new_folder .temp-thumb svg path {
    fill: var(--bs-white);
} */

.folder-list-content {
    width: calc(100% - 287px);
}

/* .folder-list-ul {
    display: flex;
    column-gap: 25px;
    overflow: hidden;
    overflow-x: auto;
    width: 100%;
} */

.name-edit-input {
    padding: 0 15px;
    text-align: left;
    border-radius: 3px;
    height: auto;
    font-size: 10px;
    color: var(--color-secondary);
    font-family: var(--font-regular);
    background-color: transparent;
    letter-spacing: 0;
    margin-top: 15px;
}

.name-edit-input:focus{
    background-color: transparent;
}

.project-folder-opt-block .name-edit-input {   
    margin-top: 8px;
}

/* Create New Folder END */

/* Create New Design START */
/* .create-new-design {
    padding: 30px 0;
} */

.mx-40{
    margin-inline: 40px;
}

.create-design-view {
    /* padding: 0 35px 35px; */
    display: grid;
    grid-gap: 35px;
    grid-template-columns: repeat(4, 1fr);
}

.create-new-design-wrp {
    height: auto;
    aspect-ratio: 1 / 1;   
}

.projects-body .create-new-design-wrp,
.recent-update-project .create-new-design-wrp {
    aspect-ratio: 4 / 2;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.large-image-view {
    width: 100%;
    height: 100%;
    border-radius: 11px;
    overflow: hidden;
}

.center-icon-cont {
    width: 45px;
    height: 45px;
}

.center-icon-cont svg {
    width: 100%;
    height: 100%;
}

.center-icon-cont svg path {
    fill: var(--color-secondary);
}

/* Create New Design END */


/* Left Profile Design START */
/* .profile-content {
    position: relative;
    width: 195px;
    height: 195px;
    margin: 20px auto 15px;
    background-color: var(--color-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-name-text {
    font-size: 71px;
    line-height: 48px;
    font-family: var(--font-regular);
    color: var(--bs-white);
    text-transform: lowercase;
}

.profile-image-upload-icon {
    width: 42px;
    height: 42px;
    position: absolute;
    cursor: pointer;
    top: 10px;
    right: 3px;
    background-color: var(--bs-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 6px rgb(0 0 0 / 17%);
    z-index: 1;
}

.profile-image-upload-icon input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}

.profile-image-view {
    position: absolute;
    width: 195px;
    height: 195px;
    border-radius: 50%;
    overflow: hidden;
    z-index: 0;
}

.profile-image-view img {
    width: 100%;
    height: 100%;
    object-fit: cover;
} */

.user-name-wrp {
    font-size: 17px;
    font-family: var(--font-regular);
    line-height: 23px;
    text-align: center;
    color: var(--color-secondary);
}

.user-social-detail {
    font-size: 10px;
    font-family: var(--font-book);
    line-height: 14px;
    text-align: center;
    color: var(--color-secondary);
    margin: 15px auto;
}

/* Left Profile Design END */

.proj-space-c {
    padding: 35px;
    border-radius: 11px;
    background-color: var(--color-arrow-gray);
}

/* New project design END */

.publish-left-sub-preview {
    position: relative;
}


/* tagify START */

.tagify {
    border: 0 !important;
    padding: 3.32px 5px 3.32px 5px !important;
    width: 100%;
    overflow-y: auto;
}

.tagify--focus {
    --tags-border-color: var(--color-primary) !important;
}

.tagify__tag {
    border-radius: 20px !important;
    padding: 3px 0 3px 0px !important;
    margin: 0px 0 0px 5px !important;
    align-items: flex-start !important;
    column-gap: 5px;
}

.tagify__input .tagify__tag{
    vertical-align: middle;
}

.tagify__tag>div>* {
    /* color: var(--bs-white) !important; */
    color: #6F6ED1 !important;
    font-family: var(--font-regular);
}

.tagify__tag>div::before {
    box-shadow: none !important;
}

.tagify__tag__removeBtn {
    font: 15px / 1 var(--font-book) !important;
    color: #DADAF8 !important;
    width: 16px !important;
    height: 16px !important;
    margin-right: 0px !important;
    background: #6F6ED1 !important;
    position: absolute;
    right: 5px;
    top: 8px;
    vertical-align: middle;
}

.manual-tag-contant .tagify__tag__removeBtn:hover+div::before {
    box-shadow: none !important;
    transition: none !important;
}

.tagify__tag__removeBtn::after{
    height: 100%;
    /* color: var(--color-secondary) !important; */
    color: #DADAF8 !important;
}

.tagify__tag__removeBtn:hover{
    background-color: var(--bs-white) !important;
    color: var(--color-secondary) !important;
}

.tagify__tag__removeBtn:hover+div>span {
    opacity: .9 !important;
}

.tagify__tag>div {
    padding: 5px 30px 6px 10px !important;
    background-color: #DADAF8;
    border-radius: 20px !important;
    box-shadow: 0 0 0 1px #6F6ED1;
}

.tagify__tag>div {
    font-size: 10px;
}

.tagify__input {
    margin: 8px 5px !important;
}

.tagify__input::before, .tagify__input:focus:empty::before, .tagify__input {
    color: var(--color-secondary) !important;
}

.tagify__tag__removeBtn:hover {
    background: var(--tag-remove-btn-bg--hover) !important;
}

#form-stripe-subscription .tagify__tag__removeBtn:hover+div::before {
    box-shadow: none !important;
}

.tagify__tag__removeBtn:hover+div::before {
    box-shadow: none !important;
}

.code-tag {
    vertical-align: top;
    box-sizing: border-box;
    max-width: 100%;
    color: var(--bs-white);
    line-height: inherit;
    font-size: 10px;
    display: inline-block;
    font-family: var(--font-book);
    white-space: nowrap;
    padding: 7px 20px 5px 20px !important;
    background-color: var(--color-primary);
    border-radius: 20px !important;
    cursor: context-menu;
    position: absolute;
    left: 22px;
    top: 7px;
    transform: scale(0);
    opacity: 0;
    text-transform: uppercase;
    transition: .13s ease-out;
}

.code-tag.apply-code {
    transform: scale(1);
    opacity: 1;
}

.close-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    cursor: pointer;
    margin-left: auto;
    overflow: hidden;
    font: 14px/1 Arial !important;
    padding-bottom: 1.31px;
    color: white !important;
    width: 16px !important;
    height: 16px !important;
    background: #D0D7DE !important;
    position: absolute;
    right: -20px;
    top: 2px;
    transition: .2s ease-out;
}

.close-tag:hover {
    background: var(--color-error) !important;
}

.tagify__dropdown__wrapper {
    border-color: var(--color-border-v1);
    border-radius: 6px;
}
.tagify__dropdown__item {
    font-size: 10px;
}
.tagify__dropdown__item--active {
    background: var(--color-light-gray);
    color: var(--color-secondary);
}
.tagify__dropdown__wrapper {   
    font-size: 10px;
}

/* tagify END */

/*-------------------------- folder action bar design start --------------------------*/

.projects-body .gray-box-element,
.recent-update-project .gray-box-element {
    background-color: var(--bs-white);
    border-radius: 11px;
    padding-bottom: 15px;
}
.canvas-project-wrp {
    padding: 25px;
}

.canvas-project-wrp.active{
    border-color: var(--color-primary);
}

.cpf-action-box {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 99;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 5px 5px 10px;
}

.prj-list-block .cpf-action-box {
    justify-content: flex-end;
    gap: 5px;
    flex-wrap: wrap;  
    padding: 5px;
}

.cpf-tool-box{
    display: flex;
    grid-gap: 4px;
}

.btn-cpf-tool {
    display: block;
    width: 26px;
    height: 26px;
    /* padding: 7px;
    background-color: var(--bs-white);
    border: 1px solid var(--color-border); */
    padding: 8px;
    background-color: var(--color-arrow-gray);
    border: none;
    border-radius: 50px;
    transition: .3s;
}

.btn-cpf-tool svg{
    display: block;
    width: 100%;
    height: 100%;
}

.btn-cpf-tool svg path{
    fill: var(--color-secondary);
}

.btn-cpf-tool:hover{
    background-color: var(--color-primary);
}

.btn-cpf-trash:hover svg path{
    fill: var(--bs-white);
}

.btn-cpf-copy:hover svg path,
.btn-cpf-more:hover svg path {
    /* stroke: var(--bs-white); */
    fill: var(--bs-white);
}

.btn-cpf-more:hover svg path{
    stroke: var(--bs-white);
}

.cpf-chk-box,
.cpf-tool-box{
    transition: .3s;
    opacity: 0;
    visibility: hidden;
}

.canvas-project-box:hover .cpf-chk-box,
.canvas-project-box:hover .cpf-tool-box{
    opacity: 1;
    visibility: visible;
}

/*---- option menu design start ----*/

.folder-opt-block{
    width: 260px;
    background-color: var(--color-new-gray-v1);
    border-radius: 10px;
    box-shadow: 0 3px 6px rgb(0 0 0 / 16%);
    position: absolute;
    padding: 10px;
    top: 0;
    left: 100%;
    opacity: 0;
    transform: scale(0);
    transition: transform 0.3s ease, opacity 0.3s ease, box-shadow 0.3s ease 0.15s;
    transform-origin: top left;
    z-index: 999999;
}

.folder-dropdown-menu{
    position: absolute;
    background-color: var(--color-new-gray-v1);
    border-radius: 10px;
    box-shadow: 0 3px 6px rgb(0 0 0 / 16%);
    padding: 10px;
    width: 260px;
    left: 265px;
    top: 0;
    opacity: 0;
    transform: scale(0);
    transition: transform 0.3s ease, opacity 0.3s ease, box-shadow 0.3s ease 0.15s;
    transform-origin: top left;
}

.folder-opt-block.show-left,
.folder-dropdown-menu.show-left{
    transform-origin: top right;
}

.folder-opt-block.show,
.folder-dropdown-menu.show{
    opacity: 1;
    transform: scale(1);
    z-index: 9999;
}

.folder-dropdown-menu.show-up {
    /* Optional: for styling when shown above */
    transform-origin: bottom left;
}

.folder-dropdown-menu.show-left {
    /* Optional: for styling when shown to the left */
    transform-origin: top right;
}

.btn-folder-opt{
    display: flex;
    align-items: center;
    grid-gap: 10px;
    width: 100%;
    border-radius: 11px;
    padding: 4px 4px 4px 15px;
    border: 0;
    height: 40px;
    font-size: 10px;
    line-height: 16px;
    font-family: var(--font-regular);
    color: var(--color-secondary);
}

.btn-folder-opt:hover{
    background-color: var(--color-new-gray-v1);
}

.btn-folder-opt:active{
    background-color: var(--color-primary) !important;
}

.btn-folder-opt:active svg path{
    fill: var(--bs-white);
}

.folder-opt-svg {
    display: block;
    width: 14px;
    height: 14px;
}

.folder-opt-svg svg,
.af-icon svg,
.cd-thumb-folder-block svg{
    display: block;
    width: 100%;
    height: 100%;
}

.cd-thumb-folder-block svg path{
    fill: var(--color-secondary);
}

.btn-folder-dropdown {
    justify-content: space-between;
}

.folder-opt-content,
.af-content {
    display: flex;
    align-items: center;
    grid-gap: 10px;
}

.folder-search-inp .input-left-icon{
    left: 10px;
    width: 16px;
    height: 16px;
}

.cpf-badge {
    display: flex;
    align-items: center;
    grid-gap: 5px;
    background-color: var(--color-primary);
    border-radius: 50px;
    padding: 7px 15px 7px 10px;
    font-size: 10px;
    line-height: 16px;
    color: var(--bs-white);
}

.prj-list-block .cpf-badge {
    grid-gap: 3px;
    padding: 6px 5px;
    font-size: 8px;
    line-height: 7px;
}

.cpf-badge-svg{
    display: block;
    width: 12px;
    height: 10px;
}

.prj-list-block .cpf-badge-svg {   
    width: 9px;
    height: 9px;
}

.cpf-badge-svg svg{
    display: block;
    width: 100%;
    height: 100%;
}

/*-- sub dropdown start --*/
.add-folder-block {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background-color: var(--bs-white);
    border-radius: 11px;
    padding: 10px 12px;
    margin: 8px 0;
    min-height: 50px;
    cursor: pointer;
}

.af-content{
    font-size: 10px;
}

.af-icon{
    width: 20px;
    height: 20px;
}

.af-icon svg path{
    fill: var(--color-dark-gray-v2);
}

.folder-create-ul{
    position: relative;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    grid-gap: 8px;
    max-height: 300px;
    overflow: hidden;
    overflow-y: auto;
}

.folder-create-li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    font-size: 10px;
    line-height: 16px;
    color: var(--color-dark-gray-v2);
    padding-right: 13px;
}

.cd-thumb-folder-block {
    display: block;
    width: 40px;
    height: 40px;
    background-color: var(--color-arrow-gray);
    border: 1px solid var(--color-arrow-gray);
    border-radius: 9px;
    overflow: hidden;
    padding: 2px;
}

.folder-create-ul .cd-thumb-block{
    width: calc(100% - 20px);
}

.folder-create-ul .cd-text {
    display: block;
    width: calc(100% - 55px);
}

/*-- sub dropdown end --*/

.folder-opt-arrow {
    width: 20px;
    height: 12px;
}

.folder-opt-arrow svg{
    display: block;
    width: 100%;
    height: 100%;
}

.btn-add-folder {
    margin-top: 10px;
}

.btn-svg-icon {
    display: block;
    width: 14px;
    height: 14px;
}

.btn-svg-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

/*---- option menu design end ----*/

/* Bottom Option START */

.bottom-selection-option {
    position: fixed;
    bottom: 70px;
    z-index: 99;
    background-color: var(--bs-white);
    border-radius: 8px;
    left: 50%;
    transform: translateX(-50%);
    padding: 10px 25px;
    box-shadow: 0 3px 6px rgb(0 0 0 / 16%);
    width: 460px;
    max-width: calc(100% - 20px);
}

.project-cont-split {
    display: flex;
    align-items: center;
    justify-content: space-between;  
    column-gap: 20px;
}

.right-icon-option-cont {
    display: flex;
    align-items: center;
    column-gap: 15px;
}
.selected-project-count {
    font-size: 14px;
    font-family: var(--font-regular);
    color: var(--color-secondary);
}

.r-icon-cont {
    width: 23px;
    height: 23px;   
    border-radius: 50%;
    display: flex    ;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.r-icon-cont svg {
    width: 16px;
    height: 16px;
}

.r-icon-cont svg path {
    fill: var(--color-secondary);
}

.r-icon-cont[data-tooltip="More"] svg path {
    stroke: var(--color-secondary);
}

/* Bottom Option END */

.switches-container.folder-switch label,
.switches-container.folder-switch .switch-wrapper {
    width: 75px;
    height: 75px;
}

.folder-switch .switch-icon svg{
    width: 22px;
    height: 22px;
}

.folder-switch .icon-with-text-switch{
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    justify-content: center;
    grid-gap: 2px;
}

.folder-switch .switch-icon{
    width: 100%;
    justify-content: center;
}

.folder-switch .switch{
    background: var(--color-primary);
}

.folder-switch .switch div{
    color: var(--bs-white);
}

.folder-switch .switch div .switch-icon svg path {
    fill: var(--bs-white);
}

/*-------------------------- folder action bar design end --------------------------*/

.btn-delete-folder {
    position: absolute;
    top: 10px;
    right: 10px;
    display: none;
}

.btn-delete-folder:hover svg path {
    fill: var(--bs-white);
}

#append_list_folder .folder-list-li:hover .btn-delete-folder{
    display: block;
}

.project-trash-block .folder-list-content{
    width: 100%;
}

.project-right-content .pencila-loader {
    /* background-color: rgb(247 248 252 / 70%); */
    background-color: transparent;
    height: 85px;
    inset: auto;
    bottom: 0;
    left: 0;
    z-index: 1;
}

.folder-mng-switch {
    width: 300px;
    border: 0;
    line-height: 35px;
    margin-bottom: 0;
}

.folder-mng-switch .switch{
    /* background: var(--color-secondary); */
}

/* .folder-mng-switch label{
    line-height: 48px;
} */

.project-folder-filter {
    position: relative;
    width: 140px;
}

.project-folder-filter .select-styled{
    /* background-color: var(--color-input-bg); */
}

/* Add Product Info modal START */
.modal-1000 {
    max-width: 1000px;
}
.product-form {
    grid-gap: 7px;
    justify-content: flex-start;
    flex-direction: column;
}

.add-product-body {
    display: flex;
}
.add-product-left {
    background-color: var(--color-bg-new);
    padding: 35px;
    border-right: 1px solid var(--color-border-v1);
    max-width: 337px;
}

.add-product-right {
    padding: 35px;
    background-color: var(--color-light-gray);
}

.small-product-title {
    font-size: 13px;
    font-family: var(--font-regular);
    color: var(--color-secondary);
    margin-bottom: 8px;
}
.small-product-description {
    font-size: 10px;
    font-family: var(--font-book);
    color: var(--color-secondary);
    margin-bottom: 0;
}

.small-title-description-cont {
    padding-bottom: 20px;
    margin-bottom: 30px;
    border-bottom: 1px solid var(--color-border-v1);
}

.cm-gl-box {
    display: grid;
    grid-gap: 30px;
    grid-template-columns: repeat(3, 1fr);
}

.cm-gl-drop-box {
    position: relative;
}

.cm-gl-svg {
    display: block;
    width: 100%;
    height: 100%;
}

.cm-gl-svg svg{
    display: block;
    width: 100%;
    height: 100%;
}

.btn-gl-add {
    border: 0;
    padding: 0;
    position: absolute;
    top: 10px;
    right: 10px;
    width: 20px;
    height: 20px;
}

.btn-gl-add svg{
    display: block;
    width: 100%;
    height: 100%;
}

.cm-gl-img-box {
    position: relative;
    height: auto;
    aspect-ratio: 1 / 1;
    background-color: var(--color-bg-new);
    border: 1px solid #E3E4EB;
    border-radius: 11px;
    padding: 10px;
    overflow: hidden;
}

.cm-gl-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 11px;
}

.delete-image-icon {
    background-color: #ff96ab;
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    padding: 5px;
    position: absolute;
    right: 10px;
    top: 10px;
    cursor: pointer;
    opacity: 0;
    transition: .3s;
}

.cm-gl-img-box:hover .delete-image-icon {
    opacity: 1;
}

.delete-image-icon:hover {
    background-color: hsla(0, 0%, 0%, 0.60);
}

.pd-media-inp {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.w-120{
    /* min-width: 95px;
    width: 95px;
    max-width: 95px; */
    min-width: 95px;
    width: 100%;
    max-width: 100%;
}

.add-product-body .search-template-input {   
    border: 1px solid #D4D6DF;
}
.small-input-label-text {
    font-size: 10px;
    line-height: 12px;
    color: #534B4B;
    font-family: var(--font-regular);
    margin-bottom: 7px;
}
.product-form .form-group {
    margin-bottom: 0;
}
.add-product-body .search-template-input {
    /* padding-left: 10px; */
    padding: 5px 20px;
    font-family: var(--font-book);
    font-style: italic;
    height: 36px;
}
.product-image-content {
    position: relative;
    max-height: calc(var(--viewport-height) - 150px);
}
/* Add Product Info modal END */

.btn-unorganized {
    background-color: var(--color-primary);
    color: var(--bs-white);
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 8px;
    font-family: var(--font-regular);
    font-size: 10px;
    color: var(--bs-white);   
    border: 1px solid var(--color-primary);   
    /* height: 40px;
    line-height: 40px; */
    height: 35px;
    line-height: 35px;
    padding: 0 15px;
    border-radius: 9px;
    letter-spacing: 0;
    text-transform: capitalize;
    transition: .4s;
}

.project-popup {
    line-height: 35px !important;
    width: 250px !important;
}

.fl-opt {
    display: flex;
    align-items: center;
    grid-gap: 12px;
}

/*----- free account design start -----*/
/* .free-account-body .template-main-cont{
    max-height: calc(var(--viewport-height) - 354px);
} */
/*----- free account design end -----*/