.body{
width: 100%;
background: linear-gradient(-45deg, #1488cc, #666666, #6dd5ed, #777);
background-size: 400% 400%;
animation: gradient 15s ease infinite; 
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% { 
background-position: 100% 50%; 
}  
100% { 
background-position: 0% 50%;  
}
}  
div *::selection{
background:#523f86;
color: #ffffff;
}  
.getanibtn{
background: linear-gradient(-45deg,#1488cc,#6dd5ed);
color: #fff;    
}
.kodebtn{
background: #1488cc;
}
.icon_btns{
background: #6dd5ed;
}    
.logo_icon_img{
width: 20px;
height: 20px;
margin-bottom: 5px;
}
.panel{
width:100%;
height: 350px;
min-width:35px;
background: #f1f1f1;
outline: none;
margin: auto;
border: 1px solid #f1f1f1;
color: #000000;
}
.bottompanel{height:26px;}
.w3-15-px{width:15px;}
.panelimage{
width: 20px;
height: 20px;
margin-top: 5px;
margin-left: 10px;
padding-left: 0;
}
.textbar{
width:70%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;text-align: left;
}
.mt-5-px{
margin-top: 5px;
}
.paneltext{
position:relative;
margin-left:20px;
text-align: left;
}
.panelbarbtn{
width:30px;
height: 25px; 
border:1px solid #e1e1e1;
outline: none;
color: #ffffff;
float: right;
background: linear-gradient(#61768C,#ACB3BA);
}
.crosstime{
background: linear-gradient(#c36057,#ff0000);    
}
.elementbar{
width: 98%;
min-width: 28px;
height: 263px;
background:#ffffff;
margin: auto;
color: #000000;
margin-top: 5px;
max-height: auto;
border: 1px solid #f1f1f1;    
}
.elementbar{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
z-index: 0;
}
.extend_height{
height: 312px;
}
#EditedElement{
width: 100px;
height: 50px;
border: 2px solid red;
outline: none;
background: #fff;
color: #000;
font-family: verdana;
font-size: 17px;
}
.outline_none{outline: none;}
.movecheck{
text-align: left;
color: #000000;
}
#check{
margin: auto;
padding-top:10px;
padding-bottom:10px;
padding-left: 5px;
width:100px;
height: 50px;
margin-top: 50px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.edittxt{
width:150px;
height: auto;
background: #fff;
color: #000;
border: none;
outline: none;
}
.editul{
list-style: none;
padding-left: 0;
font-size: 11px;
margin-top: 0;
margin-bottom: 0;
}
.editul li{
width: 170px;
display: block;
font-weight: 600;
}
.editul li input{
width: 170px;
padding: 0;
}
.editul li input:focus{
width: 170px;
height: auto;
background:#C0DBF1;
border: 1px solid #52678F;
}
.editul li input:hover{
cursor: default;
}
.seprator{
width: 100%;
height: auto;
text-align: left;
background: linear-gradient(#f1f1f1,#e1e1e1);
border-bottom: 2px ridge #fff;
}
.sepratorbtn{
width: 50px;
height: 30px;
border: none;
outline: none;
background: linear-gradient(#f1f1f1,#e1e1e1);
}
.sepratorbtn:focus{
background:#C0DBF1;
border: 1px solid #52678F;
}
.sepratormenu{
width: 60px;
height: 138px;
margin-left: 0;
background:#EEEEEE;
display: none;
}
.sepratorul{
list-style: none;
padding: 0;
border: 1px solid #52678F;
border-bottom: none;
}
.sepratorul li{
display: block;
font-size: 10px;
}
.sepratorul li button{
width: 58px;
height: 25px;
margin-top: 2px;
background: #EEEEEE;
border: none;
outline: none;
border-bottom: 1px solid #52678F;
}
.sepratorul li button:hover{
background:#C0DBF1;
border-bottom: 1px solid #52678F; 
}
/* .element{
text-transform: uppercase;
color: #d1d1d1;
font-family:Raleway,'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin-bottom: 3%;
} */
.mesh_box{
width: 85%;
height: auto;
background: #1E1E1E;
margin: auto;
padding: 2%;
}
/* .palettebox{
width: 95%;
height: auto;
margin: auto;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border: 1px solid #f1f1f1;
box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
} */
.color_p_value{
font-family: monospace;
margin-top: 15px;
font-size: 1em;
writing-mode: vertical-rl;
text-orientation: upright;
margin-left: 45%;
display: none;
}
/* .palette{
height: 160px;
cursor: pointer;
} */
/* .palette_btns_show{
width: 95%;
background: #262626;
box-shadow: none;
margin: auto;
border: 1px solid #f1f1f1;
border-top: none;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.palette:hover .color_p_value{
display: block;
transform: scaleX(1);
} */
/* .downloadbtn{
width: 40px;
height: 40px;
border: 1px solid #f1f1f1;
outline: none;
background: #262626;
color: #d1d1d1;
float: right;
margin-right: 10px;
margin-top: 10px;
margin-bottom: 10px;
cursor: pointer;
border-radius: 5px;
}
.downloadbtn:hover{
background: #333;
} */
/* .likes{
color: #d1d1d1;
font-family: monospace;
margin-top: 20px;
text-align: left;
margin-left: 20px;
} */
.palette_first{
border-top-left-radius: 10px;
}
.palette_last{
border-top-right-radius: 10px;
}
.create,.createsolid,.createlinear,.createradial,.createconic,.createpatterns{
width:15%;
height:auto;
background: #333333;
color: #ddd;
position:fixed;
top:55px;
left:50%;
display:none;
border: 1px solid #474747;
border-top:0;
padding: 1%;
z-index: 4;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
max-height:500px;
}
.createsolid,.createlinear,.createradial,.createconic,.createpatterns{
left:29%;
}
.create a,.createsolid a,.createlinear a,.createradial a,.createconic a,.createpatterns a{
text-decoration: none;
color: #000;
}
.create .bottombar,.createsolid .bottombar,.createlinear .bottombar,.createradial .bottombar,.createconic .bottombar,.createpatterns .bottombar{
color: #ddd;
}
.createlinear{
left: 34%;
}
.createradial{
left: 39%;
}
.createconic{
left: 44%;
}
.createpatterns{
left: 52%;
}
.times3,.timessolid,.timeslinear,.timesradial,.timesconic,.timespatterns{
width: 25px;
height: 25px;
outline: none;
background: #ff0000;
color: #fff;
border: 1px solid #474747;
position: fixed;
top: 0px;
left: 100%;
cursor: pointer;
}
.boxtitle{
margin-bottom: 10%;
text-transform: uppercase;
text-align: center;
font-size: 10px;
color: #ddd;
letter-spacing: 2px;
}
.w3-ddd{
color: #ddd;
}
.w3-ddd:hover{
color: #fff;
}
.w3-mt-5_per{
margin-top: 13%;
}
.mt-50{
margin-top: 50px;
}
.ang_down{
float: right;margin-right:30%;
}
.sub_btn_div{
margin-bottom:2%;
}
.createpatbtn{
width:70%;
height: 35px;
border: none;
border: 1px solid #f1f1f1;
outline: none;
font-family: ZFont,'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size:13px;
cursor: pointer;
border-radius: 5px;
background: #262626;
color: #d1d1d1;
padding: 0;
margin-top:15px;
}
.createpatbtn:hover{
border: none;
background: linear-gradient(-45deg,#1488cc,#6dd5ed);
color: #fff;
}
.createpatbtn:focus{
border: none;
background:#6dd5ed;
color: #fff;
}
#display_basic,#display_border,#display_brad,#display_color,#display_font,#display_outline,#display_text,
#display_tshad,#display_bshad{
cursor: pointer;
}
.righttopbar{
background: #edf2f7;
border-bottom: 1px solid #f1f1f1;
cursor: pointer;
}
.colorvalue2{
border-radius: 0px;
}
.applyeffects,.editcontent{
background: #f9f9f9;
}

.w3-modal-content2{
width: 50% !important;
border-radius: 10px;
}
.darkcyanC,.orangeredC,.goldC{color: #474747;font-family: "Poppins";font-weight: normal;}