.body{
width: 100%;
background: linear-gradient(-45deg, #FFA751, #666666, #D4145A, #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,#FFA751,#D4145A);
color: #fff;    
}
.kodebtn{
background: #FFA751;
}
.icon_btns{
background: #D4145A;
}    
.margin_auto{
margin: auto;
}
.element{
text-align: center;
text-transform:capitalize;
}
.convert_box{
width: 100%;
height:auto;
border-radius: 5px;
border: 1px solid #f1f1f1;
background-color: #ffffff;
margin: auto;
padding: 4%;
padding-bottom: 5%;
overflow-y: hidden;
}
.polygon-input input[type="text"]{
width: 100%;
height: 50px;
border: 1px solid #f1f1f1;
background: #ffffff;
color: #000000;
padding-left: 5%;
padding-right: 5%;
margin-bottom: 10px;
outline: none;
font-family: monospace;
border-radius: 5px;
}
.shape {
width: 200px;
height: 200px;
margin: auto;
background-color: #FFA751;
}
#csscodeview{
text-align: left;
color: #000000;
}
.shape_img{
width: 200px;
height: 200px;
}
.shape_for_all{
width: 40px;
height: 40px;
cursor: pointer;
margin: auto;
margin-top: 10px;
margin-bottom: 0;
}
.shape_for_all2{
width: 130px;
height: 130px;
cursor: pointer;
margin: auto;
margin-top:30px;
margin-bottom: 0;
}
.palette{
height: 185px;
background: #fff;
}
.coltit{
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100px;
}
.rand_traingle{
background: #FFA751;
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.rand_circle{
background: #32CD32;
clip-path: circle(50% at 50% 50%);
}
.rand_ellipse{
background: #1E90FF;
clip-path: ellipse(25% 40% at 50% 50%);
}
.rand_trapezoid{
background: #FFA500;
clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
}
.rand_parallelogram{
background: #DA70D6;
clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
}
.rand_rhombus{
background: #D3D3D3;
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.rand_pentagon{
background: #00CED1;
clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}
.rand_hexagon{
background: #DB7093;
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.rand_heptagon{
background: #F0E68C;
clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);
}
.rand_octagon{
background: #FF7F50;
clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}
.rand_nonagon{
background: #6A5ACD;
clip-path: polygon(50% 0%, 83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%);
}
.rand_decagon{
clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%);
background: #CD5C5C;
}
.rand_bevel{
background: #6B8E23;
clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
}
.rand_rabbet{
background:#FFA751;
clip-path: polygon(0% 15%, 15% 15%, 15% 0%, 85% 0%, 85% 15%, 100% 15%, 100% 85%, 85% 85%, 85% 100%, 15% 100%, 15% 85%, 0% 85%);
}
.rand_left_arrow{
background:#32CD32;
clip-path: polygon(40% 0%, 40% 20%, 100% 20%, 100% 80%, 40% 80%, 40% 100%, 0% 50%);
}
.rand_right_arrow{
background:#1E90FF;
clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);
}
.rand_left_point{
background:#FFA500;
clip-path: polygon(25% 0%, 100% 1%, 100% 100%, 25% 100%, 0% 50%);
}
.rand_right_point{
background:#DA70D6;
clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
}
.rand_left_chevron{
background:#D3D3D3;
clip-path: polygon(100% 0%, 75% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);
}
.rand_right_chevron{
background:#00CED1;
clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
}
.rand_star{
background:#DB7093;
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.rand_cross{
background:#F0E68C;
clip-path: polygon(10% 25%, 35% 25%, 35% 0%, 65% 0%, 65% 25%, 90% 25%, 90% 50%, 65% 50%, 65% 100%, 35% 100%, 35% 50%, 10% 50%);
}
.rand_message{
background:#FF7F50;
clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
}
.rand_close{
background:#6A5ACD;
clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
}
.rand_frame{
background:#CD5C5C;
clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 25%, 75% 25%, 75% 75%, 25% 75%, 25% 100%, 100% 100%, 100% 0%);
}
.rand_inset{
background:#6B8E23;
clip-path: inset(5% 20% 15% 10%);
}
#image_view{
display: none;
}
input[type="file"] {
display: none;
}
.shape_image_upload{
background: #CD5C5C;
color: #ffffff;
padding: 6px 12px;
cursor: pointer;
border: none;
margin-left: 15px;
outline: none;
font-family: Raleway;
float: left;
border-radius: 5px;
}
.shape_box_view{
width: 90%;
height: 250px;
background: #ffffff;
border: 1px solid #f1f1f1;
border-radius: 5px;
}
.code_btn_shape{
width: auto;
height: 40px;
padding-left: 5%;
padding-right: 5%;
border: 1px solid #f1f1f1;
outline: none;
background: linear-gradient(-45deg,#FFA751,#D4145A);
color: #ffffff;
border-radius: 5px;
margin-top: 10px;
float: right;
margin-right: 10px;
cursor: pointer;
font-family: monospace;
}
.code_btn_shape:hover{
background: #CD5C5C;
}

.export-header{
width: 100%;
height: 60px;
background: #FFA751 !important;
color: #ffffff;
font-family: 'Poppins';
border-top-right-radius: 10px;
border-top-left-radius: 10px;
}
.cross-btn{
width: 60px;
height: 60px;
background: none;
color: #ffffff;
font-size: 1.5em;
font-family: 'Poppins';
border-top-right-radius: 10px;
}
.cross-btn:hover{
background: #D4145A !important;
color: #ffffff !important;
}
.update-code-padding{
padding: 5%;
}
.w3-modal{
border-radius: 10px !important;
}
.w3-modal-content{
width: 30% !important;
border-radius: 10px;
}  
.no-border{
border: none;
}
.leftsidebar{padding-bottom: 5%;}
.left-menu-btn{
height: auto;
padding-top: 20%;
padding-bottom: 15%;
}
.bottom-title{
font-weight: 600;
}