/*Effecting everything*/
*{
    padding: 0px;
    margin: 0px;
    font-family: Arial, sans-serif;
}
body{
    background-color:#161A1D;
}
/*End of Effecting everything*/


/*Canvas Style*/
canvas{
    display: block;
    margin: 7vh auto;
    border-radius:5px;
}

/*Simularity Cube*/
.flexible-extended{
    display: flex;
    flex: 1;
}
.flexible{
    display: flex;
}
.center-wrapper,.extra-wrapper,.edit-tools button,.brushes button,.main-panel input,.cMod button,#s-config{
    flex: 1;
}
header,.main-panel,.side-panel{
    flex-direction: column;
}

/*End of SC*/

/*Navigation Menu*/
nav{
    color:white;
    font-family: "Noto Sans","Helvetica Neue LT Pro","Helvetica Neue","Helvetica",Arial,sans-serif;
}
.primary-header-wrapper {
    background: rgba(16,18,15,0.8);
    border-bottom: 3px solid #57b13b;
    box-shadow: 0 2px 7px rgba(50,50,50,0.2);
}

.secondary-wrapper p{
    padding: 10px;
    font-size: 12pt;
}

.secondary-wrapper p:hover{
    background-color: #57b13b;
    cursor: pointer;
}

.center-wrapper p{
    padding: 8px;
    font-size: 14pt;
    text-align: center; 
}
.extra-wrapper p{
    text-align: right;
    padding: 10px;
}

.drop-menu{
    display: none;
    position: absolute;
    border-top:3px solid #57b13b;
    background-color: rgba(16,18,15,0.8);
}
.case:hover .drop-menu{
    display: block;
} 
/*End of Nav*/


/*Left Panel*/
.main-panel{
    padding: 10px;
    position: absolute;
    top:40px;
    bottom: 0;
    width: 120px;
    background-color:rgba(16,18,15,0.8);
    border-top:3px solid #57b13b;
}
.colorizer{
    padding: 0;
    width: 65px;
    display: block;
    margin: 8px auto;
}
.colorizer .color{
    border:none;
    width: 60px;
    height: 50px;
}
#bg-color{
    width: 45px;
    height: 40px;
    position: relative;
    top:-25px;
    left: 20px;
}
#random-color-BTN{
    width: 20px;
    height: 20px;
    font-size: 8pt;
    margin-top: -20px;
    margin-left: 90px;
    background: none;
}
#swap{
    background: none;
    margin-top:-60px;
    margin-left: 27px;
    padding: 2px;
    width:21px;
    border: 0px solid transparent;
    border-radius: 0px;
}
.edit-tools,.brushes,.custom-color{
    padding: 0;
    flex-wrap: wrap;
    margin: 8px auto;
}
.edit-tools p, .brushes p,.custom-color p{
    padding: 2px;
    text-align: center;
    font-size: 12pt;
    color: whitesmoke;
    display: block;
    width: 100%;
}
.edit-tools button,.brushes button{
    font-size: 13pt;
}
#s-config p{
    color:gainsboro;
    font-size: 11pt;
    flex: 1;
    padding: 5px;
}
#s-color{
    line-height: 1px;
    flex:2;
    height: 25px;
    font-size: 10pt;
}


/*Text+Value Corection*/
input[type=text],input[type=value]{
    width: 61px;
    height: 16px;
}
#c-color{
    position: relative;
    width: 120px;
    color:lime;
    text-align: center;
    font-size: 8pt;
}
/*End of Corection*/
#op-flex{
    margin: -4px 8px;
}
p.pair{
    cursor: pointer;
    flex: 1;
    font-size: 8pt;
    color: limegreen;
}
#opacity,#s-opacity{
    margin: 0px 1px;
}
.warning{
    margin-top:4px; 
}
#sOpWarning{
    font-size: 10pt;
    color:forestgreen;
}
#sOpWarning span{
    color:forestgreen;
    font-size: 14pt;
}

/*Right Panel*/
.side-panel{
    padding: 10px;
    position: absolute;
    top:40px;
    bottom: 0;
    right: 0;
    width: 180px;
    background-color:rgba(16,18,15,0.8);
    border-top:3px solid #57b13b;
}
.side-panel p,.side-panel label{
    color: white;
    text-align: center;
}

/*Color Modes*/
.cMod{
    flex-wrap: wrap;
}
#sMode{
    margin-top: 8px;
}


/*Canvas options*/
.options{
    display: none;
}
.options label{
    padding: 4px 8px;
    background-color: #2E373F;
}
.options select{
    padding: 1px 19px;
}
#scale-lable{
    padding: 4px 11px;
}
#rotate{
    box-sizing: border-box;
    width: 56%;
    margin-top: 4px;
}
#edge-lable{
   position: relative;
   top: 13px;
   padding: 4px 37px;
}
#edges{
    margin-top: 16px;
}
#co-lable{
    position: relative;
    top: 4px;
    margin-top: 10px;
    padding: 4px 5px;
}
#canvas-opacity{
    display: inline-block;
    box-sizing: border-box;
    width:56%;
    margin-top: 4px;
}

/*Footer*/
.footer-wraper{
    border-top: 3px solid #57b13b;
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color:rgba(3, 3, 3, 0.9);
    color: white;
}
.footer-wraper p{
    padding: 2px 8px;
    font-size: 10pt;
    font-size: 11pt;
}
.first-footer-wraper{
    flex:2;
    text-align:center;
}
.first-footer-wraper p{
    flex-basis: 150px;
}
.second-footer-wraper{
    flex: 2;
    justify-content: flex-end;
    /*border-left: 1px solid red;*//*Debug*/
}
#colWarning{
    padding: 0;
    margin: 0 10px;
    color:#f4d03f;
}

/*Regulation code*/
.selected{
    color:white;
    background-image: none;
    background-color: #57b13b;
}

/*PopUps*/
.pop-wrapper{
    position: absolute;
    top:0;
    width: 100%;
    height: 100%;
    background-color:rgba(0, 0, 0, 0.8);
}

.pop-body{
    box-sizing: border-box;
    min-width: 400px;
    width:50%;
    height: 60%;
    position: relative;
    top:20%;
    left:25%;
    background-image: repeating-radial-gradient(ellipse farthest-corner at center center , rgb(26, 24, 24) 0%,#030303 100%);
    border: 4px solid #57b13b;
    border-top-left-radius: 25px;
    border-bottom-right-radius: 25px;
    color: white;
}

.pop-content{
    text-align: center;
    line-height: 25px;
    padding: 10px 0px;
    -webkit-user-select: none; /* Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
    user-select: none; /* Standard */
}

.pop-close{
    width:25px;
    height: 25px;
    font-weight: bold;
    display: block;
    position: absolute;
    right: 10px;
    color: white;
    background-color: #ff000081;
    border: 2px solid #b20000;
    border-radius: 4px;
    cursor: default;
}
.pop-close:active{
    font-size: 20pt;
}

.pop-content h2{
    margin-top:60px;
    font-size: 48pt;
    font-family: cursive;
    cursor: default;
}
.pop-content #create-text{
    padding: 28px;
    font-size: 16pt;
    cursor: default;
}
.pop-content-box{
    position: absolute;
    top: 49%;
    left: 31%;
    
}
.pop-content #write-a-name{
    padding: 16px 0px;
    font-size: 28pt;
    cursor: default;
}

.pop-content input[type="text"]{
    color: black;
    background-image: none;
    background-color: white;
    width: 180px;
    height: 28px;
    text-align: center;
    font-size: 20px;
}

.pop-content button{
    font-family: sans-serif;
    background-image: none;
    background-color: #2b810c;
    font-size: 13pt;
    color:whitesmoke;
    padding: 6px 20px;

}