/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.12,
* Autoprefixer: v10.4.4
* Browsers: last 4 version
*/

/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.12,
* Autoprefixer: v10.4.4
* Browsers: last 4 version
*/

@import url(./fonts/stylesheet.css);


canvas{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99999;
}



html *:not(input){
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */ /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

html.prevent-scroll:not(.disabled){
   overflow: hidden ;
}

.milimetrico-clone{
    /*z-index: 9999999999999999;*/
    z-index: 0;
    pointer-events: all !important;
    width: -moz-fit-content !important; 
    width: -webkit-fit-content !important; 
    width: fit-content !important

}

.element-container{
    width: fit-content !important;
}


.milimetrico-clone img{
    width: 100%;
}

.absolute{
    position: absolute;
}

.obfuscate{
    /*opacity: 0.2 !important;*/
  
}
ui.obfuscate{
    /*opacity: 0.2 !important;*/
    left: -65% !important
}

.center{
    -webkit-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
}

input{
    font-family: 'Segoe Script Regular';
    z-index: 99999;
    opacity: 1;
    display: block;
    position: fixed;
    width: 100%;
    height: 100vh;
    height: -webkit-fill-available;
    height: -moz-available;
    height: fill-available;
    padding: 20px;
    font-size: 25px;
    line-height: auto;
    display: none;
}

#confirma{
    width: 40px;
    height: 40px;
    right: 40px;
    top: 0;
    position: fixed;
    z-index: 999999;
    padding: 15px;
    display: none;
    margin-right: 15px;
}

#cancela{
    width: 40px;
    height: 40px;
    right: 0;
    top: 0;
    position: fixed;
    z-index: 999999;
    padding: 15px;
    display: none;
}

#cancela img, #confirma img{
    width: 100%;
    
}

.hide{
    display: none !important;
}

.disabled:not(html){
    pointer-events: none;
    -ms-touch-action: none;
        touch-action: none;
}

html.disabled *{
    pointer-events: none;
    -ms-touch-action: none;
    touch-action: none;

}

preloader{
    position: absolute;
    top: 0;
    left: 0;
}

preloader.loaded.triggered{
    display: none !important
}


html{
font-family: 'Signika Negative', Georgia, 'Times New Roman', Times, serif;
color: #1b1464;
overflow: scroll;
overflow-x: hidden;
/*overflow: hidden;*/
/*height: -webkit-fill-available;*/
height: 120vh;
/*height: calc(var(--vh) * 107);
width: calc(var(--vw) * 100);*/
-ms-touch-action:pan-y;
touch-action:pan-y;
}


.hitarea{
    z-index:0;
    pointer-events: none;
}



caderno img.hide-in-desktop{
    z-index: -1;
}


body{
overflow: hidden;
margin: 0;
height: 100%;
width: 100%;
}



portrait-warning{
display: none !important;
}

fullscreen-warning{
color: white;
width: 100vw;
height: 102vh;
z-index: 9999999999999;
background-color: #333333;
position: fixed;
top: 0;
left: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-line-pack: center;
align-content: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
    justify-content: center;
background-position: top center;
background-size: 100% auto;
background-repeat: no-repeat;
pointer-events: none;
}

fullscreen-warning img{
position: fixed;
top:50%;
left: 50%;
max-width: unset;
width: auto;
height:80vh;
-webkit-transform: translate(-50%,-50%); 
-ms-transform: translate(-50%,-50%); 
transform: translate(-50%,-50%);
}

overlay{
    
    width: 100vw;
    height: 100vh;
    position: fixed;
    background-color: rgba(2,31,6,0.8);
    z-index: 1113;
}

overlay a{
    width: fit-content;
    height: fit-content;
}

overlay a img{
    width: 100%;
}


overlay img{

    width: 55%;
}

section#container{
height: 100%;
}


#conteudo,#splash-screen{
    background: url(../links/media/artes-assets/bg.png);
    background-size: cover;
    background-position: center;
    min-height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    z-index: 3;
}

#splash-screen{
    z-index: 998;
}

#splash-screen.force-show{
    display: block !important;
    opacity: 1 !important;
}

overlay{
    background: url(../links/media/artes-assets/bg_fim.jpg);
    background-position: center center;
    position: absolute;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    height: 100vh;
    align-items: center;
    top: 0;


}

ui{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    width: 53%;
    z-index: 1;
    position: fixed;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    left: -65%;
    top: 0%;
    -webkit-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

ui.active{
    
    left: 0%;
    z-index: 3 !important;
    
}

ui div.content{
    width: 100%;
   display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    position: absolute;
    height: 100%;
    background-size: cover;
    z-index: 1;
    align-content: center;
}

ui div.content.active{
    z-index: 2;
}

ui div.content .thumb{
    width: auto;
    -ms-flex-item-align: center;
        -ms-grid-row-align: center;
        align-self: center;
        height: 15%;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 34%;
            flex: 0 0 34%;
    text-align: center;
    display: none;
}

ui.active div.content .thumb{

    display: block;
    max-width:15%;
    height: fit-content;    

}

ui div.content .thumb img{
    width: 100%;
    max-width: 70%;
    pointer-events: none;
}





ui div.content {
    background-size: 100% !important;
}

ui menu{
    position: absolute;
    right: 0%;
    top: 0;
    /*z-index: 99999;
    width: 6%;*/
    height: 100%;
    -webkit-margin-before: 0;
            margin-block-start: 0;
    text-align: left;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-transform: translate(100%, 0);
        -ms-transform: translate(100%, 0);
            transform: translate(100%, 0);
    padding: 0;
}

ui menu > .menu-item{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    /*-webkit-writing-mode: vertical-rl;
        -ms-writing-mode: tb-rl;
            writing-mode: vertical-rl;*/
    text-orientation: mixed;
    width: auto;
    height: 10%;
}

ui menu > .menu-item img{
    height: 95%;
    pointer-events: none;
}


ul div.recolher img{
    width: 35px;
}

ui .recolher{
    position: absolute;
    top: 8%;
    left: 4%;
    z-index: 11;
    width: 85px;
}

/*
.element-container{
    position: absolute;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
}

*/

#overlay-mensagens{
    z-index: 1;
    position: absolute;
    width: 39%;
    top: 8%;
    right: 11%;
    height: 30vh;
    pointer-events: none;
}

#overlay-mensagens .save{
    width: 28%;
    position: absolute;
    left: 60%;
    top: 55%;
    -webkit-transform: translate(-50%,0);
        -ms-transform: translate(-50%,0);
            transform: translate(-50%,0);
}

.element-container{
    position: absolute;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
}


.element-container img{
    pointer-events: none;
}

.element-container [button]{
    opacity: 0;
    pointer-events: none;
}

button:hover,[button]:hover{
    opacity: 0.6 !important;
    cursor: pointer;
    -webkit-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
            transform: scale(1.1);
}

*[semitransparent="false"]{
    opacity: 1;
    /*z-index: 111;*/
   
}

*[semitransparent="true"]{
    opacity: 0.3;
    z-index: 0;
    pointer-events: none;
}

.transparent{
    opacity: 0;
    transition: all 1s ease-in-out;
}

.element-container [button].active{
    opacity: 1;
    pointer-events: all;
}

.element-container .top{
    width: 4vw;
    height: 4vw;
    background-color: black;
    position: absolute;
    top: -18%;
    left: 50%;
    -webkit-transform: translate(-50%,0)  rotate(90deg);
        -ms-transform: translate(-50%,0)  rotate(90deg);
            transform: translate(-50%,0)  rotate(90deg);
    background: url(../links/media/artes-assets/setinha.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 50%;
}

.element-container .bottom{
    width: 4vw;
    height: 4vw;
    position: absolute;
    bottom: -25%;
    left: 50%;
    -webkit-transform: translate(-50%,0)  rotate(-90deg);
        -ms-transform: translate(-50%,0)  rotate(-90deg);
            transform: translate(-50%,0)  rotate(-90deg);
    background: url(../links/media/artes-assets/setinha.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 50%;
}

.element-container .left{
    width: 4vw;
    height: 4vw;
    background-color: black;
    position: absolute;
    top: 50%;
    left: -23%;
    -webkit-transform: translate(0,-50%);
        -ms-transform: translate(0,-50%);
            transform: translate(0,-50%);
    background: url(../links/media/artes-assets/setinha.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 50%;
}

.element-container .right{
    width: 4vw;
    height: 4vw;
    background-color: black;
    position: absolute;
    top: 50%;
    right: -23%;
    -webkit-transform: translate(0,-50%) rotate(
    180deg
    );
        -ms-transform: translate(0,-50%) rotate(
    180deg
    );
            transform: translate(0,-50%) rotate(
    180deg
    );
    background: url(../links/media/artes-assets/setinha.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 50%;
}

.trash{
    width: 3vw;
    height: 3vw;
    position: absolute;
    background: url(../links/media/artes-assets/delete.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 50%;
    z-index: 9999;
}
.size{
    width: 3vw;
    height: 3vw;
    top: 20px;
    position: absolute;
    background: url(../links/media/artes-assets/size.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 50%;
    z-index: 9999;
}
.moveup{
    width: 3vw;
    height: 3vw;
    top: 20px;
    position: absolute;
    background: url(../links/media/artes-assets/moveup.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 50%;
    z-index: 9999;
}
.movedown{
    width: 3vw;
    height: 3vw;
    top: 20px;
    position: absolute;
    background: url(../links/media/artes-assets/movedown.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 50%;
    z-index: 9999;
}




.staged-element{
    /*position: absolute;*/
    pointer-events: none;
}

.staged-element.emoji{
    /*max-width: 100%;*/
    padding: 0;
    margin: 0;
} 

.staged-element{
    -webkit-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
    /*width: 100% !important;
    height: 100% !important;
    min-height: 50px;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);*/
}



.staged-element.emoji{
    /*width: 13vh;*/
    width: 100%;
    height: 100%;
    /*transform: scale(0.6);*/
    /*padding: 12% 11% 2% 8%;*/
    -ms-user-select: none;
        user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
}

.staged-element.sticker{
    /*width: 14vh;
    height: auto;*/
    /*width: 10vh;
    height: 10vh;*/
    width: 100%;
    height: 100%;
    /*padding: 22% 15% 10% 16%;*/
    -ms-user-select: none;
        user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
}


.editablebox{
    /*width: 15vh;
    height: 15vh;*/
    /*width: 15vh;
    height: 15vh;*/
    margin: 4px;
    text-align: center;
    padding: 3px;
    vertical-align: middle;
    /*resize: both;*/
    overflow: hidden;
    opacity: 1;
    
    
    z-index: 1;
    top: 43%;
    font-size: clamp(1em, 1.8em, 2vh);
    /*-webkit-transform: none;
        -ms-transform: none;
            transform: none;*/
    
    background-size: 100% 100% !important;  
    background-position: center center  !important;
}

.milimetrico-clone.editablebox p {
    padding: 5% 7%;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
    resize: none;
    -webkit-user-modify: read-write;
    pointer-events: all;
    width: 53%;
    height: 53%;
    top: 25%;
    position: absolute;
    left: 50%;
    -webkit-transform: translate(-50%,-23%);
        -ms-transform: translate(-50%,-23%);
            transform: translate(-50%,-23%);
}

.milimetrico-clone.postits.editablebox p {
    -webkit-transform: translate(-50%,5%);
        -ms-transform: translate(-50%,5%);
            transform: translate(-50%,5%);
    height: 37%;
}


ui .editablebox p {
    display: none;
}

.editablebox.postit_1{
    background: url(../links/media/artes-assets/postit_1.png);
    width: 17vw;
    height: 28vh;
}

.editablebox.postit_1 p{
    width: 76%;
    height: 65%;
    padding: 0;
    top: 50%;
    left: 50%;
    position: absolute;
    -webkit-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
}

.editablebox.postit_2{
    background: url(../links/media/artes-assets/postit_2.png);
    width: 17vh;
    height: 30vh;
}

.editablebox.postit_2 p{
    width: 70%;
    height: 61%;
    padding: 0;
    margin-top: 25%;
    top: 50%;
    left: 50%;
    position: absolute;
    -webkit-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
}

.editablebox.postit_3{
    background: url(../links/media/artes-assets/postit_3.png);
    width: 18vw;
    height: 28vh;
    margin-bottom: -11%;
}

.editablebox.postit_3 p{
    width: 63%;
    height: 48%;
    padding: 0;
    margin-top: 0%;
    top: 50%;
    left: 50%;
    position: absolute;
    -webkit-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
}

.editablebox.postit_4{
    background: url(../links/media/artes-assets/postit_4.png);
    width: 9vw;
    height: 18vh;
}

.editablebox.postit_4 p{
    padding: 0;
    margin: 0;
    margin-top: -2%;
    height: 61%;
    width: 64%;
    top: 50%;
    left: 50%;
    position: absolute;
    -webkit-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
}

.editablebox.postit_5{
    background: url(../links/media/artes-assets/postit_5.png);
    width: 12vw;
    height: 22vh;
}

.editablebox.postit_5 p{
    padding: 0;
    margin: 0;
    margin-top: 17%;
    height: 61%;
    width: 73%;
    top: 50%;
    left: 50%;
    position: absolute;
    -webkit-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
}

.editablebox.postit_6{
    background: url(../links/media/artes-assets/postit_6.png);
    width: 10vw;
    height: 19vh;
}

.editablebox.postit_6 p{
    padding: 0;
    margin: 0;
    margin-top: 2%;
    height: 72%;
    width: 68%;
    top: 50%;
    left: 50%;
    position: absolute;
    -webkit-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
}

.editablebox.postit_7{
    background: url(../links/media/artes-assets/postit_7.png);
    width: 20vw;
    height: 11vw;
    margin-left: -10%;
    margin-right: -15%;
    text-align: center;
    padding-right: 23%;
}

.editablebox.postit_7 p{
    padding: 0;
    margin: 0;
    margin-top: 3%;
    height: 63%;
    width: 61%;
    top: 50%;
    left: 50%;
    position: absolute;
    -webkit-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
}

.editablebox.postit_8{
    background: url(../links/media/artes-assets/postit_8.png);
    width: 15vw;
    height: 23vh;
}

.editablebox.postit_8 p{
    padding: 0;
    margin: 0;
    margin-top: 3%;
    height: 63%;
    width: 61%;
    top: 50%;
    left: 50%;
    position: absolute;
    -webkit-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
}

.editablebox.imagebox{
    padding: 0;
}

.editablebox p{
    line-height: 21px;
}

.editablebox img{
    width: 100%;
    height: 100%;
    /*position: absolute;*/
}

.thumb{
    color: white;
    opacity: 1;
    cursor: pointer;
    -webkit-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
    pointer-events: all !important;
}

.thumb:hover{
    opacity: 0.5;
}

[width-fix="true"]{

    /*min-width: 5vw !important;*/
    /*-webkit-animation-fill-mode: unset !important;
    animation-fill-mode: unset !important;*/
}

/**/


caderno{
    height: 100vh;
    width: 100vw;
    position: absolute;
    right: 0;
    top: 3%;
    pointer-events: none;
}

caderno img{
    /*width: 110%;*/
    height: 100%;
    min-height: 45vh;
    margin-left: auto;
    right: -2%;
    top: 0%;
    position: absolute;
}

#mainbox-wrapper{
    pointer-events: all;
    -ms-touch-action: auto;
        touch-action: auto;
    width: 70vh;
    position: absolute;
    top: -1vh;
    right: 5vh;
    z-index: 9999;
    display: table;
    height: -webkit-max-content;
    height: -moz-max-content;
    height: max-content;


    
}

.editablebox#mainbox{
    right: 12vh;
    height: auto;
    z-index: 10;
    top: 11vh;
    background: none;
    padding: 0;
    font-size: clamp(0.8em,2em,4vh);
    width: 66vh;
    height: 10vh;
    /* background-color: rgba(0,0,0,0.3); */
    position: absolute;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
    line-height: auto;
    display: table-cell;
}

.mainbox-wrapper.savemode{

    margin-right: -19vh !important;
    top: 3vh;

}

.mainbox-wrapper.savemode .editablebox#mainbox{

   
    min-height: 60px;

}


.titulo{
    position: absolute;
    top: 3%;
    left: 3%;
}

.titulo img{
    width: 30vw;
    min-width: 250px;
}

.botoes{
    width: 100vw;
    height: 100vh;
}

button{
    color: black;
    background-color: gray;
}



.compartilhar{
    right: 6vh;
    height: auto;
    z-index: 1111;
    bottom: 17%;
    padding: 0;
    font-size: clamp(1em,2em,4vh);
    /* background-color: rgba(0,0,0,0.3); */
    position: absolute;
    -webkit-transform: none;
        -ms-transform: none;
            transform: none;
}

.finalizar{
    right: 10%;
    height: auto;
    z-index: 1111;
    top: 89%;
    padding: 0;
    width: 9%;
    font-size: clamp(1em,2em,4vh);
    /* background-color: rgba(0,0,0,0.3); */
    position: absolute;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
    cursor: pointer;
}

.voltar,.salvar{
    right: 38.7%;
    width: 6%;
    height: auto;
    z-index: 1111;
    bottom: 8%;
    padding: 0;
    font-size: clamp(1em,2em,4vh);
    position: absolute;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
    cursor: pointer;
}

.som{
    right: 39.7%;
    width: 5%;
    height: auto;
    z-index: 1111;
    bottom: 12%;
    padding: 0;
    font-size: clamp(1em,2em,4vh);
    position: absolute;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
}

.info{
    left: 12vh;
    height: auto;
    z-index: 0;
    bottom: 2%;
    background: none;
    padding: 0;
    font-size: clamp(1em,2em,4vh);
    position: absolute;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
}

.hitarea{
    /*background-color: rgba(255,0,0,0.3);*/
    position: absolute;
    top: 0;
    left: 0;
    height: calc(var(--vh) * 100);
    width: calc(var(--vw) * 100);
    z-index: 1;
}

.hitarea .caderno{
    height: calc(var(--vh) * 79);
    /* width: calc(var(--vh) * 82); */
    position: absolute;
    right: 9%;
    bottom: 3%;
    width: 38%;
}

.hitarea.finalized .caderno{
 /*    height: calc(var(--vh) * 81);
    
    position: absolute;
    right: 9%;
    bottom: 12%;
    width: 38%;
    -webkit-transition: all 0.7s ease-in-out;
    -o-transition: all 0.7s ease-in-out;
    transition: all 0.7s ease-in-out;*/
}

.salvar{
    right: 38.7%;
    width: 6%;
    height: auto;
    z-index: 1111;
    bottom: 9%;
    padding: 0;
    font-size: clamp(1em,2em,4vh);
    position: absolute;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
}

.hitarea{

}

.hitarea::before {
    content: " ";
    width: 100%;
    position: absolute;
    height: 100%;
    background-image: url(./../links/media/artes-assets/faixa-jogo.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 97% 98%;
}

.splash-screen .background{
    left: -1%;
    position: fixed;
    top: 0;
    height: 100%;
    width: auto;
}

.splash-screen .start-button{
    position: absolute;
    top: 0%;
    left: 62%;
    z-index: 111;
    width: 31%;
    opacity: 0;
    height: 27vh;
}
.splash-screen .start-button:hover{
    opacity: 0 !important;
}

.splash-screen h1,.splash h2{
    position: absolute;
    z-index: 11;
}

.splash-screen h1{
    color: #ed1c24;
    left: 50%;
    top: 1%;
    width: 66vh;
    -webkit-transform: translate(-56%,0%);
        -ms-transform: translate(-56%,0%);
            transform: translate(-56%,0%);
    font-size: clamp(2.5em,2em,2vh);
    line-height: 38px;
}

.splash-screen h2{
    width: 75vh;
    top: 30%;
    left: 50%;
    position: absolute;
    -webkit-transform: translate(-49%, 0);
        -ms-transform: translate(-49%, 0);
            transform: translate(-49%, 0);
    font-size: clamp(1.1em,1.3em,4vw);
    color: #2e3192;
}

preloader{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 100vw;
    height: 100vh;
    z-index: 11111111;
    background-color: white;
}

.force-opacity{
    opacity: 1 !important;
}

@media (max-width: 900px) {

.mainbox-wrapper.savemode{
    top: 4vh !important;
    max-width: 250px !important;
    margin-right: -1vh !important;
}

.mainbox-wrapper.savemode.ios{

    margin-right:10vh !important;

}

#mainbox-wrapper.savemode .editablebox#mainbox{
   
    font-size: 15px !important;
    /*max-width: 250px !important;*/
    max-width: 200px !important;
}


}


@media (min-width: 901px) {

.hide-in-desktop{
display: none !important;
}

fullscreen-warning{
display: none !important;
}


}

@media (max-width: 900px) {

    pin.trash , pin.size, pin.movedown, pin.moveup{

        width: 4vw;
        height: 4vw;
        background-size: 100%;
    }






}



@media all and (orientation: portrait) {


portrait-warning{
display: block !important;
position: fixed;
top: 0%;
left: 0%;
z-index: 999;
}

portrait-warning img{
width: 100vw;
height: 100vh;
min-width: 100vw;
}

fullscreen-warning{
display: none;
}

}


svg{
    width: 50px;
    height: 50px;
    max-width: 50px;
    max-height: 50px;
}

#browser-warning{
    width: 100vw;
    height: 100vh;
    background-color: black;
    z-index: 99999999999999999;
    position: fixed;
    z-index: 99999999999999999999;
    text-align: center;
    color: white;
}

#browser-warning div{
    position: absolute;
    -webkit-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
}

#browser-warning h1{
    text-align: center;
    margin: 0;
    width: auto;
}

#browser-warning img{
    width: 100%;
    max-width: 250px;
}

.force-hide{
    display: none !important;
}

.information{
    position: absolute;
    left: 50%;
    top: 50%;
    display: block;
    height: auto;
    width: 5%;
    z-index: 9;
}

.information img{
    width: 100%;
    height: 100%;
}

*:not(contenteditable):not(input) {
    -webkit-touch-callout: none; /* iOS Safari */
      -webkit-user-select: none; /* Safari */ /* Konqueror HTML */
         -moz-user-select: none; /* Old versions of Firefox */
          -ms-user-select: none; /* Internet Explorer/Edge */
              user-select: none; /* Non-prefixed version, currently
                                    supported by Chrome, Edge, Opera and Firefox */
}

#overlay-finalizacao{
    width: 81%;
    height: auto;
    text-align: center;
    bottom: 0%;
    left: 0%;
    position: absolute;
    z-index: 11111111111111;
    color: white;
    -webkit-box-align: baseline;
        -ms-flex-align: baseline;
            align-items: baseline;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

#overlay-finalizacao img{
    display: block;
    margin-top: auto;
    width: 65%;
}

#overlay-lixeira{
    width: 100%;
    z-index: 0;
    position: absolute;
    bottom: -1%;
    -webkit-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}


#overlay-reciclagem{
    position: absolute;
    z-index: 11;
    -webkit-transform: translate(-100%,0);
        -ms-transform: translate(-100%,0);
            transform: translate(-100%,0);
    -webkit-transition: all 7s linear;
    -o-transition: all 7s linear;
    transition: all 7s linear;
    width: 21%;
    bottom: 0;
    
}

#overlay-reciclagem.active{
    position: absolute;
    z-index: 11;
    -webkit-transform: translate(600%,0);
        -ms-transform: translate(600%,0);
            transform: translate(600%,0);
    -webkit-transition: all 7s linear;
    -o-transition: all 7s linear;
    transition: all 7s linear;
}

button#restart{
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    font-size: 2rem;
    z-index: 11;
    border-radius: 22px;
    padding: 19px;
    border: 0;
    color: white;
}


fullscreen-warning{
    display: none;
}


.sjx-drag{
    /*z-index: 11111111111111;*/
    z-index: 0;
}

.sections{
    position: fixed;
    z-index: 2;
    width: 42%;
    height: 90vh;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    bottom: 0;
    left: 10px;
}

.sections .menu-item{
        width: 40%;
}

.sections .menu-item:hover{
    -webkit-transition: all 0.4s ease-out;
    -o-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
    opacity: 0.7 !important;
    -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
            transform: scale(1.1);
    cursor: pointer;
}

.sections .menu-item img{
        width: 100%;
        pointer-events: none;
}

#enviar{
    right: 10%;
    width: 10%;
    height: auto;
    z-index: 1111;
    bottom: 8%;
    padding: 0;
    font-size: clamp(1em,2em,4vh);
    position: absolute;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
    cursor: pointer;
}

/*
[size="0"] img{

    zoom: 0.3;
    margin: auto;
    display: block;

}

[size="1"] img{

    zoom: 0.5;
    margin: auto;
    display: block;

}

[size="2"] img{

    zoom: 1;
    margin: auto;
    display: block;

}
*/

@-webkit-keyframes walk{
    0%{
    -webkit-transform: translateY(35%);
            transform: translateY(35%);
    }
    75%{
    -webkit-transform: translateY(25%);
            transform: translateY(25%);
    }
    100%{
        -webkit-transform: translateY(35%);
                transform: translateY(35%);
    }
}

@keyframes walk{
    0%{
    -webkit-transform: translateY(35%);
            transform: translateY(35%);
    }
    75%{
    -webkit-transform: translateY(25%);
            transform: translateY(25%);
    }
    100%{
        -webkit-transform: translateY(35%);
                transform: translateY(35%);
    }
}

.walk{
    -webkit-animation: walk 0.6s ease-out infinite;
            animation: walk 0.6s ease-out infinite

}

#conteudo.finalized{
    background-color: white;
    background-image: unset; 
}

#conteudo.finalized .hitarea::before{
    background-color: white;
    background-image: unset;
}.example {
    display: -ms-grid;
    display: grid;
    -webkit-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    background: -o-linear-gradient(top, white, black);
    background: -webkit-gradient(linear, left top, left bottom, from(white), to(black));
    background: linear-gradient(to bottom, white, black);
}


#stickers_tampinhas{
    gap: 2% 18%;
    margin-top: 2%;
}

#stickers_latinhas{
    gap: 3% 15%;
}

#stickers_latinhas .thumb{
    max-width: 10%;
}

#stickers_outros{
    gap: 1% 7%;
    padding-top: 4%;
}
#stickers_outros .thumb{
    max-width: 11%;
}

#stickers_papelao{
    gap: 4% 16%;
}

#stickers_pneus{
    gap: 5% 14%;
}

#stickers_pneus .thumb{
    max-width: 25%;
}

#stickers_lampadas{
    gap: 2% 13%;
    padding-top: 7%;
}
#stickers_lampadas .thumb{
    margin-top: 2%;
    max-width: 10%;
}

#stickers_pilhas{
    justify-content: flex-start;
    gap: 0% 17%;
    padding-top: 6%;
    padding-left: 1%;
}

#stickers_pilhas .thumb{
    max-width: 8%;
}

pin{
    background-color: white;
    cursor: pointer;
}

pin:hover{
    transform: scale(1.4);
    transition: all 0.5s;
   
}

pin.trash , pin.size, pin.movedown, pin.moveup{
    z-index: 1111111111111;
}

#menu-fim{
    position: absolute;
    bottom: 10%;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}

.ajuda{
    width: 100vw;
    height: 100vh;
    background-color: rgba(0,0,0,0.9);
    display: flex;
    justify-content: center;
    align-content: center;
    position: fixed;
    z-index: 111;
}

.ajuda img{
    width: auto;
    height: auto;
    margin: auto;
}

.ajudabutton{
    position: fixed;
    z-index: 11;
    bottom: 10px;
    left: 10px;
    width: 5%;
    max-width: 50px;
    cursor: pointer; 
} 


.disabled{
    pointer-events: none  !important;
}