index.css 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638
  1. .panel-button {
  2. border: none;
  3. cursor: pointer;
  4. position: relative;
  5. background-color: #313031;
  6. height: 24px;
  7. aspect-ratio: 1;
  8. display: inline-flex;
  9. align-items: center;
  10. justify-content: center;
  11. box-shadow:
  12. inset 8px 0px 4px -8px #000,
  13. inset -8px 0px 4px -8px #000,
  14. inset 0px 8px 4px -8px #000,
  15. inset 0px -8px 4px -8px #000,
  16. inset 0px 8px 4px -8px #fff,
  17. inset 0px -8px 2px -8px #432400,
  18. 0px 0px 4px 0px #000;
  19. }
  20. .panel-button:active,
  21. .panel-button.active {
  22. box-shadow:
  23. inset 0px 9px 2px -8px #000,
  24. inset 8px 0px 4px -8px #563a10,
  25. inset 8px 0px 4px -8px #563a10,
  26. inset -8px 0px 4px -8px #563a10,
  27. inset -8px 0px 4px -8px #563a10,
  28. inset 0px -9px 2px -8px #fff,
  29. 0px 0px 4px 0px #000;
  30. background-color: #f1be64;
  31. filter: none;
  32. outline: 0;
  33. }
  34. .panel-button.hover,
  35. .panel-button:focus,
  36. .panel-button:hover {
  37. color: #000;
  38. text-decoration: none;
  39. outline: 0;
  40. box-shadow:
  41. inset 8px 0px 4px -8px #000,
  42. inset -8px 0px 4px -8px #000,
  43. inset 0px 9px 2px -8px #fff,
  44. inset 0px -8px 4px -8px hsl(36, 94%, 20%),
  45. 0px 0px 4px 0px #000,
  46. inset 0px 0px 4px 2px #f9b44b;
  47. background-color: #e39827;
  48. filter: drop-shadow(0 0 2px #f9b44b);
  49. }
  50. input:focus {
  51. border: none;
  52. filter: drop-shadow(0 0 2px #f9b44b);
  53. }
  54. .button {
  55. background-color: #8e8e8e;
  56. padding: 10px 12px 10px 12px;
  57. font-size: 100%;
  58. text-align: left;
  59. color: #000;
  60. font-weight: 600;
  61. display: inline-block;
  62. vertical-align: baseline;
  63. min-width: 128px;
  64. border: none;
  65. line-height: inherit;
  66. white-space: nowrap;
  67. box-shadow:
  68. inset 8px 0px 4px -8px #000,
  69. inset -8px 0px 4px -8px #000,
  70. inset 0px 10px 2px -8px #e3e3e3,
  71. inset 0px 10px 2px -8px #282828,
  72. inset 0px -9px 2px -8px #000,
  73. 0px 0px 4px 0px #000;
  74. position: relative;
  75. margin-right: 14px;
  76. cursor: pointer;
  77. -webkit-user-select: none;
  78. -moz-user-select: none;
  79. user-select: none;
  80. height: 36px;
  81. text-align: left;
  82. }
  83. .button.icon {
  84. height: fit-content;
  85. min-width: auto;
  86. padding: 0;
  87. margin: 0;
  88. }
  89. .flex-column .button {
  90. margin-right: 0;
  91. }
  92. .button i {
  93. margin-right: 0px;
  94. }
  95. .button:hover,
  96. .button.hover {
  97. color: #000;
  98. text-decoration: none;
  99. outline: 0;
  100. box-shadow:
  101. inset 8px 0px 4px -8px #000,
  102. inset -8px 0px 4px -8px #000,
  103. inset 0px 9px 2px -8px #fff,
  104. inset 0px 8px 4px -8px #000,
  105. inset 0px -8px 4px -8px #000,
  106. inset 0px -9px 2px -8px #432400,
  107. 0px 0px 4px 0px #000,
  108. inset 0px 0px 4px 2px #f9b44b;
  109. background-color: #e39827;
  110. filter: drop-shadow(0 0 2px #f9b44b);
  111. }
  112. .button:active,
  113. .button.active {
  114. position: relative;
  115. padding-top: 12px;
  116. padding-bottom: 8px;
  117. vertical-align: -2px;
  118. box-shadow:
  119. inset 0px 10px 2px -8px #000,
  120. inset 0px 9px 2px -8px #000,
  121. inset 8px 0px 4px -8px #563a10,
  122. inset 8px 0px 4px -8px #563a10,
  123. inset -8px 0px 4px -8px #563a10,
  124. inset -8px 0px 4px -8px #563a10,
  125. inset 0px 9px 2px -8px #563a10,
  126. inset 0px -9px 2px -8px #563a10,
  127. inset 0px -8.5px 0px -8px #563a10,
  128. 0px 0px 4px 0px #000;
  129. background-color: #f1be64;
  130. filter: none;
  131. outline: 0;
  132. }
  133. .button.disabled,
  134. .button.disabled:hover,
  135. .button.disabled:active {
  136. padding-top: 10px;
  137. padding-bottom: 10px;
  138. cursor: default;
  139. vertical-align: 0;
  140. background-color: #3d3d3d;
  141. color: #818181;
  142. box-shadow:
  143. inset 8px 0px 4px -8px #000,
  144. inset -8px 0px 4px -8px #000,
  145. inset 0px 8px 4px -8px #000,
  146. inset 0px -6px 4px -8px #818181,
  147. inset 0px -8px 4px -8px #000,
  148. 0px 0px 4px 0px #000;
  149. filter: none;
  150. }
  151. .button-green {
  152. background-color: #5eb663;
  153. padding: 10px 12px 10px 12px;
  154. font-size: 100%;
  155. text-align: left;
  156. color: #000;
  157. font-weight: 600;
  158. display: inline-block;
  159. vertical-align: baseline;
  160. min-width: 128px;
  161. border: none;
  162. line-height: inherit;
  163. white-space: nowrap;
  164. box-shadow:
  165. inset 8px 0px 4px -8px #000,
  166. inset -8px 0px 4px -8px #000,
  167. inset 0px 10px 2px -8px #95df99,
  168. inset 0px 10px 2px -8px #163218,
  169. inset 0px -9px 2px -8px #000,
  170. 0px 0px 4px 0px #000;
  171. position: relative;
  172. margin-right: 14px;
  173. cursor: pointer;
  174. -webkit-user-select: none;
  175. -moz-user-select: none;
  176. user-select: none;
  177. height: 36px;
  178. text-align: left;
  179. }
  180. .flex-column .button-green {
  181. margin-right: 0;
  182. }
  183. .button-green i {
  184. margin-right: 0px;
  185. }
  186. .button-green:hover,
  187. .button-green:focus,
  188. .button-green.hover {
  189. color: #000;
  190. text-decoration: none;
  191. outline: 0;
  192. box-shadow:
  193. inset 8px 0px 4px -8px #000,
  194. inset -8px 0px 4px -8px #000,
  195. inset 0px 9px 2px -8px #cdf1cf,
  196. inset 0px 8px 4px -8px #000,
  197. inset 0px -8px 4px -8px #000,
  198. inset 0px -9px 2px -8px #432400,
  199. 0px 0px 4px 0px #000,
  200. inset 0px 0px 4px 2px #34be3c;
  201. background-color: #92e897;
  202. filter: drop-shadow(0 0 2px #34be3c);
  203. }
  204. .button-green:active,
  205. .button-green.active {
  206. position: relative;
  207. padding-top: 12px;
  208. padding-bottom: 8px;
  209. vertical-align: -2px;
  210. box-shadow:
  211. inset 0px 10px 2px -8px #000,
  212. inset 0px 9px 2px -8px #000,
  213. inset 8px 0px 4px -8px #3f5024,
  214. inset 8px 0px 4px -8px #3f5024,
  215. inset -8px 0px 4px -8px #3f5024,
  216. inset -8px 0px 4px -8px #3f5024,
  217. inset 0px 9px 2px -8px #3f5024,
  218. inset 0px -9px 2px -8px #3f5024,
  219. inset 0px -8.5px 0px -8px #3f5024,
  220. 0px 0px 4px 0px #000;
  221. background-color: #cfdf93;
  222. filter: none;
  223. outline: 0;
  224. }
  225. .button-green.disabled,
  226. .button-green.disabled:hover,
  227. .button-green.disabled:active {
  228. padding-top: 10px;
  229. padding-bottom: 10px;
  230. cursor: default;
  231. vertical-align: 0;
  232. background-color: #002b02;
  233. color: #376d3b;
  234. box-shadow:
  235. inset 8px 0px 4px -8px #000,
  236. inset -8px 0px 4px -8px #000,
  237. inset 0px 8px 4px -8px #000,
  238. inset 0px -6px 4px -8px #376d3b,
  239. inset 0px -8px 4px -8px #000,
  240. 0px 0px 4px 0px #000;
  241. filter: none;
  242. }
  243. .button-green-right {
  244. background-color: #5eb663;
  245. padding: 10px 12px 10px 12px;
  246. font-size: 100%;
  247. text-align: left;
  248. color: #000;
  249. font-weight: 600;
  250. display: inline-block;
  251. vertical-align: baseline;
  252. min-width: 128px;
  253. border: none;
  254. line-height: inherit;
  255. white-space: nowrap;
  256. box-shadow:
  257. inset 8px 0px 4px -8px #000,
  258. inset 0px 10px 2px -8px #95df99,
  259. inset 0px 10px 2px -8px #163218,
  260. inset 0px -9px 2px -8px #000,
  261. 0px 0px 4px 0px #000;
  262. position: relative;
  263. margin-right: 14px;
  264. cursor: pointer;
  265. -webkit-user-select: none;
  266. -moz-user-select: none;
  267. user-select: none;
  268. height: 36px;
  269. text-align: right;
  270. }
  271. .button-green-right::after {
  272. content: "";
  273. position: absolute;
  274. height: 100%;
  275. width: 24px;
  276. right: -10px;
  277. top: 0;
  278. background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAABACAMAAADCiszgAAABDlBMVEUAAAASMBURLxJJgUkAKxNKiU1Ih01msGpMjVFNjlFLik9ToFdLik9Lik9Lik5Yq1wIHgoOKhGAyoVNjVFipmY3cDpQkVVrsHB2vHlXmFyK1Y5/yoRvuHNcs2E7eT8bQB1doGFAe0IJIQxNjFJDgkhjrGgGHgxetmNcs2FasF9RllVVpllXqlxRnlVQm1RYrV0cQh5SoVcUNRdQk1VLllA8e0AXOhpQkFM0bDcqXC4jTiVRmFVFiUkIHgpTpFhNmVJEh0hNj1EtYTCI1I16w35utnJXn1tNk1FJkk1HjUs/fkI3czsyajYpWSsZPhxrsW9ZnV1XmVo6dz41bzgmUygkUCYiTSUTMRUPKxEOKRFdNbmJAAAAJ3RSTlMAVisODG41Bvb75Zfc1dGXlwb98/7y8fDS0JeXl5eXl25sVjU1MSucyRWzAAABMElEQVQ4y23M51LCUBiE4QWRKFFB7L37EUJTithI6FXs7f5vxDgok3Oy+/OdZxbGdrOZ3DyDOmMn2WptHM5odbfdflzdOtGq2ek8Pa/Pqtg0nVK3eLUUVWrcvsil08UVFaeszG/WsKQsT+tYJJW3s7caFpl8FOf8WKZ40YeFYqFYKBaKhWLx44V/LBQLxaLg+T8sFAvFouFYdFIZFoqFYqFYArjuYQngeuwUEsB19wii4lqu2x+s6dXO9QavDa1atuMOG2+Bh1658VFQq5XJutX3cQjaQal8XbgMQ6N31ZtKKAJKQSkoBaWgFJSCUlAKSkEpKAWloBSUglJQCkpBKSgFpdiz8rUARTxec9yRRmGYTv/lQaMw9ocjL6oUywfjyufXdxhqTdx7O46QmjhX4w9Fq5Q/daB+bwAAAABJRU5ErkJggg==");
  279. background-repeat: no-repeat;
  280. background-position: 100% 0%;
  281. background-size: contain;
  282. }
  283. .button-green-right i {
  284. margin-right: 0px;
  285. }
  286. .button-green-right:hover,
  287. .button-green-right:focus,
  288. .button-green-right.hover {
  289. color: #000;
  290. text-decoration: none;
  291. outline: 0;
  292. filter: brightness(1.3) drop-shadow(0 0 2px #34be3c);
  293. }
  294. .button-green-right:active,
  295. .button-green-right.active {
  296. position: relative;
  297. padding-top: 12px;
  298. padding-bottom: 8px;
  299. vertical-align: -2px;
  300. box-shadow:
  301. inset 0px 10px 2px -8px #000,
  302. inset 0px 9px 2px -8px #000,
  303. inset 8px 0px 4px -8px #3f5024,
  304. inset 8px 0px 4px -8px #3f5024,
  305. inset 0px 9px 2px -8px #3f5024,
  306. inset 0px -9px 2px -8px #3f5024,
  307. inset 0px -8.5px 0px -8px #3f5024,
  308. 0px 0px 4px 0px #000;
  309. background-color: #cfdf93;
  310. filter: none;
  311. outline: 0;
  312. }
  313. .button-green-right:active::after,
  314. .button-green-right.active::after {
  315. content: "";
  316. position: absolute;
  317. height: 100%;
  318. width: 24px;
  319. right: -10px;
  320. top: 0;
  321. background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAABACAMAAADCiszgAAACBFBMVEUAAACWq1clPgwnPRChwmOhv18iOQ4iOhEdLwwhNBAkOA8jOQ4iNBAkPBSJolSUs1t1ij4kNA4MHwAhLwwhMw0hMQ+Fn0+Jp16Xt14aLA0kOxQlPBR5jkAnOBMqOhYVJQYOIgMcLgsLHQIoPRgZKQoiOBEkOxF4jj6SsFkLGwMlORdOYCRleS4/UB9ohU8xRR3P35PD5ovO3pHM3ZDK243A1IXG2Iq4zX7N4JLM4ZHL4pDJ4o+ev2nH44/F5I6guGoxRxitw3WBmlNxiUZOZS294YW12H0+VCKqzXOcvGWSqmBedjmevmSRqV9geDoQIQIJGgLJ346v0nquxHUmMSMEEQTF4Y3B44mtzom+3IegwoSVt3+etWlwj2KKpld+llJ/mVFuhUQ6TiLH2oq704nA24e21Ya73oW73oOz1X210n2oy3Klxm6lvW6Lq22YuWWaumSUs2KYt2CQpl6Rr1yLqFuNplqBnFF0jEN2kEJeci9MYi1LYCtBVCU9UyItQBguQxccKBLK3Y3C2onD1YfC2IWrzYS22YC6z32bvny1ynu10HigwnaoyHOpx22brmmjv2WWtWGMq2GPr196lV2AnFprh1iSrlZ4k1ZuilaLp1F4kEpyikhmfUF1jEBdcD5acjdUZzdtgjZacDNNYi5HWy0zQyg4TCYoNx4pOxsmMRogMA46/ea2AAAAMHRSTlMADhT7YTLolBhR/O2XTTk1Ev779vKcbWxlVk5MPv76+Ovpp6CclpRzZ15aVU5JRxpOaUmtAAAB4klEQVQ4y23Q5VuTcRTG8VtRBKQEAxS7++BgM6YOwYBJbOo6AQnp7rK7u5v6J3keHsbO2fW7X36vz4tzHVRryzmIhNVoy9mVArkb2mp25ENuZm5qqnr7ngT849e/6dn5namyvugJf/trS0tfKWqxpa0/OjqZnCFq0d3HgbB9PGmfwCeKiksqS8tsyVt4JZPZcv6C/XLSGo5JiUmJKY4zWFViUmJSYlrCFRpeu5lXA1cxTEpMAu9dwiRxarzGcezPtIyvVXwts603MAk8npaeYlSGS0cmDUwcR+y16zbomDiujI5O5ObrleNA+KeBieOSnujIRO4hrTJcZwlEqsa27j6uV3HGlz+1246CeK572NY/NDx2WNbb9568/Px9+Iio5Lh56/mHod8Fop7UamtocH+2qKcc3mbrwGABwOlpl9fZFdmYDXB6xtX4rG8gEwCnZ90PrCGdgtNzbmdXSKfgtLCptffACr1yWtjc0ZsFfZxebHmVt0jB6SVrt0HB6ZXOVQaFoOWrYYzT8hgFp1djFEoKJYWSQkmhpFBSKCmUFCaTw+VuaukUFGbzHW+js6NbUNTXNzQ4rW/yBIXH47n/9HVfFsR8Pt+j9nebJIXf729/+zETcsFg8P2nRIrr2v4fg9wCPnjQTyTwM1IAAAAASUVORK5CYII=");
  322. background-repeat: no-repeat;
  323. background-position: 100% 0%;
  324. background-size: contain;
  325. }
  326. .button-green-right.disabled,
  327. .button-green-right.disabled:hover,
  328. .button-green-right.disabled:active {
  329. padding-top: 10px;
  330. padding-bottom: 10px;
  331. cursor: default;
  332. vertical-align: 0;
  333. background-color: #002b02;
  334. color: #376d3b;
  335. box-shadow:
  336. inset 8px 0px 4px -8px #000,
  337. inset -8px 0px 4px -8px #000,
  338. inset 0px 8px 4px -8px #000,
  339. inset 0px -6px 4px -8px #376d3b,
  340. inset 0px -8px 4px -8px #000,
  341. 0px 0px 4px 0px #000;
  342. filter: none;
  343. }
  344. .button-red {
  345. background-color: #fe5a5a;
  346. padding: 10px 12px 10px 12px;
  347. font-size: 100%;
  348. text-align: left;
  349. color: #000;
  350. font-weight: 600;
  351. display: inline-block;
  352. vertical-align: baseline;
  353. min-width: 128px;
  354. border: none;
  355. line-height: inherit;
  356. white-space: nowrap;
  357. box-shadow:
  358. inset 8px 0px 4px -8px #000,
  359. inset -8px 0px 4px -8px #000,
  360. inset 0px 10px 2px -8px #fda1a1,
  361. inset 0px 10px 2px -8px #8b0101,
  362. inset 0px -9px 2px -8px #000,
  363. 0px 0px 4px 0px #000;
  364. position: relative;
  365. margin-right: 14px;
  366. cursor: pointer;
  367. -webkit-user-select: none;
  368. -moz-user-select: none;
  369. user-select: none;
  370. height: 36px;
  371. text-align: left;
  372. }
  373. .flex-column .button-red {
  374. margin-right: 0;
  375. }
  376. .button-red i {
  377. margin-right: 0px;
  378. }
  379. .button-red:hover,
  380. .button-red:focus,
  381. .button-red.hover {
  382. color: #000;
  383. text-decoration: none;
  384. outline: 0;
  385. box-shadow:
  386. inset 8px 0px 4px -8px #000,
  387. inset -8px 0px 4px -8px #000,
  388. inset 0px 9px 2px -8px #f8eaea,
  389. inset 0px 8px 4px -8px #000,
  390. inset 0px -8px 4px -8px #000,
  391. inset 0px -9px 2px -8px #432400,
  392. 0px 0px 4px 0px #000,
  393. inset 0px 0px 4px 2px #c35353;
  394. background-color: #ff9b9b;
  395. filter: drop-shadow(0 0 2px #c35353);
  396. }
  397. .button-red:active,
  398. .button-red.active {
  399. position: relative;
  400. padding-top: 12px;
  401. padding-bottom: 8px;
  402. vertical-align: -2px;
  403. box-shadow:
  404. inset 0px 10px 2px -8px #000,
  405. inset 0px 9px 2px -8px #000,
  406. inset 8px 0px 4px -8px #642323,
  407. inset 8px 0px 4px -8px #642323,
  408. inset -8px 0px 4px -8px #642323,
  409. inset -8px 0px 4px -8px #642323,
  410. inset 0px 9px 2px -8px #642323,
  411. inset 0px -9px 2px -8px #642323,
  412. inset 0px -8.5px 0px -8px #642323,
  413. 0px 0px 4px 0px #000;
  414. background-color: #fca8a8;
  415. filter: none;
  416. outline: 0;
  417. }
  418. .button-red.disabled,
  419. .button-red.disabled:hover,
  420. .button-red.disabled:active {
  421. padding-top: 10px;
  422. padding-bottom: 10px;
  423. cursor: default;
  424. vertical-align: 0;
  425. background-color: #571f1f;
  426. color: #8c4e4e;
  427. box-shadow:
  428. inset 8px 0px 4px -8px #000,
  429. inset -8px 0px 4px -8px #000,
  430. inset 0px 8px 4px -8px #000,
  431. inset 0px -6px 4px -8px #8c4e4e,
  432. inset 0px -8px 4px -8px #000,
  433. 0px 0px 4px 0px #000;
  434. filter: none;
  435. }
  436. .field {
  437. display: flex;
  438. flex-direction: column;
  439. gap: 4px;
  440. }
  441. .field label {
  442. font-size: 11px;
  443. color: #999;
  444. }
  445. .field.horizontal {
  446. display: inline-flex;
  447. flex-direction: row;
  448. align-items: center;
  449. }
  450. select,
  451. input[type="text"],
  452. input[type="password"],
  453. input[type="email"],
  454. input[type="url"],
  455. input[type="search"],
  456. textarea {
  457. vertical-align: baseline;
  458. font-family: inherit;
  459. line-height: 1.2;
  460. font-size: 105%;
  461. height: 32px;
  462. max-width: 100%;
  463. background: #8e8e8e;
  464. border-radius: 4px;
  465. padding: 5px 8px;
  466. border: none;
  467. box-shadow:
  468. inset 0px 4px 1px -2px #000,
  469. inset 0px -4px 1px -2px #c5c5c5,
  470. inset 2px 0px 1px 0px #5f5f5f,
  471. inset -2px 0px 1px 0px #5f5f5f,
  472. inset 0px -2px 2px 0px #5f5f5f,
  473. 0px 0px 4px 1px #2e2521;
  474. }
  475. select,
  476. input[type="text"]:focus,
  477. input[type="password"]:focus,
  478. input[type="email"]:focus,
  479. input[type="url"]:focus,
  480. input[type="search"]:focus,
  481. textarea:focus {
  482. outline: none;
  483. color: #000;
  484. background: #f0dab4;
  485. box-shadow:
  486. inset 0px 4px 2px -2px #000,
  487. inset 0px -1px 1px 0px #74624b,
  488. inset 0px -4px 2px -2px #e0e0e0,
  489. inset 2px 0px 2px 0px #a6885c,
  490. inset -2px 0px 2px 0px #a6885c,
  491. 0px 0px 4px 1px #2e2521;
  492. }
  493. input.dark,
  494. select.dark {
  495. background-color: #242324;
  496. border: 1px solid #646464;
  497. color: #ffe6c0;
  498. }
  499. input:focus.dark,
  500. select:focus.dark {
  501. outline: 2px solid #f1be64;
  502. outline-offset: 1px;
  503. }
  504. textarea {
  505. width: 100%;
  506. height: 8.1em;
  507. }
  508. .checkbox-label {
  509. margin-top: 8px;
  510. margin-bottom: 8px;
  511. display: flex;
  512. align-content: center;
  513. position: relative;
  514. cursor: pointer;
  515. line-height: 1.2;
  516. break-inside: avoid;
  517. }
  518. .checkbox-label > div {
  519. width: 100%;
  520. padding-left: 8px;
  521. }
  522. .checkbox-label input {
  523. position: relative;
  524. top: -1px;
  525. left: 0px;
  526. width: 16px;
  527. height: 15px;
  528. padding: 6px;
  529. position: absolute;
  530. opacity: 0;
  531. cursor: pointer;
  532. }
  533. .checkbox-label .checkbox {
  534. margin: auto;
  535. position: relative;
  536. top: -1px;
  537. left: 0px;
  538. width: 16px;
  539. height: 15px;
  540. padding: 6px;
  541. background: #8e8e8e;
  542. box-shadow:
  543. inset 0px 4px 2.5px -2.5px #111,
  544. inset 2px 0px 2px 0px #323232,
  545. inset -2px 0px 2px 0px #323232,
  546. inset 0px -1px 1px 0px #fff,
  547. inset 0px -4px 2px -2px #8e8e8e,
  548. 0px 0px 4px 1px #2e2521;
  549. }
  550. .checkbox-label .checkbox:hover,
  551. .checkbox-label .checkbox.hover,
  552. .checkbox-label .checkbox:active,
  553. .checkbox-label .checkbox.active,
  554. .checkbox-label input:focus ~ .checkbox {
  555. background: #e39827;
  556. box-shadow:
  557. inset 0px 4px 2px -2px #412a07,
  558. inset 2px 0px 2px 0px #5a3c10,
  559. inset -2px 0px 2px 0px #5a3c10,
  560. inset 0px -2px 2px 0px #d0ae79,
  561. inset 0px -2px 4px 0px #c78627,
  562. 0px 0px 4px 1px #786b4f;
  563. }
  564. .checkbox-label .checkbox:active,
  565. .checkbox-label .checkbox.active {
  566. background: #f3c98e;
  567. box-shadow:
  568. inset 0px 4px 2px -2px #412a07,
  569. inset 2px 0px 2px 0px #5a3c10,
  570. inset -2px 0px 2px 0px #5a3c10,
  571. inset 0px -2px 2px 0px #d0ae79,
  572. inset 0px -2px 4px 0px #c78627,
  573. inset 0px 1px 2.5px 4.5px #e39827,
  574. 0px 0px 4px 1px #786b4f;
  575. }
  576. .checkbox-label .checkbox:disabled,
  577. .checkbox-label .checkbox.disabled {
  578. background: #313031;
  579. box-shadow:
  580. inset 0px 4px 2.5px -2.5px #111,
  581. inset 2px 0px 2px 0px #323232,
  582. inset -2px 0px 2px 0px #323232,
  583. inset 0px -1px 1px 0px #666,
  584. inset 0px -4px 2px -2px #8e8e8e,
  585. 0px 0px 4px 1px #2e2521;
  586. }
  587. .checkbox-label input:checked ~ .checkbox {
  588. background: #e39827;
  589. }
  590. .checkbox-label input:checked ~ .checkbox:active,
  591. .checkbox-label input:checked ~ .checkbox.active {
  592. background: #f3c98e;
  593. }
  594. .checkbox-label .checkbox::after {
  595. position: absolute;
  596. content: "";
  597. }
  598. .checkbox-label input:checked ~ .checkbox::after {
  599. -webkit-transform: rotate(45deg) scale(1);
  600. -ms-transform: rotate(45deg) scale(1);
  601. transform: rotate(45deg) scale(1);
  602. opacity: 1;
  603. left: 6px;
  604. top: 3px;
  605. width: 2px;
  606. height: 6px;
  607. border: solid #282728;
  608. border-width: 0 2.5px 2.5px 0;
  609. background-color: transparent;
  610. border-radius: 0;
  611. }
  612. .disable-checkbox-label input[type="checkbox"] {
  613. position: relative;
  614. opacity: 1;
  615. -webkit-appearance: none;
  616. appearance: none;
  617. margin: 0;
  618. margin-top: 2px;
  619. width: 1.2em;
  620. height: 1.2em;
  621. cursor: pointer;
  622. background-color: transparent;
  623. background-repeat: no-repeat;
  624. background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48IS0tISBGb250IEF3ZXNvbWUgRnJlZSA2LjQuMCBieSBAZm9udGF3ZXNvbWUgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbSBMaWNlbnNlIC0gaHR0cHM6Ly9mb250YXdlc29tZS5jb20vbGljZW5zZSAoQ29tbWVyY2lhbCBMaWNlbnNlKSBDb3B5cmlnaHQgMjAyMyBGb250aWNvbnMsIEluYy4gLS0+PHN0eWxlPnN2Z3tmaWxsOiNhNmE2YTZ9PC9zdHlsZT48cGF0aCBkPSJNMzY3LjIgNDEyLjVMOTkuNSAxNDQuOEM3Ny4xIDE3Ni4xIDY0IDIxNC41IDY0IDI1NmMwIDEwNiA4NiAxOTIgMTkyIDE5MmM0MS41IDAgNzkuOS0xMy4xIDExMS4yLTM1LjV6bTQ1LjMtNDUuM0M0MzQuOSAzMzUuOSA0NDggMjk3LjUgNDQ4IDI1NmMwLTEwNi04Ni0xOTItMTkyLTE5MmMtNDEuNSAwLTc5LjkgMTMuMS0xMTEuMiAzNS41TDQxMi41IDM2Ny4yek0wIDI1NmEyNTYgMjU2IDAgMSAxIDUxMiAwQTI1NiAyNTYgMCAxIDEgMCAyNTZ6Ii8+PC9zdmc+");
  625. }
  626. .disable-checkbox-label input[type="checkbox"]:hover {
  627. background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48IS0tISBGb250IEF3ZXNvbWUgRnJlZSA2LjQuMCBieSBAZm9udGF3ZXNvbWUgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbSBMaWNlbnNlIC0gaHR0cHM6Ly9mb250YXdlc29tZS5jb20vbGljZW5zZSAoQ29tbWVyY2lhbCBMaWNlbnNlKSBDb3B5cmlnaHQgMjAyMyBGb250aWNvbnMsIEluYy4gLS0+PHN0eWxlPnN2Z3tmaWxsOiNmZmI1MzN9PC9zdHlsZT48cGF0aCBkPSJNMzY3LjIgNDEyLjVMOTkuNSAxNDQuOEM3Ny4xIDE3Ni4xIDY0IDIxNC41IDY0IDI1NmMwIDEwNiA4NiAxOTIgMTkyIDE5MmM0MS41IDAgNzkuOS0xMy4xIDExMS4yLTM1LjV6bTQ1LjMtNDUuM0M0MzQuOSAzMzUuOSA0NDggMjk3LjUgNDQ4IDI1NmMwLTEwNi04Ni0xOTItMTkyLTE5MmMtNDEuNSAwLTc5LjkgMTMuMS0xMTEuMiAzNS41TDQxMi41IDM2Ny4yek0wIDI1NmEyNTYgMjU2IDAgMSAxIDUxMiAwQTI1NiAyNTYgMCAxIDEgMCAyNTZ6Ii8+PC9zdmc+");
  628. }
  629. .disable-checkbox-label input[type="checkbox"]:checked {
  630. background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48IS0tISBGb250IEF3ZXNvbWUgRnJlZSA2LjQuMCBieSBAZm9udGF3ZXNvbWUgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbSBMaWNlbnNlIC0gaHR0cHM6Ly9mb250YXdlc29tZS5jb20vbGljZW5zZSAoQ29tbWVyY2lhbCBMaWNlbnNlKSBDb3B5cmlnaHQgMjAyMyBGb250aWNvbnMsIEluYy4gLS0+PHN0eWxlPnN2Z3tmaWxsOiNmZmEyMDB9PC9zdHlsZT48cGF0aCBkPSJNMzY3LjIgNDEyLjVMOTkuNSAxNDQuOEM3Ny4xIDE3Ni4xIDY0IDIxNC41IDY0IDI1NmMwIDEwNiA4NiAxOTIgMTkyIDE5MmM0MS41IDAgNzkuOS0xMy4xIDExMS4yLTM1LjV6bTQ1LjMtNDUuM0M0MzQuOSAzMzUuOSA0NDggMjk3LjUgNDQ4IDI1NmMwLTEwNi04Ni0xOTItMTkyLTE5MmMtNDEuNSAwLTc5LjkgMTMuMS0xMTEuMiAzNS41TDQxMi41IDM2Ny4yek0wIDI1NmEyNTYgMjU2IDAgMSAxIDUxMiAwQTI1NiAyNTYgMCAxIDEgMCAyNTZ6Ii8+PC9zdmc+");
  631. }
  632. .simplebar-scrollbar::before {
  633. background-color: #e39827;
  634. }