.select-dropdown .form-check-input label { display: block } select.select-initialized { display: none !important } .select-arrow { color: #000; text-align: center; font-size: .8rem; position: absolute; top: 9px; right: 9px } .select-arrow:before { content: "▼" } .was-validated .form-control:valid ~ .select-arrow { color: #00b74a } .was-validated .form-control:invalid ~ .select-arrow { color: #f93154 } .select-clear-btn { color: #000; font-size: 1rem; position: absolute; top: 7px; right: 27px; cursor: pointer } .select-clear-btn:focus { color: #3b71ca; outline: none } .form-control-sm ~ .select-clear-btn { font-size: .8rem; top: 4px } .form-control-lg ~ .select-clear-btn { top: 11px } .select-dropdown-container { z-index: 1070 } .select-dropdown { background-color: #fff; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12); margin: 0; min-width: 100px; outline: 0; position: relative; transform: scaleY(.8); opacity: 0; transition: all .2s } .select-dropdown.open { transform: scaleY(1); opacity: 1 } .select-dropdown > .input-group { padding: 10px } .select-label { max-width: 80%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .select-label.active { transform: translateY(-1rem) translateY(.1rem) scale(.8) } .form-control-lg ~ .select-label.active { transform: translateY(-1.25rem) translateY(.1rem) scale(.8) } .form-control-sm ~ .select-label.active { transform: translateY(-.83rem) translateY(.1rem) scale(.8) } .form-outline .select-label.active ~ .form-notch .form-notch-middle { border-right: none; border-left: none; border-top: 1px solid transparent !important } .select-input { cursor: pointer } .select-input[disabled] { cursor: default } .select-input.focused { color: #616161; outline: 0 } .select-input.focused ~ .select-label { color: #3b71ca } .select-input.focused::-moz-placeholder { opacity: 1 } .select-input.focused::placeholder { opacity: 1 } .select-input.focused ~ .form-notch .form-notch-leading { border-color: #3b71ca; box-shadow: -1px 0 0 0 #3b71ca, 0 1px 0 0 #3b71ca, 0 -1px 0 0 #3b71ca } .select-input.focused ~ .form-notch .form-notch-middle { border-color: #3b71ca; box-shadow: 0 1px 0 0 #3b71ca; border-top: 1px solid transparent } .select-input.focused ~ .form-notch .form-notch-trailing { border-color: #3b71ca; box-shadow: 1px 0 0 0 #3b71ca, 0 -1px 0 0 #3b71ca, 0 1px 0 0 #3b71ca } .select-input.focused ~ .select-arrow { color: #3b71ca } .form-white .select-arrow, .form-white .select-clear-btn, .form-white .select-input:focus ~ .select-arrow { color: #fff } .form-control-sm ~ .select-arrow { top: 3px } .form-control-lg ~ .select-arrow { top: 13px } .select-options-wrapper { overflow-y: auto } .select-options-wrapper::-webkit-scrollbar { width: 4px; height: 4px } .select-options-wrapper::-webkit-scrollbar-button:end:increment, .select-options-wrapper::-webkit-scrollbar-button:start:decrement { display: block; height: 0; background-color: transparent } .select-options-wrapper::-webkit-scrollbar-track-piece { background-color: transparent; border-radius: 0; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px } .select-options-wrapper::-webkit-scrollbar-thumb:vertical { height: 50px; background-color: #999; border-radius: 4px } .select-options-list { list-style: none; margin: 0; padding: 0 } .select-option-group-label { width: 100%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; display: flex; flex-direction: row; align-items: center; padding-left: 16px; padding-right: 16px; font-size: 1rem; font-weight: 400; background-color: transparent; color: rgba(0, 0, 0, .54); -webkit-user-select: none; -moz-user-select: none; user-select: none } .select-option-group > .select-option { padding-left: 26px } .select-option { width: 100%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; cursor: pointer; display: flex; flex-direction: row; align-items: center; justify-content: space-between; color: rgba(0, 0, 0, .87); padding-left: 16px; padding-right: 16px; font-size: 1rem; font-weight: 400; background-color: transparent; -webkit-user-select: none; -moz-user-select: none; user-select: none } .select-option.active, .select-option.selected.active, .select-option:hover:not(.disabled) { background-color: rgba(0, 0, 0, .048) } .select-option.selected.disabled { cursor: default; color: #9e9e9e; background-color: transparent } .select-option.selected { background-color: rgba(0, 0, 0, .02) } .select-option.disabled { cursor: default; color: #9e9e9e } .select-option-text .form-check-input { margin-right: 10px } .select-option-secondary-text { font-size: .8rem; color: #6c757d; display: block; line-height: normal } .select-option-icon { width: 28px; height: 28px } .select-custom-content { padding: 16px } .select-no-results { padding-left: 16px; padding-right: 16px; display: flex; align-items: center } .form-white .select-input.focused ~ .select-arrow { color: #fff } .form-outline .form-control.active ~ .form-label.select-fake-value, .form-outline .form-control:focus ~ .form-label.select-fake-value, .form-outline .form-control ~ .form-label.select-fake-value { transform: none; display: none } .form-outline .form-control.active ~ .form-label.select-fake-value.active, .form-outline .form-control:focus ~ .form-label.select-fake-value.active, .form-outline .form-control ~ .form-label.select-fake-value.active { display: block }