/*shapes css start*/
.l-shape-container{max-width: 300px; width: 100%; position: relative; min-height: 185px; margin: 0 auto; }
.side {position: absolute; background: #ebeced; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 500; }
.side input[type="text"] {position: absolute; width: 80px; height: 25px; border: 1px solid #ccc; border-radius: 5px; padding: 7px; font-size: 17px; color: #000; }

.shape-box-1 .side1 {width: 100px; bottom: 0; left: 0; height: 10px; }
.shape-box-1 .side2 {height: 185px; left: 0; bottom: 0; width: 10px; }
.shape-box-1 .side3 {width: 135px; top: 0; left: 0; height: 10px; }
.shape-box-1 .side4 {left: 125px; height: 75px; top: 10px; width: 10px; }
.shape-box-1 .side5 {left: 134px; top: 75px; width: 166px; height: 10px; } 
.shape-box-1 .side6 {right: 0px; top: 84px; height: 100px; width: 10px; }
.shape-box-1 .side7 {bottom: 0; right: 0; width: 100px; height: 10px; }
.shape-box-1 .side1 input[type="text"] {bottom: -30px; }
.shape-box-1 .side2 input[type="text"] {left: -90px; }
.shape-box-1 .side3 input[type="text"] {top: -30px; }
.shape-box-1 .side4 input[type="text"] {right: 20px; }
.shape-box-1 .side5 input[type="text"] {bottom: -30px; }
.shape-box-1 .side6 input[type="text"] {right: -90px; }
.shape-box-1 .side7 input[type="text"] {bottom: -30px; }

.shape-box-2 .side1 {width: 100px; bottom: 0; left: 0; height: 10px; }
.shape-box-2 .side2 {height: 100px; left: 0; bottom: 0; width: 10px; }
.shape-box-2 .side3 {width: 126px; top:75px; left: 0; height: 10px; }
.shape-box-2 .side4 {left: 125px; height: 75px; top: 10px; width: 10px; }
.shape-box-2 .side5 {left: 125px; top: 0; width: 166px; height: 10px; } 
.shape-box-2 .side6 {right: 0px; top: 0; height: 185px; width: 10px; }
.shape-box-2 .side7 {bottom: 0; right: 0; width: 100px; height: 10px; }
.shape-box-2 .side3 input[type="text"] {top: 15px; }
.shape-box-2 .side1 input[type="text"] {bottom: -30px; }
.shape-box-2 .side2 input[type="text"] {left: -90px; }
.shape-box-2 .side3 input[type="text"] {top: 15px; }
.shape-box-2 .side4 input[type="text"] {right: -90px; }
.shape-box-2 .side5 input[type="text"] {bottom: 15px; }
.shape-box-2 .side6 input[type="text"] {right: -90px; }
.shape-box-2 .side7 input[type="text"] {bottom: -30px; }

.shape-box-3 .side1 {width: 70px; bottom: 0; left:120px; height: 10px; }
.shape-box-3 .side2 {height: 80px; left: 116px; bottom: 0; width: 10px; }
.shape-box-3 .side3 {width: 126px; top:100px; left: 0; height: 10px; }
.shape-box-3 .side4 {left: 0; height: 90px; top: 10px; width: 10px; }
.shape-box-3 .side5 {left: 0; top: 0; width: 100%; height: 10px; } 
.shape-box-3 .side6 {right: 0px; top: 0; height: 185px; width: 10px; }
.shape-box-3 .side7 {bottom: 0; right: 0; width: 70px; height: 10px; }
.shape-box-3 .side3 input[type="text"] {top: 15px; }
.shape-box-3 .side1 input[type="text"] {bottom: -30px; }
.shape-box-3 .side2 input[type="text"] {right: -90px; }
.shape-box-3 .side3 input[type="text"] {top: 15px; }
.shape-box-3 .side4 input[type="text"] {right: -90px; }
.shape-box-3 .side5 input[type="text"] {bottom: 15px; }
.shape-box-3 .side6 input[type="text"] {right: -90px; }
.shape-box-3 .side7 input[type="text"] {bottom: -30px; }

.shape-box-4 .side1 {width: 70px; bottom: 0; left:10px; height: 10px; }
.shape-box-4 .side2 {height: 100%; left: 0; bottom: 0; width: 10px; }
.shape-box-4 .side3 {width: 100%; top:0px; left: 0; height: 10px; }
.shape-box-4 .side4 {right: 0; height: 90px; top: 10px; width: 10px; }
.shape-box-4 .side5 {right: 0; top: 90px; width: 100px; height: 10px; }
.shape-box-4 .side6 {right: 100px; top: 90px; height: 90px; width: 10px; }
.shape-box-4 .side7 {bottom: 0; right: 100px; width: 70px; height: 10px; } 
.shape-box-4 .side3 input[type="text"] {top: 15px; }
.shape-box-4 .side1 input[type="text"] {bottom: -30px; }
.shape-box-4 .side2 input[type="text"] {right: -90px; }
.shape-box-4 .side3 input[type="text"] {top: 15px; }
.shape-box-4 .side4 input[type="text"] {right: -90px; }
.shape-box-4 .side5 input[type="text"] {bottom: -30px; }
.shape-box-4 .side6 input[type="text"] {left: -90px; }
.shape-box-4 .side7 input[type="text"] {bottom: -30px; }

.shape-box-5 .side1 {width: 100px; bottom: 0; left:10px; height: 10px; }
.shape-box-5 .side2 {height: 100%; left: 0; bottom: 0; width: 10px; }
.shape-box-5 .side3 {width: 200px; top:0px; left: 0; height: 10px; }
.shape-box-5 .side4 {right: 52px; height: 130px; top: -15px; width: 10px; transform: rotate(-45deg); }
.shape-box-5 .side5 {right: 8px; top: 90px; width: 10px; height: 100px; }
.shape-box-5 .side6 {right: 10px; bottom: -5px; height: 10px; width: 100px; }
.shape-box-5 .side1 input[type="text"] {bottom: -30px; }
.shape-box-5 .side2 input[type="text"] {right: -90px; }
.shape-box-5 .side3 input[type="text"] {top: 15px; }
.shape-box-5 .side4 input[type="text"] {right: 10px; transform: rotate(45deg); top: 30px; }
.shape-box-5 .side5 input[type="text"] {left:20px; }
.shape-box-5 .side6 input[type="text"] {bottom: -30px; left: 0; }

.shape-box-6 .side1 {width: 100px; bottom: 0; left:10px; height: 10px; }
.shape-box-6 .side2 {height: 100px; left: 0; bottom: 0; width: 10px; }
.shape-box-6 .side3 {left: 43px; height: 125px; top: -16px; width: 10px; transform: rotate(45deg); }
.shape-box-6 .side4 {width: 210px; top: 0px; right: 0; height: 10px; }
.shape-box-6 .side5 {right: 0; top: 5px; width: 10px; height: 100%; }
.shape-box-6 .side6 {right: 10px; bottom: -5px; height: 10px; width: 100px; }
.shape-box-6 .side1 input[type="text"] {bottom: -30px; }
.shape-box-6 .side2 input[type="text"] {right: -90px; }
.shape-box-6 .side3 input[type="text"] {right: 10px; transform: rotate(-45deg); top: 70px; }
.shape-box-6 .side4 input[type="text"] { bottom: 15px;}
.shape-box-6 .side5 input[type="text"] {left:20px; }
.shape-box-6 .side6 input[type="text"] {bottom: -30px; left: 0; }

.shape-box-7 .side1 {width: 80px; bottom: 0; left:10px; height: 10px; }
.shape-box-7 .side2 {height: 100%; left: 0; bottom: 0; width: 10px; }
.shape-box-7 .side3 {left: 0; height: 10px; top: 0; width: 100%; }
.shape-box-7 .side4 {width: 10px; top: 10px; right: 0; height: 100px; }
.shape-box-7 .side5 {right: 37px; top: 88px; width: 10px; height: 110px; transform: rotate(45deg); }
.shape-box-7 .side6 {right: 73px; bottom: 0; height: 10px; width: 80px; }
.shape-box-7 .side1 input[type="text"] {bottom: -30px; }
.shape-box-7 .side2 input[type="text"] {right: -90px; }
.shape-box-7 .side3 input[type="text"] {bottom: 15px;}
.shape-box-7 .side4 input[type="text"] {     left: 15px;}
.shape-box-7 .side5 input[type="text"] {right: 10px; transform: rotate(-45deg); top: 70px;  }
.shape-box-7 .side6 input[type="text"] {bottom: -30px; left: 0; }

.shape-box-8 .side1 {width: 80px; bottom: 0; left:10px; height: 10px; }
.shape-box-8 .side2 {height: 100px; left: -27px; bottom: -12px; width: 10px; transform: rotate(-45deg); }
.shape-box-8 .side3 {left: -60px; height: 110px; top: 3px; width: 10px; }
.shape-box-8 .side4 {width: 100%; top: 0; left: -60px; height: 10px; }
.shape-box-8 .side5 {right: 50px; top: 0; width: 10px; height: 100%; }
.shape-box-8 .side6 {right: 59px; bottom: 0; height: 10px; width: 80px; }
.shape-box-8 .side1 input[type="text"] {bottom: -30px; }
.shape-box-8 .side2 input[type="text"] {right: -80px; transform: rotate(45deg); bottom: 20px; }
.shape-box-8 .side3 input[type="text"] {bottom: 30px; right: 15px; }
.shape-box-8 .side4 input[type="text"] {left: 110px; bottom: 15px; }
.shape-box-8 .side5 input[type="text"] {right: 10px;  top: 70px;  }
.shape-box-8 .side6 input[type="text"] {bottom: -30px; left: 0; }


.shape-box-9 .side1 {width: 50px; height: 10px; bottom: 16px; right: 49px; transform: rotate(-45deg); } 
.shape-box-9 .side2 {width: 210px; bottom: 0; left: 0; height: 10px; }
.shape-box-9 .side3 {width: 10px; height: 100%; left: 0; bottom: 0; }
.shape-box-9 .side4 {height: 10px; width: 100%; top: 0; left: 0; }
.shape-box-9 .side5 {width: 10px; height: 100px; right: 0; } 
.shape-box-9 .side6 {width: 10px; height: 50px; right: 17px; transform: rotate(45deg); bottom: 46px; }
.shape-box-9 .side1 input[type="text"] {top: 40px; transform: rotate(45deg); right: -42px; }
.shape-box-9 .side2 input[type="text"] {left: 70px; bottom: -30px; }
.shape-box-9 .side3 input[type="text"] {bottom: 80px; right: 15px; }
.shape-box-9 .side4 input[type="text"] {left: 115px; bottom: 15px; }
.shape-box-9 .side5 input[type="text"] {right: 15px; top: 40px; }
.shape-box-9 .side6 input[type="text"] {bottom: 40px; left: 15px; transform: rotate(-45deg); }



.shape-box-10 .side1 {width: 45px; height: 10px; left: -3px; bottom: 67px; transform: rotate(45deg); }
.shape-box-10 .side2 {width: 10px; height: 100px; top: 0; left: 0; }
.shape-box-10 .side3 {width: 100%; top: 0; height: 10px; left: 0; }
.shape-box-10 .side4 {right: 0; width: 10px; height: 100%; }
.shape-box-10 .side5 {bottom: 0; right: 0; width: 220px; height: 10px; }
.shape-box-10 .side6 {bottom: 16px; left: 42px; width: 50px; transform: rotate(45deg); height: 10px; }
.shape-box-10 .side1 input[type="text"] {bottom: -60px; transform: rotate(-45deg); left: -40px; }
.shape-box-10 .side2 input[type="text"] {right: 15px; bottom: 35px; }
.shape-box-10 .side3 input[type="text"] {bottom: 15px; right: 105px; }
.shape-box-10 .side4 input[type="text"] {left: 15px; bottom: 80px; }
.shape-box-10 .side5 input[type="text"] {right: 70px; top: 15px; }
.shape-box-10 .side6 input[type="text"] {bottom: -60px; left: -40px; transform: rotate(-45deg); }



/*shapes css end*/