:root {
    --primary-color: #000;
}
/*.form-loader {
    background-color: rgba(247, 247, 247, 0.77);
    position: absolute;
    top: 38px;
    z-index: 9;
    padding: 10px;
    left: -7px;
    line-height: 100%;
    text-align: center;
    bottom: 40px;
    right: -7px;
}

.form-loader > div {
    height: 95px;
    position: relative;
    top: 40%;
    margin-top: -46px;
    font-style: italic;
}*/
.error {
    background-color: #fff7bf;
    border: 1px solid #d93838;
}

.form-loader {
    width: 100%;
    position: absolute;
    top: 0;
    z-index: 9;
    padding: 48px;
    left: 0;
    line-height: 100%;
    text-align: center;
    background-color: #adadad36;
}

.loader {
    border: 9px solid #d0d0d0;
    border-radius: 50%;
    border-top: 6px solid #737373;
    width: 60px;
    height: 60px;
    -webkit-animation: spin 1s linear infinite;
    animation: spin 1s linear infinite;
    position: relative;
    top: calc(50% - 30px);
    display: inline-block
}

.cartsync-signature-pad {
    cursor: url(pen.png) 1 26, pointer;
    border: 2px solid var(--primary-color);
    border-radius: 4px;
    touch-action: none;
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg)
    }

    100% {
        -webkit-transform: rotate(360deg)
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}