.signature-box canvas{height:400px;width:100%;display:block}
.signature-box .canvas-box{border-radius:10px;border:1px solid var(--colorBorder);margin:0 0 20px;position:relative}
.signature-box ul.signature-color{flex-wrap:wrap;justify-content:flex-start;display:flex;list-style:none;margin:20px 0;padding:0}
.signature-box ul.signature-color li{width:24px;height:24px;border-radius:100%;cursor:pointer;transition:allease-in-out .2s;margin:0 10px 0 0}
.signature-box ul.signature-color li.actived{box-shadow:0 0 0 3px rgb(198 215 217 / 53%)}
.signature-box ul.signature-color li:hover{transform:scale(1.2)}
.signature-box ul.signature-color li.a{background-color:#000000}
.signature-box ul.signature-color li.b{background-color:#002b59}
.signature-box ul.signature-color li.c{background-color:#006b88}
.signature-box ul.signature-color li.d{background-color:#E02020}
.signature-box ul.signature-color li.e{background-color:#008000}
.signature-box ul.signature-color li.o{overflow:hidden;position:relative;    background: var(--colorTools);}
.signature-box ul.signature-color li.o input{opacity:0;position:absolute;cursor: pointer;    z-index: 1;    width: 26px;}
.signature-box ul.signature-color li.o svg { width: 22px; height: 20px; fill: var(--colorPrimary); position: absolute; left: 2px; top: 2px; z-index: 0; }
.btn-signature{position:absolute;top:10px;right:10px;border:1px solid var(--colorBorder);padding:5px;border-radius:3px;display:flex;align-items:center;justify-content:center;line-height:14px;cursor:pointer}
.btn-signature:hover{background:var(--colorTools)}
.btn-signature.clear-btn{top:45px}
.btn-signature svg{width:16px;height:16px}
.btn-signature svg path{fill:var(--colorPrimary)}
@media screen and (max-width: 580px) {
	.signature-box canvas{height:300px}
}