react-dual-listbox/lib/react-dual-listbox.css

A feature-rich dual listbox for React.

@charset "UTF-8";
.react-dual-listbox {
  box-sizing: border-box;
}
.react-dual-listbox * {
  box-sizing: border-box;
}
.react-dual-listbox input:disabled,
.react-dual-listbox select:disabled {
  cursor: not-allowed;
  background: #eee;
}
.react-dual-listbox button,
.react-dual-listbox select {
  font-family: inherit;
  line-height: 1.42857;
}
.react-dual-listbox select {
  min-height: 146px;
}

.rdl-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
}
@media (min-width: 576px) {
  .rdl-controls {
    flex-direction: row;
  }
}

.rdl-hidden-input {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
}

.rdl-list-box {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-self: stretch;
}

.rdl-filter,
.rdl-control {
  display: block;
  width: 100%;
  padding: 8px 12px;
  font-size: 14px;
  color: #333;
  border: 1px solid #ccc;
  border-radius: 2px;
}

.rdl-filter {
  margin-bottom: 10px;
}
.rdl-filter:focus:not(:disabled) {
  border-color: #8c8c8c;
  outline: 0;
}

.rdl-control-container {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
}

.rdl-control-label {
  position: absolute;
  padding: 0 4px 4px;
  clip: rect(0 0 0 0);
}
.rdl-has-header .rdl-control-label {
  position: static;
  clip: auto;
}

.rdl-control {
  flex: 1 0 auto;
}
.rdl-control:focus:not(:disabled) {
  border-color: #8c8c8c;
  outline: 0;
}
.rdl-control optgroup {
  font: inherit;
  font-weight: 700;
}

.rdl-actions {
  display: flex;
  flex: 0 0 auto;
  margin: 10px 0;
}
@media (min-width: 576px) {
  .rdl-actions {
    flex-direction: column;
    align-self: flex-end;
    width: auto;
    margin: 0 10px;
  }
}

.rdl-actions-to-selected,
.rdl-actions-to-available {
  display: flex;
}
@media (min-width: 576px) {
  .rdl-actions-to-selected,
  .rdl-actions-to-available {
    flex-direction: column;
  }
}

@media (min-width: 576px) {
  .rdl-actions-to-selected {
    margin-bottom: 5px;
  }
}
.rdl-btn {
  padding: 5px 10px;
  margin: 0 3px;
  font-size: 14px;
  color: #333;
  cursor: pointer;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 2px;
}
.rdl-btn:active:not(:disabled), .rdl-btn:focus:not(:disabled) {
  background: #e6e6e6;
  border-color: #8c8c8c;
}
.rdl-btn:focus:not(:disabled) {
  outline: thin dotted;
  outline-offset: -2px;
}
.rdl-btn:hover:not(:disabled) {
  background: #e6e6e6;
  border-color: #adadad;
}
.rdl-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.rdl-btn:last-child {
  margin-bottom: 0;
}
.rdl-btn .rdl-icon {
  display: inline-block;
  font-size: 14px;
  font-style: normal;
  font-variant: normal;
  text-align: center;
  text-rendering: auto;
}
@media (min-width: 576px) {
  .rdl-btn {
    margin: 0 0 5px;
  }
}

.rdl-no-options {
  height: 100%;
  padding: 4px 6px;
}

.rdl-align-top .rdl-available {
  margin-bottom: 10px;
}
.rdl-align-top .rdl-control {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.rdl-align-top .rdl-actions-to-available,
.rdl-align-top .rdl-actions-to-selected {
  flex-direction: row;
  margin: 0;
}
.rdl-align-top .rdl-list-box .rdl-move {
  flex: 0 1 50%;
  margin: 0;
}
.rdl-align-top .rdl-list-box .rdl-move:first-child {
  margin-bottom: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.rdl-align-top .rdl-list-box .rdl-move:last-child {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.rdl-align-top[dir=ltr] .rdl-list-box .rdl-move:first-child {
  border-right: 0;
  border-top-right-radius: 0;
}
.rdl-align-top[dir=ltr] .rdl-list-box .rdl-move:last-child {
  border-top-left-radius: 0;
}
.rdl-align-top[dir=rtl] .rdl-list-box .rdl-move:first-child {
  border-left: 0;
  border-top-left-radius: 0;
}
.rdl-align-top[dir=rtl] .rdl-list-box .rdl-move:last-child {
  border-top-right-radius: 0;
}
@media (min-width: 576px) {
  .rdl-align-top[dir=ltr] .rdl-available {
    margin: 0 10px 0 0;
  }
  .rdl-align-top[dir=ltr] .rdl-selected {
    margin-left: 10px;
  }
  .rdl-align-top[dir=rtl] .rdl-available {
    margin: 0 0 0 10px;
  }
  .rdl-align-top[dir=rtl] .rdl-selected {
    margin-right: 10px;
  }
}

.rdl-icons-fa5 .rdl-icon,
.rdl-icons-fa6 .rdl-icon {
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome", sans-serif;
  font-weight: 900;
}
.rdl-icons-fa5 .rdl-icon-move-all-to-selected::before,
.rdl-icons-fa5 .rdl-icon-move-bottom::before,
.rdl-icons-fa6 .rdl-icon-move-all-to-selected::before,
.rdl-icons-fa6 .rdl-icon-move-bottom::before {
  content: "\f103";
}
.rdl-icons-fa5 .rdl-icon-move-to-selected::before,
.rdl-icons-fa5 .rdl-icon-move-down::before,
.rdl-icons-fa6 .rdl-icon-move-to-selected::before,
.rdl-icons-fa6 .rdl-icon-move-down::before {
  content: "\f107";
}
.rdl-icons-fa5 .rdl-icon-move-to-available::before,
.rdl-icons-fa5 .rdl-icon-move-up::before,
.rdl-icons-fa6 .rdl-icon-move-to-available::before,
.rdl-icons-fa6 .rdl-icon-move-up::before {
  content: "\f106";
}
.rdl-icons-fa5 .rdl-icon-move-all-to-available::before,
.rdl-icons-fa5 .rdl-icon-move-top::before,
.rdl-icons-fa6 .rdl-icon-move-all-to-available::before,
.rdl-icons-fa6 .rdl-icon-move-top::before {
  content: "\f102";
}
@media (min-width: 576px) {
  .rdl-icons-fa5 .rdl-icon-move-to-available::before,
  .rdl-icons-fa6 .rdl-icon-move-to-available::before {
    content: "\f104";
  }
  .rdl-icons-fa5 .rdl-icon-move-all-to-available::before,
  .rdl-icons-fa6 .rdl-icon-move-all-to-available::before {
    content: "\f100";
  }
  .rdl-icons-fa5 .rdl-icon-move-to-selected::before,
  .rdl-icons-fa6 .rdl-icon-move-to-selected::before {
    content: "\f105";
  }
  .rdl-icons-fa5 .rdl-icon-move-all-to-selected::before,
  .rdl-icons-fa6 .rdl-icon-move-all-to-selected::before {
    content: "\f101";
  }
  .rdl-icons-fa5[dir=rtl] .rdl-icon-move-to-available::before,
  .rdl-icons-fa6[dir=rtl] .rdl-icon-move-to-available::before {
    content: "\f105";
  }
  .rdl-icons-fa5[dir=rtl] .rdl-icon-move-all-to-available::before,
  .rdl-icons-fa6[dir=rtl] .rdl-icon-move-all-to-available::before {
    content: "\f101";
  }
  .rdl-icons-fa5[dir=rtl] .rdl-icon-move-to-selected::before,
  .rdl-icons-fa6[dir=rtl] .rdl-icon-move-to-selected::before {
    content: "\f104";
  }
  .rdl-icons-fa5[dir=rtl] .rdl-icon-move-all-to-selected::before,
  .rdl-icons-fa6[dir=rtl] .rdl-icon-move-all-to-selected::before {
    content: "\f100";
  }
}

.rdl-icons-native .rdl-icon-move-all-to-selected::before,
.rdl-icons-native .rdl-icon-move-bottom::before {
  content: "⮇";
}
.rdl-icons-native .rdl-icon-move-to-selected::before,
.rdl-icons-native .rdl-icon-move-down::before {
  content: "🠣";
}
.rdl-icons-native .rdl-icon-move-to-available::before,
.rdl-icons-native .rdl-icon-move-up::before {
  content: "🠡";
}
.rdl-icons-native .rdl-icon-move-all-to-available::before,
.rdl-icons-native .rdl-icon-move-top::before {
  content: "⮅";
}
@media (min-width: 576px) {
  .rdl-icons-native .rdl-icon-move-to-available::before {
    content: "⭠";
  }
  .rdl-icons-native .rdl-icon-move-all-to-available::before {
    content: "⮄";
  }
  .rdl-icons-native .rdl-icon-move-to-selected::before {
    content: "⭢";
  }
  .rdl-icons-native .rdl-icon-move-all-to-selected::before {
    content: "⮆";
  }
  .rdl-icons-native[dir=rtl] .rdl-icon-move-to-available::before {
    content: "⭢";
  }
  .rdl-icons-native[dir=rtl] .rdl-icon-move-all-to-available::before {
    content: "⮆";
  }
  .rdl-icons-native[dir=rtl] .rdl-icon-move-to-selected::before {
    content: "⭠";
  }
  .rdl-icons-native[dir=rtl] .rdl-icon-move-all-to-selected::before {
    content: "⮄";
  }
}

/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInJlYWN0LWR1YWwtbGlzdGJveC5jc3MiLCIuLi9zcmMvc2Nzcy9yZWFjdC1kdWFsLWxpc3Rib3guc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxnQkFBZ0I7QUNpQmhCO0VBQ0Usc0JBQUE7QURmRjtBQ2lCRTtFQUNFLHNCQUFBO0FEZko7QUNvQkk7O0VBQ0UsbUJBQUE7RUFDQSxnQkF6QmtCO0FEUXhCO0FDcUJFOztFQUVFLG9CQUFBO0VBQ0Esb0JBckJjO0FERWxCO0FDdUJFO0VBQ0UsaUJBQUE7QURyQko7O0FDeUJBO0VBQ0UsYUFBQTtFQUNBLHNCQUFBO0VBQ0EsbUJBQUE7RUFDQSxZQUFBO0FEdEJGO0FDd0JFO0VBTkY7SUFPSSxtQkFBQTtFRHJCRjtBQUNGOztBQ3dCQTtFQUNFLGtCQUFBO0VBQ0EsUUFBQTtFQUNBLFNBQUE7RUFDQSxVQUFBO0FEckJGOztBQ3dCQTtFQUNFLGFBQUE7RUFDQSxXQUFBO0VBQ0Esc0JBQUE7RUFDQSxtQkFBQTtBRHJCRjs7QUN3QkE7O0VBRUUsY0FBQTtFQUNBLFdBQUE7RUFDQSxpQkFBQTtFQUNBLGVBQUE7RUFDQSxXQXBFZ0I7RUFxRWhCLHNCQUFBO0VBQ0Esa0JBQUE7QURyQkY7O0FDd0JBO0VBQ0UsbUJBQUE7QURyQkY7QUN1QkU7RUFDRSxxQkEvRXNCO0VBZ0Z0QixVQUFBO0FEckJKOztBQ3lCQTtFQUNFLGFBQUE7RUFDQSxjQUFBO0VBQ0Esc0JBQUE7QUR0QkY7O0FDeUJBO0VBQ0Usa0JBQUE7RUFDQSxrQkFBQTtFQUNBLG1CQUFBO0FEdEJGO0FDd0JFO0VBQ0UsZ0JBQUE7RUFDQSxVQUFBO0FEdEJKOztBQzBCQTtFQUNFLGNBQUE7QUR2QkY7QUN5QkU7RUFDRSxxQkF6R3NCO0VBMEd0QixVQUFBO0FEdkJKO0FDMEJFO0VBQ0UsYUFBQTtFQUNBLGdCQUFBO0FEeEJKOztBQzRCQTtFQUNFLGFBQUE7RUFDQSxjQUFBO0VBQ0EsY0FBQTtBRHpCRjtBQzJCRTtFQUxGO0lBTUksc0JBQUE7SUFDQSxv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 */