/* * * * * Bootstrap 4 Component - Custom switch * Version: 1.1.2 * Copyright (c) 2017-18 Martin Haubek * * * */.custom-switch {    line-height: 12px; }.custom-switch .custom-switch-input {    position: absolute;    z-index: -1;    opacity: 0; }.custom-switch .custom-switch-input, .custom-switch .custom-switch-input:after, .custom-switch .custom-switch-input:before,.custom-switch .custom-switch-input *,.custom-switch .custom-switch-input *:after,.custom-switch .custom-switch-input *:before,.custom-switch .custom-switch-input + .custom-switch-btn {    box-sizing: border-box; }.custom-switch .custom-switch-input:selection, .custom-switch .custom-switch-input:after:selection, .custom-switch .custom-switch-input:before:selection,.custom-switch .custom-switch-input *:selection,.custom-switch .custom-switch-input *:after:selection,.custom-switch .custom-switch-input *:before:selection,.custom-switch .custom-switch-input + .custom-switch-btn:selection {    background: none; }.custom-switch .custom-switch-input + .custom-switch-btn {    outline: 0;    display: inline-block;    position: relative;    -webkit-user-select: none;    -moz-user-select: none;    -ms-user-select: none;    user-select: none;    cursor: pointer;    width: 90px; /* 68px */    height: 30px;    margin: 0;    padding: 4px;    background: #f30000;    border-radius: 10px;    transition: all 150ms ease; }.custom-switch .custom-switch-input + .custom-switch-btn:after, .custom-switch .custom-switch-input + .custom-switch-btn:before {    position: relative;    display: block;    content: "";    width: 22px;    height: 22px; }.custom-switch .custom-switch-input + .custom-switch-btn:after {    left: 2px;    border-radius: 50%;    background: white;    transition: all 150ms ease; }.custom-switch .custom-switch-input + .custom-switch-btn:before {    display: none; }.custom-switch .custom-switch-input + .custom-switch-btn.text-hide {    top: -.80rem; }.custom-switch .custom-switch-input:checked + .custom-switch-btn {    background: #8bd434; }.custom-switch .custom-switch-input:checked + .custom-switch-btn:after {    left: 58px; }.custom-switch .custom-switch-input:checked + .custom-switch-btn ~ .custom-switch-content-checked {    opacity: 1;    height: auto; }.custom-switch .custom-switch-input:checked + .custom-switch-btn ~ .custom-switch-content-unchecked {    display: none;    opacity: 0;    height: 0; }.custom-switch .custom-switch-input:not(:checked) + .custom-switch-btn ~ .custom-switch-content-checked {    display: none;    opacity: 0;    height: 0; }.custom-switch .custom-switch-input:not(:checked) + .custom-switch-btn ~ .custom-switch-content-unchecked {    opacity: 1;    height: auto; }.custom-switch .custom-switch-input[disabled] + .custom-switch-btn {    background: rgba(173, 181, 189, 0.6);    cursor: default; }.custom-switch .custom-switch-input[disabled]:checked + .custom-switch-btn {    background: rgba(40, 167, 69, 0.4); }.custom-switch .custom-switch-input:not([disabled]):focus ~ .custom-switch-btn {    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 0.25rem rgba(56, 123, 189, 0.25); }.custom-switch .custom-switch-input[required] ~ .custom-switch-btn {    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 0.125rem rgba(220, 53, 69, 0.5); }.custom-switch .custom-switch-form-text {    display: inline-block;    height: 38px;    margin-left: .5rem;    line-height: 38px;    vertical-align: top; }.custom-switch.custom-switch-label-io .custom-switch-input + .custom-switch-btn {    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='68' height='38'%3E%3Ctext x='42.5' y='23.75' font-size='12px' font-family='-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji' fill='%23fff'%3EO%3C/text%3E%3C/svg%3E"); }.custom-switch.custom-switch-label-io .custom-switch-input:checked + .custom-switch-btn {    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='68' height='38'%3E%3Ctext x='18.13333' y='23.75' font-size='12px' font-family='-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji' fill='%23fff'%3EI%3C/text%3E%3C/svg%3E"); }.custom-switch.custom-switch-label-onoff .custom-switch-input + .custom-switch-btn {    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='68' height='38'%3E%3Ctext x='38.85714' y='23.75' font-size='16px' font-family='-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji' fill='%23fff'%3EOFF%3C/text%3E%3C/svg%3E");    background-position-x: right 5px;    background-position-y: center;    background-repeat: no-repeat;}.custom-switch.custom-switch-label-onoff .custom-switch-input:checked + .custom-switch-btn {    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='68' height='38'%3E%3Ctext x='9.71429' y='23.75' font-size='16px' font-family='-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji' fill='%23fff'%3EON%3C/text%3E%3C/svg%3E");    background-position-x: left;    background-position-y: center;    background-repeat: no-repeat;}.custom-switch.custom-switch-label-yesno .custom-switch-input + .custom-switch-btn {    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='68' height='38'%3E%3Ctext x='38.85714' y='23.75' font-size='12px' font-family='-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji' fill='%23fff'%3ENo%3C/text%3E%3C/svg%3E"); }.custom-switch.custom-switch-label-yesno .custom-switch-input:checked + .custom-switch-btn {    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='68' height='38'%3E%3Ctext x='9.71429' y='23.75' font-size='12px' font-family='-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji' fill='%23fff'%3EYes%3C/text%3E%3C/svg%3E"); }.custom-switch.custom-switch-label-status .custom-switch-input + .custom-switch-btn {    width: 96px;    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='38'%3E%3Ctext x='38.85714' y='23.75' font-size='12px' font-family='-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji' fill='%23fff'%3EDisabled%3C/text%3E%3C/svg%3E"); }.custom-switch.custom-switch-label-status .custom-switch-input:checked + .custom-switch-btn {    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='38'%3E%3Ctext x='9.71429' y='23.75' font-size='12px' font-family='-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji' fill='%23fff'%3EEnabled%3C/text%3E%3C/svg%3E"); }.custom-switch.custom-switch-label-status .custom-switch-input:checked + .custom-switch-btn:after {    left: 58px; }.custom-switch-sm {    line-height: 11px; }.custom-switch-sm .custom-switch-input + .custom-switch-btn {    width: 60px;    height: 31px;    padding: 3px;    border-radius: 62px; }.custom-switch-sm .custom-switch-input + .custom-switch-btn:after, .custom-switch-sm .custom-switch-input + .custom-switch-btn:before {    width: 23px;    height: 23px; }.custom-switch-sm .custom-switch-input + .custom-switch-btn:after {    left: 2px; }.custom-switch-sm .custom-switch-input:checked + .custom-switch-btn:after {    left: 29px; }.custom-switch-sm .custom-switch-form-text {    height: 31px;    margin-left: .5rem;    line-height: 31px; }.custom-switch-sm.custom-switch-label-io .custom-switch-input + .custom-switch-btn {    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='31'%3E%3Ctext x='37.5' y='19.375' font-size='11px' font-family='-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji' fill='%23fff'%3EO%3C/text%3E%3C/svg%3E"); }.custom-switch-sm.custom-switch-label-io .custom-switch-input:checked + .custom-switch-btn {    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='31'%3E%3Ctext x='16' y='19.375' font-size='11px' font-family='-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji' fill='%23fff'%3EI%3C/text%3E%3C/svg%3E"); }.custom-switch-sm.custom-switch-label-onoff .custom-switch-input + .custom-switch-btn {    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='31'%3E%3Ctext x='32.87671' y='19.375' font-size='11px' font-family='-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji' fill='%23fff'%3EOFF%3C/text%3E%3C/svg%3E"); }.custom-switch-sm.custom-switch-label-onoff .custom-switch-input:checked + .custom-switch-btn {    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='31'%3E%3Ctext x='8.57143' y='19.375' font-size='11px' font-family='-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji' fill='%23fff'%3EON%3C/text%3E%3C/svg%3E"); }.custom-switch-sm.custom-switch-label-yesno .custom-switch-input + .custom-switch-btn {    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='31'%3E%3Ctext x='32.87671' y='19.375' font-size='11px' font-family='-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji' fill='%23fff'%3ENo%3C/text%3E%3C/svg%3E"); }.custom-switch-sm.custom-switch-label-yesno .custom-switch-input:checked + .custom-switch-btn {    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='31'%3E%3Ctext x='8.57143' y='19.375' font-size='11px' font-family='-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji' fill='%23fff'%3EYes%3C/text%3E%3C/svg%3E"); }.custom-switch-sm.custom-switch-label-status .custom-switch-input + .custom-switch-btn {    width: 88px;    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='31'%3E%3Ctext x='32.87671' y='19.375' font-size='11px' font-family='-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji' fill='%23fff'%3EDisabled%3C/text%3E%3C/svg%3E"); }.custom-switch-sm.custom-switch-label-status .custom-switch-input:checked + .custom-switch-btn {    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='31'%3E%3Ctext x='8.57143' y='19.375' font-size='11px' font-family='-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji' fill='%23fff'%3EEnabled%3C/text%3E%3C/svg%3E"); }.custom-switch-sm.custom-switch-label-status .custom-switch-input:checked + .custom-switch-btn:after {    left: 57px; }.custom-switch-xs {    line-height: 10px; }.custom-switch-xs .custom-switch-input + .custom-switch-btn {    width: 48px;    height: 24px;    padding: 3px;    border-radius: 48px; }.custom-switch-xs .custom-switch-input + .custom-switch-btn:after, .custom-switch-xs .custom-switch-input + .custom-switch-btn:before {    width: 18px;    height: 18px; }.custom-switch-xs .custom-switch-input + .custom-switch-btn:after {    left: 1px; }.custom-switch-xs .custom-switch-input:checked + .custom-switch-btn:after {    left: 24px; }.custom-switch-xs .custom-switch-form-text {    height: 24px;    margin-left: .5rem;    line-height: 24px; }.custom-switch-xs.custom-switch-label-io .custom-switch-input + .custom-switch-btn {    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24'%3E%3Ctext x='27.42857' y='15' font-size='10px' font-family='-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji' fill='%23fff'%3EO%3C/text%3E%3C/svg%3E"); }.custom-switch-xs.custom-switch-label-io .custom-switch-input:checked + .custom-switch-btn {    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24'%3E%3Ctext x='12.8' y='15' font-size='10px' font-family='-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji' fill='%23fff'%3EI%3C/text%3E%3C/svg%3E"); }.custom-switch-xs.custom-switch-label-onoff .custom-switch-input + .custom-switch-btn {    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24'%3E%3Ctext x='25.6' y='15' font-size='10px' font-family='-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji' fill='%23fff'%3EOFF%3C/text%3E%3C/svg%3E"); }.custom-switch-xs.custom-switch-label-onoff .custom-switch-input:checked + .custom-switch-btn {    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24'%3E%3Ctext x='6.85714' y='15' font-size='10px' font-family='-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji' fill='%23fff'%3EON%3C/text%3E%3C/svg%3E"); }.custom-switch-xs.custom-switch-label-yesno .custom-switch-input + .custom-switch-btn {    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24'%3E%3Ctext x='25.6' y='15' font-size='10px' font-family='-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji' fill='%23fff'%3ENo%3C/text%3E%3C/svg%3E"); }.custom-switch-xs.custom-switch-label-yesno .custom-switch-input:checked + .custom-switch-btn {    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24'%3E%3Ctext x='6.85714' y='15' font-size='10px' font-family='-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji' fill='%23fff'%3EYes%3C/text%3E%3C/svg%3E"); }.custom-switch-xs.custom-switch-label-status .custom-switch-input + .custom-switch-btn {    width: 76px;    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='76' height='24'%3E%3Ctext x='25.6' y='15' font-size='10px' font-family='-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji' fill='%23fff'%3EDisabled%3C/text%3E%3C/svg%3E"); }.custom-switch-xs.custom-switch-label-status .custom-switch-input:checked + .custom-switch-btn {    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='76' height='24'%3E%3Ctext x='6.85714' y='15' font-size='10px' font-family='-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji' fill='%23fff'%3EEnabled%3C/text%3E%3C/svg%3E"); }.custom-switch-xs.custom-switch-label-status .custom-switch-input:checked + .custom-switch-btn:after {    left: 52px; }.is-invalid .custom-switch .custom-switch-input ~ .custom-switch-btn,.was-validated .custom-switch:invalid .custom-switch-input ~ .custom-switch-btn {    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 0.25rem #dc3545; }.custom-switch.custom-switch-icons .custom-switch-input + .custom-switch-btn {    width: 60px;    border-radius: 100px;    padding: 3px;    height: 28px;}.custom-switch.custom-switch-icons .custom-switch-input:checked + .custom-switch-btn:after {    display: flex;    justify-content: center;    align-items: center;    content: "\f00c";    font-family: 'Font Awesome 5 Pro';    font-weight: 400;    color: #8bd434;    font-size: 16px;    left: 31px;}.custom-switch.custom-switch-icons .custom-switch-input:not(:checked) + .custom-switch-btn:after {    display: flex;    justify-content: center;    align-items: center;    content: "\f00d";    font-family: 'Font Awesome 5 Pro';    font-weight: 400;    color: #f30000;    font-size: 16px;    left: 1px;}