.t-input-group {
    --switch-size: 20px;
}

.t-checkbox__control .t-checkbox {
    position: absolute !important;
    z-index: -1 !important;
    opacity: 0 !important;
}

.t-checkbox__indicator {
    position: relative !important;
    display: inline-block !important;
    width: calc(var(--switch-size) * 2.2) !important;
    height: calc(var(--switch-size) * 1.2) !important;
    border: none !important;
    border-radius: calc(var(--switch-size) * 0.6) !important;
    background-color: #111111 !important;
    transition: background-color 0.3s !important;
    margin-right: calc(var(--switch-size) * 0.5) !important;
    opacity: 1 !important;
}

.t-checkbox__indicator:after {
    content: '' !important;
    position: absolute !important;
    top: calc(var(--switch-size) * 0.1) !important;
    left: calc(var(--switch-size) * 0.1) !important;
    width: calc(var(--switch-size) * 1) !important;
    height: calc(var(--switch-size) * 1) !important;
    border: none !important;
    border-radius: 50% !important;
    background-color: #ffffff !important;
    transform: none !important;
    transition: transform 0.3s !important;
    display: block !important;
}

.t-checkbox__control .t-checkbox:checked ~ .t-checkbox__indicator {
    background-color: rgba(255, 204, 0, .5) !important;
}

.t-checkbox__control .t-checkbox:checked ~ .t-checkbox__indicator:after {
    transform: translateX(calc(var(--switch-size) * 1)) !important;
    background-color: #ffcc00 !important;
}