@charset "utf-8";
/* CSS Document */
.shapeDiv{
    position:relative;
    min-height:150px;
	display:none;
    margin-top:24px;
}
.shapeDiv>div{
    position: absolute;
    left: 50%;
    top: 50%;
    line-height:75px;
    transform: scale(0.5) translate(-100%, -100%);
}
.shapeDiv p {
    position:absolute;
    left:0;
    bottom:0;
    margin:0;
    width:100%;
    text-align:center;
    word-break: break-all;
}
.shapeDiv_text {
    display: block;
    text-align: center;
}
#showCircle{
    border:1px solid #ced4da;
	display:block;
	visibility:visible;
}
#showCircle .circle, .circle{
	clip-path: circle(50% at 50% 50%);
	background:#900;
	width:75px;
	height:75px;
}
#showSquare{
    border:1px solid #ced4da;
}
#showSquare .square, .square{
  height: 75px;
  width: 75px;
  background-color: #900;
}
#showDiamond{
    border:1px solid #ced4da;
}

#showDiamond .diamond, .diamond{
    transform: rotate(45deg);
    top: 25px;
    height: 75px;
    width: 75px;
    background-color: #900;
}
.modal-diamond{
    transform: scale(0.5) translate(-100%, -100%) rotate(45deg)!important;
    height: 75px;
    width: 75px;
    background-color: #900;
}
.diamond span{
    transform: rotate(-45deg);
}
#showTriangle{
    border:1px solid #ced4da;
}
#showTriangle .traiangle, .triangle{
	clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
	width:75px;
	height:75px;
	background:#900;
}
#showReversedTriangle{
    border:1px solid #ced4da;
}
#showReversedTriangle .reversedtriangle, .reversedtriangle{
	clip-path: polygon(50% 100%, 0 0, 100% 0);
	width:75px;
	height:75px;
	background:#900;
}
#showTrapeze{
    border:1px solid #ced4da;
}
#showTrapeze .trapeze, .trapeze{
	clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
	width:75px;
	height:75px;
	background:#900;
}
#showReversedTrapeze{
    border:1px solid #ced4da;
}
#showReversedTrapeze .reversetrapeze, .reversedtrapeze{
	clip-path: polygon(20% 100%, 80% 100%, 100% 0, 0 0);
	width:75px;
	height:75px;
	background:#900;
}


.scaleDiv{
	display:none;
    padding:10px;
    margin-top:20px;
}
#showImperial{
	display:block;
	visibility:visible;
}