@import url('https://fonts.googleapis.com/css2?family=Gemunu+Libre:wght@200..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@1,900&family=Ubuntu&display=swap');
@font-face {
    font-family: AvantGarde LT Book;
    src: url(./assests/product.ttf);
}

*{
    margin: 0;
    padding: 0;
}
html{
    overflow-x: hidden;
    overflow-y: auto;
    font-family: 'Ubuntu', sans-serif;
    
}
.allContainer{
    width: 100%;
    min-height:100vh;
    background-color: rgb(24,24,24);
    display: flex;
    justify-content: flex-start;
   
    flex-direction: column;
    align-items: center;
    padding-top: 6rem;
}
.preLoaderWebView{
    width: 100%;
    position: fixed;
    top: 0;
    height:100vh;
    background-color: rgb(24,24,24);
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    z-index: 2;
}
.container{
        width: 90%;
        height: max-content;
        
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-direction: column;
        background-color: white;
        border-radius: 1rem;
}
.lithaTextIcoBar_cap-toolbar{
    width: 95%;
    min-height: 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem 0 1rem 0;
    font-family: AvantGarde LT Book;
}
.lithaTextIcoBar_cap-toolbar-left{
    width: 100%;
    min-height: 3rem;
    display: flex;
    justify-content: flex-start;
    
    align-items: center;
}

.lithaTextIcoBar_cap-toolbar-right{
    width: 100%;
    min-height: 3rem;
    display: flex;
    justify-content: flex-end;
    
    align-items: center;
}
.lithaTextIcoBar_cap-toolbar-left img{
    width: 5em;
}
.headerText-stickerHeadTitle{
    font-size: 150%;
    font-family: AvantGarde LT Book;
    text-align:right;


}
.headerText-stickerHeadTitle span{
    color: transparent;
    background-image: linear-gradient(65deg, red, blue);
    -webkit-background-clip:text;
}
.stickerMaker-cen{
    width: 95%;
    height:max-content;
    display: flex;
    justify-content: center;
    align-items: center;

    background-color:rgb(24,24,24);
    border-radius: 1rem;
    margin-bottom: 1rem;
}
.stickerMaker-div{
    width: 100%;
    min-height:30rem;
    display: flex;
    align-items: center;
    justify-content: center ;
    
    padding-top: 1rem;

}
.stickerMaker-div-left{
        width: 100%;
        
        height: max-content;
        display: flex;
        justify-content: center;
        align-items: center;

}
.stickerMaker-div-right{
    width: 100%;
    height: max-content;
    display: flex;
    justify-content: flex-start;
    z-index: 0;
    align-items: center;
    flex-direction: column;
    height: 4rem;

}
.stickerMaker-div{
    width: 100%;
    height:max-content;
    display: flex;
    justify-content: center;
    align-items: center;

    flex-direction: column;
    -webkit-user-select: none;
}
.stickerEditor-div{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    background-color: white;
    flex-direction: column;
    padding-top: 1rem;
    -webkit-user-select: none;
    border-radius: 0 1rem 1rem  0;
    padding-bottom: 1rem;
}
.img-handelerImgDiv-StickerH{
    width:90%;
    height: max-content;

    background-image: url(../media/_ae6e374d-34db-4c21-b4d4-53afbcb7e460.jpeg);
    background-color: rgb(238, 182, 0);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: flex;
    justify-content: center;
    align-items: center;
}
.suggestionBox-stickerMakerNvv{
    width:90%;
    height: max-content;
        z-index: 0;
    background-color: white;
    border-radius: 0;
    transition: 100ms;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    z-index: 2;
    overflow-x: hidden;
    overflow-y: hidden;
    white-space: nowrap;
    font-family: "Gemunu Libre", sans-serif;
    font-size: 200%;
    padding: 0.2rem 0 0.2rem 0;
    text-transform: uppercase;
}
.stickerEditor-box{
    width: 100%;
    height:25%;
    display: flex;
    justify-content:flex-start;
    align-items: center;
    flex-direction: column;
    padding: .2rem 0 .2rem 0;
    margin-bottom: 1rem;
    
}
.stickerEditor-box-title{
    width: 95%;
    height: max-content;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-family: AvantGarde LT Book;
    font-size: 150%;
    white-space: nowrap;

}
.stickerEditor-box-c{
    width: 95%;
    margin-top: 1rem;
    height: max-content;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
input[type="range"] {
    display: block;
    -webkit-appearance: none;
    background-color: #bdc3c7;
    width: 90%;
    height: .3rem;
    border-radius: .5rem;

    outline: 0;
  }
  input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    background-color: rgb(24,24,24);
    width:  1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    border: 2px solid white;
    cursor: pointer;
    transition: .3s ease-in-out;
  }​
    input[type="range"]::-webkit-slider-thumb:hover {
      background-color: white;
      border: .1rem solid rgb(24,24,24);
    }
    input[type="range"]::-webkit-slider-thumb:active {
      transform: scale(1.6);
    }
    .stickerEditor-box-c span{
        font-size: 150%;
        min-width:10%;
        padding: 0 .5rem 0 .5rem;
    }
    input[type="text"] {
        display: block;
        -webkit-appearance: none;
        background-color: #ffffff;
        width: 90%;
        height: 2rem;
        border-radius: .5rem;
        border: .3rem solid rgb(24,24,24);
        outline: 0;
        padding-left: 5%;
        font-family: AvantGarde LT Book;
        font-size: 110%;

      }
      input[type="text"]::selection{
        background-color: rgba(24, 24, 24, 0.137);
      }

.addImg_btn{
    width: max-content;
    height: max-content;
    display: flex;
    color: white;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    white-space: nowrap;
    font-weight: 500;
    font-size: 120%;
    padding: .2rem 2.5% .2rem 2.5%;
    background-color: rgb(24,24,24);
    border-radius:.2rem;
}
.fdihglfUGiougtI{
    width:  2.5rem;
    height: 2.5rem;
    display: block;
    position: relative;
    animation: getstartedbtn-active-anim 1500ms linear infinite;
    background-image: none;
}
.fdihglfUGiougtI::after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    height: auto;
    width: auto;
    border: 5px solid rgb(24, 24, 24);
    border-radius: 50%;
    clip-path: polygon(50% 50%, 50% 0%, 100% 0%,100% 80%);
    animation: getstartedbtn-active-anim-inner 1500ms cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite;
}
.preloaderH_elm{
    width: 3rem;
    height:3rem;
    display: block;
    position: relative;
    animation: getstartedbtn-active-anim 1500ms linear infinite;
    background-image: none;
}
.preloaderH_elm::after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    height: auto;
    width: auto;
    border: 5px solid rgb(255, 255, 255);
    border-radius: 50%;
    clip-path: polygon(50% 50%, 50% 0%, 100% 0%,100% 80%);
    animation: getstartedbtn-active-anim-inner 1500ms cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite;
}
    @keyframes getstartedbtn-active-anim-inner {
    0%   { transform: rotate(-180deg); }
    50%  { transform: rotate(-160deg); }
    100% { transform: rotate(180deg); }
}
@keyframes getstartedbtn-active-anim {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.finishBtn_landing_end{
    width: max-content;
    height: 3rem;
    background-color: transparent;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-radius: .2rem;
    display: flex;
    justify-content: center;
    color: white;
    align-items: center;
    padding-left:  5%;
    padding-right: 5%;
    transform: scale(.9);
    cursor: default;
    font-size: 130%;
    white-space: nowrap;
    background-color:rgb(0, 0, 0);
    transition: 100ms;
    border: .1rem solid transparent;

}
.finishBtn_landing_end svg{
    width: 1.5rem ;
    height: 1.5rem;
    fill: white;
    margin-right: 3%;
}
.endTags{
    width: 100%;
    height: max-content;
    margin-top: 5rem;
}
marquee {
    width: 100%;
    height: max-content;
    padding: .3rem 0 .3rem 0;
    background-image: linear-gradient(90deg, rgb(24,24,24) 5%,white 90%, rgb(24,24,24)  );
    color:rgb(24, 24, 24);
    font-family: "Gemunu Libre", sans-serif;
    font-size: 220%;
    text-align: right;
}
/*PostAction*/
.post-action-div{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

}
.post-action-div-load-wrap{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-size: 190%;
    font-weight: 600;
    white-space: pre-line;
    font-family: 'Gemunu Libre', sans-serif;

}
.postBtnDefWithHeightDiv{
    min-width: 40%;
    height: max-content;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 5%;
    background-color: rgb(24, 24, 24);
    border-radius: 1rem;
    color: white;
    font-family: AvantGarde LT Book;
    font-size: 170%;
    fill: white;
    white-space:pre-line;
    text-align:center;
    margin-bottom: 1rem;
    transition: 100ms;

}
.postBtnDefWithHeightDiv svg{
    margin-right: 5%;
    width:  2rem;
    height: 2rem;
}
.gfukgvfudkfU{
    visibility: hidden;
    position: fixed;
}
@media only screen and (max-width: 773px){
    .stickerMaker-cen{
        flex-direction: column;
        justify-content:flex-start ;
    }
    .stickerEditor-div{
        border-radius: 0 0 1rem 1rem;
        padding-top: 2rem;
    }
}