/* scripts */
.selectedTool {
    background: white;
}
.pointerEventsNone {
    pointer-events: none;
}
.cursorNone {
    cursor: none;
}



*{
    margin:0;
    padding:0;
    user-select: none;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
}
body {
    margin: 0px;
    padding: 0px;
}
.zoom {
    width: 50%;
}





.unselectedTool, .zoom {
    padding: 5px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 79;
}

.unselectedTool {
    padding: 10px;
}


canvas {
    margin-left:0;
    position: absolute;
    background: #00000000;
}

#container {
    margin-left:0;
    position: absolute;
    overflow: hidden;
    /* background-color: rgba(29, 29, 78, 0.452); */
}

#navbar {
    text-align: right;

    position: absolute;
    min-height: 100%;
    max-height: 100%;
    width: 12vw;
    background: #1b1b1b;
    /* overflow-y: scroll; */
    overflow-x: hidden;
}

#Sidebar {
    position: absolute;
    /* min-height: 100%; */
    width: 80px;
    background: #e3e3e3;
    margin:0px;
    padding: 0px;
}


#container .drawnshape{
    /* border-radius: 3%; */
    transition: box-shadow 150ms;
    color: white;
    position:relative;
}
#container .drawnshape:hover,
.drawnshape.contextShape{
    box-shadow: 0px 0px 40px -10px, inset white 0px 0px 23px -8px;
    transition: box-shadow 300ms;
}
img.drawnshape{
    position: absolute;
    left:0;
    top:0;
}




nav .text{
    color: white;
    text-align: right;
    font-size: 25px;
    font-weight:600;
    line-height: 65px;
    background: #1e1e1e;
    letter-spacing: 1px;
}

nav ul{
    background: #1b1b1b;
    height:100%;
    width:100%;
    list-style: none;
    position: relative;
}
nav ul li{
    line-height: 60px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    
}
nav ul li a{
    position: relative;
    color: white;
    text-decoration:none;
    font-size: 18px;
    padding-right: 40px;
    font-weight: 500;
    display: block;
    width:100%;
    border-right: 3px solid transparent;
    transition: color 0.3s;
    transition: background 0.3s ease;
}
nav ul li a:hover{
    color:cyan;
    background: #222222;
    border-right-color: cyan;
}
nav ul ul{
    position: static;
    max-height:60%; 
    display: none;
    transition-duration: 1s;
    
}
nav ul .local-show.show{
    display: block;
    
}
nav ul .youtube-show.show3{
    display: block;
}
nav ul .box-show.show1{
    display: block;
}
nav ul .ffdecks-show.show2{
    display: block;
}

nav ul ul li{
    line-height: 42px;
    border-bottom: none;
}
nav ul input{
    width: 100%;
    top:0px;
    left: 0px;  
    text-align: left;
    border: #00000000;
    background: #1b1b1b;
    border-bottom: 2px solid cyan;
}
nav ul ul li a{
    font-size: 17px;
    color: #e6e6e6;
    padding-left: 40px;
}
nav ul li a i{
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    font-size: 22px;
    transition: transform 0.4s;
}
nav ul li a i.rotate{
    transform: translateY(-50%) rotate(-180deg);
}

.bin{
    position: absolute;
    right: 0px;
    bottom:  0px;
    padding-bottom: 22px;
    padding: 25px;
    color: #20202080;
}
.bin:hover{
    border-radius: 50%;
    /* color: red; */
    box-shadow: red 0px 0px 30px, inset red 0px 0px 30px;
}

.save-btn{
    font-weight: 300;
    color: black;
    position: absolute;
    right: 0px;
    top:  0px;
    padding-top: 22px;
    padding: 25px;
    color: #20202079
}

.save-btn:hover{
    border-radius: 50%;
    /* color: cyan; */
    box-shadow: cyan 0px 0px 30px, inset cyan 0px 0px 20px;
}

.sticky{
    position:sticky;
}

#container div div{
    box-shadow: none;
}












.vidslider{
    position: absolute;
    bottom: 0px;
    left:0px;
    width: 100%;
}
.slidecontainer{
    height: 80px;
}

.clickdiv{
    position: relative;
    width:100%;
    height: 100%;
}













.textbox:focus{
    outline: #00000000;
}
.textbox .text{
    width: 100%;
}
.resizable{
    resize: both;
    /* background: rgba(43, 107, 107, 0.925); */
    border-radius:6px;
}
div.resizable div, div.resizable div div{
    width: 100%;
    height: 100%;
}
/* div.resizable div div{
    display: grid;  
    place-content: center;
} */








/* merge this with the other menu css at some point */

#shapemMenuDiv ul .input-holder input{
    width: 100%;
    outline: #00000000;
    background-color: #00000000;
    border: none;
    border-bottom: 2px solid #3a3a3a;
    height: 30px;
}
.input-holder input:focus{
    border-bottom: 2px solid cyan;

}





#shapemMenuDiv ul .fancyInputOuter a{
    position: absolute;
    height: 100%;
    pointer-events: none;
    text-align: right;
}
/* #shapemMenuDiv ul .fancyInputOuter a text{
    padding-right: 20px;
} */
#shapemMenuDiv ul .fancyInputOuter{
    position: relative;
    height: 30px;
}

#shapemMenuDiv ul .fancyInputOuter input{
    position:absolute;
    height: 100%;
    width:170%;
    color: white;
    text-align: right;
    transition: height 0.3s ease;
    outline: #00000000;
    background-color: #00000000;
    border: none;
    right: -70%;
    bottom: 0;
    transition: right 0.2s;
}


#shapemMenuDiv ul .fancyInputOuter input:focus{
    color: white;
    text-align: right;


    right: 0px;
}
#shapemMenuDiv ul .fancyInputOuter input:focus ~ a {
    transition: top 100 ease-out, font-size 100 ease-in;
    top: -25%;
    font-size:smaller;
    color: cyan;
}

#shapemMenuDiv{
    position: absolute;
    background-color: #1b1b1b00;
    color: white;
    width: 100px;
    
}
#shapemMenuDiv ul{
    background-color: #1b1b1bd2;
    border-bottom: 3px solid cyan;
    line-height: 35px;
}
#shapemMenuDiv ul{
    list-style: none;
}

#shapemMenuDiv ul li{
    background-color: #1b1b1b00;
    border-bottom: 2px solid rgba(25, 255, 255, 0.3);
    border-right: 3px solid #1b1b1b;
    transition: color 0.3s;
}
#shapemMenuDiv ul li a{
    text-align: justify;
    text-decoration: none;
    font-size: 18px;
    padding-right: 20px;
    font-weight: 500;
    display: block;
    color: white;
    top: -10%;
    transition: color 0.1s, top 0.3s ease-in, font-size 0.3s ease-in;


}

#shapemMenuDiv ul li:hover{
    border-right-color: cyan;
}
#shapemMenuDiv ul li:hover a{
    color:cyan;

}
#shapemMenuDiv .text{
    color: white;
}
/* menu css */


.input-holder input{
    width: 100%;
    outline: #00000000;
    background-color: #00000000;
    border: none;
    border-bottom: 2px solid #3a3a3a;
    height: 30px;
}
.input-holder input:focus{
    border-bottom: 2px solid cyan;

}
.input-holder{  
    height: 40px;

}
.fancyInputOuter{
    position: relative;
    overflow: hidden;
}
.input-holder a{
    font-size: medium;
    padding-left: 0px;
    left:0px;
    position: absolute;
    height: 100%;
    pointer-events:none;
}


.hiddenYT{
    position: absolute;
    left:-100%;
}
#opaqueYTLogo{
    position: absolute;
    opacity: 0.5;
    height: 30%;
}
.textbox{
    position: absolute;
    top: 0;
    left:0;
    text-align:center;
    overflow: clip;
    display: grid;  
    place-content: center;
    /* background-color: red; */
    box-shadow: none;
    width: 100%;
    height: 100%;
    /* border: 3px solid black; */
} 

.fullscreenShapeMenu{
    width: 100%;
    top:0;
}