body{
    background-image: radial-gradient(#f8f8f8 2px, transparent 2px);
    background-size: calc(10 * 2px) calc(10 * 2px);
}
input{display:none}
input + label{
    border: 4px solid #ccc;
    padding: 2px;
    border-radius: 8px;
    cursor: pointer;
    display: inline-block;
    position: relative;
}

input:checked:checked + label{
    border: 5px solid #00c09e;
}

input:checked:checked + label::before {
    content: url('./images/check_2_fill.svg');
    display: block;
    position: absolute;
    margin: auto;
    top: -20px;
    left: -20px;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: end;
    background: 
#00c09e;
border-radius: 50px;
color: #fff;
    text-align: center;
    font-size: 16px;
    z-index: 10;
    transition: 0.3s linear;
    -o-transition: 0.3s linear;
    -ms-transition: 0.3s linear;
    -moz-transition: 0.3s linear;
    -webkit-transition: 0.3s linear;
    -o-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    cursor: pointer;
}

.bg {
    background-image: url(./images/bg.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
         
.btn-grad {
   background-image: linear-gradient(to right, #4B79A1 0%, #283E51  51%, #4B79A1  100%);
   background-size: 200% auto;
   color: white;            
   box-shadow: 0 0 20px #eee;
 }

.bg-stripes-fuchsia {
    background-color: #e879f91a;
    background-image: linear-gradient(135deg,#d946ef80 10%,#0000 0,#0000 50%,#d946ef80 0,#d946ef80 60%,#0000 0,#0000);
    background-size: 7.07px 7.07px;
}