.checkbox-0001{
    appearance: none;
    margin-right: 10px;
    width: 24px;
    height: 24px;
    border-radius: 25px;
    background-position: -24px 0;
    background-color: rgba(0, 0, 0, 0.5);
    box-shadow: rgba(255, 255, 255, 0.15) 0 1px 1px, inset rgba(0, 0, 0, 0.5) 0 0 0 1px;
    background-image: radial-gradient( rgba(204, 238, 255, 0.941) 0%, rgb(102, 255, 130) 5%, rgba(51, 255, 85, 0.3) 20%, rgba(255, 255, 255, 0) 50% );
    background-repeat: no-repeat;
    transition: 0.5s cubic-bezier(0,.76,.44,1);
}

.checkbox-0001:checked {
    background-position: 0 0;
}
/* *************************************** */
.label-toggle-0002{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin: 2px;
    color: rgba(204, 238, 255, 1);
    font-size: 16px;
    cursor: pointer;
} 

.label-toggle-0002 input[type="checkbox"] {
    appearance: none;
}
  
.toggle-0002-img{
    width: 70px;
    border-radius: 5px;
    border: 2px solid rgba(188, 188, 188, 0.5);
}

.label-toggle-0002 input[type=checkbox]:checked ~ .toggle-0002-img {
    border: 2px solid rgba(36, 255, 215, 0.6);  
}

/* *********************************************** */
.checkbox-0003{
    appearance: none;
    margin-right: 10px;
    width: 24px;
    height: 24px;
    border: 1px solid rgba(184, 149, 112, 1);
    border-radius: 5px;
    background-color: rgba(0, 0, 0, 0.5);
    box-shadow: rgba(255, 255, 255, 0.15) 0 1px 1px, inset rgba(0, 0, 0, 0.5) 0 0 0 1px; 
}

.checkbox-0003:checked {    
    width: 24px;
    height: 24px;
    border-radius: 5px;
    background-color: rgba(0, 0, 0, 0.5);
    box-shadow: rgba(255, 255, 255, 0.15) 0 1px 1px, inset rgba(0, 0, 0, 0.5) 0 0 0 1px;
    background-image: radial-gradient( rgba(204, 238, 255, 0.941) 0%, rgb(117, 102, 255) 5%, rgba(51, 75, 255, 0.3) 20%, rgba(255, 255, 255, 0) 50% );
    background-repeat: no-repeat;
    filter: brightness(4);
   
}

/* *************************************** */
.checkbox-0004{
    appearance: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    border-radius: 5px;
    background-color: rgba(0, 0, 0, 0.5);
    box-shadow: rgba(255, 255, 255, 0.15) 0 1px 1px, inset rgba(0, 0, 0, 0.5) 0 0 0 1px;
}
.checkbox-0004::before{
    content: 'X';
    color: rgb(191, 52, 52);    
}

.checkbox-0004:checked::before {    
    content: '✓';
    color: rgb(52, 185, 61);
}

/* *************************************** */

.checkbox-0005 input[type=checkbox] {
    display: none;
}

.checkbox-0005 .check-box-0005 {
    position: relative;
    height: 25px;
    width: 25px;
    padding: 5px 5px 5px 30px;
    background-color: transparent;
    border: 2px solid #000;
    border-radius: 5px;
    transition: border-color ease 0.2s;
    cursor: pointer;
}

.checkbox-0005 .check-box-0005::before {
    content: " ";
    position: absolute;
    top: 20px;
    left: 15px;
    transform: rotate(-135deg);
    height: 0;
    width: 3px;
    background-color: #b96b34;
    display: inline-block;
    transform-origin: left top;
    border-radius: 5px;
    transition: opacity ease 0.5;
}

.checkbox-0005 .check-box-0005::after {
    content: " ";
    position: absolute;
    top: 12px;
    left: 4px;
    transform: rotate(-45deg);
    height: 0;
    width: 3px;
    background-color: #b96b34;
    display: inline-block;
    transform-origin: left top;
    border-radius: 5px;
    transition: opacity ease 0.5;
}

.checkbox-0005 input[type=checkbox]:checked + .check-box-0005,
.checkbox-0005 .check-box-0005.checked {
    border-color: #34b93d;
}

.checkbox-0005 input[type=checkbox]:checked + .check-box-0005::after,
.checkbox-0005 .check-box-0005.checked::after {
    height: 12.5px;
    animation: check-short-0005 0.2s ease 0s forwards;
 }

.checkbox-0005 input[type=checkbox]:checked + .check-box-0005::before,
.checkbox-0005 .check-box-0005.checked::before {
    height: 27.5px;
    animation: check-long-0005 0.4s ease 0s forwards;
}

@keyframes check-short-0005 {
    0% {
        height: 0;
    }
    100% {
        height: 12.5px;
    }
    }

    @keyframes check-long-0005 {
    0% {
        height: 0;
    }
    50% {
        height: 0;
    }
    100% {
        height: 35px;
    }
}

/* *********************************************** */

.checkbox-0006 input[type=checkbox] {
    display: none;
}

.checkbox-0006 .check-box-0006 {
    position: relative;
    height: 25px;
    width: 25px;
    padding: 5px 5px 5px 30px;
    background-color: transparent;
    box-shadow: rgba(255, 255, 255, 0.15) 0 1px 1px, inset rgba(0, 0, 0, 0.5) 0 0 0 1px;
    border-radius: 5px;
    transition: border-color ease 0.2s;
    cursor: pointer;
}

.checkbox-0006 .check-box-0006::before {
    content: " ";
    position: absolute;
    top: 20px;
    left: 15px;
    transform: rotate(-135deg);
    height: 0;
    width: 3px;
    box-shadow: rgba(255, 255, 255, 0.15) 0 1px 1px, inset rgba(0, 0, 0, 0.5) 0 0 0 1px;
    display: inline-block;
    transform-origin: left top;
    border-radius: 5px;
    transition: opacity ease 0.5;
}

.checkbox-0006 .check-box-0006::after {
    content: " ";
    position: absolute;
    top: 12px;
    left: 4px;
    transform: rotate(-45deg);
    height: 0;
    width: 3px;
    box-shadow: rgba(255, 255, 255, 0.15) 0 1px 1px, inset rgba(0, 0, 0, 0.5) 0 0 0 1px;
    display: inline-block;
    transform-origin: left top;
    border-radius: 5px;
    transition: opacity ease 0.5;
}

.checkbox-0006 input[type=checkbox]:checked + .check-box-0006,
.checkbox-0006 .check-box-0006.checked {
    box-shadow: rgba(255, 255, 255, 0.15) 0 1px 1px, inset rgba(0, 0, 0, 0.5) 0 0 0 1px;
}

.checkbox-0006 input[type=checkbox]:checked + .check-box-0006::after,
.checkbox-0006 .check-box-0006.checked::after {
    height: 12px;
    animation: check-short-0006 0.2s ease 0s forwards;
}

.checkbox-0006 input[type=checkbox]:checked + .check-box-0006::before,
.checkbox-0006 .check-box-0006.checked::before {
    height: 35px;
    animation: check-long-0006 0.4s ease 0s forwards;
}

@keyframes check-short-0006 {
    0% {
        height: 0;
    }
    100% {
        height: 12px;
    }
}

    @keyframes check-long-0006 {
    0% {
        height: 0;
    }
    50% {
        height: 0;
    }
    100% {
        height: 35px;
    }
}

/* *********************************************** */
.checkbox-0007{
    appearance: none;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 5px;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.5);
    box-shadow: rgba(255, 255, 255, 0.15) 0 1px 1px, inset rgba(0, 0, 0, 0.5) 0 0 0 1px;
}

.checkbox-0007::before{
    content: 'X';
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0;
    left: 0;
    width: 24px;
    height: 24px;
    border-radius: 5px;
    color: rgb(250, 235, 215);
    background-color: rgba(99, 0, 0, 0.8);    
    background-position: 12px 0;
    transition: .15s cubic-bezier(0, 0.8, 1, 1);    
}

.checkbox-0007:checked::before {   
    content: '';
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0;
    left: -24px;
    width: 24px;
    height: 24px;
    border-radius: 5px;
    background-position: 0 0;
    transition: .15s cubic-bezier(0, 0.8, 1, 1);
}

.checkbox-0007::after{
    content: "";
    position: absolute;
    top: 0;
    left: -24px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 5px;
    background-position: 11px 0;
    transition: .15s cubic-bezier(0, 0.8, 1, 1);
    
}

.checkbox-0007:checked::after {  
    content: "✓";
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 5px;
    color: antiquewhite;
    background-color: rgba(10, 87, 0, 0.2);    
    background-position: -24px 0;
    transition: .15s cubic-bezier(0, 0.8, 1, 1);
}

/* *********************************************** */

.checkbox-0008 {
    display: table-cell;
    width: 100%;
    height: 100%;
    vertical-align: middle;
    text-align: center;
    cursor: pointer;
}

.label-0008 {
    cursor: pointer;
}

.checkbox-0008 .label-0008 .span-0008 {
    display: inline-block;
    position: relative;
    background-color: rgba(255, 0, 0, 0.1);
    width: 24px;
    height: 24px;
    transform-origin: center;
    border-radius: 5px;
    vertical-align: middle;
    margin-right: 10px;
    transition: 0.1s ease-in-out;
    box-shadow: rgba(255, 255, 255, 0.15) 0 1px 1px, inset rgba(0, 0, 0, 0.5) 0 0 0 1px;
}

.checkbox-0008 .label-0008 .span-0008:before {
    content: "";
    width: 0px;
    height: 3px;
    border-radius: 2px;
    background-color: rgba(21, 255, 0, 0.3);
    position: absolute;
    transform: rotate(45deg);
    top: 13px;
    left: 9px;
    transition: 0.1s ease-in-out;
    transform-origin: 0% 0%;
}
.checkbox-0008 .label-0008 .span-0008:after {
    content: "";
    width: 0;
    height: 3px;
    border-radius: 2px;
    background-color: rgba(21, 255, 0, 0.3);
    position: absolute;
    transform: rotate(287deg);
    top: 16px;
    left: 10px;
    transition: 0.1s ease-in-out;
    transform-origin: 0% 0%;
}
.checkbox-0008 .label-0008:hover .span-0008:before {
    width: 5px;
    transition: 0.1s ease-in-out;
}

.checkbox-0008 .label-0008:hover .span-0008:after {
    width: 10px;
    transition: 0.1s ease-in-out;
}

.checkbox-0008 input[type=checkbox] {
    appearance: none;
}

.checkbox-0008 input[type=checkbox]:checked + .label-0008 .span-0008:after {
    width: 25px;
    background-color: rgba(21, 255, 0, 0.8);
    transition: 0.1s ease-in-out;
}

.checkbox-0008 input[type=checkbox]:checked + .label-0008 .span-0008:before {
    width: 10px;
    background-color: rgba(21, 255, 0, 0.8);
    top: 8px;
    left: 5px;
    transition: 0.1s ease-in-out;
}

.checkbox-0008 input[type=checkbox]:checked + .label-0008:hover .span-0008:after {
    width: 25px;
    background-color: rgba(255, 255, 255, 1);
    transition: 0.1s ease-in-out;
}

.checkbox-0008 input[type=checkbox]:checked + .label-0008:hover .span-0008:before {
    width: 10px;
    background-color: rgba(255, 255, 255, 1);
    transition: 0.1s ease-in-out;
}
/* *********************************************** */
.checkbox-0009 {
    cursor: pointer;
}
.checkbox-0009 .checkbox {
    cursor: pointer;
    display: flex;
}

.input-0009{
    appearance: none;
}

.checkbox-0009 .div-0009 {
    position: relative;
    margin-right: 10px;
    width: 24px;
    height: 24px;
    border: 4px solid rgba(153, 153, 153, 1);
    border-radius: 5px;
}

.checkbox-0009 .input-0009:checked ~ .div-0009 {
    position: relative;
    border: 4px solid rgba(42, 125, 234, 1);
}

.checkbox-0009 .input-0009:checked ~ .div-0009:before {
    content: "";
    position: absolute;
    width: 24px;
    height: 24px;
    top: -6px;
    left: -6px;
    z-index: 2;
    background-image: url("../images/btn-image/green-tick.png");
    background-size: 16px;
    background-repeat: no-repeat;
    background-position: 50% 50%;

}
/* *********************************************** */

.checkbox-0010 .checkbox {
    cursor: pointer;
    display: flex;
}

.input-0010{
    display: none;
}

.checkbox-0010 .div-0010 {
    position: relative;
    margin-right: 10px;
    width: 24px;
    height: 24px;
    border: 2px solid rgb(153, 153, 153);
    border-radius: 25px;
}

.checkbox-0010 .input-0010:checked ~ .div-0010 {
    position: relative;
    border: 2px solid rgb(192, 205, 222);
}

.checkbox-0010 .input-0010:checked ~ .div-0010:before {
    content: "😀";
    position: absolute;
    top: -1px;
    left: -1px;
}
/* *********************************************** */
.label-0011 {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    /* color: antiquewhite; */
    margin: 5px;
    cursor: pointer;
}

.label-0011 input[type=checkbox] {
    appearance: none;
}

.label-0011 .checkbox-0011-svg {
    position: absolute;
    stroke: rgba(11, 211, 0, 1);
    stroke-width: 6px; /* Grubsza linia */
    width: 10px;       /* Podwojona szerokość */
    height: 10px; /* Wysokość SVG (można zmienić przy skalowaniu) */
    left: 8px;        
    bottom: 10px;        
    stroke-dasharray: 66; /* Dwukrotnie większa długość linii */
    animation: anim-checkbox-0011x ease-in-out 0.2s forwards;
}

.label-0011 input[type=checkbox]:checked ~ .checkbox-0011-svg {
    stroke: rgb(0, 158, 211);
    stroke-width: 6px; /* Grubsza linia */
    height: 20px;      /* Podwojona wysokość */
    width: 20px;       /* Podwojona szerokość */
    left: 5px;        
    bottom: 8px;        
    stroke-dasharray: 66; /* Dwukrotnie większa długość linii */
    animation: anim-checkbox-0011 ease-in-out 0.2s forwards;
}

.label-0011 .checkbox-0011-tick-box {
    background-color: rgba(127, 255, 212, 0.10);
    height: 24px;
    width: 24px;
    margin-right: 8px;
    float: left;
    border: 2px solid rgba(205, 205, 205, 1);
    border-radius: 100px;
}

@keyframes anim-checkbox-0011 {
    0% {
        stroke-dashoffset: 66;
    }
    100% {
        stroke-dashoffset: 0;
    }
}
@keyframes anim-checkbox-0011x {
    0% {
        stroke-dashoffset: 0;
    }
    100% {
        stroke-dashoffset: 66;
    }
}
/* *********************************************** */
/* .checkbox-0012 .label-0012{
    padding-left: 10px;
    cursor: pointer;
}

.checkbox-0012 .checkbox {
    position: relative;
    display: inline-block;
    width: 22px;
    box-shadow: rgba(255, 255, 255, 0.15) 0 1px 1px, inset rgba(0, 0, 0, 0.5) 0 0 0 1px;
}

.checkbox-0012 .checkbox:after {
    content: "";
    width: 100%;
    padding-top: 100%;
    display: block;
}

.checkbox-0012 .checkbox > * {
    position: absolute;
}

.checkbox-0012 .checkbox input:checked + svg {
    stroke-dasharray: 100;
    visibility: visible;
}

.checkbox-0012 .checkbox svg {
    fill: none;
    left: 0;
    stroke: rgb(58, 124, 181);
    stroke-dasharray: 0, 100;
    stroke-width: 2px;
    top: 0;
    transition: 1s;
    visibility: hidden;
}

.checkbox-0012 .checkbox input {
    visibility: hidden;
}
.checkbox-0012 .checkbox svg{
    display: block;
    height: 100%;
    width: 100%;
    stroke: rgb(58, 124, 181);
} */

.checkbox-0012 .checkbox-0012-label{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
}

.checkbox-0012 .checkbox-0012-tick-box input[type=checkbox] {
    appearance: none;
}

.checkbox-0012 .checkbox-0012-tick-box {
    position: relative;
    background-color: rgba(122, 108, 108, 0);
    width: 22px;
    height: 22px;
    box-shadow: rgba(255, 255, 255, 0.15) 0 1px 1px, inset rgba(0, 0, 0, 0.5) 0 0 0 1px;
    border-radius: 5px;
    margin: 5px 10px 5px 5px;
}

.checkbox-0012 .checkbox-0012-tick-box .checkbox-0012-svg {
    position: absolute;
    stroke-dasharray: 0, 100;
    stroke-width: 2px;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    transition: 1s ease-in-out;
    stroke: rgb(34, 255, 255);
}

.checkbox-0012 .checkbox-0012-tick-box input[type=checkbox]:checked ~ .checkbox-0012-svg {
    stroke-dasharray: 100;
}
/* *********************************************** */

.label-0013 {
    padding-left: 10px;
    cursor: pointer;
}

.checkbox-0013:hover .check {
    box-shadow: rgba(255, 255, 255, 0.15) 0 1px 1px, inset rgba(0, 0, 0, 0.5) 0 0 0 1px;
}

.checkbox-0013 {
    position: relative;
    display: inline-block;
    width: 24px;
    height: 24px;
    border-radius: 25px;
    box-shadow: rgba(255, 255, 255, 0.15) 0 1px 1px, inset rgba(0, 0, 0, 0.5) 0 0 0 1px;
    background-color: rgba(255, 255, 255, 0);
}

.checkbox-0013 .background {
    fill: rgba(255, 255, 255, 0);
    transition: ease all 0.6s;
}
.checkbox-0013 .stroke {
    fill: none;
    stroke: rgba(54, 249, 0, 1);
    stroke-miterlimit: 10;
    stroke-width: 2px;
    stroke-dashoffset: 100;
    stroke-dasharray: 100;
    transition: ease all 0.6s;
}
.checkbox-0013 .check {
    fill: none;
    stroke: rgba(255, 255, 255, 1);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2px;
    stroke-dashoffset: 22;
    stroke-dasharray: 22;
    transition: ease all 0.6s;
}
.checkbox-0013 input[type=checkbox] {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    margin: 0;
    opacity: 0;
    appearance: none;
}
.checkbox-0013 input[type=checkbox]:hover {
    cursor: pointer;
}
.checkbox-0013 input[type=checkbox]:checked + svg .background {
    fill: rgba(255, 255, 255, 0.3);
}
.checkbox-0013 input[type=checkbox]:checked + svg .stroke {
    stroke-dashoffset: 0;
}
.checkbox-0013 input[type=checkbox]:checked + svg .check {
    stroke-dashoffset: 0;
}
/* *********************************************** */
.checkbox-0014-label {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 5px;
    cursor: pointer;
}

.checkbox-0014 {
    position: relative;
    width: 24px;
    height: 24px;
    border-radius: 25px;
    margin-right: 10px;
    box-shadow: rgba(255, 255, 255, 0.15) 0 1px 1px, inset rgba(0, 0, 0, 0.5) 0 0 0 1px;
    background-color: rgba(255, 255, 255, 0);
}

.checkbox-0014 .checkbox-0014-bg-svg {
    fill: rgba(255, 255, 255, 0);
    transition: ease all 0.6s;
}

.checkbox-0014 .checkbox-0014-tick-svg {
    fill: none;
    stroke: rgba(250, 235, 215, 1);
    stroke-linecap: round;
    stroke-linejoin: round;
    top: 0;
    left: 0;
    stroke-width: 2px;
    stroke-dashoffset: 66;
    stroke-dasharray: 66;
    transition: ease all 0.6s;
}

.checkbox-0014 input[type=checkbox] {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    appearance: none;
    cursor: pointer;
}

.checkbox-0014 input[type=checkbox]:checked ~ .checkbox-0014-svg .checkbox-0014-bg-svg {
    fill: rgba(255, 255, 255, 0);
}

.checkbox-0014 input[type=checkbox]:checked ~ .checkbox-0014-svg .checkbox-0014-tick-svg {
    stroke-dashoffset: 0;
}
/* *********************************************** */
.checkbox-0015-label input[type=checkbox] {
    appearance: none;
}

.checkbox-0015-label {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 5px;
    cursor: pointer;
}

.checkbox-0015-label .checkbox-mark-0015 {
    position: relative;
    box-shadow: rgba(255, 255, 255, 0.15) 0 1px 1px, inset rgba(0, 0, 0, 0.5) 0 0 0 1px;
    background-color: rgba(255, 255, 255, 0);
    border-radius: 2px;
    width: 24px;
    height: 24px;
    margin-right: 10px;
    transition: ease all 0.6s;
}

.checkbox-0015-label .checkbox-0015-icon {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: rgba(100, 20, 230, 1);
    stroke-width: 5px;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-miterlimit: 10;
    stroke-dasharray: 30px;
    stroke-dashoffset: 30px;
    transition: ease all 0.6s;
}


.checkbox-0015-label input[type=checkbox]:checked ~ .checkbox-mark-0015 .checkbox-0015-icon {
    stroke-dashoffset: 0px;
    transition: ease all 0.6s;
}
.checkbox-0015-label input[type=checkbox]:checked ~ .checkbox-mark-0015{
    background-color: rgba(255, 255, 255, 0);
    transition: ease all 0.6s;
}

/* *********************************************** */  
.checkbox-0016 {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 5px;
    cursor: pointer;
}

.checkbox-0016 .checkbox-0016-label,
.checkbox-0016 .checkbox-0016-tick {
    cursor: pointer;
}

.checkbox-0016 input[type=checkbox] {
    appearance: none;
}

.checkbox-0016 .checkbox-0016-tick-box {
    position: relative;
    width: 24px;
    height: 24px;
    margin-right: 10px;
}

.checkbox-0016 input[type=checkbox]:checked ~ .checkbox-0016-tick-box .checkbox-0016-tick {
    width: 12px;
    height: 24px;
    top: 0px;
    left: 10px;
    border: 3px double rgba(36, 199, 142, 1);
    border-top-color: transparent;
    border-left-color: transparent;
    transform: rotate(45deg);
    border-radius: 0px 0px 5px 0px;
}

.checkbox-0016 .checkbox-0016-tick-box .checkbox-0016-tick {
    position: absolute;
    width: 24px;
    height: 24px;
    top: 0px;
    left: 0px;
    border: 3px double rgba(67, 67, 67, 1);
    border-radius: 5px 5px 5px 5px;
    transition: 0.3s ease-in-out;
}
                
/* *********************************************** */
.checkbox-0017 {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 5px;
    cursor: pointer;
}

.checkbox-0017 input[type="checkbox"] {
    appearance: none;
}

.checkbox-0017 .checkbox-0017-tick-box {
    position: relative;
    width: 24px;
    height: 24px;
    background-color: rgba(16, 16, 16, 0);
    border: 1px solid rgba(200, 204, 212, 1);
    margin-right: 10px;
    border-radius: 5px 5px 5px 5px;
    transition: 0.3s ease-in-out;
    animation: anim-checkbox-0017-unchecked 0.6s ease;
    cursor: pointer;
}

.checkbox-0017 .checkbox-0017-tick-box .checkbox-0017-tick {
    position: absolute;
    top: 1px;
    left: 5px;
    width: 5px;
    height: 11px;
    border-right: 2px solid rgba(241, 241, 241, 1);
    border-bottom: 2px solid rgba(241, 241, 241, 1);
    transform: rotate(45deg) scale(0);
    transition: 0.3s ease-in-out;
    transition-delay: 0.15s;
    opacity: 0;
}

.checkbox-0017 input[type="checkbox"]:checked ~ .checkbox-0017-tick-box {
    background-color: rgba(154, 227, 44, 1);
    border: 4px solid rgba(241, 241, 241, 1);
    animation: anim-checkbox-0017-checked 0.6s ease;
}

.checkbox-0017 input[type="checkbox"]:checked ~ .checkbox-0017-tick-box .checkbox-0017-tick {
    top: 1px;
    left: 5px;
    transform: rotate(45deg) scale(1);
    opacity: 1;
}

@keyframes anim-checkbox-0017-checked {
    from {
    transform: scale(1, 1);
    }
    30% {
    transform: scale(1.25, 0.75);
    }
    40% {
    transform: scale(0.75, 1.25);
    }
    50% {
    transform: scale(1.15, 0.85);
    }
    65% {
    transform: scale(0.95, 1.05);
    }
    75% {
    transform: scale(1.05, 0.95);
    }
    to {
    transform: scale(1, 1);
    }
}
    
@keyframes anim-checkbox-0017-unchecked {
    from {
    transform: scale(1, 1);
    }
    30% {
    transform: scale(1.25, 0.75);
    }
    40% {
    transform: scale(0.75, 1.25);
    }
    50% {
    transform: scale(1.15, 0.85);
    }
    65% {
    transform: scale(0.95, 1.05);
    }
    75% {
    transform: scale(1.05, 0.95);
    }
    to {
    transform: scale(1, 1);
    }
}
                     
/* *********************************************** */
.checkbox-0018 input[type="checkbox"] {
    appearance: none;
}

.checkbox-0018 {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 5px;
    cursor: pointer;
}

.checkbox-0018 .checkbox-0018-tick-box {
    cursor: pointer;
    position: relative;
    width: 24px;
    height: 24px;
    border-radius: 5px;
    margin-right: 10px;
    box-shadow: rgba(255, 255, 255, 0.15) 0 1px 1px, inset rgba(0, 0, 0, 0.5) 0 0 0 1px;
}

.checkbox-0018 .checkbox-0018-tick-box .checkbox-0018-svg {
    position: relative;
    fill: none;
    width: 100%;
    height: 100%;
    stroke-width: 1.5px;
    stroke: rgba(91, 211, 241, 1);
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: all 0.2s ease;
}

.checkbox-0018 .checkbox-0018-tick-box .checkbox-0018-svg path {
    stroke-dasharray: 60;
    stroke-dashoffset: 0;
}

.checkbox-0018 .checkbox-0018-tick-box .checkbox-0018-svg polyline {
    stroke-dasharray: 22;
    stroke-dashoffset: 42;
}

.checkbox-0018 input[type="checkbox"]:checked ~ .checkbox-0018-tick-box .checkbox-0018-svg path {
    stroke-dashoffset: 60;
    transition: all 0.3s linear;
}

.checkbox-0018 input[type="checkbox"]:checked ~ .checkbox-0018-tick-box .checkbox-0018-svg polyline {
    stroke: rgba(91, 211, 241, 1);
    stroke-dashoffset: 42;
    transition: all 0.3s linear;
}

.checkbox-0018 input[type="checkbox"]:not(:checked) ~ .checkbox-0018-tick-box .checkbox-0018-svg path {
    stroke-dashoffset: 0;
    transition: all 0.3s linear;
}

.checkbox-0018 input[type="checkbox"]:not(:checked) ~ .checkbox-0018-tick-box .checkbox-0018-svg polyline {
    stroke: rgba(91, 211, 241, 1);
    stroke-dashoffset: 66;
    transition: all 0.3s linear;
}
/* *********************************************** */

.checkbox-0019 input[type="checkbox"] {
    display: none;
    visibility: hidden;
}

.label-text-0019 {
    margin-left: 10px;
    cursor: pointer;
}

.checkbox-0019 {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.checkbox-0019 input + .box-x-0019 {
    position: relative;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 3px solid rgba(0, 0, 0, 0.2);
}

.checkbox-0019 input + .box-x-0019 svg {
    position: absolute;
    display: block;
    width: 24px;
    height: 24px;
    fill: none;
    stroke-width: 3;
    stroke: rgb(20, 159, 7);
    stroke-linecap: round;
    stroke-linejoin: round;
    left: -3px;
    top: -3px;
    right: -3px;
    bottom: -3px;
    z-index: 1;
    stroke-dashoffset: 124.6;
    stroke-dasharray: 0 162.6 133 29.6;
    transition: all 0.4s ease 0s;
}

.checkbox-0019 input:checked + .box-x-0019 svg {
    stroke-dashoffset: 162.6;
    stroke-dasharray: 0 162.6 28 134.6;
    transition: all 0.4s ease 0.2s;
}

/* *********************************************** */
.checkbox-0020-label {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 5px;
    cursor: pointer;
}

.checkbox-0020-label input[type="checkbox"] {
    appearance: none;
}

.checkbox-0020-label .checkbox-0020-tick-box {
    -webkit-perspective: 20;
    perspective: 20;
    border: 2px solid rgba(11, 239, 19, 1);
    background-color: rgba(0, 0, 97, 0);
    border-radius: 5px;
    margin-right: 10px;
    transition: all 0.3s ease;
}

.checkbox-0020-label .flip-box-0020 {
    position: relative;
    transform-style: preserve-3d;
    width: 20px;
    height: 20px;
    transition: all 0.4s ease;
}
.checkbox-0020-label input[type="checkbox"]:checked ~ .checkbox-0020-tick-box {
    border-color: rgba(241, 241, 241, 1);
}
.checkbox-0020-label input[type="checkbox"]:checked ~ .checkbox-0020-tick-box .flip-box-0020 {
    transform: rotateY(180deg);
}
.checkbox-0020-label .front-box-0020,
.checkbox-0020-label .back-box-0020 {
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    border-radius: 3px;
}
.checkbox-0020-label .front-box-0020 {
    background-color: rgba(241, 241, 241, 1);
}
.checkbox-0020-label .back-box-0020 {
    transform: rotateY(180deg);
    background-color: rgba(11, 239, 19, 1);
    text-align: center;
}
.checkbox-0020-label .back-box-0020 svg {
    width: 16px;
    height: 14px;
    top: 3px;
    fill: none;
}
.checkbox-0020-label .back-box-0020 svg path {
    stroke: rgba(255, 255, 255, 1);
    stroke-width: 2px;
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* *********************************************** */
.checkbox-0021-label {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 5px;
    cursor: pointer;
}

.checkbox-0021-label input[type=checkbox] {
    appearance: none;
}

.checkbox-0021-label .checkbox-0021-tick-box {
    margin-right: 10px;
}

.checkbox-0021-label .checkbox-0021-flip-box {
    position: relative;
    transform-style: preserve-3d;
    width: 20px;
    height: 20px;
    transition: 0.3s ease-in-out;
}


.checkbox-0021-label input[type="checkbox"]:checked ~ .checkbox-0021-tick-box .checkbox-0021-flip-box {
    transform: rotateY(540deg);
    transition: 0.8s ease-in-out;
}

.checkbox-0021-label .checkbox-0021-front-box,
.checkbox-0021-label .checkbox-0021-back-box {
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    border-radius: 2px 2px 2px 2px;
}

.checkbox-0021-label .checkbox-0021-front-box {
    background-color: rgba(255, 229, 199, 1);
}

.checkbox-0021-label .checkbox-0021-back-box {
    transform: rotateY(540deg);
    background-color: rgba(33, 230, 193, 1);
}

.checkbox-0021-label .checkbox-0021-back-box .checkbox-0021-svg {
    position: absolute;
    width: 20px;
    height: 20px;
    top: 0px;
    left: 0px;
    fill: none;
}

.checkbox-0021-label .checkbox-0021-back-box .checkbox-0021-svg .checkbox-0021-path {
    stroke: rgba(255, 229, 199, 1);
    stroke-width: 2px;
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* *********************************************** */
.checkbox-0022 {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.checkbox-0022 input[type="checkbox"] {
    appearance: none;
}

.checkbox-0022 .checkbox-0022-tick-box {
    position: relative;
    width: 24px;
    height: 24px;
    margin-right: 10px;
    border-radius: 3px;
    border: 1px solid rgb(144, 152, 169);
    background-color: rgba(127, 255, 212, 0.10);
    transition: all 1s ease;
    cursor: pointer;
}

.checkbox-0022 .checkbox-0022-tick-box .checkbox-0022-svg {
    position: absolute;
    width: 18px;
    height: 14px;
    top: 3px;
    left: 2px;
    fill: none;
    stroke: rgb(255, 255, 255);
    stroke-width: 2;
    stroke-dasharray: 16px;
    stroke-dashoffset: 16px;
    transition: all 0.3s ease;
}

.checkbox-0022 input[type="checkbox"]:checked ~ .checkbox-0022-tick-box {
    background-color: rgba(91, 211, 241, 1);
}

.checkbox-0022 input[type="checkbox"]:checked ~ .checkbox-0022-tick-box .checkbox-0022-svg {
    stroke-dashoffset: 0;
} 

/* *********************************************** */
.checkbox-0023-label {
    position: relative;
    display: inline-block;
    width: 100%;
    color: rgba(250, 235, 215, 1);
    padding-left: 10px;
    margin: 5px;
    border-radius: 5px;
    box-shadow: rgba(250, 235, 215, 1) 0 1px 1px, inset rgba(0, 0, 0, 0.5) 0 0 0 1px;
    transition: 0.25s all ease;
    cursor: pointer;
}

.checkbox-0023-label input[type="checkbox"] {
    appearance: none;
}

.checkbox-0023-label:has(> input[type=checkbox]:checked) {
    color: rgba(255, 0, 212, 1);
    box-shadow: rgba(255, 0, 212, 1) 0 1px 1px, inset rgba(0, 0, 0, 0.5) 0 0 0 1px;
    border-radius: 5px;
    transition: 0.25s all ease;
}

.checkbox-0023-label .checkbox-0023-tick-box .checkbox-0023-svg {
    position: absolute;
    width: 18px;
    height: 14px;
    top: -5px;
    left: 1px;
    fill: none;
    stroke: rgba(255, 0, 212, 1);
    stroke-width: 2px;
    stroke-dasharray: 16px;
    stroke-dashoffset: 16px;
    transition: all 0.3s ease;
}

.checkbox-0023-label input[type="checkbox"]:checked ~ .checkbox-0023-tick-box .checkbox-0023-svg {
    stroke-dashoffset: 0;
} 

.checkbox-0023-label .checkbox-0023-tick-box {
    position: absolute;
    width: 24px;
    height: 24px;
    top: 0px;
    left: 0px;    
    margin-right: 10px;
    transition: 0.25s all ease;
}
/* *********************************************** */
.checkbox-0024-label {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: rgba(250, 235, 215, 1);
    width: 100%;
    padding-left: 10px;
    margin: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.checkbox-0024-label:has(> input[type=checkbox]:checked) {
    color: rgba(24, 205, 166, 1);
    text-decoration: underline;
}

.checkbox-0024-label input[type=checkbox] {
    appearance: none;
}

.checkbox-0024-label .checkbox-0024-tick-box {
    position: relative;
    width: 24px;
    height: 24px;
    margin-right: 10px;
    border: 1px solid rgba(144, 152, 169, 1);
    border-radius: 3px;
    cursor: pointer;
}

.checkbox-0024-label input[type=checkbox]:checked ~ .checkbox-0024-tick-box {
    border: 1px solid rgba(24, 205, 166, 1);
}

.checkbox-0024-label .checkbox-0024-tick-box .checkbox-0024-svg {
    position: relative;
    stroke-width: 2px;
    stroke: rgba(24, 205, 166, 1);
    width: 14px; 
    height: 12px;
    top: 0px;
    left: 4px;
    transform: scale(0);
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.checkbox-0024-label input[type=checkbox]:checked ~ .checkbox-0024-tick-box .checkbox-0024-svg {
    transform: scale(1);
    transition: all 0.4s ease;
    transition-delay: 0.1s;
}

.checkbox-0024-label .checkbox-0024-tick-box .checkbox-0024-flash {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 24px;
    height: 24px;
    border-radius: 100%;
    background-color: rgba(24, 205, 166, 1);
    filter: blur(2px);
    transform: scale(0);
}

.checkbox-0024-label input[type=checkbox]:checked ~ .checkbox-0024-tick-box .checkbox-0024-flash {
    transform: scale(2);
    opacity: 0;
    transition: all 0.3s ease;
}
/* *********************************************** */
.checkbox-0025-label {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: rgba(252, 236, 221, 1);
    width: 100%;
    padding-left: 10px;
    margin: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.checkbox-0025-label:has(> input[type=checkbox]:checked) {
    color: rgba(255, 118, 1, 1);
    text-decoration: line-through wavy rgba(252, 236, 221, 1) 2px;
}

.checkbox-0025-label input[type=checkbox] {
    appearance: none;
}

.checkbox-0025-label .checkbox-0025-tick-box {
    position: relative;
    width: 24px;
    height: 24px;
    margin-right: 10px;
    border: 1px solid rgba(252, 236, 221, 1);
    background-color: rgba(252, 236, 221, 0.1);
    border-radius: 100px;
    cursor: pointer;
}

.checkbox-0025-label input[type=checkbox]:checked ~ .checkbox-0025-tick-box {
    border: 1px solid rgba(255, 118, 1, 1);
    background-color: rgba(252, 236, 221, 1);
}

.checkbox-0025-label .checkbox-0025-tick-box .checkbox-0025-svg {
    position: relative;
    stroke-width: 2px;
    stroke: rgba(255, 118, 1, 1);
    width: 14px; 
    height: 12px;
    top: 0px;
    left: 4px;
    transform: scale(0);
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.checkbox-0025-label input[type=checkbox]:checked ~ .checkbox-0025-tick-box .checkbox-0025-svg {
    transform: scale(1);
    transition: all 0.4s ease;
    transition-delay: 0.1s;
}

.checkbox-0025-label .checkbox-0025-tick-box .checkbox-0025-flash {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 24px;
    height: 24px;
    border-radius: 100%;
    background-color: rgba(255, 118, 1, 1);
    filter: blur(2px);
    transform: scale(0);
}

.checkbox-0025-label input[type=checkbox]:checked ~ .checkbox-0025-tick-box .checkbox-0025-flash {
    transform: scale(2);
    opacity: 0;
    transition: all 0.3s ease;
}
/* *********************************************** */
.label-toggle-0026{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin: 5px;
    color: rgba(204, 238, 255, 1);
    font-size: 16px;
    cursor: pointer;
} 

.label-toggle-0026 input[type="checkbox"] {
    appearance: none;
}
  
.toggle-0026-img{
    width: 60px;
    border-radius: 5px;
    border: 2px solid rgba(15, 15, 15, 0.5);
    margin: 2px;
}

.toggle-0026-box{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 100%;
    width: 100%;
    background-color: rgb(187, 193, 225);
    border: 2px solid rgba(15, 15, 15, 0.5);
    border-radius: 5px;
}

.label-toggle-0026 input[type=checkbox]:checked ~ .toggle-0026-box {
    background-color: rgba(0, 137, 128, 0.9);
    border: 2px solid rgba(36, 255, 215, 0.6);  
}

.label-toggle-0026 input[type=checkbox]:checked ~ .toggle-0026-box .toggle-0026-img {
    border: 2px solid rgba(36, 255, 215, 0.6);  
}

/* *********************************************** */
 
.toggle-0027-label-box{
    display: flex;
    justify-content: center;
    width: 100%;
}

.toggle-0027-top-box{    
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
}

.toggle-0027-box{
    position: relative;
    width: 70px;
    background-color: rgba(0, 0, 0, 0.2);
    border: 2px double rgba(181, 191, 217, 1);
    border-radius: 5px 5px 5px 5px;
    flex-direction: column;
    padding: 5px;
    margin: 5px;
}

.toggle-0027-img{
    position: relative;
    width: 60px;
    height: 80px;
    border-radius: 5px 5px 5px 5px;
    border: 2px double rgba(181, 191, 217, 1);
    background-repeat: no-repeat;
    background-size: cover;
    cursor: pointer;
}

.toggle-0027-label input[type=checkbox]{
    appearance: none;
}

.toggle-0027-label input[type=checkbox]:checked ~ .toggle-0027-tick-box {
    transform: scale(1);
    opacity: 1;
}

.toggle-0027-label{
    position: relative;
    display: flex;
    justify-content: center;
    width: 60px;
    height: 80px;
}

.toggle-0027-label .toggle-0027-tick-box {
    position: absolute;
    display: block;                     
    width: 20px;
    height: 20px;
    border: 1px double rgba(181, 191, 217, 1);
    border-radius: 5px 5px 5px 5px;
    top: 5px;
    left: 5px;
    background-color: rgba(255, 255, 255, 0.6);
    background-image: url("../images/btn-image/green-tick.png");
    background-size: 12px 12px;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    opacity: 0;
    transform: scale(0);
    transition: 0.2s ease-in-out;
    z-index: 2;
} 

.toggle-0027-span-box{
    width: 100%;
    margin-top: 10px;
    color: rgba(204, 238, 255, 1);
    font-size: 16px;
} 
                
/* *********************************************** */