.form-control { display: block; width: 100%; height: 36px; padding: 0.375rem 0.75rem; font-size: 0.875rem; font-weight: 400; line-height: 1.4285; color: #212121; background-color: #fff; background-clip: padding-box; border: 1px solid #e2e2e2; border-radius: 4px; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } @media (prefers-reduced-motion: reduce) { .form-control { transition: none; } } .form-control::-ms-expand { background-color: transparent; border: 0; } .form-control:focus { color: #212121; background-color: #fff; border-color: #005fbf; outline: 0; box-shadow: 0 0 4px 1px rgba(0, 95, 191, 0.3); } .form-control::-webkit-input-placeholder { color: #b4b4b4; opacity: 1; } .form-control::-moz-placeholder { color: #b4b4b4; opacity: 1; } .form-control:-ms-input-placeholder { color: #b4b4b4; opacity: 1; } .form-control::-ms-input-placeholder { color: #b4b4b4; opacity: 1; } .form-control::placeholder { color: #b4b4b4; opacity: 1; } .form-control:disabled, .form-control[readonly] { background-color: #f2f4f7; opacity: 1; } select.form-control:focus::-ms-value { color: #212121; background-color: #fff; } .form-control-file, .form-control-range { display: block; width: 100%; } .col-form-label { padding-top: calc(0.375rem + 1px); padding-bottom: calc(0.375rem + 1px); margin-bottom: 0; font-size: inherit; line-height: 1.4285; } .col-form-label-lg { padding-top: calc(0.5rem + 1px); padding-bottom: calc(0.5rem + 1px); font-size: 1.25rem; line-height: 1.4285; } .col-form-label-sm { padding-top: calc(0.25rem + 1px); padding-bottom: calc(0.25rem + 1px); font-size: 0.75rem; line-height: 1.4285; } .form-control-plaintext { display: block; width: 100%; padding-top: 0.375rem; padding-bottom: 0.375rem; margin-bottom: 0; line-height: 1.4285; color: #212121; background-color: transparent; border: solid transparent; border-width: 1px 0; } .form-control-plaintext.form-control-sm, .form-control-plaintext.form-control-lg { padding-right: 0; padding-left: 0; } .form-control-sm { height: calc(1.4285em + 0.5rem + 2px); padding: 0.25rem 0.5rem; font-size: 0.75rem; line-height: 1.4285; border-radius: 4px; } .form-control-lg { height: calc(1.4285em + 1rem + 2px); padding: 0.5rem 1rem; font-size: 1.25rem; line-height: 1.4285; border-radius: 4px; } select.form-control[size], select.form-control[multiple] { height: auto; } textarea.form-control { height: auto; } .form-group { margin-bottom: 20px; } .form-text { display: block; margin-top: 0; } .form-row { display: flex; flex-wrap: wrap; margin-right: -5px; margin-left: -5px; } .form-row > .col, .form-row > [class*="col-"] { padding-right: 5px; padding-left: 5px; } .form-check { position: relative; display: block; padding-left: 1.25rem; } .form-check-input { position: absolute; margin-top: 0.3rem; margin-left: -1.25rem; } .form-check-input:disabled ~ .form-check-label { color: #b4b4b4; } .form-check-label { margin-bottom: 0; } .form-check-inline { display: inline-flex; align-items: center; padding-left: 0; margin-right: 0.75rem; } .form-check-inline .form-check-input { position: static; margin-top: 0; margin-right: 0.3125rem; margin-left: 0; } .valid-feedback { display: none; width: 100%; margin-top: 0; font-size: 0.75rem; color: #009f61; } .valid-tooltip { position: absolute; top: 100%; z-index: 5; display: none; max-width: 100%; padding: 0.25rem 0.5rem; margin-top: .1rem; font-size: 0.75rem; line-height: 1.4285; color: #fff; background-color: rgba(0, 159, 97, 0.9); border-radius: 4px; } .was-validated .form-control:valid, .form-control.is-valid { border-color: #009f61; } .was-validated .form-control:valid:focus, .form-control.is-valid:focus { border-color: #009f61; box-shadow: 0 0 0 0.2rem rgba(0, 159, 97, 0.25); } .was-validated .form-control:valid ~ .valid-feedback, .was-validated .form-control:valid ~ .valid-tooltip, .form-control.is-valid ~ .valid-feedback, .form-control.is-valid ~ .valid-tooltip { display: block; } .was-validated .custom-select:valid, .custom-select.is-valid { border-color: #009f61; } .was-validated .custom-select:valid:focus, .custom-select.is-valid:focus { border-color: #009f61; box-shadow: 0 0 0 0.2rem rgba(0, 159, 97, 0.25); } .was-validated .custom-select:valid ~ .valid-feedback, .was-validated .custom-select:valid ~ .valid-tooltip, .custom-select.is-valid ~ .valid-feedback, .custom-select.is-valid ~ .valid-tooltip { display: block; } .was-validated .form-control-file:valid ~ .valid-feedback, .was-validated .form-control-file:valid ~ .valid-tooltip, .form-control-file.is-valid ~ .valid-feedback, .form-control-file.is-valid ~ .valid-tooltip { display: block; } .was-validated .form-check-input:valid ~ .form-check-label, .form-check-input.is-valid ~ .form-check-label { color: #009f61; } .was-validated .form-check-input:valid ~ .valid-feedback, .was-validated .form-check-input:valid ~ .valid-tooltip, .form-check-input.is-valid ~ .valid-feedback, .form-check-input.is-valid ~ .valid-tooltip { display: block; } .was-validated .custom-control-input:valid ~ .custom-control-label, .custom-control-input.is-valid ~ .custom-control-label { color: #009f61; } .was-validated .custom-control-input:valid ~ .custom-control-label::before, .custom-control-input.is-valid ~ .custom-control-label::before { border-color: #009f61; } .was-validated .custom-control-input:valid ~ .valid-feedback, .was-validated .custom-control-input:valid ~ .valid-tooltip, .custom-control-input.is-valid ~ .valid-feedback, .custom-control-input.is-valid ~ .valid-tooltip { display: block; } .was-validated .custom-control-input:valid:checked ~ .custom-control-label::before, .custom-control-input.is-valid:checked ~ .custom-control-label::before { border-color: #00d280; background-color: #00d280; } .was-validated .custom-control-input:valid:focus ~ .custom-control-label::before, .custom-control-input.is-valid:focus ~ .custom-control-label::before { box-shadow: 0 0 0 0.2rem rgba(0, 159, 97, 0.25); } .was-validated .custom-control-input:valid:focus:not(:checked) ~ .custom-control-label::before, .custom-control-input.is-valid:focus:not(:checked) ~ .custom-control-label::before { border-color: #009f61; } .was-validated .custom-file-input:valid ~ .custom-file-label, .custom-file-input.is-valid ~ .custom-file-label { border-color: #009f61; } .was-validated .custom-file-input:valid ~ .valid-feedback, .was-validated .custom-file-input:valid ~ .valid-tooltip, .custom-file-input.is-valid ~ .valid-feedback, .custom-file-input.is-valid ~ .valid-tooltip { display: block; } .was-validated .custom-file-input:valid:focus ~ .custom-file-label, .custom-file-input.is-valid:focus ~ .custom-file-label { border-color: #009f61; box-shadow: 0 0 0 0.2rem rgba(0, 159, 97, 0.25); } .invalid-feedback { display: none; width: 100%; margin-top: 0; font-size: 0.75rem; color: #d74022; } .invalid-tooltip { position: absolute; top: 100%; z-index: 5; display: none; max-width: 100%; padding: 0.25rem 0.5rem; margin-top: .1rem; font-size: 0.75rem; line-height: 1.4285; color: #fff; background-color: rgba(215, 64, 34, 0.9); border-radius: 4px; } .was-validated .form-control:invalid, .form-control.is-invalid { border-color: #d74022; } .was-validated .form-control:invalid:focus, .form-control.is-invalid:focus { border-color: #d74022; box-shadow: 0 0 0 0.2rem rgba(215, 64, 34, 0.25); } .was-validated .form-control:invalid ~ .invalid-feedback, .was-validated .form-control:invalid ~ .invalid-tooltip, .form-control.is-invalid ~ .invalid-feedback, .form-control.is-invalid ~ .invalid-tooltip { display: block; } .was-validated .custom-select:invalid, .custom-select.is-invalid { border-color: #d74022; } .was-validated .custom-select:invalid:focus, .custom-select.is-invalid:focus { border-color: #d74022; box-shadow: 0 0 0 0.2rem rgba(215, 64, 34, 0.25); } .was-validated .custom-select:invalid ~ .invalid-feedback, .was-validated .custom-select:invalid ~ .invalid-tooltip, .custom-select.is-invalid ~ .invalid-feedback, .custom-select.is-invalid ~ .invalid-tooltip { display: block; } .was-validated .form-control-file:invalid ~ .invalid-feedback, .was-validated .form-control-file:invalid ~ .invalid-tooltip, .form-control-file.is-invalid ~ .invalid-feedback, .form-control-file.is-invalid ~ .invalid-tooltip { display: block; } .was-validated .form-check-input:invalid ~ .form-check-label, .form-check-input.is-invalid ~ .form-check-label { color: #d74022; } .was-validated .form-check-input:invalid ~ .invalid-feedback, .was-validated .form-check-input:invalid ~ .invalid-tooltip, .form-check-input.is-invalid ~ .invalid-feedback, .form-check-input.is-invalid ~ .invalid-tooltip { display: block; } .was-validated .custom-control-input:invalid ~ .custom-control-label, .custom-control-input.is-invalid ~ .custom-control-label { color: #d74022; } .was-validated .custom-control-input:invalid ~ .custom-control-label::before, .custom-control-input.is-invalid ~ .custom-control-label::before { border-color: #d74022; } .was-validated .custom-control-input:invalid ~ .invalid-feedback, .was-validated .custom-control-input:invalid ~ .invalid-tooltip, .custom-control-input.is-invalid ~ .invalid-feedback, .custom-control-input.is-invalid ~ .invalid-tooltip { display: block; } .was-validated .custom-control-input:invalid:checked ~ .custom-control-label::before, .custom-control-input.is-invalid:checked ~ .custom-control-label::before { border-color: #e2634a; background-color: #e2634a; } .was-validated .custom-control-input:invalid:focus ~ .custom-control-label::before, .custom-control-input.is-invalid:focus ~ .custom-control-label::before { box-shadow: 0 0 0 0.2rem rgba(215, 64, 34, 0.25); } .was-validated .custom-control-input:invalid:focus:not(:checked) ~ .custom-control-label::before, .custom-control-input.is-invalid:focus:not(:checked) ~ .custom-control-label::before { border-color: #d74022; } .was-validated .custom-file-input:invalid ~ .custom-file-label, .custom-file-input.is-invalid ~ .custom-file-label { border-color: #d74022; } .was-validated .custom-file-input:invalid ~ .invalid-feedback, .was-validated .custom-file-input:invalid ~ .invalid-tooltip, .custom-file-input.is-invalid ~ .invalid-feedback, .custom-file-input.is-invalid ~ .invalid-tooltip { display: block; } .was-validated .custom-file-input:invalid:focus ~ .custom-file-label, .custom-file-input.is-invalid:focus ~ .custom-file-label { border-color: #d74022; box-shadow: 0 0 0 0.2rem rgba(215, 64, 34, 0.25); } .form-inline { display: flex; flex-flow: row wrap; align-items: center; } .form-inline .form-check { width: 100%; } @media (min-width: 576px) { .form-inline label { display: flex; align-items: center; justify-content: center; margin-bottom: 0; } .form-inline .form-group { display: flex; flex: 0 0 auto; flex-flow: row wrap; align-items: center; margin-bottom: 0; } .form-inline .form-control { display: inline-block; width: auto; vertical-align: middle; } .form-inline .form-control-plaintext { display: inline-block; } .form-inline .input-group, .form-inline .custom-select { width: auto; } .form-inline .form-check { display: flex; align-items: center; justify-content: center; width: auto; padding-left: 0; } .form-inline .form-check-input { position: relative; flex-shrink: 0; margin-top: 0; margin-right: 0.25rem; margin-left: 0; } .form-inline .custom-control { align-items: center; justify-content: center; } .form-inline .custom-control-label { margin-bottom: 0; } } .custom-control { position: relative; display: block; min-height: 1.249938rem; 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: #fff; border-color: #005fbf; background-color: #005fbf; } .custom-control-input:focus ~ .custom-control-label::before { box-shadow: 0 0 0 2px rgba(0, 95, 191, 0.3); } .custom-control-input:focus:not(:checked) ~ .custom-control-label::before { border-color: #409fff; } .custom-control-input:not(:disabled):active ~ .custom-control-label::before { color: #fff; background-color: #73b8ff; border-color: #73b8ff; } .custom-control-input:disabled ~ .custom-control-label { color: #b4b4b4; } .custom-control-input:disabled ~ .custom-control-label::before { background-color: #f2f4f7; } .custom-control-label { position: relative; margin-bottom: 0; vertical-align: top; } .custom-control-label::before { position: absolute; top: 0.124969rem; left: -1.5rem; display: block; width: 1rem; height: 1rem; pointer-events: none; content: ""; background-color: #fff; border: #e2e2e2 solid 1px; } .custom-control-label::after { position: absolute; top: 0.124969rem; left: -1.5rem; display: block; width: 1rem; height: 1rem; content: ""; background: no-repeat 50% / 50% 50%; } .custom-checkbox .custom-control-label::before { border-radius: 2px; } .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 fill='%23ffffff' 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: #e2e2e2; background-color: #005fbf; } .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 stroke='%23ffffff' d='M0 2h4'/%3e%3c/svg%3e"); } .custom-checkbox .custom-control-input:disabled:checked ~ .custom-control-label::before { background-color: rgba(0, 95, 191, 0.5); } .custom-checkbox .custom-control-input:disabled:indeterminate ~ .custom-control-label::before { background-color: rgba(0, 95, 191, 0.5); } .custom-radio .custom-control-label::before { border-radius: 100%; } .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' fill='%23ffffff'/%3e%3c/svg%3e"); } .custom-radio .custom-control-input:disabled:checked ~ .custom-control-label::before { background-color: rgba(0, 95, 191, 0.5); } .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.124969rem + 2px); left: calc(-2.25rem + 2px); width: calc(1rem - 4px); height: calc(1rem - 4px); background-color: #e2e2e2; 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: #fff; transform: translateX(0.75rem); } .custom-switch .custom-control-input:disabled:checked ~ .custom-control-label::before { background-color: rgba(0, 95, 191, 0.5); } .custom-select { display: inline-block; width: 100%; height: calc(1.4285em + 0.75rem + 2px); padding: 8px 1.75rem 8px 0.75rem; font-size: 0.875rem; font-weight: 400; line-height: 1.4285; color: #777; vertical-align: middle; background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='%23777' d='M6.28178611,7.34112994 C5.98969924,7.04743259 5.5148273,7.04612703 5.22112994,7.33821389 C4.92743259,7.63030076 4.92612703,8.1051727 5.21821389,8.39887006 L9.44490899,12.6488701 C9.73699896,12.9425705 10.2118771,12.9438725 10.5055731,12.6517782 L14.7788781,8.40177816 C15.072571,8.10968687 15.0738694,7.63481492 14.7817782,7.34112195 C14.4896869,7.04742898 14.0148149,7.04613056 13.7211219,7.33822184 L9.9796032,11.0593358 L6.28178611,7.34112994 Z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/24px; background-color: #fff; border: 1px solid #e2e2e2; border-radius: 4px; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .custom-select:focus { border-color: #409fff; outline: 0; box-shadow: 0 0 0 0.2rem rgba(19, 87, 255, 0.25); } .custom-select:focus::-ms-value { color: #212121; background-color: #fff; } .custom-select[multiple], .custom-select[size]:not([size="1"]) { height: auto; padding-right: 0.75rem; background-image: none; } .custom-select:disabled { color: #b4b4b4; background-color: #f2f4f7; } .custom-select::-ms-expand { display: none; } .custom-select-sm { height: calc(1.4285em + 0.5rem + 2px); padding-top: 0.25rem; padding-bottom: 0.25rem; padding-left: 0.5rem; font-size: 0.75rem; } .custom-select-lg { height: calc(1.4285em + 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.4285em + 0.75rem + 2px); margin-bottom: 0; } .custom-file-input { position: relative; z-index: 2; width: 100%; height: calc(1.4285em + 0.75rem + 2px); margin: 0; opacity: 0; } .custom-file-input:focus ~ .custom-file-label { border-color: #409fff; box-shadow: 0 0 0 0.2rem rgba(19, 87, 255, 0.25); } .custom-file-input:disabled ~ .custom-file-label { background-color: #f2f4f7; } .custom-file-input:lang(en) ~ .custom-file-label::after { content: "Choose file"; } .custom-file-input:lang(id) ~ .custom-file-label::after { content: "Pilih file"; } .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.4285em + 0.75rem + 2px); padding: 0.375rem 0.75rem; font-weight: 400; line-height: 1.4285; color: #212121; background-color: #fff; border: 1px solid #e2e2e2; border-radius: 4px; } .custom-file-label::after { position: absolute; top: 0; right: 0; bottom: 0; z-index: 3; display: block; height: calc(1.4285em + 0.75rem); padding: 0.375rem 0.75rem; line-height: 1.4285; color: #212121; content: "Browse"; background-color: #f2f4f7; border-left: inherit; border-radius: 0 4px 4px 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 #fff, 0 0 0 0.2rem rgba(19, 87, 255, 0.25); } .custom-range:focus::-moz-range-thumb { box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(19, 87, 255, 0.25); } .custom-range:focus::-ms-thumb { box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(19, 87, 255, 0.25); } .custom-range::-moz-focus-outer { border: 0; } .custom-range::-webkit-slider-thumb { width: 1rem; height: 1rem; margin-top: -0.25rem; background-color: #005fbf; 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; appearance: none; } @media (prefers-reduced-motion: reduce) { .custom-range::-webkit-slider-thumb { transition: none; } } .custom-range::-webkit-slider-thumb:active { background-color: #73b8ff; } .custom-range::-webkit-slider-runnable-track { width: 100%; height: 0.5rem; color: transparent; cursor: pointer; background-color: #dee2e6; border-color: transparent; border-radius: 1rem; } .custom-range::-moz-range-thumb { width: 1rem; height: 1rem; background-color: #005fbf; 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; -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: #73b8ff; } .custom-range::-moz-range-track { width: 100%; height: 0.5rem; color: transparent; cursor: pointer; background-color: #dee2e6; 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: #005fbf; 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; appearance: none; } @media (prefers-reduced-motion: reduce) { .custom-range::-ms-thumb { transition: none; } } .custom-range::-ms-thumb:active { background-color: #73b8ff; } .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: #dee2e6; border-radius: 1rem; } .custom-range::-ms-fill-upper { margin-right: 15px; background-color: #dee2e6; border-radius: 1rem; } .custom-range:disabled::-webkit-slider-thumb { background-color: #adb5bd; } .custom-range:disabled::-webkit-slider-runnable-track { cursor: default; } .custom-range:disabled::-moz-range-thumb { background-color: #adb5bd; } .custom-range:disabled::-moz-range-track { cursor: default; } .custom-range:disabled::-ms-thumb { background-color: #adb5bd; } .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; } } .input-group { position: relative; display: flex; flex-wrap: wrap; align-items: stretch; width: 100%; } .input-group > .form-control, .input-group > .form-control-plaintext, .input-group > .custom-select, .input-group > .custom-file { position: relative; flex: 1 1 auto; width: 1%; margin-bottom: 0; } .input-group > .form-control + .form-control, .input-group > .form-control + .custom-select, .input-group > .form-control + .custom-file, .input-group > .form-control-plaintext + .form-control, .input-group > .form-control-plaintext + .custom-select, .input-group > .form-control-plaintext + .custom-file, .input-group > .custom-select + .form-control, .input-group > .custom-select + .custom-select, .input-group > .custom-select + .custom-file, .input-group > .custom-file + .form-control, .input-group > .custom-file + .custom-select, .input-group > .custom-file + .custom-file { margin-left: -1px; } .input-group > .form-control:focus, .input-group > .custom-select:focus, .input-group > .custom-file .custom-file-input:focus ~ .custom-file-label { z-index: 3; } .input-group > .custom-file .custom-file-input:focus { z-index: 4; } .input-group > .form-control:not(:last-child), .input-group > .custom-select:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; } .input-group > .form-control:not(:first-child), .input-group > .custom-select:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; } .input-group > .custom-file { display: flex; align-items: center; } .input-group > .custom-file:not(:last-child) .custom-file-label, .input-group > .custom-file:not(:last-child) .custom-file-label::after { border-top-right-radius: 0; border-bottom-right-radius: 0; } .input-group > .custom-file:not(:first-child) .custom-file-label { border-top-left-radius: 0; border-bottom-left-radius: 0; } .input-group-prepend, .input-group-append { display: flex; } .input-group-prepend .btn, .input-group-append .btn { position: relative; z-index: 2; } .input-group-prepend .btn:focus, .input-group-append .btn:focus { z-index: 3; } .input-group-prepend .btn + .btn, .input-group-prepend .btn + .input-group-text, .input-group-prepend .input-group-text + .input-group-text, .input-group-prepend .input-group-text + .btn, .input-group-append .btn + .btn, .input-group-append .btn + .input-group-text, .input-group-append .input-group-text + .input-group-text, .input-group-append .input-group-text + .btn { margin-left: -1px; } .input-group-prepend { margin-right: -1px; } .input-group-append { margin-left: -1px; } .input-group-text { display: flex; align-items: center; padding: 0.375rem 0.75rem; margin-bottom: 0; font-size: 0.875rem; font-weight: 400; line-height: 1.4285; color: #212121; text-align: center; white-space: nowrap; background-color: #f2f4f7; border: 1px solid #e2e2e2; border-radius: 4px; } .input-group-text input[type="radio"], .input-group-text input[type="checkbox"] { margin-top: 0; } .input-group-lg > .form-control:not(textarea), .input-group-lg > .custom-select { height: calc(1.4285em + 1rem + 2px); } .input-group-lg > .form-control, .input-group-lg > .custom-select, .input-group-lg > .input-group-prepend > .input-group-text, .input-group-lg > .input-group-append > .input-group-text, .input-group-lg > .input-group-prepend > .btn, .input-group-lg > .input-group-append > .btn { padding: 0.5rem 1rem; font-size: 1.25rem; line-height: 1.4285; border-radius: 4px; } .input-group-sm > .form-control:not(textarea), .input-group-sm > .custom-select { height: calc(1.4285em + 0.5rem + 2px); } .input-group-sm > .form-control, .input-group-sm > .custom-select, .input-group-sm > .input-group-prepend > .input-group-text, .input-group-sm > .input-group-append > .input-group-text, .input-group-sm > .input-group-prepend > .btn, .input-group-sm > .input-group-append > .btn { padding: 0.25rem 0.5rem; font-size: 0.75rem; line-height: 1.4285; border-radius: 4px; } .input-group-lg > .custom-select, .input-group-sm > .custom-select { padding-right: 1.75rem; } .input-group > .input-group-prepend > .btn, .input-group > .input-group-prepend > .input-group-text, .input-group > .input-group-append:not(:last-child) > .btn, .input-group > .input-group-append:not(:last-child) > .input-group-text, .input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle), .input-group > .input-group-append:last-child > .input-group-text:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; } .input-group > .input-group-append > .btn, .input-group > .input-group-append > .input-group-text, .input-group > .input-group-prepend:not(:first-child) > .btn, .input-group > .input-group-prepend:not(:first-child) > .input-group-text, .input-group > .input-group-prepend:first-child > .btn:not(:first-child), .input-group > .input-group-prepend:first-child > .input-group-text:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; } .form-control { padding: 8px 12px; margin-top: 4px; margin-bottom: 4px; line-height: 20px; color: #212121; } .form-control:hover:not(:disabled):not([readonly]) { border: 1px solid #005fbf; } .form-control:disabled, .form-control[readonly]:not(.input-datepicker) { color: #b4b4b4; cursor: not-allowed; background-color: #f2f4f7; border-color: #e2e2e2; outline: none; box-shadow: none; } .form-control:focus { color: #212121; } .form-control.prefix-icon { padding-left: 36px; } .form-control.suffix-icon { padding-right: 36px; } .form-control-plaintext:focus { outline: none; box-shadow: none; } .form-group label { margin-bottom: 0; } .form-row label { margin-bottom: 0; } .custom-select, .custom-file-input { height: 36px; padding: 8px 8px 8px 12px; margin: 4px 0; line-height: 20px; color: #212121; } .custom-select:hover:not(:disabled), .custom-file-input:hover:not(:disabled) { cursor: pointer; border: 1px solid #005fbf; } .custom-select:focus, .custom-file-input:focus { box-shadow: 0 0 4px 1px rgba(0, 95, 191, 0.3); } .custom-select:disabled, .custom-file-input:disabled { color: #b4b4b4; cursor: not-allowed; background-color: #f2f4f7; border-color: #e2e2e2; } .custom-select:not(:focus):invalid, .custom-file-input:not(:focus):invalid { color: #b4b4b4; } input[type="file"] { cursor: pointer; } input[type="file"]::-webkit-file-upload-button { cursor: pointer; } .custom-file { display: flex; flex-wrap: wrap; align-items: center; height: auto; margin-bottom: 20px; } .custom-file:hover .custom-file-label::before { border: 1px solid #b4b4b4; } .custom-file .form-text { margin-top: 4px; } .custom-file ~ .custom-file-list-wrapper { margin-bottom: 12px; } .custom-file-input { margin: 0; } .custom-file-label { display: flex; align-items: flex-end; height: 36px; padding: 8px 12px; margin-bottom: 0; color: #b4b4b4; } .custom-file-label::after { display: none; } .custom-file-label::before { position: relative; top: 3px; bottom: 0; z-index: 3; display: flex; align-items: center; height: 24px; padding: 2px 8px; margin-right: 12px; line-height: 20px; color: #777; content: "Choose File"; background-color: #fbfbfb; border: 1px solid #e2e2e2; border-radius: 4px; } .valid-feedback, .invalid-feedback { font-size: 12px; } .form-group-label { margin-bottom: 0; font-weight: 600; line-height: 20px; } .custom-control { margin-bottom: 4px; } .form-group-label + .custom-control, .form-group-label + .custom-file { margin-top: 4px; } .custom-control-input:focus { box-shadow: 0 0 0 2px rgba(0, 95, 191, 0.3); } .custom-control-input:hover ~ .custom-control-label::before { cursor: pointer; border-color: #005fbf; } .custom-control-input:hover ~ .custom-control-label::after, .custom-control-input:hover ~ .custom-control-label { cursor: pointer; } .custom-control-input:disabled ~ .custom-control-label::after { cursor: not-allowed; border: none; } .custom-control-input:disabled ~ .custom-control-label::before { cursor: not-allowed; background-color: #f2f4f7; border: 1px solid #e2e2e2; } .custom-control-input:disabled ~ .custom-control-label { cursor: not-allowed; } .custom-control-label { font-weight: 400; color: #212121; } .custom-control-label::before { top: 2px; } .custom-control-label::after { top: 2px; } .form-check { margin-bottom: 4px; } textarea.form-control { min-width: 184px; height: 80px; min-height: 36px; max-height: 200px; padding-right: 12px; padding-left: 12px; } textarea.form-control::-webkit-scrollbar { width: 12px; background-color: transparent; } textarea.form-control::-webkit-scrollbar-thumb { background-color: #777; background-clip: padding-box; border: 4px solid transparent; border-radius: 16px; } textarea.form-control::-webkit-scrollbar-track { background-color: #fff; border-radius: 4px; } .form-text { font-size: 12px; color: #777; } .input-group { margin-top: 4px; margin-bottom: 4px; } .input-group .form-control { margin-top: 0; margin-bottom: 0; } .input-group .valid-feedback, .input-group .invalid-feedback { margin-top: 4px; } /* stylelint-disable property-no-vendor-prefix */ .custom-select, .custom-select-sm { -webkit-appearance: none; -moz-appearance: none; appearance: none; } /* stylelint-enable property-no-vendor-prefix */ .form-xs { width: 80px; max-width: 80px; } .form-sm { width: 184px; max-width: 184px; } .form-md { width: 288px; max-width: 288px; } .form-lg { width: 392px; max-width: 392px; } .form-xl { width: 600px; max-width: 600px; } .counter-label { float: right; font-weight: 400; } .input-group-text { display: flex; align-items: center; padding: 0.375rem 0.75rem; margin-bottom: 0; font-size: 0.875rem; font-weight: 400; line-height: 1.4285; color: #212121; text-align: center; white-space: nowrap; background-color: #f2f4f7; border: 1px solid #e2e2e2; border-radius: 4px; } .input-datepicker { cursor: pointer; background-color: #fff !important; } .input-datepicker:hover:not(:disabled) { border: 1px solid #005fbf; } .input-datepicker:hover:not(:disabled).with-reset-icon { padding-right: 36px; } .input-datepicker:hover:not(:disabled).with-reset-icon.suffix-icon { padding-right: 72px; } .input-with-icon-container { position: relative; } /*# sourceMappingURL=mekari-ui-form.css.map */