.switch[type="checkbox"] {
    outline: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: inline-block;
    position: absolute;
    opacity: 0;
}

.switch[type="checkbox"]:focus + label::after,
.switch[type="checkbox"]:focus + label::before,
.switch[type="checkbox"]:focus + label:after,
.switch[type="checkbox"]:focus + label:before {
    outline: 1px dotted #b5b5b5;
}

.switch[type="checkbox"][disabled] {
    cursor: not-allowed;
}

.switch[type="checkbox"][disabled] + label {
    opacity: 0.5;
}

.switch[type="checkbox"][disabled] + label::before,
.switch[type="checkbox"][disabled] + label:before {
    opacity: 0.5;
}

.switch[type="checkbox"][disabled] + label::after,
.switch[type="checkbox"][disabled] + label:after {
    opacity: 0.5;
}

.switch[type="checkbox"][disabled] + label:hover {
    cursor: not-allowed;
}

.switch[type="checkbox"] + label {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 1rem;
    height: 2.5em;
    line-height: 1.5;
    padding-left: 3.5rem;
    padding-top: 0.2rem;
    cursor: pointer;
}

.switch[type="checkbox"] + label::before,
.switch[type="checkbox"] + label:before {
    position: absolute;
    display: block;
    top: calc(50% - 1.5rem * 0.5);
    left: 0;
    width: 3rem;
    height: 1.5rem;
    border: 0.1rem solid transparent;
    border-radius: 24px;
    background: #b5b5b5;
    content: "";
}

.switch[type="checkbox"] + label::after,
.switch[type="checkbox"] + label:after {
    display: block;
    position: absolute;
    top: calc(50% - 1rem * 0.5);
    left: 0.25rem;
    width: 1rem;
    height: 1rem;
    transform: translate3d(0, 0, 0);
    border-radius: 50%;
    background: #fff;
    transition: all 0.25s ease-out;
    content: "";
}

.switch[type="checkbox"] + label .switch-active,
.switch[type="checkbox"] + label .switch-inactive {
    font-size: 0.9rem;
    z-index: 1;
    margin-top: -4px;
}

.switch[type="checkbox"] + label.has-text-inside .switch-inactive {
    margin-left: -1.925rem;
}

.switch[type="checkbox"] + label.has-text-inside .switch-active {
    margin-left: -3.25rem;
}

.switch[type="checkbox"].is-rtl + label {
    padding-left: 0;
    padding-right: 3.5rem;
}

.switch[type="checkbox"].is-rtl + label::before,
.switch[type="checkbox"].is-rtl + label:before {
    left: auto;
    right: 0;
}

.switch[type="checkbox"].is-rtl + label::after,
.switch[type="checkbox"].is-rtl + label:after {
    left: auto;
    right: 1.625rem;
}

.switch[type="checkbox"]:checked + label::before,
.switch[type="checkbox"]:checked + label:before {
    background: #007aa8;
}

.switch[type="checkbox"]:checked + label::after {
    left: 1.625rem;
}

.switch[type="checkbox"]:checked.is-rtl + label::after,
.switch[type="checkbox"]:checked.is-rtl + label:after {
    left: auto;
    right: 0.25rem;
}

.switch[type="checkbox"].is-small + label {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 0.75rem;
    height: 2.5em;
    line-height: 1.5;
    padding-left: 2.75rem;
    padding-top: 0.2rem;
    cursor: pointer;
}

.switch[type="checkbox"].is-small + label::before,
.switch[type="checkbox"].is-small + label:before {
    position: absolute;
    display: block;
    top: calc(50% - 1.125rem * 0.5);
    left: 0;
    width: 2.25rem;
    height: 1.125rem;
    border: 0.1rem solid transparent;
    border-radius: 4px;
    background: #b5b5b5;
    content: "";
}

.switch[type="checkbox"].is-small + label::after,
.switch[type="checkbox"].is-small + label:after {
    display: block;
    position: absolute;
    top: calc(50% - 0.625rem * 0.5);
    left: 0.25rem;
    width: 0.625rem;
    height: 0.625rem;
    transform: translate3d(0, 0, 0);
    border-radius: 4px;
    background: #fff;
    transition: all 0.25s ease-out;
    content: "";
}

.switch[type="checkbox"].is-small + label .switch-active,
.switch[type="checkbox"].is-small + label .switch-inactive {
    font-size: 0.65rem;
    z-index: 1;
    margin-top: -4px;
}

.switch[type="checkbox"].is-small + label.has-text-inside .switch-inactive {
    margin-left: -1.55rem;
}

.switch[type="checkbox"].is-small + label.has-text-inside .switch-active {
    margin-left: -2.5rem;
}

.switch[type="checkbox"].is-small.is-rtl + label {
    padding-left: 0;
    padding-right: 2.75rem;
}

.switch[type="checkbox"].is-small.is-rtl + label::before,
.switch[type="checkbox"].is-small.is-rtl + label:before {
    left: auto;
    right: 0;
}

.switch[type="checkbox"].is-small.is-rtl + label::after,
.switch[type="checkbox"].is-small.is-rtl + label:after {
    left: auto;
    right: 1.25rem;
}

.switch[type="checkbox"].is-small:checked + label::before,
.switch[type="checkbox"].is-small:checked + label:before {
    background: #007aa8;
}

.switch[type="checkbox"].is-small:checked + label::after {
    left: 1.25rem;
}

.switch[type="checkbox"].is-small:checked.is-rtl + label::after,
.switch[type="checkbox"].is-small:checked.is-rtl + label:after {
    left: auto;
    right: 0.25rem;
}


.switch[type="checkbox"].is-medium + label {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 1.25rem;
    height: 2.5em;
    line-height: 1.5;
    padding-left: 4.25rem;
    padding-top: 0.2rem;
    cursor: pointer;
}

.switch[type="checkbox"].is-medium + label::before,
.switch[type="checkbox"].is-medium + label:before {
    position: absolute;
    display: block;
    top: calc(50% - 1.875rem * 0.5);
    left: 0;
    width: 3.75rem;
    height: 1.875rem;
    border: 0.1rem solid transparent;
    border-radius: 4px;
    background: #b5b5b5;
    content: "";
}

.switch[type="checkbox"].is-medium + label::after,
.switch[type="checkbox"].is-medium + label:after {
    display: block;
    position: absolute;
    top: calc(50% - 1.375rem * 0.5);
    left: 0.25rem;
    width: 1.375rem;
    height: 1.375rem;
    transform: translate3d(0, 0, 0);
    border-radius: 4px;
    background: #fff;
    transition: all 0.25s ease-out;
    content: "";
}

.switch[type="checkbox"].is-medium + label .switch-active,
.switch[type="checkbox"].is-medium + label .switch-inactive {
    font-size: 1.15rem;
    z-index: 1;
    margin-top: -4px;
}

.switch[type="checkbox"].is-medium + label.has-text-inside .switch-inactive {
    margin-left: -2.3rem;
}

.switch[type="checkbox"].is-medium + label.has-text-inside .switch-active {
    margin-left: -4rem;
}

.switch[type="checkbox"].is-medium.is-rtl + label {
    padding-left: 0;
    padding-right: 4.25rem;
}

.switch[type="checkbox"].is-medium.is-rtl + label::before,
.switch[type="checkbox"].is-medium.is-rtl + label:before {
    left: auto;
    right: 0;
}

.switch[type="checkbox"].is-medium.is-rtl + label::after,
.switch[type="checkbox"].is-medium.is-rtl + label:after {
    left: auto;
    right: 2rem;
}

.switch[type="checkbox"].is-medium:checked + label::before,
.switch[type="checkbox"].is-medium:checked + label:before {
    background: #007aa8;
}

.switch[type="checkbox"].is-medium:checked + label::after {
    left: 2rem;
}

.switch[type="checkbox"].is-medium:checked.is-rtl + label::after,
.switch[type="checkbox"].is-medium:checked.is-rtl + label:after {
    left: auto;
    right: 0.25rem;
}

.switch[type="checkbox"].is-large + label {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 1.5rem;
    height: 2.5em;
    line-height: 1.5;
    padding-left: 5rem;
    padding-top: 0.2rem;
    cursor: pointer;
}

.switch[type="checkbox"].is-large + label::before,
.switch[type="checkbox"].is-large + label:before {
    position: absolute;
    display: block;
    top: calc(50% - 2.25rem * 0.5);
    left: 0;
    width: 4.5rem;
    height: 2.25rem;
    border: 0.1rem solid transparent;
    border-radius: 4px;
    background: #b5b5b5;
    content: "";
}

.switch[type="checkbox"].is-large + label::after,
.switch[type="checkbox"].is-large + label:after {
    display: block;
    position: absolute;
    top: calc(50% - 1.75rem * 0.5);
    left: 0.25rem;
    width: 1.75rem;
    height: 1.75rem;
    transform: translate3d(0, 0, 0);
    border-radius: 4px;
    background: #fff;
    transition: all 0.25s ease-out;
    content: "";
}

.switch[type="checkbox"].is-large + label .switch-active,
.switch[type="checkbox"].is-large + label .switch-inactive {
    font-size: 1.4rem;
    z-index: 1;
    margin-top: -4px;
}

.switch[type="checkbox"].is-large + label.has-text-inside .switch-inactive {
    margin-left: -2.675rem;
}

.switch[type="checkbox"].is-large + label.has-text-inside .switch-active {
    margin-left: -4.75rem;
}

.switch[type="checkbox"].is-large.is-rtl + label {
    padding-left: 0;
    padding-right: 5rem;
}

.switch[type="checkbox"].is-large.is-rtl + label::before,
.switch[type="checkbox"].is-large.is-rtl + label:before {
    left: auto;
    right: 0;
}

.switch[type="checkbox"].is-large.is-rtl + label::after,
.switch[type="checkbox"].is-large.is-rtl + label:after {
    left: auto;
    right: 2.375rem;
}

.switch[type="checkbox"].is-large:checked + label::before,
.switch[type="checkbox"].is-large:checked + label:before {
    background: #007aa8;
}

.switch[type="checkbox"].is-large:checked + label::after {
    left: 2.375rem;
}

.switch[type="checkbox"].is-large:checked.is-rtl + label::after,
.switch[type="checkbox"].is-large:checked.is-rtl + label:after {
    left: auto;
    right: 0.25rem;
}

.switch[type="checkbox"].is-white + label .switch-active {
    display: none;
}

.switch[type="checkbox"].is-white + label .switch-inactive {
    display: inline-block;
}

.switch[type="checkbox"].is-white:checked + label::before,
.switch[type="checkbox"].is-white:checked + label:before {
    background: #fff;
}

.switch[type="checkbox"].is-white:checked + label .switch-active {
    display: inline-block;
}

.switch[type="checkbox"].is-white:checked + label .switch-inactive {
    display: none;
}


.switch[type="checkbox"].is-unchecked-white + label::before,
.switch[type="checkbox"].is-unchecked-white + label:before {
    background: #fff;
}

.switch[type="checkbox"].is-black + label .switch-active {
    display: none;
}

.switch[type="checkbox"].is-black + label .switch-inactive {
    display: inline-block;
}

.switch[type="checkbox"].is-black:checked + label::before,
.switch[type="checkbox"].is-black:checked + label:before {
    background: #0a0a0a;
}

.switch[type="checkbox"].is-black:checked + label .switch-active {
    display: inline-block;
}

.switch[type="checkbox"].is-black:checked + label .switch-inactive {
    display: none;
}

.switch[type="checkbox"].is-light + label .switch-active {
    display: none;
}

.switch[type="checkbox"].is-light + label .switch-inactive {
    display: inline-block;
}

.switch[type="checkbox"].is-light:checked + label::before,
.switch[type="checkbox"].is-light:checked + label:before {
    background: #c0d6df;
}

.switch[type="checkbox"].is-light:checked + label .switch-active {
    display: inline-block;
}

.switch[type="checkbox"].is-light:checked + label .switch-inactive {
    display: none;
}


.switch[type="checkbox"].is-unchecked-light + label::before,
.switch[type="checkbox"].is-unchecked-light + label:before {
    background: #c0d6df;
}

.switch[type="checkbox"].is-dark + label .switch-active {
    display: none;
}

.switch[type="checkbox"].is-dark + label .switch-inactive {
    display: inline-block;
}

.switch[type="checkbox"].is-dark:checked + label::before,
.switch[type="checkbox"].is-dark:checked + label:before {
    background: #46626f;
}

.switch[type="checkbox"].is-dark:checked + label .switch-active {
    display: inline-block;
}

.switch[type="checkbox"].is-dark:checked + label .switch-inactive {
    display: none;
}

.switch[type="checkbox"].is-unchecked-dark + label::before,
.switch[type="checkbox"].is-unchecked-dark + label:before {
    background: #46626f;
}

.switch[type="checkbox"].is-primary + label .switch-active {
    display: none;
}

.switch[type="checkbox"].is-primary + label .switch-inactive {
    display: inline-block;
}

.switch[type="checkbox"].is-primary:checked + label::before,
.switch[type="checkbox"].is-primary:checked + label:before {
    background: #007aa8;
}

.switch[type="checkbox"].is-primary:checked + label .switch-active {
    display: inline-block;
}

.switch[type="checkbox"].is-primary:checked + label .switch-inactive {
    display: none;
}


.switch[type="checkbox"].is-unchecked-primary + label::before,
.switch[type="checkbox"].is-unchecked-primary + label:before {
    background: #007aa8;
}

.switch[type="checkbox"].is-link + label .switch-active {
    display: none;
}

.switch[type="checkbox"].is-link + label .switch-inactive {
    display: inline-block;
}

.switch[type="checkbox"].is-link:checked + label::before,
.switch[type="checkbox"].is-link:checked + label:before {
    background: #485fc7;
}

.switch[type="checkbox"].is-link:checked + label .switch-active {
    display: inline-block;
}

.switch[type="checkbox"].is-link:checked + label .switch-inactive {
    display: none;
}


.switch[type="checkbox"].is-unchecked-link + label::before,
.switch[type="checkbox"].is-unchecked-link + label:before {
    background: #485fc7;
}


.switch[type="checkbox"].is-info + label .switch-active {
    display: none;
}

.switch[type="checkbox"].is-info + label .switch-inactive {
    display: inline-block;
}

.switch[type="checkbox"].is-info:checked + label::before,
.switch[type="checkbox"].is-info:checked + label:before {
    background: #119cd1;
}

.switch[type="checkbox"].is-info:checked + label .switch-active {
    display: inline-block;
}

.switch[type="checkbox"].is-info:checked + label .switch-inactive {
    display: none;
}


.switch[type="checkbox"].is-unchecked-info + label::before,
.switch[type="checkbox"].is-unchecked-info + label:before {
    background: #119cd1;
}


.switch[type="checkbox"].is-success + label .switch-active {
    display: none;
}

.switch[type="checkbox"].is-success + label .switch-inactive {
    display: inline-block;
}

.switch[type="checkbox"].is-success:checked + label::before,
.switch[type="checkbox"].is-success:checked + label:before {
    background: #008800;
}

.switch[type="checkbox"].is-success:checked + label .switch-active {
    display: inline-block;
}

.switch[type="checkbox"].is-success:checked + label .switch-inactive {
    display: none;
}
.switch[type="checkbox"].is-unchecked-success + label::before,
.switch[type="checkbox"].is-unchecked-success + label:before {
    background: #008800;
}

.switch[type="checkbox"].is-warning + label .switch-active {
    display: none;
}

.switch[type="checkbox"].is-warning + label .switch-inactive {
    display: inline-block;
}

.switch[type="checkbox"].is-warning:checked + label::before,
.switch[type="checkbox"].is-warning:checked + label:before {
    background: #ff920d;
}

.switch[type="checkbox"].is-warning:checked + label .switch-active {
    display: inline-block;
}

.switch[type="checkbox"].is-warning:checked + label .switch-inactive {
    display: none;
}

.switch[type="checkbox"].is-unchecked-warning + label::before,
.switch[type="checkbox"].is-unchecked-warning + label:before {
    background: #ff920d;
}

.switch[type="checkbox"].is-danger + label .switch-active {
    display: none;
}

.switch[type="checkbox"].is-danger + label .switch-inactive {
    display: inline-block;
}

.switch[type="checkbox"].is-danger:checked + label::before,
.switch[type="checkbox"].is-danger:checked + label:before {
    background: #e4283a;
}

.switch[type="checkbox"].is-danger:checked + label .switch-active {
    display: inline-block;
}

.switch[type="checkbox"].is-danger:checked + label .switch-inactive {
    display: none;
}

.switch[type="checkbox"].is-unchecked-danger + label::before,
.switch[type="checkbox"].is-unchecked-danger + label:before {
    background: #e4283a;
}

.field-body .switch[type="checkbox"] + label {
    margin-top: 0.375em;
}
