/* * * * * Bootstrap 4 Component - Custom switch * Version: 1.1.2 * Copyright (c) 2017-18 Martin Haubek * * * */ .custom-switch{line-height: 12px; padding-left: 0px;}.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: 62px; height: 28px; margin: 0; padding: 4px; background: white; border:1px solid #627179; border-radius: 76px; 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: 19px; height: 19px;}.custom-switch .custom-switch-input + .custom-switch-btn:after{left: 2px; border-radius: 50%; background: #627179; transition: all 150ms ease;}.custom-switch .custom-switch-input:checked + .custom-switch-btn:after{left: 2px; border-radius: 50%; background: #0056C4; 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: white; border:1px solid #0056C4;}.custom-switch .custom-switch-input:checked + .custom-switch-btn:after{left: 30px;}.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(154, 212, 214, 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, 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, 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='28'%3E%3Ctext x='29.85714' y='17.75' font-size='12px' font-family='-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji' fill='%23627179'%3EOFF%3C/text%3E%3C/svg%3E");}.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='28'%3E%3Ctext x='9.71429' y='17.75' font-size='12px' font-family='-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji' fill='%230056C4'%3EON%3C/text%3E%3C/svg%3E");}.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, 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, 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, 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, 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;}