.custom-control {position: relative;display: block;min-height: 1.6rem;padding-left: 1.5rem; } .custom-control-inline {display: inline-flex;margin-right: 1rem; } .custom-control-input {position: absolute;z-index: -1;opacity: 0; } .custom-control-input:checked ~ .custom-control-label::before {color: var(--custom-control-indicator-checked-color);border-color: var(--custom-control-indicator-checked-border-color);background-color: var(--custom-control-indicator-checked-bg); } .custom-control-input:focus ~ .custom-control-label::before {box-shadow: 0 0 0 0.2rem var(--input-btn-focus-color); } .custom-control-input:focus:not(:checked) ~ .custom-control-label::before {border-color: var(--input-focus-border-color); } .custom-control-input:not(:disabled):active ~ .custom-control-label::before {color: var(--custom-control-indicator-active-color);background-color: var(--custom-control-indicator-active-bg);border-color: var(--custom-control-indicator-active-border-color); } .custom-control-input:disabled ~ .custom-control-label {color: var(--custom-control-label-disabled-color); } .custom-control-input:disabled ~ .custom-control-label::before {background-color: var(--custom-control-indicator-disabled-bg); } .custom-control-label {position: relative;margin-bottom: 0;vertical-align: top; } .custom-control-label::before {position: absolute;top: 0.3rem;left: -1.5rem;display: block;width: 1rem;height: 1rem;pointer-events: none;content: "";background-color: var(--custom-control-indicator-bg);border: var(--custom-control-indicator-border-color) solid 1px; } .custom-control-label::after {position: absolute;top: 0.3rem;left: -1.5rem;display: block;width: 1rem;height: 1rem;content: "";background: no-repeat 50%/50% 50%; } .custom-checkbox .custom-control-label::before {border-radius: 0.1111111111rem; } .custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath style='fill:var(--custom-control-indicator-checked-color)' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e"); } .custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before {border-color: var(--custom-checkbox-indicator-indeterminate-border-color);background-color: var(--custom-checkbox-indicator-indeterminate-bg); } .custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::after {background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3e%3cpath style='stroke:var(--custom-checkbox-indicator-indeterminate-color)' d='M0 2h4'/%3e%3c/svg%3e"); } .custom-checkbox .custom-control-input:disabled:checked ~ .custom-control-label::before {background-color: var(--custom-control-indicator-checked-disabled-bg); } .custom-checkbox .custom-control-input:disabled:indeterminate ~ .custom-control-label::before {background-color: var(--custom-control-indicator-checked-disabled-bg); } .custom-radio .custom-control-label::before {border-radius: 50%; } .custom-radio .custom-control-input:checked ~ .custom-control-label::after {background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' style='fill:var(--custom-control-indicator-checked-color)'/%3e%3c/svg%3e"); } .custom-radio .custom-control-input:disabled:checked ~ .custom-control-label::before {background-color: var(--custom-control-indicator-checked-disabled-bg); } .custom-switch {padding-left: 2.25rem; } .custom-switch .custom-control-label::before {left: -2.25rem;width: 1.75rem;pointer-events: all;border-radius: 0.5rem; } .custom-switch .custom-control-label::after {top: calc(0.3rem + 2px);left: calc(-2.25rem + 2px);width: calc(1rem - 4px);height: calc(1rem - 4px);background-color: var(--custom-control-indicator-border-color);border-radius: 0.5rem;transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } @media (prefers-reduced-motion: reduce) {.custom-switch .custom-control-label::after {transition: none;} } .custom-switch .custom-control-input:checked ~ .custom-control-label::after {background-color: var(--custom-control-indicator-bg);transform: translateX(0.75rem); } .custom-switch .custom-control-input:disabled:checked ~ .custom-control-label::before {background-color: var(--custom-control-indicator-checked-disabled-bg); } .custom-select {display: inline-block;width: 100%;height: calc(1.6em + 0.75rem + 2px);padding: 0.375rem 1.75rem 0.375rem 0.75rem;font-size: 1rem;font-weight: 400;line-height: 1.6;color: var(--custom-select-color);vertical-align: middle;background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath style='fill:var(--custom-select-indicator-color)' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px;background-color: var(--custom-select-bg);border: 1px solid var(--custom-select-border-color);border-radius: 0.1111111111rem;appearance: none; } .custom-select:focus {border-color: var(--custom-select-focus-border-color);outline: 0;box-shadow: 0 0 0 0.2rem var(--input-btn-focus-color); } .custom-select:focus::-ms-value {color: var(--input-color);background-color: var(--input-bg); } .custom-select[multiple], .custom-select[size]:not([size="1"]) {height: auto;padding-right: 0.75rem;background-image: none; } .custom-select:disabled {color: var(--custom-select-disabled-color);background-color: var(--custom-select-disabled-bg); } .custom-select::-ms-expand {display: none; } .custom-select-sm {height: calc(1.7em + 0.5rem + 2px);padding-top: 0.25rem;padding-bottom: 0.25rem;padding-left: 0.5rem;font-size: 0.875rem; } .custom-select-lg {height: calc(1.7em + 1rem + 2px);padding-top: 0.5rem;padding-bottom: 0.5rem;padding-left: 1rem;font-size: 1.25rem; } .custom-file {position: relative;display: inline-block;width: 100%;height: calc(1.6em + 0.75rem + 2px);margin-bottom: 0; } .custom-file-input {position: relative;z-index: 2;width: 100%;height: calc(1.6em + 0.75rem + 2px);margin: 0;opacity: 0; } .custom-file-input:focus ~ .custom-file-label {border-color: var(--custom-file-focus-border-color);box-shadow: 0 0 0 0.2rem var(--input-btn-focus-color); } .custom-file-input:disabled ~ .custom-file-label {background-color: var(--custom-file-disabled-bg); } .custom-file-input:lang(en) ~ .custom-file-label::after {content: "Browse"; } .custom-file-input ~ .custom-file-label[data-browse]::after {content: attr(data-browse); } .custom-file-label {position: absolute;top: 0;right: 0;left: 0;z-index: 1;height: calc(1.6em + 0.75rem + 2px);padding: 0.375rem 0.75rem;font-weight: 400;line-height: 1.6;color: var(--custom-file-color);background-color: var(--custom-file-bg);border: 1px solid var(--custom-file-border-color);border-radius: 0.1111111111rem; } .custom-file-label::after {position: absolute;top: 0;right: 0;bottom: 0;z-index: 3;display: block;height: calc(1.6em + 0.75rem);padding: 0.375rem 0.75rem;line-height: 1.6;color: var(--custom-file-button-color);content: "Browse";background-color: var(--custom-file-button-bg);border-left: inherit;border-radius: 0 0.1111111111rem 0.1111111111rem 0; } .custom-range {width: 100%;height: calc(1rem + 0.4rem);padding: 0;background-color: transparent;-webkit-appearance: none;-moz-appearance: none;appearance: none; } .custom-range:focus {outline: none; } .custom-range:focus::-webkit-slider-thumb {box-shadow: 0 0 0 1px var(--body-bg), 0 0 0 0.2rem var(--input-btn-focus-color); } .custom-range:focus::-moz-range-thumb {box-shadow: 0 0 0 1px var(--body-bg), 0 0 0 0.2rem var(--input-btn-focus-color); } .custom-range:focus::-ms-thumb {box-shadow: 0 0 0 1px var(--body-bg), 0 0 0 0.2rem var(--input-btn-focus-color); } .custom-range::-moz-focus-outer {border: 0; } .custom-range::-webkit-slider-thumb {width: 1rem;height: 1rem;margin-top: -0.25rem;background-color: var(--custom-range-thumb-bg);border: 0;border-radius: 1rem;transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;-webkit-appearance: none;-moz-appearance: none;appearance: none; } @media (prefers-reduced-motion: reduce) {.custom-range::-webkit-slider-thumb {transition: none;} } .custom-range::-webkit-slider-thumb:active {background-color: var(--custom-range-thumb-active-bg); } .custom-range::-webkit-slider-runnable-track {width: 100%;height: 0.5rem;color: transparent;cursor: pointer;background-color: var(--gray-300);border-color: transparent;border-radius: 1rem; } .custom-range::-moz-range-thumb {width: 1rem;height: 1rem;background-color: var(--custom-range-thumb-bg);border: 0;border-radius: 1rem;transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;-webkit-appearance: none;-moz-appearance: none;appearance: none; } @media (prefers-reduced-motion: reduce) {.custom-range::-moz-range-thumb {transition: none;} } .custom-range::-moz-range-thumb:active {background-color: var(--custom-range-thumb-active-bg); } .custom-range::-moz-range-track {width: 100%;height: 0.5rem;color: transparent;cursor: pointer;background-color: var(--gray-300);border-color: transparent;border-radius: 1rem; } .custom-range::-ms-thumb {width: 1rem;height: 1rem;margin-top: 0;margin-right: 0.2rem;margin-left: 0.2rem;background-color: var(--custom-range-thumb-bg);border: 0;border-radius: 1rem;transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;-webkit-appearance: none;-moz-appearance: none;appearance: none; } @media (prefers-reduced-motion: reduce) {.custom-range::-ms-thumb {transition: none;} } .custom-range::-ms-thumb:active {background-color: var(--custom-range-thumb-active-bg); } .custom-range::-ms-track {width: 100%;height: 0.5rem;color: transparent;cursor: pointer;background-color: transparent;border-color: transparent;border-width: 0.5rem; } .custom-range::-ms-fill-lower {background-color: var(--gray-300);border-radius: 1rem; } .custom-range::-ms-fill-upper {margin-right: 15px;background-color: var(--gray-300);border-radius: 1rem; } .custom-range:disabled::-webkit-slider-thumb {background-color: var(--custom-range-thumb-disabled-bg); } .custom-range:disabled::-webkit-slider-runnable-track {cursor: default; } .custom-range:disabled::-moz-range-thumb {background-color: var(--custom-range-thumb-disabled-bg); } .custom-range:disabled::-moz-range-track {cursor: default; } .custom-range:disabled::-ms-thumb {background-color: var(--custom-range-thumb-disabled-bg); } .custom-control-label::before, .custom-file-label, .custom-select {transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } @media (prefers-reduced-motion: reduce) {.custom-control-label::before,.custom-file-label,.custom-select {transition: none;} } .custom-select:disabled, .custom-select.disabled {pointer-events: none;background: var(--input-disabled-bg); }