tabler-vendors.rtl.css 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859
  1. /*!
  2. * Tabler v1.0.0-beta4 (https://tabler.io)
  3. * @version 1.0.0-beta4
  4. * @link https://tabler.io
  5. * Copyright 2018-2021 The Tabler Authors
  6. * Copyright 2018-2021 codecalm.net Paweł Kuna
  7. * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
  8. */
  9. /* Functional styling;
  10. * These styles are required for noUiSlider to function.
  11. * You don't need to change these rules to apply your design.
  12. */
  13. .noUi-target,
  14. .noUi-target * {
  15. -webkit-touch-callout: none;
  16. -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  17. -webkit-user-select: none;
  18. touch-action: none;
  19. -ms-user-select: none;
  20. -moz-user-select: none;
  21. user-select: none;
  22. box-sizing: border-box; }
  23. .noUi-target {
  24. position: relative; }
  25. .noUi-base,
  26. .noUi-connects {
  27. width: 100%;
  28. height: 100%;
  29. position: relative;
  30. z-index: 1; }
  31. /* Wrapper for all connect elements.
  32. */
  33. .noUi-connects {
  34. overflow: hidden;
  35. z-index: 0; }
  36. .noUi-connect,
  37. .noUi-origin {
  38. will-change: transform;
  39. position: absolute;
  40. z-index: 1;
  41. top: 0;
  42. left: 0;
  43. height: 100%;
  44. width: 100%;
  45. -ms-transform-origin: 100% 0;
  46. -webkit-transform-origin: 100% 0;
  47. -webkit-transform-style: preserve-3d;
  48. transform-origin: 100% 0;
  49. transform-style: flat; }
  50. /* Offset direction
  51. */
  52. .noUi-txt-dir-rtl.noUi-horizontal .noUi-origin {
  53. right: 0;
  54. left: auto; }
  55. /* Give origins 0 height/width so they don't interfere with clicking the
  56. * connect elements.
  57. */
  58. .noUi-vertical .noUi-origin {
  59. top: -100%;
  60. width: 0; }
  61. .noUi-horizontal .noUi-origin {
  62. height: 0; }
  63. .noUi-handle {
  64. -webkit-backface-visibility: hidden;
  65. backface-visibility: hidden;
  66. position: absolute; }
  67. .noUi-touch-area {
  68. height: 100%;
  69. width: 100%; }
  70. .noUi-state-tap .noUi-connect,
  71. .noUi-state-tap .noUi-origin {
  72. transition: transform 0.3s; }
  73. .noUi-state-drag * {
  74. cursor: inherit !important; }
  75. /* Slider size and handle placement;
  76. */
  77. .noUi-horizontal {
  78. height: 18px; }
  79. .noUi-horizontal .noUi-handle {
  80. width: 34px;
  81. height: 28px;
  82. left: -17px;
  83. top: -6px; }
  84. .noUi-vertical {
  85. width: 18px; }
  86. .noUi-vertical .noUi-handle {
  87. width: 28px;
  88. height: 34px;
  89. left: -6px;
  90. bottom: -17px; }
  91. .noUi-txt-dir-rtl.noUi-horizontal .noUi-handle {
  92. right: -17px;
  93. left: auto; }
  94. /* Styling;
  95. * Giving the connect element a border radius causes issues with using transform: scale
  96. */
  97. .noUi-target {
  98. background: #FAFAFA;
  99. border-radius: 4px;
  100. border: 1px solid #D3D3D3;
  101. box-shadow: inset 0 1px 1px #F0F0F0, 0 3px 6px -5px #BBB; }
  102. .noUi-connects {
  103. border-radius: 3px; }
  104. .noUi-connect {
  105. background: #3FB8AF; }
  106. /* Handles and cursors;
  107. */
  108. .noUi-draggable {
  109. cursor: ew-resize; }
  110. .noUi-vertical .noUi-draggable {
  111. cursor: ns-resize; }
  112. .noUi-handle {
  113. border: 1px solid #D9D9D9;
  114. border-radius: 3px;
  115. background: #FFF;
  116. cursor: default;
  117. box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #EBEBEB, 0 3px 6px -3px #BBB; }
  118. .noUi-active {
  119. box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #DDD, 0 3px 6px -3px #BBB; }
  120. /* Handle stripes;
  121. */
  122. .noUi-handle:before,
  123. .noUi-handle:after {
  124. content: "";
  125. display: block;
  126. position: absolute;
  127. height: 14px;
  128. width: 1px;
  129. background: #E8E7E6;
  130. right: 14px;
  131. top: 6px; }
  132. .noUi-handle:after {
  133. right: 17px; }
  134. .noUi-vertical .noUi-handle:before,
  135. .noUi-vertical .noUi-handle:after {
  136. width: 14px;
  137. height: 1px;
  138. right: 6px;
  139. top: 14px; }
  140. .noUi-vertical .noUi-handle:after {
  141. top: 17px; }
  142. /* Disabled state;
  143. */
  144. [disabled] .noUi-connect {
  145. background: #B8B8B8; }
  146. [disabled].noUi-target,
  147. [disabled].noUi-handle,
  148. [disabled] .noUi-handle {
  149. cursor: not-allowed; }
  150. /* Base;
  151. *
  152. */
  153. .noUi-pips,
  154. .noUi-pips * {
  155. box-sizing: border-box; }
  156. .noUi-pips {
  157. position: absolute;
  158. color: #999; }
  159. /* Values;
  160. *
  161. */
  162. .noUi-value {
  163. position: absolute;
  164. white-space: nowrap;
  165. text-align: center; }
  166. .noUi-value-sub {
  167. color: #ccc;
  168. font-size: 10px; }
  169. /* Markings;
  170. *
  171. */
  172. .noUi-marker {
  173. position: absolute;
  174. background: #CCC; }
  175. .noUi-marker-sub {
  176. background: #AAA; }
  177. .noUi-marker-large {
  178. background: #AAA; }
  179. /* Horizontal layout;
  180. *
  181. */
  182. .noUi-pips-horizontal {
  183. padding: 10px 0;
  184. height: 80px;
  185. top: 100%;
  186. right: 0;
  187. width: 100%; }
  188. .noUi-value-horizontal {
  189. transform: translate(50%, 50%); }
  190. .noUi-rtl .noUi-value-horizontal {
  191. transform: translate(-50%, 50%); }
  192. .noUi-marker-horizontal.noUi-marker {
  193. margin-right: -1px;
  194. width: 2px;
  195. height: 5px; }
  196. .noUi-marker-horizontal.noUi-marker-sub {
  197. height: 10px; }
  198. .noUi-marker-horizontal.noUi-marker-large {
  199. height: 15px; }
  200. /* Vertical layout;
  201. *
  202. */
  203. .noUi-pips-vertical {
  204. padding: 0 10px;
  205. height: 100%;
  206. top: 0;
  207. right: 100%; }
  208. .noUi-value-vertical {
  209. transform: translate(0, -50%);
  210. padding-right: 25px; }
  211. .noUi-rtl .noUi-value-vertical {
  212. transform: translate(0, 50%); }
  213. .noUi-marker-vertical.noUi-marker {
  214. width: 5px;
  215. height: 2px;
  216. margin-top: -1px; }
  217. .noUi-marker-vertical.noUi-marker-sub {
  218. width: 10px; }
  219. .noUi-marker-vertical.noUi-marker-large {
  220. width: 15px; }
  221. .noUi-tooltip {
  222. display: block;
  223. position: absolute;
  224. border: 1px solid #D9D9D9;
  225. border-radius: 3px;
  226. background: #fff;
  227. color: #000;
  228. padding: 5px;
  229. text-align: center;
  230. white-space: nowrap; }
  231. .noUi-horizontal .noUi-tooltip {
  232. transform: translate(50%, 0);
  233. right: 50%;
  234. bottom: 120%; }
  235. .noUi-vertical .noUi-tooltip {
  236. transform: translate(0, -50%);
  237. top: 50%;
  238. left: 120%; }
  239. .noUi-horizontal .noUi-origin > .noUi-tooltip {
  240. transform: translate(-50%, 0);
  241. right: auto;
  242. bottom: 10px; }
  243. .noUi-vertical .noUi-origin > .noUi-tooltip {
  244. transform: translate(0, -18px);
  245. top: auto;
  246. left: 28px; }
  247. .noUi-target {
  248. border: 0;
  249. box-shadow: none;
  250. background: none;
  251. border-radius: 0;
  252. color: #206bc4; }
  253. .noUi-horizontal {
  254. height: 1.25rem;
  255. padding: .5rem 0; }
  256. .noUi-base {
  257. background: #e2e8f0;
  258. border-radius: 1rem; }
  259. .noUi-handle {
  260. width: 1rem;
  261. height: 1rem;
  262. border: 2px solid #ffffff;
  263. box-shadow: 0 0.1rem 0.25rem rgba(0, 0, 0, 0.1);
  264. border-radius: 1rem;
  265. background: currentColor;
  266. outline: 0; }
  267. .noUi-handle:before, .noUi-handle:after {
  268. content: none; }
  269. .noUi-horizontal .noUi-handle {
  270. width: 1rem;
  271. height: 1rem;
  272. top: -0.5rem;
  273. left: -0.5rem;
  274. margin: 1px 0 0 1px; }
  275. .noUi-handle.noUi-active, .noUi-handle:focus {
  276. box-shadow: 0 0 0 1px #f8fafc, 0 0 0 0.25rem rgba(32, 107, 196, 0.25); }
  277. .noUi-connect {
  278. background: currentColor; }
  279. .litepicker {
  280. --litepicker-month-weekday-color: #626976;
  281. --litepicker-button-prev-month-color: #626976;
  282. --litepicker-button-next-month-color: #626976;
  283. --litepicker-button-prev-month-color-hover: #206bc4;
  284. --litepicker-button-next-month-color-hover: #206bc4;
  285. --litepicker-day-color-hover: #206bc4;
  286. --litepicker-is-end-color-bg: #206bc4;
  287. --litepicker-is-today-color: #206bc4;
  288. font: inherit;
  289. -webkit-user-select: none;
  290. -moz-user-select: none;
  291. -ms-user-select: none;
  292. user-select: none; }
  293. .litepicker svg {
  294. fill: none !important; }
  295. .litepicker .container__months {
  296. border: 1px solid rgba(98, 105, 118, 0.16);
  297. border-radius: 4px;
  298. box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); }
  299. .litepicker .container__months .month-item-name,
  300. .litepicker .container__months .month-item-year {
  301. font-weight: 500 !important; }
  302. .litepicker .container__months .button-next-month,
  303. .litepicker .container__months .button-prev-month {
  304. cursor: pointer !important; }
  305. .litepicker .container__months .month-item-weekdays-row > div {
  306. padding: .5rem 0 !important;
  307. font-size: 0.75rem; }
  308. .litepicker .container__days .day-item {
  309. cursor: pointer !important;
  310. padding: .5rem 0 !important;
  311. transition: color 0.3s, background-color 0.3s, border-color 0.3s; }
  312. @media (prefers-reduced-motion: reduce) {
  313. .litepicker .container__days .day-item {
  314. transition: none; } }
  315. .datepicker-inline .litepicker .container__months {
  316. box-shadow: none; }
  317. /**
  318. * Tom Select bootstrap 5
  319. */
  320. /**
  321. * tom-select.css (v//@@version)
  322. * Copyright (c) contributors
  323. *
  324. * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
  325. * file except in compliance with the License. You may obtain a copy of the License at:
  326. * http://www.apache.org/licenses/LICENSE-2.0
  327. *
  328. * Unless required by applicable law or agreed to in writing, software distributed under
  329. * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF
  330. * ANY KIND, either express or implied. See the License for the specific language
  331. * governing permissions and limitations under the License.
  332. *
  333. */
  334. .ts-control.plugin-drag_drop.multi > .ts-input > div.ui-sortable-placeholder {
  335. visibility: visible !important;
  336. background: #f2f2f2 !important;
  337. background: rgba(0, 0, 0, 0.06) !important;
  338. border: 0 none !important;
  339. box-shadow: inset 0 0 12px 4px #fff; }
  340. .ts-control.plugin-drag_drop .ui-sortable-placeholder::after {
  341. content: '!';
  342. visibility: hidden; }
  343. .ts-control.plugin-drag_drop .ui-sortable-helper {
  344. box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
  345. .plugin-checkbox_options .option input {
  346. margin-left: 0.5rem; }
  347. .plugin-clear_button .items {
  348. padding-left: calc( 1em + (3 * 5px)) !important; }
  349. .plugin-clear_button .clear-button {
  350. opacity: 0;
  351. position: absolute;
  352. top: 0.4375rem;
  353. left: calc(0.75rem - 5px);
  354. margin-left: 0 !important;
  355. background: transparent !important;
  356. transition: opacity 0.5s;
  357. cursor: pointer; }
  358. .plugin-clear_button.single .clear-button {
  359. left: calc(0.75rem - 5px + 2rem); }
  360. .plugin-clear_button .has-items.focus .clear-button,
  361. .plugin-clear_button:hover .has-items .clear-button {
  362. opacity: 1; }
  363. .ts-control .dropdown-header {
  364. position: relative;
  365. padding: 6px 0.75rem;
  366. border-bottom: 1px solid #d0d0d0;
  367. background: #f8f8f8;
  368. border-radius: 4px 4px 0 0; }
  369. .ts-control .dropdown-header-close {
  370. position: absolute;
  371. left: 0.75rem;
  372. top: 50%;
  373. color: #1e293b;
  374. opacity: 0.4;
  375. margin-top: -12px;
  376. line-height: 20px;
  377. font-size: 20px !important; }
  378. .ts-control .dropdown-header-close:hover {
  379. color: black; }
  380. .plugin-dropdown_input .ts-input.focus {
  381. box-shadow: none;
  382. border: 1px solid #d9dbde; }
  383. .plugin-dropdown_input .dropdown-input {
  384. border: 1px solid #d0d0d0;
  385. border-width: 0 0 1px 0;
  386. display: block;
  387. padding: 0.4375rem 0.75rem;
  388. box-shadow: none;
  389. width: 100%;
  390. background: transparent; }
  391. .plugin-dropdown_input .focus ~ .ts-dropdown .dropdown-input {
  392. border-color: #90b5e2;
  393. outline: 0;
  394. box-shadow: 0 0 0 0.25rem rgba(32, 107, 196, 0.25); }
  395. .ts-control.plugin-input_autogrow .ts-input.has-items > input {
  396. min-width: 0; }
  397. .ts-control.plugin-input_autogrow .ts-input.focus.has-items > input {
  398. flex: none;
  399. min-width: 4px; }
  400. .ts-control.plugin-input_autogrow .ts-input.focus.has-items > input::-webkit-input-placeholder {
  401. color: transparent; }
  402. .ts-control.plugin-input_autogrow .ts-input.focus.has-items > input::-moz-placeholder {
  403. color: transparent; }
  404. .ts-control.plugin-input_autogrow .ts-input.focus.has-items > input:-ms-input-placeholder {
  405. color: transparent; }
  406. .ts-control.plugin-input_autogrow .ts-input.focus.has-items > input::-ms-input-placeholder {
  407. color: transparent; }
  408. .ts-control.plugin-input_autogrow .ts-input.focus.has-items > input::placeholder {
  409. color: transparent; }
  410. .ts-dropdown.plugin-optgroup_columns .ts-dropdown-content {
  411. display: flex; }
  412. .ts-dropdown.plugin-optgroup_columns .optgroup {
  413. border-left: 1px solid #f2f2f2;
  414. border-top: 0 none;
  415. flex-grow: 1;
  416. flex-basis: 0;
  417. min-width: 0; }
  418. .ts-dropdown.plugin-optgroup_columns .optgroup:last-child {
  419. border-left: 0 none; }
  420. .ts-dropdown.plugin-optgroup_columns .optgroup:before {
  421. display: none; }
  422. .ts-dropdown.plugin-optgroup_columns .optgroup-header {
  423. border-top: 0 none; }
  424. .ts-control.plugin-remove_button .item {
  425. display: inline-flex;
  426. align-items: center;
  427. padding-left: 0 !important; }
  428. .ts-control.plugin-remove_button .item .remove {
  429. color: inherit;
  430. text-decoration: none;
  431. vertical-align: middle;
  432. display: inline-block;
  433. padding: 1px 5px;
  434. border-right: 1px solid #e6e7e9;
  435. border-radius: 2px 0 0 2px;
  436. box-sizing: border-box;
  437. margin-right: 5px; }
  438. .ts-control.plugin-remove_button .item .remove:hover {
  439. background: rgba(0, 0, 0, 0.05); }
  440. .ts-control.plugin-remove_button .item.active .remove {
  441. border-right-color: rgba(0, 0, 0, 0); }
  442. .ts-control.plugin-remove_button .disabled .item .remove:hover {
  443. background: none; }
  444. .ts-control.plugin-remove_button .disabled .item .remove {
  445. border-right-color: white; }
  446. .ts-control.plugin-remove_button .remove-single {
  447. position: absolute;
  448. left: 0;
  449. top: 0;
  450. font-size: 23px; }
  451. .ts-control {
  452. position: relative; }
  453. .ts-dropdown,
  454. .ts-input,
  455. .ts-input input {
  456. color: #1e293b;
  457. font-family: inherit;
  458. font-size: inherit;
  459. line-height: 1.3333333;
  460. font-smoothing: inherit; }
  461. .ts-input,
  462. .ts-control.single .ts-input.input-active {
  463. background: #ffffff;
  464. cursor: text; }
  465. .ts-input {
  466. border: 1px solid #d9dbde;
  467. padding: 0.4375rem 0.75rem;
  468. width: 100%;
  469. overflow: hidden;
  470. position: relative;
  471. z-index: 1;
  472. box-sizing: border-box;
  473. box-shadow: none;
  474. border-radius: 4px;
  475. display: flex;
  476. flex-wrap: wrap; }
  477. .ts-control.multi .ts-input.has-items {
  478. padding: calc( 0.4375rem - 1px - 0px) 0.75rem calc( 0.4375rem - 1px - 3px - 0px); }
  479. .ts-input.full {
  480. background-color: #ffffff; }
  481. .ts-input.disabled,
  482. .ts-input.disabled * {
  483. cursor: default !important; }
  484. .ts-input.focus {
  485. box-shadow: none; }
  486. .ts-input > * {
  487. vertical-align: baseline;
  488. display: inline-block; }
  489. .ts-control.multi .ts-input > div {
  490. cursor: pointer;
  491. margin: 0 0 3px 3px;
  492. padding: 1px 5px;
  493. background: #efefef;
  494. color: #1e293b;
  495. border: 0px solid #e6e7e9; }
  496. .ts-control.multi .ts-input > div.active {
  497. background: #206bc4;
  498. color: #fff;
  499. border: 0px solid rgba(0, 0, 0, 0); }
  500. .ts-control.multi .ts-input.disabled > div, .ts-control.multi .ts-input.disabled > div.active {
  501. color: #797979;
  502. background: white;
  503. border: 0px solid white; }
  504. .ts-input > input {
  505. flex: 1 1 auto;
  506. min-width: 7rem;
  507. display: inline-block !important;
  508. padding: 0 !important;
  509. min-height: 0 !important;
  510. max-height: none !important;
  511. max-width: 100% !important;
  512. margin: 0 !important;
  513. text-indent: 0 !important;
  514. border: 0 none !important;
  515. background: none !important;
  516. line-height: inherit !important;
  517. -webkit-user-select: auto !important;
  518. -moz-user-select: auto !important;
  519. -ms-user-select: auto !important;
  520. user-select: auto !important;
  521. box-shadow: none !important; }
  522. .ts-input > input::-ms-clear {
  523. display: none; }
  524. .ts-input > input:focus {
  525. outline: none !important; }
  526. .ts-input.has-items > input {
  527. margin: 0 4px !important; }
  528. .ts-input.dropdown-active::before {
  529. content: ' ';
  530. display: block;
  531. position: absolute;
  532. background: white;
  533. height: 1px;
  534. bottom: 0;
  535. right: 0;
  536. left: 0; }
  537. .ts-input.rtl {
  538. text-align: left; }
  539. .ts-input.rtl.single .ts-input:after {
  540. right: calc(0.75rem + 5px);
  541. left: auto; }
  542. .ts-input.rtl .ts-input > input {
  543. margin: 0 -2px 0 4px !important; }
  544. .ts-input.disabled {
  545. opacity: 0.5;
  546. background-color: #f1f5f9; }
  547. .input-hidden .ts-input > input {
  548. opacity: 0;
  549. position: absolute;
  550. right: -10000px; }
  551. .ts-dropdown {
  552. position: absolute;
  553. top: 100%;
  554. right: 0;
  555. width: 100%;
  556. z-index: 10;
  557. border: 1px solid #d0d0d0;
  558. background: #ffffff;
  559. margin: 0.25rem 0 0 0;
  560. border-top: 0 none;
  561. box-sizing: border-box;
  562. box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  563. border-radius: 0 0 4px 4px; }
  564. .ts-dropdown [data-selectable] {
  565. cursor: pointer;
  566. overflow: hidden; }
  567. .ts-dropdown [data-selectable] .highlight {
  568. background: rgba(255, 237, 40, 0.4);
  569. border-radius: 1px; }
  570. .ts-dropdown .option,
  571. .ts-dropdown .optgroup-header,
  572. .ts-dropdown .no-results,
  573. .ts-dropdown .create {
  574. padding: 3px 0.75rem; }
  575. .ts-dropdown .option, .ts-dropdown [data-disabled], .ts-dropdown [data-disabled] [data-selectable].option {
  576. cursor: inherit;
  577. opacity: 0.5; }
  578. .ts-dropdown [data-selectable].option {
  579. opacity: 1;
  580. cursor: pointer; }
  581. .ts-dropdown .optgroup:first-child .optgroup-header {
  582. border-top: 0 none; }
  583. .ts-dropdown .optgroup-header {
  584. color: #475569;
  585. background: #ffffff;
  586. cursor: default; }
  587. .ts-dropdown .create:hover,
  588. .ts-dropdown .option:hover,
  589. .ts-dropdown .active {
  590. background-color: rgba(98, 105, 118, 0.06);
  591. color: inherit; }
  592. .ts-dropdown .create:hover.create,
  593. .ts-dropdown .option:hover.create,
  594. .ts-dropdown .active.create {
  595. color: inherit; }
  596. .ts-dropdown .create {
  597. color: rgba(30, 41, 59, 0.5); }
  598. .ts-dropdown .spinner {
  599. display: inline-block;
  600. width: 30px;
  601. height: 30px;
  602. margin: 3px 0.75rem; }
  603. .ts-dropdown .spinner:after {
  604. content: " ";
  605. display: block;
  606. width: 24px;
  607. height: 24px;
  608. margin: 3px;
  609. border-radius: 50%;
  610. border: 5px solid #d0d0d0;
  611. border-color: #d0d0d0 transparent #d0d0d0 transparent;
  612. -webkit-animation: lds-dual-ring 1.2s linear infinite;
  613. animation: lds-dual-ring 1.2s linear infinite; }
  614. @-webkit-keyframes lds-dual-ring {
  615. 0% {
  616. transform: rotate(0deg); }
  617. 100% {
  618. transform: rotate(-360deg); } }
  619. @keyframes lds-dual-ring {
  620. 0% {
  621. transform: rotate(0deg); }
  622. 100% {
  623. transform: rotate(-360deg); } }
  624. .ts-dropdown-content {
  625. overflow-y: auto;
  626. overflow-x: hidden;
  627. max-height: 200px;
  628. overflow-scrolling: touch;
  629. scroll-behavior: smooth; }
  630. .ts-wrapper.form-control,
  631. .ts-wrapper.form-select {
  632. padding: 0 !important; }
  633. .ts-dropdown,
  634. .ts-dropdown.form-control,
  635. .ts-dropdown.form-select {
  636. height: auto;
  637. padding: 0;
  638. z-index: 1000;
  639. background: #ffffff;
  640. border: 1px solid rgba(98, 105, 118, 0.16);
  641. border-radius: 4px;
  642. box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); }
  643. .ts-dropdown .optgroup-header {
  644. font-size: 0.8203125rem;
  645. line-height: 1.3333333; }
  646. .ts-dropdown .optgroup:first-child:before {
  647. display: none; }
  648. .ts-dropdown .optgroup:before {
  649. content: ' ';
  650. display: block;
  651. height: 0;
  652. margin: 0.5rem 0;
  653. overflow: hidden;
  654. border-top: 1px solid rgba(98, 105, 118, 0.16);
  655. margin-right: -0.75rem;
  656. margin-left: -0.75rem; }
  657. .ts-dropdown .create {
  658. padding-right: 0.75rem; }
  659. .ts-dropdown-content {
  660. padding: 5px 0; }
  661. .ts-input {
  662. min-height: calc(1.3333333em + 0.875rem + 2px);
  663. transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  664. display: flex;
  665. align-items: center; }
  666. @media (prefers-reduced-motion: reduce) {
  667. .ts-input {
  668. transition: none; } }
  669. .ts-input.dropdown -active {
  670. border-radius: 4px; }
  671. .ts-input.dropdown-active::before {
  672. display: none; }
  673. .ts-input.focus {
  674. border-color: #90b5e2;
  675. outline: 0;
  676. box-shadow: 0 0 0 0.25rem rgba(32, 107, 196, 0.25); }
  677. .ts-input .item {
  678. display: flex;
  679. align-items: center; }
  680. .is-invalid .ts-input,
  681. .was-validated .ts-input.invalid {
  682. border-color: #d63939; }
  683. .is-invalid .ts-input.focus,
  684. .was-validated .ts-input.invalid.focus {
  685. border-color: #b62626;
  686. box-shadow: 0 0 0 0.25rem rgba(214, 57, 57, 0.25); }
  687. .is-valid .ts-input {
  688. border-color: #2fb344; }
  689. .is-valid .ts-input.focus {
  690. border-color: #2fb344;
  691. box-shadow: 0 0 0 0.25rem rgba(47, 179, 68, 0.25); }
  692. .input-group-sm > .ts-control .ts-input, .ts-control.form-select-sm .ts-input, .ts-control.form-control-sm .ts-input {
  693. min-height: calc(1.3333333em + 0.25rem + 2px);
  694. padding: 0 .75rem;
  695. border-radius: 2px;
  696. font-size: 0.75rem; }
  697. .input-group-sm > .ts-control .ts-input.has-items, .ts-control.form-select-sm .ts-input.has-items, .ts-control.form-control-sm .ts-input.has-items {
  698. min-height: calc(1.3333333em + 0.25rem + 2px) !important;
  699. font-size: 0.75rem;
  700. padding-bottom: 0; }
  701. .input-group-sm > .ts-control.multi .ts-input.has-items, .ts-control.form-select-sm.multi .ts-input.has-items, .ts-control.form-control-sm.multi .ts-input.has-items {
  702. padding-top: calc( (calc(1.3333333em + 0.25rem + 2px) - (1.3333333 * 0.75rem) - 4px)/2) !important; }
  703. .ts-control.multi .ts-input.has-items {
  704. padding-right: calc(0.75rem - 5px);
  705. padding-left: calc(0.75rem - 5px); }
  706. .ts-control.multi .ts-input > div {
  707. border-radius: calc(4px - 1px); }
  708. .input-group-lg > .ts-control > .ts-input, .ts-control.form-control-lg .ts-input, .ts-control.form-select-lg .ts-input {
  709. min-height: calc(1.3333333em + 1rem + 2px);
  710. border-radius: 8px;
  711. font-size: 1.25rem; }
  712. .ts-control:not(.form-select) {
  713. padding: 0;
  714. border: none;
  715. height: auto;
  716. box-shadow: none;
  717. background: none; }
  718. .ts-control:not(.form-select).single .ts-input {
  719. background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23d9dbde' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  720. background-repeat: no-repeat;
  721. background-position: left 0.75rem center;
  722. background-size: 16px 12px;
  723. padding-left: 2rem; }
  724. .ts-control.form-select {
  725. padding: 0;
  726. height: auto;
  727. box-shadow: none; }
  728. .ts-control.form-select .ts-input,
  729. .ts-control.form-select.single .ts-input.input-active {
  730. border: none !important;
  731. background: transparent !important; }
  732. .input-group > .ts-control {
  733. flex-grow: 1; }
  734. .input-group > .ts-control:not(:nth-child(2)) > .ts-input {
  735. border-top-right-radius: 0;
  736. border-bottom-right-radius: 0; }
  737. .input-group > .ts-control:not(:last-child) > .ts-input {
  738. border-top-left-radius: 0;
  739. border-bottom-left-radius: 0; }
  740. .ts-control .dropdown-menu {
  741. width: 100%;
  742. height: auto; }