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) {
  outline: 0;
  border-color: #999999;
}

.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) {
  outline: 0;
  border-color: #999999;
}
.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: rgb(229.5, 229.5, 229.5);
  border-color: #999999;
}
.rdl-btn:focus:not(:disabled) {
  outline: thin dotted;
  outline-offset: -2px;
}
.rdl-btn:hover:not(:disabled) {
  background: rgb(229.5, 229.5, 229.5);
  border-color: rgb(179.52, 179.52, 179.52);
}
.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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInJlYWN0LWR1YWwtbGlzdGJveC5jc3MiLCIuLi9zcmMvc2Nzcy9yZWFjdC1kdWFsLWxpc3Rib3guc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxnQkFBZ0I7QUMrQmhCO0VBQ0Usc0JBQUE7QUQ3QkY7QUMrQkU7RUFDRSxzQkFBQTtBRDdCSjtBQ2tDSTs7RUFDRSxtQkFBQTtFQUNBLGdCQXJDa0I7QURNeEI7QUNtQ0U7O0VBRUUsb0JBQUE7RUFDQSxvQkFyQmM7QURabEI7QUNxQ0U7RUFDRSxpQkFBQTtBRG5DSjs7QUN1Q0E7RUFDRSxhQUFBO0VBQ0Esc0JBQUE7RUFDQSxtQkFBQTtFQUNBLFlBQUE7QURwQ0Y7QUNzQ0U7RUFORjtJQU9JLG1CQUFBO0VEbkNGO0FBQ0Y7O0FDc0NBO0VBQ0Usa0JBQUE7RUFDQSxRQUFBO0VBQ0EsU0FBQTtFQUNBLFVBQUE7QURuQ0Y7O0FDc0NBO0VBQ0UsYUFBQTtFQUNBLFdBQUE7RUFDQSxzQkFBQTtFQUNBLG1CQUFBO0FEbkNGOztBQ3NDQTs7RUFFRSxjQUFBO0VBQ0EsV0FBQTtFQUNBLGlCQUFBO0VBQ0EsZUFBQTtFQUNBLFdBeEVnQjtFQXlFaEIsc0JBQUE7RUFDQSxrQkFBQTtBRG5DRjs7QUNzQ0E7RUFDRSxtQkFBQTtBRG5DRjtBQ3FDRTtFQUNFLFVBQUE7RUFDQSxxQkE1RnNCO0FEeUQxQjs7QUN1Q0E7RUFDRSxhQUFBO0VBQ0EsY0FBQTtFQUNBLHNCQUFBO0FEcENGOztBQ3VDQTtFQUNFLGtCQUFBO0VBQ0Esa0JBQUE7RUFDQSxtQkFBQTtBRHBDRjtBQ3NDRTtFQUNFLGdCQUFBO0VBQ0EsVUFBQTtBRHBDSjs7QUN3Q0E7RUFDRSxjQUFBO0FEckNGO0FDdUNFO0VBQ0UsVUFBQTtFQUNBLHFCQXRIc0I7QURpRjFCO0FDd0NFO0VBQ0UsYUFBQTtFQUNBLGdCQUFBO0FEdENKOztBQzBDQTtFQUNFLGFBQUE7RUFDQSxjQUFBO0VBQ0EsY0FBQTtBRHZDRjtBQ3lDRTtFQUxGO0lBTUksc0JBQUE7SUFDQSxv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 */