.custom-checkbox {
    -webkit-appearance: none;
    position: relative;
    width: 34px;
    height: 34px;
    border-radius: 5px;
    background: #f8f7f7;
    border: 1px solid #ccd0d2;
    cursor: pointer;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
}

.custom-checkbox:checked {
    background-image: url("https://dev.contract-sign.com/css/check.png") !important;
    background-size: contain;
    background-repeat: no-repeat;
}

.custom-checkbox::before{
    content: '';
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    pointer-events: none;
    background-image: none;
    background-size: contain;
    background-repeat: no-repeat;
}

.custom-required-checkbox {
    -webkit-appearance: none;
    position: relative;
    width: 34px;
    height: 34px;
    border-radius: 5px;
    background: #f8f7f7;
    border: 1px solid #ccd0d2;
    cursor: pointer;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
    background: linear-gradient(140deg, #FFBDC3 0%, #FFBDC3 40%, #FFBDC3 98%);
}

.custom-required-checkbox:checked {
    background: linear-gradient(140deg, #fff 0%, #fff 40%, #fff 98%);
    background-image: url("https://dev.contract-sign.com/css/check.png") !important;
    background-size: contain;
    background-repeat: no-repeat;
}

.custom-required-checkbox::before{
    content: '';
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    pointer-events: none;
    background-image: none;
    background-size: contain;
    background-repeat: no-repeat;
}
