[Summary view] [Print] [Text view]

   1  @charset "UTF-8";
   2  /* ===============================
   3  =            Choices            =
   4  =============================== */
   5  .choices {
   6    position: relative;
   7    overflow: hidden;
   8    margin-bottom: 24px;
   9    font-size: 16px;
  10  }
  11  .choices:focus {
  12    outline: none;
  13  }
  14  .choices:last-child {
  15    margin-bottom: 0;
  16  }
  17  .choices.is-open {
  18    overflow: initial;
  19  }
  20  .choices.is-disabled .choices__inner,
  21  .choices.is-disabled .choices__input {
  22    background-color: #eaeaea;
  23    cursor: not-allowed;
  24    -webkit-user-select: none;
  25       -moz-user-select: none;
  26        -ms-user-select: none;
  27            user-select: none;
  28  }
  29  .choices.is-disabled .choices__item {
  30    cursor: not-allowed;
  31  }
  32  .choices [hidden] {
  33    display: none !important;
  34  }
  35  
  36  .choices[data-type*=select-one] {
  37    cursor: pointer;
  38  }
  39  .choices[data-type*=select-one] .choices__inner {
  40    padding-bottom: 7.5px;
  41  }
  42  .choices[data-type*=select-one] .choices__input {
  43    display: block;
  44    width: 100%;
  45    padding: 10px;
  46    border-bottom: 1px solid #ddd;
  47    background-color: #fff;
  48    margin: 0;
  49  }
  50  .choices[data-type*=select-one] .choices__button {
  51    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==");
  52    padding: 0;
  53    background-size: 8px;
  54    position: absolute;
  55    top: 50%;
  56    right: 0;
  57    margin-top: -10px;
  58    margin-right: 25px;
  59    height: 20px;
  60    width: 20px;
  61    border-radius: 10em;
  62    opacity: 0.25;
  63  }
  64  .choices[data-type*=select-one] .choices__button:hover, .choices[data-type*=select-one] .choices__button:focus {
  65    opacity: 1;
  66  }
  67  .choices[data-type*=select-one] .choices__button:focus {
  68    box-shadow: 0 0 0 2px #00bcd4;
  69  }
  70  .choices[data-type*=select-one] .choices__item[data-value=""] .choices__button {
  71    display: none;
  72  }
  73  .choices[data-type*=select-one]::after {
  74    content: "";
  75    height: 0;
  76    width: 0;
  77    border-style: solid;
  78    border-color: #333 transparent transparent transparent;
  79    border-width: 5px;
  80    position: absolute;
  81    right: 11.5px;
  82    top: 50%;
  83    margin-top: -2.5px;
  84    pointer-events: none;
  85  }
  86  .choices[data-type*=select-one].is-open::after {
  87    border-color: transparent transparent #333 transparent;
  88    margin-top: -7.5px;
  89  }
  90  .choices[data-type*=select-one][dir=rtl]::after {
  91    left: 11.5px;
  92    right: auto;
  93  }
  94  .choices[data-type*=select-one][dir=rtl] .choices__button {
  95    right: auto;
  96    left: 0;
  97    margin-left: 25px;
  98    margin-right: 0;
  99  }
 100  
 101  .choices[data-type*=select-multiple] .choices__inner,
 102  .choices[data-type*=text] .choices__inner {
 103    cursor: text;
 104  }
 105  .choices[data-type*=select-multiple] .choices__button,
 106  .choices[data-type*=text] .choices__button {
 107    position: relative;
 108    display: inline-block;
 109    margin-top: 0;
 110    margin-right: -4px;
 111    margin-bottom: 0;
 112    margin-left: 8px;
 113    padding-left: 16px;
 114    border-left: 1px solid #008fa1;
 115    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==");
 116    background-size: 8px;
 117    width: 8px;
 118    line-height: 1;
 119    opacity: 0.75;
 120    border-radius: 0;
 121  }
 122  .choices[data-type*=select-multiple] .choices__button:hover, .choices[data-type*=select-multiple] .choices__button:focus,
 123  .choices[data-type*=text] .choices__button:hover,
 124  .choices[data-type*=text] .choices__button:focus {
 125    opacity: 1;
 126  }
 127  
 128  .choices__inner {
 129    display: inline-block;
 130    vertical-align: top;
 131    width: 100%;
 132    background-color: #f9f9f9;
 133    padding: 7.5px 7.5px 3.75px;
 134    border: 1px solid #ddd;
 135    border-radius: 2.5px;
 136    font-size: 14px;
 137    min-height: 44px;
 138    overflow: hidden;
 139  }
 140  .is-focused .choices__inner, .is-open .choices__inner {
 141    border-color: #b7b7b7;
 142  }
 143  .is-open .choices__inner {
 144    border-radius: 2.5px 2.5px 0 0;
 145  }
 146  .is-flipped.is-open .choices__inner {
 147    border-radius: 0 0 2.5px 2.5px;
 148  }
 149  
 150  .choices__list {
 151    margin: 0;
 152    padding-left: 0;
 153    list-style: none;
 154  }
 155  
 156  .choices__list--single {
 157    display: inline-block;
 158    padding: 4px 16px 4px 4px;
 159    width: 100%;
 160  }
 161  [dir=rtl] .choices__list--single {
 162    padding-right: 4px;
 163    padding-left: 16px;
 164  }
 165  .choices__list--single .choices__item {
 166    width: 100%;
 167  }
 168  
 169  .choices__list--multiple {
 170    display: inline;
 171  }
 172  .choices__list--multiple .choices__item {
 173    display: inline-block;
 174    vertical-align: middle;
 175    border-radius: 20px;
 176    padding: 4px 10px;
 177    font-size: 12px;
 178    font-weight: 500;
 179    margin-right: 3.75px;
 180    margin-bottom: 3.75px;
 181    background-color: #00bcd4;
 182    border: 1px solid #00a5bb;
 183    color: #fff;
 184    word-break: break-all;
 185    box-sizing: border-box;
 186  }
 187  .choices__list--multiple .choices__item[data-deletable] {
 188    padding-right: 5px;
 189  }
 190  [dir=rtl] .choices__list--multiple .choices__item {
 191    margin-right: 0;
 192    margin-left: 3.75px;
 193  }
 194  .choices__list--multiple .choices__item.is-highlighted {
 195    background-color: #00a5bb;
 196    border: 1px solid #008fa1;
 197  }
 198  .is-disabled .choices__list--multiple .choices__item {
 199    background-color: #aaaaaa;
 200    border: 1px solid #919191;
 201  }
 202  
 203  .choices__list--dropdown {
 204    visibility: hidden;
 205    z-index: 1;
 206    position: absolute;
 207    width: 100%;
 208    background-color: #fff;
 209    border: 1px solid #ddd;
 210    top: 100%;
 211    margin-top: -1px;
 212    border-bottom-left-radius: 2.5px;
 213    border-bottom-right-radius: 2.5px;
 214    overflow: hidden;
 215    word-break: break-all;
 216    will-change: visibility;
 217  }
 218  .choices__list--dropdown.is-active {
 219    visibility: visible;
 220  }
 221  .is-open .choices__list--dropdown {
 222    border-color: #b7b7b7;
 223  }
 224  .is-flipped .choices__list--dropdown {
 225    top: auto;
 226    bottom: 100%;
 227    margin-top: 0;
 228    margin-bottom: -1px;
 229    border-radius: 0.25rem 0.25rem 0 0;
 230  }
 231  .choices__list--dropdown .choices__list {
 232    position: relative;
 233    max-height: 300px;
 234    overflow: auto;
 235    -webkit-overflow-scrolling: touch;
 236    will-change: scroll-position;
 237  }
 238  .choices__list--dropdown .choices__item {
 239    position: relative;
 240    padding: 10px;
 241    font-size: 14px;
 242  }
 243  [dir=rtl] .choices__list--dropdown .choices__item {
 244    text-align: right;
 245  }
 246  @media (min-width: 640px) {
 247    .choices__list--dropdown .choices__item--selectable {
 248      padding-right: 100px;
 249    }
 250    .choices__list--dropdown .choices__item--selectable::after {
 251      content: attr(data-select-text);
 252      font-size: 12px;
 253      opacity: 0;
 254      position: absolute;
 255      right: 10px;
 256      top: 50%;
 257      -webkit-transform: translateY(-50%);
 258              transform: translateY(-50%);
 259    }
 260    [dir=rtl] .choices__list--dropdown .choices__item--selectable {
 261      text-align: right;
 262      padding-left: 100px;
 263      padding-right: 10px;
 264    }
 265    [dir=rtl] .choices__list--dropdown .choices__item--selectable::after {
 266      right: auto;
 267      left: 10px;
 268    }
 269  }
 270  .choices__list--dropdown .choices__item--selectable.is-highlighted {
 271    background-color: #f2f2f2;
 272  }
 273  .choices__list--dropdown .choices__item--selectable.is-highlighted::after {
 274    opacity: 0.5;
 275  }
 276  
 277  .choices__item {
 278    cursor: default;
 279  }
 280  
 281  .choices__item--selectable {
 282    cursor: pointer;
 283  }
 284  
 285  .choices__item--disabled {
 286    cursor: not-allowed;
 287    -webkit-user-select: none;
 288       -moz-user-select: none;
 289        -ms-user-select: none;
 290            user-select: none;
 291    opacity: 0.5;
 292  }
 293  
 294  .choices__heading {
 295    font-weight: 600;
 296    font-size: 12px;
 297    padding: 10px;
 298    border-bottom: 1px solid #f7f7f7;
 299    color: gray;
 300  }
 301  
 302  .choices__button {
 303    text-indent: -9999px;
 304    -webkit-appearance: none;
 305       -moz-appearance: none;
 306            appearance: none;
 307    border: 0;
 308    background-color: transparent;
 309    background-repeat: no-repeat;
 310    background-position: center;
 311    cursor: pointer;
 312  }
 313  .choices__button:focus {
 314    outline: none;
 315  }
 316  
 317  .choices__input {
 318    display: inline-block;
 319    vertical-align: baseline;
 320    background-color: #f9f9f9;
 321    font-size: 14px;
 322    margin-bottom: 5px;
 323    border: 0;
 324    border-radius: 0;
 325    max-width: 100%;
 326    padding: 4px 0 4px 2px;
 327  }
 328  .choices__input:focus {
 329    outline: 0;
 330  }
 331  [dir=rtl] .choices__input {
 332    padding-right: 2px;
 333    padding-left: 0;
 334  }
 335  
 336  .choices__placeholder {
 337    opacity: 0.5;
 338  }
 339  
 340  /* =====  End of Choices  ====== */
 341  .choices {
 342    border: 0;
 343    border-radius: 0.25rem;
 344  }
 345  .choices:hover {
 346    cursor: pointer;
 347  }
 348  .choices.is-focused {
 349    box-shadow: 0 0 0 0.2rem #eaeaea;
 350  }
 351  
 352  .choices__inner {
 353    min-height: 42px;
 354    padding: 0.1rem 1rem;
 355    margin-bottom: 0;
 356    font-size: 1rem;
 357    border: solid 1px var(--template-bg-dark-20);
 358    border-radius: 0.25rem;
 359  }
 360  .is-focused .choices__inner {
 361    border-color: #39f;
 362  }
 363  
 364  .choices__input {
 365    padding: 0;
 366    margin-bottom: 0;
 367    font-size: 1rem;
 368    background-color: transparent;
 369  }
 370  .choices__input::-moz-placeholder {
 371    color: #495057;
 372    opacity: 1;
 373  }
 374  .choices__input::-webkit-input-placeholder {
 375    color: #495057;
 376    opacity: 1;
 377  }
 378  
 379  .choices__list--dropdown {
 380    z-index: 1060;
 381  }
 382  
 383  .choices__list--single {
 384    padding: 7px 16px 0 4px;
 385  }
 386  
 387  .choices__list--multiple .choices__item {
 388    position: relative;
 389    margin: 2px;
 390    background-color: var(--template-bg-dark);
 391    -webkit-margin-end: 2px;
 392            margin-inline-end: 2px;
 393    border: 0;
 394    border-radius: 0.25rem;
 395  }
 396  .choices__list--multiple .choices__item.is-highlighted {
 397    background-color: var(--template-bg-dark);
 398    opacity: 0.9;
 399  }
 400  
 401  .choices .choices__list--dropdown .choices__item {
 402    -webkit-padding-end: 10px;
 403            padding-inline-end: 10px;
 404  }
 405  .choices .choices__list--dropdown .choices__item--selectable::after {
 406    display: none;
 407  }
 408  
 409  .choices__button_joomla {
 410    position: relative;
 411    padding: 0 10px;
 412    color: inherit;
 413    text-indent: -9999px;
 414    cursor: pointer;
 415    background: none;
 416    border: 0;
 417    opacity: 0.5;
 418    -webkit-appearance: none;
 419       -moz-appearance: none;
 420            appearance: none;
 421  }
 422  .choices__button_joomla::before {
 423    position: absolute;
 424    top: 0;
 425    right: 0;
 426    bottom: 0;
 427    left: 0;
 428    display: block;
 429    text-align: center;
 430    text-indent: 0;
 431    content: "×";
 432  }
 433  .choices__button_joomla:hover, .choices__button_joomla:focus {
 434    opacity: 1;
 435  }
 436  .choices__button_joomla:focus {
 437    outline: none;
 438  }
 439  
 440  .choices[data-type*=select-one] .choices__inner,
 441  .choices[data-type*=select-multiple] .choices__inner {
 442    -webkit-padding-end: 3rem;
 443            padding-inline-end: 3rem;
 444    cursor: pointer;
 445    background: url("../../../images/select-bg.svg") no-repeat 100%/116rem;
 446    background-color: var(--template-bg-light);
 447  }
 448  [dir=rtl] .choices[data-type*=select-one] .choices__inner,
 449  [dir=rtl] .choices[data-type*=select-multiple] .choices__inner {
 450    background: url("../../../images/select-bg-rtl.svg") no-repeat 0/116rem;
 451    background-color: var(--template-bg-light);
 452  }
 453  
 454  .choices[data-type*=select-one] .choices__item {
 455    display: flex;
 456    justify-content: space-between;
 457  }
 458  .choices[data-type*=select-one] .choices__button_joomla {
 459    position: absolute;
 460    top: 50%;
 461    inset-inline-end: 0;
 462    width: 20px;
 463    height: 20px;
 464    padding: 0;
 465    -webkit-margin-before: -10px;
 466            margin-block-start: -10px;
 467    -webkit-margin-end: 50px;
 468            margin-inline-end: 50px;
 469    border-radius: 10em;
 470    opacity: 0.5;
 471  }
 472  .choices[data-type*=select-one] .choices__button_joomla:hover, .choices[data-type*=select-one] .choices__button_joomla:focus {
 473    opacity: 1;
 474  }
 475  .choices[data-type*=select-one] .choices__button_joomla:focus {
 476    box-shadow: 0 0 0 2px #00bcd4;
 477  }
 478  .choices[data-type*=select-one]::after {
 479    display: none;
 480  }
 481  
 482  .choices[data-type*=select-multiple] .choices__input,
 483  .choices[data-type*=text] .choices__input {
 484    padding: 0.35rem 0;
 485  }
 486  
 487  .choices__heading {
 488    font-size: 1.2rem;
 489  }