/* GOBAL_CSS_CHANGES_START_FROM_HERE */
* {
    margin: 0px;
    padding: 0px;
}
html {
    scroll-behavior: smooth;
}
body {
    overflow-x: hidden;
    background: #FFFFFF;
}


h1, h2, h3, h4, h5, h6, p, span, ul, li, a, .btn-default, textarea, label {
    margin: 0;
    padding: 0;
}
li {
    list-style: none;
}
a {
    text-decoration: none;
}
a:hover {
    text-decoration: none;
}
a:focus {
    text-decoration: none;
}
button, input {
    outline: none !important;
}
/* GOBAL_CSS_CHANGES_END_HERE */
/* GOBAL_VAR_CSS_START_FROM_HERE */
:root {
    --white:#FFFFFF;
    --gTWalsheimPro-bold: "GTWalsheimPro-Bold";
    --gTWalsheimPro-medium: "GTWalsheimPro-Medium";
    --gTWalsheimPro-regular: "GTWalsheimPro-Regular";
    --inter-bold: "Inter-Bold";
}
/* GOBAL_VAR_CSS_CSS_HERE */
/* FONT_CSS_START_FROM_HERE */
@font-face {
    font-family: "GTWalsheimPro-Bold";
    src: url("../webfonts/GTWalsheimPro-Bold.ttf");
    font-weight: regular;
    font-style: normal;
}
@font-face {
    font-family: "GTWalsheimPro-Medium";
    src: url("../webfonts/GTWalsheimPro-Medium.ttf");
    font-weight: regular;
    font-style: normal;
}
@font-face {
    font-family: "GTWalsheimPro-Regular";
    src: url("../webfonts/GTWalsheimPro-Regular.ttf");
    font-weight: regular;
    font-style: normal;
}
@font-face {
    font-family: "Inter-Bold";
    src: url("../webfonts/Inter-Bold.ttf");
    font-weight: regular;
    font-style: normal;
}
.container{
    max-width: 1500px;
    margin: 0 auto;
}

.header-row{
    margin: 0px 10px;
}

.img-fluid{
    max-width: 100%;
    height: auto;
}
.header-main-wrap-flex{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.header-main-logo-f{
    display: flex;
    align-items: center;
    gap: 70px;
}
.header-main-logo-icons ul{
    display: flex;
    align-items: center;
    gap: 50px;
}
.header-main-logo-icons ul li{
    position: relative;
}
.header-main-logo-icons ul li::before{
    content: '';
    position: absolute;
    right: -24px;
    width: 2px;
    height: 50px;
    background: #434343;
    top: -2px;
}
.header-main-logo-stext h2{
    font-family: var(--inter-bold);
    font-size: 18px;
    color: var(--white);
}
.header-main-wrapper {
    height: auto;
    background-color: #282828;
    border-top: 10px solid #adc5df;
    border-bottom: 5px solid #c8ffbb;
    padding: 9px 0px;
}
.main-sec-warppper {
    position: relative;
    width: 100%;
    height: 84vh;
}
.main-canva-img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 0px solid #fff;
    border-radius: 0px;
    box-shadow: 1px 0px 20px 12px #00000026;
}

.full-view .main-canva-img{
    zoom: 1.1;
}

.main-left-tools-icons h2{
    font-family: var(--gTWalsheimPro-medium);
    font-size: 16px;
    color: var(--white);
    margin: 0px 0px 20px 0px;
}
.main-left-tools-wrap {
    background-color: #282828;
    position: absolute;
    width: 180px;
    height: 80%;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    padding: 30px 10px;
    border-radius: 0px 10px 10px 0px;
    overflow-x: auto;
}
.main-left-tools-icons ul {
    display: flex;
    /* flex-direction: column; */
    flex-wrap: wrap;
    height: 100%;
    gap: 13px;
    align-items: center;
    justify-content: center;
}

.main-left-tools-icons ul li a {
    display: inline-flex;
    padding: 3px;
    justify-content: center;
    border: 2px solid transparent;
    align-items: center;
    border-radius: 10px;
    transition-duration: .5s;
}

.main-left-tools-icons ul li a:hover{
    border: 2px solid #ffffff;
}

.main-left-tools-icons ul li img {
    height: 50px;
}

.main-left-tools-icons {
    /* padding: 0px 0px 0px 80px; */
}
.main-right-layers-boxs {
    /* padding: 0px 0px 0px 30px; */
}
.main-right-layers-boxs h2{
    font-family: var(--gTWalsheimPro-medium);
    font-size: 16px;
    color: var(--white);
    margin: 0px 0px 20px 0px;
}
.main-right-layers-wrap {
    background-color: #282828;
    position: absolute;
    width: 180px;
    height: 80%;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    padding: 30px 10px;
    border-radius: 20px 0px 0px 20px;
    overflow-x: auto;
    transition-duration: 1s;
}
.main-right-layers-wrap.hidden {
    right: -50%;
}
.show-hide-layers.active{
    opacity: .5;
}


.page-styles.active{
    opacity: .5;
}

.main-right-box-f{
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: #e8eef0;
    padding: 10px;
    border-radius: 10px 0px 0px 10px;
    margin: 0px 0px 10px 0px;
}

.main-right-box-f img {
    width: 40px;
}

.main-right-box-imgtext h6{
    font-family: var(--gTWalsheimPro-medium);
    font-size: 10px;
    color: #000;
    font-weight: 300;
}
.main-right-box-imgtext p{
    font-family: var(--gTWalsheimPro-medium);
    font-size: 11px;
    color: #000;
    font-weight: 300;
}
.main-canva-img-text{
    position: absolute;
    right: 0;
    bottom: -36px;
}
.main-canva-img-text p{
    font-family: var(--gTWalsheimPro-medium);
    font-size: 16px;
    color: #959595;
}
/* HEADER-CSS-START-FROM-HERE */


.tippy-box {
    font-size: 12px !important;
    font-family: var(--gTWalsheimPro-medium);
    background: #2bff00 !important;
    color: #000 !important;
    font-weight: 700;
}

.tippy-arrow {
    color: #2bff00  !important;
}



.background-images {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 100%;
    height: 100%;
    display: none;
    justify-content: center;
    align-items: center;
    background: #0000003b;
}

.background-images.active{
    display: flex;
}

.background-images ul {
    display:flex;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: space-evenly;
    max-height: 400px;
    overflow-x: auto;
    max-width: 900px;
    padding: 10px;
}


.background-images ul li img{
    height: 115px;
}

.modal-header {
    padding: 10px;
}

.inner-modal {
    font-family: var(--gTWalsheimPro-medium);
    background: #fff;
    border-radius: 10px;
    padding: 10px;
    position: relative;
    /* display: flex; */
    justify-content: center;
    align-items: center;
    width: 800px;
    height: 460px;
}

.inner-modal button.close-modal {
    position: absolute;
    z-index: 999;
    right: 10px;
    background: transparent;
    border: none;
    font-size: 22px;
    top: 4px;
    cursor: pointer;
    transition-duration: .5s;
}

.inner-modal button.close-modal:hover {
    color:#820000;
}

.custom-modal {
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    justify-content: center;
    align-items: center;
    background: #00000052;
}   

.custom-modal.active{
    display: flex;
}

.inner-modal ul {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    overflow-x: auto;
    height: 390px;
    /* align-content: center; */
}

.inner-modal ul li img {
    width: 180px;
}

.background-images-modal li {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;
    overflow: hidden;
    height: 200px;
    border: 1px solid #e8e8e8;
    cursor: pointer;
    transition-duration: .3s;
}

.background-images-modal li:hover{
    border: 1px solid #c1c1c1;
}

.background-images-modal li img {
    height: 100% !important;
    width: auto !important;
}


.shapes-modal li {
    border: 1px solid #e8e8e8;
    cursor: pointer;
    transition-duration: .3s;
}


.shapes-modal li:hover{
    border: 1px solid #c1c1c1;
}


div#editingBar {
    top: 111px !important;
    background: #272727 !important;
    padding: 10px !important;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    left: calc(50% - 281.5px) !important;
    box-shadow: 0px 1px 4px 3px rgb(0 0 0 / 26%);
}

button#underlineButton {
    display: none;
}

div#editingBar button,
div#editingBar input,
div#editingBar select{
    border: none;
    font-size: 11px;
    padding: 6px;
    border-radius: 5px;
    font-weight: 600;
    font-family: var(--gTWalsheimPro-medium);
}

button#boldButton {
    background: #dbfffb;
}

button#italicButton {
    font-style: italic;
    background: #dfdbff;
}

input#fontSizeInput {
    background: #dbffe9;
}

select#fontFamilyDropdown {
/*    background: #ffdbed;*/
}

.textbox-modal ul li {
    width: 370px;
    height: 100px;
    border: 1px solid #e8e8e8;
    padding: 6px;
    cursor: pointer;
    transition-duration: .3s;
}


.textbox-modal li:hover{
    border: 1px solid #c1c1c1;
}


.textbox-modal ul li p {
    font-size: 20px !important;
}

.textbox-modal ul li p span {
    font-size: 13px !important;
}

.notifyjs-corner{

    font-family: var(--gTWalsheimPro-medium);
}


.props-images-modal li {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;
    overflow: hidden;
    height: 200px;
    border: 1px solid #e8e8e8;
    cursor: pointer;
    transition-duration: .3s;
}

.props-images-modal li:hover{
    border: 1px solid #c1c1c1;
}

.props-images-modal li img {
    height: 100% !important;
    /*width: auto !important;*/
}



.full-view .main-left-tools-wrap {
    left: -250%;
}

.full-view .main-right-layers-wrap {
    right: -250%;
}

.full-view header.header-main-wrapper {
    display: none;
}

.full-view .main-sec-warppper {
    height: 100vh;
}

.exit-full-view-btn{
    display: none;
}

.exit-full-view-btn img{
    width: 50px;
}

.full-view .exit-full-view-btn {
    display: inline-block;
    position: fixed;
    left: 5px;
    bottom: 0;
    z-index: 9999;
}


body.full-view {zoom: 1;}

.main-left-tools-icons li {
    position: relative;
}

span.page-style-count {
    position: absolute;
    right: 0;
    background: #18697e;
    width: 20px;
    text-align: center;
    font-family: var(--gTWalsheimPro-medium);
    border-radius: 50%;
    color: #fff;
    transition-duration: .5s;
    opacity: 0;
    z-index: 99;
}


span.page-style-count.active {
    opacity: 1;
}

.inner-modal input.search-images {
    position: absolute;
    top: 20px;
    right: 50px;
    height: 30px;
    width: 250px;
    background: transparent;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 0px 10px;
}

.background-images-modal .colors-ul li {
    flex-direction: column;
}


.main-right-layers-wrap .page-options {
    position: absolute;
    bottom: 10px;
    display: flex;
    flex-wrap: wrap;
    font-family: var(--gTWalsheimPro-medium);
}

.main-right-layers-wrap .page-options .add-page-btn {
    color: #ffffff;    
    padding: 10px;
    background: transparent;
    transition-duration: .4s;
    border-radius: 10px;
}

.main-right-layers-wrap .page-options .remove-page-btn {
    color: red;
    padding: 10px;
    background: transparent;
    transition-duration: .4s;
    border-radius: 10px;
}

.main-right-layers-wrap .page-options .remove-page-btn:hover {
    background: red;
    color: #fff;
}


.main-right-layers-wrap .page-options .add-page-btn:hover {
    background: white;
    color: #000;
}


div#shapeEditingBar {
    top: 111px !important;
    background: #272727 !important;
    padding: 10px !important;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    left: calc(25% ) !important;
    box-shadow: 0px 1px 4px 3px rgb(0 0 0 / 26%);
    display: flex;
    position: absolute;
}

div#shapeEditingBar button,
div#shapeEditingBar input,
div#shapeEditingBar select{
    border: none;
    font-size: 11px;
    padding: 6px;
    border-radius: 5px;
    font-weight: 600;
    font-family: var(--gTWalsheimPro-medium);
}

div#shapeEditingBar label{
    font-family:var(--gTWalsheimPro-medium);
    color:#fff;
    font-size:12px;
}


ul.sidebar-nav {
    height: 100%;
    background: linear-gradient(45deg, #ffffff, #a3f392);
    box-shadow: 1px -7px 3px 1px #00000021;
}

ul.sidebar-nav li a {
    color: #121212;
    font-size: 15px;
    padding: 7px 15px;
    display: block;
    border-bottom: 1px solid rgb(0 0 0 / 7%);
    transition-duration: .4s;
}

ul.sidebar-nav {}

ul.sidebar-nav li a.active,ul.sidebar-nav li a:hover {
    background: #4f5964;
    color: #fff;
}