canvas {

    box-shadow: 6px 7px 5px -2px rgba(0, 0, 0, 0.39);
    -webkit-box-shadow: 6px 7px 5px -2px rgba(0, 0, 0, 0.39);
    -moz-box-shadow: 6px 7px 5px -2px rgba(0, 0, 0, 0.39);
    cursor: pointer;
    border: 1px solid #ddd;
    margin-top: 5px;
}

.test-ojala {
    display: none;
}

.tools {

    padding-left: 110px;
    align-items: center;
    margin-top: 15px;

}

.tools .color-fields {



    cursor: pointer;
    display: inline-block;
    box-sizing: border-box;
    border-radius: 50%;
    border: 2px solid white;

}


.tools button {
    /* text-align: center; */
    /* align-self: center; */
    width: 100px;
    height: 40px;

    border: 2px solid white;
    cursor: pointer;
    color: white;
    background: #222;
    font-weight: bold;
    margin: 0 15px;
}


.checkbox-wrapper-49 input[type="checkbox"] {
    display: none !important;
    visibility: hidden !important;
}

.checkbox-wrapper-49 {
    --size: 90px !important;
}

.checkbox-wrapper-49 .block {
    position: relative !important;
    clear: both !important;
    float: left !important;
}

.checkbox-wrapper-49 label {
    width: var(--size) !important;
    height: calc(var(--size) / 2) !important;
    box-sizing: border-box !important;
    border: 3px solid !important;
    float: left !important;
    border-radius: 100px !important;
    position: relative !important;
    cursor: pointer !important;
    transition: .3s ease !important;
    color: black !important;
    background-color: rgb(202, 88, 88) !important;
}

.checkbox-wrapper-49 input[type=checkbox]:checked+label {
    background: #209730 !important;
}

.checkbox-wrapper-49 input[type=checkbox]:checked+label:before {
    left: calc(var(--size) / 2) !important;
}

.checkbox-wrapper-49 label:before {
    transition: .3s ease !important;
    content: '' !important;
    width: calc((var(--size) / 2) - 10px);
    height: calc((var(--size) / 2) - 10px);
    position: absolute !important;
    background: white !important;
    left: 5px !important;
    top: 1px !important;
    box-sizing: border-box !important;
    border: 3px solid !important;
    color: black !important;
    border-radius: 100px !important;
}

.checkbox-wrapper-49 [type="checkbox"]:checked+label:before {
    -webkit-transform: none !important;
    transform: none !important;

}

.checkbox-wrapper-49 [type="checkbox"]:checked + label:before{
    top: 1px !important;
    left: 0px !important;
    width: calc((var(--size) / 2) - 10px) !important;
    height: calc((var(--size) / 2) - 10px) !important;
}